5240lab Harness

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

Implementation Plan: 사이트 타이포그래피 스케일 조정

타이포그래피 조정의 기술 계획.

Branch: agent/ahp-system | Date: 2026-08-15 | Spec: spec.md

Input: Feature specification from /specs/002-site-typography-scale/spec.md

Summary

전체 공개 사이트의 과도한 제목 크기를 승인된 B안으로 조정한다. 공통 본문과 H1·H2·H3 스케일은 전역 스타일에서 375px 최소값과 1440px 최대값을 잇는 유동형 크기로 정의하고, 히어로 리드와 성숙도 점수처럼 페이지 역할에 종속된 크기는 기존 페이지별 스타일에서 조정한다. 작은 라벨·내비게이션·배지·메타데이터·코드 크기는 보존하고, 실제 계산 스타일과 반응형 넘침을 브라우저에서 검증한다.

Technical Context

Language/Version: TypeScript 5.9.x, CSS, Node.js 24.18.0

Primary Dependencies: Next.js 16.3.0 App Router, React 19.2.8, React DOM 19.2.8

Storage: N/A — 정적 표현 변경이며 데이터 모델과 영속 저장소를 추가하지 않음

Testing: Node test runner + tsx, Playwright 1.62.1, axe-core, TypeScript, ESLint, Next.js production build

Target Platform: 최신 Chromium 계열 브라우저, 375px~1440px 화면, Nginx/systemd Linux 배포

Project Type: 공개 읽기 전용 Next.js 웹 애플리케이션

Performance Goals: 새 런타임 JavaScript와 네트워크 요청을 추가하지 않고 기존 정적 렌더·번들 기준 유지

Constraints: 기존 콘텐츠·DOM·색상·간격·레이아웃·기능 유지, H1 40~72px, H2 28~44px, H3 18~22px, 본문 16~17px, 리드 17~20px, 점수 56~96px, 375/768/1440px 및 200% 확대에서 손실 없음

Scale/Scope: 핵심 공개 경로 4개와 404, 타이포그래피 역할 6개, 전역 CSS 1개와 페이지 CSS 모듈 3개, 디자인 시스템 문서와 브라우저 테스트

Constitution Check

GATE: Phase 0 이전 및 Phase 1 설계 후 재검토 — PASS.

  • 근거 우선 — PASS: 사이트의 적용 근거 데이터와 공개 스냅샷을 변경하지 않는다. 시각 변경 주장은 계산 스타일과 화면별 브라우저 검증 결과로 입증한다.
  • 명세 선행 — PASS: 승인된 브레인스토밍 설계, spec.md, 본 계획과 후속 tasks.md를 구현 전에 완성하며 명세 커밋 게이트에서 중단한다.
  • 테스트 우선 — PASS: 승인된 크기 범위를 검사하는 실패 브라우저 테스트를 먼저 추가하고 RED → GREEN → REFACTOR 순서를 따른다.
  • 매뉴얼 포함 — PASS: 공개 가이드 내용과 운영 절차에는 영향이 없어 manual-impact: none이며, 변경된 타이포그래피 기준은 디자인 시스템 문서에 동기화한다.
  • 공개 경계 — PASS: 런타임 데이터, 파일 접근, 자격 증명과 서비스 권한을 변경하지 않는다.
  • 접근성 — PASS: 작은 텍스트의 기존 최소값을 보존하고 375px~1440px, 200% 확대, 다크 모드와 인쇄 화면을 확인한다.
  • 배포 안전 — PASS: 기존 전체 검증과 배포 절차를 그대로 사용하며 새 운영 의존성을 추가하지 않는다.

Phase 1 설계 후에도 새 데이터·인터페이스·권한·런타임 의존성이 없고, CSS 역할별 계약과 검증 경계가 구체화되었으므로 모든 헌법 게이트는 계속 PASS다.

Evidence and Manual Synchronization

  • Evidence source boundary: 근거 원본, 공개 스냅샷과 검증기 경계는 변경하지 않는다.
  • Evidence validation: 기존 verify:evidence, verify:content, verify:manual 게이트를 회귀 검사로 실행한다.
  • Documentation impact: 공개 /guide 내용과 운영자 매뉴얼은 manual-impact: none; design-system/5240lab-harness/MASTER.md의 타이포그래피 기준만 구현과 함께 갱신한다.
  • Manual validation: 375px·768px·1440px 네 경로 화면, 200% 확대, 다크 모드와 인쇄 매체를 확인하고 디자인 시스템 수치와 계산 스타일을 대조한다.
  • Coordinated release: 스타일, 디자인 시스템 문서와 테스트를 한 릴리스로 묶어 전체 verify 및 기존 HTTPS 스모크·롤백 절차를 적용한다.

Project Structure

Documentation (this feature)

specs/002-site-typography-scale/
├── spec.md
├── plan.md
├── research.md
├── data-model.md
├── quickstart.md
├── contracts/
│   └── typography-ui-contract.md
├── checklists/
│   └── requirements.md
└── tasks.md

Source Code (repository root)

app/
├── globals.css
├── guide/guide.module.css
├── 5240lab/evidence.module.css
└── roadmap/roadmap.module.css
design-system/5240lab-harness/
└── MASTER.md
tests/browser/
├── typography.spec.ts
└── responsive.spec.ts

Structure Decision: 현재 App Router 구조를 유지한다. 진짜 전역 역할은 app/globals.css에서, 페이지 의미에 종속된 리드·점수 예외는 기존 CSS 모듈에서 관리한다. 새 React 컴포넌트나 런타임 로직은 만들지 않는다. 계산된 글자 크기를 브라우저에서 관찰하는 전용 계약 테스트를 추가하고 기존 반응형 검사를 확장한다.

Complexity Tracking

헌법 예외가 없으므로 기록할 위반 사항이 없다.