[dev-goraebap]

요약

가이드 사이트의 화면 이동을 업무 앱(Webcraft 0.8.0 데이터 상태 규칙)과 같게 맞춥니다. 지금 사이트는 그 이전 방식(180ms 뒤 로켓 덮개, 이동마다 새 문서 160ms 페이드 인)이라 이동할 때마다 한 번 비었다가 나타나고, 견본·도표가 뒤늦게 붙어 밀렸습니다.

• 진행 표시: 덮개를 없애고, 150ms가 지나면 콘텐츠 카드 위쪽 테두리에 강조색 줄이 흐릅니다(최소 300ms). 화면 읽기 프로그램에는 상태 문구로 알립니다.
• 교차 페이드: 이동마다의 페이드 인을 빼고, View Transition으로 콘텐츠 영역만 200ms 교차 페이드합니다(동작 줄이기·열린 창에서는 하지 않음).
• 라우트 준비에서 미리 끝내기: 빌드 때 문서마다 쓰는 견본 id와 도표 원문을 뽑아, loader(링크에 포인터가 오면 시작)에서 견본 정보와 도표 SVG를 미리 준비합니다. 새 문서는 처음부터 제 높이로 그려집니다.
• 크는 견본: 크기를 미리 잰 sample-sizes.json(새 스크립트 npm run site:sizes)과 브라우저에 기억한 크기로 첫 그림부터 자리를 잡고, 크기를 모를 때는 다 그려진 뒤 나타나며 높이를 부드럽게 늘립니다.
• 메뉴: 자기 개요 페이지가 있는 묶음(아키텍처 4절·8.x·9절 등)을 누르면 첫 하위 문서가 아니라 그 페이지로 갑니다.

검증

• 메뉴로 7개 이동(도표 많은 절, 카탈로그 묶음): 첫 방문 layout-shift 합 0~0.0006(고치기 전 Foundations 0.033).
• View Transition이 이동마다 실행, 응답 지연 400ms에서 진행 줄 표시·덮개 없음.
• npm run check, npm test 10개, npm run site:check, npm run site:test 328개, npm run site:build.

🤖 Generated with Claude Code