평평한 화면에 깊이를 만들다

KRDS DS-018 — 기본 모드에서 배경, 표면 색상을 흰색의 surface와 색상 surface가 번갈아 가며 레이어가 쌓이게 사용하고 있으며, border나 shadow를 함께 사용하여 고도를 표현하고 있다.

0. 들어가며 — 화면은 평면이 아니다

지금까지 색의 ‘의미’(역할·상태)를 다뤘습니다. 이번엔 색이 만드는 또 다른 차원 — 깊이(depth) 입니다.

웹 화면은 물리적으로는 평평한 유리판입니다. 하지만 잘 만든 화면은 입체적으로 느껴집니다. 카드가 배경 위에 살짝 떠 있고, 모달이 화면 앞으로 튀어나오고, 헤더가 콘텐츠 위에 얹혀 있습니다. 이 ’떠 있음’과 ’얹힘’의 감각이 바로 고도(elevation) 이고, 그것이 적용되는 면들이 표면(surface) 입니다.

DS-018은 이 깊이를 색으로 표현하는 방법을 규정합니다. 핵심은 두 가지 — 흰색 surface와 색상 surface를 번갈아 쌓아 레이어를 구분하고, border(테두리)나 shadow(그림자)로 고도를 표현하라는 것입니다. 평평한 화면에 어떻게 깊이를 만드는지, 그 깊이가 왜 사용성에 중요한지를 이번 편에서 풀어냅니다.

1. 규칙 원문 — 두 개의 기법

DS-018 (디자인 스타일 > 색상) “기본 모드에서 배경, 표면 색상을 ① 흰색의 surface와 색상 surface가 번갈아 가며 레이어가 쌓이게 사용 하고 있으며, ② border나 shadow를 함께 사용하여 고도를 표현하고 있다.”

① “흰색 surface와 색상 surface가 번갈아 레이어로 쌓이게”

깊이를 표면 색의 교차로 표현합니다. 흰색 면과 약간 색이 있는(연회색 등) 면을 번갈아 쌓아, 각 레이어가 구분되게 하는 것이죠. 같은 색이 겹치면 경계가 안 보이지만, 번갈아 쓰면 층이 또렷이 드러납니다.

② “border나 shadow로 고도를 표현”

레이어의 ’높이’를 테두리(border)나 그림자(shadow) 로 표현합니다. 그림자는 요소가 떠 있는 느낌을, 테두리는 면의 경계를 만들어 깊이를 더합니다.

정리: 표면 색을 번갈아 쌓고, 테두리·그림자로 고도를 표현해 화면에 깊이를 주라. 이게 DS-018입니다. (이건 ‘기본 모드’ 기준이고, ’선명한 화면 모드’는 다음 편 DS-019에서 다룹니다.)

2. surface와 elevation이란 — 깊이의 언어

두 개념을 정리합시다.

surface(표면) — 콘텐츠가 놓이는 ‘면’

화면은 여러 개의 ’면’으로 이루어집니다. 가장 아래에 페이지 배경이라는 바닥 면이 있고, 그 위에 카드·패널 같은 면이 얹히고, 또 그 위에 모달 같은 면이 뜹니다. 이 각각의 면이 surface입니다. 콘텐츠는 늘 어떤 surface 위에 놓입니다.

elevation(고도) — 면이 ‘얼마나 떠 있나’

elevation은 각 surface가 바닥에서 얼마나 높이 떠 있는가입니다. 페이지 배경은 가장 낮고(고도 0), 카드는 조금 떠 있고, 모달은 가장 높이 떠 있습니다. 고도가 높을수록 ‘화면 앞쪽으로 나온’ 느낌을 줍니다. 이 고도 개념은 구글의 Material Design이 종이(paper)의 층 쌓임에 비유해 널리 퍼뜨린 것으로, 현대 디자인 시스템의 공통 언어가 됐습니다.

왜 깊이가 필요한가

깊이는 단순한 장식이 아니라 정보의 위계를 전달합니다. 떠 있는 것(모달)이 더 중요하고 지금 주목해야 할 것이고, 가라앉은 것(배경)은 맥락입니다. 사용자는 이 깊이감만으로 “지금 이 카드에 집중하면 되겠구나”, “이 모달에 먼저 답해야겠구나”를 직관적으로 압니다. 깊이는 공간으로 표현한 우선순위입니다.

