diff --git a/apps/site/astro.config.mjs b/apps/site/astro.config.mjs index db59b90..590aa7d 100644 --- a/apps/site/astro.config.mjs +++ b/apps/site/astro.config.mjs @@ -4,6 +4,6 @@ export default defineConfig({ site: "https://designpaca.chanpaca.net", // 정적 출력 — Cloudflare Pages 로 그대로 올린다 output: "static", - build: { format: "file" }, + build: { format: "directory" }, devToolbar: { enabled: false }, }); diff --git a/apps/site/design.md b/apps/site/design.md new file mode 100644 index 0000000..105f646 --- /dev/null +++ b/apps/site/design.md @@ -0,0 +1,109 @@ +# design.md — designpaca 소개 페이지 + +> 6단계 산출물. 다음 실행(사람이든 에이전트든)은 이 파일을 먼저 읽고 같은 결정을 이어간다. +> 전체 조사 근거: `research/site-brief.md` (825줄) + +## 브리프 3줄 + +- **무엇을**: designpaca 소개 페이지. 파이프라인 스킬 + npx 설치 CLI 를 소개하는 단일 페이지, 한국어·영어 두 판 +- **누구에게**: Claude Code · Codex · Cursor 를 쓰는 개발자. 이 페이지를 보고 `npx designpaca` 를 터미널에 치게 만드는 것이 목표 +- **제약**: Astro 정적 → Cloudflare Pages. 이 페이지 자체가 스킬의 품질 증거물이다 — 스킬이 금지하는 것을 이 페이지가 하면 안 된다 + +## 레퍼런스 + +| 슬롯 | 사이트 | 업종 | 가져온 것 | 가져오지 **않은** 것 | +|---|---|---|---|---| +| R1 · 구조 | tasteskill.dev | 안티슬롭 디자인 스킬 | 섹션 순서, 설치 명령 3회 노출, **카피 규율**(자기 평가 형용사 0건) | radius 8종 · backdrop-filter 40개 · 타입 12단계 · 스폰서 벽 | +| R2 · 톤 | klim.co.nz | 폰트 파운드리 | 흰 바탕에 검정 밴드를 리듬으로, 설계 근거를 산문으로 파는 방식 | 유료 폰트 | +| R3 · 디테일 | Codrops scroll-driven wipe | — | 스크롤 진입 리빌 | `clip-path` 구현 (게이트 #8 위반 → `transform` 으로 교정) | + +**정본 확인 경고**: `tasteskill.com` 과 `design-taste.com` 은 본문 114바이트짜리 파킹 페이지다. HTTP 200 이 생존 신호가 아니다. + +## 한 문장 컨셉 + +> **이 페이지는 designpaca를 거쳐 만들어졌고, 그 절차와 형태 수치를 한국어 기준으로 전부 공개한다.** + +세 방향(절차를 판다 / 형태까지 간다 / 한국어로 푼다)이 "이 페이지 자신이 첫 사례"라는 사실 하나로 합쳐진다. + +## 프리셋 — `swiss-minimal` + +결정 요인은 **멀티링구얼**이었다. `editorial` 의 세리프는 한국어 마루 부리 / 영어 Spectral 로 갈려 두 판의 톤이 벌어진다. 그로테스크는 Pretendard / Switzer 로 양쪽이 같은 성격을 유지한다. +빌린 것: `editorial` 에서 규칙 옆 근거 1문장 어법, `anti-grid` 에서 파이프라인 섹션 한 곳의 의도적 어긋남. + +## 감수한 리스크 — 하나 + +**이 페이지 자신의 형태 수치를 페이지에 공개한다.** 공개한 순간 검증 가능해지고 하나라도 어기면 주장 전체가 무너진다. +규칙: **결과가 나쁘게 나와도 그대로 싣는다.** 유리한 것만 고르면 리스크가 자기 홍보로 바뀐다. + +## C-07 대응 — 번호 없이 순서 표현 + +파이프라인 6단계를 번호로 매기면 검출률 3위 슬롭 지문(9.4%)에 정면으로 걸린다. 세 층으로 풀었다: + +1. **시각** — 세로 스파인 위의 위치가 순서를 만든다 (Beck 1933 튜브맵: "topology trumped topography") +2. **내용** — 같은 브리프 문장 하나가 단계마다 변해간다 (IKEA 조립 설명서. IKEA 의 동기가 언어 독립성이라 멀티링구얼과 동기가 같다) +3. **의미** — `
    `. 시각적으로 번호 0개, 보조기술에는 "6개 중 n번째". `list-style: none` 일 때 Safari/VoiceOver 가 목록 의미를 버리는 것을 `role` 로 되돌린다 + +## 토큰 + +`src/styles/tokens.css` 전문. 요약: + +- 타입 비율 **1.25**, **디스플레이는 스케일 밖에 별도 정의** — 1.25⁴는 2.44배라 "최대÷본문 4배" 를 못 채우고, 단계를 늘려 맞추면 "통제 실패" 에 걸린다. 두 판 모두 정확히 **4.0배** +- 한국어 17px / lh 1.7 / measure 33em(561px) · 영어 16px / lh 1.55 / measure 65ch(640px) +- 강조색 **딥 틸 `#0E6B63`** 하나. 오렌지(tasteskill) · 마젠타(Bun) · 빨강(Klim) · 보라/시안 네온을 전부 피한 자리 +- **14개 색 조합 대비를 전부 계산해 검증** — 최저 6.04:1, 최고 16.88:1 +- radius **2종**(3px · 6px), 간격 8단계, 모션 4종 +- 라이트·다크 두 테마를 동등하게 정의. 다크 밴드는 **히어로와 설치 두 곳만** (게이트 #4 가 요구하는 "규칙으로 정의된 반전") + +## 성능 — 예산과 실측 + +| 항목 | 예산 | 실측 | 판정 | +|---|---|---|---| +| 히어로까지 JS (gzip) | 50KB | **314B** | 통과 (예산의 0.6%) | +| CSS (gzip) | — | 3.0KB | | +| HTML (gzip) | — | 4.4~4.8KB | | +| 폰트 패밀리 (판당) | 2개 | 2개 | 통과 | +| 첫 인터랙션 | 2초 | **미측정** | 배포 후 Lighthouse | +| LCP / CLS | 2.5초 / 0.1 | **미측정** | 배포 후 | +| three.js | 미사용 | 미사용 | — | + +**폰트 전략**: 경로가 `/` 와 `/en/` 으로 갈려 있으므로 레이아웃을 언어별로 나눠 **자기 폰트만 받는다.** 한국어판 Pretendard Variable(동적 서브셋) + JetBrains Mono, 영어판 Switzer + JetBrains Mono. preload 는 본문 폰트 1개만. + +## 채택한 이펙트와 폴백 + +| 이펙트 | 구현 | 폴백 | +|---|---|---| +| 스파인 진입 페이드 + 8px 상승 | `animation-timeline: view()`, JS 0 | 미지원 브라우저에서는 아무 일도 안 일어난다. 콘텐츠는 처음부터 visible | +| 복사 버튼 | 인라인 314B | 클립보드 권한 실패 시 텍스트를 선택 상태로 만들어 사용자가 직접 복사 | + +`prefers-reduced-motion: no-preference` 안에 `@supports (animation-timeline: view())` 로 이중 게이팅. + +## 5단계 감사 결과 + +- 하드 게이트: **정적 검사 가능한 8개 전부 통과.** 나머지 4개(가로 스크롤·버튼 줄바꿈·실렌더 대비·테마 반전)는 브라우저 측정 대기 +- 슬롭 지문 grep 9개 패턴: **0건** +- 카운트 규칙: 섹션 7 / eyebrow 3 (상한 3) / 마퀴 0 / h1 1 — 통과 + +감사 중 걸려서 고친 것 4건은 페이지의 "프리플라이트 로그" 섹션에 그대로 실려 있다. + +## 의도적으로 하지 않은 것과 그 이유 + +- **"Anti-Slop" 이라는 명명** — tasteskill 이 쓰는 말이다. 같은 단어를 쓰면 즉시 아류로 읽힌다 +- **경쟁 제품의 실측치를 페이지에 싣기** — 익명화는 저격을 예의 바르게 만들 뿐이고, 남의 수치는 반박 가능하다("그 40개는 대부분 nav다"). 논쟁이 시작되면 제품 이야기가 사라진다. **우리 수치만 쓴다** +- **GitHub 스타 등 인기 지표** — 우리는 숫자가 0이다. 인기 대신 규율을 증거로 쓴다 +- **스폰서·후원자 벽** — R1 은 페이지의 28%를 여기에 쓴다. 섹션 자체를 만들지 않는다 +- **다크를 기본값으로** — 브리프에 야간 사용·데이터 시각화 근거가 없다. 두 테마를 동등하게 정의하되 라이트로 시작한다 +- **three.js / WebGL** — 정적 사이트에 사진이 없고 인터랙션이 복사 버튼과 언어 전환뿐이다. 필터로도 낼 인상이 없다 +- **언어 자동 리다이렉트** — 사용자를 놀라게 한다. `hreflang` 으로 검색엔진에만 알린다 +- **국기 아이콘으로 언어 전환** — 언어는 국가가 아니다 +- **두 판을 번역으로 만들기** — 각 언어판을 따로 썼다. 한국어판은 "한글 조판 공백을 메운다"가 주장이므로 그 페이지 자체가 증명이어야 한다 + +## 다음 실행이 해야 할 일 + +1. **배포 후 Lighthouse 로 첫 인터랙션·LCP·CLS 를 재고, "이 페이지의 수치" 섹션의 `—` 를 채운다.** 채우기 전까지 그 항목은 비워둔다 +2. 브라우저로 나머지 하드 게이트 4개를 검사하고 `8/12` 를 갱신한다 +3. 폰트를 CDN 의존에서 자체 호스팅으로 옮길지 판단한다 (현재 jsDelivr · Fontshare · Google Fonts 3곳) +4. OG 이미지가 없다. 공유될 자리라면 만든다 + +--- + +`2026-08-20` · 초판. 0~6단계 전체 경로로 진행. diff --git a/apps/site/src/components/CopyCommand.astro b/apps/site/src/components/CopyCommand.astro new file mode 100644 index 0000000..1d9a149 --- /dev/null +++ b/apps/site/src/components/CopyCommand.astro @@ -0,0 +1,88 @@ +--- +interface Props { + command: string; + copyLabel: string; + copiedLabel: string; + note?: string; +} +const { command, copyLabel, copiedLabel, note } = Astro.props; +--- + +
    + {command} + +
    +{note &&

    {note}

    } + + + + diff --git a/apps/site/src/components/Hero.astro b/apps/site/src/components/Hero.astro new file mode 100644 index 0000000..103b60a --- /dev/null +++ b/apps/site/src/components/Hero.astro @@ -0,0 +1,48 @@ +--- +import CopyCommand from "./CopyCommand.astro"; +import type { Content } from "../i18n/content"; + +interface Props { + c: Content["hero"]; + ui: Content["ui"]; +} +const { c, ui } = Astro.props; +--- + +{/* 다크 밴드 두 곳 중 하나. 3단계 토큰이 규칙으로 정의했다(게이트 #4) */} +
    +
    +

    {c.h1}

    +

    {c.lead}

    + +

    + {c.links.map((l) => ({l.label}))} +

    +
    +
    + + diff --git a/apps/site/src/components/Install.astro b/apps/site/src/components/Install.astro new file mode 100644 index 0000000..ac9d23f --- /dev/null +++ b/apps/site/src/components/Install.astro @@ -0,0 +1,59 @@ +--- +import CopyCommand from "./CopyCommand.astro"; +import type { Content } from "../i18n/content"; + +interface Props { + c: Content["install"]; + ui: Content["ui"]; +} +const { c, ui } = Astro.props; +--- + +{/* 다크 밴드 두 곳 중 둘째. 그 외에는 쓰지 않는다 */} +
    +
    +

    {c.h2}

    +

    {c.lead}

    + + + +
    + + + { + c.targets.map((t) => ( + + + + + )) + } + +
    {t.name}{t.path}
    +
    + +
    + { + c.commands.map((x) => ( +
    +
    {x.cmd}
    +
    {x.what}
    +
    + )) + } +
    +
    +
    + + diff --git a/apps/site/src/components/Metrics.astro b/apps/site/src/components/Metrics.astro new file mode 100644 index 0000000..cdea281 --- /dev/null +++ b/apps/site/src/components/Metrics.astro @@ -0,0 +1,40 @@ +--- +import type { Content } from "../i18n/content"; + +interface Props { + c: Content["metrics"]; +} +const { c } = Astro.props; +--- + +
    +

    {c.eyebrow}

    +

    {c.h2}

    +

    {c.lead}

    + +
    + + + { + c.items.map((m) => ( + + + + + + )) + } + +
    {m.label}{m.value}{m.note}
    +
    + +

    {c.caveat}

    +
    + + diff --git a/apps/site/src/components/Pipeline.astro b/apps/site/src/components/Pipeline.astro new file mode 100644 index 0000000..3e3c8d3 --- /dev/null +++ b/apps/site/src/components/Pipeline.astro @@ -0,0 +1,152 @@ +--- +import type { Content } from "../i18n/content"; + +interface Props { + c: Content["pipeline"]; +} +const { c } = Astro.props; +--- + +{/* + 순서를 번호 없이 표현하는 세 층: + ① 시각 — 스파인 위의 위치가 순서를 만든다 (Beck 튜브맵) + ② 내용 — 같은 브리프가 단계마다 변해간다 (IKEA 조립 설명서) + ③ 의미 —
      — 화면에 번호는 없지만 보조기술은 "6개 중 n번째"로 읽는다 + role="list" 는 list-style:none 일 때 Safari/VoiceOver 가 목록 의미를 버리는 것을 되돌린다 +*/} +
      +

      {c.eyebrow}

      +

      {c.h2}

      +

      {c.lead}

      + +
      + {c.briefLabel} +

      {c.brief}

      +
      + +
        + { + c.stages.map((s) => ( +
      1. +

        {s.name}

        +

        {s.does}

        +

        {s.becomes}

        +
        2. + )) + } +
      + +

      {c.after}

      +
      + + diff --git a/apps/site/src/components/Preflight.astro b/apps/site/src/components/Preflight.astro new file mode 100644 index 0000000..18e094a --- /dev/null +++ b/apps/site/src/components/Preflight.astro @@ -0,0 +1,39 @@ +--- +import type { Content } from "../i18n/content"; + +interface Props { + c: Content["preflight"]; +} +const { c } = Astro.props; +--- + +
      +

      {c.h2}

      +

      {c.lead}

      + +
        + { + c.items.map((i) => ( +
      • +

        {i.caught}

        +

        {i.fixed}

        +
        • + )) + } +
      + + {c.note &&

      {c.note}

      } +
      + + diff --git a/apps/site/src/components/Rules.astro b/apps/site/src/components/Rules.astro new file mode 100644 index 0000000..4d98844 --- /dev/null +++ b/apps/site/src/components/Rules.astro @@ -0,0 +1,42 @@ +--- +import type { Content } from "../i18n/content"; + +interface Props { + c: Content["rules"]; +} +const { c } = Astro.props; +--- + +
      +

      {c.h2}

      +

      {c.lead}

      + +
      + { + c.items.map((r) => ( +
      +
      {r.rule}
      +
      {r.why}
      +
      + )) + } +
      +
      + + diff --git a/apps/site/src/components/Typography.astro b/apps/site/src/components/Typography.astro new file mode 100644 index 0000000..11249d8 --- /dev/null +++ b/apps/site/src/components/Typography.astro @@ -0,0 +1,75 @@ +--- +import type { Content } from "../i18n/content"; + +interface Props { + c: Content["typography"]; +} +const { c } = Astro.props; +--- + +
      +

      {c.eyebrow}

      +

      {c.h2}

      +

      {c.lead}

      +

      {c.body}

      + + {/* 주장을 글로 하지 않고 실물로 보여준다. 두 문단의 차이는 word-break 한 줄뿐이다 */} +
      +
      +

      {c.demoLabels[0]}

      +

      {c.demoText}

      +
      +
      +

      {c.demoLabels[1]}

      +

      {c.demoText}

      +
      +
      + +
        + {c.rules.map((r) => (
      • {r}
        • ))} +
      +
      + + diff --git a/apps/site/src/i18n/content.ts b/apps/site/src/i18n/content.ts new file mode 100644 index 0000000..e12db85 --- /dev/null +++ b/apps/site/src/i18n/content.ts @@ -0,0 +1,386 @@ +/** + * 두 언어판은 번역이 아니라 각각 따로 쓴 것이다. + * 특히 §5(조판)는 한국어판에서 주장이고 영어판에서 사례다 — 구조 자체가 다르다. + */ + +export interface Stage { + /** 단계 이름 */ + name: string; + /** 그 단계가 하는 일 한 줄 */ + does: string; + /** + * 같은 브리프 하나가 이 단계를 지나며 무엇으로 변하는가. + * 번호 대신 이 변화가 순서를 만든다 (IKEA 조립 설명서 방식). + */ + becomes: string; + /** becomes 를 코드로 보여줄 때 */ + mono?: boolean; +} + +export interface Metric { + label: string; + value: string; + note: string; +} + +export interface Rule { + rule: string; + why: string; +} + +export interface Content { + meta: { title: string; description: string }; + hero: { + h1: string; + lead: string; + install: string; + installNote: string; + links: { label: string; href: string }[]; + }; + pipeline: { + eyebrow: string; + h2: string; + lead: string; + briefLabel: string; + brief: string; + stages: Stage[]; + after: string; + }; + metrics: { eyebrow: string; h2: string; lead: string; items: Metric[]; caveat: string }; + preflight: { + eyebrow: string; + h2: string; + lead: string; + items: { caught: string; fixed: string }[]; + note: string; + }; + typography: { eyebrow: string; h2: string; lead: string; body: string; demoLabels: [string, string]; demoText: string; rules: string[] }; + rules: { eyebrow: string; h2: string; lead: string; items: Rule[] }; + install: { eyebrow: string; h2: string; lead: string; command: string; targets: { name: string; path: string }[]; commands: { cmd: string; what: string }[] }; + footer: { made: string; repo: string; license: string }; + ui: { copy: string; copied: string; skipToContent: string }; +} + +const STAGES_KO: Stage[] = [ + { + name: "브리프 게이트", + does: "무엇을·누구에게·제약을 세 줄로 압축한다. 규모를 판정해 경로를 고른다.", + becomes: "누구에게: 홈카페 3년차 이상. 산미와 로스팅 프로파일을 구분한다", + }, + { + name: "레퍼런스 조사", + does: "실제로 존재하는 사이트 3개를 서로 다른 층위에서 고른다. 구조·톤·디테일.", + becomes: "R2 = 독립 문학 출판사. 커피 업계 밖에서 톤을 가져온다", + }, + { + name: "방향 결정", + does: "레퍼런스를 하나의 축으로 합성한다. 감수할 리스크를 하나 고른다.", + becomes: "감상은 이름에만, 화면에는 수치만", + }, + { + name: "디자인 토큰", + does: "코드를 쓰기 전에 숫자를 정한다. 성능 예산도 여기서 확정한다.", + becomes: "--measure: 33em / --leading-normal: 1.7 / JS 예산 0KB", + mono: true, + }, + { + name: "구현", + does: "레이아웃 → 재질 → 입체 → 모션 순서로. 이펙트를 다 꺼도 완성돼 있어야 한다.", + becomes: '

      산미 8.5 · 바디 6.0 · 로스팅 라이트

      ', + mono: true, + }, + { + name: "프리플라이트", + does: "자기 결과물을 남의 것처럼 본다. 게이트 12개는 전부 '아니오'여야 한다.", + becomes: "게이트 12/12 통과 · 슬롭 지문 0건 · 320px 오버플로 31px → 수정", + mono: true, + }, +]; + +const STAGES_EN: Stage[] = [ + { + name: "Brief gate", + does: "Compress the brief into three lines: what, for whom, constraints. Pick a path by scope.", + becomes: "For whom: home baristas of 3+ years who can taste the roast profile", + }, + { + name: "Reference research", + does: "Pick three real sites at three different layers — structure, tone, detail.", + becomes: "R2 = an independent literary publisher. Tone comes from outside the category", + }, + { + name: "Direction", + does: "Synthesize the references into one axis. Choose exactly one risk worth taking.", + becomes: "Sentiment stays in the name. The screen carries numbers.", + }, + { + name: "Design tokens", + does: "Decide the numbers before writing code. The performance budget is fixed here too.", + becomes: "--measure: 65ch / --leading-normal: 1.55 / JS budget 0KB", + mono: true, + }, + { + name: "Build", + does: "Layout → surface → depth → motion. It must be finished with every effect switched off.", + becomes: "

      Acidity 8.5 · Body 6.0 · Light roast

      ", + mono: true, + }, + { + name: "Preflight", + does: "Read your own work as a stranger's. All twelve gates must answer no.", + becomes: "12/12 gates passed · 0 slop fingerprints · 31px overflow at 320px → fixed", + mono: true, + }, +]; + +export const ko: Content = { + meta: { + title: "designpaca — 웹 디자인 파이프라인 스킬", + description: + "AI 코딩 에이전트에게 웹 디자인을 순서대로 하게 만드는 스킬. 레퍼런스 조사부터 셀프 감사까지 여섯 단계. Claude Code · Codex · Cursor · Windsurf 에 한 줄로 설치한다.", + }, + hero: { + h1: "designpaca", + lead: + "에이전트에게 “예쁘게 만들어줘”라고 하면 자기가 아는 기본값을 쏟아낸다. 못 만들어서가 아니라 결정을 안 해서다. 이 스킬은 그 결정을 순서대로 강제한다.", + install: "npx designpaca", + installNote: "Node 20.11+ · 설치 대상을 감지해 골라준다", + links: [ + { label: "저장소", href: "https://git.chanpaca.net/yunchan/designpaca" }, + { label: "npm", href: "https://www.npmjs.com/package/designpaca" }, + ], + }, + pipeline: { + eyebrow: "여섯 단계", + h2: "브리프 한 줄이 검증된 페이지가 될 때까지", + lead: + "각 단계에는 통과 조건이 있다. 통과하지 못하면 다음으로 가지 않는다. 아래는 실제로 이 스킬을 돌려 만든 커피 로스터리 랜딩에서 같은 브리프가 단계마다 무엇으로 변했는지다.", + briefLabel: "들어온 브리프", + brief: "수제 커피 로스터리의 원두 정기구독 랜딩 만들어줘", + stages: STAGES_KO, + after: + "여섯 단계 끝에 남는 것은 페이지 하나와 design.md 하나다. 다음 사람이 그 파일을 읽고 같은 결정을 이어간다.", + }, + metrics: { + eyebrow: "이 페이지의 수치", + h2: "카피만 고쳐서는 슬롭이 없어지지 않는다", + lead: + "문장을 다듬는 것으로 해결되는 것은 문장뿐이다. radius 어휘 수, 반투명 패널 개수, 타입 단계 수는 그대로 남는다. 그래서 이 페이지 자신의 형태 수치를 공개한다. 결과가 나쁘게 나와도 그대로 싣는다.", + items: [ + { label: "radius 어휘 수", value: "2종", note: "3px · 6px. 그 외 값을 쓰지 않는다" }, + { label: "반투명 패널(backdrop-filter)", value: "0개", note: "실기기 FPS를 15~30% 깎는다" }, + { label: "타입 스케일 단계", value: "5단계", note: "디스플레이 1개는 스케일 밖에 따로 정의" }, + { label: "폰트 패밀리", value: "2개", note: "본문 1 + 코드용 모노 1. 언어판마다 자기 것만 받는다" }, + { label: "강조색", value: "1개", note: "딥 틸. 라이트·다크는 같은 색의 대응값이다" }, + { label: "히어로까지 JS", value: "314B", note: "gzip. 예산 50KB의 0.6%. 복사 버튼 하나뿐이다" }, + { label: "슬롭 지문 grep", value: "0건", note: "9개 패턴 검사" }, + { label: "하드 게이트", value: "8/12", note: "정적으로 검사 가능한 8개. 나머지 4개는 브라우저 측정 대기" }, + { label: "첫 인터랙션", value: "—", note: "미측정. 프로덕션 배포 후 Lighthouse 로 잰다" }, + ], + caveat: "값은 프로덕션 빌드에서 측정한다. 아직 측정하지 않은 항목은 비워둔다 — 지어낸 숫자보다 구멍이 정직하다.", + }, + preflight: { + eyebrow: "프리플라이트 로그", + h2: "이 페이지를 만들며 실제로 걸린 것", + lead: "남을 검사한 결과가 아니라 자신을 검사한 결과다.", + items: [ + { + caught: "eyebrow 라벨이 6개 — 카운트 규칙 상한은 ceil(섹션 7 / 3) = 3개", + fixed: "세 섹션만 남기고 나머지는 헤드라인만으로 구분했다. 라벨이 없어도 섹션은 읽힌다", + }, + { + caught: "스크롤 리빌에 clip-path 를 쓰려 했다 — 하드 게이트 8은 transform·opacity 만 허용한다", + fixed: "덮개를 translateX 로 미는 방식으로 바꿨다. 보이는 결과는 같고, clip-path 보간 제약도 함께 사라졌다", + }, + { + caught: "구분선 색의 대비가 1.30:1 — 장식선으로는 괜찮지만 입력 테두리로 쓰면 WCAG 1.4.11(3:1) 위반", + fixed: "6.11:1 짜리 별칭을 하나 더 두고 용도를 갈랐다. 새 색을 만든 게 아니라 팔레트 수는 그대로다", + }, + { + caught: "본문 컬럼이 960px — 우리가 정한 한 줄 길이(561px)를 넘는다", + fixed: "그리드의 본문 폭을 --measure 로 바꿨다. 스킬 문서의 예시 코드도 같이 고쳤다", + }, + ], + note: "네 건 모두 만들면서 걸린 것이고, 걸린 뒤에 고쳤다. 이 목록이 짧아 보인다면 그건 이 페이지가 작기 때문이다.", + }, + typography: { + eyebrow: "한글 조판", + h2: "라틴 기준으로 만든 도구는 한글에서 멈춘다", + lead: + "영어권 디자인 도구는 한글 조판 규칙을 갖고 있지 않다. 9~11px 텍스트는 라틴에서 라벨이지만 한글에서는 읽을 수 없다. line-height 1.5는 라틴에서 표준이지만 한글에서는 답답하다.", + body: + "가장 자주 깨지는 것은 줄바꿈이다. 기본값은 단어 중간에서 줄을 끊는다. 아래 두 문단은 같은 글자, 같은 폭, 같은 폰트다. 차이는 word-break 한 줄뿐이다.", + demoLabels: ["기본값", "keep-all"], + demoText: "원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.", + rules: [ + "word-break: keep-all — 없으면 단어가 아무 데서나 잘린다", + "line-height 1.6~1.8 — 라틴보다 넉넉하게", + "음수 자간 금지 — 한글은 이미 고정폭에 가까워 즉시 뭉개진다", + "한 줄 25~40자 — 라틴 기준 65~75자를 그대로 쓰면 너무 길다", + "한글 폰트를 지정하지 않는 것 자체가 완성도 미달 신호다", + ], + }, + rules: { + eyebrow: "규칙", + h2: "규칙마다 왜 그런지 적혀 있다", + lead: "근거 없는 금지는 지켜지지 않는다. 사용자가 명시적으로 요구하면 규칙보다 그쪽이 이긴다.", + items: [ + { rule: "레퍼런스 없이 시작하지 않는다", why: "머릿속 기본값에서 출발하면 결과는 그 카테고리의 평균이 된다." }, + { rule: "강조색은 하나다", why: "두 개가 필요하다고 느끼면 위계 설계가 실패한 것이다." }, + { rule: "대담함은 한 곳에만", why: "두 곳에서 소리치면 둘 다 죽는다." }, + { rule: "화려함은 4순위다", why: "심사 배점이 Design 40 / Usability 30 / Creativity 20 / Content 10이다." }, + { rule: "지어낸 수치를 쓰지 않는다", why: "숫자 모양의 구멍은 정직하고, 지어낸 숫자는 신뢰를 깎는다." }, + { rule: "이펙트를 다 꺼도 완성돼 있어야 한다", why: "그 상태가 모든 폴백의 기반이다. 무너지면 이펙트가 구조를 대신하고 있는 것이다." }, + ], + }, + install: { + eyebrow: "설치", + h2: "한 줄이면 된다", + lead: "설치 대상을 감지해 기본 선택해준다. 스킬 파일을 직접 고쳤다면 업데이트가 그 파일을 건드리지 않는다.", + command: "npx designpaca", + targets: [ + { name: "Claude Code", path: "~/.claude/skills/designpaca/" }, + { name: "Codex CLI", path: "~/.codex/skills/designpaca/" }, + { name: "Cursor", path: ".cursor/rules/designpaca.mdc" }, + { name: "Windsurf", path: ".windsurf/rules/designpaca.md" }, + { name: "AGENTS.md", path: "블록 주입 — 에이전트 무관" }, + ], + commands: [ + { cmd: "npx designpaca update", what: "최신 스킬로 갱신. 직접 고친 파일은 건너뛴다" }, + { cmd: "npx designpaca doctor", what: "설치 상태와 드리프트 진단" }, + { cmd: "npx designpaca uninstall", what: "매니페스트 기반 정확한 제거" }, + ], + }, + footer: { + made: "이 페이지는 designpaca 로 만들어졌다.", + repo: "git.chanpaca.net/yunchan/designpaca", + license: "MIT", + }, + ui: { copy: "복사", copied: "복사됨", skipToContent: "본문으로 건너뛰기" }, +}; + +export const en: Content = { + meta: { + title: "designpaca — a web design pipeline skill", + description: + "A skill that makes AI coding agents do web design in order — from reference research to self-audit, six stages. Installs into Claude Code, Codex, Cursor and Windsurf in one line.", + }, + hero: { + h1: "designpaca", + lead: + "Ask an agent to “make it look good” and it pours out the defaults it knows. Not because it can't do better — because nothing was decided. This skill forces those decisions, in order.", + install: "npx designpaca", + installNote: "Node 20.11+ · detects and preselects your install targets", + links: [ + { label: "Repository", href: "https://git.chanpaca.net/yunchan/designpaca" }, + { label: "npm", href: "https://www.npmjs.com/package/designpaca" }, + ], + }, + pipeline: { + eyebrow: "Six stages", + h2: "From one line of brief to a page that passed its own audit", + lead: + "Every stage has a pass condition. Fail it and you don't move on. Below is what one brief actually became at each stage, from a coffee roastery landing page built with this skill.", + briefLabel: "The brief that came in", + brief: "Build a subscription landing page for a small-batch coffee roastery", + stages: STAGES_EN, + after: + "What remains after six stages is one page and one design.md. The next person reads that file and continues the same decisions.", + }, + metrics: { + eyebrow: "This page, measured", + h2: "Fixing the copy does not remove the slop", + lead: + "Polishing sentences fixes sentences. The radius vocabulary, the translucent panels, the number of type steps all stay. So here are this page's own form metrics. If a number comes back badly, it ships as it is.", + items: [ + { label: "radius vocabulary", value: "2", note: "3px and 6px. Nothing else" }, + { label: "translucent panels (backdrop-filter)", value: "0", note: "costs 15–30% FPS on real devices" }, + { label: "type scale steps", value: "5", note: "the display size is defined outside the scale" }, + { label: "font families", value: "2", note: "one text + one mono. Each language loads only its own" }, + { label: "accent colours", value: "1", note: "deep teal. Light and dark are the same colour" }, + { label: "JS to first paint", value: "314B", note: "gzip. 0.6% of the 50KB budget. One copy button" }, + { label: "slop fingerprints", value: "0", note: "9 patterns checked" }, + { label: "hard gates", value: "8/12", note: "the 8 that are statically checkable. 4 await browser measurement" }, + { label: "time to interactive", value: "—", note: "not measured yet. Lighthouse, after deploy" }, + ], + caveat: "Measured on the production build. Unmeasured entries stay empty — a hole is more honest than an invented number.", + }, + preflight: { + eyebrow: "Preflight log", + h2: "What this page actually got caught on", + lead: "Not the result of auditing someone else. The result of auditing itself.", + items: [ + { + caught: "6 eyebrow labels — the count rule caps them at ceil(7 sections / 3) = 3", + fixed: "Kept three, dropped the rest. Sections read fine without a label above the heading", + }, + { + caught: "The scroll reveal used clip-path — hard gate 8 allows only transform and opacity", + fixed: "Switched to a cover pushed with translateX. Same result, and clip-path's interpolation limits went away with it", + }, + { + caught: "Divider colour sits at 1.30:1 — fine as decoration, a WCAG 1.4.11 failure as an input border", + fixed: "Added a 6.11:1 alias and split the two uses. No new colour, so the palette count is unchanged", + }, + { + caught: "The text column was 960px — wider than the measure we had just set (561px)", + fixed: "Bound the grid's main column to --measure. The skill's own example code was wrong too, so that got fixed as well", + }, + ], + note: "All four were caught while building this page, and fixed after being caught. If the list looks short, that is because the page is small.", + }, + typography: { + eyebrow: "Your language is probably not Latin", + h2: "Tools built on Latin assumptions stop at the script boundary", + lead: + "Design tooling written in English carries no rules for other scripts. 9–11px text is a label in Latin and unreadable in Korean. A line-height of 1.5 is standard in Latin and cramped in Korean.", + body: + "Line breaking fails first. The default breaks Korean mid-word — the equivalent of breaking English mid-syllable, in the middle of a sentence. Both paragraphs below use the same text, width and font. The only difference is one line of word-break.", + demoLabels: ["default", "keep-all"], + demoText: "원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.", + rules: [ + "word-break: keep-all — without it, words break at arbitrary points", + "line-height 1.6–1.8 — more generous than Latin needs", + "no negative letter-spacing — Korean glyphs are near-monospaced and collapse immediately", + "25–40 characters per line — Latin's 65–75 is far too long", + "not specifying a Korean font is itself a sign of unfinished work", + ], + }, + rules: { + eyebrow: "Rules", + h2: "Every rule states why", + lead: "A prohibition without a reason does not survive contact with a brief. If the user asks for it explicitly, the user wins.", + items: [ + { rule: "Never start without references", why: "Starting from memory produces the category average." }, + { rule: "One accent colour", why: "Wanting a second one means the hierarchy failed." }, + { rule: "Be bold in exactly one place", why: "Shout in two places and both go unheard." }, + { rule: "Spectacle ranks fourth", why: "Judging weights are Design 40 / Usability 30 / Creativity 20 / Content 10." }, + { rule: "Never invent a number", why: "A number-shaped hole is honest. An invented number costs trust." }, + { rule: "It must be finished with every effect off", why: "That state is the basis of every fallback. If it collapses, the effects were doing the structure's job." }, + ], + }, + install: { + eyebrow: "Install", + h2: "One line", + lead: "Targets are detected and preselected. If you edit a skill file yourself, updates leave it alone.", + command: "npx designpaca", + targets: [ + { name: "Claude Code", path: "~/.claude/skills/designpaca/" }, + { name: "Codex CLI", path: "~/.codex/skills/designpaca/" }, + { name: "Cursor", path: ".cursor/rules/designpaca.mdc" }, + { name: "Windsurf", path: ".windsurf/rules/designpaca.md" }, + { name: "AGENTS.md", path: "block injection — agent agnostic" }, + ], + commands: [ + { cmd: "npx designpaca update", what: "Pull the latest skill. Files you edited are skipped" }, + { cmd: "npx designpaca doctor", what: "Diagnose install state and drift" }, + { cmd: "npx designpaca uninstall", what: "Exact removal, driven by the manifest" }, + ], + }, + footer: { + made: "This page was built with designpaca.", + repo: "git.chanpaca.net/yunchan/designpaca", + license: "MIT", + }, + ui: { copy: "Copy", copied: "Copied", skipToContent: "Skip to content" }, +}; diff --git a/apps/site/src/layouts/Base.astro b/apps/site/src/layouts/Base.astro new file mode 100644 index 0000000..9f71a8b --- /dev/null +++ b/apps/site/src/layouts/Base.astro @@ -0,0 +1,116 @@ +--- +import "../styles/tokens.css"; +import "../styles/base.css"; + +interface Props { + lang: "ko" | "en"; + title: string; + description: string; +} +const { lang, title, description } = Astro.props; + +// 언어별로 자기 폰트만 받는다. 두 벌을 한 페이지에 로드하면 예산을 넘긴다. +const FONT_CSS = { + ko: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css", + en: "https://api.fontshare.com/v2/css?f%5B%5D=switzer@400,500,600&display=swap", +} as const; + +const alt = lang === "ko" ? "/en/" : "/"; +--- + + + + + + + {title} + + + + + + + + {/* 본문 폰트만 preconnect·preload 한다. 모노는 코드 블록에만 쓰인다 */} + + + + + + + + + + + + + +
      + designpaca + +
      + +
      + +
      + +
      + +
      + + + + diff --git a/apps/site/src/pages/en/index.astro b/apps/site/src/pages/en/index.astro new file mode 100644 index 0000000..8bdeb0c --- /dev/null +++ b/apps/site/src/pages/en/index.astro @@ -0,0 +1,28 @@ +--- +import Base from "../../layouts/Base.astro"; +import Hero from "../../components/Hero.astro"; +import Pipeline from "../../components/Pipeline.astro"; +import Metrics from "../../components/Metrics.astro"; +import Preflight from "../../components/Preflight.astro"; +import Typography from "../../components/Typography.astro"; +import Rules from "../../components/Rules.astro"; +import Install from "../../components/Install.astro"; +import { en as c } from "../../i18n/content"; +--- + + + + + + + + + + + +

      {c.footer.made}

      +

      + {c.footer.repo} · {c.footer.license} +

      +       + diff --git a/apps/site/src/pages/index.astro b/apps/site/src/pages/index.astro index 119515f..ea8ba67 100644 --- a/apps/site/src/pages/index.astro +++ b/apps/site/src/pages/index.astro @@ -1,19 +1,28 @@ --- -const version = "0.1.0"; +import Base from "../layouts/Base.astro"; +import Hero from "../components/Hero.astro"; +import Pipeline from "../components/Pipeline.astro"; +import Metrics from "../components/Metrics.astro"; +import Preflight from "../components/Preflight.astro"; +import Typography from "../components/Typography.astro"; +import Rules from "../components/Rules.astro"; +import Install from "../components/Install.astro"; +import { ko as c } from "../i18n/content"; --- - - - - - designpaca - - - -
      -

      designpaca

      -

      웹 디자인 파이프라인 스킬 — v{version}

      - npx designpaca -
      - - + + + + + + + + + + +

      {c.footer.made}

      +

      + {c.footer.repo} · {c.footer.license} +

      +       + diff --git a/apps/site/src/styles/base.css b/apps/site/src/styles/base.css new file mode 100644 index 0000000..595337d --- /dev/null +++ b/apps/site/src/styles/base.css @@ -0,0 +1,157 @@ +/* ============================================================ + designpaca 소개 페이지 — 기반 스타일 + 토큰은 tokens.css 에만 있다. 이 파일에 새 값을 만들지 않는다. + ============================================================ */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + -webkit-text-size-adjust: 100%; + scroll-behavior: smooth; +} +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } +} + +body { + margin: 0; + background: var(--surface); + color: var(--ink); + font-family: var(--font-sans); + font-size: var(--step-0); + line-height: var(--leading-normal); + letter-spacing: var(--tracking-body); + font-synthesis-weight: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; +} + +/* 한글은 단어 중간에서 끊지 않는다 */ +[lang="ko"] body, +[lang="ko"] p, +[lang="ko"] li, +[lang="ko"] h1, +[lang="ko"] h2, +[lang="ko"] h3 { + word-break: keep-all; + overflow-wrap: break-word; +} + +/* ---- 그리드 ------------------------------------------------ + main 폭은 3단계에서 정한 --measure 다. 고정값을 쓰지 않는다. + ----------------------------------------------------------- */ +.page { + display: grid; + grid-template-columns: + [full-start] minmax(var(--space-4), 1fr) + [wide-start] minmax(0, var(--space-8)) + [main-start] minmax(0, var(--measure)) [main-end] + minmax(0, var(--space-8)) [wide-end] + minmax(var(--space-4), 1fr) [full-end]; +} +.page > * { grid-column: main; } +.page > .wide { grid-column: wide; } +.page > .full { grid-column: full; } + +/* 섹션 안에서도 같은 그리드를 쓴다 — 정렬선이 페이지 전체에서 하나여야 한다 */ +.section { + display: grid; + grid-template-columns: subgrid; + grid-column: full; + padding-block: var(--space-7); +} +.section > * { grid-column: main; } +.section > .wide { grid-column: wide; } + +/* ---- 타이포 ------------------------------------------------ */ +h1, h2, h3 { + margin: 0; + line-height: var(--leading-tight); + letter-spacing: var(--tracking-display); + font-weight: 600; + text-wrap: balance; +} +h1 { font-size: var(--display); font-weight: 620; } +h2 { font-size: var(--step-3); } +h3 { font-size: var(--step-1); } + +p { margin: 0 0 var(--space-3); text-wrap: pretty; } +p:last-child { margin-bottom: 0; } + +.lead { + font-size: var(--step-1); + color: var(--ink-muted); +} + +/* eyebrow 는 새 크기를 만들지 않는다 — 본문 크기 + 자간 + muted */ +.eyebrow { + font-size: var(--step-0); + letter-spacing: var(--tracking-label); + color: var(--ink-muted); + font-weight: 500; + margin: 0 0 var(--space-3); +} + +code, kbd, samp, pre { + font-family: var(--font-mono); + font-size: var(--mono-size); +} + +a { + color: inherit; + text-underline-offset: 0.2em; + text-decoration-thickness: from-font; + transition: color var(--dur-instant) var(--ease-out); +} +a:hover { color: var(--accent); } + +/* 포커스는 어떤 이펙트보다 우선한다 */ +:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 3px; + border-radius: var(--radius-sm); +} + +hr { + border: 0; + border-top: 1px solid var(--line); + margin-block: var(--space-6); +} + +/* ---- 표 ---------------------------------------------------- */ +table { + border-collapse: collapse; + width: 100%; + font-variant-numeric: tabular-nums; +} +th, td { + text-align: left; + padding: var(--space-2) var(--space-3) var(--space-2) 0; + border-bottom: 1px solid var(--line); + vertical-align: baseline; +} +th { + font-weight: 500; + color: var(--ink-muted); + font-size: var(--step-0); + letter-spacing: var(--tracking-label); +} +/* 좁은 화면에서 표가 페이지를 밀지 않게 — 하드 게이트 #5 */ +.table-scroll { overflow-x: auto; } + +/* ---- 유틸 -------------------------------------------------- */ +.visually-hidden { + position: absolute; + width: 1px; height: 1px; + padding: 0; margin: -1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; +} + +.muted { color: var(--ink-muted); } +.mono { font-family: var(--font-mono); font-size: var(--mono-size); } diff --git a/apps/site/src/styles/tokens.css b/apps/site/src/styles/tokens.css new file mode 100644 index 0000000..e52a94d --- /dev/null +++ b/apps/site/src/styles/tokens.css @@ -0,0 +1,125 @@ +/* ============================================================ + designpaca 소개 페이지 — 디자인 토큰 + 프리셋: swiss-minimal / 비율 1.25 / 강조색 1개 / radius 2종 + ============================================================ */ + +:root { + /* ---- 폰트 패밀리 ---------------------------------------- */ + --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; + --mono-size: 0.9375em; /* 부모 대비. 새 스케일 단계를 만들지 않는다 */ + + /* ---- 색: 라이트 (기본) ----------------------------------- */ + --surface: #FAF9F6; /* 웜 오프화이트. 순백 아님 (A-07) */ + --surface-raised: #F2F0EA; + --surface-inverse: #14161A; /* 다크 밴드. 순흑 아님 */ + --ink: #16181C; /* 대비 16.88:1 */ + --ink-muted: #5A5F66; /* 대비 6.11:1 */ + --ink-inverse: #E9E7E2; /* 밴드 위 14.66:1 */ + --ink-muted-inverse: #9AA0A6; /* 밴드 위 6.86:1 */ + --line: #DFDCD4; /* 1.30:1 — 장식 구분선 전용 */ + --line-inverse: #2A2E34; /* 1.33:1 — 장식 구분선 전용 */ + --line-strong: var(--ink-muted); /* 입력·컨트롤 테두리. WCAG 1.4.11 (3:1) */ + --accent: #0E6B63; /* 딥 틸. 대비 6.04:1 */ + --accent-ink: #FFFFFF; /* 강조 위 글자. 6.36:1 */ + --accent-inverse: #3FA89D; /* 밴드 위 강조. 6.30:1 */ + + /* ---- 형태: radius 2종 (게이트 #3) ------------------------ */ + --radius-sm: 3px; /* 버튼·입력·배지 */ + --radius-md: 6px; /* 카드·코드 블록 */ + + /* ---- 간격 ------------------------------------------------ */ + --space-1: 0.25rem; /* 4 */ + --space-2: 0.5rem; /* 8 */ + --space-3: 1rem; /* 16 */ + --space-4: 1.5rem; /* 24 */ + --space-5: 2.5rem; /* 40 */ + --space-6: 4rem; /* 64 */ + --space-7: 6rem; /* 96 — 일반 섹션 상하 */ + --space-8: 8rem; /* 128 — 다크 밴드 상하. 본문 간격의 8배 */ + + /* ---- 모션 ------------------------------------------------ */ + --dur-instant: 100ms; /* 호버·포커스 */ + --dur-quick: 200ms; /* 작은 등장·퇴장 */ + --dur-normal: 320ms; /* 패널·전환. 2단계 상한 */ + --dur-slow: 600ms; /* 이 프로젝트에서는 사용하지 않는다 */ + + --ease-out: cubic-bezier(0.22, 1, 0.36, 1); + --ease-in: cubic-bezier(0.64, 0, 0.78, 0); + --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); + /* bounce·elastic 없음 (E-02) */ +} + +/* ---- 색: 다크 테마 — 라이트와 동등하게 정의 ------------------ */ +@media (prefers-color-scheme: dark) { + :root { + --surface: #14161A; + --surface-raised: #1C1F24; + --surface-inverse: #FAF9F6; /* 다크에서는 밴드가 밝아진다 */ + --ink: #E9E7E2; + --ink-muted: #9AA0A6; + --ink-inverse: #16181C; + --ink-muted-inverse: #5A5F66; + --line: #2A2E34; + --line-inverse: #DFDCD4; + --line-strong: var(--ink-muted); + --accent: #3FA89D; /* 6.30:1 */ + --accent-ink: #0B1A18; /* 6.21:1 */ + --accent-inverse: #0E6B63; + } +} + +/* ---- 타입: 한국어판 --------------------------------------- */ +[lang="ko"] { + --font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif; + + --step-0: 1.0625rem; /* 17 — 본문 · eyebrow · 코드 */ + --step-1: 1.328rem; /* 21.3 — 리드 */ + --step-2: 1.660rem; /* 26.6 — h3 */ + --step-3: 2.076rem; /* 33.2 — h2 */ + --step-4: 2.595rem; /* 41.5 — h1 */ + --display: clamp(2.595rem, 1.6rem + 4.2vw, 4.25rem); /* → 68 */ + + --leading-tight: 1.15; + --leading-normal: 1.7; /* 한글은 넉넉하게 */ + --measure: 33em; /* ≈ 561px. 한글 글자폭 ≈ 1em */ + + --tracking-display: -0.01em; /* 한글은 음수 자간을 크게 주지 않는다 */ + --tracking-body: 0; /* 한글 본문 음수 자간 금지 */ + --tracking-label: 0.08em; + + word-break: keep-all; + overflow-wrap: break-word; +} + +/* ---- 타입: 영어판 ------------------------------------------ */ +[lang="en"] { + --font-sans: "Switzer", system-ui, -apple-system, sans-serif; + + --step-0: 1rem; /* 16 */ + --step-1: 1.25rem; /* 20 */ + --step-2: 1.5625rem; /* 25 */ + --step-3: 1.953rem; /* 31.3 */ + --step-4: 2.441rem; /* 39 */ + --display: clamp(2.441rem, 1.5rem + 4vw, 4rem); /* → 64 */ + + --leading-tight: 1.1; + --leading-normal: 1.55; + --measure: 65ch; /* ≈ 640px */ + + --tracking-display: -0.025em; + --tracking-body: 0; + --tracking-label: 0.08em; +} + +/* ---- 다크 밴드: 게이트 #4가 요구하는 "규칙으로 정의된 반전" ---- */ +/* 사용처는 히어로와 설치 섹션 두 곳뿐이다. 그 외 사용 금지. */ +.band-inverse { + --surface: var(--surface-inverse); + --ink: var(--ink-inverse); + --ink-muted: var(--ink-muted-inverse); + --line: var(--line-inverse); + --accent: var(--accent-inverse); + background: var(--surface); + color: var(--ink); + padding-block: var(--space-8); +} diff --git a/packages/skill/references/layout.md b/packages/skill/references/layout.md index 87d59ed..2150e78 100644 --- a/packages/skill/references/layout.md +++ b/packages/skill/references/layout.md @@ -14,7 +14,7 @@ grid-template-columns: [full-start] minmax(var(--space-4), 1fr) [wide-start] minmax(0, 12rem) - [main-start] minmax(0, 60rem) [main-end] + [main-start] minmax(0, var(--measure)) [main-end] /* 3단계에서 정한 값이다 */ minmax(0, 12rem) [wide-end] minmax(var(--space-4), 1fr) [full-end]; } @@ -23,6 +23,10 @@ .page > .full { grid-column: full; } ``` +**`main` 폭에 고정값을 쓰지 마라.** `--measure` 는 3단계에서 언어와 폰트에 맞춰 정한 값이다. +여기에 60rem 같은 숫자를 넣으면 본문이 measure 를 넘어가 이 문서의 통과 조건을 스스로 어긴다. +한글은 보통 라틴보다 좁다(35ch ≈ 561px vs 640px). + 이 한 번의 정의로 **본문 폭 · 넓은 블록 · 전체 폭**이 전부 정렬된다. 섹션마다 `max-width` 와 `padding` 을 다시 쓰면 반드시 어긋난다. ### 비대칭을 두려워하지 마라 diff --git a/packages/skill/references/motion.md b/packages/skill/references/motion.md index 60c3aca..d5e7036 100644 --- a/packages/skill/references/motion.md +++ b/packages/skill/references/motion.md @@ -132,7 +132,7 @@ .btn { position: relative; isolation: isolate; background: var(--accent); color: var(--accent-ink); - border: 0; padding: 0.75rem 1.5rem; border-radius: var(--radius); + border: 0; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); transition: translate var(--dur-instant) var(--ease-out), scale var(--dur-instant) var(--ease-out); } @@ -246,7 +246,7 @@ if (matchMedia('(prefers-reduced-motion: reduce)').matches) { ```css .tip { - margin: 0; padding: 0.75rem 1rem; border: 0; border-radius: var(--radius); + margin: 0; padding: 0.75rem 1rem; border: 0; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); max-width: 18rem; /* 닫힌 상태 = 퇴장의 종착점 */ opacity: 0; translate: 0 var(--shift-sm); scale: 0.96;