ARTICLE 25 min

디자인 시스템 + 외부 사례 — 색·폰트·여백 + 클로드/Tailwind UI/shadcn 톤 가져오기

이 레슨이 끝나면

  • 디자인 시스템(색·폰트·여백 토큰)이 무엇인지, 왜 코드보다 먼저 정해야 하는지 이해한다
  • vuild.kr PLAN 5단계에서 자동 생성된 본인 SaaS 디자인 토큰을 검토하고 1~2개 옵션을 골랐다
  • 외부 디자인 시스템 6개(Anthropic Claude / Tailwind UI / shadcn / Linear / Vercel / Stripe)의 특징을 알고, 본인 톤에 맞는 1~2개를 참고 사례로 메모했다
  • 외부 디자인 스킬(Figma plugin / v0.dev) 같은 도구를 어떻게 곁들일지 한 줄 계획을 세웠다

디자인 시스템이 뭐예요?

디자인 시스템 = 색·폰트·여백·컴포넌트의 규칙 모음이에요. 한 번 정해 놓으면 화면 100개를 만들어도 일관된 톤이 유지돼요. 반대로 디자인 시스템 없이 화면을 하나씩 만들면 색이 다르고 폰트도 다르고 여백도 다른 "테마파크"가 돼요.

비개발자에게 가장 중요한 건 다음 4가지 토큰이에요. 토큰은 "이름이 붙은 디자인 결정"이라는 뜻.

토큰 예시 이름 실제 값 (예)
색 (Color) brand / canvas / surface / text-main #C15F3C / #FAF7F3 / #FFFFFF / #2A2522
폰트 (Font) heading / body / mono Pretendard Bold / Pretendard Regular / JetBrains Mono
여백 (Spacing) spacing-sm/md/lg/xl 8px / 16px / 24px / 32px
모서리 (Radius) radius-sm/md/lg 4px / 8px / 16px

토큰을 한 번 정해 놓으면 Ch.4(BUILD)에서 화면을 만들 때 AI가 그 토큰을 일관되게 적용해줘요. 예: "버튼 색 brand로 해줘" 한 줄이면 화면 50개의 모든 버튼 색이 통일.

🎨 생성 (Codex CLI) — "디자인 시스템 = 토큰 모음" 다이어그램. 4박스(색/폰트/여백/모서리)에 각각 swatch + 폰트 샘플 + 자 + 둥근 사각형 그래픽.
토큰 4가지가 디자인의 base예요.

옆 탭에 PLAN 5단계 열기

옆 탭 주소

https://vuild.kr/projects/[본인프로젝트번호]/plan/design_system

처음 들어가면 AI가 본인 PRD + 기능 명세 base로 2~3가지 톤 옵션을 제시해요. 각 옵션은 색 팔레트 + 폰트 샘플 + 미리보기 카드로 구성돼 있어요. 본인이 한 옵션을 골라 "선택"하거나, 마음에 드는 게 없으면 "다시 생성"으로 다른 톤을 받을 수 있어요.

📷 캡쳐 — design_system show 화면. 2~3가지 톤 옵션 카드(색 팔레트 + 폰트 + 미리보기)가 그리드로.
옵션 카드 중 본인 톤에 맞는 걸 한 번 클릭으로 선택.

옵션 고르는 기준 — 본인 톤 한 줄로 정의하기

옵션을 고르기 전에 본인 SaaS의 톤을 한 줄로 적어 보세요. 예: "따뜻하고 친근한 / 어둡고 날카로운 / 신뢰감 있고 단정한 / 발랄하고 유쾌한". 이 한 줄이 잡히면 옵션 카드 중에 어느 게 맞는지 직관으로 알 수 있어요.

  • 따뜻 / 친근 → 베이지 + 테라코타 + Pretendard Regular
  • 어둡 / 날카로움 → 블랙 + 네온 그린 + Inter
  • 신뢰 / 단정 → 화이트 + 네이비 + Pretendard SemiBold
  • 발랄 / 유쾌 → 화이트 + 핑크/노랑 + Pretendard Bold

⭐ 외부 디자인 시스템 사례 6개 — 본인 톤 가져오기

