[Web] HTML 말고 HTMX(HyperText Markup eXtension)

웹페이지를 만드려면 반드시 배워야 하는 언어 중 하나가 바로 HTML(HyperText Markup Language)입니다. HTML은 흰 화면에 텍스트(글자)를 표기하는 마크업 언어 중 하나로 과거 HTTP 통신을 이용하여 큰 텍스트 파일을 주고 받는데 사용되었던 표준 언어였습니다.

 

하지만 현대에는 텍스트보다 더 다양한 데이터를 전송하기를 원합니다. 이를테면 텍스트 보다는 이미지, 비디오, 애니메이션 등 동적인 컨텐츠를 주고 받기를 원하여 이후 HTML 5 버전에서는 이미지, 비디오 전송을 위한 표준 태그가 정의되었습니다. 그럼에도 불구하고, 페이지에 더 많은 효과를 주기 위해 Javascript, jQuery 등을 사용하기도 했죠. 하지만 이들은 너무 배우기 어렵고 무거워서 전문적으로 배우지 않으면 사용하기 어렵다는 단점이 있습니다.

 

 

 

간단한 웹페이지, 백오피스를 만드는데, SPA가 필요할까?

최근에 내가 무언가 홈페이지를 만들겠다거나, 아니면 현재 백엔드 엔지니어인데, 서버 유지보수를 위한 백오피스 내지는 어드민을 개발하고자 하는데 React.js, Vue.js 등 많이 사용되는 라이브러리 내지 프레임워크를 생각하곤 합니다. 하지만 막상 이를 이용하여 백오피스를 개발하면 '이러한 페이지를 만드는데 굳이 이런 복잡한 개념들이 필요한가?' 라고 한 번 쯤은 생각해본 적이 있으신 분들이 계실 겁니다. 보통 우리가 기본적으로 SPA를 배우게 되면 아래와 같은 기술 개념을 익히게 됩니다.

 

• 상태 관리 패턴
• Virtual DOM

이들이 생겨난 배경은 하나의 페이지에 담을 수 있는 컨텐츠에 한계점이 존재하며 여러 페이지를 나눴지만 이는 유지보수가 불편하고 개발의 어려움을 초래하므로 하나의 페이지에 최대한 많은 컨텐츠를 담는 것이 목적이고, 사용자(User)에게 빠른 인터렉션을 제공해주기 위함이라면 그 목적에 부합합니다. 하지만 백오피스나 어드민 같이 이미 그 컨텐츠 양이 정해져 있는 웹페이지의 경우에는 이러한 스택을 사용해야 할 이유가 없겠죠.

 

 

 

HTMX

HTMX는 HTML 언어에서 간단한 attribute 추가만으로 AJAX, CSS Transition, Websocket, HTTP 통신이 가능합니다. 따라서 우리가 간단한 웹페이지 내지 백오피스를 개발하기 위해 상태 관리 패턴 등과 같은 복잡한 기술을 배우지 않고도 템플릿 엔진과 HTMX만 있다면 개발이 가능하다는 것이죠. 

 

https://htmx.org/

</> htmx - high power tools for html

HTMX는 HDA(Hypermedia Driven Application) 기반의 개발 방식으로 기존의 MPA와 SPA에서 더 나은 UX를 만들기 위해 탄생되었습니다. SPA에서는 간단한 HTML 파일 한 개와 여러 Javascript, Typescript 파일로 구성되어 한 페이지에 보다 많은 컨텐츠를 넣고 구성하여 렌더링 시간을 줄이는 등의 장점을 보였고, MPA에서는 여러 HTML 파일을 통해 각 페이지별로 서로 다른 컨텐츠를 개발하여 개발 용이성을 높였습니다.

 

HDA는 웹의 기존 HTML 기능을 확장하여 하이퍼미디어 개발자가 더 강력한 하이퍼미디어 중심적인 상호 기능을 개발할 수 있도록 지원합니다. 따라서 HTMX는 HTML을 이용하여 가능한한 많은 기능(AJAX 등)을 구현하도록 하고, 가능한 프로그래밍 언어를 사용하지 않는 것을 목표로 합니다.

 

 

 

HDA

우리가 기존 MPA, SPA를 이용해 개발을 했을 때는 JSON 데이터를 받아와 이를 다시 렌더링하는 과정을 거쳤습니다. 그러나 HDA는 REST 개념에 따라 두 가지 제약 조건을 가집니다.

 

• 명령형 스크립팅이 아닌 선언적 HTML 내장 구문 사용
• 비하이퍼미디어 형식(JSON, XML 등)이 아닌 하이퍼미디어(HTML 등)로 서버와 상호 작용

따라서 HTMX는 기존의 SPA처럼 JSON으로 서버와 통신한 뒤 이를 HTML로 표현하는 것이 아닌 바로 서버에서 HTML 구문을 받아와 웹 페이지를 개발함으로써 명령형 스크립팅이 아닌 선언적 언어를 사용합니다. 가령 예를 들면 아래와 같습니다.

 

사용자가 버튼을 클릭하여 액션을 취했을 때 그 결과를 "Clicked"로 준다고 가정했을 때 HTMX는 서버 통신 동안 잠시 멈춘 후, 결과를 받아왔을 때 버튼이 사라지고 Clicked가 되는데, 이러한 액션들이 전부 HTML에서 이뤄지게 됩니다.

 

 

HTMX 엔진이 Web Application Server로 데이터를 요청하면 서버는 HTML 코드로 응답합니다. HTMX는 응답 받은 HTML 코드를 DOM에 삽입하는 역할을 하는 것이 바로 HDA 입니다.

 

이러한 HDA 스타일을 지원하는 라이브러리는 여럿 있으며 그 중에서도 HTMX와 같이 사용하면 HDA 접근을 보완할 수 있는 라이브러리는 아래와 같습니다.

• https://hyperscript.org
• https://alpinejs.dev/
• http://vanilla-js.com/ (embedded directly in HTML)

 

 

마치며..

혹시라도 간단한 웹페이지, 백오피스 개발에 SPA를 고려하고 있고, 그들의 높은 러닝 커브에 부담을 가지고 있다면 HTMX는 그야말로 최고의 선택이라고 할 수 있습니다. 우리는 한 가지 문서 파일에 많은 컨텐츠를 필요로 하지 않고, 이미 그 컨텐츠는 정해져 있기 때문입니다. 게다가 이 모든 것을 선언적 구문으로 다 되니.. 좋지 않을 수가..

 

다음 포스트에서는 실제로 HTMX를 어떻게 사용하는지에 대해 알아보겠습니다.