트랙을 마치며

Claude Design 트랙 끝까지 오셨어요.

챕터별 흐름 정리

세 덩어리로 묶이는 구조예요.

Ch 1–3 · 도구 기초 Claude Design이 기존 디자인 도구와 어떻게 다른지 파악하고, 빈 캔버스에서 첫 결과물을 뽑았어요. 채팅·인라인 코멘트·슬라이더 — 상황에 맞는 다듬기 방법도 정리했고요.

Ch 4–6 · 디자인시스템 연결 도구가 회사 레포에서 색·폰트·컴포넌트를 어떻게 읽는지 이해하고, GitHub 레포를 직접 연결했어요. AI가 시스템 바깥으로 새지 않게 잡는 프롬프트 패턴도 다뤘어요.

Ch 7–8 · 핸드오프 핸드오프 번들 구조를 뜯어보고, 한 줄 명령어로 Claude Code에 넘겨서 레포에 코드가 적용되는 흐름까지 실행했어요.

기존 도구와 다른 점

세 가지로 압축돼요.

텍스트 → 화면 — Figma처럼 직접 그리는 대신 의도를 텍스트로 설명하면 레이아웃과 컴포넌트가 나와요. 수정도 채팅·인라인 코멘트·슬라이더로 조정해요.

디자인시스템 범위 안에서만 — GitHub 레포를 연결하면 색·폰트·컴포넌트를 직접 읽어요. 프롬프트로 잡으면 AI가 시스템 밖의 임의 값을 쓰지 않아요.

코드까지 자동 연결 — 핸드오프 명령어 하나로 Claude Code에 넘기면 실제 레포 구조·컨벤션을 읽고 코드를 써요. 디자이너가 직접 레포에 영향을 줄 수 있는 흐름이에요.

실제로 달라지는 것

디자인과 개발 사이의 번역 비용이 줄어요.

디자이너가 만든 걸 개발자가 다시 해석하고, 피드백하고, 조율하는 사이클이 핸드오프 하나로 많이 줄어들어요. Ch 8에서 봤듯이 결과는 70–80% 완성도로 나오고 나머지는 손으로 다듬어야 해요. 처음부터 직접 짜는 것보다는 출발선이 다르고, 디자이너가 레포 구조와 디자인시스템이 결과에 어떻게 영향을 주는지 직접 확인하는 경험이 쌓여요.

다음 단계

진행 중인 프로젝트가 있으면 Ch 5의 GitHub 연결부터 실제 레포에 다시 해보는 게 제일 빨라요. 신규 페이지나 컴포넌트 하나를 핸드오프까지 가져가 보면 어디서 막히는지 바로 보여요.

디자인 의도를 코드 에이전트가 읽을 수 있는 구조로 문서화하는 방법을 더 파고 싶으면 DESIGN.md 포맷 완전정복 트랙을 추천해요. 이 트랙에서 다룬 핸드오프 흐름과 맞닿는 부분이 많아요.