yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
designpaca/research/dogfood-saas/05-preflight.md
Yun Chan 8808c672dc designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인 
웹 디자인 파이프라인 스킬과 이를 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)
2026-08-20 10:48:00 +09:00

9.3 KiB
Raw Blame History

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. 콘텐츠

  • 히어로가 무엇인지 말한다 — "watches your endpoints", "pages you"
  • 로렘입숨 없음
  • 실제 콘텐츠 길이 미검증 — {{REGION_COUNT}}가 placeholder다. 실제 값이 두 자리면 서브 문장이 한 줄 늘어난다
  • 빈/오류/로딩 상태 없음 — 히어로만 만들었으므로 범위 밖. 후속 필수
  • 링크 텍스트가 목적지를 말함 ("See how billing is calculated")
  • 이미지 실패 시 레이아웃 유지 (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. 최종 게이트

  • 0장 기계 검사 3종 통과
  • 접근성 표 전 항목 통과
  • 성능 예산 — JS/LCP/TTI 3개 미측정. 빌드 환경 확보 후 재검 필요
  • 반응형 체크리스트 통과 (실패 2건 수정 후)
  • 콘텐츠 — 빈/오류/로딩 상태 없음 (히어로 범위 밖)
  • 5장 여섯 질문 정직하게 답함
  • antipatterns 자가 채점표 통과

판정: 조건부 통과. 미측정 3항목과 상태 화면 부재를 남긴 채로는 출시 불가.