넓은 화면이라고 글을 끝까지 늘이지 마라

KRDS DS-059 — 큰 화면에서 콘텐츠 영역이 지나치게 넓어지지 않도록 가독성과 정보 전달력을 고려하여 레이아웃을 조정하고 있다.

0. 들어가며 — 큰 화면의 역설

지금까지 작은 화면 대응(반응형)을 주로 봤습니다. 이번 59편은 반대로 큰 화면의 문제를 다룹니다.

큰 모니터가 좋기만 할까요? 의외로 함정이 있습니다. 화면이 넓다고 콘텐츠(특히 본문 텍스트)를 화면 끝까지 늘이면, 한 줄이 너무 길어져 오히려 읽기 어려워집니다. 32편(줄 간격)에서 봤듯, 줄이 너무 길면 다음 줄로 돌아갈 때 줄을 놓치기 쉽죠. DS-059는 큰 화면에서 콘텐츠가 지나치게 넓어지지 않게 조정하라고 규정 합니다. 이번 편은 ‘넓은 화면일수록 콘텐츠 너비를 절제해야 하는’ 역설을 풀어냅니다.

1. 규칙 원문 — 콘텐츠 너비 조정

DS-059 (디자인 스타일 > 레이아웃) “큰 화면에서 콘텐츠 영역이 지나치게 넓어지지 않도록 가독성과 정보 전달력을 고려하여 레이아웃을 조정하고 있다.”

큰 화면에서 콘텐츠(특히 본문)가 너무 넓게 퍼지지 않게 너비를 제한하라는 뜻입니다.

정리: 큰 화면에서 콘텐츠가 지나치게 넓어지지 않도록 너비를 조정하라. 이게 DS-059입니다.

2. 왜 넓으면 안 되나 — 긴 줄의 가독성 저하

큰 화면에서 본문을 끝까지 늘이면 한 줄이 매우 길어집니다. 왜 문제일까요?

읽기 연구에 따르면, 한 줄의 적정 길이는 한글 기준 대략 35~45자(영문 45~75자) 정도입니다. 이보다 줄이 훨씬 길면, 한 줄을 다 읽고 다음 줄 시작으로 눈을 옮길 때 정확히 찾아가기 어려워집니다. 줄이 길수록 다음 줄로 돌아가는 거리가 멀어, 줄을 놓치거나 같은 줄을 다시 읽게 되죠. 큰 모니터에서 본문을 화면 전체 너비로 늘이면 한 줄이 100자가 넘어, 읽기가 피로하고 비효율적이 됩니다.

그래서 큰 화면에서는 콘텐츠 너비를 적절히 제한해야 합니다. 화면이 넓어도 본문 영역은 적정 너비(읽기 좋은 줄 길이)로 유지하고, 남는 공간은 여백으로 두는 것이죠. 이는 ’화면이 넓다고 다 채우지 않는다’는 절제입니다. 빈 공간이 아까워 보여도, 그 여백이 가독성을 지킵니다. 정보 전달력은 ’얼마나 넓게 펼치느냐’가 아니라 ’얼마나 잘 읽히느냐’에 달려 있으니까요.

이는 60:30:10(DS-009)에서 차분한 여백을 둔 것, 줄 간격(32편)에서 공간을 둔 것과 같은 ‘비움의 가독성’ 원리입니다. 채우는 것만이 능사가 아니라, 적절히 비워야 읽힙니다.

3. 어떻게 조정하나 — 최대 너비와 여백

큰 화면에서 콘텐츠를 조정하는 방법은 크게 두 가지입니다.

첫째, 콘텐츠 최대 너비를 제한합니다. 화면이 아무리 넓어도 콘텐츠 영역은 일정 너비(예: 1200px, DS-060)를 넘지 않게 하고, 남는 공간은 양옆 여백으로 둡니다. 그러면 본문 줄 길이가 적정 수준으로 유지되죠.

둘째, 레이아웃을 재구성합니다. 넓은 화면에서는 콘텐츠를 한 줄로 길게 늘이는 대신, 여러 칼럼으로 나누거나 (다단), 사이드 영역을 활용해 정보를 가로로 배치합니다. 그러면 화면 너비를 활용하되 본문 줄은 길어지지 않죠. 큰 화면의 공간을 ‘줄을 늘이는’ 데 쓰지 말고 ‘구조를 풍부하게 하는’ 데 쓰는 것입니다.

