어두운 화면에선 그림자가 안 보인다

KRDS DS-019 — 선명한 화면 모드에서 배경, 표면 색상을 레이어가 쌓일수록 점차 밝아지게 표현하고 있다.

0. 들어가며 — 기본 모드와 정반대로

지난 18편에서 ’깊이(고도)’를 다뤘습니다. 표면 색을 번갈아 쌓고, 그림자·테두리로 고도를 표현했죠. 그런데 그건 밝은 바탕의 ‘기본 모드’ 이야기였습니다. 화면 배경이 어두운 ‘선명한 화면 모드’(고대비 모드) 에서는 깊이를 전혀 다른 방식으로 표현해야 합니다.

이유는 단순합니다. 어두운 바탕에서는 그림자가 안 보입니다. 그림자는 어두운 색인데, 이미 어두운 배경 위에 어두운 그림자를 드리워봐야 구분이 안 되니까요. 밝은 화면에서 그토록 유용했던 그림자가, 어두운 화면에서는 무력해집니다. 그래서 선명한 화면 모드는 다른 단서가 필요합니다 — 바로 밝기입니다.

DS-019는 이를 한 문장으로 규정합니다 — 선명한 화면 모드에서는 레이어가 쌓일수록 점차 밝아지게 하라. 떠 있는 것일수록 더 밝게 만들어, 밝기 차이로 깊이를 표현하는 것이죠. 이번 편은 왜 어두운 모드에서 깊이가 ’밝기’로 표현되는지, 그 원리를 짧지만 깊게 풀어냅니다.

1. 규칙 원문 — 한 가지 원칙

DS-019 (디자인 스타일 > 색상) “선명한 화면 모드에서 배경, 표면 색상을 레이어가 쌓일수록 점차 밝아지게 표현하고 있다.”

핵심은 ‘쌓일수록 밝아지게’ 입니다.

“레이어가 쌓일수록”

18편에서 본 표면(surface)의 층 쌓임입니다. 배경 위에 카드, 카드 위에 모달… 이렇게 고도가 높아지는 것이죠.

“점차 밝아지게”

그 층이 높아질수록 표면 색을 점점 밝게 한다는 뜻입니다. 가장 아래(배경)가 가장 어둡고, 위로 올라갈수록 밝아집니다. 밝을수록 ’앞으로 떠올라 있다’는 느낌을 주는 것이죠.

정리: 어두운 모드(선명한 화면 모드)에서는 떠 있는 면일수록 더 밝게 해서 깊이를 표현하라. 이게 DS-019입니다.

2. 왜 정반대인가 — 빛과 그림자의 원리

기본 모드와 선명한 화면 모드의 깊이 표현이 정반대인 이유를 빛의 원리로 이해해 봅시다.

밝은 모드 — 그림자로 떠올린다

밝은 배경에서는 떠 있는 물체가 아래에 그림자를 드리웁니다. 우리는 그 그림자를 보고 “아, 이게 떠 있구나”를 압니다. 흰 종이 위에 놓인 물건처럼요. 그래서 밝은 모드의 깊이는 그림자로 표현됩니다(18편).

어두운 모드 — 빛을 받아 밝아진다

그런데 어두운 공간을 떠올려 보세요. 캄캄한 방에서는 그림자가 안 보입니다. 대신 빛에 가까운 것일수록 밝게 보이죠. 무대 위에서 앞으로 나온 배우가 조명을 더 받아 밝아지듯, 어두운 화면에서는 앞으로 떠오른 면일수록 더 밝습니다. 그래서 어두운 모드의 깊이는 밝기로 표현됩니다.

이건 실제 빛의 물리를 모방한 것입니다. 광원이 위에 있다고 가정하면, 높이 떠오른 면일수록 광원에 가까워 더 밝은 빛을 받습니다. 가라앉은 면은 빛에서 멀어 어둡습니다. 그래서 ’쌓일수록 밝아짐’은 자연스러운 빛의 논리를 따른 것이죠. 사용자는 이 밝기 차이를 보고, 그림자 없이도 “이게 더 위에 있구나”를 직관적으로 인지합니다.

