5240lab Harness

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

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

타이포그래피 조정의 작업 목록.

Input: Design documents from /specs/002-site-typography-scale/

Prerequisites: plan.md, spec.md, research.md, data-model.md, contracts/, quickstart.md

Tests: 헌법과 기능 명세가 TDD 및 계산 스타일·반응형 브라우저 검증을 요구한다.

Organization: 작업은 사용자 스토리별로 묶고, 각 구현보다 실패 테스트를 먼저 실행한다.

Format: [ID] [P?] [Story] Description

  • [P]: 다른 파일에서 선행 작업과 충돌 없이 병렬 실행 가능
  • [Story]: 연결된 사용자 스토리
  • 모든 작업은 정확한 파일 경로를 포함

Phase 1: Setup (Shared Infrastructure)

Purpose: 승인된 계약과 현재 구현 범위를 실행 환경에 고정

  • [ ] T001 Confirm the active feature and implementation boundary against .specify/feature.json, specs/002-site-typography-scale/plan.md, and the unrelated sibling-project changes shown by git status
  • [ ] T002 Verify the existing Next.js and Playwright setup needed by tests/browser/typography.spec.ts using package.json, playwright.config.ts, and tests/browser/responsive.spec.ts

Phase 2: Foundational (Blocking Prerequisites)

Purpose: 모든 사용자 스토리가 공유하는 브라우저 계산 스타일 검사 기반 마련

⚠️ CRITICAL: 이 단계가 끝나기 전에는 스타일 구현을 시작하지 않는다.

  • [ ] T003 Create shared route, viewport, computed-font-size, and clipping helpers in tests/browser/typography.spec.ts based on specs/002-site-typography-scale/contracts/typography-ui-contract.md

Checkpoint: 계산 스타일 계약을 사용자 스토리별 테스트로 추가할 수 있다.

Phase 3: User Story 1 - 부담 없이 핵심 내용을 훑어보기 (Priority: P1) 🎯 MVP

Goal: 데스크톱에서 큰 제목을 절제하고 본문·제목·리드의 균형 있는 공통 위계를 제공한다.

Independent Test: 1440px의 홈페이지와 핵심 경로에서 본문·H1·H2·H3·리드가 승인 최대값 이하이며 기존 콘텐츠와 행동 요소가 보이는지 확인한다.

Tests for User Story 1 ⚠️

NOTE: 테스트를 먼저 작성하고 현재 대형 스케일에서 실패하는 RED를 확인한다.

  • [ ] T004 [US1] Add 1440px computed-size and homepage context assertions to tests/browser/typography.spec.ts, then run the focused Playwright test and record the expected RED result

Implementation for User Story 1

  • [ ] T005 [US1] Implement the approved body, H1, H2, and H3 fluid scales and remove the oversized timeline H3 override in app/globals.css and app/guide/guide.module.css
  • [ ] T006 [US1] Apply the approved 17–20px hero lead scale in app/guide/guide.module.css and app/5240lab/evidence.module.css
  • [ ] T007 [US1] Run tests/browser/typography.spec.ts to GREEN and confirm the P1 acceptance scenarios without changing content or DOM files

Checkpoint: 사용자 스토리 1이 독립적으로 동작하며 첫 화면의 과도한 제목 문제가 해결된다.

Phase 4: User Story 2 - 화면 크기가 달라도 같은 위계로 읽기 (Priority: P2)

Goal: 375px부터 1440px까지 네 경로와 404가 같은 비율로 변하고 넘침 없이 읽힌다.

Independent Test: 375px·768px·1440px에서 크기 범위, 줄바꿈과 가로 넘침을 확인하고 720px reflow 근사 검사로 200% 확대 위험을 확인한다.

Tests for User Story 2 ⚠️

  • [ ] T008 [US2] Add 375px and 768px minimum/intermediate size, all-route clipping, and 404 assertions to tests/browser/typography.spec.ts, then confirm the current implementation produces the intended RED failures
  • [ ] T009 [P] [US2] Extend viewport coverage with the 720px reflow checkpoint and element clipping checks in tests/browser/responsive.spec.ts, then confirm the focused test baseline

Implementation for User Story 2

  • [ ] T010 [US2] Refine responsive typography declarations only where the new browser tests expose overflow or out-of-range values in app/globals.css, app/guide/guide.module.css, app/5240lab/evidence.module.css, and app/roadmap/roadmap.module.css
  • [ ] T011 [US2] Run tests/browser/typography.spec.ts and tests/browser/responsive.spec.ts to GREEN at all required viewport checkpoints

Checkpoint: 사용자 스토리 1과 2가 모든 지원 화면에서 각각 검증된다.

Phase 5: User Story 3 - 작은 정보와 강조 수치를 또렷하게 구분하기 (Priority: P3)

Goal: 작은 보조 텍스트의 최소 크기를 보존하면서 성숙도 점수를 56–96px 범위로 조정한다.

Independent Test: 기술 라벨·내비게이션·배지·메타데이터·코드의 기존 최소값과 로드맵 점수 범위를 계산 스타일로 확인한다.

