한글에 밑줄을 그으면 줄이 글자 아래쪽에 붙는다. 급, 입, 글처럼 받침이 있는 글자는 받침 바닥에 줄이 겹쳐서, 링크 하나만 걸어도 글자가 뭉개져 보인다. 영문은 괜찮다. g나 y처럼 아래로 내려오는 꼬리 부분은 브라우저가 알아서 줄을 끊고 비켜 간다.
이 "비켜 가기"를 정하는 속성이 text-decoration-skip-ink다. 기본값 auto는 한글을 비켜 가지 않는다. 그런데 2026년 5월 크롬 148에 all 값이 들어오면서 이 값이 Baseline이 됐다. 이름만 보면 "한글도 비켜 가라"는 뜻이니 한글 밑줄 문제를 풀어 줄 것 같다.
직접 그려 보니 그렇지 않았다. 이 글은 크롬과 사파리에서 잰 결과와, 한글 밑줄에는 실제로 무엇을 써야 하는지에 대한 것이다.
지금 보고 있는 브라우저에서 먼저 보기
아래 세 줄은 이미지가 아니라 이 페이지에 들어 있는 텍스트다. 읽고 있는 브라우저가 직접 그린다.
auto gypsy 공급망 구입all gypsy 공급망 구입under gypsy 공급망 구입크롬이라면 두 번째 줄이 점선처럼 토막 나 있을 것이고, 사파리라면 첫 번째와 두 번째 줄이 똑같아 보일 것이다. 세 번째 줄은 어디서나 글자 아래로 떨어져 있다.
크롬과 사파리에서 잰 결과
맥에서 크롬 154와 사파리 27.0.1로 같은 페이지를 그렸다. 서체는 맥 기본 한글 서체인 Apple SD Gothic Neo, 30px, 밑줄은 잘 보이게 빨간색 2px이다.
| 크롬 154 | 사파리 27 | |
|---|---|---|
auto | 영문 꼬리만 비켜 감. 한글 받침과 겹침 | 같음 |
all | 한글 받침마다 끊어서 줄이 토막 남 | auto와 똑같이 그림 |
text-underline-position: under | 글자 아래로 내려가 이어진 줄 | 같음 |
정리하면 all은 한글과 줄이 겹치지 않게 해 주기는 한다. 겹치는 부분을 지우는 방식으로. 한글은 거의 모든 글자가 아래쪽 끝까지 획이 내려오기 때문에, 지우고 나면 글자 사이 빈틈에만 줄 조각이 남는다. 밑줄이라기보다 점선이다.
사파리는 CSS.supports('text-decoration-skip-ink', 'all')가 true이고 getComputedStyle로 읽어도 all이 나온다. 값은 받아들이는데 한글을 그릴 때는 auto와 차이가 없었다. 결국 all을 넣으면 크롬 사용자는 토막 난 줄을 보고, 사파리 사용자는 겹친 줄을 그대로 본다. 어느 쪽에서도 원하던 결과는 아니다.
Noto Sans KR과 Pretendard로도 같은 비교를 해 봤는데 양상은 똑같았다. 파이어폭스와 윈도우의 맑은 고딕은 이번에 재지 못했다.
명세가 이미 이렇게 정해 두었다
기본값 auto가 한글을 비켜 가지 않는 것은 브라우저가 게을러서가 아니다. CSS Text Decoration 4 명세가 일부러 그렇게 정했다.
구현 경험상, 밑줄 친 텍스트에 표의 문자가 섞여 있으면 잉크 건너뛰기는 바람직하지 않은 결과를 내는 경우가 많다. 밑줄 위치가 거의 모든 글리프와 부딪혀서 줄의 조각만 드문드문 남기 때문이다. (…) 따라서
auto일 때 잉크 건너뛰기를 구현한 UA는 CJK 맥락에서는 이를 삼가야 한다.
여기서 말하는 CJK에는 한자·가나뿐 아니라 한글(Hangul)도 명시되어 있다. 크롬에서 본 점선이 명세가 피하려던 바로 그 모습이다. all은 "그래도 끊어 달라"고 명시적으로 요청하는 값이다. 그리고 같은 단락에서 원래 해법을 이미 짚어 두었다.
원칙적으로는 작성자가
text-underline-position: under(또는text-underline-offset)로 밑줄을 글리프와 부딪히지 않는 더 낮은 위치로 옮겨서 해결할 수 있다.
한글 밑줄에는 text-underline-position: under
a {
text-underline-position: under;
}under는 밑줄을 기준선이 아니라 글자가 내려가는 가장 아래 지점 밑에 긋는다. 한글 받침과 영문 꼬리보다 아래로 내려가니 비켜 갈 것 자체가 없어지고, 줄은 끊기지 않은 채로 남는다. 크롬 33, 파이어폭스 74, 사파리 12.1부터 지원했고 2023년 1월에 이미 Baseline widely가 됐다. 새 기능을 기다릴 필요가 없었던 것이다.
간격을 직접 정하고 싶으면 text-underline-offset을 쓴다.
a {
text-underline-offset: 0.2em;
}기본 위치에서 그만큼 아래로 민다. 글자 크기에 비례하도록 em으로 주는 편이 낫다. 30px 기준으로 0.2em이면 세 서체 모두 받침과 떨어졌다. 다만 서체마다 받침이 내려오는 깊이가 달라서 값을 서체에 맞춰 확인해야 하고, under는 서체 정보를 보고 스스로 위치를 정한다. 서체가 바뀔 수 있는 사이트라면 under 쪽이 손이 덜 간다.
두 방법 모두 기본값 skip-ink: auto와 같이 쓰면 된다. 한글은 줄이 이미 아래에 있어서 끊을 일이 없고, 그보다 더 내려오는 영문 꼬리가 있으면 auto가 그 부분만 비켜 간다.
under를 쓸 때 볼 것
영문이 대부분인 페이지에서는 줄이 낮아 보일 수 있다. 명세도 이 점을 짚는다. CJK에 맞춘 밑줄 위치는 대부분이 라틴 문자인 텍스트에서는 어색할 수 있다는 것이다. 한국어 사이트라면 문제가 안 되지만, 다국어 사이트에서 영문 페이지까지 같은 규칙을 걸 때는 :lang(ko)로 범위를 좁힐 수 있다.
:lang(ko) a {
text-underline-position: under;
}밑줄을 지우지 말고 고칠 것. 한글 밑줄이 보기 싫어서 링크의 text-decoration을 아예 none으로 끄는 사이트가 많다. 본문 속 링크를 색으로만 구분하면, 색을 구별하기 어려운 사용자는 어디가 링크인지 알 수 없다. KWCAG 2.2 5.4.1 색에 무관한 콘텐츠 인식이 이 경우다. 밑줄이 거슬린 이유가 겹침이었다면 under 한 줄로 해결되니, 밑줄을 살려 두는 편이 낫다.
정리
text-decoration-skip-ink: all은 2026년 5월에 Baseline이 됐지만, 한글에 걸면 크롬에서는 밑줄이 토막 나고 사파리에서는 변화가 없었다.- 기본값
auto가 한글을 비켜 가지 않는 것은 명세가 의도한 동작이다. - 한글 밑줄이 받침과 겹치는 문제는
text-underline-position: under로 줄을 내려서 푼다. 2020년부터 모든 주요 브라우저가 지원한다. - 간격을 직접 정하려면
text-underline-offset: 0.2em처럼em단위로 준다.