이 직관은 우리가 현실 세계에서 평생 학습한 공간 감각에서 옵니다. 책상 위에 서류가 여러 장 겹쳐 있으면, 우리는 맨 위에 놓인 종이가 ’지금 보는 것’이고 아래 것들은 ’나중 것’임을 자연스럽게 압니다. 누가 설명해 주지 않아도요. 화면의 깊이도 같은 원리를 빌립니다. 모달이 그림자를 드리우며 콘텐츠 위에 떠오르면, 사용자는 “이게 맨 위 종이구나, 이걸 먼저 처리해야겠구나”를 본능적으로 이해합니다. 깊이 표현은 사용자에게 새로운 규칙을 가르치는 게 아니라, 이미 가진 현실 감각을 화면에서 그대로 쓰게 해주는 것입니다.

그래서 깊이가 없는 평평한 화면은 의외로 인지 부담이 큽니다. 모든 게 같은 평면에 있으면, 사용자는 무엇이 무엇 위에 있는지, 무엇을 먼저 봐야 하는지를 색이나 위치 같은 다른 단서로 일일이 추론해야 합니다. 반면 적절한 깊이가 있으면 그 판단이 즉각적이고 무의식적으로 일어납니다. 깊이는 사용자의 뇌가 화면을 해석하는 수고를 덜어주는, 보이지 않는 친절인 셈입니다. 특히 정보가 많고 복잡한 정부 서비스 화면일수록, 이 깊이의 위계가 사용자를 길 잃지 않게 돕습니다.

3. 흰색 surface와 색상 surface를 번갈아 — 레이어 구분

DS-018의 첫 번째 기법입니다. 면을 번갈아 쌓는 이유를 봅시다.

만약 모든 면이 같은 흰색이면 어떻게 될까요? 흰 배경 위에 흰 카드를 얹으면, 카드의 경계가 안 보입니다. 어디까지가 배경이고 어디부터가 카드인지 구분이 안 되죠. 그래서 면을 구분하려면 인접한 면의 색을 살짝 다르게 해야 합니다.

KRDS는 이를 ’흰색 surface와 색상 surface를 번갈아’라고 표현합니다. 예를 들어 — 페이지 배경은 아주 연한 회색, 그 위 카드는 흰색, 카드 안의 영역은 다시 연한 회색. 이렇게 번갈아 쌓으면 각 층의 경계가 색 차이로 또렷이 드러납니다. 실제로 KRDS 기본 모드의 배경 색상은 elevation 단계에 따라 Gray10 → Gray0(흰색) → Gray5 → Gray0 처럼 번갈아 흐릅니다. 연한 회색과 흰색이 교차하며 층을 만드는 것이죠.

핵심은 인접 레이어의 명도 차이입니다. 4편(13단계)에서 본 명도 단계가 여기서 쓰입니다. 양 끝(0·5·10)이 촘촘한 이유도 이것입니다 — 배경·카드·면처럼 밝은 영역의 미세한 층 구분에 그 촘촘한 단계가 필요하기 때문입니다. 깊이 표현은 결국 명도 단계의 정교한 활용입니다.

‘번갈아’라는 표현에 한 가지 흥미로운 점이 있습니다. 흰색 위에 또 흰색을 얹을 수 없으니, 층이 쌓일 때마다 색을 바꿔야 합니다. 그런데 무작정 점점 진해지거나 점점 연해지게만 하면, 층이 많이 쌓일 때 색이 너무 어두워지거나 너무 밝아져 한계에 부딪힙니다. 그래서 KRDS는 연회색과 흰색을 ’번갈아’ 씁니다 — 바닥은 연회색, 그 위 카드는 흰색, 카드 안 영역은 다시 연회색, 그 안은 또 흰색. 이렇게 두 색을 교차시키면 층이 여러 겹 쌓여도 인접한 면끼리는 늘 색이 달라 경계가 유지됩니다. 한정된 명도 범위 안에서 무한한 층 구분을 가능하게 하는 영리한 방식이죠.

