DHTMLX Kanban 개요

JavaScript Kanban은 워크플로우 시각화를 위한 효과적인 솔루션입니다. 이 위젯을 사용하면 비즈니스 프로세스를 더 잘 이해하고 팀의 작업량을 한눈에 파악할 수 있습니다. 유연한 이 도구는 카드, 컬럼, 스윔레인(swimlane)의 개수에 제한 없이 동작합니다. 순수 JavaScript와 CSS로 완전히 작성되어 있어 손쉽게 설정, 커스터마이즈, 그리고 어떤 웹 앱이나 웹 페이지에도 통합할 수 있습니다.

Kanban 구조­

Toolbar

Kanban의 Toolbar는 인터페이스의 별도 부분입니다. 여기에는 카드를 검색할 수 있는 검색창, 지정된 파라미터로 카드를 정렬하는 컨트롤, 기록을 관리하는 두 개의 컨트롤(undo/redo), 그리고 새 컬럼 및 행 추가를 위한 컨트롤이 포함되어 있습니다. 검색 및 정렬 로직을 유연하게 제어할 수 있고, 커스텀 요소를 추가하거나 내장 요소의 순서를 변경하여 Toolbar 구조를 변경할 수 있습니다. 자세한 내용은 Configuration 섹션을 참고하세요.

Board

Board는 Kanban의 주요 부분입니다. 카드들이 컬럼과 행(스윔레인)으로 나뉘어 배치되어 있습니다. 카드의 외관을 유연하게 설정할 수 있으며, 커스텀 템플릿도 적용할 수 있습니다. 자세한 내용은 Configuration 섹션을 참고하세요.

Board 패널에서는 카드, 컬럼, 행을 다음과 같이 관리할 수 있습니다:

• 각 컬럼 및 스윔레인에 지정된 제한에 따라 플러스 아이콘을 클릭해 새 카드를 추가
• 에디터 패널을 통해 작업에 대한 댓글 및 투표 추가 (예시)
• 에디터를 통해 작업 간의 링크 설정 (예시)
• 컨텍스트 메뉴(3점 아이콘)를 사용해 카드, 컬럼, 행 삭제
• 컨텍스트 메뉴(3점 아이콘) 또는 Ctrl (Command)+D 단축키로 카드 복제 (여러 카드 복제 가능)
• Kanban 데이터를 JSON 파일로 내보내기
• 다음 단축키로 Kanban 기록 관리:
  • Ctrl (Command)+Z - Kanban에서 마지막 작업을 되돌림(히스토리에서 한 단계 뒤로)
  • Ctrl (Command)+Y 또는 Ctrl (Command)+Shift+Z - undo로 되돌린 작업을 다시 실행(히스토리에서 한 단계 앞으로)
• 카드를 원하는 위치(행 및 컬럼)로 드래그하여 이동
• 컨텍스트 메뉴(3점 아이콘)로 컬럼 및 행 이동
• 해당 레이블을 더블 클릭하거나 컨텍스트 메뉴(3점 아이콘)로 컬럼 및 행 이름 변경
• 카드를 클릭하여 카드 에디터 표시
• 행 레이블 왼쪽의 화살표 아이콘을 클릭하여 행을 접거나 펼치기
• 컬럼 레이블 왼쪽의 화살표 아이콘을 클릭하여 컬럼을 접거나 펼치기
• 다음 단축키로 여러 카드 선택:
  • 같은 컬럼 내에서 여러 카드를 선택하려면 Shift + 해당 카드 클릭
  • 다른 컬럼의 여러 카드를 선택하려면 Ctrl (Command) + 해당 카드 클릭

Editor

Editor는 선택한 카드 데이터를 관리할 수 있는 필드와 컨트롤로 구성된 모달 패널입니다. 변경하려는 카드를 클릭하면 에디터가 표시됩니다. 새로운 필드와 컨트롤을 추가하여 에디터 구조를 유연하게 설정할 수 있습니다. 자세한 내용은 Configuration 섹션을 참고하세요.

다음 단계

이제 Kanban을 애플리케이션에 적용할 준비가 되었습니다. 자세한 안내는 How to start 튜토리얼을 참고하세요.