---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-06
---

# UI 시각 체계

> 한 줄 정의
> 시각 결정(계층·타이포·색·간격·깊이·모션)을 감이 아니라 체계로 내리는 기준. 행동 설계는 [[UX 원리]], 재사용 체계는 [[디자인 시스템]].

## 계층 — 화면마다 주인공 하나

- 시선 순서는 설계자가 결정한다: **크기 > 두께 > 색 > 위치** 순으로 대비를 준다.
- 전부 강조 = 무강조. 한 화면에 크기 대비가 없으면 위계가 없다는 신호다.
- 5초 테스트: 처음 보는 사람이 5초 안에 "무슨 화면인지 + 뭘 해야 하는지" 답하면 통과 ([[디자인 프로세스와 평가]]).

## 타이포그래피

| 항목 | 기본값 |
|------|--------|
| 스케일 | 모듈러 스케일(1.2~1.333배)로 단계 고정 — 임의 px 금지 |
| 본문 | 16px 이상, 행간 1.5~1.7, 줄 길이 45~75자 |
| 서체 수 | 최대 2 (본문 + 디스플레이), 조합에 이유가 있어야 함 |
| 한글 | 행간 더 넉넉히(1.6+), `word-break: keep-all`, 영문 병기 시 자간·크기 보정 |

- 기본 폰트 스택을 "그냥" 쓰지 않는다 — 선택이면 이유가 있어야 하고, 이유가 없으면 결정 누락이다.

## 색 — 장식이 아니라 의미

- 모든 색은 의미 토큰으로 쓴다: surface / text / accent / danger / warning / success. 장식 색은 액센트 1계열로 제한.
- 대비 최소선: 본문 4.5:1, 큰 텍스트 3:1 (WCAG AA). 상태 전달은 색 + 아이콘/텍스트 병행 (색각 이상 대응).
- 비율 기본값 60-30-10: 바탕 60 / 보조 30 / 액센트 10. 액센트가 30을 넘으면 이미 액센트가 아니다.
- 다크 모드는 반전이 아니라 **별도 팔레트** — 순수 검정(#000) 대신 톤 있는 어두운 표면, 채도를 낮춘 액센트.

## 간격 — 간격이 곧 정보 구조

- 4/8px 배수 스케일로 고정. 임의 간격(13px, 27px)은 체계 붕괴 신호.
- **근접성 = 관계**: 관련 요소는 가깝게, 무관하면 멀게. 라벨은 자기 입력창에 붙인다.
- 균일 패딩 일괄 적용은 위계 없음의 신호 — 섹션 간 > 그룹 간 > 요소 간 순으로 간격 리듬을 만든다.
- 여백은 낭비가 아니라 가장 싼 계층 도구다.

## 깊이·레이어

- 레이어링의 목적은 장식이 아니라 **맥락 유지** — 모달·시트는 "어디 위에 떠 있는지"가 보여야 한다.
- 그림자·radius·표면색은 단계를 정해 두고(예: 3단계) 그 안에서만 쓴다. 전 컴포넌트 동일 radius+shadow는 밋밋함의 원인.

## 모션

- 목적은 인과 설명(어디서 와서 어디로 갔나) — 장식 모션은 3일이면 소음이 된다.
- 기본값: 150~300ms, ease-out 계열. 진입은 빠르게, 퇴장은 더 빠르게.
- `prefers-reduced-motion` 존중. 애니메이션은 compositor 속성(transform·opacity)만 ([[프론트엔드 원리]] 성능).

## 안티패턴 — 템플릿 냄새

- 균일 카드 그리드 + 균일 간격 + 위계 없음
- 중앙 정렬 히어로 + 그라디언트 블롭 + 범용 CTA
- 라이브러리 기본 스타일을 완성 디자인으로 제출
- 회색-흰색 바탕에 장식 액센트 1색 (의미 체계 없는 색 사용)
- hover / focus / active 상태 미설계 — 상태가 없으면 죽은 UI

## 관련 문서

- [[UX 원리]] · [[디자인 시스템]] · [[디자인 프로세스와 평가]] · [[프론트엔드 원리]]