콘텐츠는 1200px까지

KRDS DS-060 — 사이드 메뉴를 포함한 최대 콘텐츠 너비를 1200px로 사용하고 있다.

0. 들어가며 — 너비의 구체적 천장

지난 59편에서 “큰 화면에서 콘텐츠가 지나치게 넓어지지 않게 하라”는 원칙을 봤습니다. 이번 60편은 그 구체적 값을 못 박습니다 — 사이드 메뉴를 포함한 최대 콘텐츠 너비 1200px.

59편이 ’너무 넓어지지 않게’라는 원칙이었다면, 60편은 ’최대 1200px’이라는 정확한 천장입니다. 화면이 아무리 넓어도 콘텐츠 영역(사이드 메뉴 포함)은 1200px을 넘지 않게 하는 것이죠. 이번 편은 1200px이라는 표준 너비의 의미를 풀어냅니다.

1. 규칙 원문 — 1200px 천장

DS-060 (디자인 스타일 > 레이아웃) “사이드 메뉴를 포함한 최대 콘텐츠 너비를 1200px로 사용하고 있다.”

콘텐츠 영역(사이드 메뉴 포함)의 너비가 최대 1200px을 넘지 않게 한다는 뜻입니다.

정리: 콘텐츠 최대 너비(사이드 메뉴 포함)를 1200px로 제한하라. 이게 DS-060입니다.

2. 왜 1200px인가

1200px이라는 값에는 근거가 있습니다.

1200px은 웹에서 널리 쓰이는 표준 콘텐츠 너비입니다. 일반적인 데스크톱 모니터(1280px, 1366px, 1920px 등)에서 양옆에 적절한 여백을 두면서 콘텐츠를 담기에 알맞은 너비죠. 이보다 좁으면 큰 화면에서 콘텐츠가 너무 작아 보이고, 이보다 넓으면 본문 줄이 길어져 가독성이 떨어집니다(59편). 1200px은 ‘큰 화면을 활용하되 가독성을 지키는’ 균형점입니다.

또한 1200px은 12칼럼 그리드(53편)와도 잘 맞습니다. 1200px을 12칼럼으로 나누면 각 칼럼이 깔끔한 값으로 떨어져, 그리드 계산이 자연스럽습니다. 표준 너비와 표준 칼럼이 함께 작동하는 것이죠.

그리고 모든 정부 서비스가 1200px을 쓰면 범정부 일관성이 생깁니다. 어느 정부 사이트를 가도 콘텐츠 너비가 비슷해, 익숙한 레이아웃 경험을 주죠. 이는 색·글꼴·그리드 값을 표준화한 것(DS-058)과 같은 원리입니다. 1200px은 가독성·그리드 정합·일관성을 한 번에 확보하는 표준값입니다.

핵심은 ’사이드 메뉴를 포함’한다는 점입니다. 본문만 1200px이 아니라, 사이드 메뉴까지 합친 전체 콘텐츠 영역이 1200px이라는 것이죠. 사이드 메뉴가 있으면 본문은 그만큼 좁아지고, 전체는 1200px 안에 들어옵니다.

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

흔한 위반 패턴

함정 ① 너비 무제한. 콘텐츠가 화면 끝까지 → 초대형 모니터에서 줄 폭증. → 1200px 제한. 함정 ② 과한 제한. 800px 등 너무 좁게 → 큰 화면 공간 낭비. → 1200px 기준. 함정 ③ 사이드 미포함 계산. 본문만 1200px, 사이드 별도 → 전체 초과. → 사이드 포함 1200px.

무엇을 점검하나

최대 너비 — 콘텐츠 영역이 1200px 이하인가.

사이드 포함 — 사이드 메뉴 포함 전체가 1200px 안인가.

가운데 정렬 — 남는 공간이 양옆 여백으로 처리되는가.

Before / After

/* ❌ Before: 너비 무제한 */ .layout { width: 100%; } /* ✅ After: 최대 1200px (사이드 포함) */ .layout { max-width: 1200px; /* 사이드 메뉴 + 본문 합쳐 1200px */ margin: 0 auto; }

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

역할	책임
디자이너	콘텐츠 최대 너비 1200px 설계
퍼블리셔/개발	max-width 1200px 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 콘텐츠 최대 너비가 1200px 이하인가요?

□ 사이드 메뉴 포함 전체가 1200px 안인가요?

□ 큰 화면에서 남는 공간이 양옆 여백인가요?

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

❓ FAQ

Q1. 왜 1200px인가요? 일반 데스크톱에서 양옆 여백을 두며 콘텐츠를 담기 좋은 표준 너비이고, 12칼럼 그리드와 잘 맞으며, 본문 줄 길이도 적정합니다. 가독성·그리드·일관성을 한 번에 확보하는 값입니다.

Q2. 사이드 메뉴 포함이 무슨 뜻인가요? 본문만 1200px이 아니라, 사이드 메뉴 + 본문을 합친 전체 콘텐츠 영역이 1200px이라는 뜻입니다. 사이드가 있으면 본문은 그만큼 좁아집니다.

Q3. 더 넓게 쓰면 안 되나요? 1200px을 넘으면 본문 줄이 길어져 가독성이 떨어집니다(59편). 큰 화면 공간은 너비를 늘이기보다 여백이나 구조로 활용하세요.

Q4. KRDS를 채택하면 자동인가요? KRDS 레이아웃은 최대 콘텐츠 너비를 1200px로 정의합니다. 채택하면 DS-060이 충족됩니다.

6. 마무리 — 너비에도 천장을

DS-060의 메시지는 너비의 표준을 담습니다.

콘텐츠 최대 너비는 1200px — 가독성·그리드·일관성을 한 번에 확보하는 표준값.

화면이 아무리 넓어도 콘텐츠(사이드 포함)는 1200px을 넘지 않게 하면, 본문 줄이 적정 길이로 유지되고, 12칼럼 그리드와 맞으며, 모든 정부 서비스가 통일된 너비를 갖습니다. 59편의 ’너무 넓어지지 않게’라는 원칙이 1200px이라는 구체적 값으로 완성되는 것이죠.

다음 편은 양쪽 메뉴가 있을 때의 작은 화면 대응을 다룹니다. DS-061 — “양쪽 메뉴를 함께 사용할 경우 작은 화면에서 콘텐츠 가독성을 위해 메뉴 배치를 조정한다.” 좁은 화면에서 메뉴가 콘텐츠를 압박하지 않게 하는 법을 살펴봅니다.

다음 편 예고 ▶ 「061. 양쪽 메뉴를 함께 사용할 경우 작은 화면에서 사용 시 콘텐츠 가독성을 위해 메뉴 배치를 조정하고 있다.」

우리 사이트의 콘텐츠 너비가 1200px 표준을 지키는지 확인하려면? ViewCheck는 콘텐츠 최대 너비가 1200px(사이드 포함) 이하인지를 진단합니다.

📚 참고 출처

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

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

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