어둡게 덮어도 ’나갈 문’은 보여줘라

KRDS DS-105 — 딤드 상태에서 상호작용이 필요한 영역을 시각적으로 명확하게 표시하고 있다.(닫기 버튼 등)

0. 들어가며 — 딤드 속에서도 조작할 곳

지난 편들(103·104)에서 딤드 효과를 봤습니다. 이번 105편은 딤드 상태에서 상호작용이 필요한 영역(닫기 버튼 등)을 명확히 표시하는 규칙입니다.

딤드는 배경을 어둡게 덮어 조작을 막습니다. 하지만 사용자는 그 상태에서도 무언가는 해야 하죠 — 모달의 닫기 버튼을 누르거나, 확인/취소를 선택하거나. DS-105는 딤드 상태에서 사용자가 조작해야 할 영역을 시각적 으로 명확히 표시하라고 규정합니다. 이번 편은 딤드 속 상호작용 표시를 풀어냅니다.

1. 규칙 원문 — 상호작용 영역 명확화

DS-105 (디자인 스타일 > 엘리베이션) “딤드 상태에서 상호작용이 필요한 영역을 시각적으로 명확하게 표시하고 있다.(닫기 버튼 등)”

딤드로 덮인 상태에서 사용자가 조작해야 할 영역(닫기·확인 등)을 또렷이 표시하라는 뜻입니다.

정리: 딤드 상태에서도 상호작용할 영역(닫기 버튼 등)을 명확히 표시하라. 이게 DS-105입니다.

2. 왜 명확히 표시하나 — ’나갈 문’의 가시성

딤드는 사용자를 한 요소(모달)에 집중시키지만, 동시에 사용자를 그 안에 ‘가두는’ 효과도 있습니다. 배경 조작이 막히니까요. 이때 만약 ‘나갈 문’(닫기 버튼)이나 조작할 곳이 명확하지 않으면, 사용자는 갇힌 느낌을 받고 어떻게 빠져나갈지 몰라 당황합니다.

특히 딤드가 어둡게 덮은 상태에서 닫기 버튼이 흐릿하거나 잘 안 보이면, 사용자는 모달을 닫지 못해 막막 해지죠. 그래서 딤드 상태에서 상호작용이 필요한 영역 — 닫기(✕) 버튼, 확인/취소 버튼 등 — 은 시각적으로 또렷이 표시되어야 합니다. 사용자가 ’여기서 이렇게 하면 빠져나가거나 진행할 수 있다’를 즉시 알 수 있게요.

이는 접근성과도 직결됩니다. 딤드 모달에서 닫기 버튼은 충분한 대비(2편·24편)와 크기로 명확해야 하고, 키보드로도 접근 가능해야 합니다(focus, 2편). 사용자를 집중시키되 출구는 늘 명확히 — 이것이 딤드를 다루는 핵심 매너입니다. 강하게 집중시키는 만큼, 빠져나갈 방법도 분명히 제공해야 사용자가 통제감을 잃지 않죠.

이는 14편(빨강 경고에 해결로 가는 길 제시)과 같은 원리입니다 — 강한 제약을 걸면, 그 제약을 벗어날 명확한 길을 함께 줘야 합니다. 딤드로 가두되 출구는 보여주는 것, 그것이 사용자를 존중하는 설계입니다.

3. 점검 / 개선

무엇을 점검하나

상호작용 영역 가시성 — 닫기·확인 버튼이 딤드 속에서 또렷한가.

대비 — 상호작용 영역이 충분한 대비를 갖는가(2편).

접근성 — 키보드로 닫기 등에 접근 가능한가.

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

역할	책임
디자이너	딤드 속 상호작용 영역 명확 설계
퍼블리셔/개발	닫기 버튼 가시성·접근성 구현
접근성 담당	딤드 모달 출구 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 딤드 상태에서 닫기 버튼이 또렷이 보이나요?

□ 확인/취소 등 조작할 영역이 명확한가요?

□ 키보드로 모달을 닫을 수 있나요?

□ 사용자가 ‘갇힌 느낌’ 없이 빠져나갈 수 있나요?

❓ FAQ

Q1. 닫기 버튼이 꼭 필요한가요? 딤드 모달에는 빠져나갈 방법(닫기 버튼 등)이 명확해야 합니다. 출구가 없으면 사용자가 갇힙니다. Q2. 배경 클릭으로 닫으면 되나요? 배경 클릭 닫기도 방법이지만, 명시적 닫기 버튼이 더 명확합니다. 사용자가 배경 클릭을 모를 수 있으니 시각적 출구를 제공하세요. Q3. 키보드 접근도 필요한가요? 네. ESC 키로 닫기, 키보드로 버튼 접근 등 키보드 사용자도 빠져나갈 수 있어야 합니다. Q4. KRDS를 채택하면 자동인가요? KRDS 모달 컴포넌트는 명확한 닫기·상호작용 영역을 갖춥니다.

6. 마무리

DS-105의 메시지:

어둡게 덮어도 ’나갈 문’은 보여줘라 — 강하게 가두는 만큼 출구도 명확히.

딤드는 사용자를 집중시키되 가두는 효과가 있어, 닫기 버튼 같은 출구가 명확하지 않으면 사용자가 당황합니다. 상호작용 영역을 또렷이 표시해 사용자가 통제감을 잃지 않게 해야 하죠. 강한 제약에 명확한 출구를 함께 주는, 사용자 존중의 설계입니다.

다음 편은 엘리베이션의 마지막, 경계선을 다룹니다. DS-106 — “그림자가 미세하거나 콘텐츠가 다중 중첩되는 경우 경계선으로 엘리베이션을 구분한다.”

다음 편 예고 ▶ 「106. 그림자가 미세하거나 콘텐츠가 다중으로 중첩되는 경우 경계선을 사용하여 엘리베이션을 구분하고 있다.」

ViewCheck는 딤드 상태에서 닫기 등 상호작용 영역이 명확히 표시되는지를 진단합니다.

📚 참고 출처

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

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

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