공공 서체 Pretendard GOV, 왜 표준인가
공공 서체 Pretendard GOV, 왜 표준인가
ViewCheck 마케팅 홍보 — 2026년 9월 · W3 타이포(Pretendard GOV) (9/21~9/27)
대주제: 디자인 일관성·토큰 · 홍보 훅: 토큰 채택률 리포트
【 공감·문제제기 】
“글꼴 하나 바꾸는 게 뭐 그렇게 대수라고.”
공공 사이트 개편을 맡았던 무렵, 나도 속으로 딱 이렇게 생각했다. 색이야 기관 상징색이 있으니 따라가면 되고, 레이아웃은 업체가 잡아줄 테고, 그런데 글꼴까지 무슨 기준을 따져야 한다니 솔직히 좀 과하다 싶었다. 화면에 글자만 잘 보이면 됐지, 그 글자가 무슨 서체인지를 누가 그렇게 신경 쓰겠나 싶었던 거다.
그 생각이 바뀐 건 어느 검수 회의 자리에서였다. 업체가 가져온 시안 두 장을 나란히 놓고 보는데, 분명히 같은 기관 사이트인데도 한쪽은 단정하고 한쪽은 어딘가 들떠 보였다. 색도 같고 배치도 비슷한데 인상이 달랐다. 한참을 들여다보다가 알았다. 글꼴이 달랐던 거다. 한쪽은 공공 표준 서체를 썼고, 다른 한쪽은 디자이너가 ‘예뻐서’ 골라 넣은 일반 서체였다. 그 미묘한 차이가 전체 분위기를 갈라놓고 있었다.
그때 깨달았다. 글꼴은 ‘장식’이 아니라 ‘목소리’구나. 사람도 같은 말을 해도 목소리 톤에 따라 신뢰가 가기도 하고 어딘가 어수선하게 들리기도 하지 않나. 화면 속 글자도 똑같았다. 공공 사이트가 국민에게 무언가를 안내하고 신청을 받고 정책을 설명하는 ‘공식 창구’라면, 그 목소리에 해당하는 게 바로 서체였던 거다.
이번 주 우리가 다룰 주제는 ‘타이포그래피’, 그중에서도 공공 웹의 표준 서체로 자리 잡은 Pretendard GOV(프리텐다드 GOV)다. 이 글은 그 첫 편으로, ‘Pretendard GOV가 대체 무엇이고, 왜 공공 웹의 표준 서체가 됐는가’를 처음 접하는 담당자도 이해할 수 있게 쉬운 비유로 풀어보려 한다. 디자인 전공자가 아니어도, 글꼴 이름을 처음 들어봐도 괜찮다. 사이트 하나 운영해본 사람이라면 충분히 따라올 수 있는 이야기다.
먼저 한 줄로 결론부터 말하면 이렇다. Pretendard GOV는 대한민국 공공 웹사이트가 ‘일관되고, 또렷하고, 누구나 읽기 쉬운’ 글자를 쓰도록 정리해둔 공식 서체이자, 그 서체를 어떻게 쓰는지에 대한 규칙의 묶음이다. 단순히 ‘이 폰트 파일을 깔아 쓰세요’가 아니다. 제목은 얼마나 크게, 본문은 얼마나, 줄 간격은 어떻게, 글자 굵기는 몇 단계로 쓸 것인지까지 — 글자에 관한 약속 전체를 가리킨다.
여기서부터가 중요한데, 이 약속은 KRDS(대한민국 정부 디자인 시스템)라는 더 큰 틀 안에 들어 있다. KRDS는 색·글꼴·간격 같은 기본 요소부터 버튼·폼 같은 부품, 검색·신청 같은 서비스 흐름까지 공공 웹을 구성하는 거의 모든 것에 기준을 제시하는데, 그 규칙이 정확히 846개다. DS(디자인 기반 요소) 120개, CP(컴포넌트) 446개, BP(기본 패턴) 108개, SP(서비스 패턴) 172개로 나뉜다. 오늘 다룰 타이포그래피는 이 중 가장 밑바탕에 해당하는 DS 영역의 핵심이다. 모든 화면에는 글자가 있고, 그 글자가 어떻게 보이느냐가 사이트 전체의 첫인상을 좌우하기 때문이다.
조금 더 솔직하게 이야기를 풀어보자. 공공 웹 담당자에게 ‘서체’는 늘 우선순위에서 밀리는 항목이다. 당장 급한 건 기능이 돌아가는지, 민원이 접수되는지, 보안 점검을 통과하는지다. 글꼴 따위는 ‘나중에’로 미뤄지기 일쑤다. 그런데 바로 그 ‘나중에’ 때문에 사이트가 누더기가 된다. 페이지마다 다른 글꼴, 들쭉날쭉한 글자 크기, 제멋대로인 줄 간격이 쌓이고 쌓여서, 나중에는 손대기도 겁나는 상태가 된다. 처음에 한 번 기준을 잡아두는 게 가장 싸게 먹히는데, 그 한 번을 미루는 바람에 두고두고 비싸진다.
이 글은 그 ‘한 번’을 제대로 잡는 데 도움을 주려는 글이다. Pretendard GOV가 왜 만들어졌는지, 어떤 문제를 풀려고 했는지, 실무에서는 어떻게 만나게 되는지를 차근차근 짚는다. 그리고 글 말미에는 ‘그래서 우리 사이트는 지금 서체를 제대로 쓰고 있는지 어떻게 확인하나’라는, 가장 현실적인 질문에 대한 답도 함께 드린다. 부담 갖지 말고, 커피 한 잔 옆에 두고 편하게 읽어 내려가면 된다.
솔직히 고백하자면, 나도 한동안은 ‘글꼴은 디자이너 영역’이라고 선을 그어두고 살았다. 내가 디자인을 직접 하는 것도 아니고, 글꼴의 미묘한 차이를 알아볼 안목도 없다고 여겼으니까. 그런데 막상 사이트를 운영하면서 민원을 받다 보니, ‘글자가 안 보여요’ ‘너무 작아요’ ‘신청 버튼이 어디 있는지 모르겠어요’ 같은 목소리가 끊이지 않았다. 처음엔 ‘그건 디자인 탓이지 내 탓이 아니다’ 싶었는데, 곰곰이 생각해보니 그 디자인을 검수하고 통과시킨 게 결국 나였다. 글자 문제는 디자이너만의 문제가 아니라, 그 결과물을 받아 든 담당자 모두의 문제였던 거다. 그때부터 ‘글꼴을 모른다’가 아니라 ‘글꼴 기준을 가져야겠다’로 마음을 바꿨다. 이 글은 그때의 나 같은 사람을 위한 것이기도 하다.
이 글의 흐름을 미리 일러두면 이렇다. 먼저 ‘서체’와 ‘타이포그래피’라는 말 자체를 옷차림에 빗대어 쉽게 풀고, 왜 공공 웹에 표준 서체가 필요했는지를 현실에서 짚는다. 그다음 Pretendard GOV가 가진 특징을 ‘읽기 쉬움·일관됨·접근성’이라는 세 축으로 설명하고, 글자 크기·굵기·줄 간격이 만드는 ‘위계’가 왜 중요한지를 다룬다. 이어서 서체를 잘못 쓰면 실제로 무슨 일이 벌어지는지 익명 사례로 보여주고, 마지막으로 ‘그래서 우리는 무엇부터 시작하면 되는지’를 실무 단계로 정리한다. 처음부터 끝까지 어려운 용어를 쉬운 비유로 바꾸는 걸 원칙으로 삼았으니, 마음 편히 따라오면 된다.
【본론 1 — 개념·왜 중요한가】
■ ‘서체’와 ‘타이포그래피’부터 옷차림으로 풀어보자
‘타이포그래피’라는 말이 거창하게 들릴 수 있다. 디자인 학과에서나 쓰는 전문 용어 같고, 나와는 상관없는 영역처럼 느껴진다. 하지만 개념 자체는 생각보다 일상적이다. 옷차림을 떠올리면 쉽다.
같은 사람이라도 어떤 옷을 입느냐에 따라 인상이 완전히 달라진다. 면접 자리에 단정한 정장을 입고 가면 신뢰가 가고, 같은 사람이 후줄근한 트레이닝복을 입고 오면 어딘가 미덥지 못해 보인다. 말하는 내용은 똑같은데도 그렇다. 글자도 똑같다. 같은 안내문이라도 어떤 글꼴로, 어떤 크기로, 어떤 간격으로 쓰느냐에 따라 ‘믿을 만한 공식 안내’로 보이기도 하고, ‘어디서 급조한 듯한 공지’로 보이기도 한다.
여기서 용어를 살짝 정리하자. ‘서체(폰트)’는 글자의 생김새 그 자체다. 정장이냐 트레이닝복이냐 하는 옷의 종류에 해당한다. 반면 ‘타이포그래피’는 그 글자를 ‘어떻게 다루느냐’ 전체를 가리킨다. 옷을 입는 것에 빗대면 — 어떤 옷을, 어떤 사이즈로, 어떤 색 조합으로, 어떤 자리에 맞춰 입느냐 하는 ‘차려입는 방식’ 전부다. 좋은 서체를 골랐어도 크기와 간격을 엉망으로 쓰면, 좋은 옷을 사놓고 아무렇게나 걸친 것과 같다. 그래서 ‘좋은 글꼴을 쓴다’와 ‘타이포그래피가 좋다’는 다른 이야기다.
공공 웹에서 타이포그래피가 특히 중요한 이유가 여기 있다. 공공 사이트는 화면의 절대다수가 ‘글자’다. 화려한 사진이나 영상이 주인공인 쇼핑몰·엔터테인먼트 사이트와 다르다. 정책 설명, 신청 안내, 공지사항, 약관, 자주 묻는 질문 — 죄다 글이다. 글이 주인공인 사이트에서 글자를 어떻게 다루느냐는, 옷가게에서 옷을 어떻게 진열하느냐만큼이나 본질적인 문제다. 글자가 곧 콘텐츠고, 콘텐츠가 곧 서비스이기 때문이다.
조금 다른 각도에서 비유를 하나 더 들어보자. 공공 웹의 글자를 ‘안내 방송’이라고 생각해보면 어떨까. 지하철역의 안내 방송은 화려할 필요가 없다. 오히려 또박또박, 차분하게, 누구나 알아들을 수 있어야 한다. 만약 역마다 안내 방송 목소리가 제각각이고, 어떤 역은 너무 작고 어떤 역은 너무 빨라서 못 알아듣겠다면, 시민들은 길을 잃는다. 공공 웹의 글자도 ‘화면 위의 안내 방송’이다. 튀거나 멋있을 필요가 없다. 명료하고, 일정하고, 신뢰감 있게 들려야 한다. Pretendard GOV가 추구하는 게 바로 이 ‘잘 들리는 안내 방송’ 같은 글자다.
조금 더 들어가 보자. 타이포그래피는 보통 세 가지를 함께 다룬다. 첫째는 ‘무엇을 쓰느냐’, 즉 서체 자체다. 둘째는 ‘얼마나 크게 쓰느냐’, 즉 크기의 위계다. 제목은 크고 본문은 작고 캡션은 더 작은, 그 단계의 체계다. 셋째는 ‘어떻게 배치하느냐’, 즉 줄 간격·글자 간격·문단 간격 같은 ‘숨 쉴 공간’이다. 이 세 가지가 맞물려야 글이 읽기 편해진다. 셋 중 하나만 틀어져도 글은 답답해지거나 산만해진다.
여기서 흔한 오해 하나를 짚고 넘어가자. 사람들은 ‘읽기 쉬운 글자’와 ‘예쁜 글자’를 같은 것으로 여기곤 한다. 하지만 둘은 다르다. 예쁜 장식 글꼴은 포스터 제목 한 줄에는 어울리지만, 긴 안내문을 그 글꼴로 도배하면 눈이 금방 피로해진다. 공공 웹이 추구하는 건 ‘예쁨’보다 ‘읽힘’이다. 한 문단을, 한 페이지를, 나아가 수십 페이지를 읽어도 눈이 덜 피로한 글자. 화려하지 않아도 또렷하고 안정적인 글자. 그게 공공 서체가 지향하는 미덕이다. 화장을 짙게 한 얼굴보다 단정하고 편안한 얼굴이 오래 봐도 좋은 것과 같은 이치다.
또 하나 알아두면 좋은 게, ‘화면용 글자’와 ‘인쇄용 글자’는 다른 세계라는 점이다. 예전에 종이 문서를 만들 때 쓰던 감각으로 웹 글자를 다루면 어긋난다. 종이는 해상도가 높아서 가는 획도 또렷하게 찍히지만, 화면은 픽셀이라는 작은 점들로 글자를 그리기 때문에 너무 가는 획은 흐릿하게 뭉개진다. 또 종이는 한 번 인쇄하면 끝이지만, 화면은 사용자마다 기기가 다르고 크기를 키워 보기도 한다. 그래서 웹 글자는 ‘다양한 환경에서도 무너지지 않는 튼튼함’이 핵심이다. Pretendard GOV가 처음부터 화면 표시를 전제로 설계됐다는 건, 바로 이 ‘웹의 조건’에 맞춰 태어난 글꼴이라는 뜻이다. 종이 시대의 멋진 글꼴을 그대로 웹에 가져오면 왜 어색한지를 알면, 왜 ‘화면용으로 설계된 표준 서체’가 따로 필요한지가 이해된다.
■ 그럼 Pretendard GOV는 왜 필요했나
민간 기업은 저마다 ‘브랜드 폰트’를 만들거나 사들여 쓴다. 큰 기업일수록 자사만의 전용 서체를 개발해 모든 제품과 광고에 일관되게 적용한다. 글자 하나에도 브랜드의 인상이 담긴다는 걸 알기 때문이다.
공공 영역은 사정이 더 복잡했다. 대한민국에는 중앙부처, 광역·기초 지자체, 공공기관, 산하기관까지 수천 개의 공공 웹사이트가 있다. 이들이 각자 다른 외주 업체에, 다른 시기에, 다른 취향으로 만들어졌다. 글꼴도 마찬가지였다. 어떤 사이트는 이 글꼴, 어떤 사이트는 저 글꼴, 심지어 같은 사이트 안에서도 페이지마다 글꼴이 달랐다. 어떤 글꼴은 라이선스가 모호해서 ‘이걸 공공 사이트에 써도 되나’ 하는 법적 불안까지 있었다.
이게 왜 문제일까. 첫째, 국민 입장에서 기관이 바뀔 때마다 글자의 인상이 제각각이면 ‘공공 서비스 전체’에 대한 신뢰가 흔들린다. 둘째, 글꼴마다 화면에서 읽히는 정도가 다르다. 어떤 글꼴은 작은 크기에서 흐릿하게 뭉개지고, 어떤 글꼴은 숫자와 영문이 어색하게 섞인다. 셋째, 라이선스 문제다. 공공 사이트가 출처가 불분명한 글꼴을 쓰다가 분쟁에 휘말리면 그 자체로 행정 부담이다. 넷째, 글꼴마다 지원하는 글자 수와 굵기 단계가 달라서, 통일된 디자인 기준을 세우기가 어려웠다.
특히 ‘지원하는 글자 수’ 이야기는 공공 웹에서 의외로 큰 함정이다. 공공 안내문에는 한자가 섞인 옛 지명, 흔치 않은 성씨, 전문 용어, 특수 기호 같은 ‘잘 안 쓰는 글자’가 종종 등장한다. 그런데 어떤 글꼴은 자주 쓰는 글자만 갖추고 있어서, 흔치 않은 글자를 만나면 그 글자만 다른 글꼴로 ‘툭’ 바뀌어 표시된다. 한 단어 안에서 글자 하나만 모양이 달라지는, 어색하기 짝이 없는 일이 벌어지는 것이다. 표준 서체가 폭넓은 글자를 갖추고 있어야 하는 이유가 여기 있다. ‘모든 국민의 이름과 모든 지명’을 빠짐없이 같은 모양으로 표시할 수 있어야, 그게 진짜 공공 서체다. Pretendard GOV가 넓은 글자 지원을 갖춘 건 이런 현실적 필요와 맞물린다.
Pretendard GOV는 바로 이 문제들을 한꺼번에 풀기 위한 답이었다. ‘공공 웹은 이 서체를, 이런 규칙으로 쓰면 일관되고, 읽기 쉽고, 라이선스 걱정도 없다’는 기준을 제시한 것이다. 무료로 누구나 쓸 수 있고, 한글·영문·숫자·기호가 한 가족처럼 어우러지도록 설계됐으며, 가는 굵기부터 굵은 굵기까지 여러 단계를 갖춰 제목과 본문의 위계를 표현할 수 있다. 수천 개 사이트가 같은 ‘목소리’로 말할 수 있게 해주는, 공공재에 가까운 자산인 셈이다.
여기서 ‘같은 목소리’라는 표현을 음미해볼 만하다. 사람들이 라디오 뉴스를 들을 때, 아나운서의 발음과 톤이 일정해서 내용에 집중할 수 있다. 만약 한 문장은 또박또박, 다음 문장은 웅얼웅얼, 그다음은 사투리로 들린다면 내용이 머리에 안 들어온다. 공공 웹의 글자도 마찬가지다. 사이트마다, 페이지마다 글자의 ‘톤’이 흔들리면 국민은 내용보다 ‘이 글자 왜 이래’에 신경을 빼앗긴다. Pretendard GOV는 그 톤을 통일해, 국민이 ‘내용 그 자체’에만 집중하도록 돕는 장치다.
그리고 이건 단순한 ‘통일’의 문제를 넘어선다. 공공 서비스는 선택이 아니라 필수인 경우가 많다. 증명서를 떼고, 복지를 신청하고, 세금을 내는 일은 ‘다른 사이트로 가면 되는’ 일이 아니다. 그 기관 사이트가 유일한 창구다. 그 창구의 글자가 읽기 어렵다면, 그건 단순한 불편이 아니라 ‘서비스에 접근할 권리’ 자체를 흔드는 일이다. 글자가 안 읽혀서 신청 방법을 놓치고, 안내문을 잘못 이해하고, 결국 받아야 할 서비스를 못 받는 사람이 생긴다면 — 그건 디자인 문제가 아니라 공공성의 문제다.
여기에 한 가지 더 짚고 싶은 게 ‘라이선스’ 이야기다. 의외로 많은 담당자가 글꼴에도 저작권이 있다는 걸 깊이 의식하지 못한다. 디자인 작업물을 받으면서 ‘이 글꼴 써도 되는 거죠?’라고 한 번도 물어본 적 없는 경우가 허다하다. 그런데 글꼴은 엄연히 창작물이고, 상업용·웹용 라이선스가 따로 있는 경우도 많다. 출처가 모호한 글꼴을 공공 사이트에 덜컥 썼다가 나중에 라이선스 분쟁이 불거지면, 그건 단순히 ‘디자인을 다시 하는’ 수준의 문제가 아니라 행정·법무 부담으로 번진다. Pretendard GOV가 ‘무료로, 누구나, 마음 놓고 쓸 수 있다’는 점은 그래서 생각보다 큰 미덕이다. 글꼴 하나 깔면서 변호사를 부를 필요가 없다는 것, 이건 공공 담당자에게 꽤 든든한 안전장치다. 표준 서체를 쓴다는 건 ‘읽기 좋은 글자’를 얻는 동시에 ‘법적 불안’을 더는 일이기도 하다.
또 하나, 표준 서체는 ‘유지보수의 부담’도 덜어준다. 사이트를 한 번 만들고 끝나는 게 아니라 몇 년에 걸쳐 운영하고 개편하는 게 공공 웹이다. 그동안 담당자도 바뀌고 외주 업체도 교체된다. 만약 처음 만든 업체가 쓴 글꼴이 그 업체만 가진 유료 라이선스였다면, 다음 업체는 그 글꼴을 못 쓰거나 새로 사야 한다. 결국 개편할 때마다 글꼴이 바뀌고, 사이트의 ‘목소리’가 흔들린다. 반면 표준 서체는 누가 작업하든 같은 글꼴을 쓸 수 있으니, 업체가 바뀌어도 글자의 일관성이 유지된다. ‘기관의 자산’으로 글자가 남는 셈이다. 이건 앞서 말한 ‘담당자가 바뀌어도 무너지지 않는 기준’이라는 디자인 시스템의 정신과 정확히 맞닿는다.
■ Pretendard GOV의 세 가지 미덕 — 읽힘·일관됨·접근성
Pretendard GOV가 공공 표준으로 자리 잡은 이유를 세 가지 축으로 정리해보자. 이 세 축을 기억해두면 ‘왜 하필 이 서체인가’를 한눈에 이해할 수 있다.
첫째, ‘읽힘(가독성)’이다. 이 서체는 화면에서 읽기 좋도록 설계됐다. 종이에 인쇄될 때와 화면에 표시될 때는 글자가 보이는 방식이 다르다. 화면은 픽셀로 글자를 그리기 때문에, 획이 너무 가늘거나 복잡하면 작은 크기에서 뭉개진다. Pretendard GOV는 화면 표시를 전제로 획의 두께와 글자 사이 공간을 다듬어, 작은 크기에서도 또렷하게 보이도록 만들어졌다. 특히 한글은 자음과 모음이 네모 안에 짜여 있어 영문보다 복잡한데, 이 복잡함이 작은 화면에서 뭉개지지 않도록 세심하게 설계됐다.
둘째, ‘일관됨(통일성)’이다. 앞서 말한 ‘같은 목소리’의 핵심이다. 한 서체 가족 안에서 가는 글씨부터 굵은 글씨까지 여러 굵기가 자연스럽게 이어지고, 한글과 영문과 숫자가 따로 노는 느낌 없이 한 식구처럼 어우러진다. 이게 왜 중요하냐면, 공공 안내문에는 한글·영문·숫자가 끊임없이 섞이기 때문이다. ‘2026년 9월 21일부터 신청 가능’ 같은 문장 하나에도 한글·숫자가 섞인다. 이때 숫자만 갑자기 다른 글꼴처럼 튀어 보이면 문장이 어수선해진다. Pretendard GOV는 이 섞임을 매끄럽게 처리한다.
셋째, ‘접근성’이다. 공공 웹의 사용자층은 민간보다 훨씬 넓다. 스무 살 대학생도, 여든 살 어르신도, 시력이 약한 분도 같은 사이트를 써야 한다. 접근성 관점에서 서체는 생각보다 큰 변수다. 획이 너무 가늘면 저시력자에게 안 보이고, 글자 사이가 너무 좁으면 난독 성향이 있는 분이 글자를 구분하기 어렵다. Pretendard GOV는 충분한 굵기 단계와 적절한 자간을 갖춰, ‘가장 약한 고리’에 있는 사용자까지 고려한다. 행정안전부의 「전자정부 웹사이트 품질관리 지침」이 강조하는 7대 영역 중 ‘접근성’과도 직접 맞닿는 지점이다.
이 세 미덕은 따로 노는 게 아니라 서로를 떠받친다. 읽기 쉬우니 일관되게 쓸 수 있고, 일관되니 접근성이 보장되고, 접근성을 고려했으니 더 많은 사람에게 읽힌다. 셋이 한 덩어리로 굴러간다. 그래서 ‘그냥 무난한 글꼴 하나 골랐네’가 아니라, ‘공공이 처한 조건에 가장 잘 맞는 답을 찾았다’고 보는 게 정확하다.
여기서 ‘읽힘’에 대해 조금 더 깊이 들어가 보자. 화면에서 글자가 잘 읽힌다는 건 단순히 ‘크다·작다’의 문제가 아니다. 글자 하나하나의 ‘속공간’, 즉 ‘ㅇ’이나 ‘ㅁ’ 같은 글자 안쪽의 빈 공간이 충분히 트여 있어야 작은 크기에서도 막히지 않고 보인다. 또 비슷하게 생긴 글자, 예를 들어 한글에서 헷갈리기 쉬운 받침들이나 영문의 대문자 ‘I’와 소문자 ‘l’, 숫자 ‘1’ 같은 것들이 명확히 구별돼야 오독이 없다. 공공 안내문에서 숫자 하나, 받침 하나를 잘못 읽으면 신청 기한을 착각하거나 금액을 오해하는 일이 벌어진다. 그래서 ‘읽힘’은 미관의 문제가 아니라 ‘정보의 정확한 전달’이라는, 공공 서비스의 본질적 책무와 직결된다. Pretendard GOV가 화면 표시를 전제로 글자의 속공간과 구별성을 다듬은 건 이런 맥락에서다.
‘일관됨’도 한 겹 더 들여다보자. 일관됨이 중요한 진짜 이유는 ‘인지 부하’를 줄이기 때문이다. 사람의 뇌는 익숙한 패턴을 만나면 거의 에너지를 안 쓰고 정보를 처리한다. 반대로 페이지마다 글자 인상이 바뀌면, 뇌는 매번 ‘이건 어떤 글자지, 어디가 중요하지’를 새로 판단하느라 미세하게 지친다. 한두 페이지면 모르겠지만, 신청 과정처럼 여러 페이지를 거치는 흐름에서 이 작은 피로가 쌓이면 결국 ‘아, 그만하자’로 이어진다. 일관된 글자는 사용자가 ‘글자’가 아니라 ‘내용’에만 뇌를 쓰도록 해준다. 좋은 타이포그래피는 ‘보이지 않는 타이포그래피’라는 말이 있다. 글자가 너무 자연스러워서 글자의 존재 자체를 의식하지 않게 되는 상태, 그게 일관됨이 만들어내는 이상적인 결과다.
‘접근성’ 역시 좀 더 구체적으로 보자. 저시력자나 고령층은 글자가 흐릿하거나 가늘면 읽기를 포기한다. 화면을 확대해서 보는 분들도 많은데, 이때 글꼴이 확대에 잘 견디는지가 중요하다. 어떤 글꼴은 확대하면 획이 거칠게 깨지지만, 잘 설계된 글꼴은 확대해도 매끄럽게 유지된다. 또 화면 낭독 프로그램으로 듣는 분들에게는 글자 모양보다 ‘구조’가 중요한데, 제목·본문의 위계가 코드 차원에서 제대로 표시돼야 낭독기가 ‘여기가 제목이다’라고 안내할 수 있다. 즉 타이포그래피의 접근성은 ‘눈으로 보는 사람’과 ‘귀로 듣는 사람’ 모두를 위한 것이다. 글자를 다룬다는 건, 결국 모든 종류의 사용자를 함께 떠올린다는 뜻이다.
■ 글자 크기·굵기·줄 간격이 만드는 ‘위계’
서체를 골랐다고 끝이 아니다. 같은 글꼴로 써도 ‘크기와 굵기를 어떻게 배분하느냐’에 따라 글의 인상은 천차만별이 된다. 여기서 핵심 개념이 ‘위계(hierarchy)’다.
위계를 책에 비유하면 쉽다. 잘 만든 책을 펼치면, 굳이 목차를 안 봐도 어디가 큰 제목이고 어디가 소제목이고 어디가 본문인지 한눈에 들어온다. 큰 제목은 크고 굵게, 소제목은 그보다 작고, 본문은 더 작고 차분하게, 각주는 가장 작게. 이 크기의 단계가 ‘지금 내가 어디를 읽고 있는지’를 알려주는 이정표 역할을 한다. 만약 모든 글자가 똑같은 크기라면, 독자는 어디가 중요한지 매번 직접 판단해야 해서 금방 지친다.
웹 페이지도 똑같다. 페이지 제목, 섹션 제목, 본문, 보조 설명, 캡션 — 이 글자들이 명확한 크기 단계를 이뤄야 사용자가 페이지를 ‘스캔’할 수 있다. 사람은 웹 페이지를 한 글자씩 정독하지 않는다. 먼저 큰 글자들을 훑어 ‘여기에 내가 찾는 게 있나’를 가늠하고, 있으면 그 근처를 자세히 읽는다. 이 ‘훑어보기’가 가능하려면 글자에 또렷한 위계가 있어야 한다. 위계가 무너진 페이지는 ‘다 똑같이 중요해 보여서 결국 아무것도 안 중요해 보이는’ 상태가 된다.
Pretendard GOV를 포함한 KRDS의 타이포그래피 규칙은 바로 이 위계를 ‘체계’로 정리해둔다. 제목은 몇 단계로, 각 단계는 어느 정도 크기로, 본문은 어느 크기를 기본으로, 줄 간격은 글자 크기의 몇 배로 — 이런 기준이 정해져 있다. 담당자가 매번 ‘제목은 몇 픽셀로 할까’를 고민할 필요가 없다. 정해진 단계를 가져다 쓰면 자동으로 보기 좋은 위계가 만들어진다. 앞서 디자인 시스템이 ‘반복 결정을 줄여준다’고 했던 그 원리가, 글자 크기에서도 똑같이 작동하는 것이다.
여기서 ‘줄 간격’ 이야기를 조금 더 하고 싶다. 의외로 많은 담당자가 글자 크기는 신경 쓰면서 줄 간격은 놓친다. 그런데 긴 글의 읽힘을 좌우하는 건 사실 줄 간격인 경우가 많다. 줄 간격이 너무 좁으면 윗줄과 아랫줄이 달라붙어 눈이 다음 줄을 찾기 어렵고, 너무 넓으면 한 문단이 흩어져서 ‘덩어리’로 안 읽힌다. 적절한 줄 간격은 글자 크기에 비례해 정해지는데, KRDS는 이 비율까지 기준으로 제시한다. 본문 글자가 커지면 줄 간격도 그에 맞춰 커져야 한다는, 당연하지만 자주 놓치는 원칙을 규칙으로 못 박아둔 것이다.
글자 굵기도 위계의 도구다. 같은 크기라도 굵게 쓰면 강조가 되고, 가늘게 쓰면 차분해진다. 다만 굵기는 ‘아껴 써야’ 효과가 산다. 페이지 전체가 굵은 글씨면 강조가 강조로 안 느껴진다. 다 소리 지르면 누구 목소리도 안 들리는 것과 같다. KRDS의 타이포그래피 규칙이 굵기 단계를 정해두는 이유도, ‘아무 데나 굵게 쓰지 말고 위계에 맞게 절제해서 쓰라’는 메시지를 담고 있다.
위계 이야기를 하면 자주 나오는 오해가 ‘글자 크기 종류를 많이 쓸수록 좋은 거 아니냐’는 생각이다. 사실은 정반대다. 위계는 ‘단계가 많을수록’이 아니라 ‘단계가 분명할수록’ 좋다. 크기 종류를 일곱 가지, 여덟 가지로 잘게 쪼개면, 오히려 어느 게 어느 게보다 큰지 한눈에 안 들어온다. 16과 17, 18과 19처럼 미세하게 차이 나는 크기들이 섞이면, 사용자는 ‘이게 같은 단계인가 다른 단계인가’ 헷갈린다. 그래서 좋은 타이포그래피는 크기 단계를 ‘적당히 띄엄띄엄’ 잡는다. 한눈에 ‘아, 이건 확실히 더 크네’ 하고 느껴질 만큼의 간격을 둔다. KRDS의 타이포그래피 체계가 크기 단계를 정해두는 건, 담당자가 임의로 크기를 잘게 쪼개다가 위계를 흐리는 일을 막아주는 역할도 한다. 정해진 단계 안에서 고르면, 자연스럽게 ‘분명한 위계’가 나온다.
또 하나 실무에서 자주 놓치는 게 ‘정렬’이다. 글자를 왼쪽 정렬할지, 가운데 정렬할지, 양쪽 정렬할지에 따라 읽힘이 크게 달라진다. 긴 본문을 가운데 정렬하면, 줄마다 시작점이 들쭉날쭉해져서 눈이 다음 줄의 첫 글자를 찾느라 헤맨다. 그래서 긴 글은 보통 왼쪽 정렬이 정석이다. 가운데 정렬은 짧은 제목이나 한두 줄짜리 강조 문구에 어울린다. 이런 ‘정렬의 문법’도 타이포그래피의 일부다. 글자를 잘 골랐어도, 정렬을 엉뚱하게 하면 읽힘이 무너진다. 사소해 보이지만, 긴 안내문이 많은 공공 웹에서는 꽤 큰 차이를 만든다.
이 모든 걸 종합하면, 타이포그래피의 위계란 결국 ‘배려’다. 읽는 사람이 덜 헤매도록, 덜 피로하도록, 중요한 걸 먼저 보도록 글자의 크기와 굵기와 간격을 배치하는 일. 공공 서비스가 ‘누구나’를 위한 것이라면, 이 배려는 선택이 아니라 의무에 가깝다. 그리고 이 배려를 ‘감각’이 아니라 ‘기준’으로 정리해둔 게 KRDS의 타이포그래피 규칙이다. 감각은 사람마다 다르고 시간이 지나면 흔들리지만, 기준은 누가 만들든 일정한 결과를 보장한다. 글자에 관한 배려를 매번 새로 발휘하는 대신, 한 번 잘 정리된 기준을 가져다 쓰는 것 — 그게 공공 웹이 택할 수 있는 가장 현실적이고 지속 가능한 길이다.
■ ‘디자인 토큰’으로 글자를 관리한다는 것
여기서 한 단계 더 들어가 보자. 이번 주의 대주제가 ‘디자인 일관성·토큰’인 만큼, 글자 이야기를 ‘토큰’과 연결해두면 다음 글들이 훨씬 잘 이해된다.
‘토큰’이라는 말이 또 낯설게 들릴 텐데, 이것도 비유로 풀면 간단하다. 토큰은 ‘이름표가 붙은 값’이다. 예를 들어 본문 글자 크기를 그냥 ‘16픽셀’이라고 여기저기 직접 적어두는 대신, ‘본문-기본-크기’라는 이름표를 붙여두고 그 이름표를 가져다 쓰는 방식이다. 나중에 본문 크기를 조금 키우고 싶으면, 이름표 하나에 연결된 값만 바꾸면 그 이름표를 쓰는 모든 곳이 한 번에 바뀐다. 일일이 모든 페이지를 찾아다니며 ‘16’을 ‘17’로 고칠 필요가 없다.
글자에 관한 토큰은 보통 이런 것들이다. 제목 단계별 크기, 본문 크기, 캡션 크기, 굵기 단계, 줄 간격 비율, 글자 색… 이 값들이 각각 이름표를 달고 정리돼 있으면, 사이트 전체의 ‘글자 규칙’이 한 곳에서 관리된다. 페이지마다 제멋대로 숫자를 박아 넣는 게 아니라, 정해진 토큰을 가져다 쓰는 것이다. 이게 바로 ‘일관성을 시스템으로 보장하는’ 방법이다. 사람의 의지에 기대지 않고, 구조 자체가 일관성을 강제한다.
그래서 ‘토큰 채택률’이라는 지표가 의미를 가진다. 우리 사이트가 글자 크기·굵기·간격을 정해진 토큰으로 쓰고 있는지, 아니면 페이지마다 임의의 숫자를 박아 넣고 있는지를 측정하는 것이다. 토큰 채택률이 높다는 건 ‘일관성이 시스템으로 보장되고 있다’는 뜻이고, 낮다는 건 ‘지금은 그럴듯해 보여도 언제든 무너질 수 있는 모래성’이라는 뜻이다. 이 지표가 왜 중요한지, 어떻게 측정하는지는 이번 주 수요일·금요일 글에서 더 깊이 다룬다. 오늘은 ‘글자도 토큰으로 관리하면 일관성이 시스템이 된다’ 정도만 머릿속에 담아두면 충분하다.
토큰 채택률을 ‘건강검진 수치’에 비유하면 이해가 빠르다. 사이트를 겉으로만 훑어보면 ‘그럭저럭 괜찮아 보인다’ 정도밖에 모른다. 사람도 겉보기엔 멀쩡해도 혈압이나 혈당 수치를 재봐야 진짜 건강 상태를 알듯, 사이트도 토큰 채택률 같은 수치를 재봐야 ‘일관성의 속살’을 알 수 있다. 채택률이 낮다는 건, 지금 당장은 멀쩡해 보여도 페이지를 하나 추가하거나 누군가 손을 댈 때마다 조금씩 어긋날 위험을 안고 있다는 신호다. 반대로 채택률이 높으면, 누가 새 페이지를 만들어도 자동으로 기준을 따르게 되니 안심할 수 있다. 그래서 토큰 채택률은 ‘지금의 모습’이 아니라 ‘앞으로 무너지지 않을 힘’을 보여주는 지표에 가깝다. 단순히 점수를 매기려는 게 아니라, 사이트의 ‘체질’을 보는 것이다.
토큰의 또 다른 강점은 ‘협업’에 있다. 공공 웹은 보통 기획자·디자이너·개발자·외주 업체가 함께 만든다. 그런데 이들이 글자에 대해 말하는 ‘언어’가 다르면 소통이 어긋난다. 기획자는 ‘제목을 좀 더 크게’라고 하고, 디자이너는 ‘24픽셀로 하죠’라고 하고, 개발자는 코드에 다른 값을 박는다. 이 과정에서 ‘크게’가 정확히 얼마인지, 그게 다른 페이지의 제목과 같은 크기인지가 모호해진다. 토큰은 이 모호함을 없앤다. ‘제목-대-크기’라는 공통 이름표 하나로 모두가 같은 걸 가리키게 된다. 기획·디자인·개발이 같은 단어로 글자를 이야기할 수 있게 되는 것이다. 이렇게 되면 검수도 쉬워진다. ‘이 페이지 제목이 표준 토큰을 쓰고 있나’만 확인하면 되니까.
그리고 토큰은 ‘변화’에 강하다. 사이트를 운영하다 보면 ‘본문이 좀 작은 것 같으니 전체적으로 키우자’ 같은 결정이 내려질 때가 있다. 토큰 없이 페이지마다 숫자를 박아뒀다면, 수백 페이지를 일일이 고쳐야 한다. 그러다 몇 군데를 빠뜨리면 또 불일치가 생긴다. 반면 토큰으로 관리했다면, ‘본문-기본-크기’ 토큰 값 하나만 바꾸면 그 토큰을 쓰는 모든 페이지가 동시에 바뀐다. 일관성을 유지한 채로 변화를 줄 수 있다. 이게 ‘일관성이 시스템이 된다’는 말의 실제 의미다. 사람의 꼼꼼함에 기대지 않고, 구조가 알아서 일관성을 지켜준다.
■ 자주 나오는 질문 몇 가지
여기서 타이포그래피를 처음 접하는 분들이 자주 던지는 질문 몇 개를 미리 정리해두자. 글을 읽다 떠올랐을 법한 의문들이다.
“표준 서체를 쓰면 우리 기관만의 개성이 사라지지 않나요?”라는 걱정이 가장 많다. 결론부터 말하면, 안 사라진다. 표준 서체는 ‘본문과 안내문을 읽기 쉽게’ 하기 위한 기본 글꼴이지, 기관의 상징색이나 로고, 고유한 콘텐츠를 금지하는 게 아니다. 기관의 얼굴은 색·로고·사진·메시지로 충분히 표현된다. 글자는 ‘잘 읽히는 그릇’ 역할을 하고, 그 그릇에 담기는 내용과 색으로 개성을 살리면 된다. 표준어를 쓴다고 모두의 말투가 똑같아지지 않는 것과 같다. 공통 문법 위에서 개성은 얼마든지 표현된다.
“그럼 제목 같은 데는 멋진 글꼴을 써도 되나요?”라는 질문도 있다. 큰 제목이나 캠페인 배너처럼 ‘짧고 강조하는 자리’에 브랜드 글꼴을 쓰는 건 상황에 따라 가능하다. 다만 본문, 즉 사용자가 ‘읽어야 하는’ 긴 글에는 표준 서체를 쓰는 게 원칙이다. 멋과 읽힘이 부딪칠 때, 공공 웹은 읽힘을 택해야 한다. 멋은 짧은 자리에서만 허용되는 ‘양념’이라고 생각하면 된다.
“기존 사이트도 당장 다 바꿔야 하나요?”라는 질문에는 ‘한 번에 다 바꿀 필요 없다’가 답이다. 뒤에서 다룰 ‘점진적 적용’이 정석이다. 현황을 진단하고, 영향 큰 페이지부터, 개편 시점에 맞춰 단계적으로 적용하면 된다. 처음부터 완벽을 목표로 하면 시작조차 못 한다. ‘오늘 한 페이지’가 ‘영원히 안 함’보다 백 배 낫다.
정리하면, Pretendard GOV는 ‘무엇을 쓰느냐(서체)’의 답이고, 타이포그래피 규칙은 ‘어떻게 쓰느냐(위계)’의 답이며, 토큰은 ‘그 약속을 어떻게 안 무너지게 지키느냐(관리)’의 답이다. 이 셋이 맞물려야 비로소 ‘일관된 공공 웹의 글자’가 완성된다. 서체 하나만 깐다고 끝나는 일이 아니라는 걸, 여기까지 읽었다면 이제 감이 올 거다.
【본론 2 — 흔한 실수·사례 (익명)】
개념만 들으면 ‘그래서 실제로 뭐가 문제인데?’ 싶을 수 있다. 그래서 실무에서 자주 마주치는 상황을 익명으로 풀어보겠다. 아래 사례들은 특정 기관 이야기가 아니라, 공공 사이트를 점검하다 보면 패턴처럼 반복되는 전형적인 문제들이다.
미리 양해를 구하자면, 여기 드는 사례에는 어떤 실제 기관명도, 도메인도, 식별 가능한 정보도 들어 있지 않다. 모두 여러 사이트에서 공통으로 관찰되는 ‘유형’을 익명으로 재구성한 것이다. 특정 기관을 비판하려는 게 아니라, ‘기준이 없으면 누구에게나 일어나는 일’임을 보여주려는 의도다. 읽다가 ‘어, 우리 사이트 얘긴가?’ 싶은 대목이 있다면, 그건 그만큼 흔한 문제라는 뜻이지 특정 기관만의 문제가 아니다.
■ 사례 하나: 페이지마다 다른 글꼴
한 광역 단위 지자체 사이트를 점검한 적이 있다고 치자. 메인 페이지는 단정한 표준 서체로 잘 차려입고 있었다. 그런데 메뉴를 타고 안쪽으로 들어가니 분위기가 슬슬 어긋났다. 어떤 부서 페이지는 표준 서체 그대로인데, 어떤 부서 페이지는 어디서 본 듯한 둥글둥글한 글꼴로 바뀌어 있었다. 한 곳은 굵기가 묵직하고, 한 곳은 가늘어서 흐릿했다. 같은 기관 사이트인데 ‘서너 명이 따로 만든 사이트’를 돌아다니는 느낌이었다.
원인은 뻔하다. 부서별로, 사업별로, 시기별로 따로 발주해서 만들었기 때문이다. 만들 때마다 글꼴 기준이 없으니 각자 ‘예뻐 보이는’ 걸 골라 넣은 거다. 개별 페이지만 보면 다들 그럴듯한데, 사이트 전체로 보면 통일감이 무너진다. 사용자는 ‘내가 지금 같은 기관 사이트에 있는 게 맞나’ 하고 무의식중에 의심하게 된다.
더 곤란한 건, 이런 불일치는 ‘한 페이지만 봐서는’ 절대 안 보인다는 점이다. 각 부서 담당자는 자기 페이지만 보고 ‘잘 만들었네’ 한다. 윗선에 보고할 때도 ‘우리 페이지’만 캡처해 보여준다. 그러니 아무도 ‘전체가 어긋나 있다’는 걸 눈치채지 못한다. 이 불일치는 누군가 사이트 전체를 ‘쭉’ 훑어볼 때만 드러나는데, 바쁜 실무 현장에서 그렇게 전체를 훑어보는 사람은 드물다. 그래서 이런 문제는 자동 진단으로 ‘사이트 전체’를 한꺼번에 볼 때 비로소 수면 위로 올라온다. 사람의 눈이 놓치는 ‘전체의 어긋남’을 잡아내는 게, 자동 진단이 가진 또 하나의 가치다.
이 의심은 곧 ‘신뢰의 흔들림’으로 이어진다. 공공 사이트는 ‘공식 창구’라는 신뢰를 줘야 하는데, 페이지마다 글자의 인상이 제각각이면 ‘여기가 진짜 그 기관 사이트가 맞나, 혹시 사칭 페이지로 넘어온 건 아닌가’ 하는 막연한 불안이 생긴다. 특히 개인정보를 입력하거나 신청을 해야 하는 화면에서 이런 불안은 치명적이다. 일관된 글자는 단순히 ‘보기 좋음’이 아니라, ‘이곳은 믿을 수 있는 공식 창구다’라는 신뢰의 시각적 증거다. 이게 바로 앞서 말한 DS 영역의 문제다. 글꼴이라는 기초 토큰이 통일되지 않았기 때문에 생긴 일이다.
■ 사례 둘: 위계가 없는 ‘평평한’ 페이지
또 다른 흔한 사례. 어떤 기관의 정책 안내 페이지를 열었더니, 위에서 아래까지 모든 글자가 거의 같은 크기로 깔려 있었다. 제목인지 본문인지 구분이 안 됐다. 화면을 가득 채운 글자 벽 앞에서, 사용자는 ‘뭘 먼저 읽어야 하지’ 하고 막막해진다.
이건 글꼴 자체의 문제가 아니라 ‘위계’의 문제다. 표준 서체를 잘 깔아두고도, 크기와 굵기의 단계를 안 쓰면 이렇게 평평한 페이지가 나온다. 제목은 본문보다 충분히 커야 하고, 강조할 부분은 적절히 굵어야 하는데, 그 단계가 없으니 모든 정보가 ‘똑같이 안 중요해’ 보인다. 앞서 책 비유에서 말한, ‘목차 없이 한 덩어리로 인쇄된 책’ 같은 상태다.
이런 페이지에서 사용자는 원하는 정보를 찾으려고 한참을 헤맨다. 헤매다 지치면 떠난다. 민간이라면 ‘이탈’로 끝나지만, 공공은 ‘민원 전화’로 이어진다. 사이트에서 못 찾으니 전화로 물어보는 거다. 결국 위계가 없는 페이지 하나가 콜센터의 부담으로 전가되는 셈이다. 글자의 위계를 잡는 일이 단지 ‘보기 좋게’ 하는 게 아니라, 실제 행정 비용과 연결된다는 걸 보여주는 대목이다.
■ 사례 셋: 모바일에서 무너지는 글자
마지막 사례는 모바일에서 자주 터진다. 데스크톱에서 멀쩡해 보이던 페이지를 휴대전화로 열었더니, 글자가 너무 작아 손가락으로 확대해야 겨우 읽히거나, 반대로 글자만 큼지막해서 한 화면에 몇 글자 안 들어오는 경우다. 줄 간격이 좁아 글이 빽빽하게 달라붙어 있거나, 본문과 제목 크기 차이가 모바일에서 사라져버리는 경우도 흔하다.
이건 ‘데스크톱 기준으로만 글자를 잡고, 다양한 화면 크기를 고려하지 않아서’ 생긴다. 요즘 공공 사이트 방문자의 상당수가 모바일로 들어온다. 특히 어르신·생활 밀착 서비스일수록 모바일 비중이 높다. 그런데 글자 기준을 데스크톱에만 맞춰두면, 정작 가장 많이 쓰는 모바일에서 읽기가 무너진다. KRDS의 타이포그래피 규칙이 단순히 ‘크기 하나’가 아니라 ‘화면 크기에 따른 글자 운영’까지 포함하는 이유가 여기 있다.
여기서 한 가지 더 짚어둘 게 ‘손가락’이다. 모바일은 마우스가 아니라 손가락으로 누른다. 손가락은 마우스 포인터보다 훨씬 뭉툭해서, 누를 수 있는 영역이 충분히 커야 정확히 눌린다. 글자로 된 링크나 버튼이 너무 작거나 서로 너무 붙어 있으면, 옆엣것을 잘못 누르는 일이 잦아진다. 그래서 모바일의 타이포그래피는 ‘읽힘’만이 아니라 ‘누름’까지 함께 고려해야 한다. 글자 크기를 키운다는 건 단지 잘 보이게 하는 걸 넘어, 손가락으로 정확히 조작할 수 있게 하는 일이기도 하다. 이 ‘누를 수 있는 충분한 크기’ 역시 접근성의 핵심 항목 중 하나다. 글자 하나가 ‘읽기’와 ‘누르기’ 양쪽에 걸쳐 있다는 걸 알면, 왜 모바일에서 글자를 더 신경 써야 하는지가 분명해진다.
■ 사례 넷: 잘못 쓴 ‘굵게’와 ‘색’
조금 더 미묘한 사례도 있다. 어떤 안내 페이지를 보면, 정작 중요한 신청 기한은 평범하게 쓰여 있는데, 별로 안 중요한 ‘환영합니다’ 같은 인사말이 큼지막하게 굵은 글씨로 박혀 있다. 강조의 우선순위가 거꾸로 된 거다. 또 어떤 페이지는 본문 곳곳에 빨강·파랑·초록 글자가 어지럽게 섞여 있다. 만든 사람은 ‘눈에 띄게 하려고’ 색을 썼겠지만, 색이 너무 많으면 오히려 어디가 진짜 중요한지 안 보인다.
이건 ‘강조의 절제’를 모르는 데서 온다. 강조는 ‘아껴 쓸 때만’ 강조가 된다. 페이지의 5%만 강조하면 그 5%가 또렷이 도드라지지만, 30%를 강조하면 강조가 배경이 돼버린다. 색도 마찬가지다. 공공 안내문에서 색은 ‘예쁘게 하려고’ 쓰는 게 아니라 ‘의미를 구분하려고’ 쓰는 것이다. 경고는 경고 색, 성공은 성공 색처럼 색마다 정해진 역할이 있어야 한다. 여기에도 색 토큰이라는 기준이 작동하는데, 이건 다음 글들에서 더 다룰 주제다. 핵심은, 강조든 색이든 ‘기준 없이 손 가는 대로’ 쓰면 위계가 무너진다는 점이다.
이 사례들의 공통점은 분명하다. ‘기준이 없어서’ 생긴 문제라는 것. 글꼴이 통일 안 된 것도, 위계가 없는 것도, 모바일에서 무너지는 것도, 강조가 거꾸로 된 것도, 결국 ‘글자에 관한 약속’이 없거나 지켜지지 않아서 생긴 일이다. 그리고 이 약속을 미리 정리해둔 게 바로 Pretendard GOV를 포함한 KRDS의 타이포그래피 규칙이다. 사례를 읽으며 ‘아, 이래서 표준이 필요하구나’ 하고 느꼈다면, 이 글의 절반은 성공한 셈이다.
한 가지 덧붙이고 싶은 건, 이 모든 문제가 ‘누군가의 게으름’ 때문이 아니라는 점이다. 각 페이지를 만든 사람들은 대개 성실했고, 나름대로 ‘예쁘게, 잘’ 만들려고 했다. 문제는 그들이 ‘기준 없이 각자 최선을 다했다’는 데 있다. 열 명이 각자 자기 기준으로 최선을 다하면, 결과는 ‘열 가지 다른 최선’이 된다. 그게 합쳐지면 일관성이 무너진다. 그래서 해법은 ‘더 열심히 하라’가 아니라 ‘같은 기준을 공유하라’다. 기준을 공유하면, 각자의 최선이 ‘하나의 일관된 결과’로 모인다. 이게 표준이 하는 일이다.
【본론 3 — 그래서 무엇부터 시작할까】
여기까지 읽으며 ‘좋은 건 알겠는데, 그래서 우리 사이트는 뭘 어떻게 해야 하나’ 싶을 거다. 한 번에 다 바꾸려 하면 막막하다. 그래서 현실적인 순서로 정리해보겠다.
■ 첫째, 현황부터 파악한다
가장 먼저 할 일은 ‘우리 사이트가 지금 글자를 어떻게 쓰고 있는지’를 아는 것이다. 의외로 많은 담당자가 이걸 모른다. 사이트가 어떤 글꼴을 쓰는지, 페이지마다 글자 크기가 제각각인지, 토큰으로 관리되고 있는지 — 막상 물으면 답을 못 한다. 직접 만든 게 아니라 외주로 받았기 때문이다.
현황 파악은 ‘진단’으로 시작한다. 사람이 모든 페이지를 일일이 열어 글자 크기를 재고 글꼴을 확인하는 건 불가능에 가깝다. 페이지가 수십, 수백 개라면 더더욱 그렇다. 그래서 자동 진단 도구가 필요하다. 사이트 주소만 넣으면 각 페이지의 글자 크기·굵기·줄 간격·글꼴이 표준 토큰을 따르고 있는지, 위계가 제대로 잡혀 있는지를 한꺼번에 점검해주는 도구 말이다. 현황을 모르면 무엇을 고쳐야 할지도 모른다. 진단은 모든 개선의 출발점이다.
여기서 ‘진단’의 가치를 한 번 더 강조하고 싶다. 사람이 손으로 점검하면 두 가지 문제가 생긴다. 첫째, 빠뜨린다. 수십 페이지를 눈으로 보다 보면 집중력이 떨어져서 ‘여기는 글자가 좀 작네’ 정도는 잡아도 ‘이 줄 간격이 표준보다 살짝 좁다’ 같은 미세한 어긋남은 놓친다. 둘째, 사람마다 판단이 다르다. A 담당자는 ‘괜찮다’고 보는 걸 B 담당자는 ‘문제’라고 본다. 자동 진단은 이 둘을 동시에 해결한다. 모든 페이지를 빠짐없이, 같은 기준으로 잰다. 사람은 ‘이걸 고칠지 말지’ 같은 판단에 집중하고, 측정이라는 기계적인 일은 도구에 맡기는 것이다. 이 역할 분담이 현실적이다. 사람이 방향을 잡고, 도구가 디테일을 챙긴다.
■ 둘째, 영향 큰 것부터 잡는다
진단 결과가 나오면, 한꺼번에 다 고치려 들지 말고 우선순위를 잡아야 한다. 가장 먼저 손볼 건 ‘방문자가 많고, 영향이 큰’ 페이지다. 메인 페이지, 자주 찾는 민원·신청 페이지, 주요 안내 페이지부터다. 방문자가 적은 구석진 페이지의 글자를 완벽하게 다듬는 것보다, 매일 수많은 국민이 거치는 페이지의 글자를 먼저 잡는 게 훨씬 효율적이다.
글자에 관해서는 보통 이런 순서가 무난하다. ① 글꼴부터 표준 서체로 통일 → ② 본문 기본 크기와 줄 간격을 표준에 맞춤 → ③ 제목 단계별 위계를 정리 → ④ 모바일 등 다양한 화면에서의 글자 운영 점검. 큰 덩어리부터 잡고 디테일로 내려가는 식이다. 글꼴 하나만 통일해도 사이트 인상이 확 달라지는 경우가 많아서, 첫 단추로 효과 보기 좋다.
■ 셋째, 개편 시점에 맞춰 점진적으로 적용한다
기존 사이트를 ‘당장 다 갈아엎어야 하나’ 걱정할 필요는 없다. 정석은 점진적 적용이다. 차기 개편이나 유지보수 시점에 맞춰 표준을 단계적으로 녹여 넣는 것이다. 새로 만드는 페이지는 처음부터 표준 토큰으로, 기존 페이지는 손볼 때마다 표준으로 바꿔가는 식이면 무리가 없다.
여기서 중요한 건 ‘기록을 남기는 것’이다. 무엇을 표준으로 정했는지, 어떤 토큰을 쓰기로 했는지 문서로 정리해두면, 담당자가 바뀌어도 일관성이 유지된다. 공공기관은 담당자 교체가 잦다. 머릿속에만 있는 기준은 사람이 바뀌면 사라지지만, 문서와 토큰으로 박제된 기준은 남는다. ‘우리 기관은 글자를 이렇게 쓴다’는 약속을 한 번 잘 정리해두면, 그게 다음 담당자에게 물려줄 수 있는 자산이 된다.
■ 넷째, ‘외주에게 요구할 언어’를 갖춘다
마지막으로, 점진적 적용을 굴러가게 하는 진짜 열쇠는 ‘발주처가 기준을 말할 수 있느냐’다. 앞서 사례에서 봤듯, 글자 문제 대부분은 외주 업체가 ‘기준 없이 각자 최선을 다해서’ 생긴다. 그렇다면 발주처가 처음부터 ‘우리는 표준 서체와 표준 타이포그래피 토큰을 따른다’고 명확히 요구하면, 애초에 어긋남이 줄어든다.
문제는, 그 요구를 하려면 발주처가 기준을 알아야 한다는 점이다. ‘좀 더 깔끔하게’ 같은 모호한 말로는 검수도 안 되고 요구도 안 된다. 하지만 ‘본문은 표준 본문 토큰을, 제목은 표준 제목 단계를 쓰고, 글꼴은 공공 표준 서체로 통일해 달라’고 말할 수 있으면, 그건 검증 가능한 요구가 된다. 업체가 그렇게 만들었는지 진단으로 확인하면 된다. 오늘 이 글을 끝까지 읽은 것만으로도, 당신은 이미 그 ‘언어’의 절반은 손에 넣은 셈이다. 나머지 절반은 다음 글들에서 토큰과 일관성을 더 구체적으로 다루며 채워질 거다.
정리하면, 글자에 관한 실무는 ‘현황 진단 → 영향 큰 것부터 → 점진적 적용 → 외주에 요구할 언어 갖추기’의 순환이다. 이 순환이 한 바퀴 돌면, 다음 바퀴는 훨씬 수월하다. 한 번 기준을 잡고 토큰으로 박제해두면, 그다음부터는 새 페이지를 그 기준 위에 얹기만 하면 되기 때문이다. 처음 한 바퀴가 가장 힘들고, 그 첫 바퀴의 시작이 바로 ‘진단’이다.
【 ViewCheck로 현황을 한눈에 】
여기까지 읽고 ‘그래서 우리 사이트 글자 현황을 어떻게 확인하지?’ 싶은 분께, 우리가 만든 도구 이야기를 잠깐 하려 한다. 광고처럼 들릴까 조심스럽지만, 이 글의 흐름상 자연스러운 연결이라 솔직하게 소개한다.
ViewCheck는 공공 웹사이트의 KRDS 준수 여부를 자동으로 진단하는 서비스다. 사이트 주소만 넣으면 KRDS 846규칙(DS 120 + CP 446 + BP 108 + SP 172)에 비춰 어디가 잘 지켜졌고 어디가 어긋났는지를 점검한다. 오늘 다룬 타이포그래피는 이 중 DS 영역의 핵심인데, ViewCheck는 각 페이지의 글자 크기·굵기·줄 간격·글꼴이 표준 토큰을 따르는지, 위계가 잡혀 있는지를 자동으로 들여다본다.
광고처럼 들리는 부분이 부담스러우면 이 단락은 건너뛰어도 좋다. 다만 ‘현황 파악’이라는 첫걸음만큼은 어떤 도구를 쓰든 꼭 권하고 싶어서 적는다.
특히 이번 주 주제와 맞닿은 게 ‘디자인 토큰 채택률’이다. ViewCheck의 디자인 시스템 탭을 열면, 우리 사이트가 색·글꼴·간격 같은 기본 값을 정해진 표준 토큰으로 쓰고 있는지를 비율로 보여준다. ‘토큰 채택률 78%’ 같은 식으로 한눈에 나온다. 이 숫자 하나로 ‘우리 사이트의 일관성이 시스템으로 보장되고 있는지, 아니면 모래성인지’를 가늠할 수 있다. 사람이 수백 페이지를 일일이 재는 대신, 자동으로 측정해 리포트로 정리해준다.
게다가 ViewCheck는 단일 페이지가 아니라 사이트 전체(여러 페이지)를 한꺼번에 분석한다. 한 페이지만 잘 만들고 나머지가 엉망이면 의미가 없다. 그래서 여러 페이지를 함께 진단해, 사이트 전체의 일관성을 본다. 앞서 ‘페이지마다 다른 글꼴’ 사례에서 봤듯, 진짜 문제는 페이지 하나가 아니라 ‘페이지들 사이’에서 생긴다. 그 사이를 보려면 여러 페이지를 동시에 놓고 비교해야 하는데, 그건 사람이 손으로 하기 가장 어려운 일이다. ViewCheck가 사이트 전체를 함께 보는 이유가 여기 있다.
점검 결과는 화면 상단의 점수 카드(앞에서 말한 그 ‘한눈에 보는 요약’)로 정리되고, 필요하면 보고용 리포트로도 받을 수 있다. 윗선에 ‘우리 사이트 현황’을 보고할 때, 막연한 말 대신 숫자와 근거가 정리된 자료를 내밀 수 있다는 건 실무자에게 꽤 든든한 무기다. 행정안전부의 「전자정부 웹사이트 품질관리 지침」 7대 영역(호환성·접근성·개방성·접속성·편의성·효율성·신뢰성)과 웹접근성 KWCAG 33항목까지 함께 챙긴다. 오늘 다룬 타이포그래피는 그 큰 그림의 한 조각이지만, 모든 화면에 글자가 있는 만큼 ‘가장 먼저 눈에 들어오는’ 조각이기도 하다.
조금 더 솔직하게 말하면, 우리가 ViewCheck를 만든 출발점도 바로 ‘담당자의 막막함’이었다. 글자가 표준을 따르는지, 위계가 잡혀 있는지, 사이트 전체가 일관된지를 사람이 손으로 일일이 확인하는 건 너무 고된 일이다. 페이지가 많아질수록 불가능에 가까워진다. 그 고된 측정을 도구가 대신해주면, 담당자는 ‘무엇을 어떻게 고칠지’라는 더 중요한 판단에 집중할 수 있다. ViewCheck는 ‘판단을 대신하는 도구’가 아니라 ‘측정을 대신해주는 도구’다. 방향을 잡는 건 여전히 사람의 몫이고, 디테일을 빠짐없이 재는 건 도구의 몫이다. 이 역할 분담이 우리가 생각하는 가장 현실적인 협업이다.
krds.viewcheck.co.kr에 들어가 우리 사이트 주소를 넣어보면, 지금 우리 글자가 표준을 얼마나 따르고 있는지 바로 확인할 수 있다. 거창한 컨설팅 계약 없이도, ‘현황 파악’이라는 첫걸음을 가볍게 떼볼 수 있다는 뜻이다. ‘우리 사이트가 지금 몇 점쯤일까’ 하는 가벼운 호기심으로 시작해도 좋다. 그 호기심이 ‘아, 여기를 고치면 되겠구나’라는 구체적인 실행으로 이어지는 경우를, 우리는 적지 않게 봐왔다.
【 마무리 】
긴 글을 여기까지 읽어줘서 고맙다. 처음엔 ‘글꼴 하나가 뭐 그렇게 대수냐’로 시작했는데, 끝에 와서는 생각이 조금 달라졌기를 바란다.
오늘 이야기를 한 줄로 압축하면 이렇다. 글자는 공공 웹의 ‘목소리’이고, Pretendard GOV는 그 목소리를 일관되고, 또렷하고, 누구나 알아들을 수 있게 다듬어둔 공식 표준이다. 그리고 그 표준이 ‘읽힘·일관됨·접근성’이라는 세 미덕을 동시에 잡으려고 설계됐다는 것, 글자 크기·굵기·줄 간격이 만드는 ‘위계’가 사용자의 헤맴을 줄여준다는 것, 그 약속을 ‘토큰’으로 관리하면 일관성이 시스템이 된다는 것 — 이 세 가지만 기억해도 충분하다.
다시 강조하지만, 한 번에 다 바꾸려 애쓸 필요는 없다. 먼저 현황을 알고, 영향 큰 것부터, 개편 시점에 맞춰 점진적으로. 이 순서면 무리 없이 갈 수 있다. 그리고 그 첫걸음인 ‘현황 파악’은 생각보다 쉽다. 사이트 주소 하나만 있으면 된다.
마지막으로 한 가지 당부를 남기고 싶다. 글자 문제를 ‘디자인 취향’의 영역으로 여기지 말아 달라는 것이다. 글자는 취향이 아니라 ‘소통의 기반’이다. 같은 안내문이라도 잘 차려입은 글자로 전하면 국민이 한 번에 이해하고, 흐트러진 글자로 전하면 두 번 세 번 되묻게 된다. 그 차이가 쌓이면 민원이 되고, 행정 비용이 되고, 결국 신뢰의 문제가 된다. 표준 서체와 일관된 타이포그래피는 ‘예쁘게 보이려는’ 게 아니라 ‘제대로 전하려는’ 노력이다. 이 관점만 가지고 있어도, 앞으로 사이트를 볼 때 보이지 않던 것들이 보이기 시작할 거다.
이번 주는 타이포그래피를 주제로 수요일·금요일에 글이 이어진다. 오늘이 ‘왜 표준 서체인가’라는 개념 편이었다면, 다음 글들에서는 ‘토큰 채택률을 어떻게 읽고 활용하는가’, ‘디자인 일관성을 실무에서 어떻게 지키는가’ 같은 더 구체적인 이야기로 들어간다. 오늘 잡아둔 개념의 뼈대 위에 살을 붙여가는 셈이니, 다음 글도 함께 읽으면 그림이 훨씬 또렷해질 거다. 그때 또 만나자.
키워드/태그: #KRDS #공공웹 #PretendardGOV #공공서체 #타이포그래피 #디자인시스템 #디자인토큰 #웹접근성 #전자정부 #공공디자인 #토큰채택률 #ViewCheck
ViewCheck — KRDS 자동 준수 검증 서비스
krds.viewcheck.co.kr