coastdigitalgroup/coastai-skills

아티클 레이아웃 시스템

목적

아티클 레이아웃 시스템은 블로그, 문서, 백서, 사례 연구와 같은 장문 콘텐츠에 대해 텍스트와 지원 미디어의 특정 배열인 '읽기 경험'을 설계하기 위한 방법론을 제공합니다. section-composition-system이 페이지 수준의 흐름을 처리하는 반면, 이 시스템은 가독성, 줄 길이(measure), 수직 리듬, 그리고 텍스트와 편집 요소(이미지, 인용문, 코드 블록) 간의 공간적 관계에 초점을 맞춥니다. 사용자가 시각적 피로 없이 많은 양의 정보를 소비할 수 있도록 보장합니다.

사용 사례

• 블로그 게시물 템플릿 및 아티클 페이지 디자인.
• 기술 문서 및 지식 베이스 구조화.
• 장문 편집 콘텐츠 또는 디지털 잡지 제작.
• '읽기 모드' 또는 접근성 중심 텍스트 보기 개발.
• 정보 유지가 목표인 교육 콘텐츠 구성.

사용하지 말아야 할 경우

• 영향력이 높은 랜딩 페이지: 혜택 스캔과 빠른 CTA가 목표인 경우; section-composition-system 사용.
• 대시보드: 선형 읽기보다 데이터 밀도와 비교가 우선시되는 경우; data-table-ui-system 사용.
• 양식 및 입력 중심 뷰: form-design-system 사용.
• 단일 뷰포트 '앱' 뷰: 콘텐츠가 기능적 도구보다 부차적인 경우.

입력

1. 콘텐츠 원형: 기술 튜토리얼(코드 중심), 내러티브 스토리(이미지 중심) 또는 공식 백서인가요?
2. 타이포그래피 시스템: fluid-typography-system에서 정의된 기본 글꼴 크기와 눈금.
3. 읽기 환경: 주로 모바일(방해 요소 없음)에서 읽을 것인지 데스크톱(다중 열 컨텍스트)에서 읽을 것인지?
4. 계층 구조 맵: 콘텐츠의 논리적 구조(H1, H2, H3, 본문, 캡션).

출력

1. '골든 컨테이너' 사양: 최적의 줄 길이를 보장하기 위한 텍스트의 최대 너비 정의.
2. 수직 리듬 맵: 문단과 제목 사이에 예측 가능한 간격을 만드는 여백 및 패딩 시스템.
3. 편집 구성 요소 청사진: 풀 인용구, 사이드바, 미디어 콜아웃, 목차에 대한 시각적 규칙.
4. 반응형 읽기 맵: 다양한 화면 너비에서 가독성을 유지하기 위해 글꼴 크기와 줄 높이가 조정되는 방식.

작업 흐름

1. '골든 컨테이너' 정의(줄 길이)

가독성에서 가장 중요한 요소는 줄당 문자 수입니다:

• 최적 범위: 45~75자(공백 포함).
• 데스크톱 구현: 일반적으로 600px에서 800px 사이의 max-width로 변환되거나 간단히 max-width: 75ch — ch 단위는 글꼴의 실제 문자 너비를 추적하므로 서체 변경에도 정확하게 유지됩니다.
• 유동적 크기 조정: 제목과 본문 텍스트에 clamp() 사용(예: font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem)). 그러면 중단점에서 갑자기 변경되는 대신 뷰포트에 따라 유형이 조정됩니다.
• 중앙 정렬: 넓은 머리 움직임으로 인한 눈의 피로를 줄이기 위해 컨테이너를 중앙에 배치합니다.

2. 행간 및 수직 리듬 설정

줄 높이(행간)와 블록 사이의 간격은 '숨 쉴 공간'을 만듭니다:

• 기본 행간: 본문 텍스트의 경우 1.5~1.6을 목표로 합니다. 더 작거나 더 복잡한 글꼴의 경우 증가시킵니다.
• '간격 비율': 제목 앞의 간격에는 일관된 간격 시스템(예: 기본 여백의 2배 또는 3배)을 사용하고, 제목 뒤에는 더 작은 간격(예: 1배)을 사용합니다.
• 문단 간격: 웹 레이아웃에서 문단을 구분하기 위해 들여쓰기보다는 아래쪽 여백(margin-bottom)을 사용합니다.

3. 편집상의 '중단점' 설계

시각적 다양성을 도입하여 '텍스트 벽' 피로를 방지합니다:

