문서 / specs/002-site-typography-scale/quickstart.md

Quickstart: 타이포그래피 스케일 검증

타이포그래피 변경을 확인하는 절차.

사전 조건

  • 프로젝트 루트: <프로젝트 루트>
  • npm install이 완료된 Node.js 24.18.0 환경
  • Playwright Chromium 설치 완료

1. 타이포그래피 계약 RED 확인

구현 전 새 계약 테스트가 현재 대형 스케일 때문에 실패하는지 확인한다.

npx playwright test tests/browser/typography.spec.ts tests/browser/responsive.spec.ts

H1·H2·리드·성숙도 점수 중 기존 최대값을 사용하는 검사가 실패해야 한다.

2. 최소 구현 후 집중 검증

npx playwright test tests/browser/typography.spec.ts tests/browser/responsive.spec.ts
npm run test
npm run typecheck
npm run lint

계산 크기는 타이포그래피 UI 계약을 따르고, 모든 집중 검사가 통과해야 한다.

3. 전체 릴리스 검증

npm run build
npm run test:browser
npm run verify

production build를 포함한 기존 전체 게이트가 모두 통과해야 한다.

4. 수동 화면 확인

다음 경로를 375px, 768px, 1440px와 브라우저 200% 확대에서 확인한다.

  • /
  • /guide
  • /5240lab
  • /roadmap
  • /this-route-does-not-exist

제목 줄바꿈, 텍스트 clipping, 카드 경계, 가로 스크롤, 작은 보조 텍스트와 강조 점수의 위계를 확인한다. 다크 모드와 인쇄 미리보기에서도 글자 크기가 달라지지 않아야 한다.