import AIChatButtons from '../../../../components/AIChatButtons.astro';

시계열 어노테이터는 센서 데이터, 비행 로그 등 시간축 기반 데이터를 시각화하고 구간별 어노테이션(라벨링)을 수행하는 도구입니다.

<AIChatButtons pageTitle="시계열 어노테이터 사용 매뉴얼" />

## 화면 구성

```mermaid
graph TD
  subgraph 메인 화면
    A["📊 차트 영역<br/>시계열 데이터 시각화 + 어노테이션 오버레이"]
    B["📏 커스텀 슬라이더<br/>전체 타임라인 미니맵 + 어노테이션 마커"]
    C["ℹ️ 상태바<br/>줌 레벨 · Invalid 카운트 · 트랙 매니저 · 리셋"]
  end

  subgraph 패널
    D["📚 트랙 매니저<br/>트랙 순서 · 표시/숨김"]
    E["⚙️ 설정<br/>텍스트 크기 · 선 두께 · 좌표값 표시"]
  end

  A --- B
  B --- C
  C -.-> D
  C -.-> E
```

| 영역 | 설명 |
|------|------|
| **차트 영역** | ECharts 기반 시계열 차트. 트랙별로 채널 데이터를 시각화하며, 어노테이션이 오버레이로 표시됩니다. |
| **커스텀 슬라이더** | 차트 하단의 미니맵. 전체 타임라인에서 현재 보이는 범위를 드래그로 조절합니다. 어노테이션 위치가 마커로 표시됩니다. |
| **상태바** | 줌 레벨, Invalid 어노테이션 카운트, 트랙 매니저 버튼, 리셋 버튼이 표시됩니다. |
| **트랙 매니저** | 트랙의 순서 변경, 표시/숨김을 관리하는 패널입니다. |
| **설정** | 텍스트 크기, 선 두께, 좌표값 표시 방식을 조정합니다. |

## 기본 용어

:::note[용어 정의]
시계열 어노테이터에서 사용하는 용어는 [시계열 어노테이터 스키마 — 용어 정의](/annotator-schema/시계열#용어-정의)를 참고하세요.
:::

| 용어 | 설명 |
|------|------|
| **트랙** | 하나의 차트 영역. 여러 채널을 함께 표시합니다. (예: "자세" 트랙에 Roll, Pitch, Yaw 채널) |
| **채널** | 트랙 안의 개별 데이터 시리즈. 각각 고유한 색상과 이름을 갖습니다. |
| **어노테이션** | 시간 구간에 부여하는 라벨. 시작/끝 시간, 클래스, 속성 정보를 포함합니다. |
| **오버레이** | 어노테이션을 차트 위에 시각적으로 표시하는 반투명 박스입니다. |

## 설정 (Preferences)

상단 메뉴의 설정 아이콘을 통해 접근합니다.

| 카테고리 | 옵션 | 선택지 |
|---------|------|--------|
| **텍스트** | 텍스트 크기 | 5단계 프리셋 |
| **차트** | 선 두께 | 1px / 1.5px / 2px / 2.5px / 3px |
| **차트** | 좌표값 표시 | 끄기 / 단일 트랙 / 전체 트랙 |
| **차트** | 좌표값 위치 | 커서 / 좌측 상단 / 우측 상단 |

## 매뉴얼 구성

이 매뉴얼은 다음 섹션으로 구성됩니다:

1. **[차트 탐색](./chart-navigation)** — 줌, 팬, 타임라인 이동, 슬라이더
2. **[어노테이션 생성 및 편집](./annotation-editing)** — 드래그 생성, 리사이즈, 이동
3. **[어노테이션 관리](./annotation-management)** — 선택, 네비게이션, 가시성, 잠금
4. **[트랙 관리](./track-management)** — 트랙 순서, 표시/숨김, 높이 조절
5. **[키보드 단축키](./keyboard-shortcuts)** — 전체 단축키 일람표