feat(design): 사이트 전체를 앱과 같은 제품 톤으로

[RosieOh]

왜

#10 의 홈은 글이 "육아수첩"(모눈 · 도장 · 얇은 표제)인데 뒤의 3D 는 광택 있는 회색 도시라 두 시각 언어가 부딪혔고, 앱을 열었을 때의 인상과도 달랐습니다. 개월 수와 관계없는 구간(36 · 48 · 60개월)에 배지를 붙인 것도 "스크롤 = 개월 수" 약속을 흐렸습니다.

무엇을

• 토큰 — 색·서체·모서리를 CareCode_FE @theme 에서 그대로 옮김(흰 바탕, green 600/900, Pretendard 700, 둥근 12~24px). 이름도 의미 이름으로(--paper/--ink/--seal → --bg/--fg/--brand …), .stamp → .badge
• 로고 · 파비콘 — 앱 아이콘(public/icon.svg). 없던 favicon 요청의 404 도 해결
• IBM Plex Mono 제거 — 한글이 없어 배지의 한글 자간이 벌어졌고, 빌드 때 외부 폰트 요청이 하나 줄어듦
• 3D 동네 — 12~14층 배경 탑을 낮은 흰 건물로, 앱 팔레트(흰 벽 · green · yellow · blue)로 칠함, 카메라를 가족 쪽으로. 드로우콜 215 → 98
• 홈 구간 — 실제 사건이 있는 개월 수(0 · 1 · 6 · 12 · 18 · 24 · 72)만 남기고, 36 · 48 · 60개월 내용은 마지막 구간의 원칙 카드 4장으로
• 버그 — 불투명 구간끼리 맞닿은 곳에서 모눈이 두 겹으로 겹치던 띠 제거. 24 → 72개월처럼 크게 건너뛸 때 계절이 번쩍이지 않게 따라잡는 속도를 초당 24개월로 제한
• 상세 페이지 4개 · 헤더 · 푸터 · OG 이미지도 같은 톤으로

확인

• npm run typecheck · npx eslint src scripts · npm run build
• scripts/verify-pages.mjs — 5개 페이지 × 390/768/1440, 가로 넘침 · 접근성 통과
• 소프트웨어 렌더러에서는 정적 배경(CI 와 같은 조건), ?town=force 로 3D
• 로컬 GPU 헤드리스 Chrome 에서 구간별 1440 · 390 화면 확인