화면에는 왜 고딕인가

KRDS DS-028 — 가독성이 높은 고딕 계열 서체를 사용하고 있다.

0. 들어가며 — 글꼴의 ‘종류’

지난 27편에서 정부 표준 글꼴 Pretendard GOV를 봤습니다. 이번 편은 한 걸음 물러나, 그 글꼴이 속한 ‘종류’ 를 이야기합니다 — 고딕 계열(산세리프).

글꼴은 크게 두 종류로 나뉩니다. 고딕(돋움·산세리프) 과 명조(바탕·세리프). 신문이나 책 본문에서 흔히 보는, 획 끝에 작은 삐침(장식)이 있는 글꼴이 명조(세리프)입니다. 반면 획이 균일하고 깔끔하게 떨어지는, 삐침 없는 글꼴이 고딕(산세리프)입니다. Pretendard GOV는 고딕 계열이죠.

DS-028은 화면 본문에 가독성 높은 고딕 계열을 쓰라고 규정합니다. 왜 명조가 아니라 고딕일까요? 종이에서는 명조가 더 읽기 좋다는데, 화면에서는 왜 다를까요? 이번 편은 화면이라는 매체에서 고딕이 왜 적합한지, 그 가독성의 원리를 풀어냅니다.

1. 규칙 원문 — 한 가지 방향

DS-028 (디자인 스타일 > 타이포그래피) “가독성이 높은 고딕 계열 서체를 사용하고 있다.”

“고딕 계열 서체”

획에 삐침(세리프)이 없는 산세리프 글꼴입니다. 돋움체로도 불립니다. 한글의 고딕, 영문의 산세리프가 여기 해당합니다.

“가독성이 높은”

단순히 고딕이면 되는 게 아니라 가독성이 좋은 고딕이어야 합니다. 같은 고딕 계열이라도 너무 가늘거나, 획 간격이 답답하거나, 글자 구분이 모호하면 가독성이 떨어지니까요. Pretendard GOV는 이 ’가독성 높은 고딕’의 대표입니다(27편).

정리: 화면 본문에는 가독성 좋은 고딕(산세리프) 계열을 쓰라. 이게 DS-028입니다.

2. 고딕 vs 명조 — 화면과 종이의 차이

왜 화면에는 고딕일까요? 매체의 차이를 이해해야 합니다.

명조(세리프)는 종이에 강하다

명조의 삐침(세리프)은 본래 가독성을 돕는 장치입니다. 종이에 인쇄된 작은 글씨에서, 삐침이 글자들을 가로로 연결해 시선이 한 줄을 따라 흐르도록 돕습니다. 그래서 신문·책처럼 고해상도로 인쇄된 긴 본문에서는 명조가 읽기 좋습니다. 인쇄는 해상도가 매우 높아, 삐침 같은 섬세한 디테일이 또렷하게 재현되니까요.

고딕(산세리프)은 화면에 강하다

그런데 화면은 다릅니다. 화면은 픽셀로 이루어져 있고, 특히 작은 글씨나 저해상도 화면에서는 섬세한 삐침이 뭉개지거나 흐릿하게 표현됩니다. 명조의 장점이던 삐침이, 화면에서는 오히려 글자를 지저분하게 만드는 것이죠. 반면 고딕은 획이 균일하고 단순해서, 픽셀로 표현해도 또렷하고 깔끔합니다. 작은 크기, 다양한 해상도에서도 안정적으로 읽힙니다.

그래서 화면 환경에서는 고딕이 표준이 됐습니다. 웹·앱의 본문 글꼴이 대부분 산세리프인 이유죠. 다양한 기기, 다양한 화면 크기, 다양한 해상도에서 일관되게 읽히려면 고딕이 유리합니다. 정부 서비스는 PC·태블릿·모바일, 고가·저가 기기를 가리지 않고 모든 국민이 쓰므로, 어떤 화면에서도 또렷한 고딕이 적합합니다.

