<dialog> — 인터랙티브 태그 도감

올바른 사용

showModal()로 모달, show()로 비모달

form method=dialog로 제출 + 닫기

ESC·포커스 트랩·복원 모두 자동

::backdrop으로 배경 스타일

확인 다이얼로그

<dialog id="confirm">
  <form method="dialog">
    <p>정말 삭제하시겠습니까?</p>
    <button value="confirm">삭제</button>
    <button value="cancel">취소</button>
  </form>
</dialog>
<script>
  document.getElementById("confirm").showModal();
</script>

form method=dialog로 native 모달 닫기 메커니즘.

React + Radix Dialog

<Dialog.Root>
  <Dialog.Trigger>열기</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title>제목</Dialog.Title>
      <Dialog.Description>설명</Dialog.Description>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

라이브러리가 ARIA · 포커스 트랩 · ESC 모두 자동.

자주 보는 안티패턴

div + z-index로 직접 모달

open 속성 직접 토글 (showModal/close 사용)

dialog 안 form의 action 누락

Dialog.Title의 aria-labelledby 누락 (라이브러리 사용 시)

div + z-index

<div className="modal-backdrop">
  <div className="modal" style={{ zIndex: 1000 }}>
    ...
  </div>
</div>

포커스 트랩 · ESC · backdrop 모두 직접 구현. 시리즈

open 속성 직접 토글

<dialog open={isOpen}>...</dialog>

open 속성만으로는 backdrop · inert · 포커스 자동 적용 안 됨. showModal() 호출이 표준.

해설

모달·비모달 다이얼로그의 native HTML. 2022년 이후 모든 모던 브라우저(Chrome 37+, Firefox 98+, Safari 15.4+) 지원. 시리즈 #3에서 깊이 다뤘듯 — 직접 div 모달을 만드는 안티패턴의 대체.

SEO 관점에서 모달 안 콘텐츠는 본문보다 가중치 낮음. 시리즈 #3에서 짚었듯 — 중요한 콘텐츠를 모달에 숨기면 검색 노출 손해. 모달은 결정적 인터랙션(약관 동의, 결제 확인)에만 사용.

GEO 관점에서 AI 에이전트가 모달을 명시적으로 인식. native dialog는 accessibility tree에서 dialog role로 노출. 에이전트가 "지금 모달이 떠 있다, 모달 안의 인터랙션부터 처리"를 자동 인식. div 모달은 에이전트가 뒤의 버튼을 누르려다 막힘.

A11y 관점에서 가장 critical. native dialog의 showModal() 한 줄로 포커스 트랩, ESC 닫기, backdrop, inert, 포커스 복원 모두 자동. div 모달로 같은 동작을 만들려면 수십 줄의 코드 + 라이브러리 의존.

자주 보는 안티패턴: div + z-index로 직접 모달(시리즈 #3의 핵심 — 포커스 트랩·ESC·backdrop 모두 직접 구현 필요), open 속성 직접 토글(open 속성만으로는 backdrop·inert가 적용 안 됨 — showModal() JS 메서드 호출이 표준), dialog 안 form action 누락(form method="dialog"가 native 모달 닫기 메커니즘 — submit 시 navigation 없이 다이얼로그만 닫고 button의 value를 returnValue로 반환), Dialog.Title의 aria-labelledby 누락(라이브러리 사용 시 — Radix는 자동 처리).

form method="dialog" — native dialog의 특별 form 메서드. submit 시 페이지 이동 없이 다이얼로그 닫기 + 버튼 value 반환. "확인 / 취소" 같은 단순 모달에 가장 깔끔.

::backdrop 의사 요소 — 모달 뒤의 반투명 배경. CSS로 dialog::backdrop { background: rgba(0,0,0,0.5); }. 직접 div backdrop을 만드는 패턴의 대체.

autofocus 속성 — 모달 열릴 때 자동 포커스 받을 요소. 다이얼로그 안의 첫 input이나 기본 액션 button에 박는 게 표준.

UI 라이브러리 — Radix Dialog, Headless UI Dialog. native dialog와 비교해 애니메이션 자유도와 세밀한 포커스 제어에서 유리. 다만 zero dependency와 기본 a11y의 안정성은 native가 우위.

시리즈 #10 focus trap에서 다룬 다이얼로그 안 dynamic content, autoFocus 충돌, SPA 라우팅과의 결합 같은 미세한 케이스도 dialog 관련 안티패턴.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설