모드가 달라도 받는 건 똑같이

KRDS DS-120 — 선명한 화면 모드로 전환되었을 때에도 일반 모드와 동일한 정보와 기능을 제공하고 있다.

0. 들어가며 — 디자인 스타일의 마지막 규칙

드디어 디자인 스타일(DS) 120개 규칙의 마지막, DS-120입니다. 색상(126)·타이포(2742)·형태(43~50)· 레이아웃(5174)·아이콘(7596)·엘리베이션(97~106)·선명한 화면 모드(107~120)까지, 디자인의 모든 시각 요소를 훑어왔습니다. 그 대미를 장식하는 규칙은 기능 동등성 — 선명한 화면 모드에서도 일반 모드와 똑같은 정보와 기능을 제공하라는 것입니다.

선명한 화면 모드는 ’보는 방식’만 바꾸는 것이지, ’받는 내용’을 줄이는 게 아닙니다. 모드를 바꿨다고 어떤 메뉴 가 사라지거나, 어떤 정보가 빠지거나, 어떤 버튼이 안 눌리면 안 되죠. DS-120은 이 동등성 원칙을 못 박으며 DS를 마무리합니다. 이번 편은 기능 동등성을 풀어냅니다.

1. 규칙 원문 — 동일한 정보와 기능

DS-120 (디자인 스타일 > 선명한 화면 모드) “선명한 화면 모드로 전환되었을 때에도 일반 모드와 동일한 정보와 기능을 제공하고 있다.”

선명한 화면 모드에서도 일반 모드와 똑같은 정보·똑같은 기능을 빠짐없이 제공해야 한다는 뜻입니다.

정리: 선명한 화면 모드에서도 일반 모드와 동일한 정보·기능을 제공하라. 이게 DS-120, DS의 마지막 규칙입니다.

2. 왜 동등성이 마지막을 장식하나

선명한 화면 모드의 본질은 ’표현(presentation)’의 변경이지 ’콘텐츠(content)’의 변경이 아닙니다. 색을 바꾸고 대비를 높이는 것은 더 잘 보이게 하기 위함이지, 내용을 빼기 위함이 아니죠.

그런데 모드를 별도로 구현하다 보면 실수가 생깁니다 — 선명모드 전용 스타일을 만들면서 어떤 요소를 display: none으로 숨겨버리거나, 이미지 기반 콘텐츠를 모드 전환에서 누락하거나, 특정 인터랙션을 빠뜨리는 식이죠. 그 결과 선명모드 사용자만 일부 정보·기능을 못 받게 됩니다. 이건 차별이고, 접근성의 근본 취지에 어긋납니다. 선명한 화면 모드를 쓰는 저시력 사용자는 ‘더 잘 보려고’ 모드를 켰는데, 오히려 받는 정보가 줄면 안 되니까요.

그래서 DS-120은 두 모드의 정보·기능 동등성을 보장하라고 규정합니다 — 메뉴·콘텐츠·버튼·폼·링크·상태 메시지 등 모든 것이 두 모드에서 똑같이 존재하고 작동해야 합니다. 보이는 색만 다를 뿐, 할 수 있는 일과 받는 정보는 동일해야 하죠.

이 규칙이 DS의 마지막을 장식하는 이유가 있습니다. 디자인 스타일 120개 규칙 전체를 관통하는 정신이 바로 ‘모두에게 동등한 접근’이기 때문입니다. 색 대비(13편)도, 색만 의존 금지(6편)도, 아이콘 대체텍스트(91편)도, 선명한 화면 모드 전체(107~119)도 — 결국 ’누구도 정보·기능에서 소외되지 않게’ 하기 위한 것이었습니다. DS-120은 그 정신을 ’두 모드 동등성’으로 압축해 디자인 스타일을 마무리합니다. 표현은 달라도, 본질(정보·기능) 은 모두에게 똑같이.

3. 점검 / 개선

무엇을 점검하나

정보 동등성 — 선명모드에서 빠진 콘텐츠·메뉴·정보가 없는가.

