한글 웹 타이포그래피 (10) 문장부호가 데려오는 사이 공간

지금까지 이 시리즈는 글자 사이(자간), 줄 사이(행간), 글자 안(속공간), 글자 곁(사이드베어링)의 흰 공간을 다뤘다. 이번엔 글자가 아닌 것이 데려오는 흰 공간이다. 괄호와 따옴표, 그리고 한글 사이에 낀 영문과 숫자. 이 공간들은 오래 방치돼 있었는데, CSS가 최근에야 이걸 다룰 속성을 갖췄다.

먼저 밝혀둘 게 있다. 이 문제는 대부분 한자와 일본어(넓게 CJK) 조판에서 왔다. 한글은 그 경계에 어정쩡하게 걸쳐 있어서, 새 CSS 기능들이 한글에 어디까지 적용되는지가 명세 단계에서 아직 안 정해졌다. 그래서 이 편은 기능 사용법이면서 동시에 그 경계에 관한 이야기다. 시리즈에서 제일 최신이고 제일 불확실하다. 난이도 극상.

전각과 반각: 문장부호에 박힌 여백

CJK 활자는 글자를 정사각형 한 칸(전각, full-width)에 담는다. 3편에서 본 네모틀이다. 문장부호도 이 칸을 물려받았다. 그런데 괄호나 따옴표는 획이 칸의 한쪽에만 쏠려 있다. （는 칸 오른쪽에 붙고 왼쪽은 텅 빈다. 즉 전각 문장부호는 글자 곁 여백을 반 칸씩 안에 품고 나온다. 이건 세로쓰기와 정사각 격자를 전제한 설계의 유산이다.

한글 웹 본문은 대개 반각(ASCII) 문장부호 ( ), " ", ., , 를 쓴다. 이 경우엔 내장 여백 문제가 별로 없다. 문제는 전각 문장부호가 섞일 때다. 전각 괄호 （）, 낫표 「」, 가운뎃점, 전각 콜론 ： 같은 것들이 들어오면, 그 반 칸짜리 내장 여백 때문에 괄호 안이 유독 벌어져 보인다. 세로쓰기나 공문서식 조판에서 전각을 쓰는 한국어 맥락이 있고, 사용자가 입력기로 전각을 찍는 경우도 흔하다.

text-spacing-trim: 박힌 여백을 깎는다

이 내장 여백을 다듬는 CSS가 text-spacing-trim이다. 전각 문장부호가 서로 붙거나 줄 시작·끝에 올 때 그 반 칸을 깎아 조판을 촘촘하게 만든다.

/* 값의 뜻 */
.a { text-spacing-trim: normal; }     /* 기본값. 붙은 문장부호·줄 가장자리의 내장 여백을 깎는다 */
.b { text-spacing-trim: space-all; }  /* 아무것도 안 깎는다 — 전각 여백을 전부 남긴다(옛 동작) */
.c { text-spacing-trim: space-first; }/* 줄 첫 여는 괄호는 전각 그대로, 나머지는 깎는다 */

여기서 중요한 건 기본값이 normal이라는 점이다. 즉 지원 브라우저에서는 아무것도 안 써도 전각 문장부호의 군더더기 여백이 이미 다듬어진다. 옛날처럼 여백을 다 남기려면 오히려 space-all을 명시해야 한다. 명세에는 trim-both, trim-all, auto 같은 값이 더 있지만 2026년 현재 어느 브라우저도 구현하지 않았다.

지원은 아직 얇다. text-spacing-trim은 크롬·엣지 123(2024년 3월)에 들어왔고, 파이어폭스와 사파리는 아직 없다. 그러니 이건 “켜서 쓰는 기본기"가 아니라, 되는 곳에서 촘촘해지고 안 되는 곳에선 옛 여백이 남는 점진적 향상으로 본다.

text-autospace: 한글과 영문·숫자 사이

두 번째 공간은 성격이 다르다. 한글 옆에 영문이나 숫자가 바로 붙으면 답답해 보인다. 웹2.0, HTML문서, iOS앱처럼. 전통 조판은 이 자리에 아주 얇은 공백(대개 1/4em)을 넣어 숨통을 틔웠다. 이걸 자동으로 하는 CSS가 text-autospace다.

/* 한글·한자와 알파벳 사이, 한글·한자와 숫자 사이에 얇은 간격을 자동 삽입 */
.body { text-autospace: ideograph-alpha ideograph-numeric; }

/* 자동 간격을 아예 끄기 */
.tight { text-autospace: no-autospace; }

ideograph-alpha는 글자와 알파벳 사이, ideograph-numeric은 글자와 숫자 사이를 벌린다. 손으로 스페이스를 치는 것과 다르다. 이건 낱말 사이를 벌리는 진짜 공백이 아니라, 줄바꿈에 영향을 주지 않는 시각적 미세 간격이라 검색·복사·줄바꿈이 깨지지 않는다.

지원은 이제 막 들어오는 중이다. 사파리 18.4와 파이어폭스 145에서 켜지기 시작했고(파이어폭스는 아직 일부 값만), 크롬은 플래그 단계를 거쳐 왔다. text-spacing-trim과 지원 브라우저가 서로 엇갈린다는 점도 실무에서 유념할 대목이다.

