## 소개
**시도하고자 했던 것과 그 이유**
실제로 운영 중인 이커머스 사이트(GUESS Korea)의 디자인을 "감"이 아니라 데이터로 뽑아내고, 그 데이터를 우리 브랜드 상세페이지에 바로 쓸 수 있는 디자인 시스템으로 바꾸는 전 과정을 한 번에 해보고 싶었습니다.
목표는 크게 4단계였습니다.
1. 웹사이트 디자인을 자동으로 추출한다 (`designlang` CLI)
2. 추출된 값의 노이즈를 사람이 직접 검수·교정한다
3. 교정된 토큰을 상세페이지 컴포넌트(히어로/가격표/CTA/카드/뱃지) + PPTX 카탈로그 규칙으로 재구성한다
4. 그 결과를 Claude Design(`claude.ai/design`)에 올려서 실제 동작하는 UI 키트까지 자동 생성한다
"AI가 웹사이트에서 뽑아낸 값을 그대로 믿어도 되는가?"를 직접 확인해보고 싶었던 것도 중요한 이유였습니다. (스포일러: 그대로 믿으면 안 됩니다.)
---
## 진행 방법
**사용한 도구**
- Claude Code (터미널 에이전트) — 전체 작업 오케스트레이션
- `npx designlang` — 오픈소스 CLI, 웹사이트에서 색·타이포·간격·컴포넌트 패턴 등 디자인 토큰을 자동 추출
- Claude in Chrome (브라우저 자동화 확장) — 실제 로그인 세션으로 `claude.ai/design` 조작
- Claude Design (`claude.ai/design`, Beta) — Anthropic의 디자인 시스템 생성 제품
**진행 순서와 실제 프롬프트**
### 1단계 — 원본 사이트 디자인 추출
```
현재 폴더 안에 "디자인분석"이라는 새 폴더를 만들고, 그 폴더 안에서 아래를 실행한 뒤 생성된 결과 파일들을 정리해서 요약해줘: npx designlang https://guesskorea.com
```
실행 전 `npm view designlang`으로 패키지가 실제 존재하는 정상 패키지인지부터 확인한 뒤 진행했습니다. 결과로 색상/타이포그래피/간격/컴포넌트 패턴/모션/디자인 시스템 점수(83/100, B등급) 등 30여 개 파일이 생성됐습니다.
### 2단계 — 추출 결과 해석 + 노이즈 짚기
```
방금 designlang이 뽑은 결과를 바탕으로, 이 도구가
무엇을·어떻게·왜 하는지 직관적으로 설명해줘.
그리고 추출된 핵심 토큰(색·폰트·여백·컴포넌트)을 요약하고,
믿을 수 없는 노이즈(예: 이모지가 폰트로 잡히는 것)가 있으면 짚어줘.
```
이 단계에서 `[object Object]` 렌더링 버그, confidence 0인 라벨, 서로 모순되는 폰트 크기(96px vs 7.5px) 같은 것들을 발견했습니다.
### 3단계 — 교정 + 컴포넌트 매핑 + PPTX 규칙 + 단일 HTML로 통합
```
designlang이 뽑아준 토큰과 브랜드 문서를 원본 초안으로 삼아, 다음을 해줘:
1. 추출 노이즈(폰트·색 대비 등) 필요하면 교정하고 대안 제시
2. 이 토큰을 상세페이지(HTML)의 실제 컴포넌트
(히어로/가격표/CTA/카드/뱃지)에 매핑한 적용 가이드
3. PPTX 카탈로그용 규칙(표지·본문 슬라이드 색/폰트/여백) 별도 정리
4. 위를 하나의 HTML로 묶어 한눈에 디자인 시스템을 살펴보게 해줘. 보고 피드백할게.
```
결과물은 Artifact(공유 가능한 웹페이지)로 만들어, 라이트/다크 테마를 모두 지원하는 한 장짜리 디자인 시스템 레퍼런스 문서로 정리했습니다.
*[여기에 3단계에서 만든 HTML 디자인 시스템 가이드 스크린샷 첨부]*
### 4단계 — Claude Design에 업로드해서 실제 UI 키트 생성
```
방금 우리가 이 대화에서 함께 만든 디자인 시스템을,
클로드 디자인(claude.ai/design)의 디자인 시스템으로 업로드해줘.
- 컴포넌트별 @dsCard 미리보기 카드 + 토큰을 담은 업로드용
패키지로 먼저 재구성해줘 (아직 없으면 지금 만들어줘)
- "우리 브랜드 디자인 시스템" 이라는 새 프로젝트를 만들어 올려줘
- 도중에 디자인 권한 승인 창이 뜨면 알려줘, 내가 승인할게
```
여기서부터는 순수 코딩 작업이 아니라 **브라우저를 직접 조작하는 에이전트 작업**으로 넘어갔습니다.
1. 로컬 파일(tokens.json/css, 컴포넌트별 카드 문서)로 업로드 패키지를 먼저 만들었고
2. `claude.ai/design`에 실제 접속해서 "Create design system → Create here" 플로우를 확인한 뒤
3. 로컬 폴더 첨부는 브라우저 자동화의 보안 제약으로 불가능하다는 걸 확인하고 (아래 배운 점 참고), 대신 색/폰트/타입스케일/컴포넌트 규칙 전체를 텍스트로 정리해 입력했습니다
4. 프로젝트명을 "우리 브랜드 디자인 시스템"으로 변경하고 `Generate`를 실행 — 약 5분 만에 토큰 7종, 컴포넌트 9종(Button/Input/Select/Badge/ProductCard/PricingCard/Hero/CTABanner/Modal), 그리고 실사용 가능한 상품 상세페이지 템플릿까지 총 54개 파일이 생성됐습니다.
*[여기에 완성된 Claude Design 상품 상세페이지 스크린샷 첨부]*
---
## 결과와 배운 점
**최종 결과**
- 토큰 7종(색상 — 레드를 "대형 장식용"과 "본문/버튼용" 두 톤으로 분리, 타이포그래피, 8px 간격, 라디우스, 그림자, 모션)
- 컴포넌트 9종, 실사용 가능한 상품 상세페이지 템플릿 1개
- 다크/라이트 테마 모두 지원하는 디자인 시스템 레퍼런스 문서(Artifact) 1개
**배운 점 / 나만의 꿀팁**
1. **`getComputedStyle` 기반 자동 추출은 원본 그대로 쓰면 위험합니다.** border-radius `30px`/`50px`처럼 그럴듯한 숫자가, 사실은 원형(%) 요소 하나의 그 순간 계산값일 뿐인 경우가 있었습니다. "숫자가 나왔다"와 "재사용 가능한 토큰이다"는 다른 이야기입니다.
2. **색 대비는 감이 아니라 직접 계산해야 합니다.** 브랜드 레드가 흰 배경에서 4.37:1로, WCAG AA 본문 기준(4.5:1)에 근소하게 미달했습니다. 큰 텍스트/버튼 배경에만 원색을 쓰고, 작은 텍스트는 더 진한 톤으로 분리하는 식으로 교정했습니다.
3. **브라우저 자동화는 OS 네이티브 파일 선택창을 볼 수도, 조작할 수도 없습니다.** (악성 페이지가 로컬 파일을 몰래 가져가지 못하게 하는 의도된 보안 설계) 그래서 로컬 폴더를 통째로 드래그해 올리는 건 사람이 직접 해야 하고, 자동화 쪽에서는 "텍스트로 설명해서 대체"하는 방법으로 우회했습니다.
4. **권한 공유는 도구별로 범위가 다릅니다.** 코딩 에이전트에게 폴더 접근 권한을 준 것이, 브라우저 자동화 세션의 파일 업로드 권한으로 자동 연결되지는 않았습니다.
5. **Claude Design은 파일 첨부 없이 텍스트 설명만으로도 상당히 충실하게** 토큰·컴포넌트·템플릿을 만들어줬습니다 — "완벽한 자료"보다 "명확한 브리프"가 더 중요했습니다.
**시행착오**
- Claude in Chrome 확장이 처음엔 연결되지 않아 설치·로그인부터 다시 해야 했습니다.
- 생성 중 렌더러가 바빠서 스크린샷 캡처가 몇 번 타임아웃됐고, 재시도로 해결했습니다.
- 미리보기 캔버스가 마우스 휠 스크롤에 반응하지 않아, 스크롤바를 직접 드래그해야 했습니다.
**도움이 필요한 부분**
- 라이선스가 있는 브랜드 폰트(FuturaStd 등)를 Claude Design에 안전하게 셀프호스팅으로 반영하는 가장 좋은 방법이 궁금합니다.
- 로컬 폴더를 파일피커 없이 더 고신뢰도로 업로드하는 우회 방법이 있는지도 찾아보고 싶습니다.
**앞으로의 계획**
- 실제 로고·상품 사진과 라이선스 폰트를 반영해 placeholder를 걷어낼 예정입니다.
- 장바구니 / 상품 리스트(PLP) / 체크아웃 화면까지 UI 키트를 확장할 계획입니다.
- 3단계에서 정리한 PPTX 카탈로그 규칙을 실제 파워포인트 템플릿으로 만들어볼 예정입니다.
---
## 도움 받은 글 (옵션)
- [designlang](https://www.npmjs.com/package/designlang) — 웹사이트 디자인 토큰 자동 추출 오픈소스 CLI
- Claude Design (`claude.ai/design`, Beta) — Anthropic 자체 제품 공식 안내
