비주얼 시스템 예시
B2B SaaS·소비자 앱·프리미엄 세 가지 유형별 컬러·타이포 팔레트와 8pt 그리드, 접근성 대비, 다크 모드, 모션 타이밍까지 그대로 참고할 수 있는 비주얼 시스템 레퍼런스.
핵심 요약
- 브랜드 성격에 따라 비주얼 전략이 달라진다: B2B SaaS는 블루/그레이·산세리프로 신뢰를, 소비자 앱은 따뜻한 컬러·둥근 형태로 친근함을, 프리미엄은 블랙/골드·세리프로 절제를 드러낸다.
- 컬러는 Primary·Secondary·Accent·Neutral·Semantic 5개 역할로 나누고, 대비율은 WCAG AA(4.5:1)를 최소선, AAA(7:1)를 목표로 검증한다.
- 레이아웃은 8pt 그리드(여백·컴포넌트·아이콘을 8의 배수)와 모바일 4·태블릿 8·데스크톱 12 컬럼 반응형 그리드로 통일한다.
- 모션은 등장 ease-out·퇴장 ease-in·전환 ease-in-out으로 구분하고 페이드 200ms·슬라이드 300ms·스케일 150ms 등 타이밍을 표준화한다.
- 2025~2026 흐름은 W3C 디자인 토큰 표준(2025.10 안정 사양), 접근성 퍼스트(WCAG 2.2), AI 기반 실시간 자동 감사, 다크 모드 기본화로 요약된다.
비주얼 시스템은 이론을 읽기보다 실제 적용 예시를 보면 더 빨리 이해됩니다. 이 챕터에서는 브랜드 유형별 비주얼 시스템 패턴을 모아 소개합니다.
참고 / 레퍼런스 페이지
- 언제 열어야 하나: 비주얼 아이덴티티에서 방향을 고른 뒤 예시가 더 필요할 때 - 예상 시간: 15~30분 - 필요한 선행 산출물: 포지셔닝 1안, 톤앤매너 요약, 비주얼 방향 가설 - 역할: 정답을 주는 페이지가 아니라, 패턴을 비교하며 방향을 선명하게 만드는 레퍼런스
비주얼 시스템 구조
유형별 비주얼 전략
1. B2B SaaS - 신뢰와 전문성
컬러 팔레트:
- Primary:
#2563EB(신뢰의 블루) - Secondary:
#64748B(중립적 그레이) - Accent:
#10B981(성공의 그린) - Background:
#F8FAFC(밝은 배경)
타이포그래피:
- Heading: Inter Bold (명확한 위계)
- Body: Inter Regular (가독성)
- Code: JetBrains Mono (기술적 신뢰)
2. 소비자 앱 - 친근함과 활력
컬러 팔레트:
- Primary:
#FF6B6B(따뜻한 레드) - Secondary:
#4ECDC4(활기찬 민트) - Accent:
#FFE66D(밝은 옐로우) - Background:
#FFFFFF(깨끗한 화이트)
타이포그래피:
- Heading: Poppins Bold (친근한 라운드)
- Body: Poppins Regular (읽기 편한)
- Accent: Pacifico (손글씨 느낌)
3. 프리미엄 브랜드 - 고급스러움과 절제
컬러 팔레트:
- Primary:
#1A1A1A(깊은 블랙) - Secondary:
#D4AF37(우아한 골드) - Accent:
#8B7355(따뜻한 브라운) - Background:
#FAFAFA(오프화이트)
타이포그래피:
- Heading: Playfair Display (우아한 세리프)
- Body: Lato Regular (깔끔한 산세리프)
- Accent: Cormorant (고급스러운 세리프)
컬러 시스템 설계
컬러 역할 정의
접근성 대비 체크
| 조합 | 대비율 | WCAG 등급 | 용도 |
|---|---|---|---|
#2563EB on #FFFFFF | 7.5:1 | AAA | 본문 텍스트 |
#64748B on #FFFFFF | 4.6:1 | AA | 보조 텍스트 |
#FFFFFF on #2563EB | 7.5:1 | AAA | 버튼 텍스트 |
#10B981 on #FFFFFF | 3.2:1 | - | 큰 텍스트만 |
접근성은 필수
WCAG AA 기준 (4.5:1)은 최소 요구사항입니다. 가능하면 AAA (7:1)를 목표로 하세요.
타이포그래피 시스템
타입 스케일
타이포 계층 예시
| 레벨 | 크기 | 굵기 | 행간 | 용도 |
|---|---|---|---|---|
| H1 | 48px | Bold | 1.2 | 페이지 제목 |
| H2 | 38px | Bold | 1.3 | 섹션 제목 |
| H3 | 30px | Semibold | 1.4 | 서브 섹션 |
| H4 | 24px | Semibold | 1.4 | 카드 제목 |
| Body | 16px | Regular | 1.6 | 본문 |
| Small | 14px | Regular | 1.5 | 보조 텍스트 |
| Caption | 13px | Regular | 1.4 | 캡션, 라벨 |
그리드와 레이아웃
8pt 그리드 시스템
규칙:
- 모든 여백은 8의 배수
- 컴포넌트 높이는 8의 배수
- 아이콘 크기는 8의 배수
반응형 그리드
| 브레이크포인트 | 컬럼 수 | 거터 | 여백 |
|---|---|---|---|
| Mobile (< 640px) | 4 | 16px | 16px |
| Tablet (640-1024px) | 8 | 24px | 24px |
| Desktop (> 1024px) | 12 | 32px | 32px |
아이콘 시스템
아이콘 스타일 가이드
아이콘 규칙:
- 크기: 16px, 24px, 32px, 48px
- 선 굵기: 2px (일관성)
- 모서리: 2px 라운드
- 패딩: 아이콘 크기의 20%
이미지 가이드
사진 스타일
| 유형 | 특징 | 용도 |
|---|---|---|
| 제품 사진 | 밝은 배경, 그림자 최소 | 제품 페이지 |
| 라이프스타일 | 자연광, 따뜻한 톤 | 마케팅 |
| 팀 사진 | 캐주얼, 친근한 표정 | 회사 소개 |
| 배경 이미지 | 흐림 효과, 낮은 채도 | 히어로 섹션 |
이미지 처리 규칙
모션 원칙
이징 곡선
모션 타이밍
| 요소 | 지속 시간 | 이징 | 용도 |
|---|---|---|---|
| 페이드 | 200ms | ease-out | 요소 등장 |
| 슬라이드 | 300ms | ease-out | 메뉴, 모달 |
| 스케일 | 150ms | ease-in-out | 버튼 호버 |
| 로딩 | 1000ms | linear | 프로그레스 |
다크 모드 대응
컬러 변환 규칙
| 라이트 모드 | 다크 모드 | 변환 규칙 |
|---|---|---|
#FFFFFF | #1A1A1A | 배경 반전 |
#1A1A1A | #FFFFFF | 텍스트 반전 |
#2563EB | #60A5FA | 밝기 +20% |
#F1F5F9 | #334155 | 중간 톤 조정 |
다크 모드는 선택이 아닌 필수
사용자의 40% 이상이 다크 모드를 선호합니다. 초기 설계부터 다크 모드를 고려하세요.
컴포넌트 라이브러리
기본 컴포넌트 세트
버튼 변형
| 타입 | 배경 | 텍스트 | 테두리 | 용도 |
|---|---|---|---|---|
| Primary | #2563EB | #FFFFFF | 없음 | 주요 액션 |
| Secondary | #F1F5F9 | #1A1A1A | 없음 | 보조 액션 |
| Ghost | 투명 | #2563EB | #2563EB | 덜 중요한 액션 |
| Danger | #EF4444 | #FFFFFF | 없음 | 삭제, 취소 |
실전 체크리스트
- 모든 컬러가 접근성 기준 충족하는가?
- 타이포 계층이 명확하게 구분되는가?
- 그리드 시스템이 일관되게 적용되는가?
- 아이콘 스타일이 통일되어 있는가?
- 이미지 톤이 브랜드와 일치하는가?
- 모션이 브랜드 성격을 반영하는가?
- 다크 모드가 자연스럽게 작동하는가?
- 컴포넌트가 재사용 가능하게 설계되었는가?
2025~2026 디자인 시스템 변화
W3C 디자인 토큰 표준
W3C Design Tokens Community Group이 2025년 10월 첫 안정 사양을 발표했습니다. 오픈 표준이라 특정 도구에 묶이지 않고 토큰을 주고받을 수 있습니다. 토큰 기반 아키텍처는 테마, 자동화, 크로스 플랫폼 일관성의 단일 진실 소스 역할을 합니다.
접근성 퍼스트(Accessibility-First)
WCAG 2.2 기준이 세계적으로 강화되면서, 접근성을 나중에 고치지 않고 처음부터 설계에 넣는 철학이 2026년 표준으로 자리 잡았습니다. 접근성을 인프라로 다루는 기업은 뒤늦게 손보는 기업보다 전환율, 법적 리스크, 리텐션, 시장 확장에서 앞섭니다.
AI 강제 일관성
2026년에는 디자인 시스템에 AI가 들어가 간격 스케일 이탈, 비표준 컬러 사용, 가이드라인 위반을 자동으로 잡아냅니다. 수동 리뷰가 실시간 자동 감사로 바뀌는 셈입니다.
요즘 흐름: 시스템 중심 디자인
- 디자인 토큰으로 일관성 자동화 (W3C 표준 기반)
- 컴포넌트 라이브러리 필수 (Figma, Storybook)
- 다크 모드는 기본 옵션
- 접근성은 선택이 아닌 필수 (WCAG 2.2 AA 이상)
- 모션은 브랜드 차별화 요소 (모션 퍼스트 설계)
- 가변 폰트는 디지털 퍼스트 브랜드의 필수 표준