플러스프로젝트 배경
1) 문제점 - 기존 호텔 웹사이트가 노후화되어 모바일 대응이 미흡하고, 호텔의 프리미엄 감성을 온라인에서 전달하지 못함 - 객실 정보가 텍스트 위주로 구성되어 있어 여행객이 객실 간 차이를 직관적으로 비교하기 어려움 - 웹사이트에서 네이버 예약까지의 동선이 끊겨 있어, 정보 탐색 후 이탈률이 높음 - 검색엔진 최적화가 되어 있지 않아 "포항 호텔", "구룡포 숙소" 등 지역 키워드 검색 유입이 부족
프로젝트 성과
10개 객실 타입별 비주얼 상세 페이지 구축
스탠다드부터 로얄 스위트까지 10개 객실 타입별 고화질 이미지 갤러리, 수용 인원, 침대 구성 정보를 카드형 UI로 구성하여 직관적 비교 가능.
네이버 예약 연동으로 2클릭 이내 예약 동선 구현
객실 카드, 상단 헤더, 객실 상세 페이지 등 사이트 전반에 예약 버튼을 배치. 정보 탐색에서 네이버 예약 완료까지 이탈 없는 전환 동선 확보.
Next.js 이미지 최적화로 로딩 속도 개선
고화질 호텔 사진에 자동 리사이징, WebP 변환, Lazy Loading을 적용. 시각적 품질을 유지하면서 페이지 로딩 속도를 대폭 개선.
풀 반응형 웹 구현으로 모바일 접근성 확보
모바일·태블릿·데스크톱 전 디바이스에서 풀스크린 이미지, 객실 갤러리, 예약 버튼이 자연스럽게 작동하는 반응형 설계 완료.
SEO 최적화를 통한 지역 검색 유입 기반 구축
"포항 호텔", "구룡포 숙소" 등 지역 키워드 대응 메타데이터·구조화 데이터 적용. 네이버·구글 검색 노출을 위한 페이지 구조 최적화 완료.
핵심 기능
풀스크린 히어로 이미지 슬라이더
오션뷰, 마운틴뷰, 테라스뷰 등 호텔 대표 이미지를 풀스크린 슬라이드로 노출. 부드러운 전환 애니메이션으로 첫 방문 시 프리미엄 감성을 즉시 전달.
진행 단계
기획 및 디자인
2024.06.
호텔 요구사항 수집, 10개 객실 정보 정리, 사이트맵 확정. 브랜드 감성에 맞는 풀스크린 비주얼 중심 UI 디자인 및 모바일 반응형 시안 제작.
프로젝트 상세
1) 포트폴리오 소개 포항 구룡포 프리미엄 오션뷰 호텔의 브랜드 웹사이트 개발. 커플·가족 단위 여행객을 타깃으로, 호텔의 감성과 객실 정보를 시각적으로 전달하고 네이버 예약으로 연결하는 숙박 브랜딩 웹사이트. 2) 작업 범위 서비스 기획 및 정보 구조 설계, UI/UX 디자인, 프론트엔드 개발(Next.js, React), 이미지 최적화 및 갤러리 시스템 개발, 네이버 예약 시스템 연동, 카카오맵
