본문으로 건너뛰기
포트폴리오 목록으로

웹사이트콘셉트 데모

TEMPO — 성수 피트니스·웰니스 스튜디오

심박수 존 인터랙션·주간 시간표 수업 예약·회당 요금 계산기를 갖춘 스튜디오 웹사이트

직접 써보기 이 사례를 참고해 문의하기

4개 페이지 · 실시간 예약시간표·예약·요금 계산

누구를 위해
프로그램 시간표 확인부터 수업 예약과 멤버십 요금 시뮬레이션까지 모바일·PC에서 즉시 완결하려는 피트니스·웰니스 스튜디오
무엇이 문제였나
스튜디오 소개 사이트와 예약 앱이 분리되어 있어, 신규 방문자가 프로그램 강도·시간표·코치·멤버십 단가를 한눈에 비교하고 예약하기 번거로웠습니다.
무엇을 했나
다크 키네틱 무드의 프로그램·심박수 존 소개(Home), 요일별 실시간 수업 예약 드로어(Classes), 코치진 프로필(Coaches), 주간 횟수 기반 회당 요금 계산기(Membership)를 4개 페이지로 구현했습니다.
무엇이 달라지나
시간표 필터링, 수업 예약 및 취소(localStorage["tempo-booked"] 보존), 주간 운동 횟수에 따른 최적 멤버십 추천과 회당 금액 계산이 즉시 작동합니다.
TEMPO — 성수 피트니스·웰니스 스튜디오 체험 화면
가상 브랜드로 만든 체험 화면입니다. 실제 고객 사례가 아닙니다.

어떻게 움직이나

한 건의 일이 처음부터 끝까지 어떻게 흘러가는지 순서대로 보여드립니다.

방문자가 운동 강도를 확인하고 수업 예약과 최적 멤버십 계산을 마치기까지

예시 입력희망 클래스 HIIT · METCON 45 (성수 스튜디오)주간 운동 빈도 주 3~4회 트레이닝

재생을 누르거나 단계를 눌러 순서대로 살펴보세요.

직접 써보기

가상 브랜드로 만든 데모입니다. 주문·예약·상담은 실제로 전송되지 않습니다.

이렇게 해보세요

  1. 상단 스위처에서 01 홈 · 02 클래스 · 03 코치진 · 04 멤버십 4개 페이지를 전환해보세요
  2. 02 클래스 페이지에서 요일·프로그램을 고르고 원하는 수업을 클릭해 예약 드로어에서 예약을 완료해보세요
  3. 04 멤버십 페이지에서 주간 운동 횟수 슬라이더를 좌우로 움직여 회당 최저 단가와 추천 패스가 바뀌는 것을 확인해보세요
체험 가이드 1개 더 보기
  • 01 홈 페이지에서 스크롤하며 가로 방향 스튜디오 공간 투어와 심박수 존 인터랙션을 체험해보세요

화면 크기를 바꿔 PC와 모바일에서 같은 흐름을 확인할 수 있습니다.

https://example.com
TEMPO01 홈 · 스튜디오 프로그램

심박수 존(Zone 1–5) 인터랙션 · 공간 투어 · 오늘의 라이브 클래스

만든 범위

강렬한 오렌지 액센트(#ff5a1f)와 다크 카본 배경(#121110), Big Shoulders Display 타이포그래피, 전용 모션 엔진(motion-tempo.js)을 결합한 피트니스 스튜디오 웹사이트입니다. 스크롤에 반응하는 가로 공간 투어와 심박수 존(Zone 1–5) 가이드, 요일·트랙별 잔여석 확인 및 예약 드로어, 코치진 전문 분야 필터, 그리고 슬라이더 기반 멤버십 회당 단가 계산기까지 실제 예약 전환에 필요한 모든 인터랙션을 갖췄습니다.

구현한 기능

  • 주간 클래스 시간표 필터 & 원클릭 예약 드로어요일·프로그램(HIIT·Strength·Mobility) 필터링과 수업 클릭 시 열리는 예약 확정 드로어 및 LocalStorage 상태 보존
  • 인터랙티브 멤버십 회당 요금 계산기주당 운동 횟수 슬라이더를 움직이면 Drop-in·10회권·Unlimited 중 가장 유리한 플랜과 회당 단가를 실시간 계산
  • 심박수 존(Zone 1–5) & 가로 스크롤 스튜디오 투어운동 강도별 목표 심박수·칼로리 소모 데이터 시각화와 성수 스튜디오 공간 가로 스크롤 쇼케이스
  • 전담 코치진 프로필 & 타이포그래피 와이프 전환코치별 전문 종목·담당 수업 연결 및 페이지 이동 시 대형 TEMPO 타이포그래피 와이프 모션 적용

사용한 기술

Custom Kinetic Motion (motion-tempo.js) · LocalStorage Booking Engine · Interactive Rate Calculator · React 18 / DC Runtime · Horizontal Scroll Track

확인된 사실

페이지 구성
Home · Classes · Coaches · Membership
예약 워크플로우
요일·클래스 필터 · 예약 드로어 · 상태 보존
요금 시뮬레이터
주간 운동 횟수 슬라이더 · 회당 단가 계산
키네틱 모션
심박수 Zone 1–5 · 가로 스크롤 공간 투어

데모의 구현 범위입니다. 실제 고객 성과가 아니며, 브랜드와 인물은 체험을 위해 만든 가상 콘셉트입니다.