AI가 만든 옵션도 좋지만, 이미 검증된 외부 디자인 시스템을 참고하면 빠르게 본인 톤을 잡을 수 있어요. 아래 6개는 비개발자가 봐도 한눈에 톤이 잡히는 대표 사례예요. 한 번씩 둘러보고 마음에 드는 1~2개를 메모하세요.

① Anthropic Claude — 따뜻한 베이지·미니멀

URL: claude.ai
특징: 베이지 배경 + 테라코타 1포인트 + 큰 여백 + 친근한 폰트(Söhne / Inter). "AI인데 차갑지 않게" 톤. Vuild LEARN의 디자인이 이 톤을 참고하고 있어요.
본인 SaaS에 어울리는 경우: 따뜻함·친근함을 원하는 콘텐츠/교육/노트 서비스.

② Tailwind UI — 검증된 유료 컴포넌트

URL: tailwindui.com
특징: 깔끔한 화이트 + 모던 sans 폰트 + 작은 둥근 모서리. 약 500개 컴포넌트가 유료(약 $300 평생). 한 번 사두면 평생 본인 SaaS 디자인의 base 라이브러리가 됨.
본인 SaaS에 어울리는 경우: SaaS 본격 운영 / 다양한 화면 빠르게 만들고 싶을 때.

③ shadcn/ui — 무료 오픈소스 (가장 많이 사용)

URL: ui.shadcn.com
특징: Tailwind UI와 비슷한 느낌의 무료 오픈소스 컴포넌트. AI 시대에 가장 많이 쓰이는 디자인 시스템. v0.dev / Cursor 같은 AI 도구가 기본으로 shadcn/ui 스타일을 생성해줘요.
본인 SaaS에 어울리는 경우: 무료로 시작 / AI 도구 자주 쓰는 빌더.

④ Linear — 어두운 톤·날카로움·기술적

URL: linear.app
특징: 다크 모드 + 네온 보라/그린 1포인트 + 모노스페이스 폰트. "프로 개발자용 도구" 톤. 인터랙션이 매우 빠르고 키보드 친화적.
본인 SaaS에 어울리는 경우: 개발자/디자이너 등 기술 사용자 대상 / 프로페셔널 도구.

⑤ Vercel — 단순·고급·검은 흰색

URL: vercel.com
특징: 검은색 + 흰색 + 한 가지 액센트 색. 극도로 단순하지만 고급스러움. 화이트 스페이스(여백)를 과감하게 씀.
본인 SaaS에 어울리는 경우: 미니멀리스트 / 본인 메시지가 강해서 디자인은 빠지길 원하는 경우.

⑥ Stripe — 신뢰감·금융·자세함

URL: stripe.com
특징: 보라+파랑 그라데이션 + Inter 폰트 + 정밀한 그리드. "결제 다루는 회사니까 믿어도 된다" 톤. 데이터 표·차트가 풍부.
본인 SaaS에 어울리는 경우: 금융·결제·데이터 분석 / 신뢰감이 핵심 가치인 경우.

🎨 생성 (Codex CLI) — 6개 외부 디자인 시스템 비교 그리드(2x3). 각 칸에 사이트 이름 + 대표 색 swatch + 톤 한 줄.
한 화면에서 6가지 톤을 비교해 보세요.
📷 캡쳐 — claude.ai 메인 화면 풀스크린 (Anthropic 디자인 톤 참고용).
📷 캡쳐 — linear.app 메인 화면 풀스크린 (어두운 톤 참고용).

외부 디자인 스킬·도구 — Figma plugin / v0.dev

디자인 시스템을 정한 후, 화면 한 개 한 개를 만들 때 도와주는 외부 도구도 알아두면 좋아요.

도구 하는 일 언제 쓰면 좋은지
Figma + AI plugin 화면 디자인을 시각적으로 그리기. AI 플러그인(Magician, Builder.io 등)으로 자동 생성 디자인을 먼저 보고 결정한 후 코드로 옮기고 싶을 때
v0.dev (Vercel) 한국어로 "독서 노트 카드 그리드 만들어 줘" 입력 → React 코드 + 미리보기 자동 생성 한 화면 빠르게 prototype
Claude Artifacts claude.ai에서 한국어 요청 → HTML/CSS 미리보기 + 수정 반복 간단한 화면을 한 페이지로 빠르게

