feat: 서비스 소개 사이트 5개 페이지 구축

[RosieOh]

서비스 소개 사이트를 구축합니다. 5개 페이지, 정적 출력.

Closes#1
Closes#2
Closes#3
Closes#4
Closes#5

왜 별도 저장소인가

처음에는 앱 안에 /intro 로 넣었다가 뺐습니다.

• 앱은 max-w-sm 모바일 셸 안에서 도는데 소개 사이트는 전체 폭이 필요합니다. 경로마다 셸과 세션·푸시 초기화를 우회해야 했습니다.
• 소개 문구 한 줄 고치는 데 앱 전체를 다시 배포하게 됩니다.

디자인 방향 — 육아수첩 · 관공서 기록부

이 분야에서 흔한 파스텔 베이비 톤도, 핀테크식 무채색도 쓰지 않았습니다. 정부가 나눠 주는
아기수첩 — 모눈 인쇄, 개월 수 탭, 도장, 표 — 을 기준으로 삼았습니다.

토큰	값	쓰임
--paper	#F6F8F3	재생지에 가까운 차가운 오프화이트
--ink	#1C2620	도장 잉크에 가까운 진한 녹흑
--seal	#36AA1C	유효·현재 (앱과 같은 브랜드 그린)
--past	#A8B2A5	이미 지나간 것
--stamp	#C2453D	마감·경고 (경보 빨강이 아니라 도장 빨강)

시그니처 — 월령 타임라인

히어로에서 문구로 설득하지 않고 축을 옮겨 직접 보게 합니다. 27개월에 놓으면 부모급여는
지났지만 소급 가능(빨강), 아동수당·양육수당·보육료는 유효(초록), 첫만남이용권은 기회가
지남(회색)으로 갈립니다.

밴드 구성은 실제 정책 데이터 모델(대상 연령 상·하한, 지급액, 소급 개월)을 따랐고, 금액을 모르는
정책은 미상 으로 뒀습니다.

감수한 것 — 모르는 것을 적는 페이지

/data 에 "아는 것 / 모르는 것" 대조표를 넣었습니다. 마케팅 페이지가 보통 하지 않는 일입니다.

• 반별 정원 — 공공데이터가 시설 단위로만 줍니다
• 일부 정책의 금액 — 숫자가 아니라 설명 문장 안에 섞여 옵니다
• 대기 순번이 도는 시점 — 정부가 공개하지 않습니다
• 광주·전남 — 두 정부 API 모두 빈 결과를 돌려줍니다

근거는 이 제품의 철학 자체가 "지어낸 숫자는 없는 것보다 나쁘다" 이고, 어린이집 자리와 지원금은
부모가 실제 결정을 내리는 정보라 그럴듯한 추정치를 믿고 다른 선택지를 포기하면 손해를 보기
때문입니다.

판단이 필요했던 지점

표제 서체. 한글 명조로 가려 했는데 next/font 번들에 한글 서브셋을 제공하는 구글 폰트가 하나도
없었습니다. 런타임에 구글에서 받아 오는 방법은 되지만, 개인정보 고지 페이지를 둔 서비스가 방문자
IP 를 매번 구글로 보내는 건 앞뒤가 맞지 않아 쓰지 않았습니다.

대신 자체 호스팅한 Pretendard 를 300 굵기로 크게 놓아 표제를 만들었습니다. 이 서비스의 목소리가
"다 받으세요" 가 아니라 "이건 알고 이건 모릅니다" 라서, 700 고딕 헤드라인은 성격에 맞지 않기도
했습니다.

검증

항목	결과
next build	5개 페이지 정적 생성, out/ 산출
정적 산출물 서빙	5개 경로 200
가로 오버플로 (390·768·1440)	0건
접근성 (h1·제목 레벨·라벨·caption·빈 링크)	5페이지 문제 없음
타입 · 린트	통과

검증 중 잡은 것

• /data 가로 스크롤 — 그리드 자식의 min-width: auto 가 안쪽 표만큼 칸을 밀고 있었습니다
• 표제가 본문 서체로 폴백 — 폰트 서브셋 문제
• "원장" 라벨 — 육아 맥락에서 어린이집 원장으로 읽혀 "대조" 로 바꿨습니다
• 제목이 상단 고정 메뉴에 가림 — scroll-margin-top 추가

남긴 것

추가: 배포 · SEO · 검증 자동화 (#2#4#5)

수치 갱신(#3)을 미룬 이유가 "배포 파이프라인이 없어서" 였는데, 그러면 파이프라인부터 만드는 게
순서였습니다. 남은 세 건을 함께 처리했습니다.

배포 (#2)

• main 푸시 → 빌드 → GitHub Pages. PR 에서는 배포하지 않고 검증만 합니다.
• 프로젝트 페이지는 /<저장소명> 아래에 붙어 basePath 가 없으면 CSS·JS 가 전부 404 입니다.
  로컬은 루트로 서비스하므로 워크플로에서만 넣습니다.
• 배포 성공과 사이트가 뜨는 것은 다릅니다. 5개 경로와 sitemap.xml·robots.txt 응답에 더해
  CSS 가 실제로 붙는지까지 확인합니다. basePath 가 어긋나면 거기서 걸립니다.
• 매주 화요일 새벽에 다시 빌드합니다. 백엔드 동기화(월요일) 이후 시각으로 잡았습니다.

SEO (#4)

sitemap.xml, robots.txt, OG 이미지, canonical, twitter 카드.

OG 이미지는 코드로 그립니다. 사이트를 처음 여는 사람이 보는 것과 같아야 해서 모눈 배경과 월령
축을 그대로 옮겼습니다. 문구도 사이트와 맞췄습니다 — 사이트가 "지남" 과 "소급 가능" 을 구분하므로
요약 그림이라고 뭉뚱그리지 않았습니다.

검증 자동화 (#5)

scripts/verify-pages.mjs 로 옮겨 CI 에 붙였습니다. 5개 페이지 × 3개 폭(390·768·1440) 가로
오버플로와 접근성(h1 개수, 제목 레벨, 라벨, 표 caption, 이름 없는 링크·버튼)을 봅니다.

여기서 보는 것은 전부 이번에 손으로 확인하다 실제로 걸렸던 것입니다.

추가: 낡아 가는 수치 (#3)

리뷰 전에 하나 더 고쳤습니다. 수집량과 정책 밴드가 세 파일에 각각 박혀 있었습니다.
백엔드는 매주 공공데이터를 새로 받아 오므로 이 값들은 시간이 지나면 반드시 낡는데,
흩어져 있으면 낡은 걸 아무도 모른 채 지나갑니다.

이 사이트는 "근거 없는 숫자는 쓰지 않는다" 를 내세웁니다. 그러면서 정작 소개 페이지의 숫자가
언제 기준인지 밝히지 않으면 그 주장 자체가 무너집니다.

• src/content/figures.ts 한 곳으로 모으고 MEASURED_ON 을 함께 둡니다
• 홈과 데이터 페이지의 구획 라벨에 2026-08-06 기준 을 띄웁니다
• 표 머리글과 캡션에도 기준일을 넣어 표만 봐도 알 수 있게 합니다
• 데이터 페이지에 "매주 새로 받아 오므로 지금 수치와 다를 수 있습니다" 를 명시합니다

갱신 방법은 파일 주석에 적었습니다 — ./gradlew liveSyncCheck 로 실측한 뒤 값과 날짜를 함께 고칩니다.