ㅇ 생각보다는 어려웠습니다.
ㅇ 이하 내용은 Claude Code로 작성했습니다.
디자인 시스템 구축의 배경
designlang이라는 npm 도구로 실제 서비스 사이트(gpters.org)의 디자인을 "역추출" 해서, 그 결과를 그대로 신뢰하지 않고 사람이 검증·교정한 뒤, 실무에서 바로 쓸 수 있는 형태(HTML 적용 가이드 + PPT 카탈로그 규칙 + Claude Design 프로젝트)까지 만들어보는 걸 시도했습니다.
계기는 단순했습니다. "AI가 사이트를 보고 디자인 시스템을 뽑아준다"는 도구들이 최근 많이 나오는데, 그 결과를 검증 없이 그대로 믿고 써도 되는지 궁금했습니다. 실제로 해보니 절반은 맞고 절반은 노이즈였고, 그 노이즈를 걸러내는 과정 자체가 이번 사례의 핵심이 됐습니다.
디자인 시스템 구축 방법
사용한 도구: Claude Code(CLI) + npx designlang(디자인 토큰 추출 npm 패키지) + claude.ai/design(Claude Design, 디자인 시스템 프로젝트 업로드)
디자인 토큰 추출 단계
새 폴더를 만들고 그 안에서 designlang을 실행하도록 시켰습니다.
Open optionsauto
현재 폴더 안에 "디자인분석"이라는 새 폴더를 만들고, 그 폴더 안에서
아래를 실행한 뒤 생성된 결과 파일들을 정리해서 요약해줘:
npx designlang https://www.gpters.org/
실행 결과 색상·타이포·spacing·radius·shadow·컴포넌트 패턴·브랜드 보이스·모션 프리셋 등 43개 파일이 쏟아졌습니다. (-design-tokens.json, -DESIGN.md, -AGENT.md, -tailwind.config.js 등)
Open optionsauto
npx designlang https://www.gpters.org/
Output files:
✓ gpters-org-design-language.md (28.9KB)
✓ gpters-org-design-tokens.json (5.3KB)
✓ gpters-org-tailwind.config.js (4.2KB)
... (총 43개 파일)
디자인 토큰 검증 과정
여기가 이번 사례에서 가장 중요했던 부분입니다. 추출 결과를 바로 쓰지 않고, "이 도구가 왜 이런 값을 뽑았는지" 원리부터 설명하게 시켰습니다.
Open optionsauto
방금 designlang이 뽑은 결과를 바탕으로, 이 도구가
무엇을·어떻게·왜 하는지 직관적으로 설명해줘.
그리고 추출된 핵심 토큰(색·폰트·여백·컴포넌트)을 요약하고,
믿을 수 없는 노이즈(예: 이모지가 폰트로 잡히는 것)가 있으면 짚어줘.
그 결과 진짜 노이즈가 여러 개 나왔습니다:
본문 폰트 1위가
Apple Color Emoji— 헤딩에 이모지(📣👀🏆)가 많아서 이모지 렌더링 폰트가 최다 검출된 것뿐, 실제 서체 아님breakpoint 값이
[object Object]px로 8번 반복 — 도구 자체의 직렬화 버그primary 오렌지
#eb5a10을 텍스트로 쓰면 명암비 3.24:1로 WCAG AA(4.5:1) 미달radius
lg라벨에 12px/15px 두 값이 충돌spacing 스케일에 3px·37px·336px 같은 4px 그리드 이탈값 혼입
디자인 시스템 교정 및 적용
원본 토큰을 "초안"으로만 두고, 교정값과 실제 상세페이지 컴포넌트 매핑, PPT 규칙까지 한 번에 요청했습니다.
Open optionsauto
designlang이 뽑아준 토큰과 브랜드 문서를 원본 초안으로 삼아, 다음을 해줘:
1. 추출 노이즈(폰트·색 대비 등) 필요하면 교정하고 대안 제시
2. 이 토큰을 상세페이지(HTML)의 실제 컴포넌트
(히어로/가격표/CTA/카드/뱃지)에 매핑한 적용 가이드
3. PPTX 카탈로그용 규칙(표지·본문 슬라이드 색/폰트/여백) 별도 정리
4. 위를 하나의 HTML로 묶어 한눈에 디자인 시스템을 살펴보게 해줘. 보고 피드백할게
색 대비는 sRGB 상대휘도 공식으로 실측했습니다. 예를 들어 원본 primary #eb5a10은 대비가 부족해 텍스트/버튼용으로는 못 쓰고, 이걸 어둡게 보정한 #c2410c(primary-safe)를 만들어서 4.79~5.18:1로 AA를 통과시켰습니다. 결과물은 좌측 인덱스 내비게이션이 있는 1장짜리 HTML 문서로 받아서 Artifact로 미리보기까지 확인했습니다.
[스크린샷: 01 노이즈 교정 / 02 컴포넌트 적용 / 03 PPTX 규칙 3섹션이 있는 통합 가이드 페이지]
Claude Design 프로젝트 업로드
마지막으로 만든 디자인 시스템을 claude.ai/design에 실제 프로젝트로 올려달라고 했습니다.
Open optionsauto
방금 우리가 이 대화에서 함께 만든 디자인 시스템을,
클로드 디자인(claude.ai/design)의 디자인 시스템으로 업로드해줘.
- 컴포넌트별 @dsCard 미리보기 카드 + 토큰을 담은 업로드용
패키지로 먼저 재구성해줘 (아직 없으면 지금 만들어줘)
- "우리 브랜드 디자인 시스템" 이라는 새 프로젝트를 만들어 올려줘
- 도중에 디자인 권한 승인 창이 뜨면 알려줘, 내가 승인할게
업로드 전에 파일 구조부터 재구성했습니다. 컴포넌트별로 파일을 쪼개고 첫 줄에 <!-- @dsCard group="..." --> 마커를 붙이면 Claude Design 패널이 자동으로 카드 인덱스를 만들어줍니다.
Open optionsauto
디자인시스템/
├─ tokens/ tokens.css, tokens.json (교정된 값)
├─ components/ hero, pricing, cta-banner, card, badge
├─ foundations/ colors, typography, spacing-radius
├─ docs/ corrections-report, pptx-catalog-rules
└─ README.md
총 13개 파일을 "우리 브랜드 디자인 시스템" 프로젝트로 업로드했고, list → create_project → finalize_plan → write_files 순서로 진행됐습니다.
[스크린샷: claude.ai/design "우리 브랜드 디자인 시스템" 프로젝트, Components/Foundations/Docs 카드 그룹]
디자인 시스템 구축 결과와 배운 점
배운 점
AI 추출 도구의 결과물은 "통계적 최빈값"일 뿐 "디자인 의도"가 아니다 — 이모지 폰트 오검출처럼, 사람이 보면 바로 이상한 걸 도구는 그냥 카운트만 함
confidence 수치가 있는 필드(이번엔 intent 0.42, material 0.45)는 50% 밑이면 사실로 믿지 말고 "추정"으로만 취급해야 함
색상은 "브랜드 컬러"와 "텍스트 대비를 만족하는 안전 컬러"를 분리해서 두 벌로 관리하는 게 실무적으로 편함 (원본 포인트컬러 vs -safe 변형)
웹 토큰(px, 9999px radius)은 PPT 같은 다른 매체로 그대로 못 옮기고, pt·cm·단색 채우기처럼 매체에 맞게 "번역"하는 과정이 따로 필요함
나만의 꿀팁 추출 결과를 받으면 바로 적용하지 말고, "이 도구가 왜 이 값을 뽑았는지 설명해줘 + 노이즈 짚어줘"를 한 번 거치는 게 핵심이었습니다. 이 한 단계로 신뢰 못 할 값 4~5개를 걸러냈습니다.
시행착오 처음에 학교 웹사이트(skku.edu ctl 페이지)로 테스트하려다 중간에 멈췄습니다. 소유하지 않은 외부 기관 사이트를 대상으로 실행하는 게 적절한지 판단이 필요한 지점이라, 이후엔 직접 관리 권한이 있는 gpters.org로 바꿔서 진행했습니다.
도움이 필요한 부분
WCAG 대비 계산을 색 조합마다 수동으로 검증했는데, 컴포넌트가 많아지면 자동 대비 체크 스크립트가 있으면 좋겠습니다
가격표 컴포넌트는 원본 사이트에 없어서 새로 제안한 형태라, 실제 톤앤매너와 맞는지 스터디원 피드백이 필요합니다
앞으로의 계획
실제 상세페이지 HTML/CSS에 이번 토큰을 적용해서 라이브 데모까지 만들어보기
PPTX 규칙을 진짜 PPT 템플릿 파일(.potx)로 만들어서 팀이 바로 쓸 수 있게 하기
다른 사이트 1~2개 더 돌려서 designlang 노이즈 패턴이 일관적인지 비교해보기
도움 받은 글
designlang (GitHub) — 이번에 사용한 디자인 토큰 추출 CLI 도구
WCAG 2.1 명암비 기준(4.5:1 AA) — 색 대비 교정의 근거로 사용
