# 타임스케일 범위 및 자동 맞춤

## Content

이 항목에서는 간트 시트 타임스케일의 스크롤 가능한 날짜 범위가 어떻게 결정되는지와 \`autoFitMode\` 및 \`margin\`을 사용하여 이를 제어하는 방법을 설명합니다.
타임스케일 범위는 사용자가 간트 차트에서 가로로 스크롤할 수 있는 범위를 정의합니다.
![image-20260324.9c8f8b.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260324.9c8f8b-20260528.d884b0.png?width=600)

## 개요

타임스케일의 스크롤 가능 범위는 다음에 의해 결정됩니다.

* `timescale.minDate`
* `timescale.maxDate`
* `timescale.autoFitMode`
* `timescale.margin`

이 속성들은 다음을 제어합니다.

* 타임스케일의 기본 날짜 범위
* 범위가 프로젝트 일정에 자동으로 맞춰질지 여부
* 프로젝트 기간 전후에 추가로 확보할 여유 공간 크기

## 프로젝트에 자동 맞춤

### autoFitMode: "none"

일정 계산 이후에도 타임스케일 날짜 범위는 변경되지 않습니다.

* `minDate` 및 `maxDate`는 자동으로 변경되지 않습니다.
* 스크롤 가능 범위가 실제 프로젝트 기간보다 더 넓을 수 있습니다.

이 모드는 수동으로 제어되는 안정적인 타임스케일 범위를 제공합니다.
![image-20260324.c1bd85.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260324.c1bd85-20260528.da59d4.png?width=600)

### autoFitMode: "project"

`"project"`로 설정하면 타임스케일이 프로젝트의 계산된 일정 기간에 맞게 자동으로 조정됩니다.

```auto
timescale.minDate = project.start;
timescale.maxDate = project.finish;
```

이를 통해 간트 차트가 현재 작업 기간에 집중되도록 유지할 수 있습니다.
![image-20260324.c2b635.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260324.c2b635-20260528.30d0cd.png?width=600)

>type=info
> **자동 맞춤은 언제 사용하나요?**
> 프로젝트 기간이 기본 타임스케일 범위보다 훨씬 짧은 경우 차트에 큰 빈 영역이 생겨 가로 스크롤 효율이 떨어질 수 있습니다.
> 자동 맞춤을 활성화하면 스크롤 가능 범위가 실제 프로젝트 타임라인에 가깝게 유지됩니다.

## 타임스케일 여백

타임스케일 범위가 프로젝트 경계에 딱 맞게 설정된 경우, 작업 표시줄 외부에 렌더링되는 작업 레이블(`leftText`, `rightText` 등)이 잘려 보일 수 있습니다.
![image-20260324.3f2fe6.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260324.3f2fe6-20260528.a0fd71.png?width=600)

`margin` 속성을 사용하여 프로젝트 기간 전후에 추가 공간을 확보할 수 있습니다.

```javascript
ganttSheet.project.timescale.margin = 5;
```

margin은 가장 작은 타임스케일 계층 단위(예: 일(day)) 기준으로 지정됩니다.
![image-20260324.aa24b4.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260324.aa24b4-20260528.48e67e.png?width=600)

이를 통해 다음과 같은 효과를 얻을 수 있습니다.

* 경계 영역에서 시각적으로 잘리는 현상 방지
* 전체 가독성 향상

## autoFitMode 전환

**"project"에서 "none"으로 전환**

* `minDate` 및 `maxDate`는 현재 값을 유지합니다.
* 자동 업데이트가 중지됩니다.
* 이후 일정 계산은 타임스케일 범위를 변경하지 않습니다.

**"none"에서 "project"로 전환**

* 다음 일정 계산 시 `minDate` 및 `maxDate`가 프로젝트의 계산된 일정 기간에 맞게 자동으로 업데이트됩니다.
* 

## 참고 항목

* [스크롤](/spreadjs/docs/v19/features/ganttsheet/scroll)
* [확대/축소](/spreadjs/docs/v19/features/ganttsheet/zoom)
* [GC.Spread.Sheets.GanttSheet.Timescale](/spreadjs/api/v19/classes/GC.Spread.Sheets.GanttSheet.Timescale)
* [디자이너에서 타임스케일 범위 구성](/spreadjs/docs/v19/spreadjs-designer-component/spdesignerwork/ganttsheet-designer/view-tab)