씨하이 호텔 공식 웹사이트
프로젝트 목록
완료호텔 웹사이트2025-11-15

씨하이 호텔 공식 웹사이트

OTA 의존도를 줄이고 직접 예약 채널로 수익을 되찾다

next.jstypescriptsupabasetailwindcsstoss-paymentshoteldirect-bookingreservationpaymentseo
라이브 사이트 방문
PROBLEM

해결해야 할 문제

씨하이 호텔은 제주도 중문 해안에 위치한 부티크 호텔로, 개관 초기부터 야놀자·여기어때·에어비앤비 등 주요 OTA에 전적으로 의존해 객실을 판매했습니다.

문제는 세 가지였습니다. 첫째, OTA 수수료(평균 15~22%)가 객실 수익을 지속적으로 잠식했습니다. 직접 예약 대비 연간 수천만 원의 차이가 발생했음에도, 별도 채널을 운영할 기술 역량이 없었습니다. 둘째, 고객 데이터 주권이 없었습니다. OTA가 보유한 고객 이메일·예약 패턴 데이터에 접근할 수 없어 재방문 마케팅이 불가능했고, 단골 고객 관리가 체계적으로 이루어지지 않았습니다. 셋째, 브랜드 정체성 훼손입니다. OTA 플랫폼의 획일적인 UI 안에 호텔 고유의 감성과 스토리를 담기 어려웠고, 검색엔진에서 자체 브랜드 키워드조차 OTA 페이지에 밀려 노출되지 않았습니다.

SOLUTION

구축 전략

"OTA를 없애는 것이 아니라, OTA가 필요 없는 고객을 직접 만드는 것"을 목표로 설정했습니다.

핵심 전략은 세 가지입니다. 첫째, 직접 예약 전용 혜택 구조입니다. 공식 웹사이트 예약 시 조식 무료 제공, 레이트 체크아웃, 웰컴 드링크 등 OTA에서는 제공하지 않는 혜택을 명시적으로 노출해 가격 비교 피로 없이 직접 예약의 가치를 전달합니다. 둘째, 실시간 예약 엔진 구축입니다. Supabase를 기반으로 객실 재고·가격을 실시간 관리하고, Toss Payments를 통해 국내 모든 결제수단을 지원합니다. 예약 확인서·취소 안내를 자동 이메일로 발송해 운영 부담을 최소화했습니다. 셋째, 검색 기반 직접 유입 확대입니다. Next.js App Router의 정적 생성(SSG)을 활용해 "제주 중문 호텔", "씨하이 호텔 예약" 등 핵심 키워드 검색 결과 상위 노출을 달성했으며, 구조화된 메타데이터(Schema.org)로 리치 스니펫을 확보했습니다.

KEY FEATURES

핵심 기능

실시간 객실 예약 엔진

Supabase Realtime을 활용해 객실 재고를 실시간으로 반영합니다. 동시 예약 충돌을 Row-level Locking으로 방지하며, 예약 완료 즉시 확인 이메일을 자동 발송합니다.

Toss Payments 결제 연동

신용카드·간편결제(카카오페이·네이버페이·토스)·계좌이체를 모두 지원합니다. 결제 실패 시 예약 롤백이 자동으로 처리되며, 부분 환불도 관리자 대시보드에서 원클릭으로 처리 가능합니다.

브랜드 스토리텔링 랜딩

호텔의 건축 철학, 제주 자연과의 조화, 시즌별 패키지를 감성적인 비주얼과 함께 전달합니다. Framer Motion 기반 스크롤 애니메이션으로 방문자의 체류 시간을 늘리고 예약 전환율을 높입니다.

관리자 예약 대시보드

호텔 직원이 날짜별 예약 현황, 입·퇴실 일정, 특별 요청 사항을 한눈에 확인할 수 있습니다. 객실별 블록 처리, 가격 일괄 변경, 예약자 메모 기능을 포함합니다.

SEO 최적화 구조

Next.js generateMetadata API로 페이지별 메타 태그를 동적 생성합니다. Schema.org Hotel·Offer 마크업을 적용해 Google 검색에서 별점·가격 정보가 포함된 리치 스니펫으로 노출됩니다.

다국어 패키지 (준비 중)

외국인 관광객 유입 확대를 위해 영어·일본어·중국어(간체) 지원을 예정하고 있습니다. next-intl 기반으로 URL prefix(/en, /ja, /zh) 방식으로 구현할 계획입니다.

OPERATIONS

운영 포인트

  • Vercel Edge Network 배포로 전국 어디서나 200ms 이하의 응답 속도를 유지합니다.
  • Supabase 데이터베이스 자동 백업(일 1회)과 Vercel 프리뷰 배포를 통해 안전하게 운영합니다.
  • 객실 이미지는 Cloudinary CDN을 통해 WebP 자동 변환·최적화되어 로딩 속도에 영향을 주지 않습니다.
  • 예약 취소 정책(체크인 7일 전 전액 환불 등)은 관리자 설정에서 변경 가능하며, 결제 시 자동으로 고객에게 안내됩니다.
  • Hotjar 히트맵으로 예약 퍼널 내 이탈 지점을 분석해 지속적인 UX 개선에 활용합니다.
EXPECTED IMPACT

기대 효과

  • OTA 수수료 절감: 직접 예약 비중 30% 달성 시 연간 약 2,400만 원 수수료 절감 예상
  • 재방문율 향상: 자체 고객 DB 확보로 이메일 마케팅을 통한 재방문 캠페인 운영 가능
  • 브랜드 검색 점유율: 씨하이 호텔 관련 키워드 검색 시 OTA보다 자사 사이트 우선 노출
  • 운영 효율화: 예약 확인·취소 이메일 자동화로 프론트 데스크 업무 부담 감소
  • 데이터 자산화: 예약 패턴·선호 객실 데이터를 기반으로 시즌별 패키지 기획에 활용
TECH STACK

기술 스택

Next.js 14 (App Router)TypeScriptTailwind CSSSupabase (PostgreSQL + Auth + Realtime)Toss PaymentsResend (이메일)Cloudinary (이미지 CDN)VercelFramer Motion
GALLERY

프로젝트 갤러리

갤러리 이미지 1
갤러리 이미지 2
갤러리 이미지 3
갤러리 이미지 4

비슷한 프로젝트를 구상 중이신가요?

프로젝트 상담부터 구축까지, 맞춤 전략을 제안해 드립니다.