소개
지피터스(gpters.org) 사이트에는 이미 오렌지 브랜드 컬러, 카드·버튼 스타일, 여백 규칙 같은 "디자인 시스템"이 존재합니다. 문제는 이게 디자이너 머릿속과 실제 화면에만 흩어져 있고, 문서로 정리된 적이 없다는 것이었습니다. 상세페이지를 새로 만들거나 PPTX 카탈로그를 만들 때마다 "그 오렌지가 정확히 무슨 색이었지?", "버튼 모서리는 얼마나 둥글게 했더라?"를 매번 감으로 다시 정하고 있었죠.
그래서 이번에 시도한 건 두 가지였습니다.
AI 도구로 실제 사이트에서 디자인 토큰(색상·폰트·여백·컴포넌트)을 자동으로 뽑아낼 수 있는지 확인하고,
뽑아낸 결과를 믿고 그대로 써도 되는지, 아니면 사람이 걸러줘야 하는지 검증한 뒤,
최종적으로는 이걸 Claude의 디자인 시스템 기능(Claude Design)에 등록해서 앞으로 뭘 만들든 브랜드에 맞게 자동 생성되게 만드는 것이었습니다.
진행 방법
1) 사이트에서 디자인 토큰 자동 추출 — designlang
먼저 designlang이라는 npm 도구로 실제 사이트를 크롤링해서 색상·타이포·여백·그림자·컴포넌트 라이브러리까지 자동으로 뽑아봤습니다.
현재 폴더 안에 "디자인분석"이라는 새 폴더를 만들고, 그 폴더 안에서 아래를 실행한 뒤생성된 결과 파일들을 정리해서 요약해줘: npx designlang https://gpters.org
Playwright로 실제 브라우저를 띄워 렌더링된 최종 화면의 CSS 값을 그대로 긁어오는 방식이라, 소스코드를 볼 필요 없이 브라우저에 실제로 찍힌 색·크기를 기준으로 41개 파일(토큰 JSON, Tailwind 설정, Figma 변수, 모션 프리셋 등)이 순식간에 만들어졌습니다.
2) 결과를 그대로 믿지 않고 검증하기
여기서 바로 쓰지 않고 한 번 더 물었습니다.
방금 designlang이 뽑은 결과를 바탕으로, 이 도구가 무엇을·어떻게·왜 하는지 직관적으로 설명해줘.그리고 추출된 핵심 토큰(색·폰트·여백·컴포넌트)을 요약하고,
믿을 수 없는 노이즈(예: 이모지가 폰트로 잡히는 것)가 있으면 짚어줘.
이 한 문장 덕분에 실제로 문제가 되는 지점들이 드러났습니다. WCAG 대비 공식으로 직접 계산해보니 강조 텍스트 색(#ea580c)은 흰 배경 위에서 대비가 약 3.56:1로 웹 접근성 기준(AA, 4.5:1)에 못 미쳤고, 버튼 안의 흰색 라벨도 약 3.5:1로 작은 글자 기준으로는 부족했습니다. 그 외에도 "이모지 폰트가 브랜드 폰트로 잡힌 것"(사실은 브라우저 기본 폴백일 뿐), "여백 값에 336px라는 뜬금없는 큰 수치가 낀 것"(사이드바 너비가 잘못 흡수된 값), 공지 배너 텍스트가 "버튼"으로 오분류된 것 등 총 7가지 노이즈를 찾아냈습니다.
3) 교정 + 컴포넌트 적용 가이드 + PPTX 규칙을 한 문서로 통합
designlang이 뽑아준 토큰과 브랜드 문서를 원본 초안으로 삼아, 다음을 해줘:1. 추출 노이즈(폰트·색 대비 등) 필요하면 교정하고 대안 제시
2. 이 토큰을 상세페이지(HTML)의 실제 컴포넌트
(히어로/가격표/CTA/카드/뱃지)에 매핑한 적용 가이드
3. PPTX 카탈로그용 규칙(표지·본문 슬라이드 색/폰트/여백) 별도 정리
4. 위를 하나의 HTML로 묶어 한눈에 디자인 시스템을 살펴보게 해줘. 보고 피드백할게.
교정 결과 오렌지 브랜드 컬러를 두 가지로 분리했습니다 — 배경·아이콘·배지 전용의 brand-500(#EB5A10)과, 텍스트에 써도 안전한 brand-600(#C2410C, 대비 약 5.18:1). 이 기준으로 히어로/가격표/CTA밴드/카드/뱃지 5개 컴포넌트에 실제로 토큰을 매핑한 미리보기와, PPTX 표지·본문 슬라이드 규칙(컬러 비율 70/20/10, 폰트 크기 표 등)까지 하나의 HTML 페이지로 정리했습니다.
4) Claude Design(claude.ai/design)에 업로드
방금 우리가 이 대화에서 함께 만든 디자인 시스템을,클로드 디자인(claude.ai/design)의 디자인 시스템으로 업로드해줘.
- 컴포넌트별 @dsCard 미리보기 카드 + 토큰을 담은 업로드용
패키지로 먼저 재구성해줘 (아직 없으면 지금 만들어줘)
- "우리 브랜드 디자인 시스템" 이라는 새 프로젝트를 만들어 올려줘
- 도중에 디자인 권한 승인 창이 뜨면 알려줘, 내가 승인할게
먼저 토큰(JSON/CSS)과 컴포넌트별 미리보기 카드를 로컬 패키지로 정리한 뒤, 브라우저 자동화로 Claude Design에 실제 접속해 "Design systems → Create design system → Create here"로 새 디자인 시스템 생성 화면까지 진행했습니다.
결과와 배운 점
배운 점 / 꿀팁
자동 추출 도구는 "그럴듯한 값"을 내놓을 뿐, 대비·의미가 맞는지는 절대 보장하지 않습니다. "노이즈 있으면 짚어줘"라고 명시적으로 요청하니 AI가 훨씬 비판적으로 자기 결과를 재검토했고, 실제로 접근성 기준 미달 색상을 여러 개 잡아냈습니다.
브랜드 컬러는 하나의 값이 아니라 "배경용"과 "텍스트용"으로 최소 2단계 분리해두는 게 실전에서 훨씬 안전합니다.
토큰·컴포넌트 가이드·PPTX 규칙처럼 서로 다른 산출물을 "하나의 HTML로 묶어줘"라고 요청하면, 따로따로 파일을 열어볼 필요 없이 한눈에 검토·피드백하기가 훨씬 편했습니다.
시행착오
claude.ai/design이 실제 제품인 줄 모르고 처음엔 "그런 기능은 없는 것 같다"고 판단했습니다. 로그인 페이지로만 리다이렉트되길래 존재하지 않는 기능으로 오해했던 건데, 실제 화면 스크린샷을 받고 나서야 베타로 존재하는 진짜 기능임을 확인했습니다. 확신이 안 서면 바로 "없다"고 단정하기보다, 실제 화면을 보여달라고 요청하는 게 훨씬 정확했습니다.로컬에 만들어둔 컴포넌트 파일을 브라우저 자동화로 바로 첨부하려 했는데, 보안 정책상 "이 브라우저 세션에 명시적으로 공유된 파일"만 업로드가 허용되어 막혔습니다. 결국 토큰·컴포넌트 정보를 텍스트로 상세히 풀어서 입력하는 방식으로 대체했습니다.
도움이 필요한 부분
Claude Design 쪽 생성은 완료까지 약 5분이 걸려서, 실제로 만들어진 결과가 우리가 정리한 컴포넌트 스타일을 얼마나 정확히 반영했는지는 이 글을 쓰는 시점엔 아직 확인 전입니다. 실제 생성물 스크린샷은 다음 공유 때 이어서 올리겠습니다.
앞으로의 계획
Claude Design에 등록된 디자인 시스템으로 실제 상세페이지 초안을 한번 만들어서, 오늘 정리한 가이드 문서와 얼마나 일치하는지 비교해볼 예정입니다.
동일한 토큰을 Figma 라이브러리(변수·컴포넌트)로도 옮겨서, 두 방식(Claude Design vs Figma)의 결과물 완성도를 비교해볼 계획입니다.
도움 받은 글 (옵션)
이번 편은 특정 GPTers 게시글을 참고하지 않고, designlang(오픈소스 npm 도구)과 Claude를 직접 조합해서 진행한 실험이었습니다.
