배민 홈 화면 와이어프레임 설계: 사용자의 시간과 행동을 읽는 UX 구조

실시간 피드백과 개인화 추천까지, UX 디자인 원칙으로 재해석한 배달앱 와이어프레임 제작기

---

목차

 

1. 서론 — 사용자의 ‘결정 피로’를 줄이는 디자인
2. 시간대별 콘텐츠 섹션 (class: time-based-content)
3. 실시간 피드백 섹션 (class: realtime-feedback)
4. 실시간 상황 피드백 섹션 (class: realtime-status)
5. 필터·타이머 모듈 (class: filter-timer-module)
6. 히스토리 기반 추천 섹션 (class: history-recommendation)
7. 와이어프레임으로 완성한 홈 화면 Flow
8. 마무리 — 구조에 집중한 와이어프레임 설계

---

 

1. 서론 — 사용자의 ‘결정 피로’를 줄이는 디자인

이번 작업은 배달의민족 홈 화면을 직접 새로 디자인한 것이 아니라, 그 근본 구조를 재해석해 와이어프레임 단계에서 다시 설계한 과정이었다. 즉, 시각 디자인보다 앞서 '정보 구조와 사용자 흐름이 논리적으로 맞는가?'를 먼저 검토했다.

그래서 각 모듈은 단순한 화면이 아니라, UX 원리(게슈탈트, 시각적 위계, 피드백 원칙) 를 실험적으로 적용한 설계 단위였다.

---

2. 시간대별 콘텐츠 섹션 (time-based-content)

이 섹션은 사용자의 맥락(Context)을 읽는 부분이다.
현재 시각을 기반으로, 점심·저녁·주말 등 시간대/상황에 맞는 추천 메뉴를 노출한다.

 

 

디자인 원칙:

• Information Architecture — 사용자의 현재 상태를 중심으로 정보 계층을 설계.
• Cognitive Framing — “지금 나에게 맞는 정보”를 제시해 선택 비용을 줄인다.
• F-Pattern 배치 — 왼쪽 상단에 제목, 오른쪽에 ‘전체보기’를 배치해
  정보 우선순위가 자연스럽게 눈에 들어오도록 했다.

→ 즉, 시간대별 추천은 '사용자의 현재 컨텍스트를 읽는 첫 번째 대화'다.

---

 

 

3. 실시간 피드백 섹션 (realtime-feedback)

이 섹션은 사용자의 현재 상황을 즉시 인식시키는 구간이다.
예: “지금 점심 시간이에요 🍜 (서울시 구로구)”
→ 사용자가 ‘아, 지금 내가 점심을 주문할 타이밍이구나’ 하고 스스로 인식하도록 돕는다.

디자인 원칙:

• Visibility of System Status (Nielsen) —
  사용자가 앱의 ‘현재 상태’를 명확히 인식해야 불안감이 줄어든다.
• Minimalist Design — 불필요한 시각 요소 없이 문장 중심으로 구성해 집중을 높였다.
• Affordance — “보기” 버튼 하나로 ‘상황 → 행동’의 연결이 즉시 일어난다.

---

4. 실시간 상황 피드백 섹션 (realtime-status)

 

이 섹션은 ‘지금 주변에서 무슨 일이 일어나고 있는가’를 보여주는 모듈이다.
예: 라이더 배차 현황, 우리 동네 할인 중인 가게 수, 급상승 메뉴 등.

디자인 원칙:

• Gestalt Similarity Principle —
  동일한 시각적 패턴(아이콘 + 텍스트)을 반복해 일관성을 형성했다.
• Cognitive Ease —
  각 아이콘은 한눈에 해석 가능하도록, 시각 은유(라이더·%)를 사용했다.
• Color Semantics —
  퍼플(활동), 블루(신뢰), 오렌지(주의)로 상태를 구분해 인지 피로를 최소화했다.

→ 사용자는 이 영역에서 즉각적인 ‘현황 감지’를 경험한다.

---

5. 필터·타이머 모듈 (filter-timer-module)

이 구간은 사용자가 직접 조건을 조작하고, 즉시 결과를 확인하는 영역이다.
여기에는 필터 히스토리, 혜택 뱃지, 할인 종료 타이머, 영업 종료 타이머가 포함된다.

