플러스프로젝트 배경
프라이빗 짐·파티룸·연습실처럼 시간제로 공간을 빌려주는 사업이 늘고 있지만, 소규모 사업장 대부분은 홈페이지가 없거나 오래되어 공간의 분위기를 보여주지 못하고, 예약은 여전히 전화와 DM으로 받고 있습니다. "한 번에 한 팀만 쓰는 프라이빗 짐"이라는 가상의 브랜드를 설정하고, 이런 업종이 갖추면 좋은 예약형 홈페이지의 기준을 보여주기 위해 기획한 데모 프로젝트입니다. 1. 문제점 - 예약 접수가
프로젝트 성과
원페이지 예약 흐름 완성
회원가입 없이 지점 선택부터 날짜·시간, 결제, 입장 QR 발급까지 한 페이지에서 완료되는 예약 동선을 구현. 상단 고정 스테퍼로 진행 단계가 항상 보여 처음 방문한 사용자도 안내 없이 예약을 마칠 수 있습니다.
네이버페이 결제 연동
샌드박스 환경에서 결제창 호출부터 승인 후 복귀 처리까지 결제 전 과정을 연동. 실서비스 전환 시 가맹 키 교체만으로 운영 적용이 가능하며, 방문 시 결제 옵션도 함께 제공합니다.
지도 기반 다지점 탐색 UI
직접 그린 서울 지도에 10개 지점 핀을 배치하고 핀과 지점 카드를 양방향 연동. 지점 데이터만 추가하면 지도 마커와 카드가 자동 생성되어 지점 확장 시 코드 수정이 필요 없습니다.
재방문 시 유지되는 예약 관리
서버 없이 예약 내역이 브라우저에 저장되어 재방문 시 유지되고, QR 재확인과 예약 취소도 가능합니다. 정적 배포만으로 동작해 서버 비용 없이 운영할 수 있는 구조입니다.
접근성·반응형 완성도
모션 최소화 설정 시 애니메이션을 끄고 지도 핀·QR 등에 스크린리더 라벨을 제공. 모바일은 가로 슬라이더, PC는 지도 높이에 맞춘 리스트로 전환되는 반응형 동선을 설계했습니다.
핵심 기능
지도 기반 지점 탐색
직접 그린 서울 지도에서 핀을 눌러 지점을 선택. 핀에 마우스를 올리면 지점 카드가 하이라이트되며 자동 스크롤되고, 카드에는 요금·평점·시설이 한눈에 표시됩니다.
진행 단계
기획
2026.07.
"한 번에 한 팀만 쓰는 프라이빗 짐" 콘셉트를 설정하고 핵심 과업을 "전화 없이 예약 완료"로 정의. 지점→날짜→시간→확인→결제 5단계 동선과 6개 섹션 정보 구조를 설계했습니다.
프로젝트 상세
1) 포트폴리오 소개 시간제 공간 대여(프라이빗 짐) 예약 서비스 데모 개발 — 한 번에 한 팀만 이용하는 프라이빗 헬스장을 운영하는 소상공인과, 전화 없이 예약하고 싶은 2030 이용 고객을 타깃으로 한 예약형 브랜드 홈페이지입니다. 2) 작업 범위 - 화면 설계, UI/UX 디자인, Front-end 개발 (기획부터 구현까지 단독 수행) - 반응형 웹 (모바일 · 태블릿 · PC 대응)
