본문은 고딕, 그러나 한 군데는 예외

KRDS DS-029 — 시각적 효과를 극대화할 수 있는 디스플레이나 배너에만 고딕 계열이 아닌 서체를 사용하고 있다.

0. 들어가며 — 규칙에 숨통을 트다

지난 28편에서 “본문은 가독성 높은 고딕 계열을 쓰라”고 했습니다. 그러면 자연스러운 질문이 생깁니다 — “그럼 정부 사이트는 무조건 밋밋한 고딕만 써야 하나? 개성을 표현할 자리는 전혀 없나?”

DS-029가 그 숨통을 틔워 줍니다. 결론부터 — 있습니다. 단, 아주 좁게. 시각적 효과가 중요한 디스플레이나 배너에 한해서는 고딕이 아닌 다른 서체(개성 있는 글꼴)를 쓸 수 있습니다.

이 규칙의 묘미는 ‘예외를 허용하되, 그 범위를 엄격히 한정’한다는 데 있습니다. 무조건 고딕만 강요하면 디자인이 경직되고, 아무 데나 개성 글꼴을 허용하면 가독성이 무너집니다. DS-029는 그 사이에서 균형을 잡습니다 — 읽는 본문은 고딕으로 지키되, ’읽기보다 보는’ 디스플레이·배너에만 개성을 허용하는 것이죠. 이번 편은 이 예외의 경계가 어디인지, 왜 그렇게 좁게 그어졌는지를 풀어냅니다.

1. 규칙 원문 — 예외의 조건

DS-029 (디자인 스타일 > 타이포그래피) “시각적 효과를 극대화할 수 있는 디스플레이나 배너에만 고딕 계열이 아닌 서체를 사용하고 있다.”

핵심은 ‘~에만’ 이라는 한정입니다.

“디스플레이나 배너”

예외가 허용되는 장소입니다. 디스플레이(아주 큰 제목·헤드라인)나 배너(시각적 강조 영역)처럼, 정보를 ’읽는다’기보다 ’본다’에 가까운 영역입니다.

“고딕 계열이 아닌 서체를 ~에만”

그런 영역에 한해서만 고딕이 아닌 글꼴을 쓸 수 있다는 뜻입니다. 행간의 의미는 명확합니다 — 본문 등 그 외 영역에는 절대 쓰지 말라. ’~에만’이라는 말이 예외를 좁게 가둡니다.

정리: 개성 있는 비고딕 글꼴은 디스플레이·배너에만 허용, 본문에는 금지. 이게 DS-029입니다.

2. 왜 디스플레이·배너만 예외인가

예외가 하필 디스플레이·배너인 이유가 있습니다. 그 영역의 성격 때문입니다.

디스플레이와 배너는 보통 크고, 짧고, 한 번 보는 텍스트입니다. 큰 헤드라인 한 줄, 배너의 캠페인 문구 한 마디. 사용자는 이걸 한 글자씩 정독하지 않고, 한눈에 인상으로 받아들입니다. 그래서 여기서는 가독성보다 시각적 임팩트·분위기가 더 중요할 수 있습니다. 개성 있는 글꼴이 그 인상을 강하게 만들죠.

반면 본문은 정반대입니다. 작고, 길고, 정독해야 합니다. 약관·안내·설명을 한 글자씩 읽어야 하죠. 여기서 개성 글꼴을 쓰면 가독성이 무너집니다. 그래서 본문은 절대 고딕을 벗어나면 안 됩니다.

DS-029의 논리는 ’글자가 하는 일’에 따라 글꼴을 다르게 허용하는 것입니다. 읽는 글자(본문)는 고딕으로 가독성을, 보는 글자(디스플레이·배너)는 개성으로 임팩트를. 같은 화면이라도 텍스트의 역할에 따라 다른 원칙이 적용됩니다. 이는 색에서 ’본문 4.5:1, 큰 글씨 3:1’로 기준을 달리한 것(2편)과 같은 발상입니다 — 역할이 다르면 기준도 다릅니다.

