3 hours ago
1
안녕하세요, 이커머스 쪽에서 백엔드 개발을 하고 있는 개발자입니다!
한국 이커머스는 cafe24, 고도몰 & 샵바이, 메이크샵 같은 플랫폼에서 스킨으로 프론트를 구성하는 경우가 많은데
주로 정적 서빙만 제공하다보니, React 같은 SPA 프레임워크를 사용하기엔 중소기업 규모에서는 어려운 경우가 있었습니다.
jQuery나 Handlebars 기반의 레거시 스택이 아직도 쓰이는 경우도 많고, 파일 구조화가 전혀 안되어있어서 폴더에 몇십개씩 엉망진창으로 코드가 꼬인 경우도 많았습니다. 컴포넌트 재사용이 어려운 경우도 많았구요 ㅠ
그래서 HTML/JS/CSS 파일만으로도 깔끔하게 정리된 이커머스 보일러플레이트를 만들어 보았습니다.
API 관련 코드만 작성해서 붙여서 사용하시면 되는 구조입니다!
기술 스택
- HTMX 2.0 — HTML 프래그먼트 기반 SPA 네비게이션
- Vite 7 — 빌드 도구 + HMR 개발 서버
- TypeScript — 컴포넌트별 독립 번들
- Embla Carousel — 패럴랙스 배너, 상품 캐러셀
- 순수 CSS — Tailwind 없이 CSS 커스텀 프로퍼티 기반 디자인 토큰 시스템
구현된 페이지
- 홈 (배너 캐러셀, 카테고리, 상품 캐러셀, 랭킹, 리뷰, 공지)
- 상품 목록 (카테고리 사이드바, 필터, 그리드 레이아웃)
- 상품 상세 (이미지 갤러리, 옵션 캐스케이드, 수량 조절, 탭, 리뷰 라이트박스)
- 게시판 (공지사항, FAQ, 게시글 상세)
- 이벤트 (이벤트 목록, 카운트다운 타이머, 상세)
- 마이페이지 (회원 등급, 주문 통계, 쿠폰/적립금)
- 주문 내역 (날짜 필터, 주문 카드 리스트)
데모 & 소스
- 데모: https://hebububu.github.io/static-htmx-ecommerce/
- GitHub: https://github.com/Hebububu/static-htmx-ecommerce
라이선스 없이 자유롭게 클론해서 사용하셔도 좋습니다!
피드백이나 개선 아이디어도 환영합니다!
English (US) · 