구글 스트피트뷰 기반 실내 라이딩 앱

경로 표고 분석과
스마트 코칭으로
전 세계를 실내에서 주행하세요

모바일 최적화 Google Maps·Street View로 몰입감을 주고, 실제 도로를 기반으로 경로를 계산하며, 경사 기반 로컬 코칭과 TTS로 라이딩을 안내합니다.

Android 앱 다운로드기능 보기
제작 프로모션 영상 · 세로 화면 최적화 (rider.mp4)
Android App
Ride the World 앱 아이콘 — 지구본 뒷바퀴 자전거

Ride the World
Indoor Cycling

패키지명 fitness-pro-mobile-gis — 장소 검색·출발/도착/경유(최대 3)·경로 스왑부터 Street View 연동 주행, 고도 프로필, 코칭·TTS까지 한 흐름으로 제공합니다. 웹(PWA)과 Capacitor 기반 Android 빌드(com.liveonsoft.cycle)를 지원하며, Vercel에 SPA와 Serverless API로 배포할 수 있습니다.

  • 지도·거리뷰: Google Maps / Street View (roadmap·hybrid, 풀스크린·미니맵·커버리지 레이어)
  • 경로·검색·고도: OSRM(cycling/foot), Nominatim, Open-Elevation — Google 의존은 지도·Street View로 한정
  • Street View: 더블 버퍼·점진 로딩·prefetch·캐시 우선, 실내 파노 필터 및 커버리지 안내
  • 코칭: 경사→저항 규칙 + phraseManifest + 브라우저 TTS (Gemini 등 외부 LLM 미사용, 무료·오프라인 대응)
  • 부가: My Routes(최대 5)·교통 레이어·Dropbox MP3 배경음·코칭/배경음 토글
Street View + 표고

Street View + 표고

1 / 5 — 실제 기기 캡처

핵심 구현 사양

개발 보고서 기반 핵심 기능

2026년 3월 개발 완료 보고서 기준—WEB GIS, Street View 시뮬, 로컬 코칭·TTS, PWA·Android까지.

OSRM 경로 탐색

자전거·도보 프로필로 경로 계산(Vercel Serverless 프록시), 2m 보간·폴리라인·거리·시간 표시.

Nominatim 검색

장소 검색·역지오코딩, 최근 검색 5건 저장. 결과를 지도 중심·마커에 반영.

Street View 주행 품질

더블 버퍼·점진 로딩·400m prefetch, RUNNING 중 불필요한 getPanorama 호출 제거(Phase 설계).

고도 프로필 (Recharts)

Open-Elevation로 경로당 샘플링·캐시, AreaChart와 시뮬레이션 위치 ReferenceLine 동기화.

로컬 AI 코칭 + TTS

경사도→저항 밴드·phraseManifest·예측 코칭(21스텝 주기). 브라우저 Speech Synthesis, 외부 LLM 없음.

Ride the World 앱 아이콘

주행 시뮬레이션

10~100km/h, 재생/일시정지/정지, 3-2-1 카운트다운 후 자동 시작, 완주 시 TTS 안내.

반응형 패널

접이식 검색·경로·고도·히스토리 패널로 지도 가독성 확보, 풀스크린 대응.

My Routes

현재 경로 최대 5개를 localStorage에 저장·로드·삭제.

PWA · Capacitor · 배포

manifest·Service Worker, Android(appId com.liveonsoft.cycle), Vercel 정적 SPA + /api 라우트.

실제 앱 화면

세로 · 가로 캡처 갤러리

휴대폰에서 촬영한 지도·위성·Street View·표고·My Routes 등 화면을 그대로 모았습니다. 세로 UI는 한 손 조작에 맞춘 패널 구성, 가로 UI는 넓은 지도와 경로 확인에 유리합니다.

세로 (Portrait)

위성 전체 (세로)
위성 전체 (세로)
위성 + 경로 (세로)
위성 + 경로 (세로)
경로 설정 패널 (세로)
경로 설정 패널 (세로)
표고 패널 (세로)
표고 패널 (세로)
도로 지도 + 경로 (세로)
도로 지도 + 경로 (세로)
지도 위치 지정
지도 위치 지정
Street View + 표고 (세로)
Street View + 표고 (세로)
위성 + 커버리지 (세로)
위성 + 커버리지 (세로)

가로 (Landscape)

도로 지도 — 넓은 시야
도로 지도 — 넓은 시야
지도 + 경로 패널 (가로)
지도 + 경로 패널 (가로)
경로가 강조된 지도
경로가 강조된 지도
경로 뷰 / 진행
경로 뷰 / 진행
장소 검색
장소 검색
위성 + 경로
위성 + 경로
위성 — 출발·도착 설정
위성 — 출발·도착 설정
위성 — 경유 포함 경로
위성 — 경유 포함 경로
거리뷰 커버리지 레이어
거리뷰 커버리지 레이어
Street View 전체 화면
Street View 전체 화면
Street View + 지도 분할
Street View + 지도 분할
My Routes 목록
My Routes 목록

사용 흐름은 사용자 상세 가이드와 함께 보시면 이해에 도움이 됩니다.

Tech Stack

기술 스택

본 페이지는 Next.js로 운영되며, 아래는 제품(Cycle Simulator / Ride the World) 기준 스택입니다.

React 18 · TypeScript 5Vite 5 · Tailwind CSS 3Google Maps JS (지도·Street View)OSRM · Nominatim (Vercel API 프록시)Open-ElevationRecharts · Lucide ReactCapacitor 8 · AndroidPWA (manifest · SW)

사용자 매뉴얼 요약

시작하기 & 제어

앱 화면별 단계 안내는 사용자 상세 가이드와 스크린샷 갤러리에서 확인할 수 있습니다.

경로 설정

텍스트 검색(Nominatim) 또는 지도 클릭으로 출발/도착·경유(최대 3) 설정, 출발·도착 스왑. OSRM으로 자전거·도보 경로를 계산한 뒤 Go.

시뮬레이션 제어

재생·일시정지·정지, 속도 10~100km/h. Go 후 3→2→1→Start! 카운트다운, 동일 입력이면 경로 재요청 없이 시뮬만 재시작. Street View 풀스크린·미니맵·교통 레이어 토글.

코칭·고도·미디어

경사 기반 로컬 멘트·TTS, 코칭/배경음 on/off. Open-Elevation 기반 고도 차트 커서가 주행 위치와 동기화. 선택 시 Dropbox MP3 플레이리스트 랜덤 재생(페이드 인/아웃).

Ride the World 앱 아이콘

Ride the World로
실내에서 전 세계를 달리세요

웹(PWA)으로도 이용할 수 있으며, Android는 Capacitor 빌드 패키지 com.liveonsoft.cycle 기준입니다. 스토어 공개 시 아래 링크가 활성화됩니다.

Google Play에서 다운로드

실시간 GPS 추적은 미구현이며, 가상 주행(시뮬레이션) 중심입니다. 스토어 식별자가 다르면 링크의 id= 값만 실제 패키지명으로 바꿔 주세요.