디자인 아틀라스
EN
Aa 타이포그래피

광학 여백 정렬

Optical margin alignment

따옴표·불릿·하이픈처럼 잉크(먹)가 적고 주변 여백이 큰 문장부호를, 본문 줄과 같은 수직선이 아니라 살짝 바깥으로 내보내 "시각적으로" 줄이 맞아떨어지게 만드는 기법.

다른 이름: 행잉 펑크추에이션Hanging punctuation
···
html
<div class="stage">
  <div class="col">
    <div class="tag">정렬 안 함</div>
    <p class="quote flush">"디자인은 어떻게 보이고 어떻게 작동하는지에 대한 것이다."</p>
  </div>
  <div class="col">
    <div class="tag good">광학 여백 정렬</div>
    <p class="quote hanging">"디자인은 어떻게 보이고 어떻게 작동하는지에 대한 것이다."</p>
  </div>
  <div class="readout" id="readout">확인 중…</div>
</div>
css
.stage{display:grid;gap:14px;justify-items:center;width:min(94%,320px)}
.col{width:100%}
.tag{font:10px ui-monospace,Menlo,monospace;color:var(--muted);margin-bottom:4px}
.tag.good{color:var(--accent-3)}
.quote{font:15px/1.6 Georgia,'Times New Roman',serif;color:var(--fg);margin:0;border-left:2px solid var(--line);padding-left:10px}
.hanging{text-indent:-0.42em}
.readout{font:10px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
js
const readout = document.getElementById('readout');
const supported = CSS.supports('hanging-punctuation', 'first');
readout.textContent = supported
  ? 'CSS.supports("hanging-punctuation: first") = true — 표준 속성 지원됨 (데모는 호환성 위해 수동 트릭 사용)'
  : 'CSS.supports("hanging-punctuation: first") = false — 이 브라우저는 미지원, text-indent 수동 트릭만 동작';

문단의 왼쪽·오른쪽 끝을 모든 글자가 정확히 같은 수직선에 닿도록 정렬해도, 그 줄이 큰따옴표나 하이픈으로 시작·끝나면 눈에는 오히려 안쪽으로 들어간 것처럼 "울퉁불퉁"해 보입니다. 따옴표는 실제 획(잉크)이 글자 폭의 일부만 차지하고 나머지는 여백이기 때문에, 다른 글자들과 같은 좌표에 정렬해도 시각적 무게 중심은 안쪽에 있는 것처럼 느껴집니다.

광학 여백 정렬은 이 문장부호들을 실제 텍스트 상자 경계보다 살짝 바깥으로 밀어내서, 눈이 인식하는 "가장자리"를 다시 가지런하게 맞춥니다. 인쇄 조판에서는 식자공이 손으로 조정해온 오랜 관행이고, 고급 북 디자인·신문 조판에서 흔히 보입니다.

CSS `hanging-punctuation` 속성이 이를 표준화하려 했지만(`first`는 문단 시작의 따옴표를, `last`는 줄 끝의 문장부호를 내보냄) 브라우저 지원이 극히 제한적입니다(주로 Safari). 데모는 `CSS.supports`로 이 속성이 실제로 지원되는지 그 자리에서 확인하고, 지원 여부와 무관하게 `text-indent`를 음수로 주는 수동 트릭으로 효과를 보여줍니다 — 이 수동 방식은 모든 브라우저에서 동작합니다.

언제 쓰나

큰따옴표로 시작하는 인용구, 불릿 목록처럼 문장부호의 시각적 무게가 눈에 띄는 곳에. 일반 UI 텍스트에는 체감 효과가 미미해 생략해도 됩니다.