화면 크기를 몇 구간으로 나눌까

KRDS DS-056 — 브레이크 포인트 단계를 최소 3단계에서 6단계로 설정하여 사용하고 있다.

0. 들어가며 — 반응형의 구간 나누기

51편에서 브레이크포인트(화면 크기 구간) 개념을 봤습니다. 이번 56편은 그 구간을 몇 단계로 나눌지를 다룹니다.

화면 크기는 연속적입니다 — 작은 폰부터 큰 모니터까지요. 이 연속적인 크기를 몇 개의 ’구간’으로 나누고, 각 구간에 맞는 레이아웃을 정의하는 것이 반응형의 기본입니다. 그런데 구간을 너무 적게 나누면 화면 크기별 대응이 거칠고, 너무 많이 나누면 관리가 복잡해지죠. DS-056은 이 구간을 최소 3단계에서 6단계 사이로 설정하라고 규정합니다. 이번 편은 브레이크포인트 개수의 적정 범위를 풀어냅니다.

1. 규칙 원문 — 단계 수의 범위

DS-056 (디자인 스타일 > 레이아웃) “브레이크 포인트 단계를 최소 3단계에서 6단계로 설정하여 사용하고 있다.”

브레이크포인트(화면 크기 구간)를 3개에서 6개 사이로 나누라는 뜻입니다.

정리: 화면 크기 구간(브레이크포인트)을 3~6단계로 설정하라. 이게 DS-056입니다.

2. 왜 3~6단계인가 — 너무 적지도 많지도 않게

이 범위의 의미를 봅시다.

3단계 미만이면 — 대응이 거칠다

만약 구간이 1~2개면(예: ’PC와 모바일’만), 그 사이의 다양한 화면(태블릿, 작은 노트북 등)에 제대로 대응 하지 못합니다. PC용 레이아웃이 갑자기 모바일용으로 바뀌면서, 중간 크기 화면에서 어색해지죠. 최소 3단계는 있어야 큰·중간·작은 화면을 각각 적절히 다룰 수 있습니다.

6단계 초과면 — 관리가 복잡하다

반대로 구간이 7개, 8개로 많아지면, 각 구간마다 레이아웃·마진·칼럼을 정의하고 검증해야 해서 관리가 폭증 합니다. 인접 구간의 차이도 미미해져 굳이 나눌 의미가 약해지죠. 6단계면 대부분의 화면 크기를 충분히 세밀 하게 커버합니다.

3~6단계는 이 사이의 적정 범위입니다 — 다양한 화면에 충분히 대응하되, 관리할 만한 수준. 이는 글자 굵기 (둘~넷, 30·31편), 레디어스(5단계, 43편)처럼 ‘충분하되 과하지 않은’ 단계 수를 정하는 디자인 시스템의 일관된 원리입니다. 단계는 필요한 만큼만 두는 것이 좋습니다.

다만 KRDS는 이 범위 안에서 더 구체적으로 ’4단계’를 권합니다(다음 편 DS-057). 즉 3~6단계가 허용 범위이고, 4단계가 권장값인 것이죠. 두께 둘/넷처럼 ’범위와 권장’을 함께 두는 방식입니다.

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

흔한 위반 패턴

함정 ① 2단계 이하. PC·모바일만 → 중간 화면 대응 부족. → 최소 3단계. 함정 ② 7단계 이상. 과도한 구간 → 관리 복잡, 차이 미미. → 6단계 이하. 함정 ③ 구간 없음. 반응형 미적용, 한 크기 고정 → 다른 화면 깨짐. → 브레이크포인트 설정.

무엇을 점검하나

단계 수 — 브레이크포인트가 3~6단계인가.

대응 충분성 — 다양한 화면 크기에 적절히 대응하는가.

관리 가능성 — 구간이 과도하게 많지 않은가.

Before / After

/* ❌ Before: 2단계만 (중간 화면 대응 부족) */ @media (max-width: 768px) { /* 모바일 */ } /* 그 외 PC */ /* ✅ After: 3~6단계 (예: 4단계) */ /* small / medium / large / xlarge */ @media (min-width: 600px) { /* medium */ } @media (min-width: 1024px) { /* large */ } @media (min-width: 1440px) { /* xlarge — 값은 KRDS 기준 */ }

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

역할	책임
디자인 시스템 담당 / 디자이너	브레이크포인트 단계 설계
퍼블리셔/개발	미디어쿼리로 구간 구현

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

반응형을 지원하는 모든 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 브레이크포인트가 3~6단계인가요?

□ 중간 크기 화면(태블릿 등)에도 대응하나요?

□ 구간이 너무 많아 관리가 복잡하지 않나요?

□ 다양한 화면에서 레이아웃이 적절한가요?

❓ FAQ

Q1. 몇 단계가 가장 좋나요? 3~6단계가 허용 범위이고, KRDS는 4단계를 권합니다(DS-057). 4단계면 대부분의 화면 크기를 적절히 커버 하면서 관리도 수월합니다.

Q2. ‘PC와 모바일’ 2단계면 안 되나요? 중간 크기 화면(태블릿, 작은 노트북)에 대응이 부족합니다. 최소 3단계는 있어야 큰·중간·작은 화면을 각각 다룰 수 있습니다.

Q3. 단계가 많을수록 정교하지 않나요? 어느 정도까지는요. 하지만 7단계 이상이면 관리 부담이 크고 인접 단계 차이가 미미해 실익이 적습니다. 6단계 이하가 적정합니다.

Q4. KRDS를 채택하면 자동인가요? KRDS는 브레이크포인트 단계를 정의합니다(4단계 권장). 채택하면 DS-056이 충족됩니다.

6. 마무리 — 적정한 구간 나누기

DS-056의 메시지는 단계 수의 균형을 담습니다.

화면 크기 구간은 너무 적지도(거친 대응) 많지도(복잡한 관리) 않은 3~6단계로.

연속적인 화면 크기를 적절한 구간으로 나눠야 반응형이 작동합니다. 3단계 미만은 중간 화면 대응이 거칠고, 6단계 초과는 관리가 복잡하죠. 3~6단계(권장 4단계)는 충분히 세밀하면서도 관리 가능한 균형점입니다. 이는 ’단계는 필요한 만큼만’이라는 디자인 시스템의 일관된 원리입니다.

다음 편은 그 권장값을 구체화합니다. DS-057 — “총 4단계의 브레이크 포인트를 적용하고, xsmall 디바이스는 최적화에 포함하지 않는다.” 4단계 구성과 그 의미를 살펴봅니다.

다음 편 예고 ▶ 「057. 총 4단계의 브레이크 포인트를 적용하고, xsmall의 디바이스는 최적화에 포함하지 않고 있다.」

우리 사이트의 브레이크포인트가 적절한지 확인하려면? ViewCheck는 브레이크포인트 단계가 3~6단계인지, 다양한 화면 크기에 적절히 대응하는지를 진단합니다.

📚 참고 출처

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

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

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