기능 동등성 — 선명모드에서 안 되는 버튼·폼·인터랙션이 없는가.

숨김 금지 — 모드 전환에서 display:none 등으로 요소를 숨기지 않았는가.

Before / After

/* ❌ 선명모드에서 요소 숨김 (정보 누락) */ [data-mode="high-contrast"] .promo-banner { display: none; } /* ✅ 색만 바꾸고 정보·기능은 그대로 유지 */ [data-mode="high-contrast"] .promo-banner { background: var(--hc-bg); color: var(--hc-fg); }

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

역할	책임
디자이너	두 모드 동일 콘텐츠·기능 구성 설계
퍼블리셔/개발	모드 전환 시 요소 숨김·누락 방지 구현
QA	두 모드 정보·기능 동등성 검수

기관 유형	DS-120 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (선명모드 제공 시)

선명한 화면 모드를 제공하는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명모드에서 빠진 정보·메뉴가 없나요?

□ 선명모드에서 안 되는 버튼·폼이 없나요?

□ 모드 전환에서 요소를 숨기지 않았나요?

□ 두 모드가 색만 다르고 내용은 같나요?

❓ FAQ

Q1. 선명모드에서 일부를 숨기면 안 되나요? 안 됩니다. 표현(색)만 바꾸고 정보·기능은 동일해야 합니다. 숨기면 선명모드 사용자만 정보를 못 받는 차별이 됩니다. Q2. 이미지 콘텐츠는요? 래스터(115편)·벡터(116편)로 모드별 처리하되, 콘텐츠 자체는 두 모드에 동일하게 제공해야 합니다. Q3. KRDS를 채택하면 자동인가요? KRDS는 표현만 바꾸는 모드 구조를 권장하지만, 동등성은 구현·검수로 보장해야 합니다.

6. 마무리 — 디자인 스타일(DS) 120개를 마치며

DS-120의 메시지:

모드가 달라도 받는 건 똑같이 — 표현은 바뀌어도 정보·기능은 모두에게 동등해야 한다.

선명한 화면 모드는 ’보는 방식’을 바꿀 뿐, ’받는 내용’을 줄이지 않습니다. 메뉴·콘텐츠·버튼·폼 모든 것이 두 모드에서 똑같이 존재하고 작동해야 하죠. 이 동등성 정신이 디자인 스타일 120개 규칙 전체를 관통하는 핵심이라, DS의 마지막을 장식합니다.

이로써 디자인 스타일(DS) 120개 규칙을 모두 분해했습니다. 색상 26 → 타이포 16 → 형태 8 → 레이아웃 24 → 아이콘 22 → 엘리베이션 10 → 선명한 화면 모드 14. 색 하나, 글자 크기 하나, 간격 하나, 그림자 하나까지 — 모두 ’일관성’과 ’접근성’이라는 두 기둥 위에 서 있었습니다. 디자인 토큰이라는 공통 언어로 이 모든 규칙이 하나로 연결되죠.

다음 편부터는 컴포넌트(CP) 446개 규칙으로 넘어갑니다. 지금까지 ’시각 스타일의 규칙’을 봤다면, 이제부터는 ’버튼·입력칸·내비게이션·테이블 같은 실제 UI 부품이 어떻게 동작하고 어떤 구조를 갖춰야 하는가’를 다룹니다. 846개 중 가장 큰 덩어리(446개)의 시작입니다.

다음 편 예고 ▶ 「121. (CP-001) 컴포넌트 영역의 첫 규칙」 — 디자인 스타일을 마치고 컴포넌트 446개로.

ViewCheck는 선명한 화면 모드가 일반 모드와 동일한 정보·기능을 제공하는지를 진단합니다. 그리고 디자인 스타일 120개 규칙 전체의 준수 여부를 자동으로 점검합니다.

📚 참고 출처

KRDS 선명한 화면 모드 가이드 — https://www.krds.go.kr/html/site/style/style_02.html

「전자정부 웹사이트 품질관리 지침」 접근성 영역

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

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