스테이 하늘담 — 프라이빗 풀빌라 시네마틱 예약 사이트

강원 양양의 프라이빗 풀빌라 4개 동을 위한 숙박 사이트입니다. 숙박업 사이트의 승부처는 "사진을 얼마나 크게 쓰는가"가 아니라, 도착한 사람이 30초 안에 객실을 고르고 요금을 납득하게 만드는가입니다. 그 흐름을 기준으로 화면 순서를 설계했습니다.

과제

객실이 4개뿐인 소규모 스테이는 OTA 플랫폼 안에서 가격으로만 비교됩니다. 자체 사이트가 해야 할 일은 분위기를 먼저 전달하고, 동별 차이를 한 화면에서 비교시키고, 시즌 요금을 숨기지 않는 것입니다.

디자인 접근

미드나잇 딥틸과 샌드 베이지의 2색 팔레트로 전체 톤을 잠갔습니다. 모든 사진에는 동일한 딥틸 그라디언트 스크림을 얹어, 촬영 조건이 다른 사진들이 한 브랜드의 화보처럼 보이도록 했습니다. 스크롤에 따라 이미지가 아주 느리게 확대되는 켄번즈 효과와 마스크로 올라오는 텍스트가 시네마틱한 호흡을 만듭니다.

핵심 인터랙션

• 가로 고정 스크롤 객실 갤러리 — 세로 스크롤이 가로 이동으로 변환되는 sticky 섹션에서 4개 동을 차례로 비교합니다. 모바일에서는 강제 고정 대신 스와이프 가능한 scroll-snap 캐러셀로 전환합니다.
• 히어로 예약 위젯 — 체크인·체크아웃·인원을 입력하는 실사용 폼 구조를 그대로 구현했습니다(데모이므로 실제 예약 엔진은 연결하지 않고, 그 사실을 위젯 안에서 명시합니다).
• 시즌 요금 탭 — 비수기·성수기·극성수기를 키보드로도 이동 가능한 탭으로 분리하고, 모바일에서는 표를 카드로 재배치합니다.
• 스티키 예약 바 — 스크롤 위치와 무관하게 시작 요금과 문의 버튼이 항상 손에 닿습니다.
• 갤러리 라이트박스 — Esc·좌우 화살표로 조작하고 닫을 때 원래 포커스로 돌아옵니다.

정보 설계

주변 여행 정보는 외부 지도 API 없이 직접 그린 SVG 약도로 처리했습니다. 서핑 스팟·공항·역까지의 소요 시간만 남기고 나머지는 덜어내, 지도가 아니라 "여기서 무엇을 할 수 있는지"를 읽게 했습니다.

기술 · 성능 · 접근성

• 빌드 없는 정적 사이트 — HTML · CSS · 바닐라 JS만으로 구성했습니다. 프레임워크·번들러가 없어 배포 산출물이 그대로 소스이고, 유지보수 시점에 의존성이 깨질 여지가 없습니다.
• Cloudflare Pages 배포 — 전 세계 엣지에서 서빙하며, _headers로 보안 헤더(X-Content-Type-Options, Referrer-Policy, X-Frame-Options, Permissions-Policy)와 정적 에셋 1년 immutable 캐시를 적용했습니다. 존재하지 않는 경로는 브랜드 404 페이지가 올바른 404 상태로 응답합니다.
• 이미지 — 전량 WebP로 변환하고 모든 img에 width/height를 명시해 레이아웃 이동(CLS)을 제거했습니다. 히어로는 우선 로딩, 나머지는 지연 로딩입니다.
• 모션 — 애니메이션은 transform/opacity만 사용해 컴포지터에서 처리하고, prefers-reduced-motion에서는 모든 자동 재생 모션이 정지합니다.
• 접근성 — 본문 바로가기 링크, 시맨틱 랜드마크, 키보드로 조작 가능한 탭·라이트박스·모바일 내비, 포커스 링, 스크린리더용 라이브 영역, WCAG AA 명도 대비를 지켰습니다.
• SEO — 타이틀·설명·canonical·Open Graph·트위터 카드·업종별 JSON-LD 구조화 데이터를 포함합니다.

결과물

라이브 데모: ononc-stay-haneuldam.pages.dev

본 사이트는 ononc가 제작 역량을 보여주기 위해 만든 가상 브랜드 데모입니다. 실제 사업장이 아니며, 문의 폼은 전송되지 않습니다. 사진은 Wikimedia Commons의 자유 이용 라이선스 이미지를 사용했고 출처를 사이트 하단에 표기했습니다.