React, Vue 없이도 웹 개발이 가능하다고? htmx 찍먹 가이드 🚀

 

안녕하세요! WoodyCode입니다. 🚀

 

웹 개발을 하다 보면, 참 다양한 프로젝트를 마주하게 되죠? 그중에서도 특히 짧게는 며칠, 길게는 몇 주 정도만 운영되는 '일회성 웹사이트'를 만들 일이 꽤 자주 생깁니다.

예를 들면, 회사에서 갑자기 진행하는 반짝 팝업 스토어 홍보 페이지, 간단한 이벤트 경품 응모 시스템, 혹은 딱 한 달만 쓸 사내 예약 페이지 같은 것들이죠.

그럴 때마다 여러분은 어떻게 하시나요? 혹시 관성적으로 React나 Vue 프로젝트부터 생성하고 계시진 않나요? 🤔

물론 익숙한 도구가 편하긴 하지만, 문득 이런 생각이 듭니다. "단순한 화면 몇 개에 가벼운 상호작용뿐인데, 굳이 수십 MB의 자바스크립트 번들과 복잡한 빌드 도구가 필요할까?" 배보다 배꼽이 더 크다는 느낌?

 

그런 고민을 하던 중, X(트위터)와 GeekNews에서 눈이 번쩍 뜨이는 기술을 발견했습니다. 바로 htmx입니다. 프론트엔드 프레임워크 없이 오직 HTML 속성만으로 현대적인 웹 개발이 가능하다니, 정말 매력적이지 않나요?

이번 글에서는 htmx에 대해 '찍먹'해보고, 일회성 웹 개발을 더 가볍고 빠르게 만들어줄 실무 활용 예시까지 정리하는 시간을 가져보겠습니다.

---

목차 📌

1. htmx란 무엇인가? (핵심 개념 및 특징)
2. htmx vs 현대 프레임워크 (비교표)
3. htmx, 왜 주목받는가? (장점 및 사용 예시)
4. 개발자 시사점: 우리는 무엇을 준비해야 할까?
5. 마치며 & 3줄 요약

---

1. htmx란 무엇인가? (핵심 개념 및 특징)

기존의 웹 페이지는 링크(<a>)나 폼(<form>)을 통해서만 서버와 상호작용하고, 그 결과로 페이지 전체를 새로고침하는 방식이였습니다.

하지만 htmx를 사용하면 어떤 HTML 요소에서도, 어떤 이벤트(클릭, 변경, 호버 등)를 통해, AJAX 요청을 보낼 수 있습니다.

그리고 서버로부터 받은 HTML 조각을 페이지의 특정 부분에만 갈아끼울 수 있게 됩니다. 이 모든 것이 자바스크립트 코드를 한 줄도 쓰지 않고, 오직 HTML 속성으로만 가능합니다! 

✅ htmx의 4가지 핵심 속성

• hx-get (or hx-post, etc.): 요청을 보낼 URL과 HTTP 메서드를 정의합니다.
• hx-trigger: 어떤 이벤트에서 요청을 보낼지 결정합니다. (기본값은 클릭)
• hx-target: 서버로부터 받은 응답(HTML 조각)을 갈아끼울 요소를 지정합니다.
• hx-swap: 응답을 어떻게 교체할지 정의합니다. (innerHtml, outerHtml, etc.)

---

2. htmx vs 현대 프레임워크 (React/Vue)

그렇다면 htmx는 우리가 알던 React나 Vue와 어떻게 다를까요? 한눈에 비교해 보겠습니다.

특징	htmx	현대 프레임워크 (React, Vue)
철학	HTML의 확장, 서버 중심 렌더링	자바스크립트 중심, 클라이언트 측 렌더링
렌더링	서버가 HTML 조각을 생성 및 전송	클라이언트가 데이터(JSON)를 받아 렌더링
상태 관리	주로 서버에서 관리	클라이언트에서 전역/지역 상태 관리
코드 스타일	HTML 속성 중심 (선언적)	자바스크립트 컴포넌트 중심
복잡도	매우 낮음	중간~높음 (빌드 도구, Hook 등)
번들 크기	매우 작음 (약 14KB)	큼
SEO	기본적으로 매우 유리	복잡한 설정 필요 (SSR, SSG)
주 사용처	단순 CRUD, 어드민, 마이크로서비스	복잡한 상호작용, 상태 관리가 중요한 앱

👉 한 줄 요약: htmx는 서버에서 이미 완성된 HTML을 가져와 끼워 넣는 방식이고, React/Vue는 데이터만 가져와 클라이언트에서 UI를 조립하는 방식입니다.

 

---

3. htmx, 왜 주목받는가? (장점 및 사용 예시)

1) 장점

1. 압도적인 간결함
   : React의 useState, useEffect, 그리고 각종 상태 관리 라이브러리가 필요 없습니다. 복잡한 빌드 도구 설정도 필요 없습니다. 그저 CDN 링크 하나만 추가하면 끝입니다! ⭕
2. 빠른 개발 속도
   : HTML만 수정하면 되므로, 프론트엔드 개발자가 없는 팀이나 백엔드 개발자도 쉽게 현대적인 UI를 구축할 수 있습니다.
3. 뛰어난 성능 & SEO
   : 서버에서 이미 렌더링 된 HTML을 받으므로, 초기 로딩 속도가 빠르고 검색 엔진 최적화(SEO)에도 기본적으로 매우 유리합니다.
4. 서버 기술과의 독립성
   : 어떤 백엔드 언어(Java, Go, Python, Node.js 등)를 사용하든 관계없이 HTML 조각만 반환하면 됩니다.

 

2) 사용 예시: 댓글 추가 기능

