CASE STUDY
HOBBYSEO
지도 기반 취미 클래스 예약 플랫폼
Overview
프로젝트 개요
카카오맵 위치 검색으로 주변 취미 원데이클래스를 찾고 예약할 수 있는 O2O 플랫폼 웹사이트.
Background
내 주변 취미 클래스를 지도에서 찾다
취미·공예 원데이 클래스는 대부분 지역의 소규모 공방과 개인 강사가 운영해, 수요자가 "내 주변에 어떤 클래스가 있는지"를 한눈에 파악하기 어렵습니다. HOBBYSEO는 이 정보 비대칭을 해소하기 위한 지역 기반 취미 클래스 중개(O2O) 플랫폼입니다.
이용자는 지도에서 위치를 탐색해 관심 클래스를 예약하고, 공방·스튜디오는 자신의 클래스를 직접 등록·노출합니다. O2O Mate는 서비스 기획 검토부터 지도 홈·목록·상세 화면, 예약/찜 퍼널, 파트너 등록형 데이터 구조, 카카오맵 연동까지 플랫폼 전반을 설계·구축했습니다.
Approach
지도 탐색과 등록형 데이터 구조
위치 기반 탐색을 축으로 설계한 서비스
클러스터 지도 홈
카카오맵을 전면에 배치하고 밀집한 클래스를 숫자 클러스터 마커로 묶어 표시합니다. 상단 검색창으로 지역·키워드를 탐색하고, 우측 사이드바 카드 리스트로 지도와 목록을 동시에 훑습니다.
취미찾기 목록
전체 클래스를 카드형 리스트로 제공하고 결과 건수를 노출합니다. 썸네일·업체명·소개·'자세히 보기' 버튼으로 목록에서 상세로 자연스럽게 연결됩니다.
클래스 상세 · 예약 퍼널
대표 이미지 슬라이더와 기본정보(기본 가격, 인원별·수량별 차등 단가, 장소, 운영시간)를 정리하고, 수강신청하기·찜하기 버튼을 상단에 고정 배치했습니다.
실시간 운영상태 반영
파트너 운영 상태에 따라 예약 버튼이 동적으로 바뀝니다. 정상 운영 시 파란 '수강신청하기', 휴강 시 회색 '휴강중입니다' 비활성 버튼으로 예약 불가 클래스의 신청 혼선을 사전에 차단합니다.
Screen 01
클러스터 지도 홈
첫 화면은 카카오맵을 전면에 배치하고 지역별로 밀집한 클래스를 숫자 클러스터 마커로 묶어 표시합니다. 상단 검색창으로 지역·키워드 탐색이 가능하며, 우측 사이드바에는 썸네일·제목·요약을 담은 클래스 카드가 리스트로 노출되어 지도와 목록을 함께 살펴볼 수 있습니다.
카카오맵 기반 클러스터 지도 홈 — 숫자 마커로 밀집 클래스를 묶고 우측 사이드바 카드 리스트로 지도와 목록을 동시에 탐색 (hobbyseo.co.kr)
취미찾기 목록 — '검색 결과 : 54개'처럼 건수를 노출하고 도자기·위빙·캔들·주짓수 등 부산 지역 공방을 카드형 리스트로 제공
Screen 02
클래스 상세 · 예약 퍼널
상세 페이지는 대표 이미지와 함께 기본정보(기본 가격, 인원별·수량별 차등 단가, 장소, 운영시간, 최대 수강 인원)를 정리해 보여 줍니다. 핵심 액션인 수강신청하기·찜하기 버튼을 상단에 고정 배치했고, 하단은 상세내용·강사진 소개·자주 묻는 질문·환불 정책 탭 구조로 정보를 계층화했습니다. 수량 구간별 단가(예: 10개 구매 시 1개당 37,000원)도 화면에서 바로 확인할 수 있습니다.
클래스 상세 — 기본정보와 수강신청하기·찜하기 버튼, 상세내용·강사진·FAQ·환불 정책 탭 구조
수량 구간별 차등 단가(10개·15개 구매 시 1개당 가격)를 노출하는 상세 페이지 — 운영시간·최대 수강 인원까지 함께 표기
실시간 운영상태 반영 — 휴강 시 회색 '휴강중입니다' 비활성 버튼이 노출되어 예약 불가 클래스의 신청을 사전에 차단
Tech
카카오맵 API 위에 얹은 등록·예약 구조
HTML·CSS·JavaScript 프런트엔드에 PHP·MySQL 백엔드를 얹고, 위치 기반 핵심 경험은 카카오맵 API로 구현했습니다. 국내 주소·행정구역 데이터에 최적화되고 클러스터링을 기본 지원하는 지도 API는 '주변 취미 찾기'라는 서비스 정체성을 가장 안정적으로 표현하는 선택이었습니다. 데이터는 파트너가 클래스를 직접 등록하고 가격·인원·운영시간·운영상태를 갱신하면 목록·상세·지도 마커에 즉시 반영되는 등록·예약 중심 구조로 설계했습니다.
Design System
관찰된 컬러 팔레트
블루 계열 액션 컬러와 그린 보조 컬러가 지도·목록·상세 전반의 예약 동선을 안내합니다. 아래 스와치는 실제 구축된 화면에서 관찰한 대표 색상입니다.
브랜드 컬러 (화면 관찰 기준)
Result
지도 위에서 사업자와 수요자를 직접 연결
O2O Mate는 기획 검토부터 화면 설계, 예약/찜 퍼널, 파트너 등록형 데이터 구조, 카카오맵 연동까지 플랫폼을 통합 구축해, 지역 소규모 취미 사업자와 수요자를 지도 위에서 직접 연결하는 O2O 예약 서비스를 완성했습니다. 위치 기반 탐색·차등 가격·실시간 운영상태 반영을 결합한 이 구조는 다른 지역 밀착형 중개 플랫폼으로도 확장 가능한 레퍼런스로 남았습니다.
같은 카테고리의 다른 프로젝트
