플러스프로젝트 배경
SHAPER는 제조업 현장 데이터를 코딩 없이 시각화하는 BI 플랫폼이지만, 서비스 가치를 소개하는 공식 랜딩 페이지가 없어 잠재 고객이 기능·요금·도입 효과를 파악하기 어려웠습니다. '노코드 시각화'라는 핵심 가치를 직관적으로 전달하고 무료 체험과 상담 전환을 유도하는 전용 랜딩이 필요했습니다. 실제 제품 UI 화면을 랜딩에 임베드해 도입 검토 고객의 이해도를 높이는 단일 페이지가 필요했습니다.
프로젝트 성과
Framer Motion 스크롤 진입 애니메이션 + 비디오 히어로 구현
HeroSection 배경 비디오 자동재생 + Framer Motion useInView 기반 섹션별 fade-in-up 등장 애니메이션 7개 섹션 적용.
메인 7개 섹션 + 서브 4개 페이지 Next.js 25일 구현
Hero·DataValue·NoCode·Benefits·Product·Features·Pricing 7섹션 + 회사소개·상담·기능상세·요금제 4개 페이지 구현.
핵심 기능
7개 섹션 랜딩 + Framer Motion 스크롤 애니메이션
Hero·DataValue·NoCode·Benefits·Product·Features·Pricing 7섹션. 뷰포트 진입 시 fade-in-up 애니메이션 섹션별 stagger 적용
진행 단계
개발 환경 셋팅 + Figma 디자인 시안 작업
2024.12.
요구사항·디자인 분석, GitHub 환경 셋팅. 메인·요금제·기능·회사소개·상담 5개 섹션 디자인 시안 확정
프로젝트 상세
코딩 없이 데이터를 시각화하는 SHAPER BI 플랫폼의 반응형 랜딩 페이지. Framer Motion 스크롤 애니메이션·비디오 히어로·7개 섹션·4개 서브 페이지를 25일에 구현했습니다.
