From 4774a95aa632aa1f80d0106becd8fa404f225f53 Mon Sep 17 00:00:00 2001 From: RosieOh Date: Tue, 22 Sep 2026 18:54:45 +0900 Subject: [PATCH] =?UTF-8?q?feat(design):=20=EC=82=AC=EC=9D=B4=ED=8A=B8=20?= =?UTF-8?q?=EC=A0=84=EC=B2=B4=EB=A5=BC=20=EC=95=B1=EA=B3=BC=20=EA=B0=99?= =?UTF-8?q?=EC=9D=80=20=EC=A0=9C=ED=92=88=20=ED=86=A4=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B0=94=EA=BE=BC=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 색·서체·모서리를 CareCode_FE 의 @theme 에서 그대로 옮긴다(흰 바탕, green 600/900, Pretendard 700, 둥근 12~24px) - 로고·파비콘을 앱 아이콘으로. 없던 favicon 요청이 404 나던 것도 함께 해결 - 토큰 이름을 의미 이름으로(--paper/--ink/--seal → --bg/--fg/--brand …), .stamp → .badge - 숫자 전용 IBM Plex Mono 제거 — 한글이 없어 배지의 한글 자간이 벌어졌고, 빌드 때 외부 요청이 하나 줄어든다 - 3D 동네: 12~14층 배경 탑을 낮은 흰 건물로 바꾸고 앱 팔레트로 칠한다. 카메라를 가족 쪽으로 붙인다 - 홈 구간을 실제 사건이 있는 개월 수(0·1·6·12·18·24·72)로 줄이고, 개월과 무관하던 36·48·60개월 내용은 마지막 원칙 카드로 모은다 - 불투명 구간끼리 맞닿은 곳의 페이드를 없애 모눈이 두 겹으로 겹치던 띠를 없앤다 - 24→72개월처럼 크게 건너뛸 때 계절이 번쩍이지 않게 따라잡는 속도를 초당 24개월로 막는다 --- README.md | 49 +-- public/icon.svg | 9 + src/app/benefits/page.tsx | 26 +- src/app/data/page.tsx | 34 +- src/app/facilities/page.tsx | 12 +- src/app/layout.tsx | 32 +- src/app/opengraph-image.tsx | 73 ++-- src/app/page.tsx | 6 - src/app/trust/page.tsx | 24 +- src/components/Logo.tsx | 21 + src/components/MonthTimeline.tsx | 34 +- src/components/Page.tsx | 46 +-- src/components/SiteNav.tsx | 36 +- src/components/VacancyNotice.tsx | 43 +- src/content/facts.ts | 6 +- src/features/grow/GrowScene.tsx | 4 +- src/features/grow/stages.ts | 9 +- src/features/stations/Close.tsx | 85 ++-- src/features/stations/Hero.tsx | 18 +- src/features/stations/Month06.tsx | 4 +- src/features/stations/Month18.tsx | 4 +- src/features/stations/Month24.tsx | 2 +- src/features/stations/Month36.tsx | 56 --- src/features/stations/Month48.tsx | 54 --- src/features/stations/Month60.tsx | 52 --- src/features/stations/Station.tsx | 6 +- src/features/town/town-scene.ts | 136 ++++--- src/styles/globals.css | 152 ++++---- src/styles/grow.css | 628 ++++++++++++++---------------- 29 files changed, 758 insertions(+), 903 deletions(-) create mode 100644 public/icon.svg create mode 100644 src/components/Logo.tsx delete mode 100644 src/features/stations/Month36.tsx delete mode 100644 src/features/stations/Month48.tsx delete mode 100644 src/features/stations/Month60.tsx diff --git a/README.md b/README.md index 077e79b..a30fc10 100644 --- a/README.md +++ b/README.md @@ -34,28 +34,28 @@ npm run build # out/ 에 정적 파일 생성 ## 디자인 -방향은 **육아수첩 · 관공서 기록부**입니다. 이 분야에서 흔한 파스텔 베이비 톤도, 핀테크식 -무채색도 쓰지 않았습니다. 정부가 나눠 주는 아기수첩 — 모눈 인쇄, 개월 수 탭, 도장, 표 — 을 -기준으로 삼았습니다. +방향은 **앱과 같은 제품**입니다. 소개 사이트에서 본 것과 앱을 열었을 때의 인상이 같아야 합니다. +색·서체·모서리는 [CareCode_FE](https://github.com/CareCode-Repo/CareCode_FE) 의 +`src/styles/globals.css`(@theme) 를 그대로 옮겼고, 로고와 파비콘도 앱 아이콘(`public/icon.svg`)을 씁니다. +값을 바꿀 때는 앱 쪽이 원본입니다. | 토큰 | 값 | 쓰임 | |------|-----|------| -| `--paper` | `#F6F8F3` | 재생지에 가까운 차가운 오프화이트 | -| `--ink` | `#1C2620` | 도장 잉크에 가까운 진한 녹흑 | -| `--seal` | `#36AA1C` | 유효·현재 (앱과 같은 브랜드 그린) | -| `--past` | `#A8B2A5` | 이미 지나간 것 | -| `--stamp` | `#C2453D` | 마감·경고 (경보 빨강이 아니라 도장 빨강) | -| `--rule` | `#DCE3D6` | 모눈선 | - -### 표제를 얇게 쓰는 이유 - -이 서비스의 목소리는 "다 받으세요"가 아니라 "이건 알고 이건 모릅니다"입니다. -700 굵기 고딕 헤드라인은 그 성격에 맞지 않아, Pretendard 300 을 크게 놓아 표제를 만듭니다. - -한글 명조를 쓰면 더 좋았겠지만 `next/font` 에 한글 서브셋을 제공하는 구글 폰트가 없고, -런타임에 외부에서 받아 오면 방문자 IP 가 매번 나갑니다. 개인정보 고지를 따로 두는 서비스에서 -그건 앞뒤가 맞지 않아 자체 호스팅한 Pretendard 만 씁니다. 숫자는 IBM Plex Mono 로 자릿수를 -맞춥니다. +| `--bg` | `#FFFFFF` | 바탕 | +| `--surface` | `#FAFAFA` (gray-50) | 카드 · 표 머리 · 막대 바탕 | +| `--fg` / `--fg-soft` | `#212121` / `#616161` | 글자 | +| `--brand` | `#4FBE27` (green-600) | 유효 · 현재. 앱 버튼과 같은 색 | +| `--brand-deep` | `#007300` (green-900) | 초록 글자. 흰 바탕 본문 크기에서 4.5:1 을 넘기려면 900 까지 내려야 합니다 | +| `--alert` / `--alert-deep` | `#E55656` / `#B83A3A` | 마감 · 경고. 앱의 red 는 면용이라 글자는 한 단계 짙게 씁니다 | +| `--muted` | `#9E9E9E` | 이미 지나간 것 · 모르는 것 | +| `--line` | `#EEEEEE` | 구분선 | + +표제는 Pretendard 700, 버튼은 앱의 `Button` 과 같은 둥근 12px · 600 굵기 · green 600→700 입니다. +숫자는 서체를 바꾸지 않고 `tabular-nums` 로 자릿수만 맞춥니다. + +> 처음에는 "육아수첩 · 관공서 기록부" 방향(모눈 종이, 도장, 얇은 표제)이었습니다. 3D 동네와 두 시각 +> 언어가 부딪히고, 앱과 인상이 달라 바꿨습니다. 토큰 이름도 `--paper` · `--ink` · `--seal` 에서 +> 의미 이름으로 옮겼습니다. ### 시그니처 @@ -66,7 +66,7 @@ npm run build # out/ 에 정적 파일 생성 - **성장** — 유모차에서 걸음마로, 마지막에는 책가방을 멥니다. 태어난 봄에 심은 벚나무도 함께 자랍니다 - **시선** — 그 시기에 부모가 드나드는 건물(어린이집 · 소아과 · 행정복지센터)로 카메라가 갑니다. 건물 위의 알림 표식은 그 시기에 살아 있는 알림만큼 떠오르고, 부모급여가 끝나기 직전(20–24개월)에는 - 도장 빨강으로 바뀝니다 + 경고 빨강으로 바뀝니다 4월생으로 고른 이유는 동네가 보이는 구간(출생 · 6 · 18 · 72개월)이 봄과 가을에 앉기 때문입니다. 3월생이면 전부 초봄이라 계절이 흐르는 게 안 보입니다. @@ -76,7 +76,12 @@ npm run build # out/ 에 정적 파일 생성 소급 개월)을 따랐고, 금액을 모르는 정책은 `미상` 으로 둡니다. 구조 문법은 [JellySafe 소개 사이트](https://github.com/JellySafe/Introduce)(스크롤 = 하루)에서 -가져왔고, 색·서체·도장은 이 사이트의 육아수첩 토큰을 그대로 씁니다. +가져왔고, 색은 3D 동네까지 앱 팔레트(흰 벽 · green · yellow · blue)로 칠했습니다. + +**구간은 실제로 그 개월 수에 일어나는 일이 있을 때만 둡니다** — 출생 · 1개월(출생신고) · 6개월(어린이집 대기) · +12개월(첫만남이용권 종료) · 18개월(접종) · 24개월(부모급여 종료) · 72개월(취학 전). 개월 수와 관계없는 +이야기(모르는 것 · 부모의 기록 · 개인정보)에 "48개월" 같은 배지를 붙이면 약속이 억지가 되어, 마지막 구간의 +원칙 카드로 모았습니다. ## 홈을 손볼 때 @@ -92,7 +97,7 @@ src/features/ `[data-month]` 에서 읽습니다. 개발 모드에서는 둘이 어긋나면 콘솔에 경고가 뜹니다. **개월 수는 문서 진행도가 아니라 구간 위치로 정합니다.** 각 구간 머리가 화면 가운데에 온 순간을 -닻으로 삼아 사이를 잇습니다. 구간 길이가 제각각이라 진행도를 선형으로 나누면 "18개월" 도장을 읽는 +닻으로 삼아 사이를 잇습니다. 구간 길이가 제각각이라 진행도를 선형으로 나누면 "18개월" 배지를 읽는 순간 장면은 15개월이 됩니다. **스크롤 경로에 React 상태를 두지 않습니다.** GrowScene 은 초당 60회 도는 경로라 값은 ref 로 diff --git a/public/icon.svg b/public/icon.svg new file mode 100644 index 0000000..4402e3b --- /dev/null +++ b/public/icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/benefits/page.tsx b/src/app/benefits/page.tsx index ea263da..3709063 100644 --- a/src/app/benefits/page.tsx +++ b/src/app/benefits/page.tsx @@ -26,17 +26,17 @@ export default function BenefitsPage(): ReactNode { />
-