Sushi Takumi 웹사이트
Project Case Study
Sushi Takumi 웹사이트
Sushi Takumi를 위한 일식 레스토랑 마케팅 웹사이트. 메뉴 탐색, 예약, 온라인 주문 전환을 빠르게 연결하도록 설계한 전환 중심 구조입니다.
라이브 프로젝트 보기 →개요
Sushi Takumi 웹사이트는 방문자의 핵심 행동을 빠르게 완성하도록 설계한 레스토랑 마케팅 사이트입니다.
사이트 구조는 브랜드 인지를 먼저 만들고, 바로 다음 단계 행동으로 연결하는 흐름에 집중했습니다.
메뉴 확인
테이블 예약
온라인 주문
문의
핵심 전환 액션(Menu, Reservation, Order Online)을 네비게이션과 각 섹션 CTA에 반복 배치해, 사용자가 망설임 없이 이동할 수 있도록 구성했습니다.
목표
프리미엄 일식 브랜드 톤을 첫 화면에서 명확하게 전달
메뉴까지의 이동 단계를 줄여 탐색 속도 개선
주문/예약 의도를 외부 주문 및 예약 채널로 빠르게 연결
운영 목적 페이지(Careers, Contact)를 분리해 핵심 전환 흐름 방해 최소화
메뉴/프로모션 업데이트에 대응 가능한 단순한 콘텐츠 구조 유지
사용자 맥락과 UX 제약
레스토랑 웹사이트 방문자는 대부분 목적이 명확하고 체류 시간이 짧습니다.
"메뉴를 빨리 보고 싶다"
"바로 예약하고 싶다"
"온라인 주문 링크로 바로 가고 싶다"
이 패턴에 맞춰 UX를 다음 원칙으로 구성했습니다.
간결한 상단 네비게이션
전환 액션까지의 최소 클릭
중간 이탈을 줄이는 명확한 경로
모바일에서 빠르게 스캔 가능한 콘텐츠 블록
정보 구조(IA)
전체 흐름은 탐색 -> 판단 -> 행동 순서로 설계했습니다.
Home
브랜드 메시지와 핵심 가치 제시
Menu/Reservation으로 즉시 이동
Menu
메뉴/음료 카테고리 기반 스캔 구조
주문/예약 액션으로 재연결
Order Online
외부 주문 플랫폼으로 즉시 라우팅
Reservation
테이블 예약 플로우 진입 경로 제공
Careers
채용 정보 안내
Contact
문의 채널 및 커뮤니케이션 경로 제공
핵심 설계 결정
1) 전환 중심 네비게이션
Menu, Order Online, Reservation을 상위 네비게이션 핵심 항목으로 유지해 첫 방문 사용자의 의도 달성 시간을 단축했습니다.
2) 메뉴를 의사결정 중심 레이어로 구성
메뉴는 Appetizer, Nigiri, Special Roll, Maki, Dessert, Drinks 같은 그룹 중심으로 나누어, 긴 스크롤보다 빠른 비교와 선택이 가능하도록 설계했습니다.
3) 온라인 주문은 외부 플랫폼 전략 적용
체크아웃을 커스텀 구현하지 않고 검증된 외부 주문 플랫폼으로 연결해 운영 복잡도를 줄이고 사용자 신뢰 흐름을 유지했습니다.
4) 예약 경로를 독립된 목적지로 분리
예약은 문의 하위가 아닌 별도 핵심 플로우로 분리해 액션 강도를 높이고 의도 손실을 줄였습니다.
5) 운영 페이지와 전환 페이지 분리
Careers/Contact는 운영 목적의 정보 접근성을 유지하되, 매출 전환 흐름(Menu/Order/Reservation)과 충돌하지 않도록 분리했습니다.
기술 구현
사용 기술
| 영역 | 구현 | 비고 |
|---|---|---|
| 프레임워크 | Next.js + React | 안정적인 라우팅/페이지 구조 |
| 언어 | TypeScript | 컴포넌트/콘텐츠 모델의 안정성 확보 |
| 스타일 | Tailwind CSS | 반응형 UI를 빠르게 일관되게 구현 |
| 아이콘 | lucide-react | 가벼운 아이콘으로 인터페이스 신호 통일 |
| react-pdf + pdfjs-dist | 문서/PDF 렌더링 확장 가능성 확보 |
구현 포인트
레스토랑 의사결정 흐름에 맞춘 섹션 단위 콘텐츠 구조
CTA 패턴 재사용으로 페이지 간 행동 일관성 확보
모바일 우선 간격/타이포 최적화로 메뉴 스캔 효율 개선
마케팅 사이트 목적에 맞는 가벼운 의존성 구성
이 프로젝트가 보여주는 역량
레스토랑 사용자 의도에 맞춘 전환 중심 IA 설계
브랜드 표현과 행동 전환(메뉴 -> 예약/주문)을 연결하는 UX 설계
Next.js + TypeScript + Tailwind 기반의 유지보수 가능한 구현
핵심 목표: 메뉴 탐색 + 예약/주문 전환
역할: 1인 개발(IA -> UI -> 전환 플로우 정렬)