어두운 모드에선 밝기 3단계로 깊이를

KRDS DS-102 — 선명한 화면 모드에서 3단계의 표면 밝기 차이를 사용해 각 엘리베이션을 구분하고 있다.

0. 들어가며 — 선명한 화면 모드의 깊이

이번 102편은 선명한 화면 모드(고대비) 에서 깊이를 표현하는 규칙 — 3단계 표면 밝기 차이 입니다.

19편에서 봤듯, 어두운 바탕의 선명한 화면 모드에서는 그림자가 안 보여, 깊이를 밝기로 표현합니다(쌓일수록 밝게). DS-102는 이를 구체화해, 선명한 화면 모드에서 3단계 표면 밝기 차이로 엘리베이션을 구분하라고 규정합니다. 이번 편은 고대비 모드의 깊이 표현을 풀어냅니다.

1. 규칙 원문 — 3단계 밝기

DS-102 (디자인 스타일 > 엘리베이션) “선명한 화면 모드에서 3단계의 표면 밝기 차이를 사용해 각 엘리베이션을 구분하고 있다.”

선명한 화면 모드에서 표면 밝기를 3단계로 달리해 깊이를 구분하라는 뜻입니다.

정리: 선명한 화면 모드에서는 3단계 표면 밝기 차이로 엘리베이션을 구분하라. 이게 DS-102입니다.

2. 왜 밝기 3단계인가

19편에서 본 원리입니다 — 어두운 배경에서는 그림자가 무력하므로(어두운 위에 어두운 그림자는 안 보임), 깊이를 밝기로 표현합니다. 떠오른 면일수록 밝게요. DS-102는 그 밝기 차이를 3단계로 정합니다.

기본 모드는 그림자 4단계(100편)인데 선명한 화면 모드는 밝기 3단계인 이유는, 두 모드의 깊이 표현 방식이 다르기 때문입니다. 밝은 모드는 그림자로 세밀하게, 어두운 모드는 밝기로 더 단순하게 구분하죠. 어두운 배경 에서는 밝기 차이가 그림자보다 분명한 단서라, 3단계만으로도 충분히 깊이가 구분됩니다. 그리고 선명한 화면 모드의 목적이 ‘대비 극대화·명료함’(5편)이므로, 복잡한 다단계보다 분명한 3단계가 적합하죠.

이로써 두 모드의 깊이 표현이 완성됩니다 — 밝은 모드는 그림자 4단계(100편) + 표면 색(101편), 어두운 모드는 밝기 3단계(102편). 각 모드가 그 빛 환경에 맞는 방식으로 깊이를 표현하는 것이죠(19편의 ‘빛의 논리’). 모드가 달라도 ’깊이로 위계를 전달한다’는 목적은 같고, 방식만 다릅니다.

3. 점검 / 개선

무엇을 점검하나

밝기 3단계 — 선명한 화면 모드에서 표면 밝기가 3단계로 구분되는가.

방향 — 떠오를수록 밝아지는가(19편).

모드별 설계 — 밝은 모드(그림자)와 다르게 설계됐는가.

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

역할	책임
디자인 시스템 담당	선명모드 표면 밝기 3단계 설계
퍼블리셔/개발	모드별 표면 밝기 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명모드에서 표면 밝기가 3단계로 구분되나요?

□ 떠오른 면일수록 밝은가요?

□ 밝은 모드(그림자)와 다르게 설계됐나요?

❓ FAQ

Q1. 19편과 같은가요? 19편은 ‘깊이를 밝기로(쌓일수록 밝게)’, 102편은 그 밝기를 3단계로 구체화한 것입니다. Q2. 왜 기본 모드(4단계)보다 적나요? 어두운 배경에서는 밝기 차이가 분명한 단서라 3단계로 충분하고, 선명모드는 명료함이 목적이라 단순한 단계가 적합합니다. Q3. KRDS를 채택하면 자동인가요? KRDS는 선명모드 표면 밝기 단계를 정의합니다.

6. 마무리

DS-102의 메시지:

선명한 화면 모드에서는 밝기 3단계로 깊이를 — 어두운 빛 환경에 맞는 방식.

어두운 모드에서는 그림자 대신 밝기로 깊이를 표현하되, 3단계로 구분합니다. 밝은 모드(그림자 4단계)와 다른, 그 빛 환경에 맞는 방식이죠. 모드가 달라도 깊이 전달 목적은 같습니다.

다음 편은 딤드 효과를 다룹니다. DS-103 — “주의가 필요한 요소에만 제한적으로 딤드 효과를 사용한다.”

다음 편 예고 ▶ 「103. 주의가 필요한 요소에만 제한적으로 딤드 효과를 사용하고 있다.」

ViewCheck는 선명한 화면 모드에서 표면 밝기 3단계로 엘리베이션을 구분하는지를 진단합니다.

📚 참고 출처

KRDS 엘리베이션(Elevation)·디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_06.html

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

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