겹친 면은 색을 달리해 깊이를 만든다

KRDS DS-101 — 여러 표면이 겹쳐질 때 단계별 색상 차이를 두어 요소 간 엘리베이션감을 표현하고 있다.

0. 들어가며 — 색으로도 깊이를 만든다

지난 100편(그림자)에 이어, 이번 101편은 표면 색상 차이로 깊이를 표현하는 규칙입니다.

18편에서 봤듯 깊이는 그림자(100편)만이 아니라 표면 색의 교차로도 표현됩니다. 여러 표면이 겹칠 때 (배경 위 카드, 카드 위 면) 색을 단계별로 달리하면, 각 면이 구분되어 깊이감이 생기죠. DS-101은 이 표면 색상 차이로 엘리베이션감을 표현하라고 규정합니다. 이번 편은 표면 색의 깊이를 풀어냅니다.

1. 규칙 원문 — 색상 차이

DS-101 (디자인 스타일 > 엘리베이션) “여러 표면이 겹쳐질 때 단계별 색상 차이를 두어 요소 간 엘리베이션감을 표현하고 있다.”

겹친 표면들의 색을 단계별로 다르게 해서, 면 사이의 깊이감을 표현하라는 뜻입니다.

정리: 겹친 표면은 단계별 색상 차이로 깊이감을 표현하라. 이게 DS-101입니다.

2. 왜 색상 차이로 깊이를 표현하나

표면들이 모두 같은 색이면 경계가 안 보입니다(18편). 흰 배경 위 흰 카드는 어디까지가 배경이고 어디부터 카드인지 구분이 안 되죠. 그래서 겹친 면의 색을 단계별로 달리하면 — 배경은 연회색, 카드는 흰색, 카드 안 면은 다시 연회색 — 각 면이 색 차이로 구분되어 깊이감이 생깁니다.

이는 그림자(100편)와 함께 작동하는 또 하나의 깊이 단서입니다. 그림자가 ’떠 있음’을, 표면 색 차이가 ’면 구분’을 표현하죠. 둘을 함께 쓰면 깊이가 더 분명해집니다. 특히 그림자만으로 부족하거나 어색한 경우(인접 면 등), 색상 차이가 깊이를 보완합니다.

핵심은 이 색상 차이가 명도 단계(4편)와 엘리베이션 단계(99편)에 연동된다는 것입니다. 고도가 높은 면일수록 정해진 명도 단계의 색을 써서, 색상 차이가 곧 엘리베이션 단계를 표현하죠. 18편에서 본 ’흰색·연회색 surface 번갈아 쌓기’가 이 원리입니다. 그림자(100편)·표면 색(101편)·경계선(106편)이 함께 깊이를 표현하는 도구들이며, DS-101은 그중 색상 차이를 규정합니다.

3. 점검 / 개선

무엇을 점검하나

색상 차이 — 겹친 표면들이 단계별 색 차이를 갖는가.

면 구분 — 각 면의 경계가 색으로 구분되는가.

단계 연동 — 색상 차이가 엘리베이션 단계에 맞는가.

Before / After

/* ✅ 겹친 표면 색상 차이 */ .bg { background: var(--gray-5); } /* 배경 */ .card { background: var(--gray-0); } /* 카드(흰색) */ .card-inner { background: var(--gray-5); } /* 카드 안 면 */

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

역할	책임
디자이너	표면 색상 차이로 깊이 설계
퍼블리셔/개발	단계별 표면 색 구현

기관 유형	DS-101 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

면 레이어가 있는 모든 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 겹친 표면들이 색 차이로 구분되나요?

□ 흰 배경 위 흰 카드의 경계가 보이나요?

□ 색상 차이가 엘리베이션 단계에 맞나요?

❓ FAQ

Q1. 그림자(100편)와 다른가요? 그림자는 ‘떠 있음’, 표면 색 차이는 ’면 구분’을 표현합니다. 둘 다 깊이 단서로, 함께 쓰면 더 분명합니다. Q2. 18편과 같은가요? 18편의 ’흰색·색상 surface 번갈아 쌓기’가 이 원리입니다. 101편은 엘리베이션 관점 에서 재확인합니다. Q3. KRDS를 채택하면 자동인가요? KRDS는 엘리베이션별 표면 색을 토큰으로 정의합니다.

6. 마무리

DS-101의 메시지:

겹친 면은 색을 단계별로 달리해 깊이를 만든다 — 그림자와 함께 작동하는 깊이 단서.

표면 색을 단계별로 달리하면 면들이 구분되어 깊이감이 생깁니다. 그림자(떠 있음)와 표면 색(면 구분)이 함께 깊이를 표현하죠. 명도 단계·엘리베이션 단계에 연동된 색상 차이입니다.

다음 편은 선명한 화면 모드의 표면 밝기를 다룹니다. DS-102 — “선명한 화면 모드에서 3단계의 표면 밝기 차이로 각 엘리베이션을 구분한다.”

다음 편 예고 ▶ 「102. 선명한 화면 모드에서 3단계의 표면 밝기 차이를 사용해 각 엘리베이션을 구분하고 있다.」

ViewCheck는 겹친 표면이 단계별 색상 차이로 깊이를 표현하는지를 진단합니다.

📚 참고 출처

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

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

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