한글 웹 타이포그래피 (2) 명조와 고딕, 화면에서 무엇을 언제

한글로 본문을 조판할 때 거의 매번 처음 걸리는 갈림길이 있다. 명조로 갈까, 고딕으로 갈까. 이 시리즈의 첫 글에서 나는 서구의 본문 규칙을 한글에 그대로 옮기면 어긋난다는 이야기를 했다. 서체 선택도 그 연장선에 있다. 웹은 고딕이라는 말은 워낙 굳어져서 이유를 묻지 않고 따르게 되는데, 그 이유의 절반은 이미 낡았다.

이번 글에서 나는 두 가지를 하려고 한다. 하나는 명조와 고딕이 실제로 무엇이 다른지 획 구조에서 짚는 것. 다른 하나는 화면에서는 고딕이 낫다는 통념이 어디서 왔고 지금은 얼마나 유효한지를 정직하게 따져보는 것이다. 결론부터 말하면 나는 본문 기본을 여전히 고딕으로 두지만, 그건 명조가 화면에서 뭉개져서가 아니다.

명조와 고딕은 획에서 갈린다

한글 서체를 가르는 가장 굵은 선은 부리의 유무다. 부리는 획의 시작과 끝, 꺾이는 자리에 돋아난 작은 돌기를 말한다. 명조는 이 부리를 가진 세리프(serif) 계열이고, 고딕은 부리가 없는 산세리프(sans-serif) 계열이다. 한글 활자 용어로는 명조를 바탕체, 고딕을 돋움체라고 부르기도 한다.

명조는 획 자체가 균일하지 않다. 가로획은 가늘고 세로획은 굵다. 붓으로 쓴 흔적처럼 획이 시작될 때와 끝날 때 두께가 변하고, 그 변화가 부리에서 절정에 이른다. 그래서 글자마다 리듬과 표정이 생긴다. 신문이나 문학 단행본의 본문에서 오래 봐온 그 인상이 명조의 것이다.

고딕은 반대다. 획의 두께가 처음부터 끝까지 거의 일정하고, 끝에 삐침이 없다. 장식을 걷어낸 만큼 개별 글자의 개성은 줄지만 글자들이 나란히 놓였을 때의 균질함은 커진다. 화면 UI에서 흔히 보는 그 깔끔하고 중립적인 느낌이 여기서 나온다. Pretendard나 본고딕(Noto Sans) 같은 웹 본문용 서체가 전부 이 계열이다.

쉽게 말해 명조는 획에 사연이 있고 고딕은 획이 담백하다. 이 구조 차이가 화면에서 어떻게 다뤄지느냐가 다음 이야기다.

화면에서는 고딕이라는 통념의 출처

웹 초창기에 빠르게 굳은 규칙이 하나 있다. 화면에서는 산세리프가 낫다는 것. 근거는 해상도였다. 1990년대 모니터는 픽셀이 굵어서, 명조의 가느다란 가로획과 부리의 섬세한 돌기를 표현할 픽셀이 모자랐다. 이때 개입하는 게 힌팅(hinting)이다. 힌팅은 서체 파일 안에 담긴 지시로, 글자의 윤곽선을 픽셀 격자에 어떻게 맞춰 그릴지 렌더러에게 알려준다. 픽셀이 부족한 저해상도에서 획이 사라지거나 뭉개지지 않게 잡아주는 보정 장치다.

문제는 명조가 힌팅에 훨씬 까다롭다는 데 있었다. 두께가 변하는 획과 작은 부리를 몇 개 안 되는 픽셀에 욱여넣으면, 힌팅이 잘 되어도 부리가 과하게 두꺼워지거나 가로획이 흐려지기 쉬웠다. 고딕은 애초에 균일한 획이라 격자에 얹기가 수월했다. 그래서 작은 크기의 화면 본문에서는 고딕이 안정적이라는 실무 감각이 자리 잡았다. 여기까지는 그 시절 기준으로 타당한 이야기였다.

그 논리는 Retina 이후로 약해졌다

여기서 정직하게 짚어야 할 게 있다. 저해상도라서 명조가 뭉개진다는 힌팅 논리는 지금 화면에는 예전만큼 들어맞지 않는다.

고해상도 디스플레이가 흔해지면서 전제가 바뀌었다. 보통 300ppi를 넘는 고밀도 화면에서는 픽셀이 눈에 안 보일 만큼 작아서, 힌팅으로 획을 격자에 억지로 맞출 필요 자체가 줄었다. 실제로 애플의 Retina용 텍스트 렌더러는 힌팅 정보를 아예 무시하고 그린다. 획을 격자에 스냅하는 대신 원래 윤곽을 그대로 부드럽게 표현하는 쪽으로 간 것이다. 그 결과 예전엔 저해상도에서 흐려지던 명조의 부리와 두께 변화도 인쇄물에 가깝게 또렷이 나온다.

