* 요즘은 링크드인에 안 올렸던 뉴스레터 보내기에 재미가 들렸네요. ^_^
링크드인으로 DM이 왔습니다.
AI 브랜드 마케팅 컨설팅을 받고 싶습니다.
포트폴리오가 있으신가요?
저는 물론 포트폴리오가 있습니다.
- 프로젝트 이름
- 사용한 스킬셋
- 배경 (이 문제가 왜 이렇게 어려웠는지)
- 해결 방법
- 결과
로 나눈 자료가 있지만 그래도 요즘 바이브코딩에 심취한 이상 사이트로 만들고 싶었어요.
1. 레퍼런스 찾기
먼저 레퍼런스를 찾아보았습니다.
핀터레스트에서 'Personal Portfolio'를 검색했어요.
저는 이것을 골랐어요.
2. 내용 채우기
먼저 포트폴리오의 목차를 정해야 했는데, 이 역시 젠스파크에서 했습니다.
젠스파크에는 '리서치미' 기능이 있어서 저에 대한 URL을 넣으면
알아서 조사를 하고 제 정보를 파악하더라고요! (당연히 링크드인 URL을 넣었습니다.)
이미 저에 대한 배경 정보를 가지고 있는 젠스파크에게
❶ 컨설팅을 의뢰한 분이 제공한 '자격 요건'
❷ 저의 여러 채널 커버리지 (링크드인, 스레드, 블로그, 뉴스레터)
❸ 링크드인에서 파악하기 어려운 성과들
을 전달하며 Portfolio 목차 10개 영역을 짜달라고 했습니다.
이렇게 받았는데 원하는 꼭지을 추려서 노션에 넣고 내용을 채우기 시작했어요.
노션을 안 쓰신다면, 워드에 쓰고 html로 저장하시면 됩니다.
완성 후 메뉴에서 Export를 누르면 html + 폴더 안 이미지들로 다운로드 받을 수 있어요.
이제 준비 끝!
클로드 코드를 설치합니다. (유료 유저만 사용 가능)
* 클로드 코드란?! (Claude Code)
3. 클로드 코드에게 포트폴리오 만들라고 시키기
맥 기준으로 터미널을 열고
cd 'html과 이미지 폴더가 있는 폴더 경로'를 넣고 엔터
또 다시 claude를 넣고 엔터를 치면
개발이 필요한 폴더 안에서 클로드 코드가 소환이 돼요.
그러고 나서 그냥 프롬프트를 칩니다.
저는 그냥 영어로 이렇게 보냈어요. (한글 프롬프트도 되지만, 영문이 토큰 소모가 적대요.)
이 폴더 안의 html이랑 사진들을 이용해서 영문 포트폴리오 웹사이트를 만들어줘. 자연스럽게 요소를 배치해주고 요소 빼먹지마. 그냥 나열하지 말고 인터렉티브하게. 링크랑 영상 삽입 등 사용해서. 그리고 이 이미지를 레퍼런스로 써.
+ 이미지 경로: /Users/seulki/Documents/Portfolio/reference.jpg
4. 결과는?!
물론 사소한 수정을 거치긴 했는데 첫 결과물도 크게 다르지 않았어요!
- 함께 일한 회사들 로고들을 주면서 '슬라이드 효과 주고, 각 업무 별로도 관련 로고를 넣어줘' 라던지
- 양쪽 슬라이드 더 잘 보이게 화살표 넣어줘.
- 이 내용 추가해줘, 빼줘 등의 요청을 했는데
클로드 코드는 몇 번 대화하면 limit이 찼다며 대화가 끊기기 때문에
비슷한 용도이지만 무료이고, 나노바나나프로 이미지 생성도 가능한
안티그래비티에 수정 작업을 시켰습니다.
똑같이 작업 중인 폴더를 열고 프롬프트를 던지는 형식이에요!
안티그래비티 사용법은 이 글을 참고하세요!
5. 완성된 결과를 Git Hub에 올리고, 제가 가진 도메인에 연결했습니다.
진심! 이 단계가 1~4번의 단계보다 100배 더 어려웠습니다.
왜 설정/기능 다 숨겨 놓는 걸까요.
이 부분은 제가 ChatGPT를 잡도리한 대화 링크로 설명을 생략할게요.
이게 정말 다인데요.
그!래!도!
이런거 모여서 함께 만들고 싶은 분들이 있을까요?
(수요 조사)
함께 포트폴리오 웹사이트 만들고 싶으신가요?
총 10명이 투표했습니다.
제가 최근 만든 파일 정리 맥앱 Mess Organizer도 보내드릴테니
맥 쓰시는 분들은 써보시고, 많은 의견 주시면 글로벌 정식 출시 도전해볼랍니다. 😙
의견을 남겨주세요