다만 이 교차에는 주의가 필요합니다. 인접 면의 명도 차이가 너무 작으면(예: 흰색과 거의 흰색에 가까운 회색) 경계가 흐릿해져 구분 효과가 약해지고, 너무 크면(흰색과 진한 회색) 층 구분은 분명하지만 화면이 칙칙하고 무거워집니다. 그래서 적당한 차이 — 눈에 띄되 거슬리지 않는 미묘한 명도 차 — 를 찾는 것이 중요합니다. 이 적정값을 KRDS는 토큰으로 정의해 두었으므로, 채택하면 검증된 교차 명도를 그대로 쓸 수 있습니다. 깊이의 미묘함은 이런 섬세한 명도 조절에서 나옵니다.

4. border와 shadow로 고도를 표현 — 두 가지 깊이 단서

두 번째 기법입니다. 색 차이만으로는 부족할 때, 테두리와 그림자가 깊이를 더합니다.

shadow(그림자) — ’떠 있음’의 단서

그림자는 요소가 면 위에 떠 있는 느낌을 줍니다. 물체가 빛을 받으면 아래에 그림자가 지듯, 화면 요소 아래에 옅은 그림자를 두면 ’떠 있다’는 착시가 생깁니다. 고도가 높을수록 그림자가 더 크고 부드러워집니다 — 모달처럼 높이 뜬 것은 그림자가 넓고, 카드처럼 살짝 뜬 것은 그림자가 좁습니다. 그림자의 크기가 곧 고도의 높이를 표현합니다.

border(테두리) — ’경계’의 단서

테두리는 면의 경계를 명확히 합니다. 그림자가 ’떠 있음’이라면, 테두리는 ’여기까지가 이 면’이라는 구분입니다. 특히 그림자를 쓰기 어려운 상황(인접 면이라 그림자가 어색한 경우)이나, 더 명확한 구분이 필요할 때 테두리가 효과적입니다.

둘을 함께

DS-018은 ’border나 shadow’라고 하여 둘 중 하나, 또는 함께 쓰라고 합니다. 보통 떠 있는 느낌이 필요하면 그림자를, 평면적 구분이 필요하면 테두리를 씁니다. 둘을 함께 쓰면 깊이가 더 분명해지지만, 과하면 무거워지므로 상황에 맞게 조절합니다. 색 차이(레이어) + 그림자/테두리(고도)가 함께 작동해 화면의 입체감이 완성됩니다.

5. 깊이의 절제 — 과하면 무거워진다

깊이 표현도 절제가 필요합니다. 그림자를 너무 많이, 너무 진하게 쓰면 화면이 무겁고 어수선해집니다.

흔한 실수가 모든 요소에 진한 그림자를 두는 것입니다. 카드마다, 버튼마다, 입력칸마다 그림자가 있으면 — 모든 게 떠 있어서 정작 ‘진짜 떠 있어야 할 것’(모달 등)이 도드라지지 않습니다. 14편의 경고 피로, 8편의 강조 인플레이션과 같은 원리입니다. 깊이도 위계가 있어야 합니다 — 배경은 가라앉고, 카드는 살짝 뜨고, 모달은 확실히 떠야 합니다. 모두가 같은 높이로 떠 있으면 깊이가 의미를 잃습니다.

KRDS가 elevation을 단계로 관리하는 이유가 여기 있습니다. 고도를 몇 단계로 표준화해 — 평면(0), 살짝 뜸, 중간, 높이 뜸 — 각 요소에 적절한 단계를 부여하면, 화면에 일관되고 의미 있는 깊이 위계가 생깁니다. 그림자를 감각으로 아무렇게나 주는 게 아니라, 정해진 고도 단계에서 골라 쓰는 것이죠. (이건 별도 영역인 ‘엘리베이션’ 규칙에서 더 깊이 다룹니다.)

이 ’단계로 관리한다’는 발상은 이제 익숙할 것입니다. 색상을 팔레트로(DS-001), 명도를 13단계로(DS-004), 투명도를 5단계로(DS-010) 관리했듯, 고도도 단계로 관리합니다. 이 시리즈를 따라오며 반복해서 만나는 한 가지 큰 원리가 있죠 — ‘감각으로 그때그때 정하지 말고, 정해진 단계 안에서 골라 쓰라.’ 색이든 투명도든 깊이든, 디자인 시스템의 핵심은 무한한 선택지를 정돈된 유한한 단계로 바꾸는 데 있습니다. 그래야 일관되고, 예측 가능하고, 관리할 수 있으니까요. 깊이 표현도 이 원리의 또 다른 적용일 뿐입니다.