무대 조명에 비유하면 더 분명합니다. 어두운 극장에서 무대 안쪽 깊숙한 곳은 조명이 약해 어둡고, 무대 앞으로 나온 배우는 스포트라이트를 받아 환합니다. 관객은 누가 더 밝은지를 보고 누가 ‘앞에’ 있는지를 압니다. 어두운 화면도 똑같습니다. 가장 안쪽(배경)은 어둡고, 앞으로 떠오른 모달은 환합니다. 밝기가 곧 ’앞으로 나옴’을 의미하는 것이죠. 반대로 밝은 모드는 한낮의 야외와 같아서, 모든 게 환한 가운데 떠 있는 것이 그림자를 드리워 구분됩니다. 같은 ’깊이’인데 한낮(밝은 모드)이냐 극장(어두운 모드)이냐에 따라 단서가 달라지는 것입니다.

이 차이를 이해하면 왜 두 모드가 정반대 방향으로 흐르는지가 분명해집니다. 밝은 모드에서는 배경이 가장 밝고(흰색), 떠오른 것이 그림자로 구분됩니다. 어두운 모드에서는 배경이 가장 어둡고, 떠오른 것이 밝아져 구분됩니다. 배경의 밝기도, 깊이의 단서도 정반대죠. 그래서 한 모드를 그대로 뒤집어서 다른 모드를 만들면 안 되고, 각 모드를 그 빛의 환경에 맞게 따로 설계해야 합니다. 빛의 논리가 다르면 깊이의 문법도 달라야 한다는 것 — 이것이 DS-019가 담은 본질입니다.

KRDS의 선명한 화면 모드 배경은 가장 어두운 단계에서 시작해, 레이어가 올라갈수록 점차 밝은 단계로 흐릅니다. 정확한 단계 값은 KRDS 토큰에 정의돼 있으며, 기본 모드(밝은 바탕)와 정반대 방향으로 설계됩니다.

3. 어두운 모드의 깊이 = 밝기 — 업계 공통 원리

’어두운 모드에서 고도를 밝기로 표현한다’는 것은 KRDS만의 방식이 아니라 현대 디자인의 공통 원리입니다.

구글의 Material Design 다크 테마도 같은 원칙을 씁니다 — 어두운 테마에서는 고도가 높은 면일수록 표면을 밝게 만듭니다. 그림자 대신 ’표면 밝기(surface tint)’로 고도를 표현하죠. 이는 다크 모드를 제대로 만드는 디자인 시스템들이 공통으로 채택한 방식입니다. 어두운 배경에서 그림자가 무력하다는 물리적 한계는 어디서나 같으니까요.

그래서 다크 모드(또는 선명한 화면 모드)를 만들 때 흔히 저지르는 실수가, 밝은 모드의 그림자를 그대로 가져오는 것입니다. 밝은 모드 디자인을 단순히 색만 반전시켜 어둡게 만들면, 그림자가 안 보여서 모든 면이 평평해집니다. 카드가 배경에 묻히고 모달이 떠 보이지 않죠. 다크 모드는 색 반전이 아니라 깊이 표현 방식 자체를 바꾸는 별도 설계가 필요합니다. DS-019가 이를 명시적으로 못 박는 이유입니다.

흥미롭게도 이 ‘밝기로 고도를 표현하는’ 방식에는 미묘한 디테일이 더 있습니다. 단순히 면을 통째로 밝게 하는 것을 넘어, 광원의 방향을 고려하기도 합니다. 빛이 위에서 온다고 가정하면, 떠오른 면의 위쪽 가장자리가 아래쪽보다 살짝 더 밝을 수 있습니다. 이런 섬세한 처리는 깊이를 더 자연스럽게 만들지만, 과하면 오히려 어색해지므로 절제가 필요합니다. 다행히 이런 디테일은 디자인 시스템이 토큰과 컴포넌트로 미리 풀어두므로, 담당자가 일일이 신경 쓰지 않아도 됩니다. 원리만 이해하면 충분합니다.

