배달 앱 MVP – 화면 설계 & ERD 정리

1. 프로젝트 개요

배달 애플리케이션 MVP를 목표로
핵심 사용자 흐름(주문까지) 에 집중해 화면 설계와 ERD를 먼저 진행했다.

목표: 배달 앱의 기본 주문 흐름 이해 및 서버 중심 설계 연습

범위(MVP)

• 회원가입/로그인

• 가게 탐색 → 메뉴 선택 → 장바구니 → 주문 → 주문 완료

보류

• 실제 결제 연동 (PG 연동은 이후 고도화 단계)

2. MVP 범위 정의

포함 기능

• 회원가입 / 로그인

• 홈 화면 (검색, 카테고리)

• 검색 (자동완성, 인기 검색어, 최근 검색어)

• 카테고리별 가게 리스트

• 가게 상세 / 메뉴 선택

• 장바구니

• 주문

• 주문 완료

제외(보류)

• 결제 API 연동
  → 주문 데이터까지만 생성하고 결제는 Mock 처리

3. 화면 설계 (Screen Flow)

전체 화면 목록

1. 회원가입 / 로그인 화면

2. 홈 화면(하단 탭 (홈 / 주문내역 / 마이), 카테고리, 검색)

3. 검색 화면(자동 완성, 인기 검색어,최근 검색어)

4. 카테고리별 가게 목록 화면

5. 가게 상세 화면

6. 메뉴 선택 화면

7. 주문 화면

8. 장바구니 화면

9. 주문 완료 화면

10. 결제 연동 (보류)

4. 주요 화면 상세 설명

4-1. 홈 화면

목적

사용자가 빠르게 가게를 탐색할 수 있는 진입점

구성 요소

검색창
카테고리 리스트
하단 네비게이션 (홈 / 주문내역 / 마이)
사용자 행동
검색 이동
카테고리 선택
주문내역 / 마이 페이지 이동

4-2. 검색 화면

목적

원하는 가게 또는 음식을 빠르게 찾기 위함

기능

자동 완성
인기 검색어
최근 검색어

포인트

검색 UX는 서버 부하와 직결 → MVP에서는 단순 조회 위주

4-3. 카테고리별 가게 목록 화면

목적

특정 카테고리에 속한 가게 탐색

표시 정보

가게 이미지
가게명 (OO역점)
리뷰 평점
거리
배달 예상 시간
배달비
기능
필터
정렬

4-4. 가게 상세 화면

목적

가게 정보 확인 및 메뉴 선택 진입

구성

상단 가게 이미지
가게명
리뷰
가게 정보
배달 / 포장 여부
배달 종류
메뉴 리스트

4-5. 메뉴 선택 화면

목적

메뉴 및 옵션 선택

구성

메뉴 이미지
옵션 선택
수량
총 금액 표시

4-6. 장바구니 & 주문 화면

장바구니

가게 이름
메뉴 목록
수량
옵션 변경
메뉴 추가

주문 화면

배달 방식 선택
주소 입력
가게 요청사항
라이더 요청사항
결제 수단 선택
결제 금액 요약
상품 금액
배달비
주문 버튼

4-7. 주문 완료 화면

목적

주문 완료 상태 명확히 전달

5. ERD 설계(미완)

한 유저(사장)는 여러 가게를 가질 수 있음

Soft Delete를 통해 이력 관리

6. HTML 기본 구조 정리 (프론트 기초 복습)

head 태그

<title>: 웹 페이지 제목

<meta charset="UTF-8">: 문자 인코딩

<link>: 외부 CSS 연결

rel: 리소스 관계

href: 리소스 경로

body 태그

<span>: 인라인 텍스트 스타일

<a>: 페이지 이동

target="_blank": 새 창 열기

<img>: 이미지 표시

<script>: JavaScript 코드 삽입

✨ 정리

화면 설계를 먼저 하고 → ERD로 내려오는 방식으로 설계

MVP 범위를 명확히 정해 설계 과도화 방지

결제, 리뷰 고도화, 실시간 상태 등은 추후 단계로 분리