3.3 KiB
3.3 KiB
프리셋: editorial — 잡지의 여백과 세리프
한 문장: 읽는 것이 목적인 화면. 콘텐츠가 주인공이고 UI는 뒤로 물러난다.
언제 고르나
- 콘텐츠(글·사진·작업물)가 실제로 있고 그것이 설득의 주체일 때
- 브랜드·미디어·포트폴리오·럭셔리·문화 기관
- 쓰지 마라: 기능이 많은 제품, 전환이 목적인 랜딩, 데이터 밀도가 높은 화면
결정
타이포그래피
- 세리프 또는 고대비 산세를 주역 후보로 둔다. 대상 언어의 glyph·작은 크기·긴 읽기에서 더 잘 작동하는 쪽을 선택한다.
- 비율 1.333~1.618 — 헤드라인과 본문의 차이를 크게 벌린다
- 본문
--measure는 상대적으로 좁은 값에서 시작하고, 라틴 6068자·한글 2535자는 후보 범위로만 쓴다. 글꼴·언어·확대 상태의 실제 문단으로 확정한다. - 웨이트는 2개면 충분(Regular + 하나). 굵기로 소리치지 않는다
| 슬롯 | 무료 | 유료 | 한글 |
|---|---|---|---|
| 디스플레이 | Instrument Serif, Fraunces | Signifier, PP Editorial New | 마루 부리 |
| 본문 | Spectral, Lora | Söhne, Tiempos | 마루 부리 / 리디바탕 |
색
- 종이 같은 따뜻한 배경과 순백 모두를 콘텐츠·이미지·브랜드 대비로 비교한다.
#fbfaf8,#f7f5f0은 출발값 후보일 뿐이다. - 잉크는 순흑과 근접색을 실제 대비·주변 이미지·긴 읽기에서 비교한다.
- 강조 역할이 필요하면 한 색을 작게 쓴다. 강조색이 없어도 되며, 링크·인용·페이지 번호의 구분은 대비·밑줄·위치로도 만들 수 있다.
간격
- 여백이 콘텐츠다. 섹션 간격을 본문 간격의 5~6배까지 벌려도 된다
- 비대칭을 적극적으로 — 본문을 그리드 왼쪽 2/3에 두고 오른쪽을 비우거나, 캡션을 여백에 흘린다
- 이미지는 본문 폭을 넘어가게(
wide/full) 두어 리듬을 만든다
재질 (svg-filters.md)
- 필름 그레인은 인쇄·사진 재질이 브리프에 맞을 때만 후보로 둔다. 효과 없이도 editorial 리듬이 성립해야 한다.
- 인쇄물의 질감: 이미지에 미세한 듀오톤 또는 그라디언트 맵
- 유리·네온·글로우는 이 프리셋에 어울리지 않는다
모션 (motion.md)
- 거의 움직이지 않는다. 등장은 페이드 + 짧은 상승(8~16px) 이하
- duration 은 느리게(
--dur-slow), 이징은--ease-out - 스크롤 재킹 금지. 읽는 사람의 속도를 뺏지 마라
흔한 실패
- 세리프를 썼는데 여백이 좁다 → 세리프는 숨 쉴 공간이 없으면 그냥 답답해진다
- 강조색을 넓게 칠했다 → 에디토리얼의 색은 점이지 면이 아니다
- 모든 이미지를 같은 크기로 넣었다 → 크기 차이가 리듬이다
- 본문 폭이 넓다 → 이 프리셋에서 가장 자주 나오는 실패
- 한글에 라틴 세리프만 지정 → 한글이 시스템 기본으로 떨어져 전부 무너진다
리스크 후보 (2단계에서 하나 고른다)
- 히어로에 이미지 없이 타이포그래피만
- 본문 폭을 극단적으로 좁히고 여백에 주석을 흘리기
- 페이지 번호·러닝헤드 같은 인쇄물 장치를 웹에 가져오기