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 에 정의되어 있다.