명령 한 줄로 "남의 사이트 디자인"을 내 디자인 시스템으로 — designlang + 클로드 코드 실전기

소개 — 무엇을, 왜 해보려 했나

레퍼런스 사이트의 디자인을 내 프로젝트로 옮길 때, 저는 늘 개발자도구를 열어 색상값을 스포이드로 하나씩 찍고 폰트·자간·여백을 눈대중으로 맞춰 왔습니다. 느리고, 빠뜨리고, 부정확한 작업이었죠.

그래서 이번엔 방식을 바꿔봤습니다. 오픈소스 디자인 추출기 designlang을 실제로 돌려 원시 토큰을 뽑고, 그 결과를 AI와 함께 "쓸 수 있는 디자인 시스템"으로 정제한 뒤, 최종적으로 claude.ai/design(클로드 디자인)에 우리 브랜드 디자인 시스템으로 업로드하는 것까지 한 번에 해봤습니다.

목표는 세 가지였습니다.

1. 추출 도구가 무엇을·어떻게·왜 하는지 직접 체감한다.

2. 자동 추출 결과에 섞인 노이즈를 AI로 걸러내고 교정한다.

3. 정제한 토큰을 컴포넌트 카드 + 클로드 디자인으로 자산화한다.

대상 사이트는 디자인 완성도가 높은 토스(toss.im)로 정했습니다.

진행 방법 — 어떤 도구를, 어떻게

사용한 도구

• designlang — URL을 넣으면 디자인 시스템을 자동 추출하는 CLI (MIT, Node 20+, 내부적으로 Playwright 헤드리스 크롬 사용)

• Claude Code (Opus 4.8) — 추출 실행·결과 해석·노이즈 교정·패키지 제작·업로드까지 오케스트레이션

• claude.ai/design (클로드 디자인) — 컴포넌트 카드 형태의 디자인 시스템 저장소

전 과정을 Claude Code 한 세션 안에서 대화형으로 진행했습니다. 제가 한 일은 "무엇을 할지" 프롬프트로 지시한 것뿐이고, 폴더 생성·명령 실행·파일 작성·업로드는 전부 AI가 수행했습니다.

STEP 1. 추출 — 명령 한 줄

프롬프트 전문

사본

현재 폴더 안에 "디자인분석"이라는 새 폴더를 만들고, 그 폴더 안에서
아래를 실행한 뒤 생성된 결과 파일들을 정리해서 요약해줘:
npx designlang https://toss.im/

AI가 폴더를 만들고 아래 명령을 돌렸습니다. 설치 없이 곧바로 실행됩니다.

bash

npx designlang https://toss.im/

결과는 DOM 요소 952개를 분석해 파일 36개 자동 생성. 디자인 언어 문서(.md), W3C DTCG 토큰(.json), Tailwind 설정, Figma 변수, 모션 프리셋, shadcn 테마, v0·Cursor·Lovable용 프롬프트까지 한꺼번에 떨어졌습니다.

📷 [캡처 삽입] 터미널에 → 36 files written이 뜬 화면 / design-extract-output 폴더 파일 목록

STEP 2. 해석 + 노이즈 점검

프롬프트 전문

사본

방금 designlang이 뽑은 결과를 바탕으로, 이 도구가
무엇을·어떻게·왜 하는지 직관적으로 설명해줘.
그리고 추출된 핵심 토큰(색·폰트·여백·컴포넌트)을 요약하고,
믿을 수 없는 노이즈(예: 이모지가 폰트로 잡히는 것)가 있으면 짚어줘.

AI가 정리한 핵심 토큰(신뢰 가능)

• 색: Primary #3182f6(토스 블루, 66회) · 본문 #212529(828회)

• 폰트: Toss Product Sans 단일 폰트(949개 요소)

• 형태: 그림자 없는 Flat, 넉넉한 여백, 전 헤딩 Bold 700

AI가 잡아낸 노이즈(그대로 쓰면 안 되는 것) — 이 부분이 이번 작업의 핵심 배움이었습니다.

💡 왜 노이즈가 생기나: designlang은 "디자인 의도"를 모른 채 화면에 계산된 모든 값을 평등하게 수집합니다. 그래서 폴백 폰트·비가시 태그·위치값이 진짜 토큰과 섞입니다. 자동 추출은 "초안 재료"이지 완성 토큰이 아니다 — 이게 핵심입니다.

📷 [캡처 삽입] AI가 노이즈를 표로 정리해준 답변 화면

STEP 3. 교정 + 컴포넌트 매핑

프롬프트 전문

사본

designlang이 뽑아준 토큰과 브랜드 문서를 원본 초안으로 삼아, 다음을 해줘:
1. 추출 노이즈(폰트·색 대비 등) 필요하면 교정하고 대안 제시
2. 이 토큰을 상세페이지(HTML)의 실제 컴포넌트
   (히어로/가격표/CTA/카드/뱃지)에 매핑한 적용 가이드
3. PPTX 카탈로그용 규칙(표지·본문 슬라이드 색/폰트/여백) 별도 정리
4. 위를 하나의 HTML로 묶어 한눈에 디자인 시스템을 살펴보게 해줘.

