소개 페이지 — 스킬을 스스로 적용해 만든 첫 사례

designpaca 파이프라인 0~6단계를 실제로 돌려 만들었다. 근거는 research/site-brief.md,
결정 기록은 apps/site/design.md 에 있다.

한 문장 컨셉
- 이 페이지는 designpaca 를 거쳐 만들어졌고, 절차와 형태 수치를 한국어 기준으로 전부 공개한다

번호 없이 순서 표현 (C-07 회피)
- 파이프라인 6단계를 번호로 매기면 검출률 3위 슬롭 지문에 걸린다
- 시각: 스파인 위 위치가 순서를 만든다 / 내용: 같은 브리프가 단계마다 변한다
- 의미: <ol role="list"> — 화면에 번호 0개, 보조기술에는 "6개 중 n번째"

멀티링구얼
- / = 한국어, /en/ = 영어. 번역이 아니라 각 판을 따로 썼다
- 언어별 레이아웃이 자기 폰트만 로드한다 (판당 2개)
- 조판 섹션은 한국어판에서 주장이고 영어판에서 사례다

실측
- JS 314B (gzip, 예산 50KB) / CSS 3.0KB / HTML 4.4~4.8KB
- radius 2종 · backdrop-filter 0개 · 타입 5단계 · 강조색 1개
- 슬롭 지문 grep 9패턴 0건, 정적 하드 게이트 8개 전부 통과

감사에서 걸려 고친 것
- eyebrow 6개 → 상한 ceil(7/3)=3 위반 → 3개로
- clip-path 리빌 → 게이트 #8 위반 → transform 으로 교정
- 구분선 대비 1.30:1 → 입력 테두리용 별칭 분리 (WCAG 1.4.11)
- 본문 컬럼 960px → --measure 로. layout.md 예시 코드도 같이 수정

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. **의미** — `<ol role="list">`. 시각적으로 번호 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단계 전체 경로로 진행.