디자인 원칙:

• Hick’s Law —
  선택지를 줄이는 대신, 필터 저장 기능을 통해 반복 행동을 줄였다.
  사용자는 같은 조건으로 다시 탐색할 때 선택 과정을 생략할 수 있어
  인지적 부담이 크게 감소한다.
• Feedback Principle —
  ‘할인 종료까지 2시간 남음’ 같은 실시간 피드백으로 행동을 유도한다.
• Gestalt Proximity —
  할인·영업 정보를 가게 카드 내에 그룹화해,
  사용자가 한 카드만 봐도 모든 상태를 읽을 수 있게 했다.
• Color Psychology —
  빨강(긴급), 주황(주의), 파랑(신뢰)을 활용해 ‘지금 결정해야 하는 타이밍’을 강조했다.

이 섹션은 즉시성(immediacy) 과 신뢰성(reliability) 을 함께 설계한 영역이다.

---

6. 히스토리 기반 추천 섹션 (history-recommendation)

이 구간은 사용자의 이전 행동을 반영하는 회상 단계이다.
‘최근 주문’과 ‘찜한 가게’를 나누어 표시하고, 정확한 할인 태그로 재주문을 유도했다.

디자인 원칙:

• Recognition over Recall (Nielsen) —
  사용자가 기억하지 않아도, 시각적으로 다시 떠올릴 수 있도록 구성했다.
• Consistency —
  카드 디자인을 리스트와 동일하게 유지해 학습 부담을 줄였다.
• Reward Psychology —
  “찜한 가게가 할인 중이에요” 같은 메시지는 보상의 감정을 자극한다.

→ 이 영역은 앱의 ‘끝’이 아니라 다음 방문의 시작점이다.

 

---

7. 와이어프레임으로 완성한 홈 화면 Flow

이번 와이어프레임은 사용자가 앱을 열고 닫을 때까지의 자연스러운 인지 흐름을 설계하는 데 집중했다.
화면의 순서는 ‘맥락 인식 → 실시간 상황 → 추천 → 탐색 → 행동 → 회상’의 흐름으로 구성했다.
상단 헤더와 카테고리를 통해 사용자가 현재 위치와 상황을 인식하고,
이어지는 실시간 피드백과 시간대별 추천으로 ‘지금 행동할 이유’를 명확히 제시한다.
그 아래의 테마형 탐색과 광고 배너는 주의 리듬을 회복시키는 완충 구간으로 작동한다.
필터·가게 리스트는 선택을 줄이는 대신, 저장 기능으로 반복 행동을 줄여 인지 피로를 완화했고,
히스토리 영역은 사용자의 기억보다 인식(Recognition over Recall) 을 활용해 과거 경험을 떠올리게 하며 다음 행동으로 자연스럽게 이어지도록 했다.
즉, 이 와이어프레임은 색이나 스타일보다 순서와 논리로 완성된 사용자 경험의 설계도다.

---

7. 마무리 — 구조에 집중한 와이어프레임 설계

이번 작업은 완성된 시각 디자인이 아니라,
배달앱 홈 화면의 정보 구조를 재설계한 와이어프레임 단계였다.

UI의 세부 색상이나 그래픽 스타일까지 다듬을 시간은 없었고,
그래서 이번에는 콘텐츠의 순서, 위계, 사용자 흐름에 집중했다.

각 섹션이 어떤 심리적 맥락을 기반으로 배치되어야 하는지,
어떤 정보가 먼저 보여야 사용자가 자연스럽게 행동할 수 있는지에 초점을 두었다.

색상이나 모션까지 함께 설계할 시간이 있었다면
사용자의 감정적 경험까지 더 풍부하게 표현할 수 있었을 것이다.
하지만 이번 단계의 목표는 ‘보여주는 것’보다 ‘읽히는 구조’를 만드는 것이었다.

즉, 이 와이어프레임은 시각적 완성보다
사용자의 사고 흐름을 설계하는 UX 구조도에 가깝다.
디자인의 출발점이자, 경험을 정의하는 첫 단계였다.