[view] 클러스터 리스트에 Git Graph UI 도입 논의

[lxxmnmn]

안녕하세요? UI 리뉴얼 팀입니다. 많은 분들과 함께 논의하기 위해 금일 진행한 회의 내용을 공유합니다!

주제

VerticalClusterList Git Graph UI 도입

레퍼런스 검토

Git history Visualization Tool

• Git Graph VSCode Extension
• SourceTree
• Fork
• GitKraken
• Git Tower
• Interactive Git Log
• git-log--graph
• 그 외

이 중에서 githru에 도입하기 가장 적합하다고 판단한 GitKraken의 UI를 참고하고자 했습니다.

클러스터 모양 변경

하지만 githru의 핵심 요소인 CSM(Context-Preserving Squash Merge, #191)을 표현하려면 클러스터 리스트가 One Branch 형태여야 합니다. 그렇기에 흔히 알고 있는 Git Graph UI를 VerticalClusterList에 도입하는 것은 어렵다는 결론을 내렸습니다.

대신 클러스터 모양을 변경하는 방향으로 UI 리뉴얼을 진행하고자 합니다. 🙌 클러스터 모양, 혹은 CSM 표현 방법에 대한 다양한 의견 환영합니다 !!! 🙌

---

아래는 @ytaek 님이 알려주신 Git 시각화 툴 gmaster 입니다. 원 모양의 클러스터를 채우는 형태로 히스토리를 나타내고 있습니다.

• 커밋 수가 많을수록 클러스터 하나가 채워지도록 시각화
• 원의 높이 1/4이 전체의 1/4을 뜻하는 것이 아니므로 사용자에게 인지적인 오류를 불러일으킬 수 있음

추가 논의 사항

• 커밋마다 혹은 클러스터마다 다른 컬러를 사용할 경우, 디자인 시스템 팀과의 논의가 필요합니다.
• 클러스터를 펼쳤을 때 점과 커밋 내역이 제대로 매칭 되지 않는 버그가 있습니다.
• 클러스터를 펼치면 나오는 점을 서브 그래프로 시각화 하는 기능을 추가하면 좋을 것 같습니다.

[pcwadarong]

간단하긴 하지만 ..원 크기 차이로 표현하는 게 어떨지.. (조사 후보 중에도 있는 것 같습니다!) 그냥 단순히 예뻐서 말씀드리긴 했는데 제가 데이터 시각화는 잘 모르겠네요 ㅎㅎ.. 컬러 시스템의 경우 view 팀 각자 맡은 부분 어느 정도 정한 후 다 같이 한번 논의해봐도 좋을 것 같습니다..ㅎㅎ