웹사이트 하나로 우리 브랜드 디자인 시스템 만들기 — designlang + Claude 실전기
소개
시도하고자 했던 것과 그 이유
상세페이지, 카드뉴스, PPT를 만들 때마다 색이랑 폰트가 매번 달라지는 게 고민이었습니다. 외주를 주든 AI한테 시키든 "우리 톤앤매너"라는 기준 자체가 문서로 없으니 결과물이 제각각이었죠.
그래서 오늘 목표를 이렇게 잡았습니다. ① designlang이라는 CLI 도구로 기존 웹사이트의 디자인을 자동 추출하고 → ② Claude(Cowork)에게 그 결과를 검증·교정시켜서 → ③ 상세페이지·PPT에 바로 쓰는 디자인 시스템 문서로 만들고 → ④ 클로드 디자인(claude.ai/design)에 업로드해서 재사용 가능한 자산으로 굳히기.
한마디로 "감으로 하던 디자인 통일을, 30분 만에 문서화된 시스템으로" 만드는 실험이었습니다.
진행 방법
사용 도구: Claude Cowork + designlang(npx CLI) + PowerShell(Windows)
1단계. 환경 확인 — Node.js 체크
Claude에게 이렇게 요청했습니다.
내 컴퓨터에 Node.js가 설치돼 있는지 확인해줘 (node --version 실행).
설 치돼 있으면 버전만 알려줘.
안 돼 있으면 내 운영체제에 맞는 방법으로 설치를 진행해줘(Windows면 winget, Mac이면 Homebrew 등).
관리자 권한이나 내 확인이 필요한 부분은 멈춰서 단계별로 안내해줘.
여기서 첫 시행착오: 명령어를 윈도우 시작 메뉴 검색창에 입력해서 웹 검색이 떠버렸습니다. Claude가 "PowerShell이라는 프로그램 안에서 입력해야 한다"고 단계별로 다시 안내해줘서 해결. 결과는 v24.18.0 — 이미 설치돼 있었습니다.
(캡처 1: PowerShell에서 node --version 실행 화면)
2단계. designlang으로 디자인 추출
npx designlang https://ai-study.gpters.org/
원래는 Claude 클라우드 환경에서 직접 실행하려 했는데, 클라우드 쪽 네트워크 정책으로 npm이 차단돼서 내 컴퓨터에서 로컬 실행으로 전환했습니다. 실행하면 색상 팔레트, 폰트, 여백 스케일, 그림자, 버튼 구조까지 마크다운 문서로 추출됩니다.
(캡처 2: designlang 실행 결과 — 색상/타이포/간격 추출 화면)
3단계. Claude에게 결과 검증 + 교정 요청
추출 결과를 그대로 믿으면 안 됩니다. Claude에게 이렇게 시켰습니다.
방금 designlang이 뽑은 결과를 바탕으로, 이 도구가
무엇을·어떻게·왜 하는지 직관적으로 설명해줘.
그리고 추출된 핵심 토큰(색·폰트·여백·컴포넌트)을 요약하고,
믿을 수 없는 노이즈(예: 이모지가 폰트로 잡히는 것)가 있으면 짚어줘.
실제로 노이즈가 꽤 나 왔습니다. 브레이크포인트가 [object Object]로 깨져 있고, CTA 동사로 "skip·get·do"가 잡혔는데 이건 마케팅 문구가 아니라 "skip to content" 같은 유틸 버튼을 주워온 거였고, "소문자 헤딩" 분석은 한국어에 대소문자가 없으니 무의미했습니다. 도구 결과를 AI에게 교차검증시키는 이 단계가 오늘의 핵심이었어요.
4단계. 디자인 시스템 문서 제작
designlang이 뽑아준 토큰과 브랜드 문서를 원본 초안으로 삼아, 다음을 해줘:
1. 추출 노이즈(폰트·색 대비 등) 필요하면 교정하고 대안 제시
2. 이 토큰을 상세페이지(HTML)의 실제 컴포넌트
(히어로/가격표/CTA/카드/뱃지)에 매핑한 적용 가이드
3. PPTX 카탈로그용 규칙(표지·본문 슬라이드 색/폰트/여백) 별도 정리
4. 위를 하나의 HTML로 묶어 한눈에 디자인 시스템을 살펴보게 해줘. 보고 피드백할게.
Claude가 WCAG 대비율까지 실제 계산으로 검증하면서(틸 #09757a는 흰 배경 위 5.47:1로 AA 통과, 회색 #86868b는 3.62:1이라 큰 글자 전용 판정) 교정 토큰을 만들었고, 히어로·가격표·뱃지가 실제로 작동하는 라이브 데모 HTML 한 장으로 묶어줬습니다.
(캡처 3: 완성된 디자인 시스템 HTML — 컬러 팔레트 + 대비 검증 배지) (캡처 4: 가격표/CTA 라이브 데모 부분)
최종 교정 토큰은 이렇습니다.
/* gpters 교정 토큰 v1 — ◇표시는 원본 색상에서 HSL 파생 */
:root {
--brand: #09757a; --brand-hover: #075e62; /* ◇명도-8% */
--brand-tint: #e6f1f2; /* ◇명도+55% 채도-40% */
--ink: #00112c; --text: #111111;
--text-sub: #444444; --text-caption: #86868b; /* 18px+ 전용 */
--border: #d6d6d6; --bg: #ffffff;
--font-body: 'GdSherpa', 'Pretendard', -apple-system, sans-serif;
/* 간격 스케일: 4 8 12 16 20 24 32 40 48 80 */
--radius: 6px; --radius-lg: 12px; --radius-pill: 999px;
--shadow-md: 0 5px 10px rgba(0,0,0,.1);
}
5단계. 클로드 디자인에 업로드
방금 우리가 이 대화에서 함께 만든 디자인 시스템을,
클로드 디자인(claude.ai/design)의 디자인 시스템으로 업로드해줘.
- 컴포넌트별 @dsCard 미리보기 카드 + 토큰을 담은 업로드용
패키지로 먼저 재구성해줘 (아직 없으면 지금 만들어줘)
- "우리 브랜드 디자인 시스템" 이라는 새 프로젝트를 만들어 올려줘
- 도중에 디자인 권한 승인 창이 뜨면 알려줘, 내가 승인할게
Claude가 컴포넌트별 미리보기 카드 11개(컬러/타이포/간격/버튼/뱃지/카드/가격표/히어로/CTA/PPT규칙/토큰CSS)로 재구성해서 새 프로젝트로 업로드했습니다. 이제 클로드 디자인에서 카드 갤러리로 열람되고, 이 프로젝트를 물려서 작업하면 토큰 밖으로 벗어나지 않는 산출물이 나옵니다.
(캡처 5: claude.ai/design의 "우리 브랜드 디자인 시스템" 카드 갤러리)
결과와 배운 점
배운 점과 꿀팁
추출 도구 결과는 초안이지 정답이 아니다. designlang이 primary/secondary를 반대로 배정했고(1회 쓰인 색을 primary로), 행간 1.15 같은 오류값도 있었습니다. "AI 도구 A의 결과를 AI B에게 검증시키는" 파이프라인이 진짜 실력이더라고요.
대비율(WCAG)은 감이 아니라 계산으로. Claude에게 계산시키면 "이 회색은 본문에 쓰면 접근성 낙제(3.62:1)" 같은 판정이 숫자로 나옵니다. 이게 있으면 디자이너와 싸울 일이 없어요.
새 색은 발명하지 말고 파생시키기. 호버색·틴트색이 필요하면 기존 색의 HSL 조정으로 만들고 ◇표시로 출처를 남기는 규칙 — 시스템이 안 무너지는 비결입니다.
명령어는 시작 메뉴 검색창이 아니라 PowerShell에! (부끄럽지만 누군가는 저처럼 헤맬 겁니다.)
시행착오
클라우드 환경에서 npm이 차단돼 실행 실패 → 로컬 PC 실행으로 전환
분석 결과가 목표했던
ai-study.gpters.org가 아니라gpters.com메인으로 잡힘 (리다이렉트 추정) — 분석 대상 URL이 결과에 제대로 찍혔는지 꼭 확인해야 합니다designlang이 v0.0.0 초기 버전이라 브레이크포인트 데이터가 통째로 깨지는 버그
도움이 필요한 부분
로그인이 필요한 페이지(스터디 내부 페이지)는 이 도구로 분석이 안 되는데, 인증 붙여서 추출해보신 분 있으면 방법이 궁금합니다.
gdsherpa 폰트의 라이선스 확인 방법도 아시는 분 계시면 공유 부탁드려요.
앞으로의 계획
이 토큰으로 실제 상세페이지 1장을 처음부터 끝까지 뽑아보고, PPTX 규칙대로 카탈로그도 자동 생성해볼 예정입니다. 최종 목표는 "URL 입력 → 브랜드 시스템 추출 → 검증 → 산출물 생산"까지 이어지는 나만의 반복 가능한 파이프라인 완성입니다.
도움 받은 글 (옵션)
designlang 공식: https://www.designlang.app/ · npm: https://www.npmjs.com/package/designlang
DESIGN.md 컨벤션 참고: https://www.design-extractor.com