검증도 어렵지 않습니다. 선명한 화면 모드로 전환한 뒤, 화면을 보며 “카드가 배경 위에 떠 보이는가, 모달이 카드보다 더 앞에 있어 보이는가”를 확인하면 됩니다. 만약 모든 면이 같은 어둠 속에 묻혀 평평하게 보인다면 DS-019가 지켜지지 않은 것입니다. 특히 저시력 사용자나 고령 사용자의 관점에서, 면의 층위가 또렷이 구분되는지를 살펴야 합니다. 이들에게 깊이의 명료함은 화면을 이해하는 중요한 단서이기 때문입니다. 밝기로 표현한 깊이가 제대로 작동하면, 어두운 화면에서도 사용자는 길을 잃지 않습니다.

4. 선명한 화면 모드 ≠ 단순 다크 모드

여기서 5편(DS-005)의 내용을 다시 떠올려야 합니다. KRDS의 ’선명한 화면 모드’는 단순한 미적 다크 모드가 아니라 저시력·고령 사용자를 위한 고대비 접근성 모드입니다. 그래서 DS-019의 밝기 표현에도 접근성 관점이 깔려 있습니다.

선명한 화면 모드는 대비를 극대화하는 것이 목적입니다. 면들이 밝기로 구분되면, 저시력 사용자도 면의 층위를 더 또렷이 인지할 수 있습니다. 그림자처럼 미묘한 단서는 저시력 사용자가 놓치기 쉽지만, 밝기 차이는 훨씬 분명한 단서입니다. 즉 ’쌓일수록 밝아짐’은 단지 어두운 배경의 기술적 대응일 뿐 아니라, 고대비 모드의 접근성 강화라는 목적에도 부합합니다.

이 점에서 DS-019는 DS-005(선명한 화면 모드 제공)·DS-018(기본 모드 고도)의 연장선입니다. 두 모드 각각에서 깊이를 그 모드에 맞는 방식으로 표현하라는 것 — 밝은 모드는 그림자로, 어두운 모드는 밝기로. 모드가 달라도 ’깊이로 위계를 전달한다’는 목적은 같고, 표현 방식만 모드에 맞게 달라집니다.

이 대목에서 한 가지 중요한 교훈이 드러납니다. 접근성 모드를 제공한다는 것은 단지 ’색을 반전시킨 어두운 버전을 하나 더 만드는 일’이 아니라는 점입니다. 선명한 화면 모드를 제대로 만들려면, 색만이 아니라 깊이 표현, 테두리 두께, 글자 대비 등 화면을 구성하는 여러 요소를 그 모드의 목적(대비 극대화)에 맞게 다시 설계해야 합니다. DS-019(깊이), DS-021(글자 대비 70/90), DS-023(인풋 보더 두껍게) 같은 규칙들이 모두 선명한 화면 모드를 위한 별도 규정인 것은 이 때문입니다. 접근성 모드는 ’하나 더 만드는 옵션’이 아니라 ’처음부터 함께 설계하는 또 하나의 완결된 화면’입니다.

그래서 선명한 화면 모드를 나중에 급하게 끼워 넣으려 하면 어렵고 어설퍼집니다. 밝은 모드를 다 만든 뒤 색만 어둡게 뒤집으면 깊이가 사라지고(DS-019 위반), 글자 대비도 어긋나고(DS-021), 경계도 흐려집니다. 반대로 처음부터 ’두 모드를 함께 설계한다’는 전제로 토큰 체계를 세우면, 각 모드가 자연스럽게 자기 논리를 갖습니다. KRDS가 두 모드의 표면·글자·테두리를 각각 토큰으로 정의해 둔 것은, 바로 이 ’함께 설계’를 쉽게 하기 위해서입니다. 채택하면 두 모드의 깊이 표현이 이미 올바른 방향으로 설계돼 있어, 이 까다로운 작업을 직접 할 필요가 없습니다.

5. 흔한 위반 패턴

