From bd1daa7ec31aff8f4e26559ba03439b45ab710c2 Mon Sep 17 00:00:00 2001 From: Yun Chan Date: Fri, 21 Aug 2026 01:07:47 +0900 Subject: [PATCH] =?UTF-8?q?fix(site):=20=ED=9E=88=EC=96=B4=EB=A1=9C=20h1?= =?UTF-8?q?=20=EC=9D=98=20clamp=20=ED=95=98=ED=95=9C=EC=9D=84=20h2=20?= =?UTF-8?q?=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C=20=EC=9E=A1=EB=8A=94?= =?UTF-8?q?=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 데스크톱만 보고 고쳐서 좁은 화면의 위계가 사라져 있었다. h1 만 vw 에 비례해 줄고 h2 는 고정 스케일이라 둘이 만난다. 1440px 65.4 / 33.2 = 1.97 배 1024px 52.5 / 33.2 = 1.58 배 390px 35.2 / 33.2 = 1.06 배 ← 사실상 같은 크기 하한을 3rem(48px, h2 의 1.45 배)으로 올려 전 구간을 확보했다. 320 / 390 / 768 / 1024 / 1440 에서 1.45 · 1.45 · 1.63 · 1.87 · 2.12 배. tokens.md 에 "clamp 의 하한은 같이 변하지 않는 값을 기준으로 정한다" 와 최소·중간·최대 폭 세 곳에서 계산해 확인하라는 절차를 기록했다. --- apps/site/src/components/Hero.astro | 8 +++++-- packages/skill/references/tokens.md | 37 +++++++++++++++++++++++++---- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/apps/site/src/components/Hero.astro b/apps/site/src/components/Hero.astro index 45e789b..4acf2ca 100644 --- a/apps/site/src/components/Hero.astro +++ b/apps/site/src/components/Hero.astro @@ -124,8 +124,12 @@ const { c, ui } = Astro.props; .hero-title { /* step-4(41.5px)는 h2(33px)보다 8px 클 뿐이라 위계가 서지 않았다. 한때 --display(112px)를 썼다가 배경과 싸워서 줄였는데, 줄이다가 - h2 와 구별이 안 되는 데까지 왔다. 그 사이 값이 필요하다. */ - font-size: clamp(2.2rem, 1.3rem + 3.1vw, 4.4rem); + h2 와 구별이 안 되는 데까지 왔다. 그 사이 값이 필요하다. + + 하한이 중요하다. h1 만 vw 에 비례해 줄고 h2 는 고정이라, + 하한을 2.2rem 으로 두면 390px 화면에서 35.2px 대 33.2px — + 1.06 배로 사실상 같은 크기가 된다. 하한은 h2 기준으로 정한다. */ + font-size: clamp(3rem, 1.9rem + 3.1vw, 4.4rem); line-height: 1.08; letter-spacing: var(--tracking-display); max-width: 15ch; diff --git a/packages/skill/references/tokens.md b/packages/skill/references/tokens.md index 1fa08cd..627f90e 100644 --- a/packages/skill/references/tokens.md +++ b/packages/skill/references/tokens.md @@ -142,16 +142,43 @@ 배경 그래픽과 싸워서 줄였는데, 줄이다가 h2 와 붙는 데까지 왔다. **한 극단에서 도망치다 반대쪽 극단에 도착한 것이다.** -기준: **히어로 h1 은 섹션 h2 의 1.8~2.2 배.** 그 아래면 위계가 없고, -그 위는 배경·여백과 싸우기 시작한다. 고친 값은 65.4px 로 h2 의 1.97 배다. +기준: **넓은 화면에서 히어로 h1 은 섹션 h2 의 2 배 안팎.** 그 아래면 위계가 없고, +그 위는 배경·여백과 싸우기 시작한다. + +### clamp 의 하한은 h2 를 기준으로 정한다 + +여기서 한 번 더 틀렸다. 데스크톱만 보고 고쳤더니 이렇게 됐다. ```css -/* 스케일의 마지막 단계를 그대로 쓰지 말고, 히어로 전용 구간을 따로 잡는다 */ .hero-title { font-size: clamp(2.2rem, 1.3rem + 3.1vw, 4.4rem); } ``` -> 확인법: h1 과 h2 를 나란히 놓고 보지 말고 **크기를 재라.** -> 배경이 화려하면 큰 글자도 작아 보여서 눈이 속는다. +| 화면 | h1 | h2 | 비율 | +|---|---|---|---| +| 1440px | 65.4px | 33.2px | 1.97 배 | +| 1024px | 52.5px | 33.2px | 1.58 배 | +| 390px | **35.2px** | 33.2px | **1.06 배** | + +**h1 만 `vw` 에 비례해 줄고 h2 는 고정이라, 좁아질수록 둘이 만난다.** +데스크톱에서 고친 위계가 모바일에서 그대로 사라진다. + +하한을 h2 의 1.4 배 이상으로 잡으면 전 구간이 유지된다. + +```css +/* 하한 3rem = 48px = h2(33.2px)의 1.45 배 */ +.hero-title { font-size: clamp(3rem, 1.9rem + 3.1vw, 4.4rem); } +``` + +| 화면 | 320 | 390 | 768 | 1024 | 1440 | +|---|---|---|---|---|---| +| 비율 | 1.45 | 1.45 | 1.63 | 1.87 | 2.12 | + +좁은 화면에서 2 배를 고집할 필요는 없다 — 폭이 좁으면 큰 글자가 줄만 늘린다. +**1.4 배가 하한, 2 배 안팎이 상한**이고 그 사이를 `vw` 가 잇는다. + +> 확인법: 한 화면 폭에서만 재지 마라. `clamp` 를 쓴 값은 **최소 폭·중간 폭·최대 폭 +> 세 곳에서 계산해 보고**, 같이 변하지 않는 값(고정 스케일의 h2 등)과의 비율을 봐라. +> 그리고 눈으로 비교하지 말고 크기를 재라 — 배경이 화려하면 큰 글자도 작아 보인다. ### 제목 다음 간격은 전역에서 한 번 정한다