2주 전, 회사 홈페이지를 새로 만들어야 했다. PayloadCMS와 Next.js 15 조합으로 가기로 했는데, React 19에 App Router까지 써야 하니 세팅할 게 산더미였다. 평소라면 공식 문서 뒤적이며 일주일은 걸렸을 초기 설정을 Claude Code에 맡겨봤다.
"PayloadCMS 3.x + Next.js 15 + TypeScript + Tailwind로 회사 홈페이지 세팅해줘. 블록 기반 페이지 빌더 패턴으로."
이 한 줄이 2주간의 Vibe Coding 여정을 열었다.
Vibe Coding은 Andrej Karpathy가 처음 쓴 표현이다. 코드를 한 줄 한 줄 타이핑하는 대신 AI에게 의도를 전달하고 생성된 코드를 리뷰하는 방식으로 개발하는 걸 뜻한다. 전통적인 개발이 "직접 운전"이라면 Vibe Coding은 "내비 찍고 자율주행 모드"에 가깝다. 목적지(기능 명세)를 알려주면 AI가 경로(구현)를 찾아간다.
다만 자율주행이라고 해서 운전대에서 손을 떼면 안 된다. 나는 이 2주 동안 Claude Code를 "주니어 개발자"처럼 다뤘다. 방향을 잡아주고 결과물을 검토하고 잘못된 부분을 바로잡는 시니어 역할을 맡은 거다.
솔직히 이 속도는 나 자신도 놀랐다. 2주 만에 10개 프로젝트가 돌아가는 상태로 만들었다.
1주차에는 기반을 닦았다. museck.com 홈페이지를 PayloadCMS + Next.js 15로 세팅하고 Docker 컨테이너화한 뒤 K8s에 올렸다. Gitea Actions로 CI/CD까지 연결해서 git push 한 번이면 스테이징 환경에 자동 배포되게 만들었다.
2주차에는 재미가 붙었다. 홈페이지 디자인을 안티브루탈리즘으로 갈아엎고 블로그 시스템을 붙이고 Claude Code 스킬을 만들고 ComfyUI로 이미지 생성 파이프라인까지 구축했다. 이 블로그 글에 들어간 대표 이미지도 그 파이프라인으로 만든 거다.
Claude Code의 압도적 강점은 프로토타이핑 속도다. museck.com 초기 세팅을 예로 들면 이렇다.
PayloadCMS 컬렉션 5개(Users, Media, Posts, Projects, Pages) 정의하고 블록 컴포넌트 5개(Hero, Content, Features, CTA, ImageText) 만들고 Tailwind 디자인 토큰 설정하고 Lexical richText 시리얼라이저까지 구현하는 데 하루가 걸렸다. 혼자 했으면? 최소 3~4일은 잡아야 했다.
// Claude Code가 만든 RenderBlocks 패턴
// blockType 기반으로 블록을 동적 렌더링한다
export function RenderBlocks({ blocks }: { blocks: LayoutBlock[] }) {
return blocks.map((block, i) => {
switch (block.blockType) {
case 'hero': return <HeroBlockComponent key={i} block={block} />
case 'features': return <FeaturesBlockComponent key={i} block={block} />
// ...
}
})
}멀티스택 대응 능력도 좋았다. TypeScript, CSS, Docker, K8s YAML, GitHub Actions 워크플로우를 넘나들며 작업하는데 별도의 컨텍스트 스위칭 비용이 없었다. 내가 "이제 Docker 설정 해줘"라고 하면 바로 Dockerfile과 docker-compose.yml을 뽑아줬다.
가장 인상적이었던 건 안티브루탈리즘 디자인 리뉴얼이었다. 처음에 미니멀하게 만든 홈페이지가 너무 밋밋했다. 그래서 Claude Code에게 이렇게 말했다.
"안티브루탈리즘 스타일로 전면 리뉴얼하자. 오프화이트 배경에 테라코타 악센트, Archivo Black 폰트, 날카로운 모서리, 두꺼운 보더."
2일에 걸쳐 11개 커밋으로 색상 팔레트부터 타이포그래피, Hero 비대칭 레이아웃, 새 블록 컴포넌트까지 전부 바뀌었다. Tailwind 디자인 토큰 레이어를 잘 분리해둔 덕분에 가능한 일이었다.
/* 브루탈리즘의 핵심: 모든 둥글림과 트랜지션 제거 */
@layer base {
* { border-radius: 0 !important; }
*, *::before, *::after {
transition: none !important;
animation: none !important;
}
}물론 한 번에 완성되진 않았다. 커밋 히스토리를 보면 "안티브루탈리즘 디자인 전면 리디자인" 뒤에 "비대칭 레이아웃 전면 리뉴얼"이 오고 "색상 팔레트 전환"이 이어진다. 점진적으로 발전시키는 과정이 그대로 드러난다. 모바일 반응형 h1 사이즈도 별도 커밋으로 나왔는데 데스크탑 중심으로 먼저 디자인한 뒤 모바일 테스트에서 문제를 발견한 거다.
AI와의 디자인 협업에서 배운 점은 이거다. 방향과 레퍼런스를 명확히 주면 AI가 구현을 빠르게 해낸다. 하지만 "좋은 디자인"을 판단하는 건 여전히 사람의 몫이었다.
Claude Code에는 재밌는 기능이 있다. 스킬(Skill)이라고 부르는 마크다운 파일을 읽어서 특정 작업의 맥락을 자동으로 파악하게 만드는 시스템이다.
2주 동안 만든 스킬 중에서 대표적인 두 개를 꼽자면 이렇다.
wrap 스킬은 세션 마무리를 자동화한다. Claude Code 세션이 길어지면 컨텍스트가 압축(compaction)되면서 대화 맥락이 사라진다. 이걸 막으려면 세션 끝에 반드시 문서화하고 커밋하고 스킬 사용 기록을 남겨야 하는데 매번 같은 걸 반복하니까 스킬로 만들었다. /wrap 한 번이면 문서화, git commit, 스킬 record가 순서대로 실행된다.
comfy-prompt 스킬은 z_image_turbo라는 이미지 생성 모델에 최적화된 프롬프트를 만들어준다. 이 모델은 CFG를 안 쓰기 때문에 네거티브 프롬프트가 먹히지 않는다. "no watermark" 대신 "clean image without any text overlays"처럼 긍정 표현으로 바꿔야 하는데 이런 규칙을 스킬에 넣어두니까 매번 설명할 필요가 없어졌다.
스킬의 핵심은 반복되는 지식을 코드화하는 거다. 한 번 삽질한 내용을 스킬에 기록해두면 다음 세션에서는 같은 실수를 반복하지 않는다. AI에게 장기 기억을 심어주는 셈이다.
장점만 늘어놓으면 광고가 되니 한계도 솔직하게 이야기하겠다.
컨텍스트 윈도우 한계가 제일 크다. 프로젝트가 커지면 Claude Code가 전체 코드베이스를 파악하지 못한다. skill-version-manager를 만들 때 하드코딩된 경로 문제를 겪었는데 WSL2에서 홈 디렉토리 구조가 바뀌자 스킬이 통째로 먹통이 됐다. CWD 기반 감지로 바꿔서 해결했지만 이건 결국 내가 문제를 발견하고 방향을 잡아줘야 했다.
때로는 자신 있게 틀린다. ESM 프로젝트에서 PayloadCMS 설정 파일 호환성 문제가 터졌을 때 Claude Code는 처음에 잘못된 방향으로 수정을 시도했다. CJS config 파일에 .cjs 확장자를 붙여야 하는 건 내가 알려줘야 했다. AI가 모르는 영역에서는 확신에 찬 목소리로 엉뚱한 답을 내놓기도 한다.
아키텍처 결정은 사람이 해야 한다. "PayloadCMS로 할까 Strapi로 할까" 같은 기술 선택이나 "모노레포로 갈까 멀티레포로 갈까" 같은 구조적 결정에는 AI가 도움이 안 된다. 프로젝트의 제약 조건과 팀 상황을 종합적으로 판단하는 건 여전히 사람의 영역이다.
결론부터 말하면 그렇다. 단 조건이 있다.
Vibe Coding은 시니어 개발자에게 날개를 달아준다. 이미 아키텍처를 설계할 줄 알고 코드 리뷰를 할 수 있는 사람이 반복적인 구현 작업을 AI에게 맡기면 생산성이 극적으로 올라간다. 반면 아직 기초가 부족한 주니어 개발자가 Vibe Coding에만 의존하면 위험하다. AI가 만든 코드를 검증할 능력이 없으면 결국 기술 부채가 쌓인다.
2주 동안 10개 프로젝트를 만들면서 깨달은 건 이거다. AI 페어 프로그래밍의 본질은 "코드를 대신 짜주는 것"이 아니라 "피드백 루프를 빠르게 돌리는 것"이다. 아이디어를 코드로 바꾸고 결과를 확인하고 방향을 수정하는 사이클이 압도적으로 빨라진다.
스킬 시스템으로 AI의 학습 곡선을 관리하고 wrap 같은 자동화로 워크플로우를 표준화하면 이 사이클은 더 빨라진다. 결국 좋은 도구는 사용자가 잘 길들인 도구다. Claude Code도 마찬가지다.