DHTMLX Gantt 개요
DHTMLX Gantt는 브라우저에서 프로젝트 타임라인을 표시하고 편집하기 위한 JavaScript 컴포넌트입니다.
구성 가능한 그리드, 확대/축소 가능한 타임스케일, 그리고 근무 시간·종속 관계·제약 조건을 이해하는 스케줄링 엔진을 제공합니다.
이를 통해 프로젝트 관리 도구, 건설/제조 일정표, 필드 서비스 계획 등 시각적 프로젝트 타임라인이 필요한 다양한 애플리케이션을 구축할 수 있습니다.
DHTMLX Gantt는 Standard와 PRO 버전으로 제공됩니다. PRO 버전에는 자동 스케줄링, 크리티컬 패스, 리소스 관리, 동적 로딩 등 추가 기능이 포함됩니다.
프레임워크별 빠른 시작
DHTMLX Gantt는 순수 JavaScript 위젯으로 사용하거나 최신 프레임워크에 통합할 수 있습니다. 아래에서 사용하는 스택에 맞는 단계별 "시작하기" 가이드를 선택하세요:
Script 태그 또는 번들러 기반의 최소 설정. 간단한 페이지 또는 비프레임워크 앱에 적합합니다.
준비된 ReactGantt 컴포넌트를 props와 events로 사용하세요.
얇은 래퍼를 이용해 Angular 프로젝트에 Gantt를 통합할 수 있습니다.
작은 래퍼 컴포넌트와 반응형 props로 Vue 앱에 Gantt 차트를 추가하세요.
구성과 이벤트를 바인딩하는 간단한 컴포넌트로 Svelte에서 Gantt를 사용할 수 있습니다.
Gantt 핵심 위젯을 직접 컴포넌트에 포함해 생명주기와 데이터 흐름을 완전히 제어할 수 있습니다.
Salesforce 앱에 Gantt를 포함하고, 조직 데이터를 연결해 CRM에서 프로젝트 타임라인을 관리합니다.
라이브 데모
DHTMLX Gantt를 직접 확인하려면 온라인 데모를 살펴보세요:
주요 기능
DHTMLX Gantt는 스케줄링 엔진, 유연한 타임라인, 리소스 도구를 결합합니다. 아래는 핵심 기능과 상세 설명으로 연결되는 섹션들입니다.
프로젝트 스케줄링
DHTMLX Gantt는 프로젝트 구조와 근무 시간을 이해하는 스케줄링 엔진을 제공합니다:
스케줄링 동작은 필요에 따라 MS Project와 유사하게 조정할 수 있습니다.
타임라인 & 그리드
왼쪽에는 데이터 그리드, 오른쪽에는 확대 가능한 타임스케일이 있으며 모두 고도로 커스터마이즈 가능합니다:
- 추가 그리드, 오른쪽 패널, 커스텀 패널을 포함한 유연한 레이아웃
- 인라인 편집, 다중 선택, 드래그 앤 드롭 등을 지원하는 컬럼 설정
- 마커 및 강조 표시된 시간 슬롯이 포함된 커스터마이즈 가능한 타임스케일
고급 프로젝트 제어
더 세밀한 프로젝트 관리를 위해 다음 기능을 제공합니다:
리소스 및 작업량 관리 (PRO)
PRO 버전에서는 리소스 관리 기능이 추가됩니다:
- 작업에 대한 리소스 할당
- 리소스 히스토그램 및 부하 다이어그램
- 리소스 기준 작업 그룹화
이 기능을 통해 애플리케이션 내에서 기본적인 리소스 관리가 가능합니다.
내보내기 & 에코시스템
강력한 통합 및 내보내기 기능을 제공합니다:
- PDF/PNG 및 Excel 내보내기 (Node.js 모듈 포함)
- MS Project, Primavera 와의 연동
프레임워크 및 백엔드 통합
프론트엔드 통합
DHTMLX Gantt는 모든 최신 브라우저에서 동작하는 프레임워크 독립적인 바닐라 JS 컴포넌트입니다. 다음 방식으로 사용할 수 있습니다:
React에서는 두 가지 옵션이 있습니다:
- ReactGantt 공식 래퍼 - 선언형 props 기반 컴포넌트
- 저수준 React 통합 가이드
Angular, Vue, Svelte는 "How to start" 가이드에서 얇은 래퍼 컴포넌트 구현 방법을 설명합니다.
백엔드 통합
백엔드에서는 Gantt가 REST 스타일 API와 통신합니다:
- 데이터는 보통 JSON (tasks, links, resources, assignments) 형태입니다.
- 내장된 DataProcessor가 CRUD 라우팅을 돕습니다.
- Node.js, .NET Core, Laravel 등 인기 백엔드용 튜토리얼 제공
이를 통해 기존 시스템이나 새로운 마이크로서비스에 쉽게 Gantt를 연결할 수 있습니다.
다음 단계
시작하는 경우:
- 원하는 프레임워크 또는 JavaScript용 시작 가이드를 따라 진행하세요.
- 그리드 컬럼, 근무 시간 캘린더, 타임스케일, 편집 동작을 조정하세요.
- 백엔드를 연결하고 DataProcessor 및 REST 엔드포인트를 설정하세요.
- 더 깊은 커스터마이징을 위해 Guides 및 API 참고서를 살펴보세요.
이미 DHTMLX Gantt를 사용 중이며 이전 버전에서 업그레이드하는 경우, 최신 기능과 마이그레이션 가이드는 What's new에서 확인할 수 있습니다.