# 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)