Soban Korean Restaurant Website
Project Case Study
Soban Korean Restaurant Website
전통 한식의 따뜻한 톤을 살린 레스토랑 마케팅 웹사이트. 메뉴 탐색을 빠르게 만들고, 방문 정보와 배달/테이크아웃(외부 플랫폼) 동선을 명확히 연결해 전환을 높이는 구조로 설계했다. 1개월 내 1인 개발로 구축.
라이브 프로젝트 보기 →Overview
Soban 웹사이트는 전통 한식의 따뜻한 정서와 “편안한 한 끼” 메시지를 중심으로, 방문자가 메뉴를 빠르게 확인하고 방문 또는 주문으로 이동할 수 있도록 설계한 레스토랑 마케팅 사이트입니다.
첫 화면에서는 “A Warm Bowl, Made with Heart”와 함께 SOBAN 브랜드를 전면에 두고, Explore Menu CTA로 주요 행동을 명확히 제시합니다.
또한 랜딩 본문에서 Soban의 핵심 컨셉을 “Korean home cooking, banchan made fresh daily, comfort food”로 설명해 톤과 신뢰를 동시에 확보합니다.
개발 기간은 1개월이며, 1인 개발로 구축했습니다.
Objectives
브랜드 톤과 메시지를 첫 화면에서 즉시 전달
메뉴 탐색을 카테고리 중심으로 단순화해 이탈을 줄이기
방문 정보(주소/시간/연락처)를 한 곳에 모아 의사결정을 빠르게 만들기
배달/테이크아웃 주문을 외부 플랫폼으로 직결해 전환을 단축
향후 메뉴 확장에도 유지보수 가능한 구조로 구성
Information Architecture
사이트는 “브랜드 소개 → 메뉴 확인 → 방문/주문 전환” 흐름으로 설계했습니다.
Landing(About): 레스토랑 소개 + 대표 CTA(메뉴 탐색)
Menu: 카테고리 앵커 기반 섹션형 메뉴 구성
Visit Us: 주소/운영시간/연락처를 한 영역에 집약
Order Online: Uber Eats, Skip The Dishes로 연결
Key UX Decisions
1) “메뉴로 가는 길”을 가장 짧게
첫 화면에서 즉시 Explore Menu로 연결해 방문자의 목적 행동(메뉴 확인)을 단축했습니다.
상단 네비게이션도 About, Menu, Order Online 중심으로 단순하게 유지해 선택 부담을 낮췄습니다.
2) Menu는 카테고리 앵커 기반 “스캔 UX”
메뉴 페이지는 섹션 앵커로 빠르게 이동할 수 있도록 구성했습니다.
Best Appetizers
Soban Hansang Set Meal
Rice
Noodle
Stew
Vegetarian Menu
방문자가 원하는 영역만 빠르게 스캔할 수 있어 모바일에서 특히 효율적입니다.
3) 식단/알레르기 안내를 상단에 배치
메뉴 페이지 상단에 dietary restrictions / allergies 안내를 배치해 레스토랑 특성상 중요한 신뢰 요소를 먼저 제시했습니다.
4) “세트 메뉴”로 가치 제안을 구조화
Hansang Set Meal 섹션은 메인과 함께 제공되는 구성(샐러드, 잡채, 밥, 반찬, 수프)을 명확히 적어, 단품 메뉴 대비 가치가 직관적으로 전달되도록 했습니다.
5) 방문/주문 전환 섹션은 한 화면에서 결론까지
Visit Us 섹션에서 주소, 연락처, 운영 시간을 한 번에 제공하고
Order Online은 Uber Eats 및 Skip The Dishes 링크를 즉시 노출해 전환을 단축했습니다.
Technical Implementation
Stack
| Area | Implementation | Notes |
|---|---|---|
| Framework | Next.js 15 + React 19 | 마케팅 페이지에 적합한 렌더링과 DX |
| Language | TypeScript | 안정적인 UI 컴포넌트 구성 |
| Styling | Tailwind CSS 3 | 빠른 반복과 일관된 UI |
| 3D | Three.js | 브랜드 히어로/비주얼 임팩트 요소에 활용 가능 |
| Nodemailer | 문의 대응을 위한 서버 이메일 연동 | |
| SVG | @svgr/webpack | 아이콘/로고를 컴포넌트로 관리 |
| Optimization | @next/bundle-analyzer | 번들 사이즈 점검 및 성능 위생 |
| Deployment | next export | 정적 배포 옵션을 지원 |
Engineering Highlights
메뉴 데이터가 늘어도 섹션 단위로 확장 가능한 구조
CTA(Explore Menu, View Menu, Order Online)를 일관된 패턴으로 재사용
정적 내보내기(next export) 기반 배포 플로우 구성으로 운영 부담 최소화
What This Project Demonstrates
레스토랑 사이트에서 중요한 “메뉴 탐색”과 “주문 전환”을 중심으로 IA를 설계하는 역량
카테고리 앵커 기반 스캔 UX로 모바일 탐색 효율을 높인 구성
방문 정보와 외부 주문 플랫폼 링크를 한 흐름으로 연결해 전환 단계를 줄이는 접근
Live: https://soban.servith.com/
Timeline: 1 month
Role: Solo delivery (IA → UI → shipping)