1. 기본 Turbo Confirm의 한계와 새로운 대안
전형적인 Rails 개발 방식에서는 button_to 조력자에 data: { turbo_confirm: "..." } 속성을 추가하여 확인 창을 띄웁니다. 이 방식은 단 한 줄의 코드로 작동하므로 매우 빠르고 효율적이지만, 실제 서비스 환경에서는 몇 가지 명확한 단점이 존재합니다.
- 디자인 제어 불가: 브라우저마다 UI가 다르게 표시되며, 애플리케이션의 브랜드 디자인 시스템을 반영할 수 없습니다.
- 콘텐츠 표현의 제약: 오직 단순 텍스트만 표시할 수 있습니다. 텍스트에 굵게(bold) 효과를 주거나, 경고 아이콘을 삽입하거나, 레이아웃을 조정하는 것이 불가능합니다.
- 맥락 제공의 한계: 삭제하려는 항목의 구체적인 이름이나 삭제 시 발생할 수 있는 영향도를 상세하게 설명하기에 UI가 너무 협소합니다.
2. Native Dialog로의 전환 단계
버튼 트리거 변경
기존의 button_to를 일반 버튼 태그(tag.button)로 변경하고, 대화상자를 열기 위한 데이터 속성을 추가합니다. 이는 서버로 즉시 요청을 보내는 대신 클라이언트 측에서 모달을 먼저 띄우는 역할을 합니다.
erb
<%= tag.button "Delete", type: "button", data: { action: "dialog#openModal", target: "##{dom_id(post, :dialog)}"} %>
여기서 data-action은 Attractive.js가 인식하는 선언적 액션이며, data-target은 열고자 하는 특정 대화상자의 고유 ID를 가리킵니다. Rails의 dom_id 헬퍼를 사용하면 목록 내의 여러 항목 중 정확한 대상을 특정할 수 있습니다.
대화상자(Dialog) 마크업 작성
버튼 바로 아래나 적절한 위치에 HTML5 <dialog> 요소를 정의합니다. 이 요소는 브라우저가 기본적으로 지원하는 모달 기능을 활용합니다.
```erb <%= tag.dialog class: “dialog”, id: dom_id(post, :dialog), closedby: “any” do %>
정말 삭제하시겠습니까?
"<%= tag.b post.name %>" 포스트를 삭제하면 다시는 복구할 수 없습니다.
<% end %> ```
- closedby=”any”: 배경을 클릭하거나 ESC 키를 누를 때 대화상자가 자동으로 닫히도록 설정합니다.
- 내부 버튼: 실제 삭제 액션을 수행하는
button_to는 이제 대화상자 내부에 위치하게 되어, 사용자가 명확하게 확인을 누른 경우에만 서버 요청이 발생합니다.
3. 라이브러리 도입 및 현대적 스타일링
Attractive.js 활용
이 방식의 가장 큰 장점은 직접 자바스크립트 로직을 작성할 필요가 없다는 것입니다. Attractive.js는 HTML 속성 기반으로 동작하는 라이브러리로, 레이아웃 파일의 <head> 섹션에 스크립트를 추가하는 것만으로 모든 준비가 끝납니다.
html
<script defer src="https://cdn.jsdelivr.net/npm/attractivejs"></script>
CSS 애니메이션 적용
네이티브 대화상자는 기본적으로 다소 딱딱하게 나타날 수 있습니다. 하지만 최신 CSS의 @starting-style 속성을 사용하면 자바스크립트 애니메이션 라이브러리 없이도 대화상자가 서서히 나타나거나 크기가 변하는 부드러운 전환 효과를 구현할 수 있습니다.
4. 사용 시점 결정: Turbo Confirm vs Custom Dialog
- Turbo Confirm 사용 시기: 관리자 페이지, 내부용 도구, 혹은 프로토타이핑 단계 등 디자인보다 개발 속도와 단순함이 최우선인 경우에 적합합니다.
- Custom Dialog 사용 시기: 사용자 대면 서비스, 브랜드 일관성이 중요한 경우, 혹은 삭제 확인 시 사용자에게 데이터의 이름을 명시하여 실수를 방지해야 하는 중요한 액션에 권장됩니다.