비개발자 1인 빌더 권장 흐름: 외부 도구는 일단 모른 채로 Ch.4(BUILD)까지 가세요. Ch.4-10(디자인 적용)에서 본인이 부족하다고 느끼면 그때 v0.dev 또는 Claude Artifacts를 써서 화면 한 개씩 보강하세요. 처음부터 도구가 너무 많으면 오히려 흔들려요.

🎨 생성 (Codex CLI) — Figma + AI / v0.dev / Claude Artifacts 3도구 비교 다이어그램.

실습 — 5분 안에 본인 디자인 시스템 결정

  1. 본인 톤 한 줄 적기 — 종이나 메모장에 한 줄로 (예: "따뜻하고 친근한 독서 노트")
  2. 외부 사례 6개 중 1~2개 둘러보기 — 그 한 줄에 가장 가까운 사례 선택
  3. vuild.kr PLAN 5단계 옵션 카드 검토 — AI가 만든 2~3개 옵션 중 본인 톤에 가장 가까운 거 선택
  4. "선택" 또는 "이 옵션 사용" 버튼 클릭 — 본인 디자인 토큰이 저장됨
  5. (선택) AI Coach에 한 줄 요청 — "Anthropic Claude처럼 베이지 + 테라코타 톤으로 다시 만들어 줘" 같이 외부 사례를 base로 한 추가 요청
📷 캡쳐 — 옵션 카드 한 개에 마우스 올리고 "이 옵션 선택" 버튼 강조 화면.
📷 캡쳐 — 선택 후 적용된 디자인 토큰(색 swatch + 폰트 샘플 + 미리보기 카드) 풀화면.
선택하면 본인 SaaS의 디자인 base가 잡혔어요.

⚠️ 디자인은 Ch.4-10에서 더 다듬어요. 지금은 base만

지금 단계에서 디자인을 100% 완벽하게 잡으려고 너무 시간 쓰지 마세요. "이 톤이면 OK" 정도까지만 잡고 다음 단계(유저 플로우)로 넘어가세요. 본격적인 디자인 적용은 Ch.4-10(BUILD 단계의 "디자인 시스템 적용 + 참고 사이트")에서 다시 다뤄요. 그때 v0.dev / Claude Artifacts 같은 도구도 직접 써 봐요.

막히는 지점 — 미리 답

  • "옵션 다 마음에 안 들어요" → AI Coach에 외부 사례 1~2개 이름을 들면서 "이런 톤으로 다시 만들어 줘" 요청. 예: "Linear처럼 어두운 톤"
  • "색은 좋은데 폰트가 별로예요" → AI Coach에 "폰트만 Pretendard로 바꿔 줘" 한 줄 요청. 토큰 한 가지만 교체 가능
  • "외부 사례 사이트 한국어가 안 보여요" → 영어 사이트지만 디자인 톤만 보면 돼요. 우상단 언어 변경 또는 크롬 자동 번역 ON
  • "내 도메인 색이 정해져 있어요(예: 회사 브랜드 색)" → AI Coach에 hex 코드를 직접 넣어서 "brand 색을 #FF5722로 고정하고 나머지를 다시 잡아 줘"
  • "외부 도구(Figma/v0.dev) 지금 꼭 써야 하나요?" → 아니에요. 지금은 vuild.kr 옵션만 결정. 외부 도구는 Ch.4에서.

완료 체크리스트

  • ☐ 본인 톤 한 줄을 메모장 또는 종이에 적었다
  • ☐ 외부 디자인 시스템 6개 중 최소 1~2개 사이트를 새 탭으로 둘러봤다
  • ☐ vuild.kr PLAN 5단계에서 옵션 카드 한 개를 선택했고, 디자인 토큰이 화면에 적용된 걸 봤다
  • ☐ Ch.4-10에서 디자인을 더 다듬는다는 점을 알고, 지금은 "base만 잡기"로 마음 정리했다

다음 단계 → 3-6 유저 플로우

디자인 토큰이 잡혔으면 다음은 유저 플로우예요. "사용자가 우리 서비스에서 어떤 화면을 어떤 순서로 거치는지" 흐름을 한 그림으로 정리해요. AI가 자동으로 핵심 플로우 2~3개를 만들어줘요. 본인은 그게 본인 의도와 같은지 확인하고 다듬어요.

옆 탭에 PLAN 5단계 열기

로그인 후 본인 프로젝트로 진행할 수 있습니다.

로그인