딤드 위에 딤드는 안 된다

KRDS DS-104 — 중첩된 딤드 효과를 지양하고 단일 효과로 제한하고 있다.

0. 들어가며 — 딤드가 겹칠 때

지난 103편(딤드 제한적 사용)에 이어, 이번 104편은 딤드의 중첩을 다룹니다 — 중첩 지양, 단일 효과로 제한.

모달 위에 또 다른 모달이 뜨는 경우가 있습니다. 이때 딤드가 두 겹, 세 겹 겹치면 배경이 점점 더 어두워져 화면이 새카매지죠. DS-104는 이런 중첩 딤드를 지양하고 단일 효과로 제한하라고 규정합니다. 이번 편은 딤드 중첩 금지를 풀어냅니다.

1. 규칙 원문 — 단일 효과

DS-104 (디자인 스타일 > 엘리베이션) “중첩된 딤드 효과를 지양하고 단일 효과로 제한하고 있다.”

딤드가 여러 겹 겹치지 않게, 하나의 딤드 효과만 유지하라는 뜻입니다.

정리: 딤드 효과를 중첩하지 말고 단일로 제한하라. 이게 DS-104입니다.

2. 왜 중첩을 지양하나

딤드는 반투명 검정 막입니다(10편). 이게 여러 겹 겹치면 — 모달1의 딤드 위에 모달2의 딤드가 또 깔리면 — 투명도가 누적되어 배경이 점점 더 어두워집니다(10편의 ‘겹치면 진해짐’). 두세 겹 겹치면 배경이 거의 새카매져, 아래 화면의 맥락이 완전히 사라지죠. 딤드의 본래 목적(집중시키되 맥락 유지)이 깨집니다.

또 중첩 딤드는 깊이 위계를 혼란스럽게 합니다. 딤드가 여러 겹이면 어느 모달이 가장 위인지, 어디에 집중해야 하는지 모호해지죠. 단일 딤드를 유지하면, 가장 위 모달 하나에만 딤드가 작동해 집중 대상이 명확합니다.

그래서 모달 위에 모달이 뜨더라도 딤드는 하나만 유지합니다 — 기존 딤드를 유지하고 새 모달을 그 위에 올리거나, 딤드를 가장 위 모달 기준으로 갱신하는 식으로요. 딤드를 겹겹이 쌓지 않는 것이죠. 이는 10편(투명도 무절제 방지)과 103편(딤드 절제)의 연장입니다. 강한 효과인 딤드는 제한적으로(103), 그리고 중첩 없이(104) 써야 제 기능을 합니다.

3. 점검 / 개선

무엇을 점검하나

중첩 여부 — 딤드가 여러 겹 겹치지 않는가.

단일 효과 — 모달이 여러 개여도 딤드는 하나인가.

배경 가시성 — 딤드 누적으로 배경이 새카매지지 않는가.

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

역할	책임
퍼블리셔/개발	딤드 중첩 방지, 단일 효과 구현
디자이너	다중 모달 시 딤드 처리 설계

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

딤드·다중 모달을 쓰는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 딤드가 여러 겹 겹치지 않나요?

□ 모달 위 모달일 때 딤드가 하나인가요?

□ 딤드 누적으로 배경이 새카매지지 않나요?

❓ FAQ

Q1. 모달 위에 모달이 뜨면 어떻게 하나요? 딤드를 하나만 유지합니다. 기존 딤드를 유지하고 새 모달을 올리거나, 가장 위 모달 기준으로 딤드를 갱신합니다. 딤드를 추가로 쌓지 않습니다. Q2. 왜 새카매지면 안 되나요? 딤드의 목적은 집중시키되 배경 맥락을 어렴풋이 유지하는 것입니다. 새카매지면 맥락이 사라져 본래 기능이 깨집니다. Q3. 103편과 다른가요? 103편은 ‘딤드를 제한적으로(언제 쓰나)’, 104편은 ’딤드를 중첩하지 말고 단일로 (어떻게 쓰나)’입니다. 둘 다 딤드 절제입니다.

6. 마무리

DS-104의 메시지:

딤드 위에 딤드는 안 된다 — 단일 효과로 제한해 배경 맥락을 유지한다.

딤드가 중첩되면 배경이 새카매져 맥락이 사라지고 깊이 위계가 혼란스러워집니다. 모달이 여러 개여도 딤드는 하나만 유지해야 하죠. 투명도 무절제 방지(10편)와 딤드 절제(103편)의 연장입니다.

다음 편은 딤드 상태의 상호작용을 다룹니다. DS-105 — “딤드 상태에서 상호작용이 필요한 영역(닫기 버튼 등)을 시각적으로 명확하게 표시한다.”

다음 편 예고 ▶ 「105. 딤드 상태에서 상호작용이 필요한 영역을 시각적으로 명확하게 표시하고 있다.(닫기 버튼 등)」

ViewCheck는 딤드 효과가 중첩되지 않고 단일로 제한됐는지를 진단합니다.

📚 참고 출처

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

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

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