WeniVooks

1. 디자인 시스템이란?

1.1 UI/UX에서 디자인 시스템이란?

디자인 시스템은 반복적으로 사용되는 버튼, 폼, 아이콘 등의 UI 요소와 그 사용법, 규칙을 정리한 '디자인 설계 도면'입니다.

쉽게 말해 여러분 서비스의 모든 디자인 요소를 정리한 백과사전이라고 생각하면 됩니다. 색상은 뭘 쓸지, 버튼은 어떻게 생겼는지, 글꼴은 뭘 쓸지 미리 정해놓는 것이죠. 제품 규모가 커질수록 디자인 시스템은 필수입니다. 여러 사람이 만들어도 하나의 서비스처럼 보이게 하는 비결이니까요.

1.1.1 위니브 디자인 시스템

실제 기업에서 디자인 시스템이 어떻게 활용되는지 위니브의 사례를 통해 보겠습니다. 위니브는 Figma에서 모든 디자인 요소를 체계적으로 관리합니다. 그리드 시스템부터 아이콘까지 모든 것이 문서화되어 있습니다.

1.1.2 위니브 웹 서비스

위니브의 여러 서비스를 보면 디자인 시스템의 효과를 바로 알 수 있습니다.

네 개의 서로 다른 서비스지만 하나의 회사 제품처럼 보입니다. 사용자는 어느 서비스를 가도 "아, 위니브구나"라고 인지합니다. 개발자는 새 서비스를 만들 때 디자인 고민 없이 바로 개발에 집중할 수 있습니다.

이것이 바로 디자인 시스템의 가치입니다. 한 번 잘 만들어두면 모든 프로젝트에서 재사용할 수 있고, 브랜드 일관성도 자연스럽게 유지됩니다.

1.1.3 디자인 시스템의 요소

1.1.4 컴포넌트란?

레고 블록처럼 재사용 가능한 UI 조각입니다. 한 번 만들어두면 여러 곳에서 같은 모양으로 재사용합니다.

[예시]

• 버튼 컴포넌트: "확인", "취소", "구매하기" 버튼이 모두 같은 스타일
• 카드 컴포넌트: 상품 정보를 보여주는 네모난 박스
• 헤더 컴포넌트: 로고와 메뉴가 있는 상단 바

1.1.5 디자인 시스템의 장점

1. 일관성 유지

모든 페이지가 같은 느낌을 유지합니다. 사용자가 새 페이지를 가도 헷갈리지 않습니다.

2. 유지보수 용이

버튼 색상을 바꾸고 싶다면? 디자인 시스템에서 한 번만 수정하면 전체에 반영됩니다.

3. 협업 강화

"파란색 버튼으로 해주세요"가 아니라 "primary 버튼으로 해주세요"라고 명확하게 소통합니다.

4. 비용 절감

처음에는 만드는 것이 번거로울 수 있지만 이후에는 시간을 많이 아낄 수 있습니다.

5. AI와의 소통 효율성

• "네이버 같은 버튼 만들어줘" → AI가 헷갈림
• "디자인 시스템의 primary 버튼으로 만들어줘" → 명확함

1.2 바이브 코딩에서 ‘디자인 시스템’이 중요한 이유

디자인 시스템은 'AI가 이해할 수 있는 디자인 설명서'입니다.

1.2.1 실제 활용 과정

1. 레퍼런스 사이트 이미지를 AI에게 보여줍니다.
2. AI가 "파란색 메인, 둥근 버튼, 깔끔한 폰트네요" 분석합니다.
3. 이걸 design-system.md 파일로 정리합니다.
4. 새 페이지 만들 때 "design-system.md 참고해서 만들어줘"라고 요청합니다.
5. AI가 일관된 스타일로 페이지를 만듭니다.

1.2.2 디자인 시스템이 없으면

• 페이지마다 버튼이 다르게 생김
• 색상이 조금씩 달라짐
• 전체적으로 짜깁기한 느낌

1.2.3 디자인 시스템이 있으면

• 모든 페이지가 통일감 있음
• 한 사람이 만든 것처럼 보임
• 전문적인 서비스 느낌

이렇게 디자인 시스템을 문서화하면 AI가 단순히 이미지를 흉내내는 게 아니라 '정해진 룰'에 맞게 코딩합니다. 처음에 30분 투자해서 디자인 시스템을 만들어두면 나중에 몇 시간을 아낍니다. 그리고 여러분의 서비스가 훨씬 프로답게 보입니다. 이것이 바이브 코딩에서 디자인 시스템을 만들어야 하는 이유입니다.

2. Claude 활용 디자인 시스템 구축: Markdown 문서화

디자인 시스템을 Markdown 문서로 만들면 AI가 일관된 디자인을 구현할 수 있습니다. 레퍼런스 이미지를 분석해서 체계적인 디자인 시스템을 구축하는 방법을 알아보겠습니다.

2.1 MD 파일이란?

.md 파일은 Markdown(마크다운)이라는 경량 마크업 언어로 작성된 텍스트 파일입니다. .md 파일은 주로 README, 문서, 블로그 포스트 등에서 사용되며, HTML 같은 다른 포맷으로 쉽게 변환할 수 있어 프로그래밍, 협업, 문서화 등에 널리 활용됩니다.

• 일반 텍스트 기반이라 작성과 수정이 쉽고 가볍습니다.
• 제목, 굵은 글씨, 기울임, 링크, 목록, 코드 블록, 표 등을 간단한 문법으로 표현할 수 있습니다.
• 별도 도구 없이도 읽기 쉬운 형태로 작성할 수 있습니다.
• GitHub, 노션, 슬랙, VSCode 같은 다양한 플랫폼과 도구에서 지원됩니다.
• HTML 같은 포맷으로 즉시 변환 가능하여 웹 문서 작성에 편리합니다.
• 마크다운은 GitHub, 노션, VSCode 등 다양한 툴에서 서식이 적용된 상태로 지원되며, 코드 문서화 등에 최적화되어 있습니다.

