이 웹사이트 전체 — 당신이 클릭하며 지나가는 페이지들, 일러스트레이션, 이 포스트가 게시된 CMS, 심지어 브라우저 탭의 파비콘(favicon)까지 — 모두 Anthropic의 AI 코딩 에이전트인 Claude Code와의 대화를 통해 구축되었습니다. 저는 코드를 직접 작성하지 않았습니다. 제가 원하는 것을 설명하고, 결과물을 검토하며, 방향을 지시했을 뿐입니다. 그 과정이 어떠했는지 소개합니다.

명세서(Spec)가 아닌 분위기(Vibe)로 시작하기

저의 첫 메시지는 단 한 줄이었습니다: "깔끔한 화이트 룩을 유지하고, Apple과 Claude의 디자인 방식에서 영감을 얻으세요." 와이어프레임(wireframe)도, 티켓(ticket)도 없었습니다. Claude는 Next.js와 Tailwind 프로젝트의 스캐폴딩(scaffold)을 생성하고, 제 이력서 PDF에서 세부 정보를 가져왔으며, 불과 몇 분 만에 히어로(hero) 섹션, 경력(experience), 이력서 다운로드, 분석 훅(analytics hooks)이 작동하는 사이트를 라이브 브라우저 미리보기로 실행했습니다.

취향을 빌려온 뒤, 자신만의 것으로 만들기

저는 제가 좋아하던 포트폴리오 사이트를 공유하며 "창의적으로 해봐"라고 말했습니다. Claude는 처음부터 전체 일러스트레이션 언어를 그려냈습니다 — 결제 카드, 탭 투 페이(tap-to-pay) 스마트폰, 화폐 동전, 퍼널(funnel) 등을 손으로 그린 듯한 SVG로 구현했으며, 각 요소는 잉크 윤곽선 뒤로 평면적인 색상 블록이 어긋나게 배치된 형태였습니다. 이 언어는 이제 히어로 섹션, 섹션 타일, 케이스 스터디(case-study) 아트워크, 브라우저 탭의 S-coin 파비콘, 심지어 제 LinkedIn 배너에 이르기까지 모든 곳에 적용되어 있습니다.

두려움 없이 구조 재편하기

첫 번째 초안은 하나의 긴 페이지였고, 솔직히 말해서 지루했습니다. 그래서 우리는 페이지를 나누었습니다: 미니멀한 홈 페이지를 만들고, About, Experience, Blog, Case Studies를 각각 별도의 페이지로 분리했습니다. 카피(copy)는 다듬어졌고, 그라데이션이 추가되었으며, 제 사진은 더 깔끔한 배경과 애니메이션 프레임을 갖게 되었습니다. 페어 프로그래머(pair programmer)가 전체 코드베이스를 머릿속에 담고 있고, 작업이 완료되었다고 판단하기 전에 데스크톱과 모바일 너비의 실제 브라우저에서 모든 변경 사항을 확인한다면, 대규모 리팩터링(refactor)은 비용이 거의 들지 않습니다.

사이트에 두뇌를 부여하기

게시를 위해, Claude는 관리 API(management API)를 통해 제 계정에 Sanity 프로젝트를 생성했고, 블로그 포스트와 케이스 스터디를 위한 스키마(schema)를 정의했으며, 편집 스튜디오(editing studio)를 사이트에 직접 임베드(embed)했습니다. 콘텐츠는 '게시(Publish)'를 누른 지 1분 이내에 라이브로 반영됩니다 — 재배포(redeploy)도, 코드 변경도 필요 없습니다.

제대로 밀어붙이기 (Ship it like you mean it)

모든 변경 사항은 GitHub에 커밋되었고 Vercel에 의해 자동 배포되었습니다. 제가 프로젝트에 도메인을 연결하려 하자, Claude가 이를 연결하고 어떤 DNS 레코드를 추가해야 하는지 정확히 알려주었으며, 레코드가 전파되는 것을 지켜보고 www 리다이렉트와 SSL까지 설정해 주었습니다. 분석(Analytics) 기능은 방문 횟수, 프로젝트 클릭, 이력서 다운로드를 집계하며, 속도 모니터링(speed monitoring)은 실제 방문자들에게 사이트가 얼마나 빠르게 느껴지는지 감시합니다.

여러분이 시도해 보려 한다면 제가 해줄 조언

• 구현(implementation)이 아닌 결과(outcome) 중심으로 대화하세요. "클릭과 다운로드를 어떻게 추적할까요?"라고 말하며 참조 링크를 제공하는 것이 제가 작성했을 그 어떤 상세한 사양서(spec)보다 낫습니다.
• 증거를 요구하세요. 모든 변경 사항은 제가 확인하기 전에 데스크톱 및 모바일 너비의 스크린샷을 포함하여 라이브 브라우저 미리보기에서 검증되었습니다.
• 소리 내어 반복(Iterate)하세요. "도입부가 너무 길고 지루해요"라거나 "기사와 사례 연구를 빠르게 게시할 수 있는 기능이 필요해요"라는 말은 모두 완벽하게 좋은 코드 리뷰입니다.
• 하나의 디자인 언어를 유지하세요. 사이트, 파비콘(favicon), 배너, 블로그 아트가 시각적 시스템을 공유할 때, 모든 것이 의도된 것처럼 보입니다.

총 빌드 시간: 이틀에 걸친 몇 번의 대화. 제가 직접 작성한 코드 라인: 0줄. 만약 개인 사이트를 만드는 것을 미뤄왔다면, 이제 변명할 거리가 훨씬 줄어들었을 것입니다.