디자인부터 코드까지···Ch 8 / 9
한 줄 명령어로 production까지
Claude Design 번들 → 본인 머신의 Claude Code → 회사 레포에 코드 적용까지의 흐름.
Claude Design에서 핸드오프 번들 받아서 본인 머신의 Claude Code로 코드까지 가는 흐름이에요.
핸드오프 흐름
- Claude Design 캔버스 우상단 Share → Handoff to Claude Code 클릭
- 모달에서 명령어 복사
- 본인 머신 터미널(VSCode 익스텐션이든 CLI든)에서 그 명령어 실행
- Claude Code가 번들 URL을 fetch해서 현재 작업 중인 레포에 변경 적용
- PR 만들거나 그대로 커밋
핵심은 Claude Code가 회사 레포의 실제 컨텍스트(파일 구조·기존 컴포넌트·코딩 컨벤션)를 같이 읽는다는 점이에요. 그래서 결과 코드가 회사 코드 스타일에 맞게 나와요. 다른 도구가 흉내 못 내는 부분.
주의· 시작 전 셋업
Claude Code CLI 또는 VSCode 익스텐션이 설치돼 있어야 해요. 레포에 CLAUDE.md가 있으면 Claude Code가 코딩 컨벤션도 함께 읽어요.
받은 코드 점검
결과 코드를 받았으면 그대로 머지하지 마세요. 첫 결과는 70~80% 완성도라고 보고 점검 사이클을 한 번 돌려요.
점검 항목:
- 컴포넌트 재사용 — 기존 회사 컴포넌트가 있는데 새로 만들지 않았나
- 토큰 사용 — 임의 색·spacing 값이 들어가지 않았나
- 타입 오류 — TypeScript 에러 없나
- 반응형 — 모바일 break point 동작
- 접근성 — semantic HTML, aria 속성
보강하는 두 가지 길
문제가 보이면 두 가지 선택지가 있어요.
길 A. Claude Code한테 직접 수정 요청
- 같은 컨텍스트 안에서 보강
- 빠르지만 Claude Code의 토큰 더 씀
길 B. Claude Design으로 돌아가서 디자인 자체 수정
- 디자인이 잘못된 거면 여기서 고쳐야 함
- 다시 핸드오프 돌리면 결과가 새로 나옴
원칙: 코드 수준 문제는 길 A, 디자인 의도 자체가 틀렸으면 길 B.
핸드오프 자체는 여기까지. 다음 챕터에서 이 트랙을 마무리해요.