Tests for User Story 3 ⚠️

  • [ ] T012 [US3] Add protected-small-text and 375/1440px maturity-score assertions to tests/browser/typography.spec.ts, then confirm the current 128px score produces RED

Implementation for User Story 3

  • [ ] T013 [US3] Apply the 56–96px maturity-score scale while preserving existing small-text declarations in app/roadmap/roadmap.module.css
  • [ ] T014 [US3] Add dark-mode and print-media size-parity assertions to tests/browser/typography.spec.ts and run the complete typography test to GREEN

Checkpoint: 세 사용자 스토리가 모두 독립 기준을 충족한다.

Phase 6: Polish & Cross-Cutting Concerns

Purpose: 구현 기준 문서 동기화와 전체 회귀 검증

  • [ ] T015 [P] Update the display, body, heading, lead, score, and protected-small-text values in design-system/5240lab-harness/MASTER.md
  • [ ] T016 Run npm run test, npm run typecheck, npm run lint, npm run build, and npm run test:browser from specs/002-site-typography-scale/quickstart.md
  • [ ] T017 Manually inspect /, /guide, /5240lab, /roadmap, and /this-route-does-not-exist at 375px, 768px, 1440px, browser 200% zoom, dark mode, and print preview, recording any residual risk in specs/002-site-typography-scale/quickstart.md
  • [ ] T018 Run the coordinated npm run verify release-readiness gate and confirm only files listed in specs/002-site-typography-scale/plan.md are in implementation scope

Phase 7: Manual Synchronization & Release Readiness

Purpose: 제품과 문서 기준을 같은 릴리스로 검증

  • [ ] T019 Confirm manual-impact: none remains accurate by comparing /guide, README.md, and docs/operations.md with the final behavior, and record the result in specs/002-site-typography-scale/quickstart.md
  • [ ] T020 Verify design-system/5240lab-harness/MASTER.md values match browser-computed values and all checked content is public-safe before the implementation commit gate

Dependencies & Execution Order

Phase Dependencies

  • Setup (Phase 1): 즉시 시작 가능
  • Foundational (Phase 2): Setup 완료 후 시작하며 모든 사용자 스토리를 차단
  • User Story 1 (Phase 3): Foundational 이후 시작하는 MVP
  • User Story 2 (Phase 4): 공통 스케일 구현을 사용하는 US1 이후 진행
  • User Story 3 (Phase 5): 공통 테스트 기반 이후 독립 구현 가능하나 통합 충돌을 줄이기 위해 US2 다음 진행
  • Polish (Phase 6): 모든 사용자 스토리 완료 후 진행
  • Manual Synchronization (Phase 7): 전체 구현·검증 이후 커밋 게이트 직전 진행

User Story Dependencies

  • User Story 1 (P1): T003 이후 독립 완료 가능
  • User Story 2 (P2): US1의 공통 스케일에 의존하지만 자체 반응형 수용 기준으로 독립 검증 가능
  • User Story 3 (P3): T003 이후 점수와 보호 텍스트만으로 독립 검증 가능

Within Each User Story

  • 테스트를 먼저 작성하고 실패를 확인한다.
  • 최소 스타일 변경으로 GREEN을 만든다.
  • 해당 스토리의 집중 테스트가 통과한 뒤 다음 스토리로 이동한다.
  • 문서와 전체 검증은 모든 스토리가 GREEN인 뒤 수행한다.

Parallel Opportunities

  • T009는 새 타이포그래피 테스트와 다른 기존 반응형 테스트 파일이므로 T008과 병렬 가능하다.
  • T015는 최종 스타일 값이 확정된 뒤 다른 검증 준비와 병렬 가능하다.

Parallel Example: User Story 2

Task: "Add 375px, 768px, all-route clipping, and 404 assertions in tests/browser/typography.spec.ts"
Task: "Add the 720px reflow checkpoint and clipping assertions in tests/browser/responsive.spec.ts"

Implementation Strategy

MVP First (User Story 1 Only)

  1. Setup과 Foundational 단계를 완료한다.
  2. 1440px 계약 테스트의 RED를 확인한다.
  3. 공통 본문·제목과 리드 스케일만 구현한다.
  4. 사용자 스토리 1 집중 테스트를 GREEN으로 만든다.
  5. 전체 기능을 계속 진행하기 전 첫 화면 개선을 독립 확인한다.

Incremental Delivery

  1. US1: 데스크톱의 균형 있는 기본 위계
  2. US2: 모바일·중간 화면·404·reflow 안전성
  3. US3: 작은 보조 텍스트 보호와 강조 점수 조정
  4. 디자인 시스템 동기화와 전체 릴리스 검증

Notes

  • [P] 작업은 서로 다른 파일에서 선행 미완료 작업과 충돌하지 않을 때만 병렬 실행한다.
  • 각 사용자 스토리의 테스트는 구현보다 먼저 실패해야 한다.
  • 구현 중 형제 프로젝트의 기존 변경을 수정하거나 스테이징하지 않는다.
  • 명세 커밋과 구현 커밋은 각각 사용자 승인 게이트에서만 수행한다.