DS-019 위반은 이렇게 나타납니다.

함정 ① 다크 모드에 그림자 그대로. 밝은 모드 그림자를 어두운 배경에 그대로 적용 → 그림자 안 보임, 면 평평. → 밝기 차이로 고도 표현.

함정 ② 밝기 차이 없음. 어두운 모드에서 모든 면이 같은 어두운 색 → 층 구분 안 됨. → 쌓일수록 밝게.

함정 ③ 색만 반전한 다크 모드. 밝은 모드를 단순 반전만 → 깊이 표현이 깨짐. → 모드별 깊이 별도 설계.

함정 ④ 방향 반대. 떠 있는 면을 더 어둡게 만듦(밝은 모드 발상) → 직관과 반대로 어색. → 위로 갈수록 밝게.

핵심: 어두운 모드의 깊이는 ‘밝기’ 가 만듭니다. 그림자 발상을 그대로 가져오면 반드시 어긋납니다.

6. 무엇을 점검하나

DS-019는 선명한 화면 모드에서 깊이가 밝기로 표현됐는지를 봅니다.

밝기 방향 — 레이어가 쌓일수록 표면이 밝아지는가.

층 구분 — 어두운 모드에서 면들이 밝기로 구분되는가.

그림자 의존 여부 — 어두운 배경에 무력한 그림자에만 의존하지 않는가.

모드별 설계 — 기본 모드와 선명한 화면 모드의 깊이가 각각 적절히 설계됐는가.

7. 누가 담당하나

역할	책임
디자이너	선명한 화면 모드의 표면 밝기 단계 설계
퍼블리셔/개발	모드별 표면 색 토큰 구현, 다크 모드에서 밝기 고도 적용
접근성 담당	선명한 화면 모드에서 층 구분이 또렷한지 검증

DS-019는 특히 모드 전환 구현과 연결됩니다. 선명한 화면 모드로 전환될 때 표면 색이 밝기 방향으로 올바로 바뀌는지 확인해야 합니다.

8. 우리 사이트에 해당될까?

적용 대상

기관 유형	DS-019 적용
중앙행정기관(대표)	✅ 필수
중앙행정기관(운영)	✅ 필수
공공기관	✅ 필수
지방자치단체	✅ 필수

선명한 화면 모드를 제공하고(DS-005), 면 레이어가 있는 사이트에 적용됩니다.

예외(N/A)

선명한 화면 모드를 제공하지 않는다면 이 규칙은 적용 시점이 오지 않습니다. 다만 DS-005에서 봤듯 선명한 화면 모드 제공은 권장되므로, 제공한다면 DS-019도 함께 충족해야 합니다.

9. 단계별 개선 방법

Before / After