DS-059는 이 조정을 ‘가독성과 정보 전달력을 고려하여’ 하라고 합니다. 즉 기계적으로 너비만 자르는 게 아니라, 콘텐츠 성격에 맞게 조정하라는 것이죠. 긴 본문은 너비 제한이, 카드 그리드는 다단 배치가 어울립니다. 핵심은 ‘큰 화면에서도 읽기 좋고 정보가 잘 전달되게’ 하는 것입니다.

4. 흔한 위반 패턴 / 점검 / 개선

흔한 위반 패턴

함정 ① 본문 풀폭. 큰 화면에서 본문이 화면 끝까지 → 줄 너무 길어 읽기 어려움. → 최대 너비 제한. 함정 ② 너비 무제한. 콘텐츠 최대 너비 없음 → 초대형 모니터에서 줄 폭증. → 최대 너비(DS-060). 함정 ③ 여백 회피. 빈 공간이 아까워 다 채움 → 가독성 저하. → 여백 허용.

무엇을 점검하나

줄 길이 — 큰 화면에서 본문 한 줄이 과도하게 길지 않은가.

최대 너비 — 콘텐츠 최대 너비가 제한됐는가.

조정 적절성 — 콘텐츠 성격에 맞게 레이아웃이 조정됐는가.

Before / After

/* ❌ Before: 본문이 화면 끝까지 */ .content { width: 100%; } /* ✅ After: 최대 너비 제한 + 가운데 정렬 */ .content { max-width: 1200px; /* DS-060 */ margin: 0 auto; /* 남는 공간은 양옆 여백 */ } .article-body { max-width: 70ch; } /* 본문은 더 좁게(적정 줄 길이) */

5. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너	큰 화면 콘텐츠 너비·레이아웃 조정 설계
퍼블리셔/개발	최대 너비·여백 구현

기관 유형	DS-059 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

큰 화면을 지원하는 모든 사이트 = 해당.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 큰 화면에서 본문 한 줄이 너무 길지 않나요?

□ 콘텐츠 최대 너비가 제한돼 있나요?

□ 초대형 모니터에서 콘텐츠가 끝까지 퍼지지 않나요?

□ 빈 공간(여백)을 가독성을 위해 허용하나요?

❓ FAQ

Q1. 적정 줄 길이가 얼마인가요? 한글 기준 대략 35~45자 정도가 읽기 좋습니다. 이보다 훨씬 길면 줄을 놓치기 쉽습니다. 본문 영역 너비를 이에 맞춰 제한하세요.

Q2. 빈 여백이 아까운데요? 공간을 다 채우는 것보다 읽기 좋은 것이 우선입니다. 큰 화면의 여백은 낭비가 아니라 가독성을 위한 의도된 공간입니다(60:30:10의 원리).

Q3. 카드 그리드도 너비를 제한하나요? 긴 본문은 너비 제한, 카드 그리드는 다단 배치로 너비를 활용할 수 있습니다. 콘텐츠 성격에 맞게 조정합니다. 핵심은 ’본문 줄이 길어지지 않게’입니다.

Q4. 최대 너비는 얼마인가요? 사이드 메뉴 포함 최대 1200px이 기준입니다(DS-060). 본문 텍스트는 그보다 더 좁게 제한하는 것이 좋습니다.

7. 마무리 — 넓다고 다 채우지 않는다

DS-059의 메시지는 큰 화면의 절제를 담습니다.

넓은 화면이라고 콘텐츠를 끝까지 늘이지 마라 — 가독성을 위해 너비를 절제하라.

화면이 넓다고 본문을 다 채우면 줄이 너무 길어져 읽기 어려워집니다. 콘텐츠 최대 너비를 제한하고 남는 공간은 여백으로 두거나 구조를 풍부하게 쓰는 것 — 이것이 큰 화면의 가독성을 지키는 법입니다. 정보 전달력은 넓게 펼치는 게 아니라 잘 읽히는 데서 나옵니다. 채움보다 적절한 비움이 가독성을 만드는, 일관된 원리입니다.

다음 편은 그 최대 너비의 구체적 값을 다룹니다. DS-060 — “사이드 메뉴를 포함한 최대 콘텐츠 너비를 1200px로 사용한다.” 콘텐츠 너비의 표준값을 살펴봅니다.

다음 편 예고 ▶ 「060. 사이드 메뉴를 포함한 최대 콘텐츠 너비를 1200px로 사용하고 있다.」

우리 사이트의 큰 화면 콘텐츠 너비가 적절한지 확인하려면? ViewCheck는 큰 화면에서 본문 줄 길이가 적정한지, 콘텐츠 최대 너비가 제한됐는지를 진단합니다.

📚 참고 출처

KRDS 레이아웃(Layout) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_04.html

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

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