• 풀 인용구: 주요 통찰을 강조하는 더 크고 스타일이 지정된 텍스트.
• 사이드바/콜아웃: 보조 정보를 위한 독특한 스타일의 상자(종종 밝은 배경 또는 테두리 있음).
• 이미지/미디어: 'Contained'(인라인), 'Wide'(컨테이너 너비 벗어남), 'Full-Bleed' 미디어에 대한 규칙 정의.
• 제목 줄바꿈: 제목과 풀 인용구에 text-wrap: balance를 적용(지원되지 않는 브라우저를 위한 폴백 포함)하여 마지막 줄에 홀로 남은 단어(orphaned single words)가 없도록 합니다.

4. 내비게이션 및 길찾기 구축

긴 콘텐츠 관리 지원:

• 목차(ToC): 1,000단어 이상의 아티클의 경우 데스크톱에서는 고정 목차를, 모바일에서는 접을 수 있는 목차를 제공합니다.
• 진행 표시기: 남은 콘텐츠 양을 보여주는 미묘한 막대 또는 백분율 표시기.
• 읽기 시간: 상단에 'X분 읽기' 예상 시간을 제공하여 사용자 기대치를 설정합니다.

5. 반응형 타이포그래피 전환 계획

화면이 작아짐에 따라 가독성 유지:

• 모바일 편안함: 작은 화면에서는 가로 패딩을 줄이되 줄 길이는 편안하게 유지합니다.
• 대비 확인: 배경색이 있는 콜아웃이나 다크 모드 전환기가 WCAG AA 대비를 유지하는지 확인합니다.

결정 규칙

• 문자 규칙: 텍스트 줄이 80자를 초과하면 너무 넓습니다. 40자 미만이면 너무 좁습니다. 컨테이너를 조정하세요.
• 제목 근접성: 제목은 항상 앞에 오는 콘텐츠보다 자신이 소개하는 콘텐츠에 더 가까워야 합니다(근접 원리).
• 미디어 너비 논리: 기술적 세부 사항에는 'Contained' 이미지를 사용하고, 분위기 전환이나 내러티브 전환에는 'Wide' 또는 'Full-Bleed' 이미지를 사용합니다.
• 리듬을 위한 '가늘게 뜨기' 테스트: 페이지를 가늘게 뜨고 보세요. 명확하고 일관된 공백으로 구분된 별개의 텍스트 '블록'이 보여야 합니다.

제약 조건

• 접근성: 텍스트는 WCAG AA(4.5:1) 대비를 충족해야 합니다. 본문의 글꼴 크기는 16px(1rem)보다 작아서는 안 됩니다.
• 반응성: 컨테이너는 유동적이어야 합니다(고정 width 대신 max-width 사용). 아티클 내부의 구성 요소(콜아웃, 포함된 미디어)가 뷰포트가 아닌 자체 컨테이너에 적응해야 하는 경우, 컨테이너 쿼리(@container)를 사용하세요.
• 계층 구조: H1이 가장 눈에 띄어야 하지만, 본문 텍스트가 가장 읽기 편해야 합니다.

일반적인 실패 패턴

• '데스크톱 바다': 24인치 모니터 전체 너비에 걸쳐 있는 텍스트로, 눈이 다음 줄을 찾는 것을 불가능하게 만듭니다.
• 숨 막히는 텍스트: 줄 높이가 너무 좁아서(예: 1.1 또는 1.2) 상승자와 하강자가 충돌합니다.
• 떠 있는 제목: 위와 아래의 간격이 동일한 제목으로, 어느 섹션에 속하는지 불분명합니다.
• 일관성 없는 미디어: 명확한 논리적 시스템 없이 중앙 정렬, 왼쪽 정렬, 와이드 이미지를 혼합합니다.
• '끝없는 스크롤': 5,000단어 아티클에 길찾기나 진행 표시기가 없어 사용자가 이탈하게 됩니다.

검증 기준

• 데스크톱에서 줄 길이가 45~75자 사이입니다.
• 본문 텍스트의 줄 높이가 최소 1.5입니다.
• 수직 리듬이 제목을 뒤따르는 콘텐츠와 명확하게 그룹화합니다.
• 편집 요소(인용구, 콜아웃)가 본문 텍스트와 시각적으로 구별됩니다.
• 장문 콘텐츠에 목차 또는 길찾기가 제공됩니다.
• 읽기 경험이 모바일 뷰포트에 대해 테스트되고 최적화되었습니다.
• 모든 텍스트의 대비 비율이 WCAG AA 표준을 충족합니다.