/* ❌ Before: 다크 모드에 밝은 모드 그림자 그대로(안 보임) */ [data-mode="high-contrast"] .card { background: #1a1a1a; box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 어두운 배경에 무력 */ } /* ✅ After: 쌓일수록 밝아지게(밝기로 고도) */ [data-mode="high-contrast"] { --surface-0: #0a0a0a; /* 배경(가장 어두움) */ --surface-1: #1c1c1c; /* 카드(조금 밝음) */ --surface-2: #2a2a2a; /* 모달(더 밝음) */ } /* 정확한 값은 KRDS 선명한 화면 모드 토큰 기준 */

정비 순서

모드별 표면 색 분리 — 선명한 화면 모드용 표면 색을 별도 정의.

밝기 방향 설정 — 배경<카드<모달 순으로 점차 밝게.

그림자 의존 제거 — 다크 모드의 무력한 그림자를 밝기 단서로 대체.

층 구분 검증 — 어두운 모드에서 면들이 또렷이 구분되는지 확인.

10. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명한 화면 모드에서 떠 있는 면이 더 밝은가요?

□ 어두운 배경에서 카드·모달이 밝기로 구분되나요?

□ 다크 모드에 밝은 모드 그림자를 그대로 쓰지 않았나요?

□ 모드 전환 시 깊이 표현이 깨지지 않나요?

□ 저시력 사용자가 층위를 또렷이 구분할 수 있나요?

❓ FAQ

Q1. 왜 밝은 모드는 그림자, 어두운 모드는 밝기인가요? 빛의 원리 때문입니다. 밝은 배경에선 떠 있는 것이 그림자를 드리우지만, 어두운 배경에선 그림자가 안 보입니다. 대신 떠 있는 면이 빛을 더 받아 밝아 보이죠. 그래서 어두운 모드는 밝기로 고도를 표현합니다.

Q2. 다크 모드를 그냥 색만 반전시키면 안 되나요? 안 됩니다. 단순 반전하면 그림자가 안 보여 깊이가 사라집니다. 다크 모드(선명한 화면 모드)는 깊이 표현 방식 자체를 바꾸는 별도 설계가 필요합니다. 색 반전이 아니라 모드별 설계입니다.

Q3. 선명한 화면 모드와 다크 모드는 같은 건가요? KRDS의 선명한 화면 모드는 미적 다크 모드가 아니라 저시력용 고대비 접근성 모드입니다(5편). 다만 둘 다 어두운 배경을 쓰므로, ’어두운 배경의 깊이 표현’이라는 기술적 원리는 공유합니다.

Q4. 밝기를 얼마나 차이 나게 하나요? KRDS 선명한 화면 모드 토큰의 표면 단계를 쓰면 검증된 값을 적용할 수 있습니다. 자체 설계라면 층이 분명히 구분되되 너무 밝아지지 않게, 단계별로 일정한 밝기 차이를 두세요.

Q5. 그림자를 아예 쓰면 안 되나요? 어두운 모드에서 그림자는 효과가 약하므로 깊이의 주 단서로 쓰면 안 됩니다. 밝기를 주 단서로 하되, 보조적으로 미묘한 테두리 등을 더할 수는 있습니다. 핵심은 밝기로 고도를 표현하는 것입니다.

11. 마무리 — 같은 깊이, 다른 빛

DS-019의 메시지는 짧지만 본질적입니다.

깊이를 전달하는 목적은 모드가 달라도 같지만, 그 방법은 빛의 환경에 맞게 달라야 한다.

밝은 모드든 어두운 모드든, 깊이로 위계를 전달한다는 목적은 같습니다. 다만 밝은 곳에선 그림자가, 어두운 곳에선 밝기가 그 일을 합니다. 빛의 환경이 다르면 깊이의 언어도 달라지는 것이죠. 이걸 모르고 한 모드의 방식을 다른 모드에 그대로 가져오면, 깊이는 사라지고 화면은 평평해집니다. 모드마다 그 모드에 맞는 빛의 논리를 따라야 합니다.

이로써 색의 ‘깊이’(DS-018·019)를 모두 다뤘습니다. 다음 편부터는 다시 명도 대비로 돌아가, 그 기준을 글자 색에 구체적으로 적용하는 규칙들을 봅니다. DS-020 — “기본 모드에서 글자 색상을 매직넘버 40(대비 3:1), 본문 글자를 매직넘버 50(대비 4.5:1)으로 적용한다.” 2편에서 본 매직 넘버가 글자 색의 정확한 기준으로 다시 등장합니다.

다음 편 예고 ▶ 「020. 기본 모드에서 글자 색상을 매직넘버 40(명도 대비 3:1)으로 적용하고, 본문 글자 색상을 매직넘버 50(명도대비 4.5:1)으로 적용하고 있다.」

우리 사이트의 선명한 화면 모드 깊이가 올바른지 확인하려면? ViewCheck는 선명한 화면 모드에서 표면이 쌓일수록 밝아지는지, 면들이 밝기로 구분되는지, 무력한 그림자에 의존하지 않는지를 진단합니다.

📚 참고 출처

KRDS 색상(Color) 스타일 가이드 (선명한 화면 모드 surface) — https://www.krds.go.kr/html/site/style/style_02.html

Material Design — Dark theme (elevation) — https://m2.material.io/design/color/dark-theme.html

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

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