시도하고자 했던 것과 그 이유를 알려주세요.
잘 만들어진 웹 사이트의 디자인 규칙(색·폰트·여백·컴포넌트)을 자동으로 추출해주는 designlang이라는 도구를 직접 돌려보고, 그 결과를 실제 상세페이지·PPT 제작에 쓸 수 있는 디자인 시스템 문서로 정리하는 것까지 해봤습니다. 대상은 익숙한 지피터스(gpters.org) 로 정했어요.
이유는 단순합니다. 저는 상세페이지나 카탈로그를 만들 때마다 "색은 뭘 쓰지, 폰트는, 여백은 몇 px?"를 매번 맨땅에서 정하느라 시간을 버렸습니다. 레퍼런스 사이트에서 디자인 규칙을 역으로 뽑아 출발점으로 삼으면 이 낭비를 줄일 수 있을 것 같았고, 동시에 "AI가 뽑아준 값을 그대로 믿어도 되는가?" 를 검증하고 싶었습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
사용 도구: Claude Code(터미널 AI) · designlang(오픈소스 디자인 추출 CLI) · Node.js
① 환경 확인 → 한 줄로 추출
Node.js 설치를 확인하고(v24.11.1), 분석용 폴더를 만든 뒤 설치 없이 바로 실행되는 npx로 추출을 돌렸습니다. 아래 프롬프트를 Claude에게 그대로 줬어요.
프롬프트: "현재 폴더 안에 '디자인분석' 폴더를 만들고, 그 안에서
npx designlang https://www.gpters.org/를 실행한 뒤 생성된 결과 파일들을 정리해서 요약해줘."
실제 실행된 명령어:
npx designlang https://www.gpters.org/이 한 줄이 헤드리스 브라우저로 지피터스를 실제로 띄우고, 렌더링된 최종 CSS를 훑어 결과 파일 44개(디자인 토큰 JSON, Tailwind config, Figma 변수, 미리보기 HTML, AI용 프롬프트 등)를 만들어냈습니다.
[📸 이미지 1 — designlang 실행 후 44개 파일이 생성된 터미널 화면]
② 노이즈 교정 + 실제 컴포넌트 매핑 지시
AI 추출값을 그대로 쓰지 않고, 아래 프롬프트로 검수·교정·문서화를 한 번에 요청했습니다.
designlang이 뽑아준 토큰과 브랜드 문서를 원본 초안으로 삼아, 다음을 해줘:1. 추출 노이즈(폰트·색 대비 등) 필요하면 교정하고 대안 제시
2. 이 토큰을 상세페이지(HTML)의 실제 컴포넌트
(히어로/가격표/CTA/카드/뱃지)에 매핑한 적용 가이드
3. PPTX 카탈로그용 규칙(표지·본문 슬라이드 색/폰트/여백) 별도 정리
4. 위를 하나의 HTML로 묶어 한눈에 디자인 시스템을 살펴보게 해줘
③ 결과물 — 디자인 시스템 HTML 1장
교정한 토큰 → 컴포넌트 매핑 → PPT 규 칙을 외부 의존성 없는 HTML 한 파일로 묶었습니다. 왼쪽엔 렌더 예시, 오른쪽엔 "이 토큰이 어디 쓰였는지" 매핑을 나란히 배치했어요.
[📸 이미지 2 — 완성된 gpters-design-system.html: 색 팔레트 · 컴포넌트 매핑 · PPTX 슬라이드 목업 화면]
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
가장 크게 배운 것은 "AI 자동 추출값은 정답이 아니라 초안이다. 반드시 사람이 검수해야 한다" 입니다. 실제로 걸러낸 노이즈들:
항목
AI가 뽑은 값 (틀림)
교정값
본문 폰트
Apple Color Emoji
Noto Sans KR (제목 이모지 📣📢가 폰트로 오인됨)
Primary 텍스트
#eb5a10 (대비 3.5:1, 본문 부적합)
#c2410c (5.2:1, WCAG AA 통과)
여백
3·8·16·37·336px (불규칙)
4 기반 4·8·16·24·32
브레이크포인트
[object Object]px (버그)
표준값 교체
👉 꿀팁: 색은 "괜찮아 보인다"로 판단하지 말고 WCAG 대비 공식으로 계산하게 시키세요. 브랜드 오렌지가 버튼엔 OK지만 본문 텍스트론 부적합하다는 걸 수치로 확인했습니다. 그리고 오렌지 텍스트가 흰 배경에 올라갈 땐 진한 오렌지(#c2410c)로 바꾸는 규칙을 만든 게 핵심이었어요.
과정 중에 어떤 시행착오를 겪었나요?
npx 실행 마지막에 Extraction failed(에러 코드 1)가 떠서 실패한 줄 알았는데, 확인해보니 부가 단계 하나만 실패했고 파일 44개는 정상 생성돼 있었습니다. 에러 메시지만 보고 포기하지 않고 실제 산출물을 열어본 게 다행이었어요.
도움이 필요한 부분이 있나요?
지금은 메인 페이지 한 장만 분석했는데, 여러 페이지를 종합해 토큰을 뽑는 더 나은 방법이 있을까요?
추출 토큰을 실제 Figma 라이브러리로 옮겨 팀과 공유해보신 분의 노하우가 궁금합니다.
앞으로의 계획이 있다면 들려주세요.
교정된 토큰으로 실제 상세페이지 HTML 제작
같은 규칙으로 PPTX 카탈로그 만들기
다른 벤치마킹 사이트 2~3곳도 추출해 비교 무드보드 구성
도움 받은 글 (옵션)
designlang(design-extract) 오픈소스: https://github.com/Manavarya09/design-extractWCAG 2.1 색 대비 기준(AA 4.5:1) — W3C 웹 접근성 가이드라인
분석 대상: 지피터스 공식 홈페이지 https://www.gpters.org/
