작업 기록
실제 화면
화면의 제품 사진은 AI 이미지 도구로 만든 시안용 연출 이미지입니다.
소개
정과 브랜드를 위한 쇼핑몰 데모입니다. 브랜드명이 정해지지 않아 ○○정과로 표시했습니다. 메인은 여섯 장면의 스크롤 연출이고, 그 뒤로 상품, 선물세트, 장바구니가 이어집니다.
목적
브랜드 이야기와 실제 구매 흐름을 한 사이트에 담은 정과 쇼핑몰을, 브랜드가 정해지기 전에 미리 보여 주는 것.
주요 기능
- 메인 여섯 장면: 정과 그릇으로 다가가는 한지 위 첫 장면, 빛과 윤기, 두 제품을 견주는 제품 살펴보기, 만드는 과정을 담은 이야기, 선물 포장, 상품 목록(쇼핑). 위로 올리면 거꾸로 돌아갑니다.
- 전체 상품, 상품 상세, 선물세트, 브랜드 이야기, 장바구니, 자주 묻는 질문, 문의 페이지가 있습니다.
- 옵션과 수량을 고르면 금액이 바로 바뀌고 장바구니에 담깁니다. 품절도 표시합니다.
- 휴대폰에서는 구매 구간에서만 아래쪽에 구매 막대가 뜹니다.
- 페이지별 메타데이터, Open Graph, 상품 구조화 데이터, sitemap.xml, robots.txt가 들어 있습니다.
- 느린 휴대폰에서는 연출을 덜어 내고, 기기에서 움직임 줄이기를 켜면 장면 고정과 스크롤 연출이 모두 꺼집니다.
적용 기술
- Next.js 16 (App Router)
- 사이트 전체
- TypeScript
- 코드
- Tailwind CSS 4
- 스타일
- GSAP ScrollTrigger
- 스크롤 장면
- Motion
- 화면 전환과 작은 움직임
- Lucide
- 아이콘
- localStorage
- 장바구니와 찜 저장 (기기 안에만)
- Playwright
- 브라우저 자동 검사
제작 과정
- 홈, 쇼핑, 상품, 선물, 이야기, 장바구니, 자주 묻는 질문, 문의 페이지를 먼저 만들었습니다.
- 메인을 여섯 장면의 스크롤 연출로 바꿨습니다.
- 한지 질감을 부드럽게 하고 휴대폰의 스크롤 안내를 읽기 쉽게 다듬었습니다.
- 브라우저 자동 검사 122개(장면 연출, 장바구니, 화면 폭별 배치)와 동작 테스트 26개로 검수했습니다.
구현 중 문제와 해결
- 해결함
문제: 실시간 흐림과 합성 효과는 저사양 기기에서 끊겼습니다.
고친 방법 미리 만든 이미지로 바꾸고, 움직이는 것은 transform, opacity, CSS 변수로만 제한했습니다.
- 해결함
문제: 스크롤 연출이 스크롤을 빼앗으면 쓰기 불편합니다.
고친 방법 장면 고정은 CSS sticky로만 하고, 스크롤 속도나 위치를 강제로 바꾸지 않습니다.
- 해결함
문제: 브랜드명, 가격, 실제 제품 사진이 아직 없습니다. 정해지면 바꿔 넣습니다.
고친 방법 모든 내용을 데이터 파일로 빼서 빈 값은 ‘등록 대기’로 보이게 했습니다. 사진 자리는 AI 이미지 도구로 만든 연출 이미지로 채웠고, 데모 모드에서는 ‘예시 가격’을 표시하며, 주문 버튼은 결제하지 않고 ‘결제 연결 전’ 안내만 보여 줍니다.
- 아직 남은 문제
문제: Lighthouse 기본 계산 방식의 모바일 LCP가 2.2~4.8초로 목표(2.5초)를 넘었습니다.
고친 방법 느린 네트워크와 CPU 4배 감속을 실제로 걸고 잰 값은 0.7~2.0초였습니다. 배포 뒤 실제 사용자 데이터로 다시 확인해야 합니다.
실제 결과물
2026-10-13 로컬 배포 빌드 기준으로 브라우저 자동 검사 122개와 동작 테스트 26개를 통과했고, 8개 페이지의 레이아웃 이동(CLS)은 0.005 이하, 데스크톱 Lighthouse 성능 점수는 99~100이었습니다. 결제는 연결하지 않았고, 실제 아이폰, 갤럭시와 Safari, Firefox에서는 확인하지 않았습니다.
시연과 체험
- 실제 동작
한과 브랜드 쇼핑몰 데모
실제로 만든 쇼핑몰 화면을 정적 판으로 올렸습니다. 장바구니와 찜은 이 브라우저 안에만 저장되고, 주문, 결제, 연락처는 없습니다. 브랜드명은 정해지지 않아 ○○정과로 표시했습니다. 제품 사진은 AI 이미지 도구로 만든 연출 이미지이고, 원재료 사진 2장은 Unsplash 사진입니다.
- 시연 영상
실제 화면을 녹화한 영상입니다.
관련 작업
맡은 일과 AI 도구
AI 도구를 쓴 곳
- 페이지, 스크롤 장면, 검사 코드는 AI 코딩 도구(Claude)로 만들었습니다(저장소 기록 2026-10-13).
- 임시 문구도 AI로 썼고, 화면에 ‘임시 문구’로 표시됩니다.
- 제품과 장면의 시안용 연출 이미지는 AI 이미지 도구로 만들었습니다. 참고 사진 2장은 Unsplash 사진입니다.