[feat] 스크롤 스토리 탐색 경험 확장

[okorion]

목적

CSS scroll-driven story를 단순 장면 카드 모음에서 탐색과 접근성 제어가 가능한 밝은 편집형 여정으로 확장합니다.

주요 변경 사항

• 전체 문서의 스크롤 위치를 보여 주는 CSS 진행 표시줄을 고정 헤더에 추가했습니다.
• anchor 대상과 :has(:target)을 연결해 현재 장면 내비게이션 상태를 표시합니다.
• 체크박스 하나로 scroll snap과 장면 애니메이션을 끄는 no-JS 정적 읽기 모드를 추가했습니다.
• 신호, 이동, 도착, fallback 장면마다 의미가 다른 CSS 시각물을 구성했습니다.
• 큰 제목과 떠 있는 카드 중심 화면을 줄이고 기존 semantic token을 재사용한 밝은 2열 편집형 레이아웃으로 개편했습니다.
• 모바일 고정 헤더의 실제 높이를 anchor offset에 반영해 장면 제목이 가려지지 않게 했습니다.

사용자 영향

사용자는 상단 내비게이션과 각 장면의 다음 링크로 여정을 이동하고, 전체 진행률을 확인할 수 있습니다. 모션을 원하지 않으면 정적 읽기를 켜 동일한 문서를 애니메이션과 snap 없이 읽을 수 있습니다.

검증

• pnpm check
• source 및 dist 런타임 JavaScript 없음 확인
• git diff --check
• Playwright 데스크톱 1440x900 및 모바일 390x844 검증
• 장면 anchor 이동, 현재 장면 표시, 진행률 변화 확인
• 정적 읽기 선택 시 scroll-snap: none 및 장면 애니메이션 중지 확인
• 데스크톱·모바일 가로 넘침과 콘솔 오류 없음 확인
• agent-browser 페이지 로드, 오류 오버레이 없음, 주요 링크와 체크박스 렌더링 확인

참고

런타임 <script>와 inline event handler를 추가하지 않았으며 기존 no-JS progressive enhancement 경계를 유지했습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
css-scroll-odyssey	Ready	Preview, Comment	Jul 10, 2026 10:39am

[okorion]

레드팀 검토

• 차단 이슈: 발견되지 않음
• pnpm check 통과: 소스·산출물 no-JS 검증과 프로덕션 빌드 성공
• 브라우저 점검: 1440x1000과 390x844에서 내용과 시각 요소가 정상 렌더링됨
• 상호작용 점검: 정적 읽기 체크박스 상태 전환과 04 읽기 앵커 이동을 확인했고 콘솔 오류가 없었음

검토 결과: 병합 가능