플러스프로젝트 배경
■ 문제점 ㅡ Cafe24 자사몰의 전형적인 메인 페이지 구조는 대부분 정적 배너 + 상품 그리드의 반복으로, 브랜드 차별화가 어려움 ㅡ 신발이라는 카테고리는 제품 형태 · 각도가 명확한 비주얼 자산임에도, 대부분의 자사몰이 평면 이미지로만 활용 ㅡ 첫 진입 3초 안에 브랜드 인상을 남기는 메인 경험이 부족하면, 상품 페이지로의 진입률 자체가 낮아짐 ■ 프로젝트 목표
프로젝트 성과
5블록 단순 구조 메인 페이지 완성
일반 자사몰의 정적 배너+그리드 반복 구조를 벗어나, 5블록 단순 구조로 메인 스크롤 길이를 최소화하고 각 섹션의 역할을 명확히 분리해 인지 부담을 줄였습니다.
Three.js 기반 3D 인터랙티브 히어로 구현
마우스 트래킹 회전과 부유 애니메이션이 결합된 3D 신발 히어로를 구현했습니다. lerp 보간으로 부드러운 인터랙션을 확보했고, 첫 진입 임팩트를 극대화했습니다.
토큰 기반 CSS 아키텍처 구축
tokens.css 한 곳에 색·폰트·간격 변수를 집중하고 컴포넌트 CSS는 변수만 참조하도록 설계해, 향후 시즌별 톤 일괄 변경이 가능한 구조를 완성했습니다.
핵심 기능
3D 인터랙티브 히어로 — 마우스 트래킹 신발 회전
Three.js 기반 GLB 모델로 렌더링된 신발이 마우스 움직임을 따라 회전하고, 정적 상태에서도 부유 애니메이션으로 살아있는 느낌을 유지합니다. 옐로우 대각선 시그니처와 거대 디스플레이 백텍스트가 결합
진행 단계
사전 기획
2026.05.
RFP 분석 및 메인 페이지 컨셉 도출, 5블록 구조 설계와 차별화 포인트 정의. Cafe24 솔루션 호환성을 고려한 구현 범위 합의.
프로젝트 상세
■ 프로젝트 개요 ㅡ Cafe24 솔루션 기반 신발 전문 자사몰 메인 페이지 사전 기획 시안 ㅡ 일반 자사몰 톤을 넘어, 3D 인터랙티브 히어로로 첫 인상을 차별화한 비주얼 중심 메인 페이지 설계 ㅡ PC · 모바일 반응형, 미니멀 화이트 톤 + 옐로우 시그니처 모티프 ──────────────────────── ■ 시안 구성 ㅡ 메인 페이지 (단일 페이지, 5블록 구조)
