W Web Studio · Portfolio 문의하기 →
Reservation · CRM · Admin Dashboard

예약·회원관리·매출분석까지,
업종에 맞춰 만든 작업 사례를 소개합니다.

엑셀과 수기로 흩어진 운영을, 관리자 대시보드 한 화면으로. 회원·강사·관리자 등 사용자 역할별 화면을 분리하고, PC와 모바일 모두에 맞춘 풀스택 웹 시스템을 외주로 개발합니다. 아래는 실제로 구현한 작업 사례입니다.

3역할
회원 · 강사 · 관리자
80
시연용 회원 데이터
998
예약 · 출석 기록
PC + Mobile
반응형 풀스택
Why custom system

엑셀과 카톡으로는 한계가 옵니다.

매출이 늘어날수록 “관리”에 쓰는 시간이 늘어납니다. 예약 누락, 회원 만료 놓침, 매출 정산 — 매일 반복되는 일을 시스템이 대신 처리하도록 구성한 사례를 소개합니다.

예약 관리

전화·카톡 예약을 한 곳으로

회원은 모바일에서 직접 예약, 강사·관리자는 통합 시간표에서 확인. 노쇼·중복·취소 정책까지 자동.

회원 관리

고객 이력 한 명씩 다 보입니다

출석률, 정기권 만료, 결제 이력, 메모까지 — 모든 정보를 회원 한 명에 모아 보고 관리합니다.

매출 · 운영

주간·월간 매출이 한 화면에

결제 추이, 갱신율, 알림(만료 임박·노쇼)까지 대시보드 한 장으로 운영 전체 가시화.

Applicable industries

이런 업종에 그대로 적용됩니다.

포트폴리오는 필라테스 스튜디오로 만들었지만, 예약·회원·정기권이 필요한 모든 업종에 구조 그대로 맞춤 개발이 가능합니다.

🧘

필라테스 · 요가 · 헬스

수업 예약, 수강권, 출석 체크

🏥

병원 · 한의원 · 치과

진료 예약, 환자 차트, 의사 스케줄

💇

미용실 · 네일샵 · 에스테틱

시술 예약, 단골 관리, 디자이너 배정

📚

학원 · 과외 · 코칭

수업 시간표, 학부모 알림, 출결

🧑‍💼

세무사 · 상담소 · 변호사

상담 예약, 사건/케이스 관리

🪑

스터디카페 · 공유오피스

좌석/룸 예약, 멤버십 결제

🛍️

쇼핑몰 · 커머스

주문 관리, 상품 등록, 매출 분석

🏢

사내 업무 시스템

승인 결재, 보고, 직원 관리

Case study · Admin Console

관리자 — 한 화면에 운영 전체.

KPI 4 카드 + 오늘 수업 + 알림 + 매출 차트가 1440px PC 한 화면에 들어옵니다. 회원·강사·시간표·정기권·설정 페이지 모두 같은 디자인 시스템으로 묶여 있습니다.

Dashboard

오늘 한 줄, 매출 한 화면.

첫 KPI 카드는 핑크 그라데이션으로 시선을 잡고, 오늘 수업·알림은 컴팩트 리스트로 정리. 매출 차트까지 스크롤 없이 한 번에 보이도록 설계했습니다.

  • 주간/월간 토글 막대 차트
  • 피크 막대는 진한 핑크로 자동 강조
  • 호버 시 정확 금액 툴팁
관리자 대시보드
Members

75명을 한 테이블에, 필터로 좁혀서.

상태·정기권·정렬 칩으로 “만료 임박”, “정기권 없음”, “출석률 낮은순”을 한 번 클릭에 호출. 행을 누르면 모달이 열려 정기권 발급·메모·탈퇴까지 처리합니다.

  • 엑셀 일괄 등록 + CSV 내보내기
  • 모달 내 기본정보 / 정기권 / 메모 탭
  • 출석률 색상 코드 시각화
회원 관리
Schedule

주간 캘린더 + 강사 필터.