정리하면 이렇다. 저해상도에서 명조가 불리했던 건 사실이지만, 그 불리함의 원인이던 픽셀 부족과 힌팅 한계는 고밀도 화면에서 상당 부분 사라졌다. 그러니 화면이니까 무조건 고딕이라는 주장의 근거로 힌팅을 드는 건 이제 낡은 논리다. 나부터 한동안 이 낡은 이유를 관성으로 되뇌었다.

가독성 우열은 생각보다 증거가 얇다

한 걸음 더 나가면 더 불편한 사실이 있다. 세리프와 산세리프 중 무엇이 더 잘 읽히느냐는 물음 자체가 실증적으로 잘 안 갈린다.

이건 오래된 논쟁이다. 세리프와 산세리프의 우열을 가리려고 수십 편의 연구를 검토한 정리들이 여럿 나왔는데, 공통된 결론은 어느 쪽이 우월하다고 단정하기엔 근거가 너무 엇갈린다는 것이었다. 이후의 연구들도 대체로 같은 방향이다. 조판이 잘 된 글에서는 세리프와 산세리프 사이에 읽기 속도나 이해도의 일관된 유의미한 차이가 나타나지 않는다는 정리가 반복된다. 오히려 서체 종류보다 레이아웃의 완성도, 독자가 그 서체에 얼마나 익숙한지, 인쇄냐 화면이냐 하는 매체가 더 크게 작용했다.

그러니 명조가 더 우아하고 잘 읽힌다거나 고딕이 과학적으로 더 명료하다는 식의 단정은 둘 다 근거가 약하다. 서체 하나 바꿔서 완독률이 극적으로 오를 거라는 기대는 접는 게 맞다. 이 글의 뒤에 나오는 내 선택도 실증 상수가 아니라 실무 관습과 구조에서 유도한 휴리스틱이라는 걸 먼저 밝혀둔다.

그런데도 나는 본문 기본을 고딕으로 둔다

힌팅 논리가 낡았고 가독성 우열도 안 갈린다면, 왜 여전히 고딕을 기본으로 둘까. 근거를 화면 해상도에서 다른 데로 옮기면 이유가 남는다.

첫째는 중립성이다. 고딕은 표정이 옅어서 어떤 주제, 어떤 톤의 글에도 무난하게 얹힌다. 기술 문서에도, 가벼운 에세이에도, 제품 UI에도 튀지 않는다. 개인 블로그처럼 글의 성격이 매번 달라지는 곳에서는 이 무난함이 자산이다.

둘째는 균일함이다. 획 두께가 일정하니 글자들이 나란히 놓였을 때 밀도가 고르고, 화면·브라우저·운영체제마다 렌더링이 조금씩 달라져도 인상이 크게 흔들리지 않는다. 명조는 두께 대비가 커서 렌더링 환경을 더 탄다.

셋째는 작은 크기의 안정이다. 고해상도가 흔해졌다고 해도 세상 모든 화면이 Retina는 아니다. 저밀도 외장 모니터, 오래된 안드로이드 기기, 축소 표시되는 상황은 여전히 많다. 본문 17px 같은 작은 크기에서 획 두께 대비가 큰 명조는 이런 환경에서 더 쉽게 흔들린다. 고딕은 최악의 화면에서도 바닥이 덜 무너진다. 나는 최선의 화면이 아니라 최악의 화면을 기준으로 본문 서체를 고른다. 이게 지금 내가 고딕을 미는 진짜 이유다. 힌팅이 아니라 환경의 하한선이다.

명조가 빛나는 자리는 따로 있다

그렇다고 명조를 창고에 넣어둘 이유는 없다. 명조가 고딕보다 확실히 나은 맥락이 있다.

큰 크기에서다. 부리와 두께 변화는 글자가 커질수록 또렷하게 살아난다. 24px 이하 본문에서 흐려지던 디테일이 40px 넘는 제목에서는 오히려 표정이 된다. 큰 인용구, 대문 제목, 표지 성격의 문구에서 명조는 고딕이 못 내는 격과 온도를 낸다.

