조판은 뺄셈이다

이 페이지는 Markit의 조판 견본입니다. 여기에는 두 가지 역할이 겹쳐 있습니다. 실제로 읽어 내려갈 수 있는 한 편의 글이면서, 편집기가 지원하는 모든 Markdown 문법을 한 번씩 짚어 보는 점검표이기도 합니다. 둘은 동시에 성립해야 합니다 — 문법만 쌓아 올린 견본은 눈을 속이지 못하고, 행간이 풀렸는지, 문장부호가 어긋났는지, 한글과 로마자가 만나는 자리가 덜컹거리는지는 진짜 긴 글 속에서만 드러나기 때문입니다.

조판의 판단 기준은 한 번도 "예쁜가"였던 적이 없습니다. "천 자를 읽고 난 뒤 눈이 얼마나 피곤한가"입니다. 뻔한 말로 들리지만, 이 기준은 사진발 잘 받는 시안 대부분을 탈락시킵니다.

지면의 첫 원칙: 먼저 뺄 것

편집기 화면에서 진짜로 내용에 속하는 것은 글자뿐입니다. 나머지 전부 — 도구 막대, 사이드바, 버튼, 상태 표시 — 는 내용과 주의를 다투고 있습니다. 그래서 첫 규칙은 이렇습니다: 기본 상태에서 인터페이스 요소는 보이지 않거나, 시야의 가장자리로 물러나 있을 것.

숫자로 옮기면:

표의 숫자는 고정폭 숫자로 맞춥니다. 작은 일이지만, 좌우로 흔들리는 숫자 열은 독자를 "이해"가 아니라 "대조"로 몰아갑니다.

선보다 여백이 묶는다

내용을 구분선으로 가르는 것은 초심자의 방식이고, 여백으로 가르는 것이 성숙한 방식입니다. 선은 지면에 딱딱한 모서리를 남기지만 여백은 모습을 드러내지 않습니다:

• 문단 사이 16 px — 문장이 무리를 이룬다
• 소제목 위 24 px, 아래 8 px — 위는 죄고 아래는 풀어 제목이 제가 거느린 본문에 달라붙는다
• 큰 제목 위 40 px — 시선이 자연스레 한 박자 쉰다

이 단계 지운 여백이 한번 눌려 평평해지면 — 이를테면 일괄된 margin 규칙에 덮이면 — 지면은 곧장 등간격 문단의 나열로 퇴화하고, 위계는 글자 크기 혼자 떠받치게 됩니다. 이 고장은 조용합니다. 선언은 코드에 그대로 남아 있고, 얼핏 보면 아무것도 깨지지 않았습니다.

글꼴: 한글과 로마자는 서로 다른 일

CSS의 글꼴 대체는 글자 단위로 일어납니다. 스택의 순서가 로마자를 누가 그릴지 결정한다는 뜻입니다. 한글 글꼴을 앞에 두면 camelCase도, 버전 번호 v1.522도, 모든 라틴 문자가 한글 글꼴에 딸려 온 덤 같은 로마자 자형으로 떨어집니다.

옳은 순서는 로마자가 먼저, 한글이 나중입니다:

font-family: Charter, 'Apple SD Gothic Neo', -apple-system, 'Noto Sans KR', sans-serif;

두 순서 모두 "돌아간다"는 것이 이 규칙의 고약한 점입니다. 차이는 자형에만 나타나 코드 리뷰로는 잡히지 않습니다 — 테스트가 지켜야 합니다.

반례 하나

아래 코드는 밟기 쉬운 구덩이 두 개를 한꺼번에 밟습니다 — 한글 글꼴을 앞에 두고, 그 위에 합성 이탤릭까지 씁니다:

// ⚠️ 두 군데 모두 잘못
const stack = "'Apple SD Gothic Neo', Charter, sans-serif"  // 한글이 앞: 로마자 자형이 제멋대로
const emphasis = { fontStyle: 'italic' }                    // 한글에 이탤릭 전통은 없다

한글에는 이탤릭의 전통이 없습니다. 강조가 필요하면 굵기나 방점이 정직한 길이고, 네모틀 글자를 비스듬히 눕히는 것은 획이 겹치는 곳을 뭉개 놓을 뿐입니다. 글자가 작을수록 더 심해집니다.

