designpaca/apps/site/design.md

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단계 전체 경로로 진행.