핵심 요약

htmx는 HTML 속성만으로 AJAX·CSS 트랜지션·WebSocket·Server-Sent Events를 선언적으로 다룬다. React·Vue 없이도 모던 UX를 만들 수 있다. 2.0에서 모듈화·폼 직렬화·세부 이벤트 제어가 대폭 개선됐다.

크기: gzip 약 14KB (2.0)
의존성: 없음
학습 곡선: HTML을 알면 1시간
타깃: 서버 렌더링 중심 앱, 관리자 페이지, 블로그, 내부 도구

기본 사용법 — "클릭 → 서버 → DOM 교체"

<button hx-get="/api/counter/increment"
        hx-target="#count"
        hx-swap="innerHTML">
  증가
</button>
<span id="count">0</span>

서버는 JSON 대신 HTML fragment를 반환한다.

// Express 예시
app.get('/api/counter/increment', (req, res) => {
  count++;
  res.send(`<span id="count">${count}</span>`);
});

실전 패턴

1) 인라인 편집

<div hx-get="/user/1/edit" hx-trigger="click" hx-swap="outerHTML">
  김영삼 (클릭하면 수정)
</div>

2) 무한 스크롤

<div hx-get="/posts?page=2"
     hx-trigger="revealed"
     hx-swap="afterend"></div>

3) 검색 자동 완성 (debounce 내장)

<input type="search" name="q"
       hx-get="/search"
       hx-trigger="input changed delay:300ms"
       hx-target="#results">
<div id="results"></div>

4) 폼 제출 — validation과 오류 표시

<form hx-post="/signup" hx-target="#form-wrapper" hx-swap="outerHTML">
  <input name="email" required>
  <button>가입</button>
</form>

서버는 검증 실패 시 에러 메시지를 포함한 폼 HTML을 다시 보낸다. 클라이언트 상태 관리 불필요.

5) Server-Sent Events로 실시간 알림

<div hx-ext="sse" sse-connect="/events" sse-swap="message" id="live"></div>

반응성 강화 — Alpine.js와 조합

htmx는 서버 통신과 DOM 교체, Alpine.js는 가벼운 클라이언트 상태. 두 개를 합치면 SPA 수준 UX를 React 없이 얻는다.

2.0 주요 변경

모듈화: 필요한 extension만 import
Boosted 링크/폼 동작 개선 — history 관리 안정화
HX-Trigger 응답 헤더 기반 custom 이벤트 시스템 강화
폼 직렬화가 FormData 표준에 맞춰 재정비

언제 htmx가 정답인가

서버 렌더링(Rails, Django, Laravel, Phoenix) 기반 앱
관리자 CRUD 페이지
블로그·문서·커뮤니티
팀에 프런트엔드 전문가가 적은 경우

언제 맞지 않나

오프라인 동작·복잡한 클라이언트 상태(캔버스 에디터 등)
모바일 네이티브 수준 인터랙션
React 생태계(라이브러리·디자인시스템) 의존도가 이미 높은 경우

성능 특성

초기 로드: JS 번들이 작아 LCP·FID 유리
요청당 HTML 크기는 JSON+클라 렌더링보다 클 수 있음 → gzip·HTTP/2 전제
서버 렌더링 비용 증가 — SSR 인프라 튜닝 필요

자주 묻는 질문

SEO에 유리한가?

모든 콘텐츠가 서버 HTML이므로 기본이 SEO 친화적이다. SSR 세팅 없이도 검색엔진 색인이 자연스럽다.

React 앱을 완전 이관해야 하나?

부분 도입이 가능하다. 관리자 페이지·새 모듈부터 htmx로 시작해 보는 전략이 현실적이다.

상태가 많은 UI는?

htmx는 "상태는 서버에 있다"는 철학이다. 복잡한 클라이언트 상태가 필요하면 Alpine.js 보조 또는 React가 더 맞다.

htmx 2.0 실전 — JS 프레임워크 없이도 만드는 모던 웹 UX 완벽 가이드