feat(home): 스크롤이 아이의 개월 수가 되는 여섯 해 홈과 3D 동네

[RosieOh]

무엇을

홈을 JellySafe 소개 사이트(스크롤 = 하루)의 구조를 빌려 한 페이지 스크롤 이야기로 바꿉니다. 스크롤 진행이 아이의 개월 수(0 → 72)이고, 뒤에 깔린 3D 동네가 그 값 하나로 바뀝니다.

• 계절 — 4월생 가정. 동네가 보이는 구간(출생 · 6 · 18 · 72개월)이 봄·가을에 앉도록 고른 값
• 성장 — 유모차 → 걸음마 → 책가방. 태어난 봄에 심은 벚나무가 동네 나무만큼 자람
• 시선 — 어린이집(6) · 소아과(18) · 행정복지센터(24)로 카메라가 이동. 알림 표식은 부모급여 마감 직전(20–24개월)에 도장 빨강

상세 페이지 4개(/benefits · /facilities · /data · /trust)와 육아수첩 디자인 토큰은 그대로입니다. 홈과 상세 페이지가 함께 인용하는 문구는 src/content/facts.ts 로 모았습니다.

판단

• 개월 수는 구간 위치로 정합니다. 각 구간 머리가 화면 가운데에 온 순간을 닻으로 삼아 잇습니다. 진행도를 선형으로 나누면 "18개월" 도장을 읽을 때 장면이 15개월이 됩니다.
• 3D 를 쓰지 않을 사용자에게 받게 하지 않습니다. 동작 줄이기 · WebGL2 미지원은 three.js 를 import 하기 전에 판정하고 정적 배경을 띄웁니다. 카피는 전부 DOM 입니다.
• 문구·수치는 근거가 있는 것만. 기존 페이지의 실측값·대조표, 앱에 실제로 있는 기능(예방접종 일정 자동 생성 · 검진 임박 알림)만 씁니다.
• 드로우콜 — 벽/옥상 두 재질로 그려 381 → 215(데스크톱) · 102(모바일).

확인

• npm run typecheck · npx eslint src scripts · npm run build
• scripts/verify-pages.mjs — 5개 페이지 × 390/768/1440, 가로 넘침 · 접근성 통과
• 헤드리스 Chrome(SwiftShader)으로 구간별 1440 · 390 폭 화면 확인
• 실제 GPU 에서 carecodeTown.stats() 로 fps 확인 — 소프트웨어 렌더러 수치는 의미가 없어 비워 둡니다

홈 첫 로드 JS 108 kB. three.js 는 지연 로드 청크입니다.

[RosieOh]

첫 CI 가 화면 검증에서 실패했습니다(홈 로드 60초 초과). GPU 없는 CI 의 헤드리스 Chrome 이 SwiftShader 로 3D 를 돌리며 메인 스레드를 잡아먹었기 때문입니다. 로컬에서는 OS 의 동작 줄이기 설정 때문에 3D 가 아예 뜨지 않아 통과했던 것이라 놓쳤습니다.

실사용자에게도 같은 문제라(GPU 가속 없는 PC) 소프트웨어 렌더러를 감지하면 three.js 를 받기 전에 정적 배경으로 대체하도록 고쳤습니다. 확인용 ?town=force 를 두었습니다. → CI 통과