한과 브랜드 쇼핑몰

목적

브랜드 이야기와 실제 구매 흐름을 한 사이트에 담은 정과 쇼핑몰을, 브랜드가 정해지기 전에 미리 보여 주는 것.

해결한 문제

브랜드명, 가격, 실제 제품 사진이 아직 없었습니다. 모든 내용을 데이터 파일로 빼서 정해지면 바꿔 넣게 했습니다.

기능

• 메인 여섯 장면의 스크롤 연출. 위로 올리면 거꾸로 돌아갑니다.
• 전체 상품, 상품 상세, 선물세트, 장바구니, 자주 묻는 질문, 문의 페이지.
• 옵션과 수량을 고르면 금액이 바로 바뀌고 장바구니에 담깁니다.
• 페이지별 메타데이터, 상품 구조화 데이터, sitemap.xml 이 들어 있습니다.
• 움직임 줄이기를 켜면 장면 고정과 스크롤 연출이 모두 꺼집니다.

화면 방향

한지 질감 위 따뜻한 갈색. 휴대폰에서는 구매 구간에서만 아래쪽 구매 막대가 뜹니다. 제품 사진은 시안용 연출 이미지입니다.

사용 기술

Next.js, TypeScript

사이트 전체

Tailwind CSS

스타일

GSAP ScrollTrigger

스크롤 장면

Playwright

브라우저 자동 검사 122개

결과

8개 페이지의 레이아웃 이동(CLS)은 0.005 이하, 데스크톱 Lighthouse 성능 점수는 99~100이었습니다 (2026-10-13 로컬 빌드 기준). 결제는 연결하지 않았습니다.