8808c672dc
웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포. 스킬 (packages/skill) - SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로 본문은 절차와 인덱스만, 지식은 references/ 로 분리 - 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기 - 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외 - 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙, SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침 설치 CLI (packages/cli, packages/core) - npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md - 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다 - 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성 - AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입 - Windsurf 는 12,000자 상한 초과 시 설치를 차단 배포 (build/ci, .forgejo/workflows) - 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러 → draft 릴리스 → Cloudflare Pages. 재실행 멱등 근거 (research/) - 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다 테스트 22개 통과 (core 16 · cli 6)
159 lines
9.3 KiB
Markdown
159 lines
9.3 KiB
Markdown
# 5단계 — 프리플라이트 감사 (히어로 실측)
|
||
|
||
측정 대상: `hero/preview.html` + `hero/src/styles/*.css` (Hero.jsx와 동일 CSS, 마크업 복제)
|
||
도구: Playwright(Chromium), `tools/contrast.mjs`
|
||
|
||
---
|
||
|
||
## 0. 기계 검사 3종
|
||
|
||
### A. 이펙트 전부 끄기 — **통과**
|
||
`filter/backdrop-filter/animation/transition/transform` 전부 무력화한 상태에서:
|
||
- h1 렌더 높이 > 0 ✓ / CTA 렌더 높이 > 0 ✓
|
||
- 본문 텍스트 그대로 읽힘 ✓
|
||
- 구조 유지 (그리드는 이펙트가 아님)
|
||
|
||
### B. 슬롭 지문 grep — **통과 (1건 검출 후 해소)**
|
||
16개 패턴 중 **1건 검출**: `Space Grotesk|Instrument Serif|Geist` ← `Instrument Serif` 사용.
|
||
→ `Newsreader`(OFL, 다른 파운드리)로 교체. **재검 0건.**
|
||
*주의: antipatterns §2 산문은 "이 셋의 3종 조합"만 지문이라 하고 "셋 중 하나만 쓰라"고 허용한다. §9 grep은 OR이라 단독 사용도 잡는다 → FINDINGS D-3*
|
||
|
||
### C. 카피 경쟁사 치환 — **통과**
|
||
|
||
| 문장 | Datadog으로 치환하면 | 판정 |
|
||
|---|---|---|
|
||
| "Add every host you want. You pay for checks." | 거짓 (Datadog은 호스트 과금) | **통과** |
|
||
| "…pages you when latency drifts. No agents to install." | 거짓 (Datadog은 에이전트 필요) | **통과** |
|
||
| CTA "Start the free trial" | 성립함 | **경계** — 금지어(`Get Started`/`Learn More`)는 아니지만 결과를 말하지 않는다. 후속에서 "Start monitoring free"로 검토 |
|
||
|
||
---
|
||
|
||
## 1. 접근성
|
||
|
||
| 항목 | 실측 | 판정 |
|
||
|---|---|---|
|
||
| 키보드 도달 | 6개 인터랙티브 전부 순회. Tab 순서 = 시각 순서 (Pricing → Docs → Dark → CTA → billing → Copy) | 통과 |
|
||
| 포커스 표시 | `outline: 2px solid var(--accent)` + offset 3px, `:focus-visible` | 통과 |
|
||
| 대비 | `tools/contrast.mjs` — 다크·라이트 **20항목 전부 4.5:1 이상**. 최저 다크 `--fail` 4.99:1 / 라이트 `--warn` 4.78:1 | 통과 |
|
||
| 이미지 대체텍스트 | `<img>` 1개, 의미 있는 alt 있음, `width/height` 지정 | 통과 |
|
||
| 폼 레이블 | 폼 없음 | N/A |
|
||
| 제목 구조 | h1 1개, 건너뜀 없음 | 통과 |
|
||
| 모션 감소 | `prefers-reduced-motion` 블록 있음. 애초에 위치 이동·자동재생 없음 | 통과 |
|
||
| 자동재생 | 없음 | 통과 |
|
||
| 캔버스/WebGL 실패 | WebGL 미채택. JS 꺼도 텍스트·레이아웃 유지(테마 토글·복사만 비활성) | 통과 |
|
||
|
||
**색만으로 정보 전달 안 함**: 링크는 밑줄 병행. 상태색은 이번 히어로에 미사용.
|
||
|
||
---
|
||
|
||
## 2. 성능 — 예산은 `tokens.md` §5
|
||
|
||
| 항목 | 예산 | 실측 | 판정 |
|
||
|---|---|---|---|
|
||
| 히어로까지 JS (gzip) | 150KB | **미측정** — Vite 빌드 미실행(환경에 미설치). preview는 JS 0바이트 로드, React 버전은 react+react-dom ≈ 45KB gz **추정** | **미검증** |
|
||
| WebGL/3D 추가분 | +200KB | **0KB** (4-3에서 미채택) | 통과 |
|
||
| 총 전송량 (첫 화면) | 1MB | **12.4KB** (문서 2.9K + CSS 9.5K + 이미지 placeholder) | 통과 |
|
||
| 첫 인터랙션 (모바일 4G) | 3초 | **미측정** (스로틀링 환경 없음) | **미검증** |
|
||
| LCP | 2.5초 | **미측정** | **미검증** |
|
||
| CLS | 0.1 | `aspect-ratio` + `width/height`로 이미지 자리 확보. 지연 삽입 요소 없음 → **구조적으로 0** | 통과(추론) |
|
||
| 폰트 파일 수 | 2개 이하 | **3종 선언**(Newsreader / Plex Sans / Plex Mono), 실제 로드 0(시스템 폴백). 서브셋 계획은 03-tokens §6 | **초과, 사유 명시** |
|
||
|
||
**정직하게**: JS·LCP·TTI 3개는 **측정하지 못했다.** `preflight.md`가 "측정하지 않았으면 통과가 아니다"라고 했으므로 이 셋은 **미통과 상태로 남긴다.** 빌드 파이프라인이 생기면 재측정해야 한다.
|
||
|
||
---
|
||
|
||
## 3. 반응형 (실측)
|
||
|
||
| 항목 | 실측 | 판정 |
|
||
|---|---|---|
|
||
| 320px 가로 스크롤 | 1차 **실패** (`.theme-toggle`가 nav flex에서 밀림, scrollW 318 > clientW 305) → `flex-wrap: wrap` 적용 후 **scrollW 305 = clientW 305** | 수정 후 통과 |
|
||
| 1920px 늘어짐 | `--container: 70rem` 상한 | 통과 |
|
||
| 중간 뷰포트 768~1024 | `max-width: 54rem`에서 1열 전환 | 통과 |
|
||
| 터치 타깃 44×44 | 1차 **실패 5건** (Pricing 40×21, Docs 29×21, Dark 61×30, billing 링크 207×25, Copy 62×30) → `min-height/min-width: 44px` 적용 후 **0건** | 수정 후 통과 |
|
||
| 호버 전용 기능 | 없음 | 통과 |
|
||
| 긴 단어 넘침 | 영문 짧은 단어. `{{REGION_COUNT}}`도 넘치지 않음 | 통과 |
|
||
|
||
---
|
||
|
||
## 4. 콘텐츠
|
||
|
||
- [x] 히어로가 무엇인지 말한다 — "watches your endpoints", "pages you"
|
||
- [x] 로렘입숨 없음
|
||
- [ ] **실제 콘텐츠 길이 미검증** — `{{REGION_COUNT}}`가 placeholder다. 실제 값이 두 자리면 서브 문장이 한 줄 늘어난다
|
||
- [ ] **빈/오류/로딩 상태 없음** — 히어로만 만들었으므로 범위 밖. 후속 필수
|
||
- [x] 링크 텍스트가 목적지를 말함 ("See how billing is calculated")
|
||
- [x] 이미지 실패 시 레이아웃 유지 (`aspect-ratio` + `--surface-raised` 배경)
|
||
|
||
---
|
||
|
||
## 5. 하드 게이트 12개 — 전부 "아니오"여야 한다
|
||
|
||
| # | 질문 | 답 | 근거 |
|
||
|---|---|---|---|
|
||
| 1 | 토큰 밖 인라인 색상/폰트가 있는가 | **아니오** | 모든 색·폰트가 `tokens.css` 변수. grep으로 hex 0건 |
|
||
| 2 | 강조색이 2개 이상인가 | **아니오** | 코발트 1개. 상태색 3개는 tokens.md 정의상 기능색 |
|
||
| 3 | 코너 반경이 규칙 없이 섞였는가 | **아니오** | `--radius-sm: 2px` / `--radius-md: 4px` 2종만 |
|
||
| 4 | 페이지 중간에 테마가 뒤집히는가 | **아니오** | 단일 테마, 토글로만 전환 |
|
||
| 5 | 320~1920 어느 폭에서 가로 스크롤이 생기는가 | **아니오** (수정 후) | 320px 실측 scrollW = clientW |
|
||
| 6 | 버튼·내비 라벨이 2줄로 접히는 폭이 있는가 | **아니오** | CTA `white-space: nowrap`, nav는 wrap으로 줄바꿈 대신 행 이동 |
|
||
| 7 | 버튼 대비가 4.5:1 미만인가 | **아니오** | 다크 15.58:1 / 라이트 16.91:1 |
|
||
| 8 | transform/opacity 외를 애니메이션하는가 | **아니오** | 브라우저에서 non-zero duration 전수 검사 → 0건 |
|
||
| 9 | `100vh`를 썼는가 | **아니오** | `min(84dvh, 46rem)`. 스타일시트 전문에 `100vh` 0건, `dvh` 검출 |
|
||
| 10 | `scroll` 리스너를 썼는가 | **아니오** | 스크롤 관련 JS 없음 |
|
||
| 11 | 사용자가 주지 않은 수치가 있는가 | **아니오** | 브리프가 수치를 주지 않아 `{{REGION_COUNT}}` placeholder로 둠 |
|
||
| 12 | div로 만든 가짜 스크린샷이 있는가 | **아니오** (수정 후) | 초안의 `.gauge` div 목업을 발견해 `<img>`로 교체 |
|
||
|
||
## 카운트 규칙
|
||
|
||
| 규칙 | 실측 | 판정 |
|
||
|---|---|---|
|
||
| eyebrow 라벨 ≤ ceil(섹션/3) | **0개** | 통과 |
|
||
| 동일 이미지+텍스트 스플릿 연속 ≤ 2 | 1회 | 통과 |
|
||
| 마퀴 ≤ 1 | 0 | 통과 |
|
||
| 섹션 6개 이상이면 레이아웃 패밀리 3개 | 히어로만 구현 | N/A |
|
||
| 히어로 헤드라인 ≤ 2줄 | 1440px에서 2줄, 320px에서 4줄 | **경계** — 모바일에서 4줄. `text-wrap: balance` 적용했으나 44px에서 문장이 길다 |
|
||
| 서브텍스트 ≤ 20단어 | **17단어** | 통과 |
|
||
| 히어로 텍스트 요소 ≤ 4개 | h1 / sub / CTA+보조링크 / install = **4** (보조링크를 CTA와 한 묶음으로 셈) | **경계** — 보조링크를 별개로 세면 5 |
|
||
|
||
---
|
||
|
||
## 6. 디자인 자체 (정직하게)
|
||
|
||
1. **다른 회사 것으로 바꿔도 쓸 수 있는가?** → **아니오.** 헤드라인이 과금 모델을 주장하고 있어 호스트 과금 경쟁사가 못 쓴다
|
||
2. **한 문장 컨셉이 화면에 보이는가?** → **부분적으로.** "계기판"은 모노스페이스 명령 블록과 `tabular-nums`로만 드러난다. 제품 스크린샷이 placeholder라 계기판 인상의 절반이 비어 있다
|
||
3. **감수한 리스크가 실제로 들어갔는가?** → **예.** CTA가 강조색 없이 잉크 반전이다. 회색조 위계 검사에서 CTA가 2위를 유지해 철회 조건에 걸리지 않았다
|
||
4. **R2(다른 업종 톤)의 흔적이 있는가?** → **예.** 디스플레이 세리프, 강조색을 링크 글자에만, radius 2~4px
|
||
5. **강조색이 하나인가?** → **예**
|
||
6. **여백이 의도적인가?** → **예.** 섹션 160 : 요소 24 = 1:6.7, 히어로에서 실제 사용 4종
|
||
|
||
---
|
||
|
||
## 7. antipatterns 자가 채점표
|
||
|
||
| 카테고리 | 걸린 항목 | 조치 |
|
||
|---|---|---|
|
||
| 0 최우선 3종 | 0 | — |
|
||
| 1 컬러 | 0 | — |
|
||
| 2 타이포 | 1 (`Instrument Serif` grep) | Newsreader로 교체 후 0 |
|
||
| 3 레이아웃 | 0 | — |
|
||
| 4 컴포넌트 | 0 | — |
|
||
| 5 모션 | 0 (모션 없음) | — |
|
||
| 6 카피 | 1 경계 (CTA가 결과를 말하지 않음) | 후속 검토로 남김 |
|
||
| 7 이미지 | 0 | — |
|
||
| 8 한글 조판 | N/A (영문 브리프) | — |
|
||
|
||
**최종 걸린 개수: 1 (경계)** → 판정 **통과** (0–1)
|
||
|
||
---
|
||
|
||
## 8. 최종 게이트
|
||
|
||
- [x] 0장 기계 검사 3종 통과
|
||
- [x] 접근성 표 전 항목 통과
|
||
- [ ] **성능 예산 — JS/LCP/TTI 3개 미측정. 빌드 환경 확보 후 재검 필요**
|
||
- [x] 반응형 체크리스트 통과 (실패 2건 수정 후)
|
||
- [ ] **콘텐츠 — 빈/오류/로딩 상태 없음 (히어로 범위 밖)**
|
||
- [x] 5장 여섯 질문 정직하게 답함
|
||
- [x] antipatterns 자가 채점표 통과
|
||
|
||
**판정: 조건부 통과.** 미측정 3항목과 상태 화면 부재를 남긴 채로는 출시 불가.
|