글자 사이에도 숨 쉴 공간이 필요하다

KRDS DS-032 — 줄 간격을 150% 이상으로 설정하고 있다.

0. 들어가며 — 보이지 않는 공간의 힘

지금까지 글꼴(027~029)과 두께(030·031)를 다뤘습니다. 이번엔 글자 자체가 아니라 글자 사이의 공간 — 줄 간격(line spacing, line-height) 입니다.

줄 간격은 한 줄의 글과 다음 줄 사이의 세로 간격입니다. 이 간격이 좁으면 글이 빽빽하게 뭉치고, 넓으면 숨 쉴 공간이 생깁니다. 눈에 잘 띄지 않는 요소지만, 가독성에 미치는 영향은 글꼴 못지않게 큽니다. 빽빽한 글은 읽다가 줄을 놓치기 쉽고, 답답하고, 피로합니다.

DS-032는 이 줄 간격을 150% 이상으로 설정하라고 규정합니다. 글자 크기의 1.5배 이상의 줄 간격을 두라는 것이죠. 이번 편은 줄 간격이 왜 가독성에 중요한지, 왜 하필 150%인지를 풀어냅니다. 보이지 않지만 강력한, 공간의 이야기입니다.

1. 규칙 원문 — 명확한 수치

DS-032 (디자인 스타일 > 타이포그래피) “줄 간격을 150% 이상으로 설정하고 있다.”

“줄 간격”

한 줄과 다음 줄 사이의 세로 간격입니다. CSS의 line-height에 해당하죠.

“150% 이상”

글자 크기의 1.5배 이상으로 줄 간격을 두라는 뜻입니다. 16px 글자라면 줄 간격이 24px(16×1.5) 이상이어야 합니다. CSS로는 line-height: 1.5 이상입니다.

정리: 줄 간격을 글자 크기의 1.5배(150%) 이상으로 설정하라. 이게 DS-032입니다.

2. 왜 줄 간격이 가독성에 중요한가

줄 간격이 좁으면 무슨 일이 생길까요? 구체적으로 봅시다.

줄을 놓친다

긴 글을 읽을 때 우리 눈은 한 줄을 다 읽으면 다음 줄의 시작으로 정확히 돌아가야 합니다. 그런데 줄 간격이 좁으면, 줄들이 너무 가까워 어느 줄로 돌아가야 할지 헷갈립니다. 방금 읽은 줄을 다시 읽거나, 한 줄을 건너뛰는 일이 생기죠. 줄 간격이 충분하면 줄들이 분명히 구분되어, 눈이 다음 줄을 정확히 찾아갑니다.

답답하고 피로하다

빽빽한 글은 시각적으로 답답합니다. 글자들이 위아래로 뭉쳐 있으면 ‘벽처럼’ 느껴져, 읽기도 전에 부담스럽습니다. 적절한 줄 간격은 글에 ’숨 쉴 공간’을 주어, 편안하게 읽히게 합니다. 같은 내용이라도 줄 간격에 따라 ’읽고 싶은 글’과 ’읽기 싫은 글’로 갈립니다.

한글은 특히 더 필요하다

한글은 받침이 있어 글자의 세로 높이가 영문보다 큽니다. 그래서 한글은 줄 간격이 더 넉넉해야 답답하지 않습니다. 정부 서비스는 한글 본문이 대부분이므로, 충분한 줄 간격이 특히 중요합니다.

줄 간격은 ‘글자를 더 잘 보이게’ 하는 게 아니라 ‘글을 더 잘 읽히게’ 합니다. 가독성은 글자 하나의 문제가 아니라, 글자들이 이루는 ’글 덩어리’의 문제이기도 합니다.

3. 왜 하필 150%인가 — 국제 기준과의 일치

150%(1.5배)라는 수치는 임의로 정한 게 아닙니다. 국제 웹 접근성 기준과 일치합니다.

WCAG(웹 콘텐츠 접근성 지침)는 성공기준 1.4.8(시각적 표현) 과 1.4.12(텍스트 간격) 에서 본문 줄 간격을 글자 크기의 최소 1.5배로 권장합니다. 이 수치는 다양한 사용자, 특히 난독증(dyslexia) 이 있는 사용자의 읽기를 돕는 연구에 기반합니다. 난독증 사용자는 줄 간격이 좁으면 줄을 따라가기가 특히 어려운데, 1.5배 이상의 간격이 이를 크게 개선합니다.

