혹시 웹페이지에서 text-align: justify(양쪽 정렬)를 써봤다가 바로 후회한 경험 있으신가요? 단어 사이가 이상하게 벌어지고, 어떤 줄은 휑하고 어떤 줄은 빽빽하고… 그래서 "웹에선 양쪽 정렬 쓰지 마라"가 반쯤 정설이 됐는데요. 그런데 종이책을 펴보면 거의 다 양쪽 정렬인데도 아름답거든요. 왜 책은 되는데 웹은 안 될까요? 이 오래된 질문에 정면으로 도전한 라이브러리가 'Justif'예요. 조판 시스템 TeX의 Knuth-Plass 줄바꿈 알고리즘과 마이크로타이포그래피 기법을 웹에서 쓸 수 있게 만든 프로젝트거든요.
브라우저의 줄바꿈은 '욕심쟁이'예요
먼저 브라우저가 줄을 어떻게 나누는지 알아야 해요. 브라우저는 기본적으로 그리디(greedy) 방식을 써요. 이게 뭐냐면, 현재 줄에 단어를 최대한 욱여넣다가 더 이상 안 들어가면 다음 줄로 넘기는 거예요. 한 줄 한 줄만 보면 최선인데, 문단 전체로 보면 엉망이 될 수 있어요. 앞 줄에서 욕심을 부린 탓에 다음 줄에 긴 단어 하나만 덩그러니 남는 식이죠. 양쪽 정렬을 켜면 이 부족한 공간을 단어 사이 간격을 늘려서 때우는데, 그래서 그 어색한 '구멍 숭숭 뚫린' 문단이 나오는 거예요.
Knuth-Plass: 문단 전체를 보고 결정한다
1981년, TeX을 만든 도널드 커누스(Donald Knuth)와 제자 마이클 플래스(Michael Plass)는 완전히 다른 접근을 내놨어요. 한 줄씩 결정하지 말고, 문단 전체에서 가능한 줄바꿈 조합을 놓고 '전체적으로 가장 보기 좋은' 조합을 고르자는 거예요. 각 줄이 얼마나 어색한지를 '나쁨(badness)' 점수로 계산하고, 문단 전체 점수의 합이 최소가 되는 줄바꿈 지점들을 동적 계획법(dynamic programming)으로 찾아내요.
비유하자면 이래요. 그리디 방식은 이사할 때 상자에 잡히는 대로 짐을 꽉꽉 눌러 담다가 마지막 상자에 이불 하나만 남는 상황이고, Knuth-Plass는 전체 짐을 먼저 보고 상자마다 골고루 나눠 담는 거예요. 텍스트를 box(글자 덩어리), glue(늘었다 줄었다 하는 공백), penalty(줄바꿈에 매기는 벌점)라는 세 가지 요소로 모델링하는 것도 이 알고리즘의 유명한 부분이에요. 40년이 넘게 지난 지금도 TeX으로 조판한 논문과 책이 아름다운 이유가 바로 이거예요.
마이크로타이포그래피: 눈속임의 미학
Justif가 함께 챙기는 게 마이크로타이포그래피인데요. 대표적인 게 문장부호 내어쓰기(hanging punctuation)예요. 마침표나 따옴표 같은 작은 부호를 살짝 여백 쪽으로 밀어내면, 시각적으로는 텍스트 가장자리가 훨씬 반듯해 보이거든요. 또 글자 폭을 사람이 알아챌 수 없는 수준(1~2%)에서 미세하게 늘리고 줄여서 단어 간격 문제를 완화하는 기법도 있어요. 인쇄 조판에서 오래 다듬어진 장인 기술을 웹으로 이식하는 셈이에요.
브라우저도 조금씩 움직이고 있어요
사실 브라우저 진영도 이 문제를 알고 있어요. CSS에 text-wrap: pretty라는 속성이 생겼는데, 크롬은 문단 마지막 몇 줄 위주로 최적화하고 사파리는 문단 전체를 최적화하는 식으로 구현 수준이 서로 달라요. hyphens: auto로 하이픈 처리를 맡길 수도 있고요. 다만 브라우저 기본 기능은 아직 세밀한 제어가 안 되다 보니, 예전부터 Bram Stein의 typeset 같은 실험적 라이브러리가 이 빈틈을 메워왔고, Justif는 그 계보를 잇는 최신 시도라고 보면 돼요.
한국 개발자에게는
"한글은 어차피 글자 단위로 줄바꿈되니까 상관없지 않나?" 싶을 수 있는데요, 절반만 맞아요. 한글은 음절 단위로 끊을 수 있어서 양쪽 정렬의 부작용이 영문보다 덜하지만, 요즘 글에는 영문 용어, URL, 코드 조각이 잔뜩 섞이잖아요. 이런 혼합 텍스트에서 어색한 줄바꿈이 자주 생기거든요. word-break: keep-all을 썼다가 긴 영단어 때문에 레이아웃이 깨져본 경험, 다들 있으시죠? 블로그, 전자책 뷰어, 뉴스 서비스처럼 '읽는 경험'이 핵심인 프로덕트를 만든다면 이런 조판 기술은 분명한 차별화 포인트예요. 그리고 Knuth-Plass 알고리즘 자체가 동적 계획법의 아름다운 실전 사례라서, 코딩 테스트용 DP 문제에 지친 분들에게 알고리즘 공부 소재로도 정말 좋아요.
한 줄 정리: 40년 된 TeX의 줄바꿈 알고리즘은 여전히 브라우저보다 아름답고, 이제 웹에서도 그 품질을 빌려 쓸 수 있게 됐다.
여러분은 서비스 만들 때 본문 타이포그래피에 얼마나 신경 쓰세요? "그런 건 아무도 안 알아본다" 파인지, "디테일이 완성도를 만든다" 파인지 궁금하네요.
🔗 출처: Hacker News