빈 셀 클릭으로 즉시 수업 추가, 시간·날짜 자동 입력. 4주치 자동 생성 버튼으로 고정 스케줄을 한 번에 복제. 수업 블록 클릭 시 예약자 명단·휴강 처리가 한 화면에서.

  • 강사별 컬러 + 칩 필터
  • 수업 유형(개인/듀엣/그룹/체험) 컬러 인코딩
  • 좌측 폼 sticky — 빠른 추가 흐름
시간표 관리
Instructors · Passes · Settings

일관된 페이지 헤더 패턴.

모든 관리자 페이지가 같은 헤더 + 같은 카드 구조를 공유합니다. 새 페이지를 추가해도 디자인이 흐트러지지 않고, 운영자가 배우는 비용이 거의 없습니다.

  • 강사 관리 — 활성/비활성 통계 + 정렬
  • 정기권 — 노출/판매기간/할인 상품 라이프사이클
  • 설정 — 예약/취소 정책 그룹화
강사 관리
정기권 관리
정기권 상품 관리
설정
학원 설정
Case study · Customer App

고객(회원) — 한 손에 들어오는 서비스.

예약 → 출석 → 갱신까지의 라이프사이클을 480px 폭의 모바일에 최적화했습니다. 회원이 직접 예약하니, 매장 전화·카톡 응대가 거의 사라집니다.

Home

핑크 그라데이션 정기권 카드와
원형 진행률 링.

잔여 횟수·만료일을 한눈에. 만료 임박 시 “곧 만료돼요. 연장 혜택 보기” CTA가 자동으로 노출됩니다. 4-그리드 퀵 액션으로 예약·시간표·정기권·출석 진입을 한 번에.

  • 원형 SVG 링 — 잔여율 애니메이션
  • 다음 예약 카드 + 오늘/내일 자동 배지
  • 이번 달 출석률 미니 KPI
회원 홈
시간표
수업 예약
14일 · 종류별 컬러
정기권
정기권 구매
상품 비교 · 결제
예약 내역
예약 내역
취소 가능 시점
출석 현황
출석 현황
월별 + 90일 차트
마이페이지
마이페이지
개인정보 · 탈퇴
Case study · Staff App

직원(강사) — 오늘 일정에 집중.

직원용 화면은 고객 앱과 톤을 분리(블루)해서 “지금 어느 모드에 들어왔는지” 즉시 인지하게 했습니다. 오늘 / 내일 / 이번 주 세 탭으로 시야를 좁혀가며 일합니다.

강사 - 오늘
오늘 — 진행 중인 수업
총 수강생·마감 카운트
강사 - 내일
내일 — 미리 준비
출석 체크 진입 2-탭
강사 - 이번 주
이번 주 — 요일 분포
주간 네비 ← / →
What's included

실제 운영에 필요한 것만, 그대로.

“있어 보이는” 기능 말고, 한 달만 운영해도 분명히 필요해지는 디테일을 채웠습니다.

예약 라이프사이클

예약 → 자동 리마인더 → 출석/지각/결석/노쇼 → 정기권 차감·복원까지 상태 머신으로 관리.

출석 체크

직원이 모바일에서 한 번에 일괄 출석 처리, 회원 출석률 통계에 즉시 반영.

정기권/멤버십

발급·사용·만료·갱신·환불 + 만료 임박 자동 알림으로 갱신 매출 누수 차단.

매출 분석

일/주/월별 막대 차트, 결제 수단(카드·계좌·현금) 분포, 갱신 vs 신규 비율.

알림 시스템

예약 24h/3h 전 리마인더, 노쇼·만료 임박·잔여 부족을 관리자·회원 양쪽에 푸시.

보안 · 권한 분리

JWT 인증, 역할별 접근 제어, 개인정보 AES-256 암호화, 비밀번호 BCrypt 해시 저장.

Tech stack

현대적이지만 검증된 기술 조합.

과시용 신기술 대신, 운영 신뢰성과 추후 유지보수 비용을 함께 고려한 스택으로 작업합니다. 소스 코드 전체를 납품하므로, 이후 다른 개발자가 이어받기에도 부담이 없습니다.

