Mytrip

내 이동 기록을 지도 위 애니메이션 영상으로 만듭니다. 브라우저 안에서 전부 처리되고, 파일은 어디에도 올라가지 않습니다.

▶ 바로 써보기 · English · 한국어

_{위 영상과 이미지는 저장소에 포함된 가상의 샘플 여행 데이터로 만든 것입니다.}

무엇을 하나요

Google 지도 타임라인에서 내보낸 Timeline.json을 열면, 기간을 골라 이동 경로가 그려지는 영상(MP4 / WebM)을 만들어 줍니다. 설치할 앱도, 로그인도, 서버도 없습니다.

• 기간 선택 — 날짜 범위, 연도별 바로가기
• 카메라 3종 — 전체 보기 · 따라가기 · 자동 줌(머무르면 당기고 멀리 가면 물러남)
• 진행 속도 — 거리 기준(일정하게) 또는 실제 시간 기준
• 지도 4종 — Ink(다크) · Paper(라이트) · Atlas(컬러) · Offline(네트워크 요청 0)
• 비율/해상도 — 1:1 · 9:16 · 16:9 × 480p · 720p · 1080p
• 튀는 GPS 값 필터 — 주변 시간 안에 도달 불가능한 좌표만 제거하므로 실제 장거리 비행은 남습니다
• 한국어 / English 전환

개인정보

• 타임라인 파일은 브라우저 메모리에서만 읽습니다. 업로드하지 않고, 서버도 없습니다.
• 지도 스타일을 고르면 지도 타일 이미지만 CARTO에서 받아옵니다. 좌표·날짜·제목은 전송되지 않습니다. 첫 사용 시 명시적으로 허용을 받습니다.
• Offline 지도를 고르면 앱이 어떤 네트워크 요청도 하지 않습니다.
• 영상 인코딩은 브라우저의 WebCodecs로 로컬에서 처리됩니다.

타임라인 파일 내보내기

• Android — 설정 → 위치 → 위치 서비스 → 타임라인 → 타임라인 데이터 내보내기
• iPhone — Google 지도 앱 → 프로필 → 타임라인 → ⋯ → 타임라인 데이터 내보내기
• 예전 Takeout 파일 — Records.json, Semantic Location History도 그대로 읽습니다

지원하는 형식: 최신 배열 형식, semanticSegments, 구형 timelineObjects, locations(Records.json), rawSignals.

브라우저

영상 저장에는 WebCodecs가 필요합니다. Chrome, Edge에서 가장 잘 동작하고 Safari 16.4+ 에서도 됩니다. WebCodecs가 없으면 미리보기까지는 되고 저장만 막힙니다.

속도

영상 만들기는 전부 브라우저 안에서 돌기 때문에, 어디에 배포하든 속도는 같습니다. 실제로 영향을 주는 것은 이쪽입니다.

• 창을 앞에 두세요. 탭이 가려지거나 백그라운드면 브라우저가 인코딩을 크게 늦춥니다. 가장 큰 변수입니다.
• MP4(H.264)는 GPU 인코더를 쓸 수 있습니다. WebM(VP9)은 GPU 인코더가 없는 기기가 많아 CPU로 돌아갑니다. 앱이 선택한 조합에 대해 어느 쪽인지 표시해 줍니다.
• 해상도와 길이가 나머지를 결정합니다. 프레임 수 = 30 × (길이 + 1.6초).

참고 측정값(AMD Radeon 780M 내장 GPU, Chrome, 창이 보이는 상태): 1080x1080 기준 프레임당 약 20ms — 6초 영상 228프레임이 타일 내려받기까지 포함해 약 10초. 같은 조건에서 GPU 인코더와 CPU 인코더의 속도 차이는 거의 없었고, GPU 쪽은 그만큼 CPU를 비워 줍니다.

개발

npm install
npm run dev

명령	하는 일
npm run dev	개발 서버
npm test	코어 로직 단위 테스트
npm run typecheck	타입 검사
npm run build	dist/에 정적 빌드

구조:

src/core/    파싱·투영·카메라·렌더·인코딩 (DOM에 의존하지 않는 순수 로직 + 테스트)
src/ui/      화면 문구(i18n)
src/app.ts   상태와 DOM을 잇는 컨트롤러

배포

main에 push하면 GitHub Actions가 빌드해서 GitHub Pages에 올립니다. 저장소 Settings → Pages → Source: GitHub Actions만 한 번 켜 주세요.

저장소 이름이 joongyu01.github.io라서 사용자 사이트로 동작하고, 루트 주소에서 바로 열립니다. Vite의 base가 상대 경로라 저장소 이름을 바꿔 프로젝트 페이지(/<repo>/)로 옮겨도 설정을 고칠 필요가 없습니다.

라이선스

MIT — LICENSE 참고. 지도 타일은 © OpenStreetMap contributors, © CARTO.

같은 아이디어를 먼저 다룬 프로젝트로 mahlernim/google-timeline-visualizer가 있습니다. Mytrip은 코드를 공유하지 않는 별개의 구현입니다.

---

English

Mytrip turns a Google Maps Timeline export into an animated map video, entirely inside your browser.

Drop in Timeline.json, pick a date range, choose how the camera moves, and export an MP4 or WebM. Nothing is uploaded: the file is read in memory, and the only network traffic is map tile images from CARTO — which you can switch off completely with the Offline basemap.

• Three camera modes (whole route, follow, auto zoom), even or real-time pacing
• Four basemaps, five trail colours, 1:1 / 9:16 / 16:9 at 480p–1080p
• Reads every Timeline export shape Google has shipped, including the legacy Takeout ones
• Outlier filter that removes impossible GPS jumps while keeping real long-haul flights
• Korean and English UI

Requires WebCodecs for export (Chrome, Edge, Safari 16.4+).

npm install && npm run dev

MIT licensed. Map tiles © OpenStreetMap contributors, © CARTO.