긴 호흡의 읽기물에서다. 소설, 에세이, 회고처럼 독자가 오래 머무는 글에서는 명조의 리듬이 페이지에 결을 만든다. 앞서 말했듯 이게 이해도를 통계적으로 끌어올린다는 증거는 약하지만, 글의 분위기와 진지함을 전하는 톤의 장치로는 여전히 유효하다. 가독성의 문제가 아니라 인상의 문제로 접근하면 명조는 분명한 카드다.

예를 들어 이 블로그에서 평소 기술 글은 전부 고딕으로 가되, 어느 날 긴 개인 회고를 한 편 올린다고 하자. 그때 본문만 명조로 바꾸고 크기를 한 단계 키우면, 같은 사이트인데도 그 글만 결이 달라진다. 독자는 이유를 몰라도 톤의 전환을 느낀다. 이런 의도된 예외가 명조를 쓰는 제대로 된 방식이다. 기본을 흔들지 않으면서 특정한 글에만 온도를 얹는 것.

제목과 본문은 따로 정한다

서체 선택은 페이지 전체에 하나로 못 박을 필요가 없다. 제목과 본문은 조건이 다르기 때문이다.

본문은 작고, 길고, 오래 본다. 그래서 앞서 든 이유대로 균일하고 안정적인 고딕이 기본으로 안전하다. 제목은 크고, 짧고, 시선을 처음 붙드는 자리다. 여기서는 명조의 표정을 얹어도 리스크가 적다. 제목만 명조, 본문은 고딕으로 가는 조합이 실제로 흔한 이유가 이거다. 큰 크기에서 명조의 장점만 취하고, 작은 크기에서 명조의 약점은 피한다.

물론 반대로 갈 수도 있다. 브랜드 톤이 아주 정갈하고 글이 대부분 긴 읽기물이라면 본문까지 명조로 통일하는 선택도 성립한다. 핵심은 관성이 아니라 그 지면의 조건을 보고 정하는 것이다.

CSS로는 이렇게 스택을 나눠 잡아두면 관리가 편하다. 웹폰트가 늦게 오거나 실패해도 같은 계열의 시스템 서체로 떨어지도록 대체 서체를 계열별로 정렬해 둔다.

:root {
  /* 본문: 고딕(산세리프) 기본 */
  --font-body: "Pretendard", "Apple SD Gothic Neo",
    "Noto Sans KR", system-ui, sans-serif;
  /* 제목이나 특정 읽기물에만: 명조(세리프) */
  --font-serif: "Nanum Myeongjo", "Apple Myungjo",
    "Noto Serif KR", serif;
}

body {
  font-family: var(--font-body);
}

/* 명조는 기본이 아니라 의도된 예외로만 붙인다 */
.article--essay .markdown,
.display-title {
  font-family: var(--font-serif);
}

.article--essay 같은 클래스를 특정 글에만 붙이는 식으로, 명조를 전역이 아니라 국소적으로 켠다. 기본값은 건드리지 않고 예외만 표시하는 구조라 나중에 규칙을 되짚기도 쉽다.

정리하면

본문은 고딕을 기본으로 둔다. 단, 이유를 낡은 힌팅 논리에 두지 않는다. 고해상도에서 명조가 뭉개진다는 전제는 이제 약하다. 내가 고딕을 미는 진짜 근거는 어떤 화면에서도 무너지지 않는 중립성과 균일함, 그리고 작은 크기에서의 안정이다. 세리프와 산세리프의 가독성 우열은 실증이 얇으니, 서체 하나로 완독률을 바꾸려는 기대는 접는다.

그 위에서 명조를 언제 꺼낼지는 아래 조건으로 판단한다. 다음 중 하나 이상에 해당하면 명조를 검토한다.

• 큰 크기에서 쓴다. 40px 넘는 제목, 큰 인용구, 표지 문구처럼 부리가 살아나는 크기.
• 긴 호흡의 읽기물이다. 소설, 에세이, 회고처럼 독자가 오래 머무는 글.
• 톤을 의도적으로 전환하고 싶다. 특정 글에만 진지함이나 온도를 얹고 싶을 때.
• 지면 전체가 정갈한 브랜드 톤이고 글 대부분이 긴 읽기물이다. 이럴 땐 본문까지 명조로 통일하는 것도 성립.

이 조건들에 안 걸리면 그냥 고딕이다. 명조는 기본을 대체하는 게 아니라, 조건이 맞는 자리에만 얹는 예외로 다룬다.

다음 글에서는 이렇게 고른 본문 서체를 실제로 몇 px, 어떤 굵기로 앉힐지, 그리고 본문과 배경의 대비를 어떻게 잡을지를 다룬다. 서체를 정했으니 이제 크기와 무게 차례다.