HTMX 찍먹하기

Noul·2025년 2월 16일

develop

개요

최근 여러 백엔드 기술을 적용하며 공부할 겸 프로젝트를 하나 만들려고 했는데, 화면단을 어떻게 구성할 것인가에 대한 고민이 있었습니다.

Thymeleaf, React 등을 가볍게 공부한 경험이 있어 찾아보면서 UI를 구성할 수는 있었지만, 다음과 같은 이유로 화면단 기술 선정은 잠시 보류중이었습니다.

Thymeleaf로 진행 시, SEO 최적화 등의 이점은 있겠지만 개인 공부용 프로젝트라 이런 장점보다는 UI를 동적으로 구성하지 못한다는 단점이 더 크게 다가왔습니다.
React(SPA)는 현재 기술에 대한 지식이 얕아서 섣불리 사용하기가 어려웠습니다. 또한, React라는 기술 자체가 러닝커브가 높기 때문에 백엔드를 공부하기 위한 프로젝트에서 프론트에 대한 학습 부담이 너무 높아질 것 같았습니다.

이런 고민을 하던 중, 동적인 UI를 쉽게 구현할 수 있는 HTMX 라는 기술을 알게 되었습니다.

HTMX란

공식 문서에서는 HTMX에 대해 다음과 같이 소개하고 있습니다.

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

htmx is small (~14k min.gz’d), dependency-free, extendable & has reduced code base sizes by 67% when compared with react

요약하면 HTML 속성 만으로 AJAX 요청, WebSocket 연결, SSE 등을 쉽게 다룰 수 있게 해주는 라이브러리입니다.

이를 활용하면 복잡한 코드 없이도 서버와 클라이언트 간의 비동기 상호작용을 구현할 수 있습니다.

이러면 한정된 시간 안에서 백엔드 위주의 공부를 진행하면서도, 일정 수준의 사용자 경험을 갖춘 웹 애플리케이션을 구축할 수 있을 것 같았습니다.

하지만 구글링해보니 국내에는 HTMX에 대한 자료가 거의 없어서 공식문서를 참고하며 직접 정리해 보기로 했습니다.

사용법 간단하게 살펴보기

우선 Spring Boot 프로젝트를 하나 생성했습니다.

그리고 다음과 같이 컨트롤러와 HTML 파일을 작성했습니다.

@Controller
class HtmxController {

    @GetMapping("/")
    fun index(): String {
        return "index"
    }

    @GetMapping("/hello")
    @ResponseBody
    fun callHtmx(@RequestParam name: String): String {
        return "<p>Hello $name!</p>"
    }
}

HTMX는 서버에서 HTML을 직접 받아와 특정 부분을 갈아 끼우는 방식이므로, JSON이 아닌 HTML 조각을 반환합니다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMX를 써보자</title>
    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
</head>
<body>
    <h3>키미노 나마에와</h3>
    <input type="text" id="nameInput" placeholder="이름을 작성해 주세요." />
    <button
        hx-get="/hello"
        hx-target="#response"
        hx-swap="innerHTML"
        hx-vals="js:{name: document.getElementById('nameInput').value}"
        >click!</button>
    <div id="response"></div>
</body>

</html>

저는 간단하게 사용법을 테스트 하기 위해 CDN 방식으로 JS 코드를 불러왔습니다.

<script src="https://unpkg.com/htmx.org@2.0.4"></script>

<button
        hx-get="/hello"
        hx-target="#response"
        hx-swap="innerHTML"
        hx-vals="js:{name: document.getElementById('nameInput').value}"
        >click!</button>

hx-get="/hello" - /hello 엔드포인트로 GET 요청을 보냅니다.
hx-target="#response" - 응답으로 받은 HTML 조각을 id="response"인 <div>에 삽입합니다.
hx-swap="innerHTML" 기존 내용은 제거하고, 새로운 HTML 조각을 삽입합니다.
hx-vals="js:{name: document.getElementById('nameInput').value}" - 입력된 nameInput의 값을 서버로 전달합니다.