레슨 6 / 8·20분
간트 차트와 파이 차트
간트 차트 심화
간트 차트는 프로젝트 관리에서 일정과 작업 진행 상황을 시각화하는 표준 도구입니다. Mermaid의 gantt 다이어그램은 날짜 형식, 작업 상태, 마일스톤, 의존성 등 풍부한 기능을 제공합니다.
작업 상태 표현
각 작업에 상태 키워드를 추가하여 진행 상황을 시각적으로 구분할 수 있습니다. done(완료), active(진행중), crit(중요) 등의 태그를 사용합니다.
mermaid
gantt
title 웹 애플리케이션 개발 프로젝트
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 기획 단계
요구사항 정의 :done, req, 2024-01-01, 7d
UI/UX 설계 :done, design, after req, 10d
기술 스택 결정 :done, tech, 2024-01-05, 5d
section 개발 단계
프론트엔드 개발 :active, fe, after design, 21d
백엔드 API 개발 :active, be, after design, 21d
데이터베이스 설계 :done, db, after tech, 7d
section 테스트 및 배포
단위 테스트 :test1, after fe, 7d
통합 테스트 :crit, test2, after test1, 5d
성능 최적화 :perf, after test2, 5d
프로덕션 배포 :milestone, deploy, after perf, 0d간트 차트 설정 옵션
- •dateFormat YYYY-MM-DD — 날짜 입력 형식 지정
- •axisFormat %m/%d — 축에 표시되는 날짜 형식
- •done — 완료된 작업 (회색 표시)
- •active — 현재 진행 중인 작업 (강조 표시)
- •crit — 중요한 작업 (빨간색 표시)
- •milestone — 마일스톤 (다이아몬드 표시, 기간 0d)
- •after taskId — 특정 작업 완료 후 시작 (의존성)
파이 차트 활용
파이 차트는 전체 대비 각 항목의 비율을 직관적으로 보여줍니다. Mermaid의 pie 다이어그램은 간단한 문법으로 즉시 비율 차트를 생성합니다.
mermaid
pie showData
title 프로젝트 시간 분배
"개발" : 45
"테스트" : 20
"코드 리뷰" : 15
"문서 작성" : 10
"미팅" : 10파이 차트 실전 예제
mermaid
pie title 프론트엔드 번들 크기 분석
"React Core" : 35
"UI 라이브러리" : 25
"상태 관리" : 15
"유틸리티" : 12
"폰트/이미지" : 8
"기타" : 5마인드맵
Mermaid는 마인드맵(mindmap)도 지원합니다. 계층 구조의 아이디어를 시각적으로 정리할 때 유용합니다.
mermaid
mindmap
root((웹 개발))
프론트엔드
React
Vue
Angular
백엔드
Node.js
Python
Java
데이터베이스
PostgreSQL
MongoDB
Redis
DevOps
Docker
Kubernetes
CI/CD💡
showData 키워드를 pie 뒤에 추가하면 각 항목의 실제 수치도 차트에 함께 표시됩니다. 발표 자료 등에서 정확한 수치를 전달할 때 유용합니다.