- 모든 샘플 페이지 우측 하단 맨 위로 스크롤 버튼 추가 (인테리어, 독서)
- 독서 기록 노트 상단 '홈페이지 제작 서비스로 돌아가기' 배너 추가
- 개인 쇼핑몰 샘플 (MELLOW STUDIO) 신규 생성
- 베이지/크림 라이트 톤, Cormorant Garamond + Pretendard
- 히어로 스플릿 레이아웃, 상품 그리드(카테고리 필터), 브랜드 스토리, 리뷰, CTA, 푸터
- 장바구니 뱃지, 상품 찜하기, 퀵 장바구니 인터랙션
- 홈페이지 서비스 소개 페이지 재디자인
- CookieRun → Pretendard 교체로 한글 폰트 렌더링 개선
- word-break: keep-all 적용으로 이상한 개행 제거
- IntersectionObserver 스크롤 reveal 애니메이션 추가
- Trust badge 섹션, Marquee 추가
- 쇼핑몰 샘플 카드 추가
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
[Root cause 3가지]
1. 스크롤 이벤트 타깃 오류
- window.scroll → .main-content (overflow-y:auto) 로 수정
- DashboardShell의 내부 스크롤 컨테이너를 querySelector로 탐색
2. 히어로 높이 오류
- height:100dvh → calc(100dvh - 40px - 72px)
- 배너(40px) + 네비(72px) 이후 남은 뷰포트를 정확히 채움
3. 스크롤 텍스트 transform 충돌
- top:50%; transform:translateY(-50%) 위치지정 제거
- au-scrub-text를 inset:0 flex 레이아웃으로 변경
- JS는 opacity+filter만 갱신 (transform 불변)
[추가 개선]
- nav: 히어로 위에서 투명, 스크롤 후 cream 배경+blur 전환
- 스크롤 섹션 초기 onScrub() 즉시 호출로 첫 텍스트 표시
- IntersectionObserver root를 .main-content로 지정
- 마일스톤 2 data-end="1.01" (경계값 처리)
- 전체 페이지 코드 정리 및 중복 제거
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 히어로: MP4 풀스크린 비디오 배경 (autoplay/muted/loop), 초기 8초 drift 애니메이션
- 스크롤 섹션(380vh): 48장 WebP 프레임 스크러빙 (Apple 스타일)
- 스크롤 위치에 따라 캔버스에 프레임 렌더링 (requestAnimationFrame)
- 3단계 텍스트 오버레이 (공간 철학 / 실적 / CTA) DOM 직접 조작
- 하단 진행 바 실시간 업데이트
- 6fps WebP 48프레임 추출 (libwebp, quality 82) → 총 1.3MB
- 모든 이미지 cover-fit 캔버스 렌더링
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
picsum 플레이스홀더 → 실제 인테리어 이미지 7장으로 교체:
- 히어로, 포트폴리오 벤토 4컷, 서비스 지그재그 3컷
- Pinterest 이미지 + Lunalight Studios 조명 이미지 적용
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
