플러스프로젝트 배경
1. 문제점: 코팅 등급, 소재, 열전도 구조 등 기술적 정보가 많아 자칫 지루하거나 이해하기 어려운 상세페이지가 될 우려 2. 목표: 스크롤 인터랙션으로 몰입도를 높여 제품의 기술적 강점을 효과적으로 전달하는 상세페이지 제작 3. 주안점: GSAP ScrollTrigger를 활용해 각 섹션의 정보 전달력을 극대화하는 타이밍과 모션 설계
프로젝트 성과
콘텐츠 체류 시간 증가 기대
스크롤 연동 애니메이션으로 정보 탐색 과정 자체에 흥미 요소를 부여해 페이지 이탈률 감소에 기여
브랜드 프리미엄 이미지 강화
고급스러운 모션 연출로 글로벌 브랜드 Tefal의 제품 신뢰도와 완성도를 시각적으로 뒷받침
정보 전달력 향상
코팅 등급·열전도 비교 등 복잡한 기술 정보를 애니메이션으로 시각화해 사용자 이해도를 높임
핵심 기능
GSAP 기반 스크롤 애니메이션
ScrollTrigger로 스크롤 위치에 맞춰 콘텐츠가 순차적으로 등장하는 인터랙티브 연출 기능
진행 단계
퍼블리싱 구조 설계
2025.11.
STEP 단위로 나뉜 다수의 정보 섹션(코팅/열원/소재/세척/구성)의 마크업 및 레이아웃 구조를 설계하는 단계
프로젝트 상세
프랑스 주방가전 브랜드 Tefal의 인덕션 스테인리스 스틸 티타늄 1X '디네토' 프라이팬 상세페이지 퍼블리싱을 담당했습니다. 제품 정보량이 많은 상세페이지 특성상 정적인 나열식 구성이 아닌, 스크롤에 반응하는 동적 연출을 적용해 사용자가 자연스럽게 콘텐츠를 따라가도록 GSAP의 ScrollTrigger를 활용한 스크롤 애니메이션을 구현했습니다. 코팅 등급 비교(기본/중급/고급 — 1X/2X/3X 티타늄
