Claude Code로 1년 넘게 실제 고객 사이트를 구축하며 깨달은 것들: 처음부터 알았더라면 좋았을 정신 모델

대충 1년 반 정도 바이브 코딩(vibe coding)을 해왔고, 그중 1년 넘게 Claude Code를 쓰면서 실제 돈 내는 클라이언트들 사이트를 만들어왔다. 진짜 보람찬 여정이었지만 삽질도 엄청나게 했다. 내 인생 최대의 삽질은 몇 달 전까지 에이전트랑 스킬을 완전히 무시했다는 거다. 진짜 큰 실수였다. 지금 내가 쓰는 시스템 전체를 현재 진행 중인 프로젝트 예시랑 같이 싹 다 공개한다.

기초가 제일 중요하다. 내가 다시 돌아간다면 무조건 이거부터 뜯어고칠 거다.

바이브 코딩으로 만든 사이트들이 다 거기서 거기인 이유는 사람들이 "홈페이지 만들어줘"라고 바로 질러버리기 때문이다. 뻔한 입력에 뻔한 결과가 나오는 법이지. 나는 컴포넌트 하나 짜달라고 하기 전에 모델한테 프로젝트 전체를 먼저 먹인다. 브랜드 가이드라인, 참고할 스크린샷, 그리고 이 브랜드에서 말하는 '잘 만든 결과물'이 뭔지 구체적인 예시까지 다 쑤셔 넣는다. 처음에 이 지루한 과정을 거쳐야 나중에 결과물이 템플릿 덩어리처럼 안 나오고 속도도 훨씬 빨라진다.

네 가지 기본 원리를 배우고 이것들이 어떻게 맞물리는지 파악해라.

Claude Code를 그냥 채팅창처럼 쓰는 짓은 이제 그만해라. 시스템으로 작동하는 네 가지 빌딩 블록은 이거다.

• CLAUDE.md = 헌법이다. 세션마다 읽는 프로젝트 규칙(브랜드, 금지어, 절대 기준 등)을 항상 켜둬라.

• Memory files = 세션이 바뀌어도 유지되는 사실들이다. 뭐가 잠겨 있는지, 뭐가 결정됐는지, 저번에 뭐가 터졌는지 기록해라.

• Agents = 각자 자기 분야를 맡은 전문 역할군이다.

• Skills = 슬래시 명령어처럼 불러서 쓰는 표준화된 반복 작업이다.
  대부분 첫 번째(CLAUDE.md)만 쓰고 결과물이 왜 산으로 가는지 의아해하더라.

내가 실제로 돌리는 에이전트들이다.

각 에이전트한테 코드네임이랑 딱 하나의 업무만 줬다. 그래야 어중이떠중이 제너럴리스트가 아니라 자기 주관 뚜렷한 전문가가 되고, 자기 영역이 나오면 알아서 튀어나오거든.

• Wraith (크리에이티브 디렉터) = 브랜드 필터이자 페이지 흐름 담당. 제값 못 하는 섹션은 가차 없이 삭제할 권한이 있다.

• Riddle (카피라이터) = 눈에 보이는 모든 텍스트, 말투, 금지어 리스트를 관리한다.

• Cipher (SEO) = H 태그, 메타 데이터, 키워드 맵, 내부 링크를 책임진다.

• Lattice (구조화 데이터) = JSON-LD / Schema.org를 담당하며, 구글 검색 결과랑 AI 답변 인용에 최적화한다.

• Ember (디자이너) = 레이아웃, 간격, 색상, 호버 상태, 섹션 리듬을 잡는다.

• Forge (개발자) = 아키텍처, 컴포넌트, TypeScript, 성능 패턴을 짠다.

• Sprite (반응형 감사) = 가로 스크롤 삐져나오는 거 잡고 모바일/태블릿/데스크탑 + 터치 영역까지 다 고친다.

• Nitro (성능) = Core Web Vitals 담당. LCP, CLS, INP, 번들 사이즈를 조진다.

• Vault (데이터베이스) = Prisma 스키마, 마이그레이션, 쿼리, 시드 데이터를 관리한다.

• Bastion (백엔드) = API 라우트, 인증, 웹훅, 서버 액션을 담당한다.

• Sentinel (배포 전 검수) = 배포 전 마지막 체크리스트(스키마, 링크, alt 텍스트, 모바일 등)를 돌린다.
  핵심은 "봇을 많이 늘리는 것"이 아니다. 각 봇이 좁고 깊은 맥락을 가지고 확실하게 거부권을 행사하니까, 내가 모든 결정마다 병목 현상이 안 생기는 거다. 어려운 결정이 필요할 땐 핵심 팀원들끼리 원탁 회의를 열어서 그럴듯한 해결책을 가져오라고 시키고, 난 그중에서 하나 골라서 진행하면 끝이다.