HTMX란 무엇인가?
- 하이퍼미디어 지향 라이브러리: Carson Gross는 HTMX를 하이퍼미디어(링크 및 폼) 개념을 일반화한 프론트엔드 라이브러리로 설명합니다. 이는 어떤 HTML 요소든 이벤트에 반응하여 HTTP 요청을 발행하고, 서버로부터 받은 HTML을 DOM의 특정 위치에 삽입할 수 있도록 합니다.
- 속성 기반 선언적 방식: HTMX는
hx-get,hx-post,hx-target,hx-swap등과 같은 HTML 속성을 사용하여 기능을 정의합니다. 이는locality of behavior개념을 따르며, 개발자가 코드 소스에서 요소의 동작을 직관적으로 파악할 수 있게 합니다. - HTTP 동사 확장: 표준 HTML이 GET과 POST만 지원하는 것과 달리, HTMX는 PUT, PATCH, DELETE와 같은 HTTP 동사를 사용할 수 있도록 확장하여 더 풍부한 상호작용을 가능하게 합니다.
- 낮은 학습 곡선 및 강력한 기능: HTMX는 개념적으로 단순하지만, 무한 스크롤, 실시간 검색 등 복잡한 UI 패턴을 적은 코드로 구현할 수 있는 높은
power-to-weight ratio를 제공합니다.
Drupal에서의 HTMX 통합
- 기존 Ajax API 대체: Drupal 커뮤니티의 주요 목표는 jQuery에 의존하는 기존 Ajax API를 HTMX 기반의 새로운 서브시스템으로 대체하는 것입니다. 이는 코드 복잡성을 줄이고, 페이지 로드 시간을 단축하며, 유지보수를 간소화할 것입니다.
- 개발자 경험 개선: 기존 Ajax API가 복잡하여 사용을 꺼리는 개발자들이 많았으나, HTMX의 단순하고 선언적인 접근 방식은 개발자들에게 더 강력하고 쉬운 툴킷을 제공할 것으로 기대됩니다. CSS 셀렉터를 활용한 타겟팅 기능은 기존 ID 기반 방식보다 유연성을 높입니다.
- BigPipe 통합: BigPipe는 Drupal에서 널리 사용되는 기술로, 기존 Ajax API의 JavaScript를 사용하여 동적 콘텐츠를 처리했습니다. Shawn Duncan은 BigPipe의 프론트엔드 부분을 HTMX로 전환하는 작업이 진행 중이며, 이는 Ajax API Deprecation의 중요한 단계라고 언급했습니다.
- 점진적 도입 및 기여: Drupal 11.2부터 HTMX 라이브러리가 코어에 포함되어 개발자들이 직접 HTMX 속성을 사용하여 동적 기능을 추가할 수 있습니다. 향후
pound HTMX키를 통해 더 추상화된 API를 제공하여 일반 Drupal 개발자들이 쉽게 활용할 수 있도록 할 예정입니다. 커뮤니티는 현재 코드 검토와 테스트, 그리고 향후 병렬적인 기능 개발에 기여할 사람들을 찾고 있습니다.
Hotwire Turbo와의 비교
- 철학적 차이: Carson Gross는 Hotwire Turbo가 HTMX보다 고수준의 라이브러리이며 더 많은 “마법”을 포함한다고 설명합니다. 반면 HTMX는 더 저수준으로, 하이퍼미디어 컨트롤의 일반화에 초점을 맞추어 더 명시적이고 조합 가능한 기능을 제공합니다.
- 유연성: HTMX는 단일 파일로 구성되어 어떤 백엔드 시스템에서도 쉽게 통합될 수 있으며, 특정 프레임워크에 얽매이지 않고 웹 플랫폼의 이벤트 시스템을 활용하여 유연성을 극대화합니다.