프론트엔드 개발자만으로 Design System을 만드는 방법

2026-08-08 — 5 min read

디자인 역량 없이 3가지 훔치기(클론 코딩, 벤치마킹, Claude)로 만드는 법

--

목표

  1. 프론트엔드 개발 시 요소의 최소화, 디자인 일관성 보장, 개발 효율성 증진을 우선
  2. (1)을 달성하기 위해 직접 디자인 하지 않고, AI를 최대한 활용해 조금의 공수로 디자인 시스템을 마련
    • Claude Opus/Fable 5의 프론트엔드 성능을 최대한 활용해 최대한 자동화

대상 독자

  1. 디자이너가 없고,
  2. 디자인 개편이 필요한 기존 서비스는 있으며,
  3. 기존 서비스의 정체성(브랜드 컬러, 로고 등)이 있고,
  4. 본인이 프론트엔드 개발자여서, UI/UX와 디자인 시스템을 평가가 가능한 경우

결과물

  1. 디자인 시스템 구현/문서 (React component, Storybook, html)
  2. 디자인 토큰 - Color, Typography, Elevation, Radius, Motion, Spacing, ...
  3. 최소한의 컬러 팔레트
  4. 다크/라이트 테마 지원
  5. 기본 컴포넌트(Primitives) - Button, Checkbox, Dialog, Menu, Progress, Radio, Select, Slider, Tabs, TextInput, Alert, ...

한계

  1. Mobile Web이 가장 쉬움
  2. 벤치마킹 대상이 웹일 때 효과적
    • 앱일 때는 비추천 - mobbin 스크린샷으로 근사만 가능
  3. 벤치마킹 대상이 Minimal일 때 효과적 (Tesla 등)

준비물

  1. 벤치마킹할 대상 웹 서비스
  2. 기존 자사 서비스
  3. 결과물에 대한 안목

방법론

  1. 벤치마킹할 서비스의 디자인 시스템을 추출
    • Claude에서 Chrome을 활용해 대상 웹서비스를 클론하면서, Design System을 추출하라고 지시
  2. 자사 서비스에서 토큰, 컴포넌트 추출
  3. (1)에 (2)를 적용하며, 브랜드 컬러 등을 적용
  4. 겹치는 컴포넌트에 대해서는 어떤 컴포넌트를 버리고, 쓸지 결정
  5. 오픈소스 디자인 시스템을 통해 디자인 시스템의 토큰 구성 방식과 공통 컴포넌트 구성을 이해
    • 미리 해둔 벤치마크: https://design-systems-benchmark.vercel.app/
  6. (5)를 바탕으로 부족한 토큰, 공통 컴포넌트를 보충 (구현에는 shadcn 사용)
  7. Compound Component 패턴으로 확장성 있게 구성
  8. 신규 디자인 시스템으로 Showcase 생성
  9. 기존 서비스에 신규 디자인 시스템 적용 시안들 생성

주의 사항 (체크리스트)

[클론 코딩]

  1. 클론 코딩한 것에 대해 정밀한 실측을 요구해서 pixel diff가 최소화될 때까지 반복
  2. 애니메이션을 제대로 가져왔는지 확인
  3. 컴포넌트가 정확하게 추출했는지 확인

[디자인 시스템]

  1. 불필요한 컬러 팔레트가 있는지 확인
  2. 시맨틱 컬러 팔레트 적용 여부를 확인해서, 다크/라이트 테마가 제대로 지원되는지 확인

[기존 서비스 추출]

  1. 추출 누락이 없는지 확인
  2. 제대로 추출되었는지 확인

[Storybook]

  1. 컴포넌트가 상태 별로 Story가 분리되어있는지 확인
  2. autodocs 등을 활용해 컴포넌트 별로 한 페이지로 문서화되는지 확인

효과적이었던 것

  1. Claude in Chrome으로 클론 코딩하고, 추출하는 것
  2. shadcn (+TailwindCSS)
  3. 기존 오픈 소스 디자인 시스템 벤치마킹

크게 의미 없던 것

실제 웹사이트가 있어야 검증 루프를 돌릴 수 있기 때문에, 추출물 수준에서는 완성도 보장이 불가능

  1. getdesign.md
  2. Mobbin MCP
  3. Claude가 아닌 모델 - Browser로 집요하게 검증하지 않으려고 하거나, Browser 사용에 문제 있는 Model은 효과적이지 않았음

--

목록으로