Show GN: 한국 이커머스 스킨 개발용 정적 보일러플레이트 (HTMX + Vite + TypeScript)

Context

한국 이커머스 플랫폼(cafe24, 고도몰, 메이크샵 등)은 정적 파일 서빙만 지원하여 React 같은 SPA 프레임워크 적용이 어려운 환경이다. 기존 스킨 개발은 jQuery와 Handlebars 기반 레거시 코드로 폴더에 수십 개의 파일이 혼재되고 컴포넌트 재사용이 불가능한 상태다.

Technical Solution

• HTMX 2.0을 활용하여 HTML 프래그먼트 기반 SPA 네비게이션 구현
• Vite 7 개발 서버의 HMR 기능으로 정적 환경에서도 빠른 개발 iteration 지원
• TypeScript 컴포넌트별 독립 번들링으로 코드 구조화와 타입 안전성 확보
• Embla Carousel로 패럴랙스 배너와 상품 캐러셀 기능 구현
• CSS 커스텀 프로퍼티 기반 디자인 토큰 시스템으로 Tailwind 의존성 제거

Impact

홈, 상품 목록, 상품 상세, 게시판, 이벤트, 마이페이지, 주문 내역까지 7개 페이지 템플릿 제공

Key Takeaway

정적 서빙 플랫폼에서도 HTMX의 하이퍼텍스트 기반 접근 방식으로 복잡한 프론트엔드 의존성 없이 모던 개발 경험 제공 가능