서론

GitHub Projects를 사용하면 GitHub Issues를 기반으로 프로젝트 관리를 할 수 있습니다. 평소의 개발 작업과 프로젝트 관리를 GitHub로 모을 수 있어서 개인적으로도 상당히 마음에 드는 방식입니다. 개인 업무용 태스크 관리에도 사용하고 있습니다.

다만, 일본 개발 현장에서 비교적 자주 사용되는 간트 차트(Gantt chart) 표시에는 대응하지 못하고 있습니다. 그럴듯한 표시 방식은 있지만, Excel로 받고 싶다거나 자신의 현장에 맞는 세부 기능 등에 대응하지 못하는 경우가 있습니다...

그렇다면 GitHub Copilot app의 canvas로 내가 원하는 형태의 간트 차트를 만들면 되지 않을까 하는 생각이 들어 AI에게 부탁해 보았더니, 생각보다 훨씬 좋은 결과물이 즉석에서 만들어졌습니다. 개인적으로는 canvas로 태스크 관리를 위한 전용 뷰를 만들기도 하지만, 간트 차트 형식은 만들어 본 적이 없어서 완성도가 높아 깜짝 놀랐습니다.

canvas라면 자신만의 전용 화면을 만들 수 있다

GitHub Copilot app에는 canvas라는 메커니즘이 있어, 임의의 UI를 오른쪽 패널에 표시하는 확장을 만들 수 있습니다. 대화만으로는 다루기 어려운 일람성 있는 표시나, 마우스를 이용한 직접 조작을 canvas에 담을 수 있습니다.

마침 Opus 5를 사용할 수 있게 된 타이밍이었기에, plan 모드에서 create-canvas 스킬을 사용하여 "GitHub Issues를 간트 차트로 표시하는 캔버스를 만들어줘"라고 부탁해 보았습니다.

몇 가지 질문을 거쳐 완성된 결과물

부탁하자 몇 가지 질문을 던져주었습니다. 바(bar)의 기간을 어떻게 결정할지, 수동으로 조정하고 싶을 때는 어떻게 할지 등에 대한 내용이었습니다. 그 질문에 답해 나갔더니, Issue의 createdAt을 시작일로, closedAt을 종료일로 하여 기간을 표시하고, 오픈 중인 Issue는 오늘까지의 바를 표시하는 형태로 만들어 주었습니다.

나아가 바를 드래그하거나 양 끝을 리사이징하면 화면상에서 기간을 수동으로 조정할 수 있도록도 해주었습니다. 그것만으로도 이런 느낌의 결과물이 만들어졌습니다.

GitHub Copilot app の canvas に表示した Issue Gantt

1 Issue = 1개의 바이며, 오른쪽 패널의 왼쪽에 번호와 타이틀, 오른쪽에 바가 나열됩니다. 빨간 선이 오늘, 옅은 음영이 토/일이며, 일/주/월 단위로 줌(zoom)을 전환하거나 상태, 라벨, 텍스트로 필터링할 수 있습니다. 수동으로 조정한 계획은 docs/planning/issue-gantt.json에 저장되므로, 그대로 커밋하여 Git으로 이력을 관리할 수 있다는 점도 소소하게 기쁜 포인트였습니다.

Excel 출력도 부탁해 보았다

간트 차트를 화면으로 보는 것만으로도 충분히 편리하지만, 역시 마지막에는 Excel로 받고 싶다는 요청이 있을 것 같아 추가로 "표시 중인 내용을 Excel로 출력할 수 있게 해줘"라고 부탁해 보았습니다.

이 기능 역시 추가되어, 화면의 필터와 줌 상태를 유지한 채 .xlsx로 내보낼 수 있게 되었습니다.

Issue Gantt を Excel に出力した結果

외관도 그럴싸하며, 실제로 Excel에서 열어 확인해 보아도 이질감이 없는 완성도였습니다.

물론 세부 항목이 다르다거나 우리 회사의 간트 차트는 이렇지 않다는 부분도 있겠지만, 그런 부분은 GitHub Copilot App에 부탁하여 커스텀하면 된다고 생각합니다.

gist에서 설치하기

배포용 gist를 준비해 두었습니다.

GitHub Copilot app의 커맨드 팔레트(command palette)에서 "Install extension from gist..."를 선택하고 이 URL을 지정하면 설치할 수 있습니다. 설치 위치는 프로젝트, 사용자, 세션 중에서 선택할 수 있지만, 이 확장은 프로젝트 스코프(project scope)에서 사용하는 것을 상정하고 있습니다.

전제 조건은 GitHub CLI의 gh가 설치되어 있고, gh auth login이 완료되어 있어야 한다는 점입니다. 도입 후에는 Excel 출력 위치인 docs/planning/exports/를 커밋하지 않도록, 도입 대상의 .gitignore에 수동으로 추가해 두시기 바랍니다.

실제 현장에서 사용하려면 조정도 필요할 듯

이번에는 Issue의 createdAt과 closedAt

를 그대로 기간으로 사용했지만, 실제 현장에서는 시작일·종료일을 별도의 커스텀 필드 (Custom Field)로 관리하거나, 독자적인 규칙으로 결정하는 경우도 있을 것이라고 생각합니다. 그 경우에는 이 확장을 자신의 요구사항에 맞춰 커스터마이징하거나, 처음부터 자신이 원하는 사양을 상세히 전달하여 만드는 것이 더 적합할 것 같습니다.

이렇게 자신들을 위한 세밀한 뷰 (View)를 만드는 것 또한 GitHub Copilot App의 편리한 부분이라고 생각합니다.

요약

GitHub Issues / Projects로 관리하고 싶지만, 자신이 원하는 형태의 간트 차트 (Gantt Chart)나 보고용 Excel이 없어 곤란해하던 분들을 위해 작성해 보았습니다. 비교적 간단하게 만들 수 있으므로 GitHub Copilot App의 create-canvas 스킬을 사용하여 GitHub에 부족하다고 생각하는 표시 형식 등을 만들어 보면 편리할 것입니다.

Discussion