Design Guide — 사용자 중심 인터페이스 설계
철칙: 디자인은 사용자의 문제를 해결하기 위해 존재한다.
1. 디자인의 목적
화면 위의 모든 픽셀은 이 질문에 답해야 한다 — "이것이 사용자의 목표 달성에 기여하는가?"
필수: 이 요소가 없으면 사용자가 목표를 달성할 수 없다
유용: 이 요소가 있으면 목표 달성이 더 쉬워진다
제거: 둘 다 아니다사람들은 제품을 사지 않는다. 더 나은 버전의 자기 자신을 산다. 기능을 나열하지 말고, 사용자가 도달할 상태를 보여줘야 한다.
| 단계 | 질문 |
|---|---|
| Before | 지금 사용자가 겪는 고통은 무엇인가? |
| After | 제품을 쓴 후의 모습은 어떠한가? |
| Bridge | 제품이 어떻게 연결하는가? |
| Feeling | 지배적 감정은 무엇인가? |
이 전환 맵 없이 디자인을 시작하지 말라.
요소가 다음 네 가지를 지원하지 않으면 존재해서는 안 된다:
- 탐색 — 원하는 곳으로 이동
- 이해 — 현재 상태와 맥락 파악
- 판단 — 선택지 비교, 결정
- 실행 — 의도를 행동으로
2. 사용자의 눈으로 보라
모든 화면은 이 세 질문에 즉시 답할 수 있어야 한다:
- "이게 뭐하는 건지 알겠는가?"
- "내가 원하는 걸 할 수 있는가?"
- "다음에 뭘 해야 하는지 보이는가?"
이 세 질문에 즉시 답할 수 없는 화면은 재설계하라.
사용자는 읽지 않고 훑는다
F자 패턴으로 훑고 눈에 띄는 것에 반응한다. 따라서:
- 첫 1~2개 요소가 화면의 역할과 행동을 설명해야 한다
- 헤드라인은 부가 설명 없이도 이해 가능해야 한다
- 사용자가 추측해야 한다면, 재설계하라
인지 부하를 줄여라
Recognition over Recall. 사용자에게 이전 상태를 기억하도록 요구하지 말라.
- 관련 행동을 필요한 시점에 노출하라
- 내비게이션은 예측 가능하게 유지하라
- 컨트롤 위치를 일관되게 배치하라
- 시스템이 사용자 대신 기억하게 하라
점진적 공개(Progressive Disclosure)를 적용하라
모든 기능을 한 번에 보여주는 것은 친절이 아니라 폭력이다.
- 핵심 정보를 먼저 보여줘라
- 고급 컨트롤은 맥락에 따라 드러내라
- 세부 뷰는 요청 시에만 펼쳐라
복잡함(Complexity) ≠ 혼란(Confusion)
- 복잡함: 기능이 많다. 관리할 수 있다.
- 혼란: 구조가 없다. 어디서부터 시작해야 할지 모른다.모든 행동에 피드백을 제공하라
상호작용 후의 침묵은 용납할 수 없다.
| 상황 | 반드시 제공할 피드백 |
|---|---|
| 버튼 클릭 | 즉각적인 시각적 반응 |
| 데이터 로딩 | 로딩 상태 표시 |
| 작업 성공 | 명확한 확인 메시지 |
| 오류 발생 | 구체적 오류 설명 + 해결 방법 |
| 데이터 없음 | 빈 상태 안내 + 다음 행동 제안 |
| 권한 부족 | 이유 설명 + 대안 안내 |
3. 반드시 지켜야 할 원칙
3.1 목적 우선(Purpose First)
- 화면당 하나의 지배적인 사용자 질문에 답하라
- 화면당 하나의 주된 행동을 지원하라
- 여러 목표가 경쟁하면 별도 화면으로 분리하라
- 다목적 잡동사니 화면을 만들지 말라
3.2 지배 영역 규칙(Dominant Region Rule)
- 시각적 무게는 중요도를 반영해야 한다
- 보조 영역은 종속적으로 배치하라
- 동일한 무게의 레이아웃을 피하라
- 위계(hierarchy)는 선택이 아니라 필수다
3.3 행동 위계(Action Hierarchy)
| 수준 | 처리 방식 |
|---|---|
| 주된 행동 | 화면당 하나. 시각적으로 가장 돋보이게 하라 |
| 보조 행동 | 시각적으로 축소하라 |
| 파괴적 행동 | 명확하게 구분하고 실행 전 확인을 받아라 |
| 드문 행동 | 오버플로 메뉴에 배치하라 |
3.4 구조적 일관성(Structural Consistency)
- 비슷한 문제는 비슷한 방식으로 해결하라
- 내비게이션 논리를 안정적으로 유지하라
- 간격은 일관된 척도를 따르게 하라
- 예측 가능성이 신뢰를 만든다
3.5 확장성(Scalability)
- 데이터가 10배 늘어나도 구조가 깨지지 않게 설계하라
- 기능이 추가되어도 위계가 무너지지 않게 하라
- 오늘의 5개 항목이 내일의 500개가 되어도 작동하는 구조를 만들어라
4. 설계 방법론
빼기의 기술
1. 필요한 모든 것을 나열하라
2. "이것 없이 사용자가 목표를 달성할 수 있는가?" → "예"라면 제거하라
3. 남은 것들의 우선순위를 정하라
4. 우선순위에 따라 시각적 무게를 배분하라밀도를 의도적으로 선택하라
| 모드 | 용도 | 특징 |
|---|---|---|
| 빽빽함(Compact) | 트레이딩, 모니터링 | 높은 정보 밀도, 좁은 간격 |
| 보통(Medium) | 일반적인 기본값 | 균형 잡힌 밀도 |
| 여유(Airy) | 온보딩, 설정 | 넓은 여백, 큰 요소 |
하나의 화면 안에서 밀도 모드를 임의로 혼합하지 말라.
공간을 구조로 사용하라
- 하나의 화면에 하나의 지배적 축을 유지하라
- 장식용 구분선 대신 여백으로 구분하라
- 장식 위에 구조를 두어라(Structure over ornament)
엔티티 무결성을 지켜라
어떤 엔티티를 표현하든: 이름은 눈에 띄게, 상태는 명확하게, 핵심 메타데이터를 표시하고, 행동을 명백하게 드러내라.
반응형 설계 원칙
| 디바이스 | 지켜야 할 원칙 |
|---|---|
| 모바일 | 단일 지배 칼럼. 보조 패널은 시트/스택. 수평 스크롤 금지 |
| 태블릿 | 전환적 구조 논리를 적용하라 |
| 데스크톱 | 다중 영역 허용. 높은 밀도 가능 |
스케일링은 반드시 명확성을 보존해야 한다.
적응 논리(Adaptation Logic)
문맥에서 유추한 뒤 결정하라:
- 지배 영역은 무엇인가
- 주된 행동은 무엇인가
- 적절한 밀도는 어느 수준인가
- 점진적 공개의 깊이는 어디까지인가
5. 플랫폼별 가이드 — 반드시 참조하라
언제 읽는가 (Hard Gate)
디자인 작업을 시작하기 전에, 대상 플랫폼의 개요 문서를 반드시 먼저 읽어라. 이 단계를 건너뛰면 안 된다.
사용자 요청 수신
↓
대상 플랫폼 판별 (웹 앱 / 모바일 앱 / 랜딩 페이지 / 슬라이드)
↓
★ 해당 플랫폼 개요 문서를 읽는다 ← 이 단계가 필수
↓
개요 문서의 워크플로우에 따라 세부 문서를 순서대로 참조
↓
설계 시작
↓
visual-and-verification.md로 마감 검증복합 요청(예: "웹 앱 + 랜딩 페이지")이면 관련 개요 문서를 모두 읽되, 화면마다 지배적 패러다임 하나를 명확히 선택하라.
플랫폼별 진입점
| 플랫폼 | 개요 문서 | 하위 세부 문서 |
|---|---|---|
| 웹 앱 | web-app.md | → paradigms, components, practical |
| 모바일 앱 | mobile-app.md | → paradigms, components, practical |
| 랜딩 페이지 | landing-page.md | → paradigms, sections, practical |
| 슬라이드 | slides.md | (단일 문서에 통합) |
각 개요 문서에 설계 워크플로우(Step 1→2→3)가 정의되어 있다. 해당 워크플로우를 따라 필요한 세부 문서를 순서대로 참조하라. 세부 문서로 직접 점프하지 말라.
6. 안티패턴 — 이것을 하지 말라
범용 안티패턴
| 안티패턴 | 왜 문제인가 | 대안 |
|---|---|---|
| 다목적 잡동사니 화면 | 목적 불명확, 인지 과부하 | 화면을 분리하라 |
| 동일 무게 레이아웃 | 초점 부재 | 지배 영역을 만들어라 |
| 아이콘만으로 텍스트 대체 | 추측 필요, 접근성 저하 | 레이블을 추가하라 |
| 모든 기능 한 번에 노출 | 사용자 압도 | 점진적 공개 적용 |
| 행동 후 무반응 | 불안과 불신 | 즉각 피드백 제공 |
| 임의 밀도 혼합 | 비일관적 느낌 | 의도적 밀도 모드 선택 |
| 장식용 구분선 남발 | 시각적 소음 | 여백으로 구분 |
| 하드코딩 색상값 | 유지보수 불가 | 시맨틱 토큰 사용 |
미학적 안티패턴 (AI 디자인에서 특히 주의)
| 안티패턴 | 대안 |
|---|---|
| 범용 폰트(Inter, Roboto, Arial) 반복 사용 | 독특한 폰트, 매번 다르게 |
| 보라색 그라디언트 + 흰 배경 클리셰 | 대담한 색상 선택 |
| 예측 가능한 쿠키커터 패턴 | 맥락에 맞는 고유한 구조 |
| 단색 배경에 안주 | 분위기와 텍스처 추가 |
| 매 생성마다 같은 폰트/색상 수렴 | 의식적으로 변화를 주어라 |
| 장식용 요소 남발 | 기능적 이유가 없으면 제거 |
7. 디자인 완료 시 반드시 검증하라
visual-and-verification.md를 반드시 참조하라. 이 파일은 미학적 방향(타이포, 색상, 모션, 공간), 검증 체크리스트, 안티패턴을 담고 있으며, 플랫폼과 무관하게 모든 디자인의 마감 단계에서 적용해야 한다.
빠른 체크리스트
- 처음 방문한 사용자가 3초 안에 화면 목적을 이해할 수 있는가?
- 다음에 해야 할 행동이 명백한가?
- 하나의 지배적 시각 영역이 있는가?
- 모든 상태(로딩, 빈, 에러, 성공)가 고려되었는가?
- 간격이 일관된 척도를 따르는가?
- 데이터가 10배 늘어나도 깨지지 않는가?
상세 검증(사용자/구조/일관성/확장성 관점별 체크리스트, 콘텐츠 우선 검증, 시각 검증)은 visual-and-verification.md에 정의되어 있다.