네이티브 <dialog> 요소와 Attractive.js로 JavaScript 없이 모달 및 슬라이더 구축하기

Use native dialog with Turbo (and no extra JavaScript) | Rails Designer

작성자
Hotwire Weekly
발행일
2026년 01월 08일
원문 보기
railsdesigner.com

핵심 요약

  • 1 JavaScript 코드를 작성하지 않고 네이티브 <dialog> 요소, Attractive.js, Turbo Frames를 활용하여 모달 및 슬라이더를 구현하는 방법을 소개합니다.
  • 2 단일 <dialog> 요소에 'type' 속성을 동적으로 설정하고 Tailwind CSS를 사용하여 모달과 슬라이더의 고유한 스타일 및 애니메이션을 적용합니다.
  • 3 Attractive.js의 'addAttribute'와 'dialog#openModal' 액션을 통해 복잡한 UI 컴포넌트를 간단하게 제어하며, Turbo Frames로 콘텐츠를 로드합니다.

도입

기존에는 모달이나 슬라이더와 같은 UI 컴포넌트를 구현하기 위해 Stimulus 컨트롤러나 커스텀 JavaScript 코드가 필수적이었습니다. 그러나 이 글에서는 JavaScript를 전혀 사용하지 않고도 이러한 기능을 구축하는 혁신적인 접근 방식을 제시합니다. 네이티브 <dialog> HTML 요소와 최근 공개된 JavaScript-free 라이브러리인 Attractive.js, 그리고 Turbo Frames를 결합하여 개발 복잡도를 줄이면서도 풍부한 사용자 경험을 제공하는 방법을 탐구합니다.

이 방법의 핵심은 단일 <dialog> 요소를 활용하는 것입니다.

기본 설정

  • application.html.erb에 id="overlay"를 가진 <dialog> 요소를 추가하고, 그 안에 tag.turbo_frame id: :modal을 포함합니다.

  • closedby="any" 속성을 통해 다이얼로그 외부 클릭 또는 Escape 키로 닫히는 기능을 활성화합니다.

  • Tailwind CSS 클래스를 사용하여 starting: pseudo-class와 transition-all 속성으로 페이드 및 스케일 애니메이션을 구현합니다.

Attractive.js 통합

  • app/javascript/application.js에 attractivejs를 임포트하여 `dialog

openModal` 액션을 사용할 수 있도록 합니다.

  • link_to 헬퍼에 `data: {action: “dialog

openModal”, target: “#overlay”, turbo_frame: :modal} 속성을 추가하여 모달을 엽니다. 여기서 data-action은 Attractive.js에, data-target은 ` 요소에, `data-turbo-frame`은 Turbo에 콘텐츠 로드를 지시합니다.

모달 및 슬라이더 지원 확장

  • 동일한 <dialog> 요소로 모달과 슬라이더를 모두 지원하기 위해 type 속성을 활용합니다.

  • CSS에서 [&[type=modal]] 및 [&[type=slider]] 셀렉터를 사용하여 각 타입에 따른 고유한 스타일과 애니메이션을 적용합니다.
    • 모달: 중앙 정렬, 스케일 인 애니메이션, 모바일에서는 하단에서 위로 슬라이드 업.
    • 슬라이더: 오른쪽 정렬, 화면 전체 높이, 오른쪽에서 안으로 슬라이드 인.
  • 링크 클릭 시 `data: {action: “addAttribute

type=modal dialog

openModal”, …} 또는 data: {action: “addAttribute

type=slider dialog

openModal”, …}와 같이 addAttribute 액션을 사용하여 `를 열기 전에 `type` 속성을 동적으로 설정합니다. 이 `addAttribute` 액션은 `dialog

openModal` 액션보다 먼저 실행되어야 올바른 스타일이 적용됩니다.

결론

네이티브 `<dialog>` 요소와 같은 브라우저의 강력한 기능을 활용하는 것은 코드를 간결하고 유지보수하기 쉽게 만드는 핵심 전략입니다. `<dialog>`는 포커스 트래핑, Escape 키 처리 등 필수적인 접근성 기능을 기본으로 제공하여 개발 부담을 줄여줍니다. Attractive.js와 Turbo Frames의 조합은 Ruby on Rails 개발에서 JavaScript 의존도를 최소화하면서도 동적이고 사용자 친화적인 UI를 구축할 수 있는 효율적인 방법을 제시합니다. 향후 Invoke Commands API와 같은 브라우저 기능이 더욱 발전하면, Attractive.js의 일부 상호작용 기능도 브라우저 자체적으로 처리할 수 있게 되어 개발 편의성이 더욱 향상될 것으로 기대됩니다.

관련 글들

Rails에서 Turbo Frames와 네이티브 <dialog> 요소를 활용한 비동기 모달 구현

Rails의 Turbo Frames와 HTML의 네이티브 <dialog> 요소를 결합하여 비동기 모달 창을 효율적으로 생성합니다.

10/02 읽어보기 →

Attractive.js 발표: HTML 속성만으로 구현하는 자바스크립트 없는 인터랙티비티 라이브러리

Attractive.js는 별도의 자바스크립트 작성 없이 HTML 데이터 속성만으로 웹사이트에 인터랙티브한 기능을 추가할 수 있는 경량 라이브러리입니다.

10/23 읽어보기 →

JavaScript 없이 모던 브라우저 기능으로 아름다운 확인 대화 상자 구축하기

최신 브라우저의 Invoker Commands, @starting-style, allow-discrete를 활용하여 JavaScript 없이 선언적으로 스타일링된 확인 대화 상자를 구현할 수 있습니다.

12/15 읽어보기 →

JavaScript 없이 Turbo 확인 대화 상자 구현하기: 최신 브라우저 기능 활용

최신 브라우저의 `command`, `commandfor` 속성 및 `<dialog>` 요소를 활용하여 JavaScript 없이 선언적으로 모달 대화 상자를 제어할 수 있습니다.

12/26 읽어보기 →

댓글 0

로그인이 필요합니다

댓글을 작성하거나 대화에 참여하려면 로그인이 필요합니다.

로그인 하러 가기

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!