깊이도 6단계로

KRDS DS-099 — 엘리베이션을 총 6단계로 구성하고, 각 단계를 -1부터 +4까지 엘리베이션의 차이를 두고 있다.

0. 들어가며 — 깊이의 단계화

지난 편들(097·098)에서 계층 배치를 봤습니다. 이번 99편은 그 깊이를 단계로 표준화 — 총 6단계(-1~+4) 입니다.

18편에서 깊이(고도)를 다뤘는데, 거기서 ’고도를 단계로 관리한다’고 했죠. DS-099는 그 단계를 정확히 6단계(-1, 0, +1, +2, +3, +4) 로 못 박습니다. 색·투명도·레디어스를 단계로 관리했듯, 깊이도 6단계로 표준화하는 것이죠. 이번 편은 엘리베이션 6단계를 풀어냅니다.

1. 규칙 원문 — 6단계(-1~+4)

DS-099 (디자인 스타일 > 엘리베이션) “엘리베이션을 총 6단계로 구성하고, 각 단계를 -1부터 +4까지 엘리베이션의 차이를 두고 있다.”

깊이(고도)를 -1, 0, +1, +2, +3, +4의 6단계로 정의한다는 뜻입니다.

정리: 엘리베이션을 6단계(-1~+4)로 표준화하라. 이게 DS-099입니다.

2. 왜 6단계(-1~+4)인가

깊이를 단계로 표준화하는 이유는 색·레디어스를 단계로 관리한 것과 같습니다 — 일관성과 예측 가능성입니다.

깊이를 감각으로 정하면(이 카드는 그림자 살짝, 저 모달은 그림자 많이) 화면의 층위가 들쭉날쭉해집니다. 6단계로 표준화하면, 각 요소가 정해진 고도 단계 중 하나를 갖고, 화면의 깊이 위계가 일관되죠. 배경은 0, 카드는 +1, 모달은 +3처럼 요소별로 단계를 부여하면 깊이가 체계적으로 관리됩니다.

흥미로운 건 -1단계가 있다는 것입니다. 0이 기본 평면이라면, -1은 ‘가라앉은’ 영역(움푹 들어간 입력칸, 눌린 상태 등)을 표현합니다. +방향(떠오름)뿐 아니라 -방향(가라앉음)도 단계로 두어, 평면 위로 뜬 것과 아래로 들어간 것을 모두 표현하는 것이죠. 그래서 -1부터 +4까지, 가라앉음부터 높이 떠오름까지 6단계로 화면의 모든 깊이를 커버합니다.

6단계는 ‘충분하되 과하지 않은’ 단계 수입니다(레디어스 5단계, 투명도 5단계와 유사). 배경·카드·드롭다운·모달· 긴급공지 등 화면의 다양한 층위를 6단계로 충분히 표현하면서도, 관리할 만한 수준이죠. 이는 ’단계는 필요한 만큼만’이라는 디자인 시스템의 일관된 원리입니다.

3. 점검 / 개선

무엇을 점검하나

6단계 구성 — 엘리베이션이 6단계(-1~+4)로 정의됐는가.

요소별 단계 — 각 요소가 적절한 고도 단계를 갖는가.

단계 예시

단계	예시 요소
-1	가라앉은 영역(움푹한 입력칸 등)
0	기본 평면(배경)
+1	카드
+2	드롭다운
+3	모달
+4	최상위 알림

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

역할	책임
디자인 시스템 담당	엘리베이션 6단계 정의
퍼블리셔/개발	요소별 고도 단계 구현

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

깊이·층위가 있는 모든 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 엘리베이션이 6단계(-1~+4) 로 정의됐나요?

□ 각 요소가 정해진 고도 단계를 갖나요?

□ 깊이 위계가 일관된가요?

❓ FAQ

Q1. -1단계가 뭔가요? 0(기본 평면)보다 아래로 가라앉은 영역입니다. 움푹 들어간 입력칸, 눌린 상태 등을 표현합니다. 떠오름(+)뿐 아니라 가라앉음(-)도 표현하는 것이죠. Q2. 18편(고도)과 다른가요? 18편은 ’깊이를 단계로’라는 원리, 99편은 그 단계를 6단계(-1~+4)로 구체화한 것입니다. Q3. KRDS를 채택하면 자동인가요? KRDS는 엘리베이션 6단계를 토큰으로 정의합니다.

6. 마무리

DS-099의 메시지:

깊이도 6단계(-1~+4)로 표준화 — 가라앉음부터 높이 떠오름까지 일관되게.

엘리베이션을 6단계로 정의하면 화면의 깊이 위계가 체계적으로 관리됩니다. -1(가라앉음)부터 +4(높이 떠오름) 까지 모든 깊이를 커버하죠. 색·레디어스·투명도처럼 깊이도 단계로 관리하는 일관된 원리입니다.

다음 편은 그림자 단계를 다룹니다. DS-100 — “그림자 표현을 4단계로 제공하고, 엘리베이션에 따라 그림자 강도를 조절한다.”

다음 편 예고 ▶ 「100. 그림자 표현을 4단계로 제공하고, 엘리베이션에 따라 그림자 강도를 조절하고 있다.」

ViewCheck는 엘리베이션이 6단계(-1~+4)로 구성됐는지를 진단합니다.

📚 참고 출처

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

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

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