노트

모달과 다이얼로그

Modal and Non-modal Dialogs

프런트엔드#html · 연결된 개념 5개

쉽게 말하면

다이얼로그는 화면 위에 뜨는 창을 넓게 부르는 말이고, 모달은 그중 대답하기 전엔 뒤 화면을 못 만지게 막는 창이에요. 건널목 차단기처럼 꼭 멈춰서 확인해야 할 때만 길을 막아요.

비유가 깨지는 곳 막는 일이 저절로 되진 않아요. dialog.showModal()은 뒤 화면을 inert로 만들고 Esc로 닫히게 해 주지만, 직접 만들면 포커스 가두기와 aria-modal 같은 접근성 처리를 챙겨야 해요.

다이얼로그는 본 화면 위에 뜨는 창을 넓게 부르는 말이고, 모달은 그중 응답하기 전까지 뒤의 화면을 쓸 수 없게 막는 다이얼로그다. 막지 않는 것은 논모달(non-modal) 다이얼로그라고 한다.

모달논모달 다이얼로그
뒤 화면어둡게 덮고 조작 불가계속 조작 가능
사용자 흐름끊는다유지한다
어울리는 곳삭제 확인, 결제 확인, 반드시 거쳐야 하는 로그인·약관검색 창, 설정 패널, 도움말, 채팅 창

흐름을 끊는 만큼 비용이 크니, 꼭 확인이 필요할 때만 모달을 쓴다. 파괴적인 작업의 확인 버튼은 눈에 띄는 색과 경고로 구분하는 것이 좋다 → 『UX/UI의 10가지 심리학 법칙』

HTML dialog 요소

HTML의 dialog 요소가 둘을 모두 지원한다.

  • dialog.showModal(): 모달로 연다. 뒤 화면을 비활성화하고(inert), 최상위 레이어에 띄워 z-index 싸움이 없으며, ::backdrop으로 배경을 꾸미고, Esc로 닫힌다
  • dialog.show(): 논모달로 연다
  • form method="dialog" 안의 버튼을 누르면 닫히면서 어떤 버튼이었는지 returnValue로 알려 준다

직접 만들 때는 포커스를 다이얼로그 안에 가두고(Focus Trap), 닫으면 연 버튼으로 돌려주고, role="dialog"와 aria-modal을 붙이는 접근성(Accessibility) 처리가 필요하다. React에서는 DOM을 body 아래로 옮기는 포털이나 헤드리스 UI 라이브러리를 많이 쓴다. 반응형으로 모바일에서는 전체 화면, 데스크톱에서는 가운데 상자로 바꿀 때의 CSS 함정은 inset 속성 참고.

출처: MDN — The Dialog element · Nielsen Norman Group — Modal & Nonmodal Dialogs

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 하이드레이션

    하이드레이션(Hydration)은 서버가 미리 렌더해 보낸 HTML(HyperText Markup Language)을 클라이언트에서 다시 만들지 않고, 그 DOM(Document Object Model)에 React 컴포넌트를 연결해 이벤트 핸들러와 상태를 붙이는 과정이다(hydrateRoot). Dan Abramov의 비유로는 "마른 HTML에 상호작용이라는 물을 주는 일"이다.

  • 동기·비동기와 블로킹·논블로킹

    동기·비동기는 결과를 언제 어떻게 받느냐, 블로킹·논블로킹은 기다리는 동안 호출한 스레드가 멈추느냐의 문제다.

  • HTMX

    HTML 속성만으로 서버에 요청을 보내고, 응답으로 받은 HTML 조각을 페이지 일부에 끼워 넣게 해 주는 작은 라이브러리. 클라이언트에서 JSON(JavaScript Object Notation)을 받아 상태와 화면을 그리는 SPA(Single Page Application)와 달리, 서버가 화면 조각을 만들어 보내는 방식(하이퍼미디어, Hypermedia)으로 돌아간다.

  • 마우스 드래그 가로 스크롤

    터치 기기에서는 손가락으로 밀면 되는 가로 슬라이드를, 데스크톱에서는 마우스로 잡아끌어 스크롤하게 만드는 패턴. mousedown만으로 만들면 끌다가 안쪽 글자나 이미지가 선택되거나 링크가 눌리는 문제가 생긴다.

  • Activity와 숨겨진 라우트 보존

    Activity는 React 19.2의 컴포넌트로, UI를 언마운트하지 않고 display: none으로 숨기면서 state와 DOM(Document Object Model)을 보존한다. 숨기는 동안 Effect는 정리(cleanup)된다. 예전 이름은 Offscreen이다.

보기 옵션