Skip to content

Latest commit

 

History

History
51 lines (38 loc) · 2.39 KB

File metadata and controls

51 lines (38 loc) · 2.39 KB

0053. 글 읽기 흐름에 인라인 목차를 사용한다

Date: 2026-07-28 Status: Accepted

배경

기존 글 상세 화면은 본문 바깥의 Portal 목차를 사용했다. 이 방식은 목차를 항상 화면에 노출할 수 있지만, 본문과 목차의 관계가 분리되어 글의 실제 읽기 흐름과 반응형 레이아웃을 함께 이해하기 어렵다. 본문 안에 목차를 배치하면 짧은 글에서 목차를 숨길 수 있고, 독자가 글을 시작하는 위치에서 구조를 바로 확인할 수 있다.

결정

  • 목차는 글 본문 컨테이너 안에 인라인으로 렌더링한다.
  • 목차 항목이 2개 미만이면 렌더링하지 않는다.
  • 목차는 번호, 계층 들여쓰기, 현재 활성 heading 상태를 제공한다.
  • 데스크톱 콘텐츠 레이아웃에서는 본문과 댓글에 같은 ark-article-container 정렬 정책을 적용한다.
  • 기존 viewport별 rail과 타이포그래피 규칙은 ADR 0051을 유지하고, 이 ADR은 글 내부 탐색 방식에 대한 결정을 추가한다.

결과

  • 목차가 본문 시작과 가까워져 글의 구조를 빠르게 파악할 수 있다.
  • 짧은 글에는 불필요한 목차가 나타나지 않는다.
  • 본문과 댓글이 같은 콘텐츠 열에 정렬되어 넓은 데스크톱 화면에서도 읽기 흐름과 대화 영역의 시작점이 일치한다.
  • 목차가 본문 흐름에 포함되므로 Portal 기반의 고정 목차보다 화면에 항상 노출된다는 보장은 줄어든다.

검토한 대안

  • 기존 Portal 목차 유지: 항상 접근할 수 있지만 본문과 구조적으로 분리되고 짧은 글에도 별도 탐색 UI가 남는다.
  • 데스크톱에서만 Portal 목차 유지: 데스크톱과 모바일의 탐색 모델이 달라지고, 본문과 목차의 위치 관계를 일관되게 설명하기 어렵다.
  • 본문과 댓글의 서로 다른 정렬 유지: 넓은 화면에서 댓글이 본문보다 오른쪽으로 밀려 콘텐츠 열의 시각적 기준선이 어긋난다.

검증

  • 목차 컴포넌트의 2개 미만 항목, 계층, 활성 상태 테스트
  • viewport stylesheet selector 및 정렬 정책 단위 테스트
  • 전체 lint, CSS syntax 검사, production build

Related History

  • 7f3f6ec: 본문 Portal 목차를 인라인 목차로 변경한 초기 구현
  • a79f661: 커밋 메시지 및 PR 메타데이터 정리