3. 예외를 ‘좁게’ 가두는 이유

DS-029의 진짜 핵심은 예외를 허용한다는 것보다, 그 예외를 매우 좁게 한정한다는 데 있습니다. 왜 그렇게 조일까요?

예외가 넓으면 규칙이 무력해지기 때문입니다. “특별한 경우엔 개성 글꼴 OK”라고 느슨하게 두면, 모든 게 ’특별한 경우’가 되어버립니다. 제목도, 소제목도, 강조 문구도 다 “시각 효과가 필요하다”며 개성 글꼴을 쓰고, 결국 화면이 글꼴 잡탕이 됩니다. 그래서 DS-029는 예외 장소를 ’디스플레이·배너’로 콕 집어, 그 외에는 일절 허용하지 않습니다. 좁은 예외만이 본문의 고딕 원칙을 지킵니다.

이 ‘좁은 예외’ 설계는 디자인 시스템의 지혜입니다. 규칙을 완전히 경직되게 만들면 현실의 다양한 요구를 못 담고, 너무 느슨하게 만들면 규칙이 의미를 잃습니다. DS-029는 ’명확한 한 곳만 예외’라는 방식으로 둘을 모두 피합니다 — 개성의 여지를 주되, 그 여지가 본문을 침범하지 못하게 벽을 세운 것이죠. 예외는 있되, 경계는 분명합니다.

그래서 실무에서 판단 기준은 명확합니다. “이 텍스트가 디스플레이나 배너인가?”가 ‘O’면 개성 글꼴을 고려할 수 있고, ’X’면 무조건 고딕입니다. 애매하면 고딕입니다. ’읽는 텍스트’라면 무조건 고딕이라는 원칙을 기본값으로 두고, 정말 ’보는 텍스트’(큰 헤드라인·배너)일 때만 예외를 적용하는 것이 안전합니다.

이 ‘좁은 예외’ 설계는 846개 규칙 전반에서 반복되는 패턴이기도 합니다. 색에서 브랜드색을 Primary 하나에만 허용한 것(DS-007), 강조색을 5%로 가둔 것(DS-012), 투명도를 오버레이엔 쓰되 비활성엔 금지한 것(DS-010·011) — 모두 ’원칙을 세우되 명확히 한정된 예외를 둔다’는 같은 구조입니다. KRDS가 이렇게 일관된 방식으로 규칙을 설계하는 데는 이유가 있습니다. 규칙을 만드는 사람과 지키는 사람이 다르고, 시간이 지나면 담당자도 바뀌기 때문입니다. “상황에 따라 적절히 판단하세요” 같은 모호한 규칙은 사람마다 다르게 해석되어 결국 무너지지만, “디스플레이·배너에만”처럼 경계가 분명한 규칙은 누가 보든 같은 판단을 내리게 합니다.

그래서 DS-029의 좁은 예외는 디자이너의 창의성을 억압하는 게 아니라, 오히려 창의성이 안전하게 발휘될 자리를 명확히 지정해 주는 것입니다. “여기(디스플레이·배너)서는 마음껏 개성을 발휘하되, 본문은 건드리지 말라”는 명확한 선이 있으면, 디자이너는 죄책감 없이 그 자리에서 자유를 누리고, 사용자는 본문에서 안정된 가독성을 보장받습니다. 모두에게 이로운 경계인 셈입니다. 좋은 규칙은 자유와 질서를 대립시키지 않고, 각자의 자리를 정해 공존하게 합니다.

4. 예외에도 절제가 필요하다

디스플레이·배너에 개성 글꼴이 허용된다고 해서, 아무 글꼴이나 마구 써도 된다는 뜻은 아닙니다. 여기에도 절제가 필요합니다.