그런데 한글은 이데오그래프인가

여기가 이 편의 핵심이자, 명세가 아직 답을 못 낸 지점이다. 두 기능의 값 이름에 붙은 **ideograph(표의문자)**는 한자와 가나를 겨냥한 말이다. 한글은 표의문자가 아니다. 소리를 적는 문자이고, 무엇보다 한글은 낱말을 띄어 쓴다. 한자·일본어가 띄어쓰기 없이 이어지는 것과 근본이 다르다.

그래서 질문이 갈린다. text-autospace: ideograph-alpha가 한글과 알파벳 사이에도 간격을 넣어야 하는가, 아니면 한글은 이 규칙 밖인가. CSS 워킹그룹에서도 한글을 이데오그래프로 볼지, 아니면 이데오그래프도 비이데오그래프 알파벳도 아닌 제3의 부류로 볼지 아직 논쟁 중이다. 결론이 안 났으니 브라우저와 버전마다 한글에서의 동작이 흔들릴 수 있다. 지금 이 기능들을 한글 사이트에 쓸 때 “된다/안 된다"를 단정하기 어려운 진짜 이유가 이것이다.

실무적으로는 이렇게 정리된다. 한글 본문은 어절 띄어쓰기와 반각 문장부호를 쓰므로 CJK 트리밍의 수혜가 한자·일본어만큼 크지 않다. 다만 (1) 전각 문장부호가 섞이면 text-spacing-trim이 도움이 되고, (2) 한글과 영문·숫자를 자주 뒤섞는 웹 UI에서 text-autospace는 미세하지만 값어치가 있다. 둘 다 아직 지원이 얇으니 반드시 @supports로 감싸고 폴백을 둔다.

@supports (text-autospace: ideograph-alpha) {
  .prose { text-autospace: ideograph-alpha ideograph-numeric; }
}
@supports (text-spacing-trim: normal) {
  .prose { text-spacing-trim: normal; } /* 기본값이지만 의도를 드러내 둔다 */
}

금칙과 매달기: 줄 가장자리의 문장부호

문장부호가 데려오는 문제가 하나 더 있다. 줄 가장자리다. 여는 괄호가 줄 맨 끝에 혼자 남거나, 마침표가 줄 맨 앞으로 넘어가면 어색하다. 이걸 막는 규칙을 금칙(禁則)이라 하고, CSS에서는 line-break가 관여한다.

/* CJK 문장부호가 줄 앞뒤에 오는 것을 엄격/느슨하게 제어 */
.strict { line-break: strict; }  /* 작은 가나·일부 문장부호까지 줄 앞에 못 오게 */
.normal { line-break: normal; }
.loose  { line-break: loose; }   /* 규칙을 느슨하게(좁은 칼럼에서 유용) */

또 하나는 매달기(hanging punctuation)다. 따옴표나 마침표를 판면 경계 밖으로 살짝 걸어, 글줄의 시작선이 문장부호가 아니라 글자에서 시작되도록 시각 정렬을 맞추는 기법이다.

/* 인용부호를 줄 앞으로 걸어 왼쪽 정렬선을 글자에 맞춘다 */
blockquote { hanging-punctuation: first last; }

hanging-punctuation은 사파리가 지원하고 다른 엔진은 아직 제한적이다. 이 역시 한글보다 라틴·CJK 인용 조판에서 먼저 논의됐지만, 한글 인용문에도 그대로 쓸 수 있다. 한국어 고유의 줄바꿈·문장부호 요구사항은 W3C의 한국어 텍스트 레이아웃 요구사항(klreq)에 정리돼 있어, 브라우저가 여기까지 따라오지 못하는 부분은 이 문서와 대조해 확인할 수 있다.

정리

흰 공간 시리즈의 마지막 변경은 글자가 아니라 문장부호가 데려오는 공간이었다.

text-spacing-trim : 전각 문장부호에 박힌 내장 여백을 깎는다 (Chrome/Edge 123, 기본값 normal)
text-autospace    : 한글과 영문·숫자 사이에 1/4em 미세 간격 (Safari 18.4·Firefox 145~)
line-break·매달기 : 줄 가장자리에 문장부호가 걸리는 것을 금칙·hanging으로 다스린다
남은 물음         : 한글이 이데오그래프인지 — CSS가 아직 못 정한 경계

이 시리즈가 내내 한 말을 마지막으로 한 번 더 한다. 값을 외우지 말고 그 값이 다루는 흰 공간을 보라. 자간·행간·속공간·사이드베어링에 이어, 문장부호가 안팎에 데려오는 여백까지 눈에 들어오면, 조판이란 결국 검은 획이 아니라 그 사이의 흰 공간을 배열하는 일이라는 시리즈의 첫 문장으로 돌아오게 된다. 다만 이번 흰 공간만은, 웹 표준이 한글의 자리를 아직 정하는 중이다. 그 경계에서 우리가 할 일은, 되는 기능은 점진적으로 쓰고 안 되는 곳은 폴백으로 지키며, 한글이 CJK의 하위 항목이 아니라 자기 규칙을 가진 문자라는 걸 표준 논의에 계속 상기시키는 것이다.