---
title: 파일과 통계
---

<script lang="ts">
    import { ChartNoAxesColumn } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import ElevationProfile from '$lib/components/elevation-profile/ElevationProfile.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import { exampleGPXFile } from '$lib/assets/example';
    import { writable } from 'svelte/store';

    let gpxStatistics = writable(exampleGPXFile.getStatistics());
    let slicedGPXStatistics = writable(undefined);
    let hoveredPoint = writable(null);
    let additionalDatasets = writable(['speed', 'atemp']);
    let elevationFill = writable(undefined);
</script>

# { title }

## 파일 목록

파일을 [열면](./menu/file), 지도 하단의 파일 목록에 탭 형태로 표시됩니다.
탭을 드래그 앤 드롭하면 순서를 바꿀 수 있습니다.
파일이 많이 열려 있을 때는 탭 목록을 스크롤해서 탐색할 수 있습니다.

<DocsNote>

마우스를 사용할 때는 <kbd>Shift</kbd> 키를 누른 채로 스크롤해야 가로로 스크롤됩니다.

</DocsNote>

### 파일 선택

탭을 클릭하면 파일 간에 전환하여 통계를 확인하고 [편집 작업](./menu/edit)과 [도구](./toolbar)를 적용할 수 있습니다.
<kbd>Ctrl/Cmd</kbd> 키를 누른 채로 클릭하면 파일을 선택에 추가하거나 제거할 수 있고, <kbd>Shift</kbd> 키를 누른 채로 클릭하면 범위를 지정해 여러 파일을 선택할 수 있습니다.
대부분의 [편집 작업](./menu/edit)과 [도구](./toolbar)는 여러 파일에 한 번에 적용할 수 있습니다.

<DocsNote>

키보드의 방향키로도 파일 간을 이동할 수 있으며, <kbd>Shift</kbd> 키로 파일을 선택에 추가할 수 있습니다.

</DocsNote>

### 편집 작업

파일 탭을 우클릭하면 [편집 메뉴](./menu/edit)와 동일한 작업에 접근할 수 있습니다.

### 트리 레이아웃

[보기 옵션 섹션](./menu/view)에서 설명한 것처럼, 파일 목록을 트리 레이아웃으로 전환할 수 있습니다.
이 레이아웃은 지도 오른쪽에 수직 목록 형태로 파일을 정리해주므로, 많은 파일이 열려 있을 때 관리하기 좋습니다.
또한 파일 트리 보기를 사용하면 접었다 펼 수 있는 섹션을 통해 파일 안에 담긴 [트랙, 세그먼트, 관심 지점](./gpx)을 확인할 수 있습니다.

내부 파일 항목에도 [편집 작업](./menu/edit)과 [도구](./toolbar)를 적용할 수 있습니다.
또한 내부 항목을 드래그 앤 드롭해서 순서를 바꾸거나, 계층 구조 안에서 옮기거나, 심지어 다른 파일로 이동시킬 수도 있습니다.

<DocsNote>

지도와 파일 목록 사이의 구분선을 드래그하면 파일 목록의 크기를 조정할 수 있습니다.

</DocsNote>

## 고도 정보와 통계

인터페이스 하단에서 현재 선택 항목의 고도 정보와 통계를 확인할 수 있습니다.

<DocsNote>

지도와 고도 정보 사이의 구분선을 드래그하면 고도 정보의 크기를 조정할 수 있습니다.
    
</DocsNote>

### 인터랙티브 통계

고도 정보 위에 마우스를 올리면 커서 위치의 통계를 보여주는 툴팁이 표시됩니다.

고도 정보의 특정 구간에 대한 통계를 보려면 프로필 위에서 드래그해 사각형으로 선택할 수 있습니다.
프로필을 클릭하면 선택이 초기화됩니다.

마우스 휠을 사용해 고도 정보를 확대/축소할 수도 있고, <kbd>Shift</kbd> 키를 누른 채로 프로필을 드래그하면 좌우로 이동할 수 있습니다.

<div class="h-48 w-full">
    <ElevationProfile
        {gpxStatistics}
        {slicedGPXStatistics}
        {hoveredPoint}
        {additionalDatasets}
        {elevationFill}
    />
</div>
<div class="flex flex-col items-center w-full">
    <GPXStatistics
        {gpxStatistics}
        {slicedGPXStatistics}
        orientation={'horizontal'}
    />
</div>

### 추가 데이터

고도 정보 오른쪽 하단의 <kbd><ChartNoAxesColumn size="16" class="inline-block" style="margin-bottom: 2px"/></kbd> 버튼을 사용하면 다음 기준으로 고도 정보에 색을 입힐 수 있습니다:
- 고도 데이터로 계산된 **경사** 정보, 또는
- <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>의 <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a>와 <a href="https://wiki.openstreetmap.org/wiki/Key:highway" target="_blank">highway</a> 태그에서 가져온 **표면** 또는 **분류** 데이터
이 기능은 **gpx.studio**로 만든 파일에서만 사용할 수 있습니다.

선택 항목에 해당 데이터가 포함되어 있다면, 고도 정보에서 **속도**, **심박수**, **케이던스**, **온도**, **파워** 데이터도 시각화할 수 있습니다.
