Modal (Dialog)

[hsskey]

📋 컴포넌트 정보

• 컴포넌트 이름: Modal (Dialog)
• 컴포넌트 설명: 모달 다이얼로그는 현재 창 또는 다른 다이얼로그 창 위에 겹쳐 표시되는 창으로, 모달 다이얼로그 외부의 콘텐츠는 비활성화되어 사용자가 상호작용할 수 없음
• 사용 사례: 사용자의 주의를 끌어야 하는 중요한 메시지를 표시하거나, 사용자로부터 필수 정보를 입력받아야 할 때 사용

📚 참조 및 레퍼런스

• ARIA Authoring Practices: W3C ARIA Dialog (Modal) Pattern
  • 모달 다이얼로그의 접근성을 고려한 구현 방법과 예시 제공
• 기타 레퍼런스:
  • Web Dev의 dialog 요소 관련 아티클
  • MUI, Ant Design 등의 모달 다이얼로그 컴포넌트 문서와 비교하여 패턴 분석

📝 접근성 및 ARIA 적용 여부

• ARIA Pattern 적용: ARIA Dialog (Modal) Pattern
  • 사용된 ARIA 속성:
    • role="dialog": 요소가 다이얼로그임을 명시
    • aria-modal="true": 다이얼로그가 모달임을 명시
    • aria-labelledby: 다이얼로그의 제목을 참조
    • aria-describedby: 다이얼로그의 설명을 참조
• 접근성 관련 고려사항:
  • 다이얼로그가 열릴 때 초점은 다이얼로그 내부의 요소로 이동해야 함
  • 다이얼로그가 열려 있는 동안에는 Tab과 Shift+Tab으로 다이얼로그 내부의 요소만 탐색할 수 있어야 함
  • Escape 키를 누르면 다이얼로그가 닫혀야 함
  • 다이얼로그가 닫힐 때 초점은 다이얼로그를 열었던 요소로 돌아가야 함
• 접근성 기능 요약:
  • 키보드로 다이얼로그 내부를 탐색할 수 있음
  • 다이얼로그 외부의 콘텐츠는 비활성화되어 접근할 수 없음
  • 적절한 ARIA 속성을 사용하여 다이얼로그의 역할과 상태를 명시함

🏗️ 마크업 구조 분석

• HTML 시맨틱 태그 사용:
  • <dialog>: 다이얼로그 컨테이너 역할을 하는 전용 요소
  • <form method="dialog">: 다이얼로그 내부의 폼 요소
  • <button>: 다이얼로그를 열고 닫는 버튼 요소
• 마크업 구조 비교:
  • Web Dev Example:

<dialog id="MegaDialog" modal-mode="mega">
  <form method="dialog">
    <header>
      <h3>Dialog title</h3>
      <button onclick="this.closest('dialog').close('close')"></button>
    </header>
    <article>...</article>
    <footer>
      <menu>
        <button autofocus type="reset" onclick="this.closest('dialog').close('cancel')">Cancel</button>
        <button type="submit" value="confirm">Confirm</button>
      </menu>
    </footer>
  </form>
</dialog>

• MUI:

<div role="presentation" class="MuiModal-root">
  <div aria-hidden="true" class="MuiBackdrop-root"></div>
  <div role="dialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-description" tabindex="-1" class="MuiDialog-container">
    <div class="MuiDialog-paper">
      <h2 id="dialog-title" class="MuiDialogTitle-root">Modal title</h2>
      <div id="dialog-description" class="MuiDialogContent-root">Dialog content here</div>
      <div class="MuiDialogActions-root">
        <button type="button" class="MuiButtonBase-root MuiButton-root">Cancel</button>
        <button type="button" class="MuiButtonBase-root MuiButton-root">OK</button>
      </div>
    </div>
  </div>
</div>

• Ant Design:

<div class="ant-modal-root">
  <div class="ant-modal-mask"></div>
  <div tabindex="-1" class="ant-modal-wrap">
    <div role="dialog" aria-labelledby="dialog-title" aria-modal="true" class="ant-modal">
      <div class="ant-modal-content">
        <div class="ant-modal-header">
          <div id="dialog-title" class="ant-modal-title">Basic Modal</div>
        </div>
        <div class="ant-modal-body">
          <p>Some contents...</p>
        </div>
        <div class="ant-modal-footer">
          <button type="button" class="ant-btn">Cancel</button>
          <button type="button" class="ant-btn ant-btn-primary">OK</button>
        </div>
      </div>
    </div>
  </div>
</div>

• 구조적 선택 이유:
  • Web Dev 예제에서는 <dialog> 요소를 사용하여 모달 다이얼로그를 구현하고, <form>을 사용하여 다이얼로그 내부의 콘텐츠를 감쌈. 이는 HTML 표준에 맞는 의미론적인 마크업 구조임
  • MUI와 Ant Design은 <div> 요소와 ARIA 속성을 사용하여 모달 다이얼로그를 구현하며, 각 라이브러리의 디자인 시스템에 맞게 클래스 이름을 사용함

