소개
시도하고자 했던 것과 그 이유를 알려주세요.
우리 커뮤니티 사이트(gpters.org)의 디자인을 AI로 자동 추출해서, 이걸 실전에서 쓸 수 있는 "브랜드 디자인 시스템"으로 다듬고 클로드 디자인(claude.ai/design)에 등록까지 해보는 걸 시도했습니다.
계기는 두 가지였습니다.
매번 브랜드 가이드를 수작업으로 정리하는 대신, AI 도구로 초안을 뽑고 사람이 검증하는 파이프라인이 실제로 쓸만한지 확인해보고 싶었습니다.
AI가 뽑아준 디자인 토큰을 "그대로 믿고" 써도 되는지, 아니면 반드시 사람이 걸러야 하는 노이즈가 있는지 직접 확인해보고 싶었습니다. (스포일러: 노이즈가 꽤 있었습니다.)
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
사용 도구: Claude Code(CLI) · npx designlang(오픈소스 웹사이트 디자인 추출기) · Claude Artifacts · claude.ai/design (DesignSync)
4단계로 진행했습니다.
1단계 — 원본 추출designlang CLI가 헤드리스 브라우저로 실제 gpters.org를 렌더링하고, DOM에 적용된 computed style(색상·폰트·spacing·radius·shadow)의 출현 빈도를 통계적으로 집계해서 "디자인 시스템 추정치"를 뽑아줍니다. 결과로 디자인 토큰 JSON, Tailwind config, Figma 변수, AI 툴용 프롬프트 등 40여 개 파일이 한 번에 생성됐습니다.
npx designlang https://www.gpters.org/2단계 — 해석
추출된 값이 "정답"이 아니라 confidence 스코어가 붙은 추정치라는 걸 이해하고, 뭘 믿을 수 있고 뭘 못 믿을지 짚었습니다.
3단계 — 노이즈 교정 + 적용 가이드 제작
잘못 추출된 값(이모지 폰트 오탐, WCAG 대비 실패, radius 중복, 컨테이너 폭이 spacing으로 오분류 등)을 교정하고, 이 토큰을 실제 컴포넌트(히어로/가격표/CTA/카드/뱃지)와 PPTX 슬라이드 규칙에 매핑해서 하나의 HTML 아티팩트로 만들었습니다.
4단계 — 클로드 디자인 배포
완성된 디자인 시스템을 컴포넌트별 미리보기 카드(@dsCard) + 토큰 JSON 패키지로 재구성해서, claude.ai/design에 "우리 브랜드 디자인 시스템"이라는 새 프로젝트로 업로드했습니다.
사용한 프롬프트 전문
[1단계]현재 폴더 안에 "디자인분석"이라는 새 폴더를 만들고, 그 폴더 안에서 아래를
실행한 뒤 생성된 결과 파일들을 정리해서 요약해줘:
npx designlang https://www.gpters.org/
[2단계]방금 designlang이 뽑은 결과를 바탕으로, 이 도구가
무엇을·어떻게·왜 하는지 직관적으로 설명해줘.
그리고 추출된 핵심 토큰(색·폰트·여백·컴포넌트)을 요약하고,
믿을 수 없는 노이즈(예: 이모지가 폰트로 잡히는 것)가 있으면 짚어줘.
[3단계]designlang이 뽑아준 토큰과 브랜드 문서를 원본 초안으로 삼아, 다음을 해줘:
1. 추출 노이즈(폰트·색 대비 등) 필요하면 교정하고 대안 제시
2. 이 토큰을 상세페이지(HTML)의 실제 컴포넌트
(히어로/가격표/CTA/카드/뱃지)에 매핑한 적용 가이드
3. PPTX 카탈로그용 규칙(표지·본문 슬라이드 색/폰트/여백) 별도 정리
4. 위를 하나의 HTML로 묶어 한눈에 디자인 시스템을 살펴보게 해줘. 보고 피드백할게.
[4단계]방금 우리가 이 대화에서 함께 만든 디자인 시스템을,
클로드 디자인(claude.ai/design)의 디자인 시스템으로 업로드해줘.
- 컴포넌트별 @dsCard 미리보기 카드 + 토큰을 담은 업로드용
패키지로 먼저 재구성해줘 (아직 없으면 지금 만들어줘)
- "우리 브랜드 디자인 시스템" 이라는 새 프로젝트를 만들어 올려줘
- 도중에 디자인 권한 승인 창이 뜨면 알려줘, 내가 승인할게
(캡처 자리 1) designlang 실행 결과 파일 목록
(캡처 자리 2) 교정본 디자인 시스템 아티팩트 화면
(캡처 자리 3) claude.ai/design "우리 브랜드 디자인 시스템" 프로젝트 카드 뷰
결과와 배운 점
배운 점과 나만의 꿀팁 / 시행착오 / 도움이 필요한 부분 / 앞으로의 계획
배운 점
AI 추출 도구의 결과는 "가장 많이 관측된 값"이지 "정답"이 아닙니다. confidence 스코어를 반드시 확인해야 하고, 50% 미만인 항목은 참고용으로만 써야 합니다.
이모지가 섞인 텍스트는 브라우저가 이모지 렌더링용 폰트(Apple Color Emoji 등)를 함께 쓰기 때문에, 자동 폰트 감지 도구가 이걸 "가장 많이 쓰인 본문 폰트"로 착각하는 경우가 흔합니다. 커뮤니티/블로그처럼 이모지를 자주 쓰는 사이트일수록 이 오탐을 조심해야 합니다.
브랜드 primary 색이 눈에 띄는 색(주황·빨강 계열)일수록 흰 텍스트와 대비가 부족한 경우가 많습니다. 실제로 gpters.org의 primary(#eb5a10)에 흰 텍스트를 올리면 3.5:1로 AA 기준(4.5:1) 미달이었고, 다크 텍스트를 쓰거나 색을 한 단계 어둡게(#b8460d) 조정해야 통과했습니다.
다크모드까지 고려하면 라이트모드에서 통했던 대비 규칙이 그대로 안 통합니다. 다크모드용으로 색을 밝게 조정했다가, 그 색을 흰 텍스트 버튼에 그대로 재사용해서 대비가 깨지는 버그를 스스로 만들었습니다 → 테마별로 대비를 따로 계산해야 한다는 걸 체감했습니다.
컴포넌트별 미리보기 카드 + 토큰 JSON으로 패키징해두면, 나중에 다른 프로젝트나 다른 AI 코딩 도구(Cursor, v0 등)에도 바로 먹일 수 있어서 확장성이 좋았습니다.
시행착오
designlang이 실행 마지막 단계에서 "Extraction failed" 에러를 냈지만, 실제로는 파일 34개가 전부 정상 생성돼 있었습니다. 툴 자체의 마무리 단계 버그로 보이고, 에러 메시지만 믿지 말고 실제 파일 존재 여부를 직접 확인해야 했습니다.추출 결과 중 브레이크포인트 값이
[object Object]px로 깨져 나오는 직렬화 버그가 있어서, 해당 섹션은 통째로 버렸습니다.한글이 섞인 문서라 웹폰트를 직접 임베드하기엔 용량 부담이 커서, 결국 시스템 폰트 스택(Noto Sans KR 등)으로 타협했습니다.
도움이 필요한 부분
이번 세션에서는 claude.ai 자체를 브라우저로 열어 직접 렌더링 확인을 못 했습니다. claude.ai/design에 올라간 카드들이 의도한 대로 보이는지, 스터디원분들이 직접 열어보고 깨진 부분 있으면 피드백 부탁드립니다.
앞으로의 계획
실제 렌더링 확인 후 컴포넌트 디테일 다듬기
같은 파이프라인으로 레퍼런스/경쟁 사이트도 추출해서 우리 디자인과 비교해보기
PPTX 카탈로그 규칙을 실제
.pptx템플릿 파일로 만들어서 발표 자료에 바로 쓰기
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
designlang (오픈소스 추출 도구): https://github.com/Manavarya09/design-extract
DESIGN.md 컨벤션 원조: design-extractor.com