합성 볼드도 같은 계열의 문제입니다. 진짜 볼드 자면이 없는 글꼴에서는 브라우저가 윤곽선을 부풀리는데, 그 순간 가로획과 세로획의 굵기 관계가 무너집니다.

문법 점검표

남은 문법을 한 바퀴 돌면서, 이 스타일 아래에서 서로 싸우지 않는지 확인합니다.

행내 요소

본문에는 굵게, 강조, 취소선, 행내 코드, 그리고 외부 링크가 나올 수 있습니다. 자동으로 인식되는 URL도 마찬가지입니다: https://example.com . 이들이 한 문단에 섞일 때 먼저 부서지는 것은 행간입니다 — 여분의 padding을 가진 행내 요소 하나면 그 줄은 벌어집니다.

태그는 메타 정보이지 문장의 주인공이 아니므로, 채도를 낮춘 알약 모양으로 그립니다. 색색의 태그 벽이 아니라: #조판 #글꼴 #공예

목록

순서 있는 목록은 절차에, 순서 없는 목록은 병렬 항목에:

1. 먼저 풀어야 할 문제가 무엇인지 확인한다
2. 다음으로 그 문제가 풀 만한 가치가 있는지 확인한다
   1. 몇 사람에게 닿는가
   2. 얼마나 자주 무는가
3. 어떻게 풀지는 맨 마지막

작업 목록은 점검표에:

• 본문 폭과 행간을 정한다
• 글꼴 스택의 순서를 정한다
• 본문 강조를 어떤 모양으로 할지 정한다
• 실기기에서 문장부호 내어짜기를 확인한다

중첩된 순서 없는 목록:

• 글꼴
  • 로마자: Charter, Georgia, Palatino
  • 한글: Apple SD Gothic Neo, 본명조, 시스템 고딕
• 조판
  • 한글과 로마자 사이의 사이짜기
  • 문장부호 붙여짜기

인용과 콜아웃

좋은 글은 좋은 지면을 받을 자격이 있다.

조판의 목적은 글자를 예쁘게 만드는 것이 아니라, 독자가 지면의 존재를 잊게 하는 것이다.

다섯 가지 콜아웃은 저마다의 어조를 가집니다. 글쓴이가 고르는 의미이지, 인터페이스가 얹는 장식이 아닙니다:

긴 글은 명조나 고딕이 눈에 덜 부담스럽고, 붓글씨 계열은 수필과 짧은 글에 어울립니다.

디스크 위의 .md 파일만이 유일한 진실입니다. 어떤 조판 효과든 렌더링 층 안에서만 살 수 있습니다.

사용자가 입력하는 도중에 본문을 건드리지 마십시오. 자동으로 끼워 넣은 공백은 다음 자동 저장 때 디스크에 쓰입니다.

코드 블록

코드 블록은 본문 폭을 터뜨리는 대신 옆으로 스크롤해야 하고, 배색도 절제해야 합니다 — 키워드는 강조색, 주석은 회색으로 물러나고, 나머지는 본문색. 무지개 하이라이트는 따뜻한 종이 위에서 시끄럽습니다:

/// 현재 문서를 Finder에서 보기
@objc private func revealInFinder(_ sender: Any?) {
    guard let url = session.url else { return }
    NSWorkspace.shared.activateFileViewerSelecting([url])
}

아주 긴 한 줄은 줄바꿈 대신 스크롤로:

curl -sSL "https://raw.githubusercontent.com/example/repo/main/very/long/path/to/some/file.txt" -o output.txt

이미지

이미지 바로 아래 설명이 붙을 때는 둘 사이 간격을 보통 문단 간격보다 좁힙니다. 그래야 독자가 그 둘을 한 덩어리로 봅니다.

끝으로

위의 구분선은 구분선의 정당한 쓰임새입니다. 문단 사이의 숨이 아니라 "본문이 끝나고 맺음이 시작된다"는 진짜 단절을 표시하는 것. 드물게 쓸수록, 나타나는 그 한 번에 힘이 실립니다.

조판안이 성립하는지의 판정은 결국 하나뿐입니다. 이 페이지를 처음부터 끝까지 읽는 동안, 지면 자체를 알아차리고 멈춘 곳이 있었는가. 있었다면, 바로 거기가 아직 고칠 자리입니다.