맘편한(CareCode) 서비스 소개 사이트입니다. 앱(CareCode_FE)과 API(CareCode_Interface)와는 별개로 배포합니다.
앱은 로그인한 사용자가 쓰는 모바일 화면이고, 이 사이트는 아직 가입하지 않은 사람이 보는 데스크톱 중심 문서입니다. 레이아웃도 배포 주기도 다릅니다.
앱 안에 두면 소개 문구 한 줄 고치는 데 앱 전체를 다시 배포해야 하고, 앱의 모바일 셸과 세션·푸시 초기화를 경로마다 우회해야 합니다.
npm install
npm run dev # http://localhost:3000
npm run build # out/ 에 정적 파일 생성서버가 할 일이 없어 output: 'export' 로 정적 출력만 만듭니다. out/ 를 그대로 어디든
올리면 됩니다.
| 경로 | 내용 |
|---|---|
/ | 개요. 월령 축을 옮기면 지원금이 유효·소급가능·지남으로 갈립니다 |
/benefits | 자격 판정, 수령액 계산, 금액 신뢰도 |
/facilities | 정원 관측, 빈자리 알림, 대기 기간 통계 |
/data | 출처 네 곳과 아는 것 / 모르는 것 대조 |
/trust | 수집 항목, 민감정보 처리, 정보주체 권리 |
방향은 육아수첩 · 관공서 기록부입니다. 이 분야에서 흔한 파스텔 베이비 톤도, 핀테크식 무채색도 쓰지 않았습니다. 정부가 나눠 주는 아기수첩 — 모눈 인쇄, 개월 수 탭, 도장, 표 — 을 기준으로 삼았습니다.
| 토큰 | 값 | 쓰임 |
|---|---|---|
--paper | #F6F8F3 | 재생지에 가까운 차가운 오프화이트 |
--ink | #1C2620 | 도장 잉크에 가까운 진한 녹흑 |
--seal | #36AA1C | 유효·현재 (앱과 같은 브랜드 그린) |
--past | #A8B2A5 | 이미 지나간 것 |
--stamp | #C2453D | 마감·경고 (경보 빨강이 아니라 도장 빨강) |
--rule | #DCE3D6 | 모눈선 |
이 서비스의 목소리는 "다 받으세요"가 아니라 "이건 알고 이건 모릅니다"입니다. 700 굵기 고딕 헤드라인은 그 성격에 맞지 않아, Pretendard 300 을 크게 놓아 표제를 만듭니다.
한글 명조를 쓰면 더 좋았겠지만 next/font 에 한글 서브셋을 제공하는 구글 폰트가 없고,
런타임에 외부에서 받아 오면 방문자 IP 가 매번 나갑니다. 개인정보 고지를 따로 두는 서비스에서
그건 앞뒤가 맞지 않아 자체 호스팅한 Pretendard 만 씁니다. 숫자는 IBM Plex Mono 로 자릿수를
맞춥니다.
홈의 월령 타임라인입니다. 문구로 설득하는 대신 축을 놓고 직접 옮겨 보게 합니다.
밴드 구성은 실제 정책 데이터 모델(대상 연령 상·하한, 지급액, 소급 개월)을 따랐고,
금액을 모르는 정책은 미상 으로 둡니다.
main 에 들어가면 GitHub Actions 가 빌드해 GitHub Pages 로 올립니다. PR 에서는 배포하지 않고
빌드·타입·린트와 화면 검증만 돕니다.
배포가 끝나면 페이지 5개와 sitemap.xml·robots.txt 가 실제로 200 인지, 그리고 CSS 가 붙는지
확인합니다. 파일은 올라갔는데 basePath 가 어긋나 스타일만 404 인 경우가 흔해서입니다.
npm run verify # 로컬에서 같은 검사 (out/ 을 먼저 서빙해야 합니다)사이트에 적힌 수집량은 src/content/figures.ts 한 곳에 있고 MEASURED_ON 과 함께 둡니다.
백엔드가 매주 공공데이터를 새로 받아 오므로 값이 낡습니다.
자동으로 매주 화요일 새벽에 백엔드 공개 통계에서 받아 와 PR 을 엽니다.
| 값 | 출처 |
|---|---|
| 어린이집 · 유치원 | GET /facilities/statistics 의 typeDistribution |
| 소아청소년과 | GET /health/hospitals/statistics |
| 정부지원 서비스 | GET /policies/statistics |
넷 중 하나라도 못 받으면 아무것도 바꾸지 않습니다. 일부만 갱신하고 날짜를 새로 찍으면 낡은 값에 새 날짜가 붙어 거짓말이 됩니다.
동작하려면 저장소 변수 STATS_API_BASE 에 백엔드 공개 주소가 있어야 합니다. 없으면 워크플로가
조용히 건너뜁니다 — 백엔드가 공개되기 전에 실패로 울리면 알림이 무의미해지기 때문입니다.
STATS_API_BASE=https://api.example.com npm run refresh # 로컬에서 직접PR 에서 사람이 볼 것은 하나입니다 — 숫자가 갑자기 크게 줄지 않았는지. 공공데이터 수집이 부분 실패하면 값이 뚝 떨어질 수 있습니다.
근거 없는 숫자는 쓰지 않습니다./data 에 무엇을 모르는지 적어 둔 것도 같은 이유입니다.
어린이집 자리와 지원금은 부모가 실제 결정을 내리는 정보라, 그럴듯한 추정치를 믿고 다른
선택지를 포기한 사람이 손해를 봅니다.
수치를 고칠 때는 CareCode_Interface 문서의 실측값을 근거로 삼으세요.
Next.js 15 (App Router, 정적 출력) · React 19 · Tailwind CSS v4 · TypeScript