라이딩 GPX를 조금 더 쉽게 보고 싶었다
자전거를 타고 나면 GPX 파일이 남는다.
Strava, Garmin, Komoot 같은 서비스에 올리면
거리와 고도, 속도 같은 정보는 잘 보여준다.
그런데 가끔은 반대로 생각하게 된다.
이 GPX 파일을 굳이 어디에 업로드하지 않고,
내 브라우저 안에서만 열어볼 수는 없을까?
특히 집 근처에서 출발하거나
출퇴근 동선이 섞인 GPX라면
파일을 외부 서비스에 올리는 게 조금 찜찜할 때가 있다.
그래서 블로그에 작은 도구를 하나 만들었다.
이 도구가 하는 일
기능은 단순하다.
GPX 파일을 선택하면 브라우저에서 파일 내용을 읽고,
다음 정보를 계산한다.
- 거리
- 획득고도
- 최고고도와 최저고도
- 트랙 포인트 수
- 예상 소요시간
- 코스 난이도 점수
- 카카오 지도 위의 라이딩 경로
파일은 서버로 업로드하지 않는다.
input type="file"로 선택한 파일을
브라우저의 File.text()로 읽고,
DOMParser로 GPX XML을 파싱한다.
덕분에 사용자는 GPX 파일을 사이트에 맡기지 않고도
대략적인 코스 정보를 확인할 수 있다.
내가 공개해도 괜찮다고 판단한 라이딩은
별도로 라이딩 기록에 남기고 있다.
그쪽은 GPX 파일을 기반으로 지도와 로드뷰를 함께 보여주는 쪽에 가깝고,
이번 도구는 사용자가 가진 GPX를 조용히 열어보는 쪽에 가깝다.
둘 다 같은 GPX Route Viewer를 기반으로 하지만
사용 목적은 조금 다르다.
난이도 계산 기준
난이도는 일부러 복잡하게 만들지 않았다.
현재 기준은 다음과 같다.
난이도 점수 = 거리(km) + 획득고도(m) / 5예를 들어 50km 코스에 획득고도 500m라면
점수는 50 + 500 / 5 = 150이 된다.
아주 정교한 운동 생리학 모델은 아니지만,
라이딩 전에 코스 부담을 빠르게 가늠하는 용도로는 충분히 쓸 만하다.
예상 소요시간은 사용자가 입력한 평지 기준 평균속도에
상승고도 보정 시간을 더해서 계산한다.
현재는 상승고도 100m당 약 4분을 더한다.
이 값도 절대적인 정답이라기보다는
“이 코스가 오늘 타기에 가벼운가, 무거운가”를 보는 기준에 가깝다.
지도는 보여주고, 로드뷰는 숨겼다
이미 블로그의 라이딩 기록 페이지에는
GPX 경로를 카카오 지도와 로드뷰로 보여주는 컴포넌트가 있었다.
라이딩 로그 글에서는 좋은 기능이다.
내가 공개하기로 한 코스이고,
글을 읽는 사람이 실제 코스를 따라가듯 볼 수 있으니까.
하지만 로컬로 업로드한 GPX는 다르다.
사용자가 방금 선택한 파일에는
집, 회사, 자주 가는 장소가 들어 있을 수 있다.
그래서 GPX 난이도 계산기에서는
지도 경로는 보여주되 로드뷰는 표시하지 않도록 분리했다.
기존 라이딩 글에서는 로드뷰가 그대로 동작하고,
도구 페이지에서만 로컬 GPX에 대해 로드뷰를 끈다.
이 부분이 이번 작업에서 가장 신경 쓴 지점이었다.
기존 콘텐츠의 경험은 깨지 않으면서,
새 도구에서는 개인정보 노출 가능성을 낮춰야 했기 때문이다.
실제로 공개 라이딩 기록에서는 이런 방향을 계속 실험하고 있다.
이런 글에서는 GPX가 이미 공개용 기록이기 때문에
지도와 로드뷰를 함께 보여주는 편이 더 재미있다.
반대로 GPX 난이도 계산기는
업로드한 사람이 공개를 의도하지 않았을 수도 있는 파일을 다루므로
로드뷰를 꺼두는 쪽이 맞다고 봤다.
GPX Route Viewer를 재사용했다
처음부터 새 지도 컴포넌트를 만드는 대신
기존 GpxRouteViewer를 확장했다.
기존 컴포넌트는 URL로 지정된 GPX를 가져와서
경로, 고도 그래프, 포인트 정보, 로드뷰를 표시하는 구조였다.
이번에는 거기에 “텍스트로 GPX를 전달받는 경로”를 추가했다.
대략 이런 식이다.
window.GpxRouteViewer.loadGpxFromText('gpx-analyzer-viewer', gpxText, {
showRoadview: false,
});이렇게 해두면 도구 페이지에서는
로컬 파일을 읽은 뒤 텍스트를 바로 지도 컴포넌트에 넘길 수 있다.
반면 기존 라이딩 글에서는
이전처럼 gpxUrl을 기반으로 GPX를 불러온다.
하나의 컴포넌트를 유지하면서
공개 라이딩 기록과 로컬 분석 도구를 함께 지원하게 된 셈이다.
로컬 GPX 분석은 생각보다 유용하다
이 도구를 만들고 나니
라이딩 전에 GPX 파일을 한 번 열어보는 일이 꽤 편해졌다.
예를 들어 이런 상황에서 쓸 수 있다.
- 남이 공유한 GPX 파일을 타기 전에 거리와 업힐 부담을 보고 싶을 때
- 출퇴근 코스를 저장해두고 난이도를 비교하고 싶을 때
- 장거리 라이딩 전에 예상 시간을 대략 잡고 싶을 때
- GPX 파일을 외부 서비스에 올리지 않고 간단히 확인하고 싶을 때
특히 획득고도가 숫자로 바로 보이면
코스에 대한 느낌이 확 달라진다.
50km 평지와 50km 업힐 코스는
같은 거리라도 완전히 다른 라이딩이다.
거리만 보고 나갔다가
생각보다 고도가 많아서 고생하는 경우가 있는데,
그런 실수를 조금 줄일 수 있다.
아직 더 해보고 싶은 것들
지금 버전은 일부러 단순하게 만들었다.
하지만 조금씩 더 붙여보고 싶은 기능도 있다.
- 구간별 경사도 표시
- 고도 그래프에서 특정 지점의 거리와 고도 확인
- GPX 안의 시간 정보를 이용한 평균속도 계산
- 난이도 계산 기준을 라이더 성향별로 조정
- 여러 GPX 파일 비교
- 고프로 영상이나 액션캠 프레임을 로드뷰 대신 붙이기
다만 도구가 너무 무거워지면
처음 만들었던 장점이 흐려질 수 있다.
“파일을 고르고 바로 감을 잡는다.”
이 정도의 가벼움은 계속 유지하고 싶다.
다만 공개 라이딩 기록 쪽은 조금 더 욕심이 있다.
카카오 로드뷰는 길의 분위기를 다시 보는 데 도움이 되지만,
내가 실제로 달린 순간과는 약간 다르다.
그래서 차후에는 고프로 영상이나 액션캠으로 남긴 프레임을
GPX 시간 정보와 맞춰 붙여보고 싶다.
로드뷰를 대체하거나 보완하는 식으로
“그 지점에서 실제로 내가 본 장면”을 보여주는 구조다.
그렇게 되면 라이딩 기록은 단순한 운동 로그가 아니라
지도, 고도, 속도, 영상이 함께 움직이는 복기 페이지에 가까워질 것 같다.
사용해보기
도구는 여기에서 바로 사용할 수 있다.
GPX 파일은 서버로 업로드되지 않고
현재 브라우저 안에서만 분석된다.
자전거 코스를 타기 전에
거리와 고도, 예상 시간을 가볍게 확인하고 싶을 때 써보면 좋겠다.
관련 태그 글