조금 더 깊이 들어가면, 이 차이는 ’획의 굵기 대비’와도 관련됩니다. 명조는 가로획이 가늘고 세로획이 굵은, 획마다 굵기가 다른 글꼴입니다. 이 굵기 변화가 종이에서는 우아함과 리듬감을 주지만, 화면에서는 가는 가로획이 저해상도에서 사라지거나 흐릿해지기 쉽습니다. 반면 고딕은 모든 획의 굵기가 비교적 균일해서, 어떤 획도 사라지지 않고 또렷하게 유지됩니다. 화면의 픽셀 그리드 위에서 균일한 굵기의 고딕이 더 안정적으로 재현되는 것이죠. 특히 작은 글씨일수록 이 차이는 결정적입니다 — 명조의 섬세한 디테일은 작아질수록 무너지지만, 고딕의 단순함은 작아져도 버팁니다.

흥미롭게도 최근에는 고해상도 화면(레티나 디스플레이 등)이 보편화되면서 화면에서도 명조가 꽤 잘 재현됩니다. 하지만 정부 서비스는 최신 고가 기기만을 전제할 수 없습니다. 오래된 기기, 저가 모니터, 작은 화면을 쓰는 사용자까지 모두 고려해야 하죠. ’가장 좋은 환경’이 아니라 ’가장 열악한 환경’에서도 읽혀야 한다는 것 — 이것이 명도 대비에서 본 원칙(2편)과 똑같이 글꼴 선택에도 적용됩니다. 그래서 정부 서비스는 어떤 화면에서도 안전한 고딕을 표준으로 삼습니다.

3. 가독성이라는 공공의 가치

DS-028이 ’가독성’을 강조하는 데는 공공서비스의 특수성이 있습니다.

정부 서비스의 글은 ‘읽고 싶어서’ 읽는 글이 아니라 ‘읽어야 해서’ 읽는 글입니다. 약관, 신청 안내, 자격 요건, 유의사항… 재미로 보는 게 아니라 필요해서 보는 정보죠. 게다가 그 내용을 정확히 이해하지 못하면 사용자가 손해를 봅니다. 그래서 정부 서비스의 글꼴은 무엇보다 ‘정확하고 편하게 읽히는 것’ 이 우선입니다. 멋이나 개성보다 가독성입니다.

또한 정부 서비스의 사용자층은 폭넓습니다. 젊은 사람부터 고령자까지, 시력 좋은 사람부터 저시력자까지요. 가독성 높은 고딕은 이 폭넓은 사용자 모두에게 안정적으로 읽힙니다. 개성 강한 글꼴은 젊은 디자이너 눈에는 멋질지 몰라도, 고령 사용자에게는 읽기 어려울 수 있습니다. 가독성을 최우선으로 하는 고딕 선택은, 결국 ’모두가 읽을 수 있게’라는 공공의 원칙을 글꼴에 적용한 것입니다.

이 점에서 DS-028은 색상의 명도 대비(2편)와 같은 정신입니다. 색에서 ’잘 보이는 것’이 우선이었듯, 글꼴에서도 ’잘 읽히는 것’이 우선입니다. 둘 다 ’예쁨’보다 ’접근성’을 앞세우는 공공서비스의 원칙을 담고 있습니다.

이 원칙은 디자인 현장에서 종종 갈등을 일으킵니다. 새 홈페이지를 만들 때, 디자이너나 기관은 ’우리만의 개성 있는 글꼴’로 차별화하고 싶어 합니다. 특별한 글꼴이 기관을 돋보이게 한다고 여기는 것이죠. 하지만 공공서비스에서 이 차별화 욕구는 신중해야 합니다. 개성 강한 글꼴은 한두 단어의 제목에서는 멋질지 몰라도, 긴 본문을 읽을 때는 피로하고, 고령·저시력 사용자에게는 장벽이 됩니다. 멋을 위해 가독성을 희생하면, 정작 정보를 가장 필요로 하는 사용자가 그 정보에서 멀어집니다.

그래서 공공 디자인의 성숙함은 ’얼마나 독특한 글꼴을 쓰느냐’가 아니라 ’얼마나 모두가 읽을 수 있게 하느냐’로 판단해야 합니다. 차별화는 글꼴의 독특함이 아니라, 콘텐츠의 질과 서비스의 편리함으로 이루는 것입니다. 가독성 높은 고딕이라는 절제된 선택은, 개성을 포기하는 것이 아니라 ’모든 국민이 읽을 수 있는 서비스’라는 더 중요한 가치를 택하는 것입니다. 좋은 글꼴은 자신을 드러내지 않고 내용을 또렷이 전달하는, 투명한 창 같은 글꼴입니다.

