딤드는 정말 집중이 필요할 때만

KRDS DS-103 — 주의가 필요한 요소에만 제한적으로 딤드 효과를 사용하고 있다.

0. 들어가며 — 딤드 효과란

이번 103편부터는 딤드(dimmed) 효과 — 화면을 어둡게 덮는 효과를 다룹니다.

모달이나 중요한 대화상자가 뜰 때, 그 뒤 배경을 어둡게 덮는 막을 본 적 있을 겁니다. 이게 딤드 효과입니다 (10편의 오버레이와 연결). 배경을 어둡게 해 사용자의 시선을 앞쪽 요소에 집중시키죠. DS-103은 이 딤드를 주의가 필요한 요소에만 제한적으로 쓰라고 규정합니다. 이번 편은 딤드 절제를 풀어냅니다.

1. 규칙 원문 — 제한적 사용

DS-103 (디자인 스타일 > 엘리베이션) “주의가 필요한 요소에만 제한적으로 딤드 효과를 사용하고 있다.”

딤드(배경 어둡게 덮기)를 정말 집중이 필요한 요소(모달 등)에만 제한적으로 쓰라는 뜻입니다.

정리: 딤드 효과는 주의가 필요한 요소에만 제한적으로 사용하라. 이게 DS-103입니다.

2. 왜 제한적으로 쓰나

딤드는 강력한 효과입니다. 배경을 어둡게 덮어 사용자의 시선을 강제로 앞쪽에 집중시키죠. 바로 그 강력함 때문에 절제가 필요합니다.

딤드를 남발하면 — 사소한 알림, 작은 팝업마다 배경을 어둡게 덮으면 — 사용자가 자주 방해받습니다. 딤드는 ’지금 이것에만 집중하라, 다른 건 못 한다’는 강한 신호인데, 이게 자주 뜨면 사용자는 피로하고 답답해지죠. 또 딤드가 흔해지면 정작 정말 중요한 모달의 집중 효과가 약해집니다(강조 인플레이션, 8편과 같은 원리).

그래서 딤드는 정말 사용자의 집중이 필요하고, 배경 조작을 막아야 하는 경우에만 씁니다 — 중요한 결정을 요구하는 모달, 작업을 완료해야 다음으로 갈 수 있는 대화상자, 위험한 행동 확인(14편) 등. 단순 정보 알림이나 가벼운 팝업에는 딤드 없이 표시하죠. 강한 효과일수록 아껴 써야 그 효과가 산다는 것 — 강조색(8·12편), 빨강 (14편) 절제와 같은 원리가 딤드에 적용된 것입니다.

이는 딤드가 단순한 시각 효과가 아니라 ‘사용자의 행동을 제약하는’ 효과임을 보여줍니다. 배경을 딤드로 덮으면 배경 조작이 막히죠. 사용자의 자유를 제약하는 것이므로, 정말 필요할 때만 신중히 써야 합니다.

3. 점검 / 개선

무엇을 점검하나

제한적 사용 — 딤드가 정말 주의가 필요한 요소에만 쓰이는가.

남용 여부 — 사소한 알림·팝업에 딤드가 남발되지 않는가.

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

역할	책임
디자이너	딤드를 주의 요소에만 한정 설계
기획/UX	어느 경우 딤드가 필요한지 정의

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

모달·딤드를 쓰는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 딤드가 정말 집중이 필요한 요소(중요 모달)에만 쓰이나요?

□ 사소한 알림·팝업에 딤드를 남발하지 않나요?

□ 딤드가 너무 자주 떠 사용자를 방해하지 않나요?

❓ FAQ

Q1. 어떤 경우 딤드를 쓰나요? 중요한 결정 모달, 작업 완료가 필요한 대화상자, 위험 행동 확인 등 정말 집중과 배경 조작 차단이 필요한 경우입니다. 단순 알림은 딤드 없이. Q2. 왜 남발하면 안 되나요? 딤드는 배경 조작을 막는 강한 효과라, 자주 뜨면 사용자를 방해하고 피로하게 하며, 정작 중요한 모달의 집중 효과도 약해집니다. Q3. 10편(투명도)과 관련 있나요? 딤드는 보통 반투명 검정 오버레이로 구현됩니다(10편). 그 사용을 절제 하라는 것이 103편입니다.

6. 마무리

DS-103의 메시지:

딤드는 정말 집중이 필요할 때만 — 강한 효과일수록 아껴 써야 산다.

딤드는 배경을 덮어 시선을 강제 집중시키는 강한 효과라, 남발하면 사용자를 방해하고 효과가 약해집니다. 정말 주의·집중이 필요한 요소에만 제한적으로 써야 하죠. 강조 절제 원리가 딤드에 적용된 것입니다.

다음 편은 딤드의 중첩을 다룹니다. DS-104 — “중첩된 딤드 효과를 지양하고 단일 효과로 제한한다.”

다음 편 예고 ▶ 「104. 중첩된 딤드 효과를 지양하고 단일 효과로 제한하고 있다.」

ViewCheck는 딤드 효과가 주의 요소에만 제한적으로 쓰였는지를 진단합니다.

📚 참고 출처

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

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

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