Frontend
  • Next.js (React)
  • TypeScript
  • Tailwind CSS
  • Zustand · React Query
  • 반응형 (PC · 태블릿 · 모바일)
Backend
  • Java 21 · Spring Boot 3
  • Spring Security · JWT
  • JPA / Hibernate
  • RESTful API · Swagger 문서
  • Flyway 마이그레이션
Infra · DB
  • MySQL 8
  • Redis (캐시 · 세션)
  • Docker Compose
  • 다환경 프로파일
  • healthcheck 부팅 순서
Security · Quality
  • AES-256 PII 암호화
  • BCrypt 비밀번호 해시
  • ESLint · Prettier
  • Playwright E2E 테스트
  • 역할별 접근 제어
How we work

5단계로 명확하게 진행됩니다.

처음부터 끝까지 1:1로 소통합니다. 중간 시연으로 결과를 직접 확인하며 진행하므로, “납품 받고 보니 다르더라” 같은 일은 없습니다.

상담 · 견적

요구사항을 듣고 기능 범위 · 일정 · 견적을 무료로 산출해 드립니다.

기획 · 설계

화면 설계서 + 기능 정의서로 만들 시스템의 모습을 글로 먼저 합의합니다.

개발

주간 진행 보고 + 중간 시연. 변경 사항이 있으면 그 단계에서 조정합니다.

테스트 · QA

실제 데이터로 시나리오 테스트. 발견된 이슈는 납품 전 전부 정리합니다.

납품 · 배포

서버 배포 + 소스 코드 + 운영 매뉴얼 + 무상 유지보수 기간 시작.

FAQ

자주 묻는 질문

필라테스 외에 다른 업종도 가능한가요?

네, 포트폴리오는 필라테스로 만들었지만, 예약·회원·정기권 구조가 필요한 모든 업종(병원, 미용실, 학원, 세무사, 스터디카페 등)에 맞춤 개발이 가능합니다. 업종 특수성은 상담 단계에서 같이 정리합니다.

소스 코드도 같이 받을 수 있나요?

네, 모든 소스 코드를 그대로 납품해 드립니다. 이후 다른 개발자에게 유지보수를 맡기시거나, 직접 기능을 추가하실 수 있습니다. “벤더 종속” 없이 사용자 소유입니다.

디자인도 같이 해주시나요?

포트폴리오 수준의 깔끔한 UI 디자인이 작업에 포함됩니다. 별도 디자이너 시안이 있다면 그에 맞춰 개발도 가능하고, 디자인이 처음이라면 비슷한 사례를 보여드리며 함께 정해갑니다.

서버는 어떻게 운영하나요?

클라우드 서버(AWS · 카페24 · NHN 등)에 배포해 운영할 수 있습니다. 배포 대행과 도메인 · SSL 설정까지 함께 진행이 가능하며, 자세한 운영 방식은 상담 단계에서 안내드립니다.

이미 쓰는 시스템에 기능 추가도 가능한가요?

네, 기존 시스템 분석 후 기능 추가·리뉴얼·마이그레이션도 작업합니다. 기존 코드 상태에 따라 작업 범위가 달라질 수 있어 사전 검토가 필요합니다.

납품 후 문제가 생기면 어떻게 하나요?

일정 기간의 무상 유지보수가 포함되며, 그 안에 발견된 버그는 무상으로 수정해 드립니다. 이후 운영 중 발생하는 신규 기능 요청은 별도로 협의해 진행합니다.

Get in touch

이런 시스템을 만들고 싶으시다면,
편하게 문의 주세요.

요구사항이 아직 정리되지 않으셨어도 괜찮습니다. “이런 일을 시스템으로 처리하고 싶다” 정도의 메시지면, 함께 정리해 드립니다. 상담과 견적은 무료입니다.

✓ 상담 · 견적 무료 ✓ 소스 코드 전체 제공 ✓ 무상 유지보수 포함