- React/Vue (클라이언트 중심 렌더링) 방식: 이 방식에서는 클라이언트가 JSON 데이터를 주고받으며 UI를 직접 조립해야 합니다. 코드가 상당히 복잡해지죠.

// React 예시 (간략화)
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function CommentSection() {
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState('');

  // 1. 초기 댓글 데이터 가져오기
  useEffect(() => {
    axios.get('/api/comments').then(res => setComments(res.data));
  }, []);

  // 2. 댓글 제출 이벤트 핸들러
  const handleSubmit = async (e) => {
    e.value.preventDefault();
    // 3. POST 요청으로 새 댓글 데이터 전송
    const res = await axios.post('/api/comments', { content: newComment });
    // 4. 성공 시 클라이언트 상태 업데이트 (UI 리렌더링 유발)
    setComments([...comments, res.data]);
    setNewComment('');
  };

  return (
    <div>
      {/* 5. 댓글 목록 렌더링 */}
      <ul id="comment-list">
        {comments.map(comment => (
          <li key={comment.id}>{comment.content}</li>
        ))}
      </ul>
      {/* 댓글 폼 */}
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          value={newComment} 
          onChange={(e) => setNewComment(e.target.value)} 
          placeholder="댓글을 입력하세요..." 
        />
        <button type="submit">등록</button>
      </form>
    </div>
  );
}

 

 

- htmx 방식: htmx를 사용하면 이 모든 과정이 HTML 속성 몇 개로 축소됩니다. 자바스크립트 코드는 단 한 줄도 필요 없습니다!

HTML

<form hx-post="/api/comments" hx-target="#comment-list" hx-swap="beforeend">
  <input type="text" name="content" placeholder="댓글을 입력하세요..." />
  <button type="submit">등록</button>
</form>

<ul id="comment-list">
</ul>

• 설명:
  1. 사용자가 폼을 제출하면 hx-post="/api/comments" 속성에 의해 자동으로 AJAX POST 요청이 서버로 전송됩니다.
  2. 서버는 요청을 받고 새 댓글을 DB에 저장한 후, 새 댓글에 대한 HTML 조각(<li>새로운 댓글 내용</li>)만 결과로 반환합니다.
  3. htmx는 응답으로 받은 HTML 조각을 hx-target="#comment-list"로 지정된 요소의 hx-swap="beforeend"(내부 마지막) 위치에 자동으로 삽입합니다.

👉 자바스크립트 상태 관리나 리렌더링 로직 없이 오직 HTML 속성만으로 동일한 기능을 구현할 수 있습니다. 백엔드 개발자는 JSON 대신 HTML 조각을 반환하도록 API를 작성하면 되므로, 프론트엔드와 백엔드의 커플링도 줄어듭니다.

---

4. htmx 초간단 로컬 테스트 가이드 🛠️

개발 서버(Node.js, Python 등)를 띄우는 것이 정석이지만, 여기서는 가장 직관적으로 코드 작동 원리를 이해할 수 있도록 아주 단순한 방법으로 진행해 보겠습니다.

준비물

• 텍스트 에디터 (VS Code, 메모장 등)
• 웹 브라우저 (Chrome, Edge 등)

 

1️⃣ 프로젝트 폴더 및 파일 생성

컴퓨터에 새로운 폴더를 하나 만들고 (예: htmx-test), 그 안에 아래 2개의 파일을 생성해 주세요.

1. index.html: 메인 페이지
2. clicked.html: 버튼을 클릭했을 때 가져올 HTML 조각

 

2️⃣ clicked.html 작성 (가져올 데이터)

먼저, 버튼을 클릭했을 때 보여줄 간단한 HTML 조각을 작성합니다.

HTML

<p style="color: blue; font-weight: bold;">
  짠! 서버(사실은 로컬 파일)에서 가져온 새로운 내용입니다.
</p>

 

3️⃣ index.html 작성 (htmx 설치 및 사용)

이제 메인 페이지를 작성합니다. 여기서 htmx 라이브러리를 불러오고, 핵심 속성을 사용해 버튼에 기능을 부여할 것입니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>htmx 초간단 테스트</title>
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
</head>
<body style="padding: 20px; font-family: sans-serif;">

    <h1>htmx 찍먹 테스트</h1>
    <p>아래 버튼을 클릭해 보세요.</p>

    <button hx-get="clicked.html" 
            hx-target="#result" 
            style="padding: 10px 20px; cursor: pointer;">
        내용 가져오기
    </button>

    <hr>

    <h3>결과 화면:</h3>
    <div id="result" style="border: 1px solid #ccc; padding: 15px; min-height: 50px;">
        버튼을 클릭하면 여기에 내용이 나타납니다.
    </div>

</body>
</html>

 

4️⃣ 테스트 실행 및 확인

1. 텍스트 에디터에서 작성한 index.html 파일을 웹 브라우저로 엽니다. 
2. 페이지가 로드되면 "내용 가져오기" 버튼을 클릭해 보세요.
3. "결과 화면:" 아래의 박스 내용이 clicked.html에 작성한 파란색 글씨로 바뀌는 것을 확인하실 수 있습니다! 

👉 브라우저 개발자 도구(F12)의 Network 탭을 열고 버튼을 클릭해 보세요. 자바스크립트가 아닌 HTML 요청이 발생하고, 그 응답으로 HTML 조각을 받아와서 화면의 일부만 업데이트하는 것을 볼 수 있습니다.

---

여러분은 htmx에 대해 어떻게 생각하시나요? 댓글로 자유롭게 의견을 남겨주세요! 다음에 더 유익한 소식으로 찾아오겠습니다. 감사합니다! 🚀