4. DS-027과의 관계 — 글꼴과 종류

DS-027(Pretendard GOV)과 DS-028(고딕 계열)은 한 쌍입니다. 어떻게 연결될까요?

DS-027 — ’어떤 글꼴’을 쓸지(Pretendard GOV)를 규정합니다.

DS-028 — ’어떤 종류’의 글꼴인지(고딕 계열)를 규정합니다.

Pretendard GOV는 고딕 계열이므로, DS-027을 지키면 DS-028은 자연히 충족됩니다. 그렇다면 DS-028은 왜 별도로 있을까요? 두 가지 이유입니다.

첫째, 원칙을 명시하기 위해서입니다. “Pretendard GOV를 쓰라”는 구체적 지정이고, “고딕 계열을 쓰라”는 그 배경 원칙입니다. 원칙이 명시돼 있으면, 왜 그 글꼴인지 이해하고 응용할 수 있습니다. 둘째, 예외 상황의 기준이 되기 때문입니다. 부득이 Pretendard GOV를 못 쓰는 경우라도, 최소한 ’가독성 높은 고딕 계열’이라는 원칙은 지켜야 합니다. 구체적 지정(027)과 일반 원칙(028)이 함께 있으면, 다양한 상황에 대응할 수 있습니다.

5. 흔한 위반 패턴

DS-028 위반은 이렇게 나타납니다.

함정 ① 본문에 명조 사용. 본문을 명조(세리프)로 → 화면 작은 글씨에서 가독성 저하. → 고딕 계열로.

함정 ② 장식적 글꼴. 손글씨체·장식체를 본문에 → 읽기 어려움. → 가독성 높은 고딕.

함정 ③ 너무 가는 고딕. 고딕이지만 획이 너무 가늘어(thin) 흐릿 → 가독성 부족. → 적정 두께(다음 편 DS-030).

함정 ④ 저품질 고딕. 글자 구분이 모호한 고딕 → 정보 오인. → 가독성 검증된 글꼴(Pretendard GOV).

핵심: 고딕이면 되는 게 아니라 가독성 높은 고딕이어야 합니다. 화면 본문의 제1 가치는 읽힘입니다.

6. 무엇을 점검하나

DS-028은 본문 글꼴이 가독성 높은 고딕 계열인지를 봅니다.

고딕 계열 — 본문 글꼴이 산세리프(고딕)인가, 명조(세리프)인가.

가독성 — 글자 구분이 명확하고 획이 적정한가.

장식체 여부 — 본문에 장식적·손글씨체가 쓰이지 않았는가.

일관성 — 본문 전반에 고딕 계열이 일관 적용됐는가.

7. 누가 담당하나

역할	책임
디자이너	본문 글꼴을 가독성 높은 고딕으로 선택
퍼블리셔/개발	고딕 계열 웹폰트 적용
접근성 담당	다양한 크기·기기에서 가독성 검증

8. 우리 사이트에 해당될까?

적용 대상

기관 유형	DS-028 적용
중앙행정기관(대표)	✅ 필수
중앙행정기관(운영)	✅ 필수
공공기관	✅ 필수
지방자치단체	✅ 필수

본문 글자가 있는 모든 사이트 = 해당. Pretendard GOV(고딕)를 쓰면 자동 충족됩니다.

예외 — 디스플레이·배너

본문은 고딕이지만, 시각적 효과가 필요한 디스플레이·배너에는 고딕이 아닌 글꼴을 쓸 수 있습니다(다음 편 DS-029). DS-028은 ’읽는 본문’의 원칙입니다.

9. 단계별 개선 방법

Before / After

/* ❌ Before: 명조 또는 장식체 본문 */ body { font-family: "바탕", serif; } /* ✅ After: 가독성 높은 고딕 */ body { font-family: 'Pretendard GOV', system-ui, sans-serif; }

정비 순서

