Pita House 웹사이트
Project Case Study
Pita House 웹사이트
토론토 기반 지중해 그릴 레스토랑 마케팅 웹사이트. “Made Fresh” 포지셔닝을 전면에 두고, 메뉴를 카테고리 기반으로 빠르게 탐색할 수 있게 구성했으며, 방문/주문 전환(외부 배달 플랫폼)을 최소 클릭으로 연결했다. 개발 기간 1개월(1인 개발).
라이브 프로젝트 보기 →개요
Pita House 웹사이트는 레스토랑 방문자가 가장 먼저 원하는 행동(메뉴 확인, 방문 정보 확인, 주문)을 빠르게 수행하도록 설계한 전환 중심 마케팅 사이트입니다.
첫 화면에서 “MADE FRESH”와 레스토랑명, 그리고 “Explore Menu” CTA를 전면에 배치해 사용자의 목적 행동을 즉시 유도합니다.
또한 “Since 2017”, “warm pita”, “flame-grilled meats”, “house-made dips”, “catering” 등의 설명으로 신뢰 요소와 운영 범위를 명확히 전달합니다.
개발 기간은 1개월이며, 1인 개발로 구축했습니다.
목표
첫 화면에서 “Made Fresh” 포지셔닝과 신뢰 요소를 즉시 전달
메뉴 탐색을 카테고리 중심으로 단순화해 이탈을 줄이기
방문 정보(주소/시간/연락처)를 한 곳에 모아 의사결정을 빠르게 만들기
배달/테이크아웃 주문을 외부 플랫폼으로 직결해 전환 단계를 단축
정적 배포(next export) 중심으로 운영 부담을 낮추기
정보 구조(IA)
사이트는 “브랜드 이해 → 메뉴 탐색 → 방문/주문” 흐름으로 구성했습니다.
Home (About Us): 브랜드 소개 + 메뉴/주문 CTA
Menus(홈 섹션): 주요 카테고리로 빠른 진입(스캔 UX)
Menu(전용 페이지): 카테고리 앵커 + 아이템 카드/가격/짧은 설명
Visit Us: 주소/운영시간/연락처를 한 블록에 집약
Order Online: Uber Eats / Skip The Dishes로 연결
핵심 UX 결정
1) “메뉴 확인”을 최단 동선으로
레스토랑 사이트의 핵심 목적은 대부분 “메뉴 확인”입니다.
따라서 히어로 영역에서 즉시 “Explore Menu”로 연결해 time-to-menu를 최소화했습니다.
2) 홈에서 카테고리 진입점을 제공해 스캔 속도 개선
홈의 MENUS 섹션에서 Pita Pockets / Saj Wrap / Saj Meal / Platters로 바로 진입할 수 있어, 긴 스크롤 없이 탐색이 가능합니다.
3) Menu 페이지는 앵커 기반 카테고리 탐색
Menu 페이지 상단에 카테고리 앵커를 배치해 사용자가 원하는 섹션으로 즉시 이동할 수 있도록 했습니다.
메뉴 아이템은 이미지 + 이름 + 가격 + 한 줄 설명 형태로 구성해 “빠른 결정”을 돕습니다.
4) 알레르기/식이 제한 안내를 메뉴 상단에 노출
메뉴 페이지 상단에 알레르기/식이 제한 안내를 배치해, 단체 주문/가족 방문에서 자주 발생하는 불확실성을 선제적으로 줄였습니다.
5) 방문/주문 전환을 결론 지점에서 바로 제공
Visit Us 섹션에서 주소, 연락처, 운영 시간을 한 번에 제공하고
Order Online 섹션에서 Uber Eats와 Skip The Dishes 링크를 즉시 노출해 “결정 → 행동” 전환을 단축했습니다.
기술 구현
사용 기술
| 영역 | 구현 | 비고 |
|---|---|---|
| 프레임워크 | Next.js 15.1 + React 19 | 마케팅 페이지 구성 및 성능 기본값 활용 |
| 언어 | TypeScript | 컴포넌트/데이터 구조 안정성 |
| 스타일 | Tailwind CSS 3 | 빠른 UI 반복과 일관된 토큰 |
| 3D | Three.js | 브랜드 비주얼 강조용 3D 포인트(선택적) |
| 이메일 | Nodemailer | 운영/문의 대응을 위한 이메일 처리 |
| SVG | @svgr/webpack | 로고/아이콘을 React 컴포넌트로 관리 |
| 최적화 | @next/bundle-analyzer | 번들 점검으로 성능 위생 유지 |
| 배포 | next export | 정적 배포로 운영 복잡도 최소화 |
구현 하이라이트
카테고리 기반 메뉴 구조로 확장/수정이 쉬운 형태 유지
CTA(Explore Menu, View Menu, Order Online)를 반복 가능한 패턴으로 정리
정적 배포 중심 설계로 런타임 의존도를 줄여 유지보수성 강화
이 프로젝트가 보여주는 것
레스토랑 사이트에서 중요한 사용자 의도(메뉴/방문/주문)를 중심으로 IA를 설계하는 역량
카테고리 앵커 기반 스캔 UX로 모바일 탐색 효율을 높인 구성
외부 주문 플랫폼으로의 전환 단계를 줄이는 실무형 접근
Live: https://pitahouse.servith.com/
Timeline: 1 month
Role: Solo delivery (IA → UI → deployment)