저시력·고령 사용자에게도 마찬가지입니다. 시야가 흐리거나 좁은 사용자는 줄을 구분하기 어려운데, 넉넉한 줄 간격이 줄 구분을 돕습니다. 즉 150%라는 기준은 ’대부분에게 편하고, 읽기 어려운 사용자에게는 결정적’인 값입니다. KRDS가 이 국제 기준을 그대로 채택한 것은, 색의 명도 대비(WCAG 4.5:1)를 따른 것과 같은 맥락 입니다 — 검증된 접근성 표준을 정부 서비스에 적용한 것이죠.

다만 150%는 ’최소’입니다. 본문이 길거나 한글이 많으면 160~180%가 더 편할 수 있습니다. 150%는 넘지 말아야 할 하한선이지, 그 이상은 콘텐츠에 맞게 더 넉넉히 둘 수 있습니다.

4. 줄 간격과 다른 간격들 — 공간의 체계

줄 간격은 타이포그래피의 여러 ‘공간’ 중 하나입니다. 함께 이해하면 좋습니다.

줄 간격(line-height) — 줄과 줄 사이 세로 간격. DS-032의 주제.

자간(letter-spacing) — 글자와 글자 사이 가로 간격.

단락 간격(margin) — 단락과 단락 사이 간격.

줄 길이(line length) — 한 줄의 가로 길이.

이 공간들이 함께 글의 ’읽기 리듬’을 만듭니다. 줄 간격이 충분해도 한 줄이 너무 길면(줄 길이 과다) 역시 줄을 놓치기 쉽고, 단락 간격이 없으면 글이 한 덩어리로 뭉칩니다. DS-032는 그중 줄 간격을 규정하지만, 좋은 가독성은 이 공간들의 조화에서 나옵니다.

특히 줄 간격과 줄 길이는 함께 봐야 합니다. 줄이 길수록 다음 줄로 돌아가는 거리가 멀어, 더 넉넉한 줄 간격이 필요합니다. 그래서 본문 영역의 너비를 적절히 제한하고(너무 넓지 않게), 줄 간격을 150% 이상 주면, 눈이 편안하게 줄을 오갈 수 있습니다. 공간은 따로 노는 게 아니라 체계로 작동합니다.

이 ’공간의 체계’를 글의 호흡에 비유할 수 있습니다. 사람이 말할 때 적절히 쉼표와 마침표로 숨을 고르듯, 글도 적절한 공간으로 시각적 호흡을 만들어야 합니다. 줄 간격은 줄 사이의 숨, 단락 간격은 단락 사이의 숨, 여백은 글 전체의 숨입니다. 이 숨이 부족하면 글이 숨 막히게 빽빽해지고, 사용자는 무의식적으로 부담을 느껴 글을 끝까지 읽지 않습니다. 정부 서비스의 안내문은 사용자가 끝까지 읽어야 하는 내용이 많은데, 빽빽한 공간 탓에 중간에 읽기를 포기하면 중요한 정보를 놓치게 됩니다.

흥미롭게도, 충분한 공간은 ‘내용이 적어 보이게’ 만들어 오히려 사용자가 읽기 시작하게 하는 효과도 있습니다. 같은 분량의 글이라도 빽빽하면 ‘벽처럼’ 느껴져 읽기 전에 질리지만, 넉넉한 줄 간격으로 펼쳐 놓으면 ‘읽을 만해’ 보입니다. 첫인상에서 ’읽을 만하다’고 느끼게 하는 것은 가독성의 중요한 출발점입니다. 줄 간격 하나가 사용자가 글을 읽기 시작하느냐 마느냐를 가르기도 하는 것이죠. 보이지 않는 공간이 이렇게 큰 차이를 만듭니다.

5. 흔한 위반 패턴

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

함정 ① 좁은 줄 간격. line-height: 1.2 등 150% 미만 → 빽빽, 줄 놓침. → 1.5 이상.

함정 ② 줄 간격 미설정. line-height 미지정으로 브라우저 기본값(보통 1.2 안팎) 사용 → 부족. → 명시적 1.5↑.

함정 ③ 긴 줄 + 좁은 간격. 넓은 본문에 좁은 줄 간격 → 줄 놓치기 심각. → 줄 길이 제한 + 넉넉한 간격.

함정 ④ 한글에 영문 기준. 한글 본문에 좁은 줄 간격 → 받침 때문에 더 답답. → 한글은 더 넉넉히.

핵심: 본문 줄 간격은 최소 1.5(150%). 이 한 줄이 가독성을 크게 좌우합니다.

6. 무엇을 점검하나

DS-032는 본문 줄 간격이 150% 이상인지를 봅니다.

줄 간격 값 — 본문 line-height가 1.5(150%) 이상인가.

명시 여부 — 줄 간격이 명시적으로 설정됐는가(브라우저 기본 의존 아님).

줄 길이 조화 — 줄 길이가 과도하게 길지 않은가.

한글 고려 — 한글 본문에 충분한 간격이 적용됐는가.

