Momo Bakery 웹사이트
Project Case Study
Momo Bakery 웹사이트
프렌치 감성의 아티잔 베이커리 사이트. "Fresh Croissants. Coffee. Handmade Daily." 메시지와 함께 메뉴 -> 방문 -> 배달 주문으로 이어지는 전환 흐름을 단순화했습니다.
라이브 프로젝트 보기 →개요
Momo Bakery는 매일 굽는 프렌치 아티잔 베이커리입니다. 사이트는 "Fresh Croissants. Coffee. Handmade Daily."라는 메시지로 핵심 가치를 즉시 전달하고, 사용자가 가장 많이 찾는 행동(메뉴 보기, 방문, 배달 주문)으로 빠르게 연결합니다.
슬로우 퍼멘테이션(24시간 이상), 심플한 재료, 동네 기반의 따뜻한 톤을 강조하면서도 메뉴와 방문 정보가 항상 쉽게 보이도록 구조화했습니다.
목표
첫 화면에서 신선함/장인정신을 즉시 전달
메뉴를 빠르게 탐색할 수 있는 구조 제공
위치/영업시간/연락처를 반복 노출하여 이탈 감소
케이터링과 배달 주문 경로를 명확히 분리
유지보수가 쉬운 가벼운 구조 유지
정보 구조(IA)
Home: 핵심 메시지 + 스토리 프리뷰 + 대표 메뉴 + 리뷰
Menu: 카테고리별 메뉴 (Croissants, Pastries, Cakes, Coffee)
Our Story: 창업 배경, 셰프 스토리, 철학
Contact Us: 주소/영업시간/연락처 + 문의 폼
Catering: 패키지 구성과 가격, 문의 흐름
Order Online: 배달 플랫폼 안내 (SkipTheDishes, Uber Eats, DoorDash)
핵심 UX 결정
1) 데일리 니즈 중심 히어로
아침 방문자의 의도를 반영해 "Fresh Croissants. Coffee. Handmade Daily."를 전면 배치하고, 메뉴/방문 행동으로 바로 이어지도록 구성했습니다.
2) 메뉴 중심 탐색 구조
카테고리별 메뉴 구성과 가격 노출로 선택 시간을 줄였습니다.
3) 스토리로 신뢰 보강
슬로우 퍼멘테이션, 창업자 배경, 지역성을 강조해 프리미엄 포지셔닝을 정당화합니다.
4) 케이터링 전환 분리
Breakfast Boxes, Pastry Platters, Coffee Carafes 등 명확한 패키지 제안과 함께 문의 흐름을 독립시켰습니다.
5) 배달 주문의 마찰 최소화
사용자가 익숙한 배달 앱으로 바로 연결해 전환 단계를 줄였습니다.
사이트 기반 콘텐츠 하이라이트
Hero: "Fresh Croissants. Coffee. Handmade Daily."
대표 메뉴: Butter Croissant, Pain au Chocolat, Country Sourdough
스토리: 파리 11구 출신 Chef Julien, 동네 베이커리 철학
철학: 24시간 이상 발효, 심플한 재료, 지역 기반 운영
위치: 25 Viking Lane, Toronto, ON M9B 0A1
영업시간: Mon-Fri 7:00 AM-6:00 PM, Sat 8:00 AM-5:00 PM, Sun 8:00 AM-2:00 PM
배달: SkipTheDishes, Uber Eats, DoorDash
기술 구현
사용 기술
| 영역 | 구현 | 비고 |
|---|---|---|
| 프레임워크 | Next.js 16.1.6 + React 19.2.3 | 최신 UI 구조와 빠른 렌더링 |
| 언어 | TypeScript 5 | 안정적인 컴포넌트 구조 |
| 스타일 | Tailwind CSS 4 | 일관된 위계와 빠른 반복 |
| 아이콘 | lucide-react | 가벼운 아이콘 세트 |
| 이미지 | sharp (optimize-images) | 대형 메뉴 사진 최적화 |
| 린트 | ESLint 9 | 코드 품질 관리 |
구현 하이라이트
페이지 간 섹션 패턴을 통일해 유지보수 용이
카테고리별 메뉴 구조로 업데이트 효율화
메뉴/방문/주문 지점에 CTA 배치 최적화
이 프로젝트가 보여주는 것
로컬 리테일에 맞춘 메뉴 중심 전환 구조
스토리텔링을 통한 프리미엄 포지셔닝
유지보수가 쉬운 Next.js 기반 베이커리 사이트
Live: https://momobakery.servith.com/
Role: Solo delivery (IA -> UI -> deployment)