한눈에 보는 정의
페이지 위에 겹쳐 뜨는 창으로, 닫거나 응답하기 전까지 뒤 화면을 조작할 수 없게 막는 화면 요소.
이런 말로 들어요
- 첫 방문 때 뜨는 이벤트 모달이 너무 빨리 떠서 이탈이 늘었어요.
- 삭제 버튼 누르면 확인 모달을 한 번 띄울게요.
그림으로 보기
모달이 열리면 뒤 화면은 조작할 수 없고 초점이 창 안으로 옮겨집니다. Esc와 닫기 버튼으로 닫을 수 있어야 합니다.
하캄솔루션 자체 제작 모션그래픽자세히 알아보기
모달은 "이것부터 처리하세요"라고 사용자의 주의를 한곳에 모읍니다. 삭제 확인, 로그인, 짧은 신청서처럼 흐름을 잠시 멈춰야 할 때 씁니다. 모달이 열리면 뒤 화면은 흐리게 처리되고 누를 수 없게 됩니다. 접근성 지침은 모달이 열리면 초점이 창 안으로 옮겨지고, Esc 키로 닫을 수 있어야 한다고 안내합니다.
실무 예시
예를 들어 상담 신청 버튼을 누르면 이름·연락처·문의 3칸짜리 모달을 띄우고, 제출하거나 Esc·닫기 버튼을 누르면 원래 보던 위치로 돌아가게 합니다.
함께 살펴볼 점
들어오자마자 뜨는 광고 모달은 내용을 가리고 짜증을 유발해 이탈로 이어지기 쉽습니다. 휴대폰에서 닫기 버튼이 화면 밖으로 밀리지 않는지, 키보드로 닫히는지 확인합니다.
AI에게 이렇게 요청해 보세요
상담 신청 모달을 HTML dialog 요소로 만들어 줘. 열리면 첫 입력칸에 초점이 가고, Esc로 닫히고, 닫으면 원래 버튼으로 초점이 돌아오게 해 줘. 모바일에서 닫기 버튼이 항상 보이게 해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- <dialog>: The Dialog element - MDN 새 창
HTML dialog 요소로 모달 대화상자를 만드는 방법을 확인했습니다.
자료 확인 - Dialog (Modal) Pattern - WAI-ARIA Authoring Practices 새 창
모달이 열리면 바깥 내용은 조작할 수 없고, 초점이 창 안으로 이동하며 Esc로 닫는다는 패턴을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정