프로젝트 사례
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 링크를 즉시 노출해 “결정 → 행동” 전환을 단축했습니다.
운영 측면에서 달라진 점
간단하고 손이 덜 가는 호스팅: 사이트를 미리 만들어 둔 페이지로 배포하기 때문에, 뒤에서 돌아가며 관리해야 할 부분이 거의 없습니다.
모바일에서도 가벼운 사이트: 사이트 파일 용량을 꾸준히 점검해, 사이트가 커져도 모바일 방문자에게 빠르게 열리도록 유지합니다.
쉬운 메뉴·페이지 수정: 메뉴를 카테고리 단위로 정리하고 페이지를 재사용 가능한 섹션으로 구성해, 메뉴나 섹션을 추가해도 레이아웃이 일관되게 유지됩니다.
눈에 띄는 브랜드 포인트: 선택적으로 넣은 3D 비주얼이 페이지에 브랜드 존재감을 더합니다.
이 프로젝트가 보여주는 역량
레스토랑 사이트에서 중요한 사용자 의도(메뉴/방문/주문)를 중심으로 IA를 설계하는 역량
카테고리 앵커 기반 스캔 UX로 모바일 탐색 효율을 높인 구성
외부 주문 플랫폼으로의 전환 단계를 줄이는 실무형 접근
Live: https://pitahouse.servith.com/
Timeline: 1 month
Role: Solo delivery (IA → UI → deployment)
