고대비 모드에서도 배경 규칙은 일관되게

KRDS DS-108 — 선명한 화면 모드에서도 텍스트, 아이콘 아래 영역의 배경색은 일관된 색상 상태 규칙을 사용하고 있다.

0. 들어가며 — 모드가 바뀌어도 일관된 배경 규칙

지난 107편(일괄 전환)에 이어, 이번 108편은 선명한 화면 모드에서 텍스트·아이콘 아래 배경색이 일관된 상태 규칙을 따라야 한다는 규칙입니다.

모드가 바뀌면 색은 변하지만, 그 색을 쓰는 ’규칙(상태 체계)’은 일관되게 유지되어야 합니다. 예를 들어 ’오류는 빨강 계열’이라는 상태 규칙(13편)은 기본 모드든 선명한 화면 모드든 동일하게 적용되어야, 사용자가 일관되게 상태를 인식하죠. DS-108은 이 배경색 상태 규칙의 일관성을 규정합니다. 이번 편은 모드 전환에서의 상태 규칙 유지를 풀어냅니다.

1. 규칙 원문 — 일관된 상태 규칙

DS-108 (디자인 스타일 > 선명한 화면 모드) “선명한 화면 모드에서도 텍스트, 아이콘 아래 영역의 배경색은 일관된 색상 상태 규칙을 사용하고 있다.”

선명한 화면 모드에서도 배경색이 기본 모드와 같은 상태 규칙(성공·경고·오류 등의 색 체계)을 따라야 한다는 뜻입니다.

정리: 선명한 화면 모드에서도 배경색은 일관된 상태 규칙(성공/오류 등 색 체계)을 유지하라. 이게 DS-108입니다.

2. 왜 상태 규칙을 일관되게 유지하나

선명한 화면 모드에서 색은 바뀝니다(대비 강화). 하지만 색이 ’의미하는 규칙’은 바뀌면 안 됩니다.

예를 들어 기본 모드에서 ’성공=초록 배경, 오류=빨강 배경’이라는 상태 규칙(13편)이 있는데, 선명한 화면 모드에서 이 규칙이 뒤바뀌거나 사라지면 사용자가 혼란스러워집니다. 모드를 바꿨더니 갑자기 성공·오류의 색 의미가 달라지면, 사용자는 상태를 잘못 인식하죠. 그래서 색의 구체적 값(명도·대비)은 모드에 따라 달라지되, ’어느 상태에 어느 색 계열’이라는 규칙은 일관되게 유지되어야 합니다.

이는 모드 전환의 핵심 원리입니다 — **‘표현’은 모드에 맞게 바뀌되, ’의미·규칙’은 일관되게.** 선명한 화면 모드는 같은 정보를 더 또렷하게 보여줄 뿐, 정보의 의미 체계를 바꾸는 게 아니죠(DS-120의 ’동일한 정보·기능’ 원리). 성공은 어느 모드에서든 성공의 색 계열로, 오류는 오류의 색 계열로 — 상태 규칙이 일관되어야 사용자가 모드와 무관하게 같은 방식으로 화면을 이해합니다.

특히 텍스트·아이콘 아래 배경색은 상태(인포박스·알럿 등)를 나타내는 경우가 많아(13편), 이 배경색 규칙의 일관성이 중요합니다. 모드가 달라도 ’이 배경색 = 이 상태’가 일관되어야, 색약 대응(13편)과 모드 전환이 함께 작동하죠.

3. 점검 / 개선

무엇을 점검하나

상태 규칙 일관성 — 모드 전환 후에도 성공/경고/오류 색 규칙이 유지되는가.

의미 보존 — 색이 바뀌어도 상태 의미가 같은가.

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

역할	책임
디자인 시스템 담당	모드별 상태 색을 일관된 규칙으로 정의
퍼블리셔/개발	상태 배경색 토큰 구현

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

선명한 화면 모드를 제공하고 상태 표시가 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모드 전환 후에도 성공/오류 색 규칙이 일관된가요?

□ 색은 바뀌어도 상태 의미가 같은가요?

□ 상태 배경색이 모드별로 정의돼 있나요?

❓ FAQ

Q1. 색이 바뀌는데 규칙이 일관되다는 게 무슨 뜻인가요? 색의 구체적 값(명도·대비)은 모드에 맞게 바뀌되, ’성공=초록 계열, 오류=빨강 계열’이라는 규칙은 유지된다는 뜻입니다. 표현은 바뀌어도 의미는 같습니다. Q2. 13편(상태 색)과 관련 있나요? 네. 13편의 상태 색 체계가 선명한 화면 모드에서도 일관되게 유지되어야 한다는 것입니다. Q3. KRDS를 채택하면 자동인가요? KRDS는 모드별 상태 색을 일관된 규칙으로 정의합니다.

6. 마무리

DS-108의 메시지:

고대비 모드에서도 배경 상태 규칙은 일관되게 — 표현은 바뀌어도 의미는 같다.

선명한 화면 모드에서 색의 값은 바뀌지만, ’어느 상태에 어느 색’이라는 규칙은 유지되어야 합니다. 모드 전환은 정보를 더 또렷하게 할 뿐 의미 체계를 바꾸지 않죠. 상태 규칙의 일관성이 모드 전환의 핵심입니다.

다음 편은 윤곽선 색 규칙을 다룹니다. DS-109 — “윤곽선에 색이 사용됐다면, 선명한 화면 모드에서는 일반 모드와 반대 방식의 상태 규칙을 사용한다.”

다음 편 예고 ▶ 「109. 텍스트, 아이콘, 컴포넌트의 윤곽선에 색이 사용되었다면, 선명한 화면 모드에서는 일반 모드와 반대의 방식으로 정의된 상태 규칙을 사용하고 있다.」

ViewCheck는 선명한 화면 모드에서 배경색 상태 규칙이 일관되게 유지되는지를 진단합니다.

📚 참고 출처

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

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

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