닫기는 맨 마지막에 마크업하라

KRDS CP-183 — 모달의 닫기 버튼은 모달의 가장 마지막 요소로 마크업하고 있다.

0. 들어가며 — 모달 그룹의 마지막

이번 303편은 모달 그룹(CP-176~183, 8개)의 마지막 규칙입니다. 모달의 닫기 버튼(X)을 모달의 가장 마지막 요소로 마크업하라는 내용이죠.

모달 우측 상단의 ‘X’ 닫기 버튼 — 시각적으로는 위에 있지만, DOM 순서(마크업)에서는 모달의 가장 마지막에 두라는 게 이 규칙입니다. 시각 위치와 마크업 순서가 다른, 접근성을 위한 특별한 규칙이죠. 왜 그래야 하는지 이번 편에서 풀어내며 모달 8개를 마무리합니다.

1. 규칙 원문 — 닫기 버튼 마지막 요소 마크업

CP-183 (컴포넌트 > 모달) “모달의 닫기 버튼은 모달의 가장 마지막 요소로 마크업하고 있다.”

모달의 닫기 버튼(‘X’)을, 시각 위치(보통 우측 상단)와 별개로 DOM 마크업에서는 모달의 가장 마지막 요소로 배치하라는 뜻입니다.

정리: 닫기 버튼은 DOM상 모달의 맨 마지막에 마크업하라. 이게 CP-183입니다.

2. 왜 닫기 버튼을 마지막에 마크업하나

이 규칙은 ’시각 위치’와 ’DOM 순서’를 의도적으로 다르게 두라는, 접근성을 위한 세심한 규칙입니다. 키보드·스크린 리더 사용자의 초점·읽기 순서를 고려한 것이죠.

키보드 초점·읽기 순서는 DOM을 따른다. 시각 사용자는 닫기 버튼이 우측 상단에 있는 걸 눈으로 보지만, 키보드 사용자는 DOM 순서대로 Tab을 이동하고, 스크린 리더는 DOM 순서대로 읽습니다(구조화 목록 CP-103, 모달 초점 CP-182에서 본 원리). 그래서 닫기 버튼을 DOM 어디에 두느냐가 이들의 경험을 결정하죠.

닫기 버튼이 맨 앞(DOM)에 있으면 — 문제. 만약 닫기 버튼을 시각 위치(상단)대로 DOM에서도 모달의 첫 요소로 두면:

초점 진입 시 닫기에 먼저 닿음 — 모달이 열려 초점이 진입할 때(CP-182), 첫 요소가 닫기 버튼이면 — 사용자가 모달 내용을 보기도 전에 ’닫기’에 초점이 갑니다. 키보드 사용자가 모달을 막 열었는데 첫 Tab 대상이 ’닫기’면 어색하고, 실수로 바로 닫을 수도 있죠.

스크린 리더가 ’닫기’부터 읽음 — 모달이 열리면 스크린 리더가 제목·내용을 먼저 안내해야 맥락을 잡는데, 닫기 버튼이 맨 앞이면 “닫기 버튼”부터 읽어 맥락이 흐려집니다.

닫기 버튼을 맨 뒤(DOM)에 두면 — 자연스러움. 닫기 버튼을 DOM상 모달의 마지막 요소로 두면:

논리적 읽기·초점 순서 — 모달이 열리면 제목(헤더) → 콘텐츠 → 액션 버튼(푸터) → 닫기 버튼 순으로 자연 스럽게 흐릅니다. 사용자가 내용과 주요 행동(확인/취소)을 먼저 접하고, 마지막에 ’닫기’를 만나죠. ’내용 다 보고 닫기’라는 논리적 순서입니다.

주요 행동 우선 — 모달의 목적은 액션 버튼(CP-178)으로 행동을 완료하는 것입니다. 닫기는 ’그냥 빠져나가기’로, 주요 행동보다 우선순위가 낮죠. 그래서 초점·읽기 순서에서 뒤에 두는 게 맞습니다.

