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

공통 스케일의 위치

• Decision: 기본 본문과 H1·H2·H3는 app/globals.css, 페이지별 히어로 리드와 성숙도 점수는 기존 CSS 모듈에서 정의한다.
• Rationale: Next.js 16.3 로컬 문서는 모든 경로에 적용되는 규칙은 루트에서 불러오는 전역 CSS에, 범위가 한정된 표현은 CSS Module에 두도록 안내한다. 현재 프로젝트 구조도 이 경계를 이미 사용한다.
• Alternatives considered: 모든 값을 각 페이지 CSS에서 반복하면 드리프트가 생긴다. 새 React 컴포넌트나 CSS-in-JS 계층은 정적 크기 변경에 불필요하다.

유동형 크기 계산

• Decision: 375px에서 승인 최소값, 1440px에서 승인 최대값에 도달하는 선형 clamp()를 사용한다.
• Rationale: 지정된 지원 범위 안에서 급격한 breakpoint 전환 없이 같은 비율을 유지하고, 범위 밖에서는 최소·최대값을 보장한다.
• Alternatives considered: 고정 크기는 데스크톱과 모바일 중 한쪽에서 위계가 약해진다. 다수의 미디어 쿼리는 중간 폭의 변화가 불연속적이고 유지보수 지점이 늘어난다.

작은 텍스트와 페이지 예외

• Decision: 11~15px 기술 라벨·내비게이션·배지·메타데이터·코드는 유지한다. 승인 범위를 벗어나는 문서 타임라인 H3는 공통 H3를 상속하도록 정리한다. 카드 안의 소형 제목처럼 이미 범위 안인 예외는 크기를 키우지 않는다.
• Rationale: 사용자의 문제는 과도한 대형 글자이며, 작은 텍스트의 추가 축소나 불필요한 확대는 가독성과 기존 카드 밀도를 해친다.
• Alternatives considered: 모든 선언을 일괄 삭제하면 카드 안의 의도된 조밀한 위계가 바뀐다. 모든 작은 텍스트를 비례 축소하면 접근성 위험이 커진다.

검증 방식

• Decision: Playwright에서 375px·768px·1440px의 계산 스타일을 검사하고, 기존 반응형 테스트에 720px reflow 검사를 추가한다. 실제 브라우저 200% 확대는 수동 확인으로 보완한다.
• Rationale: 서버 렌더 단위·통합 테스트는 CSS 계산 결과를 관찰할 수 없지만 실제 브라우저는 최종 cascade와 viewport 계산을 검증한다. 720px CSS 폭은 1440px 화면의 200% 확대 reflow를 재현하는 자동화 근사치다.
• Alternatives considered: CSS 원문 문자열만 검사하면 최종 cascade와 화면별 결과를 놓친다. 스냅샷 이미지만 사용하면 수치 회귀 원인을 정확히 판정하기 어렵다.

프로덕션 검증

• Decision: 빠른 RED/GREEN 검사는 개발 서버에서 실행하되, 완료 판정은 production build와 전체 브라우저·배포 검증을 포함한다.
• Rationale: Next.js 로컬 Playwright 안내는 실제 배포 동작에 가까운 production build 검증을 권장하며, CSS 결합 결과도 최종 빌드에서 확인해야 한다.
• Alternatives considered: 개발 서버 검사만으로 끝내면 최적화된 CSS 번들에서만 발생하는 회귀를 놓칠 수 있다.