이 글에서는 모던 브라우저 기능을 활용하여 JavaScript를 최소화하거나 전혀 사용하지 않고 확인 대화 상자를 구현하는 방법을 상세히 다룹니다. 핵심적인 기능은 다음과 같습니다.
1. 선언적 대화 상자 제어
-
command="show-modal":<button>요소에 이 속성을 추가하고commandfor="[dialog-id]"로 대상<dialog>요소를 지정하면, 버튼 클릭 시showModal()메서드가 호출되어 대화 상자가 열립니다. -
command="close": 취소 버튼에 이 속성을 사용하면 대화 상자의close()메서드가 호출됩니다. -
closedby="any":<dialog>요소에 이 속성을 추가하면 대화 상자 외부 영역(backdrop)을 클릭해도 대화 상자가 닫히는 ‘라이트 디스미스’ 기능을 제공합니다. -
Escape 키:
showModal()로 열린 대화 상자는 Escape 키 입력 시 자동으로 닫히는 브라우저 기본 동작을 지원합니다.
2. 접근성 (Accessibility)
-
role="alertdialog": 대화 상자가 사용자 응답이 필요한 중요한 메시지를 전달하는 확인 창임을 스크린 리더에 알립니다. -
aria-labelledby,aria-describedby: 대화 상자의 제목과 설명을 연결하여 스크린 리더 사용자가 전체 맥락을 파악할 수 있도록 돕습니다.
3. 애니메이션 추가 (@starting-style)
-
@starting-style: 요소가 처음 나타날 때의 초기 상태를 정의하여 자연스러운 진입 애니메이션을 구현합니다. 예를 들어,opacity: 0; scale: 0.95에서opacity: 1; scale: 1로 전환될 수 있습니다. -
allow-discrete:display및overlay와 같은 이산(discrete) 속성에도 전환 효과를 적용할 수 있게 합니다. 이를 통해 대화 상자가 닫힐 때 사라지는 애니메이션을 부드럽게 처리할 수 있습니다.
css
dialog {
opacity: 1;
scale: 1;
transition:
opacity 0.2s ease-out,
scale 0.2s ease-out,
overlay 0.2s ease-out allow-discrete,
display 0.2s ease-out allow-discrete;
@starting-style {
opacity: 0;
scale: 0.95;
}
}
dialog:not([open]) {
opacity: 0;
scale: 0.95;
}
4. Turbo Confirm 시스템과의 통합
-
Turbo.config.forms.confirm: Turbo에서 제공하는 이 설정을 통해 기본confirm()프롬프트 대신 사용자 정의된<dialog>를 활용할 수 있습니다. -
대화 상자 템플릿:
application.html.erb에<dialog id="turbo-confirm-dialog">템플릿을 추가하고, 확인 버튼은<form method="dialog">내의type="submit"버튼으로 설정하여returnValue를 통해 어떤 버튼이 클릭되었는지 감지합니다. -
JavaScript 설정: 메시지 텍스트 설정,
data-turbo-confirm-button을 통한 버튼 텍스트 커스터마이징, 대화 상자 열기 등 최소한의 JavaScript만으로 Turbo의data-turbo-confirm기능을 지원합니다. -
스크롤 방지:
body:has(dialog:modal) { overflow: hidden; }CSS 규칙을 사용하여 모달 대화 상자가 열려 있는 동안 페이지 스크롤을 방지할 수 있습니다.