시각 위치는 그대로. 중요한 건 — 닫기 버튼을 DOM 마지막에 두되, 시각적으로는 CSS로 우측 상단에 배치 한다는 점입니다(position: absolute 등). 시각 사용자는 여전히 익숙한 우측 상단의 ’X’를 보고, 키보드·스크린 리더 사용자는 논리적 순서(마지막)로 닫기를 경험하죠. 시각 위치와 DOM 순서를 분리해 각 사용자에게 최적의 경험을 주는 것입니다.

보완 장치. 닫기는 DOM 마지막이지만, 사용자가 언제든 닫을 수 있어야 하므로 — Escape 키로 즉시 닫기 (CP-182)가 함께 제공됩니다. 즉 닫기 버튼을 Tab으로 끝까지 가지 않아도, Escape로 바로 닫을 수 있죠. 또 닫기 버튼에는 aria-label="닫기"를 부여해(아이콘만이면, 페이지네이션 CP-130 정신) 스크린 리더가 용도를 알게 합니다.

이로써 모달 8개 규칙(CP-176~183)이 완성됩니다 — 크기(176), 스크롤(177), 푸터(178), 명확성(179), 단순성(180), 자동 금지(181), 초점 관리(182), 닫기 순서(183)까지. 짧고 집중된 상호작용을, 모든 사용자가 명확하고 접근 가능 하게 경험하는 모달이죠.

3. 점검 / 개선

무엇을 점검하나

DOM 마지막 — 닫기 버튼이 모달 DOM에서 마지막 요소인가.

시각 위치 유지 — 시각적으로는 우측 상단 등 익숙한 위치에 CSS로 배치됐는가.

보완 장치 — Escape 닫기, 닫기 버튼 aria-label="닫기"가 있는가.

개선 방향

닫기 버튼을 DOM 마지막에 마크업, CSS로 시각 위치(우측 상단) 지정.

Escape 닫기 + 닫기 버튼 aria-label 부여.

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

역할	책임
퍼블리셔/개발	닫기 버튼 DOM 순서·CSS 위치·Escape·aria-label 구현
접근성 담당	초점·읽기 순서에서 닫기가 마지막인지 검증

기관 유형	CP-183 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (닫기 버튼 있는 모달 사용 시)

‘X’ 닫기 버튼이 있는 모달을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 닫기 버튼이 모달 DOM에서 마지막 요소인가요?

□ 시각적으로는 우측 상단 등 익숙한 위치에 CSS로 배치됐나요?

□ Escape 닫기, 닫기 버튼 aria-label="닫기"가 있나요?

❓ FAQ

Q1. 닫기가 우측 상단에 보이는데 DOM은 마지막이라고요? 네. 시각 위치는 CSS로 우측 상단에 두되, DOM 순서는 마지막으로 둡니다. 시각·초점 순서를 분리하는 것이죠. Q2. 왜 마지막이어야 하나요? 모달 열림 시 초점·낭독이 제목·내용·주요 행동을 먼저 거치고 닫기를 마지막에 만나야 논리적입니다. 닫기가 맨 앞이면 내용 전에 닫기에 닿죠. Q3. 닫기를 끝까지 Tab해야 하면 불편하지 않나요? Escape 키로 언제든 즉시 닫을 수 있어 보완됩니다.

6. 마무리

CP-183의 메시지:

닫기는 맨 마지막에 마크업하라 — 시각은 우측 상단, DOM은 마지막.

닫기 버튼을 DOM 마지막에 두면, 모달 열림 시 초점·낭독이 제목·내용·주요 행동을 먼저 거치고 닫기를 마지막에 만나 논리적이죠. 시각 위치(우측 상단)는 CSS로 유지하고, Escape·aria-label로 보완합니다. 이로써 모달 8개 (CP-176~183)를 마칩니다. 다음 편부터는 새 컴포넌트 그룹 배지(Badge) 로 넘어갑니다.

다음 편 예고 ▶ 「304. (CP-184) 배지 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 모달의 닫기 버튼이 DOM 마지막 요소로 마크업되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 모달(Modal) 가이드 — https://www.krds.go.kr/html/site/component/component_16.html

WAI-ARIA APG — Modal Dialog Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

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

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