AI가 WCAG 명암비를 실제로 계산해 교정 근거를 만들었습니다. 예를 들어 파란색을 본문 글자에 쓰면 대비가 부족했습니다.

 3.71:1   #3182f6 파란 글자 on 흰 배경  → AA 미달 (본문 사용 금지)
 5.41:1   #1b64da 로 교정              → AA 통과 (링크·소형 텍스트 OK)

교정된 정본 토큰(CSS 변수) 일부:

css

:root {
  --brand:        #3182f6;   /* 토스 블루 — primary */
  --brand-strong: #1b64da;   /* 대비 안전한 파란 텍스트 (5.41:1) */
  /* 폴백 폰트(Times New Roman) 제거, 무료 대체폰트 Pretendard 명시 */
  --font: "Toss Product Sans", "Pretendard", -apple-system,
          "Malgun Gothic", sans-serif;
  /* 측정 노이즈 제거, 4px 배수로 재정규화 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
}

📷 [캡처 삽입] 히어로/가격표/카드/뱃지 컴포넌트가 실제로 렌더된 프리뷰

STEP 4. 클로드 디자인에 업로드

프롬프트 전문

사본

방금 우리가 이 대화에서 함께 만든 디자인 시스템을,
클로드 디자인(claude.ai/design)의 디자인 시스템으로 업로드해줘.
- 컴포넌트별 @dsCard 미리보기 카드 + 토큰을 담은 업로드용 패키지로 재구성
- "우리 브랜드 디자인 시스템"이라는 새 프로젝트를 만들어 올려줘
- 도중에 디자인 권한 승인 창이 뜨면 알려줘, 내가 승인할게

AI가 프리뷰 HTML 첫 줄에 @dsCard 마커를 심어 카드 8개(Foundations 3 + Components 5) + 토큰 2 + README로 패키지를 재구성한 뒤, 새 프로젝트를 만들어 파일 11개를 업로드했습니다. 중간에 권한 승인 창이 뜰 때마다 알려줘서 제가 승인했습니다.

html

<!-- @dsCard group="Components" name="Hero" subtitle="대제목 + 서브카피 + Primary CTA" -->

📷 [캡처 삽입] claude.ai/design "우리 브랜드 디자인 시스템" 프로젝트의 카드 그리드

결과와 배운 점

결과

명령 한 줄 → 추출 파일 36개 → 정제된 디자인 시스템 → 클로드 디자인 프로젝트까지 한 세션에서 완주했습니다. 손으로 반나절 걸리던 "레퍼런스 → 토큰화" 작업이 대화 네 번으로 끝났습니다.

배운 점 & 나만의 꿀팁

1. 자동 추출은 완성품이 아니라 초안 재료다. 폴백 폰트·오분류·측정 노이즈는 반드시 사람(+AI)이 걸러야 합니다.

2. "노이즈 짚어줘"를 프롬프트에 명시하라. 그냥 요약시키면 노이즈까지 그럴듯하게 정리해 버립니다. 저는 "믿을 수 없는 것"을 콕 집어 물었더니 오류 다섯 가지를 잡아냈습니다.

3. 색은 감이 아니라 명암비(WCAG)로 검증하라. AI에게 대비 수치를 직접 계산하게 하면 "파란 글자 금지" 같은 방어 가능한 규칙이 나옵니다.

4. 폰트 라이선스를 확인하라. 토스 전용 폰트는 비공개라, 무료 대체폰트(Pretendard)를 폴백으로 잡는 게 실무적입니다.

겪은 시행착오

• npx designlang이 종료코드 1(에러)로 끝났지만 파일은 정상 생성됐습니다. 알고 보니 PowerShell이 정상 로그("Launching browser…")를 오류로 오해한 데다, 마지막 요약 단계에 사소한 버그가 겹친 것이었습니다. → "에러처럼 보여도 결과물부터 확인."

• 결과가 폴더 최상위가 아니라 design-extract-output/ 하위에 생성돼 잠깐 헤맸습니다.

• 한글 폴더 경로 때문에 파일 읽기가 한 번 실패해 경로 검색으로 우회했습니다.

도움이 필요한 부분

• 클로드 디자인 카드에서 히어로·가격표처럼 넓은 컴포넌트의 뷰포트(카드 크기) 최적값을 어떻게 잡는지, 경험 있으신 분의 조언을 구합니다.

• 추출 노이즈를 자동으로 필터링하는 규칙셋을 만들어두면 반복 작업이 편할 텐데, 좋은 방식이 있으면 공유 부탁드립니다.

앞으로의 계획

• 노이즈 자동 교정 스크립트를 만들어, URL만 넣으면 "정제된 토큰"까지 한 번에 나오도록 파이프라인화하기.

• 입력폼·탭·토스트·내비게이션 바 등 컴포넌트 카드를 증분 확장하기.

• 이 워크플로를 강의·컨설팅 산출물(랜딩페이지·PPTX 카탈로그) 제작에 그대로 접목하기.