사이트 타이포그래피 스케일 조정 설계

작성일: 2026-08-15 상태: 사용자 방향 승인 완료, 구현 전

배경

현재 공개 사이트는 전역 h1이 최대 6.5rem(104px), h2가 최대 3.5rem(56px), 기본 본문이 최대 1.125rem(18px)까지 커진다. 특히 홈페이지의 “하네스로 일하는 개발자를 위한 지도”가 콘텐츠보다 강하게 보이며, 다른 페이지의 제목과 리드 문장도 같은 대형 스케일을 상속한다.

사용자는 시각 비교안 중 B. 균형 있게 재조정을 선택했고, 홈페이지뿐 아니라 /guide, /5240lab, /roadmap을 포함한 전체 사이트에 일관되게 적용하도록 승인했다.

목표

• 큰 화면에서 과도한 제목 크기를 줄여 한 화면에 더 많은 맥락이 보이게 한다.
• 제목, 리드, 본문 사이의 시각적 위계는 유지한다.
• 모바일과 작은 보조 텍스트의 가독성을 떨어뜨리지 않는다.
• 콘텐츠, DOM 구조, 페이지 레이아웃과 기능 동작은 변경하지 않는다.

검토한 방향

1. 제목만 절제: 전역 H1만 축소한다. 변경 범위가 작지만 H2와 리드 문장의 비율이 그대로라 사이트 전체의 과한 밀도 차이를 해결하지 못한다.
2. 균형 있게 재조정(선택): H1, H2, H3, 리드, 본문과 강조 숫자를 함께 조정한다. 위계를 보존하면서 전 페이지의 정보 밀도를 일관되게 개선한다.
3. 문서형으로 압축: 모든 텍스트를 한 단계 더 작게 만든다. 기술 문서다운 밀도는 높지만 한국어 본문과 카드 보조 정보의 접근성이 떨어질 수 있다.

타이포그래피 설계

공통 스케일은 app/globals.css에서 정의하고, 페이지별 CSS 모듈은 공통 스케일로 표현하기 어려운 리드 문장과 데이터 강조 요소만 보정한다.

기술 라벨, 내비게이션, 상태 배지, 근거 메타데이터, 코드 블록은 이미 12–15px 수준이다. 이들은 추가로 축소하지 않아 작은 텍스트의 가독성을 지킨다. 제목의 줄 높이와 자간은 현재의 응축된 인상을 유지하되, 줄바꿈이 바뀐 화면에서 겹침이나 잘림이 없는지 확인한다.

적용 범위와 구성 요소

• app/globals.css: 기본 본문, H1, H2, H3 공통 스케일
• app/guide/guide.module.css: 홈페이지·가이드 리드와 문서 타임라인 제목
• app/5240lab/evidence.module.css: 적용 근거 페이지 리드
• app/roadmap/roadmap.module.css: 로드맵 리드, 성숙도 점수와 예외 H2
• design-system/5240lab-harness/MASTER.md: 구현과 일치하는 타이포그래피 기준
• 공통 스케일을 상속하는 /, /guide, /5240lab, /roadmap, 404 페이지

React 구성 요소, 콘텐츠 데이터, 라우팅과 사용자 입력 흐름에는 변경이 없다. 따라서 새 데이터 흐름이나 오류 상태도 추가되지 않는다.

반응형 동작

• 375px 부근에서는 H1 40px, H2 28px, 본문 16px 수준을 유지한다.
• 뷰포트가 넓어질수록 clamp()로 부드럽게 증가한다.
• 1440px 이상에서도 H1은 72px, H2는 44px, 본문은 17px을 넘지 않는다.
• 기존 최대 너비와 레이아웃 미디어 쿼리는 유지해 타이포그래피 변경이 그리드 구조 변경으로 번지지 않게 한다.

검증

1. 타이포그래피 값이 승인된 최소·최대 범위를 따르는지 자동 테스트로 고정한다.
2. 기존 단위·통합·타입·린트·프로덕션 빌드 검증을 실행한다.
3. 375px, 768px, 1440px에서 네 핵심 경로를 확인한다.
4. 제목 줄바꿈, 카드 넘침, 내비게이션, 200% 확대 시 가독성과 가로 스크롤을 확인한다.
5. 라이트·다크 모드 및 인쇄 스타일에 회귀가 없는지 확인한다.

비목표

• 문구 수정, 정보 구조 개편, 여백 체계 재설계
• 글꼴 패밀리 교체 또는 외부 폰트 추가
• 색상, 카드, 내비게이션 스타일 변경
• 배포 방식 변경