💡 UI 라이브러리 비교 분석

• MUI:
  • MuiModal-root로 모달 컨테이너를 표현하고, MuiBackdrop-root로 모달 뒤의 백드롭을 구현함
  • MuiDialog-container로 다이얼로그 컨테이너를 표현하고, aria-labelledby와 aria-describedby를 사용하여 접근성을 고려함
  • MuiDialogTitle-root, MuiDialogContent-root, MuiDialogActions-root로 다이얼로그의 각 섹션을 구분함
• Ant Design:
  • ant-modal-root로 모달 컨테이너를 표현하고, ant-modal-mask로 모달 뒤의 백드롭을 구현함
  • ant-modal-wrap으로 다이얼로그 래퍼를 표현하고, aria-labelledby와 aria-modal을 사용하여 접근성을 고려함
  • ant-modal-header, ant-modal-body, ant-modal-footer로 다이얼로그의 각 섹션을 구분함

⚙️ 구현 및 설계 고려사항

• 주요 설계 고려사항:
  • 모달 다이얼로그는 현재 페이지 위에 겹쳐 표시되므로, 적절한 레이어 관리가 필요함
  • 다이얼로그가 열려 있는 동안에는 다이얼로그 외부의 콘텐츠를 비활성화하여 접근할 수 없도록 해야 함
  • 키보드 포커스 관리를 통해 다이얼로그 내부에서만 탐색할 수 있도록 제한해야 함
  • 적절한 ARIA 속성을 사용하여 다이얼로그의 역할과 상태를 명확히 전달해야 함
  • Web Dev 아티클에서 제시한 바와 같이, <dialog> 요소를 사용하여 모달 다이얼로그를 구현하는 것이 좋음
• 코드 예시:

<button type="button" onclick="openDialog('dialog1', this)">Open Dialog</button>

<dialog id="dialog1" aria-labelledby="dialog1_label" aria-modal="true">
  <form method="dialog">
    <h2 id="dialog1_label">Dialog Title</h2>
    <div>
      <p>Dialog content goes here.</p>
      <button type="button" onclick="closeDialog(this)">Cancel</button>
      <button type="submit" value="confirm">OK</button>
    </div>
  </form>
</dialog>

🔍 테스트 및 검토

• 접근성 테스트:
  • 키보드만으로 다이얼로그를 열고 닫을 수 있는지 확인
  • 다이얼로그가 열려 있을 때 Tab과 Shift+Tab으로 다이얼로그 내부 요소만 탐색할 수 있는지 확인
  • 다이얼로그가 열려 있을 때 Escape 키를 누르면 다이얼로그가 닫히는지 확인
  • 스크린 리더를 사용하여 다이얼로그의 역할과 내용이 정확히 전달되는지 확인
• 브라우저 호환성 테스트:
  • <dialog> 요소의 브라우저 지원 범위 확인 및 폴리필 적용 고려
  • 다양한 브라우저와 버전에서 모달 다이얼로그가 올바르게 동작하는지 확인
• 사용자 피드백:
  • 모달 다이얼로그 사용 시 접근성과 사용성에 대한 사용자 의견을 수렴하고 개선사항을 반영

📌 추가 참고 사항

• 관련 문서:
  • Web Dev - Building color-adaptive, responsive, and accessible modals with the dialog element
  • MDN - 요소
  • MDN - role="dialog"
• 의견 및 제안:
  • <dialog> 요소를 사용하여 모달 다이얼로그를 구현하는 것이 의미론적이고 접근성 측면에서 유리함
  • 모달 다이얼로그의 크기와 위치를 유연하게 조정할 수 있도록 구현하는 것이 좋음
  • 모바일 기기에서의 사용성을 고려하여 반응형 디자인을 적용하는 것이 좋음

🎯 역할, 속성, 상태 및 태그 속성

• Role, Attribute, State:
  • Role: role="dialog"로 요소가 다이얼로그임을 명시
  • Attribute: aria-modal="true"로 다이얼로그가 모달임을 명시, aria-labelledby와 aria-describedby로 다이얼로그의 제목과 설명을 참조
  • State: open 속성으로 다이얼로그의 열림/닫힘 상태를 명시
• JavaScript 및 CSS 사용 여부:
  • JavaScript 사용 여부: 다이얼로그를 열고 닫는 기능, 포커스 관리, 키보드 이벤트 처리 등을 위해 JavaScript 사용
  • CSS 적용 사항: 다이얼로그의 레이아웃, 스타일, 애니메이션 등을 위해 CSS 사용