7. 누가 담당하나

역할	책임
디자이너	본문 줄 간격을 150% 이상으로 설계
퍼블리셔/개발	line-height 명시 적용, 줄 길이 조정
접근성 담당	다양한 콘텐츠에서 줄 간격 충족 검증

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

적용 대상

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

본문 텍스트가 있는 모든 사이트 = 해당. 줄 간격을 점검합니다.

예외(N/A)

본문 글이 있는 사이트는 모두 대상입니다. 단, 한 줄짜리 라벨·버튼 텍스트는 줄 간격 영향이 적습니다.

9. 단계별 개선 방법

Before / After

/* ❌ Before: 좁은 줄 간격 */ body { line-height: 1.2; } /* 120% — 빽빽 */ /* ✅ After: 150% 이상 */ body { line-height: 1.6; /* 160% — 한글 본문에 넉넉 */ max-width: 70ch; /* 줄 길이 제한으로 가독성 보완 */ }

정비 순서

본문 줄 간격 — line-height를 1.5 이상으로.

명시 설정 — 브라우저 기본 대신 명시적 값 지정.

줄 길이 조정 — 너무 긴 줄은 너비 제한.

한글 고려 — 한글 본문은 1.6~1.8도 검토.

10. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 본문 줄 간격이 글자 크기의 1.5배 이상인가요?

□ 글이 빽빽하게 뭉쳐 보이지 않나요?

□ 긴 글에서 줄을 놓치지 않고 읽히나요?

□ 줄 간격을 명시적으로 설정했나요?

□ 한글 본문이 답답하지 않나요?

❓ FAQ

Q1. 왜 하필 150%인가요? 국제 웹 접근성 기준(WCAG 1.4.8/1.4.12)이 본문 줄 간격을 최소 1.5배로 권장합니다. 난독증·저시력 사용자의 읽기를 돕는 연구에 기반한 값입니다. KRDS는 이 검증된 기준을 채택했습니다.

Q2. 150%보다 더 넓혀도 되나요? 네. 150%는 최소값입니다. 본문이 길거나 한글이 많으면 160~180%가 더 편할 수 있습니다. 다만 너무 넓으면 (예: 250%) 줄들이 따로 노는 느낌이 들 수 있으니 적정선을 찾으세요.

Q3. 제목이나 짧은 텍스트도 150%인가요? DS-032는 주로 ’읽는 본문’에 적용됩니다. 큰 제목이나 한 줄짜리 텍스트는 줄 간격 영향이 적어 더 좁아도 됩니다. 핵심은 여러 줄로 이어지는 본문의 줄 간격입니다.

Q4. line-height를 px로 줘도 되나요? 단위 없는 배수(line-height: 1.5)를 권장합니다. 글자 크기가 바뀌어도 비율이 유지되기 때문입니다. px로 고정하면 글자 크기 변경 시 비율이 깨질 수 있습니다.

Q5. 줄 간격만 넓히면 가독성이 좋아지나요? 줄 간격은 중요하지만, 줄 길이·단락 간격·글자 크기와 함께 작동합니다. 줄 간격을 150% 이상 주되, 줄 길이도 적절히 제한하면 가독성이 더 좋아집니다.

11. 마무리 — 비움이 곧 가독성이다

DS-032의 메시지는 공간의 가치를 일깨웁니다.

가독성은 글자를 채우는 것만이 아니라, 글자 사이를 적절히 비우는 데서도 나온다.

줄 간격은 눈에 띄지 않는 빈 공간이지만, 그 빈 공간이 글을 읽히게 합니다. 빽빽한 글은 줄을 놓치게 하고 답답하게 하지만, 1.5배 이상의 줄 간격은 글에 숨 쉴 공간을 주어 편안하게 읽히게 합니다. 특히 받침 있는 한글, 그리고 난독증·저시력 사용자에게 이 공간은 결정적입니다. 채움만큼 비움이 중요하다는 것 — 타이포그래피의 보이지 않는 지혜입니다.

다음 편부터는 글자의 ’크기’로 넘어갑니다. DS-033 — “본문 폰트 크기를 최소 16px(1rem) 이상으로 설정한다.” 글자가 작으면 왜 안 되는지, 본문 크기의 최소 기준을 다룹니다.

다음 편 예고 ▶ 「033. 본문 폰트 크기를 최소 16px(1rem) 이상으로 설정하고 있다.」

우리 사이트의 줄 간격이 충분한지 확인하려면? ViewCheck는 본문의 줄 간격(line-height)이 150% 이상인지, 명시적으로 설정됐는지, 줄 길이와 조화로운지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 Understanding 1.4.12 Text Spacing — https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html

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

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