플러스프로젝트 배경
대형 건설사의 프리미엄 아파트 분양을 위한 디지털 마케팅 사이트입니다. 오프라인 모델하우스 방문 전 온라인에서 단지/평면/입지 정보를 인터랙티브하게 체험할 수 있도록 설계했습니다. ■ 프로젝트 배경 - 분양 시장 디지털 전환: 코로나 이후 온라인 사전예약 비율 45%→71%로 급증 - 기존 분양 사이트: 이미지 나열식으로 공간감 전달 부족, 평면도 PDF 다운로드만 가능 - 오프라인 사전예약(전화/
프로젝트 성과
온라인 사전예약 2,400건 + 예약전환 12%
3단계 간소화 폼 + 프로그레스 바로 이탈률 감소. 모바일 예약 비율 71%. 야간 예약 34%(영업시간 제한 해소)
SVG 평면도 상호작용률 87% + 체류 5분
120개 호실 인터랙티브 평면도. 클릭률 87%로 거의 모든 사용자가 평면 탐색. GSAP 패럴랙스 체류 5분12초(업계 2.6배)
Lighthouse 95 / 크로스브라우저 60fps
WebP(60%↓), 폰트 서브셋, Critical CSS. iOS Safari/Android Chrome/Windows Edge 60fps. FCP 1.0초, LCP 1.6초
핵심 기능
SVG 인터랙티브 평면도 120호실 바인딩
path별 data-area/direction/price/floor. 클릭→팝업(면적/방향/가격/구조도). 호버 fill-opacity 전환. 분양완료 비활성
진행 단계
분양사이트 벤치마크 + IA 설계
2025.01.
래미안/힐스테이트/디에이치/자이/푸르지오 5개 분석. SVG 평면도+시네마틱 스크롤+카카오맵 구조 확정. 5개 페이지 IA
프로젝트 상세
프리미엄 아파트 분양 사이트입니다. SVG 인터랙티브 평면도 뷰어(호실별 클릭→면적/방향/가격 팝업), Swiper.js Thumbs+Zoom 유닛 갤러리, GSAP 시네마틱 패럴랙스 스크롤, 카카오맵 API 주변 인프라 시각화, 온라인 사전예약 다단계 폼을 구현했습니다. ■ 기술 스택 상세 - SVG: 인터랙티브 평면도 (path별 data-* 바인딩, 클릭 이벤트, fill 소유권 표시) - 슬라
