📝 한줄 요약
코드를 전혀 모르는 콘텐츠 마케터가 Claude Code로 TikTok 포트폴리오 사이트를 만들고 Vercel 배포까지, 이틀이면 충분했다.
바쁘시면 이것만 읽어도 돼요:
비개발자가 Claude Code로 TikTok 임베드 포트폴리오 제작 + Vercel 배포 완료
원하는 걸 완벽하게 설명 못 해도 된다 — "더 bold하게"만 했는데 다크모드, 애니메이션, 커서 효과까지 제안해줬다
선택지를 골라가며 방향을 잡는 방식이라 비개발자도 막힘 없이 진행 가능
배포까지는 쉬웠지만, 도메인 세부 설정은 직접 더 공부해야 할 부분으로 남았다
몇 달째 미루던 일을 이틀 만에 끝낸 건 결국 "시작하는 것"이 달라졌기 때문
🎯 이런 분들께 도움돼요
포트폴리오 만들어야 한다는 걸 알면서 계속 미루고 있는 비개발자
Claude Code나 AI 코딩 툴이 궁금한데 나랑 상관없는 얘기인 줄 아는 분
글, 영상, 디자인 등 창작 직군에서 자기 작업물을 제대로 보여줄 공간이 필요한 분
😫 문제 상황 (Before)
콘텐츠 마케터로 일하면서 TikTok 영상을 꽤 많이 만들었다. 근데 그걸 보여줄 공간이 없었다.
노션으로 정리해두긴 했는데, TikTok 영상을 노션에 넣으면 그냥 링크로만 나온다. 임베드를 할 수는 있지만, 첫인상도 별로다. 링크드인도 마찬가지였다. 이력서 PDF를 보내는 것보다 나을 게 없었다.
"언젠가 포트폴리오 사이트를 만들어야지" 하고 몇 달을 미뤘다. 스터디 첫 과제로 괜찮을 것 같아 만들어 보기로 했다.
🛠️ 사용한 도구
도구: Claude Code (Anthropic CLI)
모델: Claude Sonnet 4.6
배포: Vercel
🔧 작업 과정
뭘 원하는지 몰라도 시작할 수 있었다
첫째 날에는 시험삼아 만들어 봤다면, 둘째 날에는 보다 더 체계적으로 접근하고 싶 었다. 그냥 "만들어줘"가 아니라 방향을 제대로 잡고 싶었다.
Claude가 먼저 물어봤다. 이 포트폴리오의 핵심 목적이 뭔지, 누가 보게 될지, 어떤 상태가 되면 성공이라고 느낄지. 선택지가 있었고 나는 고르기만 했다.
30초 안에 내가 어떤 일을 하는 사람인지 파악되면 좋겠다고 했다. 기술 스택 결정도 마찬가지였다. "지금은 빠르게 만들고, 나중에 더 고도화할 수 있는 방향"으로 고르면 됐다.
방향이 정해지자 Claude가 구조를 먼저 보여줬다. 어떤 섹션이 들어가고, 카드는 어떻게 구성되고, TikTok 영상은 어떻게 보여줄지. 각 단계마다 "이 방향 맞나요?" 하고 확인을 받았다. 내가 "맞아" 하면 다음 단계로 넘어갔다.
구체적인 내용(이름, 이메일, TikTok 영상 링크)을 입력하자 사이트가 완성됐다.
"더 bold하게"만 했는데 이렇게 됐다
초안이 나왔을 때 느낌이 좀 밋밋했다. 그래서 이렇게 입력했다.
더 bold하게 바꿔줘, 다크모드 추가도 좋을 것 같고 인터랙션도 넣으면 좋겠어.이 정도면 요청이 너무 두루뭉술한 거 아닌가 싶었는데, Claude의 반응이 예상 밖이었다.
선택지가 쏟아졌다. 다크모드를 기본으로 하고 라이트로 전환할 수 있게 할지, 반대로 할지. 어떤 인터랙션을 넣을지 — 스크롤하면 섹션이 등장하는 효과, 마우스를 따라다니는 커서 글로우, 카드에 마우스를 올리면 살짝 떠오르는 효과. 포인트 컬러는 Electric Lime, 웜 오렌지, 바이올렛, 아이스 블루 중에서 고르게끔 했다.
"더 bold하게" 한마디에서 이렇게 구체적인 옵션들이 나올 줄 몰랐다. 나는 다크모드 기본, Electric Lime 포인트 컬러, 커서 글로우 포함으로 골랐다. 결과물이 나왔을 때 진짜로 "오" 소리가 났다.
내 피드백이 바로 반영됐다
완성된 게 마냥 좋진 않았다. 다크모드에서는 형광 연두색이 딱 맞는데, 라이트모드로 전환하면 그 색이 갑자기 촌스러워 보였다.
라이트 모드에서는 포인트 색상을 다른 걸로 바꿔줘. 모노톤은 어떻게 생각해?Claude는 라이트모드에서는 순수 검정을 쓰겠다고 했다. 다크는 형광 라임, 라이트는 모노크롬. 두 모드가 아예 다른 개성을 갖게 됐다. 피드백 한 번으로 이렇게 깔끔하게 정리될 줄은 몰랐다.
Vercel 배포! 개발자 영역인 줄 알았는데...
배포는 진짜 해낼 수 있을지 걱정됐던 부분이다. 서버에 뭔가 올린다는 게 내 영역이 아닌 것 같았으니까.
Claude가 순서대로 알려줬다. Vercel CLI 설치, 명령어 입력, GitHub 계정 연동. vercel이라는 명령어 하나를 입력했더니 자동으로 파일을 감지하고 배포가 됐다. 빌드 설정 같은 건 건드릴 필요도 없었다.
다만 도메인 이름은 생각대로 되지 않았다. 임의로 붙은 이름을 원하는 이름으로 바꾸는 건 됐는데, 더 세밀한 도메인 설정은 아직 잘 모르겠다. 이 부분은 나중에 더 공부해야 할 것 같다. 모든 게 한 번에 완벽하게 해결되진 않는다는 것도 배웠다.
✅ 결과 (After)
Before vs After
작업물 공유 방식: 노션 링크, 이력서 PDF → 사이트 링크 하나
TikTok 영상 노출: 링크만 전달 → 사이트에서 바로 재생
포트폴리오 제작 기간: 몇 달째 미룸 → 이틀
배포 경험: 없음 → Vercel 직접 배포 완료
결과물
TikTok 영상 임베드 갤러리 (캠페인별 구분)
다크/라이트 모드 토글 (기본 다크, 전환 시 모노크롬)
스크롤 애니메이션, 커서 글로우, 카드 호버 효과
Vercel 배포 완료
현지 홈페이지
링크는 아직 부끄러워서 비공개...
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
완벽하게 설명 안 해도 된다 — "더 bold하게"처럼 두루뭉술하게 말해도 Claude가 구체적인 선택지를 만들어준다. 내가 모르는 걸 Claude가 정리해준다는 느낌이었다.
선택지가 있으면 방향이 빨리 잡힌다 — 기획 단계에서 Claude가 계속 물어봐줬는데, 덕분에 내가 원하는 게 뭔지 내가 더 명확히 알게 됐다.
피드백은 솔직하게 — "이거 이상한데?" 하면 바로 수정해준다. 전문 용어 몰라도 된다.
이렇게 하면 안 돼요
모든 걸 AI가 알아서 해주길 기대하면 안 된다 — 실제 데이터(조회수 등)는 내가 직접 입력해야 했다. AI가 인터넷에서 내 정보를 알아서 가져오진 않는다.
배포 후 설정까지 한 번에 다 해결되길 기대하지 않는 게 좋다 — Vercel 도메인 설정처럼 세부적인 부분은 추가로 공부가 필요하다.
🌍 다른 업무에 적용한다면?
포트폴리오 말고도 이런 상황에 써볼 수 있을 것 같다:
프리랜서 서비스 소개 페이지
소규모 행사나 프로젝트 랜딩 페이지
개인 브랜드 소개 사이트
공통점은 "있으면 좋은데 만들기 어려워서 미루고 있는 것들". 그게 이 도구가 가장 잘 맞는 상황인 것 같다.
🚀 앞으로의 계획
당장은 영상을 더 추가하고 조회수 같은 메트릭을 채워넣을 예정이다. Vercel 도메인 설정도 제대로 배워서 정리하고 싶다.