2.1.1 .txt 파일과의 차이

txt(메모장)는 오직 순수한 텍스트만 저장합니다. 제목, 굵게, 기울임, 목록, 표 등 특별한 서식이나 구조를 담을 수 없습니다. 단지 텍스트만 기록되는 단순한 파일입니다.

.md 파일은 Markdown(마크다운) 문법을 사용하여 텍스트 내에 간단한 기호(#, *, -, ``` 등)만으로 제목, 굵게, 목록, 인용, 표, 링크, 이미지 등 다양한 서식을 표현할 수 있습니다. 이 파일은 그대로 사람이 읽기 쉽고, 웹페이지 등에서 서식이 적용된 형태로 쉽게 변환이 가능합니다.

2.2 디자인 시스템(.md) 제작 기본 프로세스

1. 레퍼런스 이미지 분석 요청

Claude에게 여러분이 참고하고 싶은 디자인 레퍼런스 이미지를 보여주고, 해당 이미지의 스타일과 특징을 분석해 달라고 요청합니다.

2. 분석 기반 MD 문서 생성 요청

Claude가 분석한 내용을 바탕으로 개발자가 보고 이해하기 쉬운 Markdown 형식의 디자인 시스템 문서를 만들어 달라고 요청합니다. 여기에는 색상 팔레트, 폰트, 여백 규칙, 컴포넌트 스타일 등이 포함됩니다.

3. 프로젝트에 MD 문서 포함 및 활용

생성된 MD 문서를 프로젝트 폴더에 포함시켜 Claude Code가 실제로 코드를 개발할 때 이 디자인 시스템을 참고하여 일관된 스타일을 구현하도록 요청합니다.

2.3 AI를 활용해 디자인 시스템 문서 만들기

2.3.1 1단계: 레퍼런스 캡처

클론하고 싶은 웹페이지나 앱 화면에서 디자인의 핵심이 잘 보이는 부분을 캡처합니다. 전체 페이지보다는 디자인 특징이 명확히 드러나는 부분을 선택하는 것이 좋습니다.

2.3.2 2단계: 디자인 분석 및 문서화

캡처한 이미지를 Claude에 보여주고 디자인 시스템 문서를 만들어달라고 요청합니다. 아래와 같이 서비스 제작 비용에 따라 간단한 요청과 상세한 요청으로 나누어 요청할 수 있습니다.

• 간단한 요청

  이 서비스의 디자인을 분석해줘

  이 서비스의 디자인을 분석해줘

• 상세한 요청

  첨부한 레퍼런스 이미지를 분석해서 웹서비스 디자인 시스템을 만들어줘.
   
  디자인 시스템 요구사항:
  - 색상 5가지 (메인/폰트메인/폰트서브/배경메인/배경서브)
  - 폰트: Pretendard, 4가지 크기
  - 여백: 8px 단위
  - 컴포넌트 스타일 (버튼, 카드, 입력 필드)
  - 그림자와 보더 처리
   
  ※ 주의: 이미지에 실제로 사용된 색상만 포함할 것
   
  design-system.md 파일 형식으로 만들어줘

  첨부한 레퍼런스 이미지를 분석해서 웹서비스 디자인 시스템을 만들어줘.
   
  디자인 시스템 요구사항:
  - 색상 5가지 (메인/폰트메인/폰트서브/배경메인/배경서브)
  - 폰트: Pretendard, 4가지 크기
  - 여백: 8px 단위
  - 컴포넌트 스타일 (버튼, 카드, 입력 필드)
  - 그림자와 보더 처리
   
  ※ 주의: 이미지에 실제로 사용된 색상만 포함할 것
   
  design-system.md 파일 형식으로 만들어줘

2.3.3 3단계: MD 파일 저장

Claude가 생성한 디자인 시스템 문서를 design-system.md 파일로 프로젝트 폴더에 저장합니다.

2.3.4 4단계: Claude Code에 적용

저장한 디자인 시스템을 Claude Code에서 활용합니다.

• 기존 프로젝트에 적용

  design-system.md 디자인 시스템을 반영한 디자인으로 변경해줘

  design-system.md 디자인 시스템을 반영한 디자인으로 변경해줘

• 새 프로젝트 생성

  design-system.md 파일을 참고해서 투두 리스트 앱을 만들어줘

  design-system.md 파일을 참고해서 투두 리스트 앱을 만들어줘

2.3.5 5단계: 디자인 시스템 수정

결과물을 보고 필요한 부분을 수정합니다.

- 메인 색상을 #2E6FF2로 변경해줘
- 버튼 라운드를 8px로 통일해줘
- 불필요한 애니메이션 제거해줘

- 메인 색상을 #2E6FF2로 변경해줘
- 버튼 라운드를 8px로 통일해줘
- 불필요한 애니메이션 제거해줘

2.4 활용 예시

하나의 디자인 시스템으로 여러 서비스를 만들 수 있습니다.

design-system md 디자인 시스템을 반영한 디자인으로 변경해줘

design-system md 디자인 시스템을 반영한 디자인으로 변경해줘

2.4.1 결과물 예시

모두 일관된 디자인 언어를 사용하므로 마치 하나의 제품군처럼 보입니다.

이렇게 만든 디자인 시스템 문서는 프로젝트 전체에서 재사용할 수 있습니다. 한 번 잘 만들어두면 모든 페이지가 일관된 디자인을 유지하게 됩니다.