그림자로 부족하면 선으로

KRDS DS-106 — 그림자가 미세하거나 콘텐츠가 다중으로 중첩되는 경우 경계선을 사용하여 엘리베이션을 구분하고 있다.

0. 들어가며 — 엘리베이션 10개 규칙의 마지막

엘리베이션 10개 규칙(097~106)의 마지막입니다. 그리고 이 마지막은 깊이 표현의 보조 수단 — 경계선 (border) 입니다.

지금까지 깊이를 그림자(100편)·표면 색(101편)·밝기(102편)로 표현했습니다. 그런데 그림자가 너무 미세하거나, 콘텐츠가 여러 겹 중첩되어 그림자·색만으로 구분이 어려운 경우가 있죠. DS-106은 이럴 때 경계선으로 엘리베이션을 구분하라고 규정합니다. 이번 편으로 엘리베이션을 마무리합니다.

1. 규칙 원문 — 경계선 보완

DS-106 (디자인 스타일 > 엘리베이션) “그림자가 미세하거나 콘텐츠가 다중으로 중첩되는 경우 경계선을 사용하여 엘리베이션을 구분하고 있다.”

그림자·색만으로 깊이 구분이 어려울 때 경계선(테두리) 을 더해 면을 구분하라는 뜻입니다.

정리: 그림자가 미세하거나 다중 중첩 시 경계선으로 엘리베이션을 구분하라. 이게 DS-106입니다.

2. 왜 경계선이 필요한가

깊이의 주 단서는 그림자(100편)·표면 색(101편)이지만, 이것만으로 부족한 경우가 있습니다.

첫째, 그림자가 미세할 때. 살짝 뜬 요소(고도 +1)는 그림자가 아주 옅어, 배경과 구분이 흐릿할 수 있습니다. 특히 밝은 배경에서 옅은 그림자는 거의 안 보이죠. 이때 경계선을 더하면 면의 경계가 또렷해져 구분됩니다.

둘째, 콘텐츠가 다중 중첩될 때. 여러 면이 겹겹이 쌓이면(카드 안 카드 안 면), 그림자·색 차이가 누적되어 구분이 모호해집니다. 경계선을 더하면 각 면의 경계가 명확해져, 복잡한 중첩에서도 층위가 구분되죠.

경계선은 18편(border vs shadow)에서 본 두 깊이 단서 중 하나입니다. 그림자가 ’떠 있음’이라면 경계선은 ’면의 경계’를 명확히 하죠. DS-106은 그림자·색이 부족할 때 경계선을 보조로 더하라는 것입니다. 이는 6편·13편 에서 본 ’여러 채널로 보강하라’는 원리입니다 — 한 단서(그림자)가 약하면 다른 단서(경계선)로 보완해, 깊이 구분을 확실히 하는 것이죠.

이렇게 엘리베이션은 그림자·표면 색·밝기·경계선이라는 여러 단서를 상황에 맞게 조합해 깊이를 표현합니다. 각 단서가 약한 곳을 다른 단서가 보완하면, 어떤 상황에서도 깊이가 명확히 구분되죠. 경계선은 그 보완의 마지막 도구입니다.

3. 점검 / 개선

무엇을 점검하나

경계선 보완 — 그림자가 미세한 면에 경계선이 더해졌는가.

다중 중첩 구분 — 겹겹이 쌓인 면들이 경계선으로 구분되는가.

깊이 명확성 — 어떤 상황에서도 면 층위가 구분되는가.

Before / After

/* ✅ 미세 그림자 + 경계선 보완 */ .card-subtle { box-shadow: 0 1px 2px rgba(0,0,0,0.04); /* 미세 그림자 */ border: 1px solid var(--gray-10); /* 경계선 보완 */ }

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

역할	책임
디자이너	그림자 약한 곳에 경계선 보완 설계
퍼블리셔/개발	경계선 구현

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

깊이·중첩 면이 있는 모든 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 그림자가 미세한 면에 경계선이 더해졌나요?

□ 겹겹이 쌓인 면들이 구분되나요?

□ 어떤 상황에서도 면 층위가 명확한가요?

❓ FAQ

Q1. 항상 경계선을 쓰나요? 아닙니다. 그림자·색으로 충분하면 경계선이 불필요합니다. 그림자가 미세하거나 다중 중첩으로 구분이 어려울 때 보조로 더합니다. Q2. 18편과 관련 있나요? 네. 18편에서 border와 shadow를 깊이 단서로 봤습니다. 106편은 그림자가 약할 때 border를 보완으로 쓰라는 것입니다. Q3. 경계선과 그림자를 함께 쓰면 무겁지 않나요? 미세 그림자 + 옅은 경계선이면 과하지 않습니다. 구분이 명확하되 무겁지 않은 선에서 조합합니다. Q4. KRDS를 채택하면 자동인가요? KRDS 컴포넌트는 상황에 맞게 그림자·경계선을 조합해 깊이를 구분합니다.

6. 마무리 — 엘리베이션 10개 규칙을 마치며

DS-106의 메시지로 엘리베이션을 닫습니다.

그림자로 부족하면 경계선으로 — 여러 단서를 조합해 어떤 상황에서도 깊이를 명확히.

그림자가 미세하거나 다중 중첩으로 구분이 어려울 때, 경계선을 더해 면을 구분합니다. 그림자·표면 색·밝기·경계선 이라는 여러 단서를 상황에 맞게 조합하는 것이죠. ’여러 채널로 보강하라’는 원리가 깊이에 적용된 것입니다.

여기까지 엘리베이션 10개 규칙(097~106) 을 모두 마쳤습니다. 긴급 공지·셀렉트 레이어의 계층, 엘리베이션 6단계, 그림자 4단계, 표면 색·밝기, 딤드 효과, 경계선까지 — 화면의 깊이와 층위를 체계로 다루는 법을 정리 했습니다. 색상·타이포·형태·레이아웃·아이콘·엘리베이션 까지, 디자인 스타일 106개가 완성됐습니다.

다음 편부터는 디자인 스타일의 마지막 분류, 선명한 화면 모드(14개 규칙) 로 넘어갑니다. DS-107 — “선명한 화면 모드로 전환되었을 때 색상 팔레트 규칙에 따라 일괄 전환되게 한다.” 고대비 접근성 모드의 전환을 다룹니다.

다음 편 예고 ▶ 「107. 선명한 화면 모드로 전환되었을 때, 색상 팔레트에 정의된 규칙에 따라 일괄 전환되게 적용하고 있다.」

ViewCheck는 그림자가 미세하거나 다중 중첩인 경우 경계선으로 엘리베이션이 구분되는지를 진단합니다.

📚 참고 출처

KRDS 엘리베이션(Elevation) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_06.html

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

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