실무적으로 그림자는 특히 표준화가 중요한 요소입니다. 그림자는 번짐(blur), 위치(offset), 색, 투명도 등 여러 값의 조합이라, 감각으로 매번 정하면 거의 무한히 다양한 그림자가 생겨납니다. 그러면 같은 카드인데 페이지마다 그림자가 미묘하게 달라 통일성이 깨지고, 코드도 지저분해집니다. 고도 단계를 토큰으로 정의해 두면 — ‘고도 1단계 그림자’, ’고도 3단계 그림자’처럼 — 디자이너는 단계만 고르고, 개발자는 토큰만 적용하면 됩니다. 깊이가 시스템이 되는 것이죠. 그림자 하나에도 이런 체계적 관리가 화면의 품질을 좌우합니다.

6. 흔한 위반 패턴

DS-018 위반은 두 방향으로 나타납니다 — ‘깊이 없음’과 ’깊이 과함’.

함정 ① 평평한 화면. 모든 면이 같은 흰색, 그림자·테두리 없음 → 카드·영역 경계가 안 보임, 위계 사라짐. → 표면 색 번갈아 + 테두리/그림자.

함정 ② 과한 그림자. 모든 요소에 진한 그림자 → 무겁고 어수선, 깊이 위계 붕괴. → 고도 단계로 절제.

함정 ③ 레이어 색 차이 부족. 인접 면의 색이 너무 비슷해 경계가 모호. → 명도 단계를 충분히 차이 나게.

함정 ④ 일관성 없는 깊이. 같은 종류 요소(카드)가 페이지마다 다른 고도 → 위계 혼란. → 요소별 고도 표준화.

핵심: 깊이는 ‘있되, 위계 있게’ 줘야 합니다. 없으면 평평하고, 과하면 무겁습니다.

7. 무엇을 점검하나

DS-018은 기본 모드에서 깊이가 표현됐는지를 봅니다.

레이어 색 교차 — 흰색·색상 surface가 번갈아 쌓여 면이 구분되는가.

고도 단서 — border나 shadow로 고도가 표현되는가.

깊이 위계 — 배경·카드·모달의 고도가 위계 있게 구분되는가.

절제 — 그림자가 과하게 남용되지 않았는가.

8. 누가 담당하나

역할	책임
디자이너	surface 레이어 색과 elevation(그림자/테두리) 단계 설계
퍼블리셔/개발	표면 색·그림자·테두리를 토큰으로 구현, 고도 일관 유지
디자인 시스템 담당	고도 단계 표준 정의(또는 KRDS 채택)

깊이 표현은 디자인 설계와 구현이 함께합니다. 특히 그림자는 코드로 정확히 재현해야 하므로(blur·offset·색), 토큰으로 관리하는 것이 좋습니다.

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

적용 대상

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

카드·패널·모달 등 면 구조가 있는 모든 사이트 = 해당. 거의 모든 현대 웹이 면 레이어를 쓰므로 적용됩니다.

예외(N/A)

면 레이어나 떠 있는 요소가 전혀 없는 극단적으로 단순한 페이지라면 부분 예외일 수 있으나, 드뭅니다.

10. 단계별 개선 방법

Before / After

