도구가 디자인시스템을 학습하는 법

다음 챕터부터 GitHub 레포 연결, Figma 우회 import 같이 손으로 하는 작업이 나와요. 그 전에 무엇이 어떻게 추출되는지 한 번 짚고 가요. 입력 형태에 따라 결과 품질이 꽤 달라지거든요.

한 줄로 요약하면: Claude Design은 코드 기반 출력을 만드니까, 코드로 표현된 디자인시스템을 가장 잘 읽어요.

Claude Design이 읽는 것

Claude Design 설정 → 디자인시스템 영역에서 자료를 업로드하면 다음을 추출해요.

• 컬러 팔레트 — primary / secondary / accent
• 타이포그래피 — 폰트 패밀리, 크기 단계, 굵기
• 컴포넌트 패턴 — 버튼·카드·네비·모달 등
• 레이아웃 컨벤션 — spacing, grid, 페이지 구조
• 디자인 토큰 — CSS variables, Tailwind config, design token JSON 등 코드로 표현된 정의

GitHub 레포를 연결하면 컴포넌트 파일·CSS/SCSS/Tailwind 설정·타이포 스케일·컬러 토큰·레이아웃 패턴을 같이 읽어요. 이렇게 추출된 게 Claude Design 안에 영구히 저장되는 디자인시스템이고, 이후 모든 프로젝트가 이걸 기반으로 출력돼요.

디자인시스템이 영구히 저장된다

Claude Design의 디자인시스템은 한 번 쓰고 마는 첨부 자료가 아니에요. 계정·팀 단위로 저장되는 자산이에요. 한 번 등록해두면 이후 새 프로젝트는 자동으로 그 시스템을 적용해요.

이 점이 ChatGPT나 v0에 매번 톤·색을 다시 알려주는 워크플로우와 결정적으로 달라요. 회사 자산을 한 번 등록하는 초기 비용이 있지만, 이후 모든 작업이 일관성 있게 나와요.

멀티 디자인시스템

여러 디자인시스템을 동시에 유지할 수 있어요.

• 메인 브랜드 — 회사 외부 노출용
• 실험 서브브랜드 — 캠페인·이벤트·신규 라인용
• 내부 어드민 — 외부 톤과 다른 운영 도구용

프로젝트 만들 때 어느 시스템을 쓸지 선택해요. 한 시스템에서 다른 시스템으로 디자인을 옮길 수도 있는데, 색·타이포·컴포넌트가 자동 매핑돼요.

잘 못 읽는 것들

추출이 약한 영역도 정직하게 짚을게요.

• 애니메이션·트랜지션 — 정적 토큰만 읽음. 모션 스펙은 거의 안 잡힘
• 복잡한 컴포넌트 variants — 단순 variants는 OK인데, 깊은 중첩이나 conditional variants는 누락 잦음
• 인터랙션 스펙 — focus 상태, hover 상태 등은 추출 후 점검 필수
• 다크 모드 자동 매핑 — 라이트만 있는 시스템에선 다크 모드가 덜 정교하게 나옴
• 반응형 break point 규칙 — 일부 누락. 추출 후 직접 보강 필요

이 영역들은 추출 후에 직접 채워 넣거나 채팅으로 보강하는 게 일반적인 패턴이에요. 다음 챕터들에서 보강법도 같이 다뤄요.

코드 기반이 가장 정확

추출 정확도 순서를 정리하면:

1. GitHub 레포 직접 연결 (Tailwind config + CSS variables + 컴포넌트 파일) — 가장 정확
2. Design token JSON 업로드 — 정확한데 컴포넌트 정보가 빠질 수 있음
3. Figma 라이브러리 — 직접 import 약함
4. PDF 가이드·이미지 — 색·타이포 정도만 추출. 컴포넌트 인식 약함

회사가 코드로 디자인시스템을 정의해두지 않았으면, 이 트랙 시작 전에 최소한의 디자인 토큰 파일이라도 만드는 게 결과 품질에 큰 차이를 만들어요.

추출 원리는 여기까지. 다음 챕터에서 실제로 GitHub 레포 연결을 손으로 가봐요.