해적호핑
필리핀 세부 해적선 호핑투어 예약·결제 플랫폼 — 상품 탐색부터 Stripe 결제, 후기, 운영 관리까지.
개요
해적호핑은 필리핀 세부의 해적선 호핑투어와 남부 투어를 탐색하고 예약·결제하는 반응형 웹 플랫폼입니다. 공개 사이트와 투어 상품 상세부터 실시간 잔여 정원 기반 예약, Stripe Checkout 결제와 정책 기반 환불, 구매 인증 후기, 현장 QR 결제와 출석 관리, 예약·매출·콘텐츠를 아우르는 운영자 센터까지 투어 비즈니스의 전 과정을 하나의 제품으로 구현했습니다. 기상·해양 모델과 3D 해저 지형으로 세부 바다를 안내하는 바다 가이드, 한국의 빠른 네트워크와 필리핀 현지의 불안정한 연결을 모두 고려한 저용량 모드 같은 차별화 기능도 갖췄습니다.
핵심 포인트
- • 투어 상품 탐색 — 해적선 투어·보홀·날루수안 등 상품 상세, 일정·가격·픽업 안내
- • Stripe 결제 — Checkout 생성, Webhook 서명 검증, 멱등 처리 기반 정책 환불
- • Google·카카오 로그인 — 회원·비회원 예약과 비회원→회원 자동 연동 마이페이지
- • 구매 인증 후기 — 실제 예약 고객만 작성하고 검수 후 공개하는 리뷰 시스템
- • 운영자 센터 — KPI 대시보드, 예약 검색·운영 메모, 후기 검수, 환불·변경 감사 기록
- • 저용량 모드 — Save-Data·2G/3G 자동 감지와 텍스트 우선 화면으로 현지 네트워크 대응
제품 화면
6 개 화면
공식 홈 — 브랜드 히어로
풀스크린 영상 히어로에 운영 지표(운영 연차·평점·누적 여행객), 프로모션 배너, 절약 모드 전환과 카카오 상담 진입점을 결합했습니다.
투어 탐색
조인호핑·단독호핑·남부투어·보홀 카테고리 필터와 검색으로 원하는 하루를 고르고, 상품 카드에서 바로 상세로 이동합니다.
투어 상세와 예약 플로우
출발 시간·소요 시간·언어·픽업 정보와 실제 후기 평점을 한눈에 보여주고, 가격 요약에서 바로 예약·결제로 이어집니다.
실제 후기 아카이브
774건의 공개 후기를 사진과 원문 그대로 보존하고, 회원의 구매 인증 후기는 검수 후 같은 목록에 합류합니다.
세부 바다 가이드 — 3D 해저 지형
GEBCO 수심 격자를 3D 메시로 렌더링하고 투어 동선·포인트를 얹어, 시간대별 바람·파고·강수·가시거리와 함께 세부 바다를 읽어줍니다.
저용량 모드
Save-Data·2G/3G 연결을 자동 감지해 사진과 애니메이션을 생략하고, 예약 조회와 계정 기능 중심의 텍스트 화면으로 전환합니다.
주요 기능
예약·결제 파이프라인
- • 일정 행 잠금과 31분 결제 Hold로 정원을 보호하는 원자적 예약 생성(Supabase RPC)
- • Stripe Checkout·Webhook 멱등 처리 — 동일 이벤트가 동시에 몰려도 한 번만 반영
- • Asia/Manila 시간대 기준 예약 달력과 실시간 잔여 정원 마감
- • 정책 기반 환불 계산과 매일 실행되는 Stripe 결제 대사 Cron
현장 운영 결제
- • 예약팀에 연결된 일회성 Stripe QR로 SD 카드 대여·추가 결제·현장 잔금 수납
- • 카카오페이·네이버페이 등 Stripe 동적 결제수단 자동 노출
- • 투어 결제와 현장 결제를 별도 제한키·Webhook으로 격리 운영
- • 결제별 전액 환불 원장과 멱등 환불 API
회원·마이페이지
- • Google·카카오 OAuth(PKCE) 로그인과 비회원 예약 조회
- • 비회원 결제를 로그인 시 검증 이메일 기준으로 자동 연동
- • 탑승 패스 — 출석 QR, 확정 픽업 안내, Apple Wallet 티켓(.pkpass) 발급
- • 구매 인증 후기 작성·수정과 일정 변경·취소 요청
운영자 센터
- • 4단계 역할(직원·편집자·관리자·최고관리자)과 전 작업 감사 로그
- • 출항 보드, A4 운영표 인쇄, KRW·PHP·USD 통화별 예약·정산 원장
- • 외부 채널 예약 표를 OpenAI로 정규화해 관리자 검토 후 등록하는 가져오기
- • Google Sheets 3-way 동기화와 QR 스캔 출석을 지원하는 관리자 PWA
알림·메시징
- • SOLAPI 카카오 알림톡·SMS·국제 SMS Outbox와 Cron 재시도 발송
- • 결제 성공 시 Resend 이메일·SMS 운영 알림(멱등 키 중복 방지)
- • Facebook Messenger 문의 수신함과 예약 연결
- • 회원 선호 언어를 따라가는 한국어/영어 발송
콘텐츠·인텔리전스
- • Open-Meteo·Windfinder 기상·해양 모델 기반 세부 바다 가이드
- • GEBCO 수심 격자를 3D 메시로 렌더링한 해저 지형 뷰
- • 네이버 블로그 RSS 연동과 하루 1회 OpenAI 영어 자동 번역
- • sitemap·robots·JSON-LD SEO와 저용량 모드 자동 전환
플랫폼 구성
- • Next.js 16 App Router·React 19 기반 반응형 사이트와 한국어·영어 다국어 지원
- • Supabase PostgreSQL — 전용 네임스페이스 원장, RPC 단일 트랜잭션, 격리 DB 동시성 테스트
- • Stripe Checkout·Webhook 13종 이벤트 처리와 일일 결제 대사·분쟁 추적
- • Vercel 배포와 Cron 4종(블로그 번역·결제 대사·알림 발송·시트 보정) 운영
- • 전 경로 CSP·HSTS 보안 헤더, 요청 rate limit, Route Handler 통합 테스트
세부 해적선 호핑투어를 직접 만나보세요
해적호핑에서 투어 상품, 실제 이용 후기와 예약 경험을 살펴보세요.