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)
91 lines
5.7 KiB
Markdown
91 lines
5.7 KiB
Markdown
# design.md — Pulsegate
|
|
|
|
이 프로젝트를 다음에 이어받는 사람(또는 에이전트)이 읽는 파일이다. **여기 적힌 결정을 designpaca 기본값보다 우선한다.**
|
|
|
|
## 브리프 3줄
|
|
```
|
|
무엇을: API 모니터링 SaaS "Pulsegate" 랜딩 페이지 (단일 페이지)
|
|
누구에게: 백엔드/SRE 엔지니어. Datadog·Grafana 사용 중. 가격과 셋업 시간에 민감. 목표는 무료 체험 가입
|
|
제약: 영어 / React + Vite / 다크·라이트 둘 다 / 제품 스크린샷 있음 / 성능 예산 스킬 기본값
|
|
```
|
|
|
|
## 레퍼런스
|
|
| 슬롯 | 사이트 | 가져온 것 |
|
|
|---|---|---|
|
|
| R1 구조 | https://www.checklyhq.com | 컨테이너 폭, 여백 리듬(섹션:요소 = 1:4), 히어로에 실행 가능한 명령을 두는 관행 |
|
|
| R2 톤 | https://fitzcarraldoeditions.com | 강조색을 **링크 글자에만** 쓰는 규율, 전면 세리프, radius 2~5px |
|
|
| R3 디테일 | https://tympanus.net/codrops/2026/05/21/creating-scroll-driven-svg-map-animations-with-gsap/ | 스크롤-진행도 바인딩 개념 (**최종 미채택** — 하드게이트 #8 위반) |
|
|
|
|
## 한 문장 컨셉
|
|
**야간 당직실의 계기판 — 읽히도록 어둡고, 출판물처럼 조판된.**
|
|
|
|
## 프리셋
|
|
`dark-instrument`.
|
|
|
|
**다크를 기본으로 삼은 근거** (프리셋이 요구하는 정당화):
|
|
1. 청중이 온콜 SRE다 — 어두운 환경에서 본다
|
|
2. 제품 스크린샷이 다크 대시보드다 — 라이트 랜딩이면 스크린샷이 뜬다
|
|
|
|
라이트는 파생물이 아니라 **동등한 정의**로 작성했다(`tokens.css`에 값이 따로 있다).
|
|
적용 규칙: OS가 라이트를 선호하면 라이트, 그 외 다크. 토글이 있으면 토글이 이긴다.
|
|
|
|
## 감수한 리스크 하나
|
|
> **주 CTA에 강조색을 쓰지 않는다.** 잉크 반전(밝은 표면 + 어두운 글자)으로만 만들고, 코발트는 인라인 링크와 데이터 축에만.
|
|
|
|
- 철회 조건: 회색조 위계에서 CTA가 3위 밖으로 밀리면 즉시 강조색 투입
|
|
- 5단계 검사 결과 CTA는 2위 유지 → **철회하지 않음**
|
|
|
|
## 토큰
|
|
전문은 `hero/src/styles/tokens.css`. 요약:
|
|
- **타입**: 본문 스케일 비율 **1.250 / 5단계**(13·16·20·25·31). 디스플레이 2개는 **스케일 밖**(`--display-1` 44→64, `--display-2` 32→40). h1÷본문 = **4.0배**
|
|
- **폰트**: Newsreader(디스플레이) / IBM Plex Sans(본문) / IBM Plex Mono(코드·수치)
|
|
- **색**: surface 2단계 + ink 2단계 + line + accent 1개(코발트) + 상태 3색. 다크·라이트 각각 정의
|
|
- **간격**: 4px 그리드, `--space-1`~`8`, `--container: 70rem`
|
|
- **형태**: radius 2px / 4px **2종만**. 그림자 없음(표면 톤 차이로 깊이)
|
|
- **모션**: `tokens.md` 값 그대로
|
|
|
|
## 성능 예산과 실측
|
|
예산 원본은 `tokens.md` §5. 실측은 `05-preflight.md` §2.
|
|
|
|
| 항목 | 예산 | 실측 |
|
|
|---|---|---|
|
|
| 총 전송량 (첫 화면) | 1MB | **12.4KB** |
|
|
| WebGL 추가분 | +200KB | **0KB** |
|
|
| CLS | 0.1 | 구조적 0 (`aspect-ratio` + `width/height`) |
|
|
| **JS gzip** | 150KB | **미측정** |
|
|
| **LCP / 첫 인터랙션** | 2.5초 / 3초 | **미측정** |
|
|
| 폰트 파일 | 2개 이하 | **3종 (초과)** — 디스플레이는 h1 전용 서브셋, Mono는 400 단일 웨이트 |
|
|
|
|
## 채택한 이펙트와 그 폴백
|
|
| 이펙트 | 폴백 |
|
|
|---|---|
|
|
| SVG 필터 | **미채택.** `dark-instrument`는 그레인 금지, "재질을 거의 안 쓴다" |
|
|
| three.js / WebGL | **미채택.** `three.md` §0 게이트 조건 1에서 탈락 — 필요한 것이 플랫 표면과 SVG 선뿐이라 CSS로 충분 |
|
|
| 모션 | **거의 없음.** CTA·버튼 hover의 `translateY(-1px)`만. `prefers-reduced-motion`에서 1ms로 축소 |
|
|
| 테마 토글 | JS 실패 시 OS 설정을 따르는 CSS 경로가 그대로 남는다 |
|
|
| 복사 버튼 | JS 실패 시 명령 텍스트가 선택 가능한 `<code>`로 남는다 |
|
|
|
|
## 미확정 — 다음 사람이 채워야 할 것
|
|
- `{{REGION_COUNT}}` — 실제 리전 수. **지어내지 않았다**(하드게이트 #11)
|
|
- 과금 모델("호스트 무료, 체크 과금")이 실제 제품 사실인지 확인 필요. 헤드라인 전체가 여기 걸려 있다
|
|
- 제품 스크린샷 실제 파일 (`/product-checks.png`가 placeholder)
|
|
- 빈 상태·오류 상태·로딩 상태
|
|
- 2~6번 섹션 (반론 처리 → 실제 화면 → 가격 → 마이그레이션 → 최종 CTA)
|
|
|
|
## 의도적으로 하지 않은 것과 그 이유
|
|
**이 절이 가장 중요하다. 적어두지 않으면 다음 사람이 "빠뜨린 것"으로 착각하고 되돌린다.**
|
|
|
|
| 안 한 것 | 이유 |
|
|
|---|---|
|
|
| **로고월** | 검증 가능한 고객 실명이 없다. `antipatterns.md` §4 — 회색조 로고 일렬은 신뢰를 깎는다 |
|
|
| **후기 섹션** | 실명·직함·원문 링크가 없다. 없으면 넣지 않는다 |
|
|
| **FAQ** | 실제로 받은 질문이 없다. 가상 질문 FAQ는 지문이다 |
|
|
| **3열 피처 카드** | `antipatterns.md` §3 — 콘텐츠가 3개여서가 아니라 3이 예쁘게 떨어져서 3인 것 |
|
|
| **지표 배너** (`99.9% uptime` 등) | 브리프가 수치를 주지 않았다. 하드게이트 #11 |
|
|
| **펄스 상태 점** | 모니터링 제품의 최대 유혹. 정적 정보에 장식 애니메이션은 금지 |
|
|
| **터미널 목업 div** | 하드게이트 #12. 실제 스크린샷을 쓴다 |
|
|
| **스크롤 애니메이션** | R3에서 가져오려 했으나 `stroke-dashoffset` 애니메이션이 하드게이트 #8(transform/opacity만) 위반. GSAP 60KB도 예산의 40% |
|
|
| **Inter** | R1(Checkly)이 Inter지만 `antipatterns.md` §2가 "이유 없는 Inter"를 금지 |
|
|
| **CTA 2개 나란히** | 주 행동을 정하지 못했다는 신호. 보조는 텍스트 링크로 격하 |
|
|
|
|
> 근거: research/dogfood-saas/01~05 (작업일 2026-08-20)
|