4단계로 충분하다, 너무 작은 화면은 제외

KRDS DS-057 — 총 4단계의 브레이크 포인트를 적용하고, xsmall의 디바이스는 최적화에 포함하지 않고 있다.

0. 들어가며 — 권장 구성과 제외 기준

지난 56편에서 브레이크포인트를 3~6단계로 설정하라고 했습니다. 이번 57편은 그 권장값 — 4단계 와, 한 가지 제외 기준 — xsmall(아주 작은) 디바이스는 최적화에서 제외 를 다룹니다.

56편이 ’범위(3~6단계)’였다면, 57편은 ’권장(4단계)’입니다. 그리고 여기에 흥미로운 단서가 붙습니다 — 아주 작은 화면(xsmall)은 최적화 대상에 넣지 않는다는 것. 모든 화면을 무한정 최적화할 수는 없으니, 합리적 경계를 긋는 것이죠. 이번 편은 4단계 구성과 xsmall 제외의 의미를 풀어냅니다.

1. 규칙 원문 — 4단계와 제외

DS-057 (디자인 스타일 > 레이아웃) “총 4단계의 브레이크 포인트를 적용하고, xsmall의 디바이스는 최적화에 포함하지 않고 있다.”

“4단계 브레이크 포인트”

화면 크기 구간을 4개로 나눈다는 뜻입니다(56편의 3~6단계 범위 중 권장값).

“xsmall은 최적화에 포함하지 않음”

아주 작은 화면(xsmall, 예: 구형 소형 폰)은 별도 최적화 대상에서 제외한다는 뜻입니다.

정리: 브레이크포인트는 4단계로, 단 아주 작은 화면(xsmall)은 최적화 대상에서 제외하라. 이게 DS-057입니다.

2. 왜 4단계인가

4단계는 ‘큰·중간·작은·아주 큰’ 또는 ‘small·medium·large·xlarge’ 같은 구성입니다. 왜 4단계가 권장값일까요?

대부분의 화면 크기는 크게 4구간으로 나뉩니다 — 모바일, 태블릿, 일반 PC, 큰 모니터. 이 4구간을 각각 다루면 실제 사용되는 거의 모든 기기에 적절히 대응할 수 있습니다. 3단계면 약간 거칠고, 5~6단계면 인접 구간 차이가 미미해 과합니다. 4단계가 ’실제 기기 분포’에 가장 잘 맞는 실용적 구성인 것이죠.

이는 56편의 ‘3~6단계 범위’ 안에서 가장 권장되는 값입니다. 범위(허용)와 권장(4단계)을 함께 두는 것은 두께 둘/넷(30·31편)과 같은 방식입니다 — 4단계를 기본으로 하되, 서비스 특성에 따라 3~6단계 안에서 조정할 수 있는 유연성을 둔 것이죠.

3. xsmall 제외 — 합리적 경계 긋기

DS-057의 흥미로운 부분은 ’xsmall 제외’입니다. 아주 작은 화면을 최적화에서 빼는 이유를 봅시다.

화면은 이론적으로 무한히 작아질 수 있습니다 — 구형 소형 폰, 스마트워치 등. 이 모든 극단적으로 작은 화면을 하나하나 최적화하려면 막대한 노력이 들지만, 그 화면을 쓰는 사용자는 매우 적습니다. 즉 투입 대비 효과가 낮죠. 그래서 KRDS는 합리적 경계를 긋습니다 — xsmall처럼 아주 작은 화면은 별도 최적화 대상에서 제외하고, 4단계(small~xlarge)에 집중하라는 것입니다.

이는 ’모든 것을 최적화할 수 없다’는 현실적 판단입니다. 자원은 한정돼 있으므로, 다수가 쓰는 화면 크기에 집중하는 것이 합리적이죠. 다만 ’제외’가 ’깨져도 된다’는 뜻은 아닙니다. xsmall에서도 콘텐츠는 보여야 하되, 그 화면에 맞춘 별도 최적화까지는 하지 않는다는 의미입니다. 즉 ’최선의 경험’은 4단계에 제공하되, xsmall 에서도 ’기본 사용’은 가능하게 하는 것입니다.

