SlotIn
피트니스 예약 관리 시스템
헬스장·필라테스·요가 스튜디오를 위한 올인원 예약 관리 플랫폼. 오너·트레이너·회원 3계층 권한 구조로 각 역할에 최적화된 UX를 제공합니다.
SPEC
기술 스펙
카테고리
웹 애플리케이션
업종
피트니스 · 스포츠 · 헬스케어
개발 언어
HTML5 CSS3 JavaScript (ES6+)
데이터베이스
localStorage (클라이언트 사이드 데모)
프론트엔드
Vanilla JS Chart.js CSS Grid / Flexbox
백엔드
없음 (프론트엔드 데모)
클라우드 / 배포
Vercel (GitHub 자동 배포)
반응형
PC · 태블릿 · 모바일 완전 대응
FEATURES
핵심 기능
3계층 권한 시스템
오너 · 트레이너 · 회원 각 역할별 전용 대시보드. 로그인 시 역할에 맞는 화면으로 자동 분기.
드래그 스케줄 관리
주간 캘린더 뷰에서 수업 블록을 드래그로 이동·조정. 트레이너별 색상 구분으로 직관적 관리.
예약 · 회원권 관리
회원별 잔여 횟수 실시간 차감. 예약 확정 · 대기 · 취소 상태 관리. 회원권 만료 알림.
매출 · 통계 대시보드
월별 매출 추이, 회원 유형별 분포, 수업별 예약률을 Chart.js 기반 인터랙티브 차트로 시각화.
회원 관리
회원 등록 · 수정 · 검색. 출석 이력, 결제 내역, 메모 관리. 회원별 상세 프로필 페이지.
알림 · 공지 시스템
수업 변경 · 취소 시 알림 생성. 오너가 전체 공지 등록 시 회원 화면에 즉시 반영.
HIGHLIGHTS
주요 특징
단일 코드베이스, 3가지 UX
하나의 HTML/CSS/JS 프로젝트 안에서 오너·트레이너·회원 세 역할의 완전히 다른 UI를 구현. 별도 서버 없이 localStorage 기반으로 동작하는 완성도 높은 프론트엔드 데모.
실제 SaaS 수준의 UI 완성도
사이드바 GNB, 반응형 테이블, 모달 다이얼로그, 토스트 알림, 스켈레톤 로딩 등 실제 서비스에서 사용되는 UI 컴포넌트를 순수 Vanilla JS로 구현.
Chart.js 기반 데이터 시각화
매출 바 차트, 회원 도넛 차트, 예약률 라인 차트 등 다양한 차트 유형을 활용. 필터 조작 시 차트 데이터가 실시간으로 업데이트.
모바일 완전 반응형
사이드바가 모바일에서 오버레이 드로어로 전환. 테이블이 카드 형태로 재배치. 터치 친화적 버튼 크기 및 간격 적용.
ABOUT
상세 설명
SlotIn은 소규모 피트니스 스튜디오 운영자가 별도의 고가 SaaS 솔루션 없이도 예약·회원·매출을 한 곳에서 관리할 수 있도록 기획된 웹 애플리케이션입니다. 헬스장, 필라테스 스튜디오, 요가 센터 등 1인 또는 소수 트레이너가 운영하는 공간을 주요 타깃으로 합니다.
오너는 전체 매출 현황과 회원 통계를 대시보드에서 한눈에 파악하고, 트레이너는 자신의 수업 스케줄과 예약 현황을 관리하며, 회원은 원하는 수업을 예약하고 잔여 횟수를 확인할 수 있습니다. 세 역할이 동일한 시스템 안에서 유기적으로 연결되어 운영 효율을 극대화합니다.
백엔드 없이 순수 프론트엔드만으로 구현된 데모 버전이지만, 실제 서비스 수준의 UI 완성도와 인터랙션을 갖추고 있어 클라이언트에게 기능 시연 및 커스터마이징 방향을 제안하는 용도로 활용하기에 최적화되어 있습니다. 실제 백엔드(Node.js, Firebase 등) 연동 시 즉시 서비스 가능한 구조로 설계되었습니다.
이런 웹앱, 저도 갖고 싶다면?
SlotIn과 유사한 예약 관리 시스템, 또는 완전히 새로운 웹앱을 제작해 드립니다.