어두운 바탕에선 명암이 반대로

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

0. 들어가며 — 어두운 모드의 ‘반대’ 명암

이번 109편은 윤곽선(outline) 색의 처리 — 선명한 화면 모드에서는 일반 모드와 반대 방식의 상태 규칙을 사용하는 규칙입니다.

19편에서 봤듯, 선명한 화면 모드는 배경이 어둡습니다. 밝은 모드에서 ’진한 윤곽선 = 강조’였다면, 어두운 바탕에서는 ’밝은 윤곽선 = 강조’가 되죠. 명암이 반대로 작동하는 것입니다. DS-109는 이 명암 반전을 규정 합니다. 이번 편은 윤곽선 색 반전을 풀어냅니다.

1. 규칙 원문 — 반대 방식

DS-109 (디자인 스타일 > 선명한 화면 모드) “텍스트, 아이콘, 컴포넌트의 윤곽선에 색이 사용되었다면, 선명한 화면 모드에서는 일반 모드와 반대의 방식으로 정의된 상태 규칙을 사용하고 있다.”

윤곽선 색을 선명한 화면 모드에서 일반 모드와 반대(명암 반전) 방식으로 적용하라는 뜻입니다.

정리: 윤곽선 색은 선명한 화면 모드에서 일반 모드와 반대(명암 반전) 방식으로 적용하라. 이게 DS-109입니다.

2. 왜 반대 방식인가 — 빛 환경의 반전

19편(깊이를 밝기로)에서 본 원리와 같습니다 — 밝은 모드와 어두운 모드는 명암이 반대로 작동합니다.

밝은 배경에서는 진한(어두운) 윤곽선이 도드라집니다. 흰 바탕에 검은 선이 또렷하죠. 하지만 어두운 배경에서는 정반대입니다 — 진한 윤곽선은 어두운 배경에 묻혀 안 보이고, 밝은(흰) 윤곽선이 도드라집니다. 검은 바탕에 흰 선이 또렷한 것이죠. 그래서 윤곽선 색을 선명한 화면 모드에서는 명암을 반전시켜야 합니다.

이는 단순히 색을 뒤집는 게 아니라, ’대비를 만드는 방향’을 반전시키는 것입니다. 일반 모드는 밝은 배경에 어두운 윤곽선으로 대비를, 선명한 화면 모드는 어두운 배경에 밝은 윤곽선으로 대비를 만들죠. 두 모드 모두 ’배경과 윤곽선의 대비’라는 목적은 같되, 그 대비를 만드는 명암 방향이 반대입니다.

그래서 DS-109는 ’반대의 방식으로 정의된 상태 규칙’을 요구합니다. 윤곽선 색의 상태 규칙(어느 상태에 어느 윤곽선 색)을 모드별로 명암 반전해 정의하는 것이죠. 이는 19편(깊이 밝기 반전)·102편(표면 밝기)과 같은 ’어두운 모드는 밝기 방향이 반대’라는 원리가 윤곽선에 적용된 것입니다. 빛 환경이 반대면 명암도 반대로 설계해야 합니다.

3. 점검 / 개선

무엇을 점검하나

명암 반전 — 윤곽선 색이 선명한 화면 모드에서 명암 반전됐는가.

대비 유지 — 어두운 배경에서 윤곽선이 또렷한가.

모드별 규칙 — 윤곽선 상태 규칙이 모드별로 정의됐는가.

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

역할	책임
디자인 시스템 담당	모드별 윤곽선 색 규칙(명암 반전) 정의
퍼블리셔/개발	모드별 윤곽선 색 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 윤곽선 색이 선명한 화면 모드에서 명암 반전됐나요?

□ 어두운 배경에서 윤곽선이 또렷한가요(밝은 윤곽선)?

□ 진한 윤곽선이 어두운 배경에 묻히지 않나요?

❓ FAQ

Q1. 반대 방식이 무슨 뜻인가요? 밝은 모드는 어두운 윤곽선으로 대비를, 어두운 모드는 밝은 윤곽선으로 대비를 만듭니다. 명암 방향이 반대인 것이죠. Q2. 19편과 같은가요? 원리가 같습니다(어두운 모드는 밝기 방향 반대). 19편은 깊이, 109편은 윤곽선 색입니다. Q3. 그냥 색을 반전하면 되나요? 단순 반전이 아니라 ’대비를 만드는 명암 방향’을 모드에 맞게 정의해야 합니다. KRDS는 모드별 윤곽선 규칙을 제공합니다. Q4. KRDS를 채택하면 자동인가요? KRDS는 모드별 윤곽선 색 규칙을 정의합니다.

6. 마무리

DS-109의 메시지:

어두운 바탕에선 명암이 반대로 — 윤곽선 색도 모드에 맞게 반전한다.

밝은 모드는 어두운 윤곽선으로, 어두운 모드는 밝은 윤곽선으로 대비를 만듭니다. 빛 환경이 반대면 명암 방향도 반대로 설계해야 윤곽선이 또렷하죠. 19편(깊이 밝기 반전)과 같은 원리가 윤곽선에 적용된 것입니다.

다음 편은 헤더 유틸리티 링크를 다룹니다. DS-110 — “선명한 화면 모드에서 헤더의 유틸리티 링크에 윤곽선 또는 배경색을 표시한다.”

다음 편 예고 ▶ 「110. 선명한 화면 모드에서 헤더의 유틸리티 링크에 윤곽선 또는 배경색을 표시하고 있다.」

ViewCheck는 선명한 화면 모드에서 윤곽선 색이 명암 반전 규칙을 따르는지를 진단합니다.

📚 참고 출처

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

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

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