본문 글꼴 점검 — 명조·장식체로 된 본문을 고딕으로.

Pretendard GOV 적용 — 가독성 검증된 표준 고딕으로(27편).

두께 점검 — 너무 가는 고딕이면 적정 두께로(30편).

디스플레이 구분 — 배너 등 예외 영역만 별도 글꼴 허용.

10. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 본문 글꼴이 고딕(산세리프) 인가요, 명조(세리프)인가요?

□ 글자 구분이 명확해 읽기 편한가요?

□ 본문에 손글씨체·장식체를 쓰고 있지 않나요?

□ 작은 글씨도 또렷하게 보이나요?

□ 다양한 기기에서 일관되게 읽히나요?

❓ FAQ

Q1. 명조가 더 고급스러운데 본문에 쓰면 안 되나요? 종이 인쇄에서는 명조가 좋지만, 화면(특히 작은 글씨·저해상도)에서는 명조의 삐침이 뭉개져 가독성이 떨어집니다. 화면 본문은 고딕이 적합합니다. 고급스러움보다 읽힘이 우선입니다.

Q2. 고딕이면 아무거나 써도 되나요? 아닙니다. ‘가독성 높은’ 고딕이어야 합니다. 같은 고딕이라도 글자 구분이 모호하거나 획이 부적절하면 가독성이 떨어집니다. Pretendard GOV처럼 검증된 글꼴을 쓰는 것이 안전합니다.

Q3. 제목에도 고딕을 써야 하나요? 본문은 고딕이 기본입니다. 제목도 보통 고딕을 쓰되, 시각 효과가 필요한 디스플레이·배너 제목에는 다른 글꼴을 쓸 수 있습니다(DS-029). 다만 ’읽는 본문’은 고딕 원칙입니다.

Q4. 명조를 써야 하는 콘텐츠도 있지 않나요? 긴 글을 차분히 읽는 특수한 콘텐츠(예: 문학적 콘텐츠)에서 명조가 어울릴 수 있지만, 일반 정부 서비스의 안내·본문은 고딕이 표준입니다. 가독성과 통일성을 위해서입니다.

Q5. Pretendard GOV를 쓰면 DS-028도 되나요? 네. Pretendard GOV는 가독성 높은 고딕 계열이므로, 27편을 지키면 28편도 자동 충족됩니다. 두 규칙은 한 쌍입니다.

11. 마무리 — 읽힘이 먼저다

DS-028의 메시지는 단순하고 분명합니다.

화면 본문의 제1 가치는 멋이 아니라 읽힘이다 — 그래서 가독성 높은 고딕을 쓴다.

종이에서는 명조가, 화면에서는 고딕이 읽기 좋습니다. 매체가 다르면 적합한 글꼴도 다릅니다. 정부 서비스는 다양한 기기와 다양한 사용자가 ‘읽어야 해서’ 읽는 곳이므로, 어떤 화면에서도 또렷한 고딕이 적합합니다. 멋진 글꼴의 유혹을 절제하고 가독성을 택하는 것 — 이는 색에서 명도 대비를 우선한 것과 같은, 공공서비스의 ’모두가 읽을 수 있게’라는 원칙입니다.

다음 편은 이 고딕 원칙의 ’예외’를 다룹니다. DS-029 — “시각적 효과를 극대화할 수 있는 디스플레이나 배너에만 고딕 계열이 아닌 서체를 사용한다.” 본문은 고딕이지만, 어디에 다른 글꼴을 허용하는지 그 경계를 살펴봅니다.

다음 편 예고 ▶ 「029. 시각적 효과를 극대화할 수 있는 디스플레이나 배너에만 고딕 계열이 아닌 서체를 사용하고 있다.」

우리 사이트 본문이 가독성 높은 고딕인지 확인하려면? ViewCheck는 본문 글꼴이 고딕(산세리프) 계열인지, 명조·장식체가 본문에 쓰이지 않았는지, 다양한 크기에서 가독성이 확보되는지를 진단합니다.

📚 참고 출처

KRDS 서체(Typography) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_03.html

WCAG 2.1 가독성 관련 지침 — https://www.w3.org/WAI/WCAG21/Understanding/

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준