디자인 시스템 + 외부 사례 — 색·폰트·여백 + 클로드/Tailwind UI/shadcn 톤 가져오기
이 레슨이 끝나면
- 디자인 시스템(색·폰트·여백의 규칙)이 무엇인지, 왜 화면 만들기 전에 먼저 정해두면 편한지 이해한다
- vuild.kr PLAN 5단계에서 AI가 만든 디자인 톤 옵션을 보고 마음에 드는 걸 한 개 골랐다
- 대표 참고 사례 2개(Anthropic Claude · shadcn/ui)를 둘러보고 내 톤에 가까운 걸 메모했다 (나머지 사례는 "필요할 때" 참고)
- 화면을 더 다듬어주는 외부 도구가 있다는 것만 알아두고, 본격 사용은 Ch.4로 미룬다
디자인 시스템이 뭐예요?
디자인 시스템 = 색·폰트·여백을 미리 정해둔 "규칙 모음"이에요. 한 번 정해 놓으면 화면을 100개 만들어도 분위기가 한결같이 유지돼요. 반대로 규칙 없이 화면을 하나씩 만들면 색도 폰트도 제각각인 "테마파크"가 돼버려요.
정해두면 좋은 건 크게 4가지 — 색, 폰트, 여백(요소 사이 간격), 모서리(둥근 정도)예요. 아래는 예시일 뿐이고, 실제 값은 AI가 알아서 채워줘요. "아, 이런 걸 정하는구나" 정도만 보면 충분해요.
| 정하는 것 | 예시 (이런 느낌) |
|---|---|
| 색 | 배경색, 글자색, 강조색(버튼 등) 한 세트 |
| 폰트 | 제목용 / 본문용 글꼴 (예: Pretendard) |
| 여백 | 요소 사이를 얼마나 띄울지 (좁게 / 넉넉하게) |
| 모서리 | 버튼·카드 모서리를 각지게 / 둥글게 |
이렇게 한 번 정해두면 Ch.4(BUILD)에서 화면을 만들 때 AI가 알아서 일관되게 적용해줘요. 예: "강조색을 좀 더 진하게 해줘" 한 줄이면 화면 곳곳의 버튼 색이 한꺼번에 바뀌어요.
옆 탭에 PLAN 5단계 열기
옆 탭 주소
https://vuild.kr/projects/[본인프로젝트번호]/plan/design_system
처음 들어가면 AI가 본인 PRD + 기능 명세 base로 2~3가지 톤 옵션을 제시해요. 각 옵션은 색 팔레트 + 폰트 샘플 + 미리보기 카드로 구성돼 있어요. 본인이 한 옵션을 골라 "선택"하거나, 마음에 드는 게 없으면 "다시 생성"으로 다른 톤을 받을 수 있어요.
옵션 고르는 기준 — 본인 톤 한 줄로 정의하기
옵션을 고르기 전에 본인 SaaS의 톤을 한 줄로 적어 보세요. 예: "따뜻하고 친근한 / 어둡고 날카로운 / 신뢰감 있고 단정한 / 발랄하고 유쾌한". 이 한 줄이 잡히면 옵션 카드 중에 어느 게 맞는지 직관으로 알 수 있어요.
- 따뜻 / 친근 → 베이지 + 테라코타 + Pretendard Regular
- 어둡 / 날카로움 → 블랙 + 네온 그린 + Inter
- 신뢰 / 단정 → 화이트 + 네이비 + Pretendard SemiBold
- 발랄 / 유쾌 → 화이트 + 핑크/노랑 + Pretendard Bold
⭐ 유명 서비스 디자인 흉내내기 — 대표 2개만 보면 충분
AI가 만든 옵션도 좋지만, 이미 잘 만들어진 유명 서비스를 참고하면 내 톤을 빨리 잡을 수 있어요. 처음엔 아래 대표 2개만 새 탭에서 둘러보세요. 마음에 드는 분위기를 메모해두면 나중에 AI에게 "이런 느낌으로 해줘"라고 부탁할 때 써먹어요.
① Anthropic Claude (claude.ai) — 따뜻한 베이지·미니멀
베이지 배경 + 한 가지 포인트 색(테라코타) + 넉넉한 여백 + 친근한 글꼴.
"AI인데 차갑지 않게" 느낌이에요. 지금 보고 있는 이 Vuild 화면도 이 톤을 참고했어요.
이런 분에게: 따뜻하고 친근한 콘텐츠·교육·노트 서비스.
② shadcn/ui (ui.shadcn.com) — 깔끔한 흰색·요즘 표준
깔끔한 흰색 바탕 + 모던한 글꼴 + 살짝 둥근 모서리. 요즘 AI 도구들이 기본으로 만들어주는 가장 흔한 스타일이에요.
무료라서 부담도 없어요.
이런 분에게: 무난하고 깔끔하게 시작하고 싶은 대부분의 빌더.
나머지 참고 사례 (지금은 이름만, 필요할 때 검색해서 구경) — 본인 톤이 위 둘과 안 맞을 때만 골라 보세요.
- Linear (linear.app) — 어둡고 날카로운, 프로 개발자 도구 느낌
- Vercel (vercel.com) — 검정+흰색, 극도로 단순하지만 고급스러움
- Stripe (stripe.com) — 신뢰감 있는 금융 느낌, 표·차트가 많은 서비스에
- Tailwind UI (tailwindui.com) — 깔끔한 유료 화면 모음(약 $300, 선택)
화면을 더 다듬어주는 도구 — 이름만 알아두기
지금은 안 써도 돼요. "이런 게 있구나"만
나중에 화면을 더 예쁘게 다듬고 싶을 때 도와주는 도구들이 있어요. 지금 단계에선 전혀 필요 없어요. 아래 한 줄 소개만 보고 넘어가세요. 실제로 써 보는 건 Ch.4(BUILD)에서 안내해요.
- Claude Artifacts — claude.ai에서 한국어로 부탁하면 화면을 바로 미리 보여주고 고쳐줌 (가장 쉬움)
- v0.dev — "이런 화면 만들어 줘" 한국어 한 줄로 화면 초안을 뽑아주는 도구
- Figma + AI — 화면을 그림처럼 직접 그려보고 싶을 때 쓰는 디자인 프로그램
권장: 도구는 일단 잊고 Ch.4(BUILD)까지 가세요. 처음부터 도구가 많으면 오히려 헷갈려요.
실습 — 5분 안에 본인 디자인 시스템 결정
- 본인 톤 한 줄 적기 — 종이나 메모장에 한 줄로 (예: "따뜻하고 친근한 독서 노트")
- 대표 사례 2개(클로드·shadcn) 둘러보기 — 둘 다 안 맞으면 나머지 목록에서 하나 더
- vuild.kr PLAN 5단계 옵션 검토 — AI가 만든 2~3개 옵션 중 본인 톤에 가장 가까운 거 선택
- "선택" 또는 "이 옵션 사용" 버튼 클릭 — 내 디자인 톤이 저장됨
- (선택) AI Coach에 한 줄 부탁 — "클로드(claude.ai)처럼 따뜻한 베이지 톤으로 다시 만들어 줘" 같이 사례를 예로 들어 부탁
⚠️ 디자인은 Ch.4에서 더 다듬어요. 지금은 바탕만
지금 단계에서 디자인을 100% 완벽하게 잡으려고 너무 시간 쓰지 마세요. "이 톤이면 OK" 정도까지만 잡고 다음 단계(유저 플로우)로 넘어가세요. 본격적인 디자인 적용은 Ch.4(BUILD)에서 다시 다뤄요. 그때 위에서 소개한 도구들도 직접 써 봐요.
막히는 지점 — 미리 답
- "옵션 다 마음에 안 들어요" → AI Coach에 사례 이름을 들면서 "이런 톤으로 다시 만들어 줘" 부탁. 예: "Linear처럼 어두운 톤"
- "색은 좋은데 폰트가 별로예요" → AI Coach에 "폰트만 Pretendard로 바꿔 줘" 한 줄 부탁. 한 가지만 콕 집어 바꿀 수 있어요
- "참고 사이트가 영어라 안 보여요" → 글은 안 읽어도 돼요. 색·분위기만 보면 돼요. 크롬 자동 번역을 켜도 좋고요
- "우리 회사 브랜드 색이 정해져 있어요" → AI Coach에 그 색을 알려주며 "강조색을 이 색으로 고정하고 나머지를 맞춰 줘"라고 부탁 (색 코드가 있으면 같이 붙여넣기)
- "잘 모르겠어요" → 화면을 그대로 AI Coach에 복붙하고 "내 서비스에 어울리는 톤 추천해 줘"라고 물어보세요. 혼자 고민하지 마세요
완료 체크리스트
- ☐ 본인 톤 한 줄을 메모장 또는 종이에 적었다
- ☐ 대표 사례 2개(클로드·shadcn) 중 최소 하나를 새 탭으로 둘러봤다
- ☐ vuild.kr PLAN 5단계에서 옵션 한 개를 선택했고, 디자인 톤이 화면에 적용된 걸 봤다
- ☐ Ch.4에서 디자인을 더 다듬는다는 점을 알고, 지금은 "바탕만 잡기"로 마음 정리했다
다음 단계 → 3-6 유저 플로우
디자인 톤이 잡혔으면 다음은 유저 플로우예요. "사용자가 우리 서비스에서 어떤 화면을 어떤 순서로 거치는지" 흐름을 한 그림으로 정리해요. AI가 자동으로 핵심 플로우 2~3개를 만들어줘요. 본인은 그게 본인 의도와 같은지 확인하고 다듬어요.
옆 탭에 PLAN 5단계 열기
로그인 후 본인 프로젝트로 진행할 수 있습니다.