[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>
- bakery: 이모지 → SVG 빵/셰프 일러스트, 고객 리뷰 섹션, 시즌 스페셜 섹션, 재료 태그 추가
- portfolio: 수상내역 마퀴 배너, 서비스 섹션, 프로젝트 카테고리 필터+호버 오버레이, 클라이언트 후기 추가
- dashboard: SVG 라인 차트, KPI 스파크라인, 알림 패널, 도넛 차트, 사용자 아바타 테이블 개선
- game: 챔피언 선택 섹션, 시즌 패스 진행 바, 최근 매치 히스토리, 파티클 배경, 티어 SVG 배지
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
