News / Journal Grid

# News / Journal Grid — web 디자인 팩

## 이 스타일의 정체성
신문·저널 1면을 웹으로 옮긴 미감이다. 다단 밀집 그리드에 굵은 세리프 헤드라인과 가는 룰 라인으로 기사를 구획한다. 흑백 위주에 빨강 한 점, 작은 산세리프로 메타·바이라인을 단다. 무엇을 보면 이 스타일임을 아는가 — 한 화면에 기사 블록이 6개 이상 빽빽이 들어차고, 모든 구획이 1px 검정 룰로 나뉘며, 헤드라인 크기 차이로 기사 중요도가 드러난다.

## 색
- 배경: `#fcfcf9` (뉴스프린트 오프화이트).
- 표면: 배경과 동일 — 별도 카드 배경 없음. 구획은 룰 라인으로만.
- 텍스트: `#161616` (헤드라인·본문), 메타는 `#5a5a5a`.
- 강조: 빨강 `#c8102e` 단 하나. 카테고리 키커(소제목 위 라벨)·"속보" 배지·핵심 링크에만. 면적 5% 이하.
- 룰 라인: `#161616` — 두께 위계로 `0.5px`(기사 내), `1px`(블록 구획), `3px`(섹션 구분).

## 타이포그래피
- 헤드라인: `Playfair Display`(Google Fonts) weight 700~900, 대체 `Georgia, serif`. 크기 4단계 — 톱기사 `clamp(2rem, 4.5vw, 3.4rem)`, 주요 `1.6rem`, 일반 `1.2rem`, 묶음 `1rem`. line-height 1.12, `letter-spacing: -0.015em`.
- 키커/카테고리 라벨: `Archivo`(Google Fonts) `0.68rem`, weight 700, 대문자, `letter-spacing: 0.12em`, 색 `#c8102e`.
- 본문: `Source Serif 4`(Google Fonts) `1rem`, weight 400, line-height 1.55, 측정 60~72자.
- 메타/바이라인: `Archivo` `0.75rem`, weight 500, 색 `#5a5a5a`. 데이트라인은 대문자.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: 1280px. 좌우 패딩 모바일 16px / 데스크탑 32px.
- 브레이크포인트: 600px(1단), 900px(2~3단), 1200px(4~5단).
- 12열 그리드, 거터 24px. 데스크탑은 본문 2~3단 다단 칼럼(`column-count`) 사용 가능.
- 섹션 수직 리듬: 블록 간 32px(dense). 여백을 아끼고 룰 라인으로 호흡을 만든다.
- 마스트헤드: 상단에 큰 세리프 사이트명 + 좌측 날짜·우측 섹션 메뉴, 아래 3px 룰.
- 톱기사는 7열 차지, 사이드바 묶음기사는 5열에 세로 스택.

## 형태 / 질감
- 모서리: radius `0`. 전 요소 직각.
- 보더: 룰 라인만 — `solid #161616`, 위 명시 두께 위계.
- 그림자: 전면 금지.
- 이미지: 흑백 또는 채도 -40% 처리, 보더 없음, 캡션은 하단에 `0.72rem` 메타 폰트.
- 카드 = 룰 라인으로 둘러싼 기사 블록(배경·그림자 없음). 키커 + 헤드라인 + 발췌 + 바이라인 순.
- 풀퀘이트: 좌측 3px 빨강 세로 룰 + 큰 세리프 인용.

## 모션
- `motion: none` — 신문은 정적이다.
- 호버만 허용: 헤드라인 링크에 `text-decoration` 밑줄 즉시 표시(전환 0ms), 또는 색 `#161616 → #c8102e` 100ms linear.
- 스크롤 애니메이션·페이드·패럴랙스 전면 금지.

## 하지 말 것
- 보라 그라디언트·어떤 그라디언트도 금지.
- 둥근 모서리·박스 섀도·카드 배경색 금지 — 구획은 룰 라인뿐.
- 빨강 외 강조색 추가 금지. 빨강도 5% 이하.
- 스크롤 진입 애니메이션·패럴랙스·페이드 금지.
- 큰 여백으로 듬성하게 만들지 말 것 — 밀집(dense)이 정체성.
- 산세리프를 헤드라인에 쓰지 말 것 — 헤드라인은 세리프 전용.
- 이모지·일러스트·블롭 도형 금지.

## 적용 예
- **히어로(마스트헤드+톱기사):** 상단 마스트헤드(사이트명 세리프 대형) 아래 3px 룰. 7열 톱기사는 키커(빨강)+초대형 세리프 헤드라인+흑백 이미지+발췌, 5열 사이드바는 룰로 나뉜 묶음기사 3개.
- **카드(기사 그리드):** 4단 그리드, 각 셀은 1px 룰로 구획. 키커 라벨 + 1.2rem 세리프 헤드라인 + 2줄 발췌 + 메타 폰트 바이라인. 호버 시 헤드라인 빨강.
- **푸터:** 상단 3px 룰. 다단 링크 리스트(섹션별 컬럼), Archivo 메타 폰트 소형, 색 반전 없음. 하단 카피라이트 데이트라인 대문자.