삼모스포렉스 모바일 리뉴얼 및 예약시스템 구축

시설 안내부터 코인 결제와 예약 관리까지, 모바일에서 이어지는 이용 경험

SCROLL
클라이언트명
삼모스포렉스 · SAMMO SPOREX
기술
PHP · MySQL · JavaScript · jQuery · jQuery UI · HTML5 · CSS3
프로젝트 유형
스포츠·레저시설 모바일 홈페이지 리뉴얼 · 온라인 예약시스템
담당 범위
모바일 UI 리뉴얼 · 예약·코인 연동 개발 · 예약 운영 관리자 개발
주요 기능
  • 시설·종목 및 이용안내 · 수강신청 접근 · 소식·영상·오시는 길
  • 업장별 예약 상품 · 날짜·옵션·인원 선택 · 결제 코인 계산
  • 코인 충전·사용 내역 · 예약조회·취소·사용 처리 · 관리자 상품·예약 관리
프로젝트 개요
  • 삼모스포렉스의 시설과 종목 정보를 모바일에서 확인하고 예약으로 이어갈 수 있도록 홈페이지를 리뉴얼했습니다.
  • 수영·피트니스·스파·볼링 등 이용 정보와 상담·수강신청, 예약·마이페이지를 모바일 화면의 탐색 흐름에 맞춰 구성했습니다.
  • 회원이 상품과 이용 조건을 선택해 코인으로 결제하고, 예약 확인과 현장 사용·취소까지 관리하는 예약시스템을 구축했습니다.
개발 목표
  • 방문자가 작은 화면에서도 시설과 이용 정보를 찾고 상담·수강신청·예약 메뉴에 쉽게 접근하도록 합니다.
  • 회원의 예약과 코인 이용 내역을 연결하고, 운영자가 상품과 예약 상태를 관리하도록 합니다.
모바일 홈페이지 바로가기

DESIGN SYSTEM

primary Color
secondary Color
text Color
Kor Noto Sans KR
Eng Montserrat
삼모스포렉스 모바일 홈페이지 목업 — 메인과 시설·예약 안내 모바일 화면들을 비스듬히 펼쳐 놓은 모습

MOBILE DESIGN

삼모스포렉스 모바일 메인 화면
삼모스포렉스 모바일 삼모소식 목록 화면
삼모스포렉스 모바일 수영 시설·이용요금·강사 안내 화면
삼모스포렉스 모바일 업장별 예약 선택 화면

시설을 둘러보는 순간부터,
예약과 이용까지 모바일로

여러 시설과 종목을 운영하는 스포츠센터에서는 방문 목적에 따라 필요한 정보가 달라집니다. 시설 소개와 이용안내를 찾는 동선, 회원이 예약과 코인 내역을 확인하는 동선을 정리해 모바일 홈페이지에 담았습니다.

  • 모바일에 맞춘 정보 구성

    시설 사진과 핵심 안내를 중심으로 메인을 정리하고, 상담과 수강신청·이용안내·예약 메뉴로 이동하도록 구성했습니다.

  • 상품 선택부터 코인 결제까지

    업장별 상품을 살펴보고 날짜와 옵션, 인원을 선택하면 필요한 코인을 확인한 뒤 예약하도록 구현했습니다.

  • 온라인 예약과 현장 이용 연결

    예약 내역의 사용·미사용·취소 상태를 구분하고, 현장에서 예약을 확인한 뒤 사용 처리할 수 있도록 연결했습니다.

모바일 리뉴얼과 함께,
예약 운영에 필요한 기능까지

기존 회원·코인 정보를 활용해 모바일 예약을 연결했습니다. 고객이 이용하는 상품 선택과 예약 관리 화면부터 운영자의 상품 등록과 예약 조회까지 하나의 업무 흐름으로 구성했습니다.

시설과 서비스를 보여주는
모바일 메인 리뉴얼

시설 이미지를 활용한 메인 비주얼과 상담·수강신청 영역을 배치하고, 삼모소식·소개 영상·오시는 길을 이어서 구성했습니다. 전체 메뉴에서 종목 소개, 이용안내, 예약, 코인 충전과 마이페이지로 이동하도록 정리했습니다.

업장별 상품 탐색과
이용 조건 선택

예약 상품을 업장별 카테고리로 구분하고 목록에서 상품 이미지와 필요 코인을 확인하도록 했습니다. 상세 화면에서는 상품 안내와 예약 날짜, 옵션, 인원을 선택하며 기본 코인과 옵션 코인에 수량을 반영해 결제 코인을 계산합니다.

코인 충전과
회원 잔액을 연결한 예약

충전 상품과 결제수단을 선택하는 코인 충전 화면을 연결했습니다. 예약 시 회원의 보유 코인을 확인하고, 유료·무상 코인을 구분해 차감하며 예약 내역과 코인 사용 기록을 저장합니다. 코인이 부족하면 충전 화면으로 안내합니다.

예약 상세 조회와
취소·현장 사용 처리

회원이 예약한 상품, 옵션, 수량과 사용 코인을 확인하도록 목록과 상세 화면을 구성했습니다. 예약 상태에 따라 사용·취소 버튼을 표시하고 현장 확인을 위한 사용 처리 기능을 연결했습니다. 예약 취소 시에는 사용한 코인을 반환하고 관련 내역을 기록합니다.

코인·쿠폰의
이용 내역과 유효기간 관리

마이페이지에서 코인 충전·사용 내역과 보유 쿠폰을 확인하도록 구성했습니다. 쿠폰은 사용 여부와 유효기간에 따라 구분하고, 무상 코인은 지급·사용 기록과 유효기간을 관리해 회원의 예약과 혜택 이용 내역을 함께 확인하도록 했습니다.

관리자 상품 등록과
회원별 예약 운영 관리

관리자에서 예약 카테고리와 상품명·설명·이미지·코인 금액·옵션을 등록하고 수정할 수 있도록 구현했습니다. 회원 아이디와 예약일로 예약을 검색하고, 상세 화면에서 상품 정보와 사용·취소 상태, 유료·무상 코인 사용 내역을 확인하도록 구성했습니다.

시설 안내부터 상품 예약, 결제와 회원 관리까지 필요하신가요?
서비스의 이용 방식과 운영 업무에 맞는 모바일 홈페이지를 제작합니다.
지금 웹셀러에 상담하세요.

카카오 채널 카카오 1:1 문의