첫째, 개성 글꼴도 너무 읽기 어려우면 안 됩니다. 디스플레이·배너의 텍스트도 결국 사용자가 인지해야 하는 정보입니다. 지나치게 장식적이어서 무슨 글자인지 모를 정도라면, 시각 효과는커녕 메시지 전달에 실패합니다. ‘개성 있되 알아볼 수 있는’ 선을 지켜야 합니다.

둘째, 여기서도 색약·저시력 사용자를 고려해야 합니다. 디스플레이·배너의 큰 텍스트도 충분한 대비를 가져야 하고(2편), 그 텍스트가 중요한 정보라면 본문에도 같은 정보가 있어야 합니다. 개성 글꼴로 된 배너 문구가 유일한 정보 전달 수단이어서는 안 됩니다.

셋째, 글꼴 가짓수도 절제해야 합니다. 디스플레이·배너마다 다른 개성 글꼴을 쓰면 화면이 산만해집니다. 예외를 허용하더라도, 그 예외 글꼴 역시 한두 개로 제한해 일관성을 유지하는 것이 좋습니다. ’예외’가 ’무질서’가 되면 안 되니까요.

5. 흔한 위반 패턴

DS-029 위반은 양방향으로 나타납니다.

함정 ① 본문에 개성 글꼴. 본문·안내에 비고딕 개성 글꼴 사용 → 가독성 붕괴. → 본문은 고딕만.

함정 ② 예외 범위 확대 해석. 소제목·강조 등에까지 개성 글꼴 → 예외 남용. → 디스플레이·배너로 한정.

함정 ③ 과도한 장식 글꼴. 디스플레이에 알아보기 힘든 글꼴 → 메시지 전달 실패. → 개성 있되 인지 가능하게.

함정 ④ 개성 글꼴 남발. 배너마다 다른 글꼴 → 산만, 통일성 붕괴. → 예외 글꼴도 한두 개로 제한.

핵심: 예외는 ‘디스플레이·배너에만, 절제해서’. 본문 침범과 예외 남용 둘 다 경계하세요.

6. 무엇을 점검하나

DS-029는 비고딕 서체가 허용 범위에만 쓰였는지를 봅니다.

본문 고딕 유지 — 본문에 비고딕 글꼴이 쓰이지 않았는가.

예외 범위 — 비고딕이 디스플레이·배너에만 한정됐는가.

예외 절제 — 개성 글꼴이 인지 가능하고, 가짓수가 절제됐는가.

정보 전달 — 개성 글꼴 텍스트가 유일한 정보 수단이 아닌가.

7. 누가 담당하나

역할	책임
디자이너	디스플레이·배너에만 개성 글꼴, 본문은 고딕
퍼블리셔/개발	예외 글꼴을 해당 영역에만 적용
기획/UX	‘디스플레이·배너’와 ’본문’ 경계 정의

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

적용 대상

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

본문과 디스플레이·배너가 있는 사이트에 적용됩니다. 개성 글꼴을 쓰는 경우 그 범위를 점검합니다.

예외(N/A)

개성 글꼴을 전혀 쓰지 않고 전부 고딕이라면, DS-029 위반 가능성 자체가 없어 자연히 충족됩니다(가장 안전한 경우). DS-029는 ’개성 글꼴을 쓸 거라면 디스플레이·배너에만’이라는 조건부 허용 규칙입니다.

9. 단계별 개선 방법

Before / After

/* ❌ Before: 본문에까지 개성 글꼴 */ body, .content { font-family: '개성있는글꼴'; } /* ✅ After: 본문은 고딕, 디스플레이·배너만 예외 */ body, .content { font-family: 'Pretendard GOV', sans-serif; } .display-title, .banner-headline { font-family: '개성있는글꼴', 'Pretendard GOV', sans-serif; /* 큰 헤드라인만 */ }

정비 순서

본문 점검 — 본문에 쓰인 개성 글꼴을 고딕으로 환원.

예외 한정 — 개성 글꼴을 디스플레이·배너로만 제한.