/* ❌ Before: 흰 배경에 흰 카드(경계 안 보임), 깊이 없음 */ .page { background: #fff; } .card { background: #fff; } /* ✅ After: 레이어 색 교차 + 그림자로 고도 */ .page { background: var(--gray-5); } /* 연회색 바닥 */ .card { background: var(--gray-0); /* 흰색 카드 (배경과 교차) */ border: 1px solid var(--gray-10); /* 경계 */ box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* 살짝 떠 있음 */ } .modal { background: var(--gray-0); box-shadow: 0 8px 24px rgba(0,0,0,0.16); /* 높이 뜸 */ }

정비 순서

레이어 색 교차 — 배경과 카드의 면 색을 명도 단계로 구분.

고도 단서 추가 — 카드·모달에 적절한 그림자/테두리.

고도 위계 정리 — 배경<카드<모달 순으로 고도 차등.

그림자 절제 — 과한 그림자를 고도 단계에 맞게 정리.

11. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

카드·패널이 배경과 면 색으로 구분되나요?

모달·카드에 그림자나 테두리로 고도가 표현되나요?

배경<카드<모달 순으로 깊이 위계가 있나요?

그림자를 모든 요소에 과하게 쓰고 있지 않나요?

❓ FAQ

Q1. 그림자와 테두리 중 뭘 써야 하나요? ‘떠 있는’ 느낌이 필요하면 그림자, ’경계 구분’이 필요하면 테두리입니다. 카드·모달처럼 뜬 요소는 그림자, 인접한 면 구분은 테두리가 자연스럽습니다. 둘을 함께 써도 되지만 과하지 않게 조절하세요.

Q2. 요즘 ’플랫 디자인’이 유행인데 깊이가 필요한가요? 완전히 평평하면 면 구분과 위계가 약해집니다. 현대 디자인은 ‘과한 입체’와 ’완전한 평면’ 사이의 절제된 깊이(섬세한 그림자, 미묘한 색 차이)를 씁니다. KRDS도 이 방향입니다 — 무겁지 않되 위계는 분명한 깊이.

Q3. 면 색을 번갈아 쓰면 화면이 칙칙해지지 않나요? ’색상 surface’는 채도 높은 색이 아니라 아주 연한 회색 정도입니다. 흰색과 연회색의 미묘한 교차라 칙칙하지 않고, 오히려 면이 정돈돼 보입니다. 명도 단계의 미세한 차이로 충분합니다.

Q4. 그림자 값은 어떻게 정하나요? KRDS의 고도 단계 토큰을 쓰면 검증된 그림자 값을 바로 적용할 수 있습니다. 자체 설계라면 고도가 높을수록 그림자를 크고 부드럽게(blur 크게, 색은 옅게) 하는 원칙을 따르세요. 감각으로 매번 다르게 주면 일관성이 깨집니다.

Q5. 다크모드/선명한 화면 모드에서도 같나요? 원리는 같되 방향이 다릅니다. 기본 모드는 위로 갈수록 밝아지는 식인데, 선명한 화면 모드는 레이어가 쌓일수록 점차 밝아지는 별도 규칙이 있습니다(다음 편 DS-019). 모드마다 깊이 표현 방식이 조정됩니다.

12. 마무리 — 깊이는 공간으로 쓴 위계

DS-018의 메시지는 명료합니다.

화면은 평면이지만, 깊이를 더하면 사용자는 무엇이 중요하고 무엇이 맥락인지 직관적으로 읽는다.

표면 색을 번갈아 쌓아 면을 구분하고, 그림자·테두리로 고도를 표현하면, 평평한 유리판이 입체적인 공간이 됩니다. 그 공간에서 떠 있는 것은 주목해야 할 것, 가라앉은 것은 배경 — 사용자는 깊이만으로 우선순위를 읽습니다. 깊이는 색으로, 공간으로 쓴 위계입니다. 단, 깊이도 위계가 있어야 하며, 과하면 무거워진다는 절제를 잊지 말아야 합니다.

다음 편은 이 깊이 표현이 모드에 따라 어떻게 달라지는지를 다룹니다. DS-019 — “선명한 화면 모드에서 배경, 표면 색상을 레이어가 쌓일수록 점차 밝아지게 표현한다.” 기본 모드와 정반대로 흐르는, 고대비 모드의 깊이 표현을 살펴봅니다.

다음 편 예고 ▶ 「019. 선명한 화면 모드에서 배경, 표면 색상을 레이어가 쌓일수록 점차 밝아지게 표현하고 있다.」

우리 사이트가 깊이를 잘 표현하는지 확인하려면? ViewCheck는 표면 레이어의 색 교차, 그림자·테두리의 고도 표현, 그리고 깊이 위계의 일관성과 절제를 분석해, 화면이 평평하거나 과하게 무겁지 않은지를 진단합니다.

📚 참고 출처

KRDS 색상(Color) 스타일 가이드 (surface·elevation) — https://www.krds.go.kr/html/site/style/style_02.html

KRDS 디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_07.html

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

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