클로드 코드로 마케터 포트폴리오 사이트 만들기

클로드 코드 + 안티그래비티 + 프롬프팅으로 뚝딱

by Suki

Jan 15. 2026

링크드인으로 DM이 왔습니다.

AI 브랜드 마케팅 컨설팅을 받고 싶습니다.
포트폴리오가 있으신가요?

저는 물론 포트폴리오가 있습니다.

프로젝트 이름

사용한 스킬셋

배경 (이 문제가 왜 이렇게 어려웠는지)

해결 방법

결과

로 나눈 자료가 있지만 그래도 요즘 바이브코딩에 심취한 이상 사이트로 만들고 싶었어요.

1. 레퍼런스 찾기

먼저 레퍼런스를 찾아보았습니다.

핀터레스트에서 'Personal Portfolio'를 검색했어요.

괜찮은 사례가 참 많습니다.

저는 이것을 골랐어요.

2. 내용 채우기

먼저 포트폴리오의 목차를 정해야 했는데, 이 역시 젠스파크에서 했습니다.

젠스파크에는 '리서치미' 기능이 있어서 저에 대한 URL을 넣으면

알아서 조사를 하고 제 정보를 파악하더라고요! (당연히 링크드인 URL을 넣었습니다.)

평가가 좀 과하군

이미 저에 대한 배경 정보를 가지고 있는 젠스파크에게

❶ 컨설팅을 의뢰한 분이 제공한 '자격 요건'

❷ 저의 여러 채널 커버리지 (링크드인, 스레드, 블로그, 뉴스레터)

❸ 링크드인에서 파악하기 어려운 성과들

을 전달하며 Portfolio 목차 10개 영역을 짜달라고 했습니다.

이렇게 받았는데 원하는 꼭지을 추려서 노션에 넣고 내용을 채우기 시작했어요.

노션을 안 쓰신다면, 워드에 쓰고 html로 저장하시면 됩니다.

완성 후 메뉴에서 Export를 누르면 html + 폴더 안 이미지들로 다운로드 받을 수 있어요.

이제 준비 끝!

클로드 코드를 설치합니다. (유료 유저만 사용 가능)

* 클로드 코드란?! (Claude Code)

ChatGPT, 클로드와 다를 게 없어요.
'프롬프트 던지면' -> '개발자 처럼 개발을 해주는데'
다만 웹에서 뚝딱이 아니라 개발 화면을 써야 하니 낯설 수는 있지만
일단 설치 후에 써보시기만 하면 금방 적응하실거에요.
* 최근에 Claude Cowork라고 Claude Code를 익숙한 UI로 쓸 수 있는 기능이 나왔는데, 월 $200 MAX 플랜 유저, 맥 유저만 쓸 수 있다고 해요.

� 설치방법: 윈도우, 맥

3. 클로드 코드에게 포트폴리오 만들라고 시키기

맥 기준으로 터미널을 열고

cd 'html과 이미지 폴더가 있는 폴더 경로'를 넣고 엔터

또 다시 claude를 넣고 엔터를 치면

개발이 필요한 폴더 안에서 클로드 코드가 소환이 돼요.

그러고 나서 그냥 프롬프트를 칩니다.

저는 그냥 영어로 이렇게 보냈어요. (한글 프롬프트도 되지만, 영문이 토큰 소모가 적대요.)

이 폴더 안의 html이랑 사진들을 이용해서 영문 포트폴리오 웹사이트를 만들어줘. 자연스럽게 요소를 배치해주고 요소 빼먹지마. 그냥 나열하지 말고 인터렉티브하게. 링크랑 영상 삽입 등 사용해서. 그리고 이 이미지를 레퍼런스로 써.
+ 이미지 경로: /Users/seulki/Documents/Portfolio/reference.jpg