예외 절제 — 개성 글꼴 가짓수를 한두 개로.

대비 확인 — 디스플레이·배너 텍스트도 대비 확보.

10. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 본문에 고딕이 아닌 개성 글꼴을 쓰고 있지 않나요?

□ 개성 글꼴이 디스플레이·배너에만 쓰였나요?

□ 소제목·강조 등으로 예외 범위를 넓히지 않았나요?

□ 개성 글꼴도 알아볼 수 있나요?

□ 개성 글꼴 가짓수가 절제돼 있나요?

❓ FAQ

Q1. 디스플레이와 배너가 정확히 뭔가요? 디스플레이는 화면에서 가장 큰 헤드라인급 텍스트, 배너는 캠페인·홍보용 시각 강조 영역입니다. 공통점은 ’정독하는 본문’이 아니라 ’한눈에 보는 큰 텍스트’라는 것입니다. 이런 영역에만 예외가 허용됩니다.

Q2. 제목(heading)에도 개성 글꼴을 쓸 수 있나요? 일반 제목(heading)은 본문 체계의 일부라 고딕이 원칙입니다. 예외는 ’디스플레이’급의 아주 큰 헤드라인이나 배너에 한정됩니다. 일반 소제목까지 개성 글꼴을 쓰면 예외 남용입니다.

Q3. 우리 기관 전용 글꼴이 있는데 본문에 쓰고 싶어요. 본문 가독성을 위해 권장하지 않습니다. 전용 글꼴은 로고나 디스플레이·배너 같은 시각 강조 영역에 쓰고, 본문은 Pretendard GOV(고딕)를 따르세요. 브랜드는 강조에, 가독성은 본문에 — 색 규칙과 같은 구조입니다.

Q4. 예외 글꼴도 가독성 기준이 있나요? 명시적 수치 기준은 없지만, ’알아볼 수 있어야 한다’는 원칙은 적용됩니다. 무슨 글자인지 모를 정도의 장식 글꼴은 디스플레이라도 피해야 합니다. 또 대비(2편)는 동일하게 지켜야 합니다.

Q5. 전부 고딕만 쓰면 DS-029 위반인가요? 아닙니다. 전부 고딕이면 DS-029는 자연히 충족됩니다(위반할 여지가 없음). DS-029는 ’개성 글꼴을 쓸 거라면 범위를 지켜라’는 조건부 규칙이라, 안 쓰면 문제될 게 없습니다.

11. 마무리 — 규칙 안의 자유

DS-029의 메시지는 균형의 지혜를 담습니다.

원칙은 지키되, 개성의 자리를 좁게 열어둔다 — 자유는 명확한 경계 안에서 안전하다.

본문의 고딕 원칙(28편)을 지키면서도, 디스플레이·배너라는 좁은 자리에 개성을 허용함으로써 DS-029는 경직과 무질서를 모두 피합니다. 핵심은 ’예외의 경계가 분명하다’는 것입니다. 읽는 본문은 고딕으로 가독성을 지키고, 보는 디스플레이·배너에만 개성을 허용 — 글자의 역할에 따라 원칙을 달리하는 정교한 설계입니다. 자유는 경계가 없을 때가 아니라, 경계가 분명할 때 안전합니다.

다음 편은 글꼴의 ’두께’로 넘어갑니다. DS-030 — “글자 두께를 regular(400)와 bold(700) 두 가지로 사용한다.” 글자의 굵기를 어떻게 절제해서 위계를 만드는지를 다룹니다.

다음 편 예고 ▶ 「030. 글자 두께를 regular(400)와 bold(700) 두 가지로 사용하고 있다.」

우리 사이트의 글꼴 예외가 적절한지 확인하려면? ViewCheck는 비고딕 개성 글꼴이 본문에 쓰이지 않았는지, 디스플레이·배너로 한정됐는지, 글꼴 가짓수가 절제됐는지를 진단합니다.

📚 참고 출처

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

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

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