이런 명시적 경계는 KRDS 규칙의 실용성을 보여줍니다. “모든 화면을 완벽히”라는 비현실적 요구 대신, “다수가 쓰는 4단계에 집중하고 극단은 제외”라는 현실적 기준을 제시하죠. 무한한 최적화 요구로부터 담당자를 보호하는 명확한 선입니다.

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

흔한 위반 패턴

함정 ① 단계 부족. 4단계 미만으로 중간 화면 대응 부족. → 4단계 구성. 함정 ② xsmall 과최적화. 극소 화면까지 별도 최적화로 노력 낭비. → xsmall 제외. 함정 ③ xsmall 방치. xsmall에서 콘텐츠가 아예 안 보임. → 기본 사용은 가능하게.

무엇을 점검하나

4단계 구성 — 브레이크포인트가 4단계로 적용됐는가.

xsmall 처리 — 아주 작은 화면을 별도 최적화에서 제외하되 기본 사용은 가능한가.

주요 기기 대응 — 모바일·태블릿·PC·큰 화면에 적절히 대응하는가.

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

역할	책임
디자인 시스템 담당	4단계 브레이크포인트 설계
퍼블리셔/개발	4단계 구현, xsmall 제외 기준 적용

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

반응형 사이트 = 해당.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 브레이크포인트가 4단계로 구성됐나요?

□ 모바일·태블릿·PC·큰 화면에 각각 대응하나요?

□ 극소 화면(xsmall)까지 과도하게 최적화하지 않나요?

□ xsmall에서도 기본 사용은 가능한가요?

❓ FAQ

Q1. 56편(3~6단계)과 57편(4단계), 뭐가 맞나요? 56편은 ‘허용 범위(3~6)’, 57편은 ’권장값(4)’입니다. 4단계를 기본으로 하되, 서비스 특성에 따라 범위 안에서 조정할 수 있습니다(두께 둘/넷과 같은 방식).

Q2. xsmall이 정확히 어느 크기인가요? 일반적인 모바일보다 더 작은 극소 화면(구형 소형 폰 등)입니다. 정확한 기준은 KRDS 브레이크포인트 정의를 따릅니다(DS-058).

Q3. xsmall 제외가 그 사용자를 버리는 건가요? 아닙니다. 별도 ’최적화’를 안 할 뿐, 콘텐츠는 보여야 합니다. 다수가 쓰는 4단계에 집중하되, xsmall에서도 기본 사용은 가능하게 하는 현실적 균형입니다.

Q4. KRDS를 채택하면 자동인가요? KRDS는 4단계 브레이크포인트를 정의하고 xsmall 처리 기준을 제시합니다. 채택하면 DS-057이 충족됩니다.

7. 마무리 — 집중과 경계

DS-057의 메시지는 현실적 우선순위를 담습니다.

다수가 쓰는 4단계에 집중하고, 극단(xsmall)은 별도 최적화에서 제외한다 — 자원은 한정돼 있으니.

4단계는 실제 기기 분포에 가장 잘 맞는 실용적 구성이고, xsmall 제외는 무한한 최적화 요구로부터 자원을 지키는 합리적 경계입니다. 모든 것을 완벽히 하려다 아무것도 제대로 못 하기보다, 다수에 집중하고 명확한 경계를 긋는 것 — 이는 디자인을 넘어 모든 자원 배분의 지혜입니다.

다음 편은 브레이크포인트의 구체적 값을 다룹니다. DS-058 — “브레이크 포인트의 뷰포트, 칼럼 수와 가터, 최소 스크린 마진 값을 지켜서 사용한다.” 각 구간의 정확한 값을 살펴봅니다.

다음 편 예고 ▶ 「058. 브레이크 포인트의 뷰 포트, 칼럼 수와 가터, 최소 스크린 마진 값을 지켜서 사용하고 있다.」

우리 사이트가 4단계 브레이크포인트를 쓰는지 확인하려면? ViewCheck는 브레이크포인트가 4단계로 구성됐는지, 주요 기기에 대응하는지를 진단합니다.

📚 참고 출처

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

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

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