높이 뜰수록 그림자도 강하게

KRDS DS-100 — 그림자 표현을 4단계로 제공하고, 엘리베이션에 따라 그림자 강도를 조절하고 있다.

0. 들어가며 — 100편, 그림자로 표현하는 깊이

시리즈 100편입니다. 지난 99편(엘리베이션 6단계)에 이어, 이번엔 그 깊이를 그림자로 표현하는 규칙 — 그림자 4단계, 엘리베이션에 따라 강도 조절 입니다.

18편에서 봤듯 밝은 모드의 깊이는 그림자로 표현됩니다. 떠 있는 요소 아래에 그림자가 지죠. DS-100은 이 그림자를 4단계로 제공하고, 고도가 높을수록 그림자를 강하게 하라고 규정합니다. 이번 편은 그림자 단계와 강도 조절을 풀어냅니다.

1. 규칙 원문 — 그림자 4단계

DS-100 (디자인 스타일 > 엘리베이션) “그림자 표현을 4단계로 제공하고, 엘리베이션에 따라 그림자 강도를 조절하고 있다.”

그림자를 4단계로 정의하고, 고도(엘리베이션)가 높을수록 그림자를 강하게(크고 부드럽게) 한다는 뜻입니다.

정리: 그림자를 4단계로 제공하고, 고도가 높을수록 그림자를 강하게 하라. 이게 DS-100입니다.

2. 왜 고도에 따라 그림자를 조절하나

현실에서 물체가 높이 떠오를수록 그림자가 더 크고 흐려집니다(광원에서 멀어지므로). 화면도 이 물리를 모방 하죠 — 살짝 뜬 카드(+1)는 좁고 옅은 그림자, 높이 뜬 모달(+3)은 넓고 부드러운 그림자. 그림자의 강도가 곧 고도의 높이를 표현하는 것입니다(18편).

그림자를 4단계로 제공하면, 각 엘리베이션 단계(99편)에 맞는 그림자를 골라 쓸 수 있습니다. 고도가 높아질수록 다음 단계의 강한 그림자를 적용하면, 사용자는 그림자 강도만 보고도 ’이게 얼마나 떠 있는지’를 인지하죠. 카드보다 모달이 더 강한 그림자면, 모달이 더 위에 있음이 직관적으로 전달됩니다.

이는 그림자를 단계로 표준화하는 것입니다. 18편에서 ’그림자를 감각으로 주지 말고 단계로 관리하라’고 했는데, DS-100이 그 단계를 4개로 정합니다. 그림자는 번짐·위치·색·투명도의 조합이라 감각으로 정하면 무한히 다양 해지는데(18편), 4단계로 토큰화하면 일관성이 보장되죠. 엘리베이션 6단계(99편)와 그림자 4단계가 함께 작동해 깊이를 체계적으로 표현합니다.

3. 점검 / 개선

무엇을 점검하나

그림자 4단계 — 그림자가 4단계로 정의됐는가.

강도 조절 — 고도가 높을수록 그림자가 강한가.

일관성 — 그림자가 토큰으로 관리되는가.

Before / After

/* ✅ 그림자 4단계 + 고도별 강도 */ :root { --shadow-1: 0 1px 2px rgba(0,0,0,0.06); /* +1 카드 */ --shadow-2: 0 2px 8px rgba(0,0,0,0.10); /* +2 드롭다운 */ --shadow-3: 0 8px 24px rgba(0,0,0,0.14); /* +3 모달 */ --shadow-4: 0 16px 40px rgba(0,0,0,0.18); /* +4 (값은 KRDS 기준) */ } .card { box-shadow: var(--shadow-1); } .modal { box-shadow: var(--shadow-3); }

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

역할	책임
디자인 시스템 담당	그림자 4단계 정의
퍼블리셔/개발	고도별 그림자 토큰 구현

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

깊이·그림자가 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 그림자가 4단계로 정의됐나요?

□ 고도가 높을수록 그림자가 강한가요?

□ 그림자가 토큰으로 관리되나요?

□ 그림자가 감각적으로 제각각이지 않나요?

❓ FAQ

Q1. 왜 4단계인가요? 화면의 주요 떠오른 요소(카드·드롭다운·모달·최상위)를 4단계 그림자로 충분히 표현 합니다. 엘리베이션 6단계 중 떠오른 단계들에 대응하죠. Q2. 18편과 다른가요? 18편은 ‘그림자로 깊이 표현’, 100편은 그림자를 4단계로 구체화하고 고도별 강도를 조절하는 것입니다. Q3. 어두운 모드에서도 그림자인가요? 어두운 모드(선명한 화면 모드)는 그림자가 안 보여 밝기로 깊이를 표현합니다(19편·102편). 그림자는 밝은 모드 기준입니다. Q4. KRDS를 채택하면 자동인가요? KRDS는 그림자 4단계를 토큰으로 정의합니다.

6. 마무리

DS-100의 메시지:

높이 뜰수록 그림자도 강하게 — 그림자 4단계가 깊이를 표현한다.

고도가 높을수록 그림자를 크고 부드럽게 하면, 그림자 강도가 곧 깊이를 전달합니다. 그림자를 4단계로 토큰화 하면 일관성이 보장되죠. 엘리베이션 6단계와 그림자 4단계가 함께 깊이를 체계화합니다.

다음 편은 표면 색으로 깊이를 표현합니다. DS-101 — “여러 표면이 겹쳐질 때 단계별 색상 차이로 엘리베이션감을 표현한다.”

다음 편 예고 ▶ 「101. 여러 표면이 겹쳐질 때 단계별 색상 차이를 두어 요소 간 엘리베이션감을 표현하고 있다.」

ViewCheck는 그림자가 4단계로 정의되고 고도에 따라 강도가 조절되는지를 진단합니다.

📚 참고 출처

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

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

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