[2024 오픈소스 컨트리뷰션 아카데미 OSCCA] 지원기와 Githru VSCode Extension 사용 후기
Open Source Contribution Academy에 지원하며 Githru VSCode Extension을 직접 설치하고 분석한 경험 정리
- #회고
- #오픈 소스
- #리뷰
댓글
입력한 비밀번호는 비밀 댓글 열람, 수정, 삭제에 사용됩니다.
아직 등록된 댓글이 없습니다.
Open Source Contribution Academy에 지원하며 Githru VSCode Extension을 직접 설치하고 분석한 경험 정리
입력한 비밀번호는 비밀 댓글 열람, 수정, 삭제에 사용됩니다.
아직 등록된 댓글이 없습니다.
링크 정보를 불러오는 중...
조금 더 일상에서 다양한 정보를 접하고, 현업에 있는 개발자들과 가까이 소통해 보고 싶다는 생각으로 트위터 계정을 만들었다. 여러 개발자들을 팔로우하던 중 피드에서 Open Source Contribution Academy(오픈소스 컨트리뷰션 아카데미) 가 체험형 멘티를 모집한다는 글을 발견했다.
나는 2학기 동안 졸업과 병행하면서 진행할 수 있는 의미 있는 팀 프로젝트를 찾아보고 있었고, 개발 문화 중에서도 특히 의미 있다고 생각하는 오픈소스 활동에 멘토의 도움을 받으며 참여할 수 있다는 점이 매우 좋은 기회라고 느껴졌다.
모집 공고를 읽으며 여러 프로젝트를 살펴본 뒤, TypeScript를 사용하고 프론트엔드 개발자를 모집하는 프로젝트 두 개를 1지망과 2지망으로 선택해 지원서를 작성했다.

링크 정보를 불러오는 중...
이 오픈소스 프로젝트는 Git의 메타데이터 구조를 시각적으로 분석하고 보여주는 VSCode 확장 프로그램이다.
평소 Git GUI 도구로 SourceTree나 Git Graph를 사용했지만, 여러 오류가 발생해 결국 Git Bash를 사용하는 경우가 많았다. 그럼에도 GUI 환경이 제공하는 시각적인 장점은 항상 아쉬움으로 남아 있었다.
Githru는 Git Bash나 VSCode의 Git 기능을 그대로 사용하면서도 커밋 구조나 기여도 등을 시각적으로 분석할 수 있는 기능을 제공한다.

지원 과정에서 사전 과제가 있었기 때문에 실제로 설치하고 실행해 보았다. README의 get started 부분에 npm build:all 명령어가 안내되어 있었지만, 여러 번 시도해도 정상적으로 동작하지 않았다.
대신 VSCode 확장 프로그램으로 직접 설치한 뒤 디버그 모드로 실행하고 Git 토큰을 입력하자, 일반 확장 프로그램처럼 하단 버튼을 통해 실행할 수 있었다.
사전 과제는 "아쉬운 점이나 개선되면 좋을 기능"을 작성하는 것이었기 때문에 여러 관점에서 사용해 보며 분석을 진행했다.
오른쪽 화면에는 파일 구조와 기여자 비율이 시각적으로 표현되어 있다.
특히 파일 구조에서 애니메이션이 매우 부드럽고 UI도 깔끔해 인상적이었지만, 뒤로 가기 흐름에서는 약간의 아쉬움이 있었다.
예를 들어 파일 구조를 탐색하다 부모 디렉토리로 돌아갈 때, 부모 요소가 왼쪽에 함께 표시된다면 사용자가 현재 위치를 더 쉽게 이해할 수 있을 것 같았다.
또 특정 기여자의 커밋만 보고 다시 전체 기여자 보기로 돌아갈 때도 물리적인 "뒤로 가기" 인터랙션이 있으면 UX가 더 자연스러울 것 같다.
또한 처음 화면에 보이는 큰 그래프는 코드 수와 날짜를 의미하는데, 처음 보는 사용자 입장에서는 다소 추상적으로 느껴졌다. 마우스를 올리면 정확한 수치를 표시해 준다면 이해하기 더 쉬울 것이라고 생각했다.
사용자가 포인트 컬러를 RGB 값으로 직접 선택할 수 있게 한 시도 자체는 좋다고 느꼈다.
그런데 실제로 컬러가 반영되는 방식이 다소 애매하게 느껴졌다. 컬러를 선택하면 현재 보고 있는 브랜치에는 바로 적용되지만 다른 브랜치에는 기존 컬러가 그대로 남아 있다. 그리고 Githru를 다시 실행하거나 재접속했을 때에야 변경한 컬러가 모든 브랜치에 적용되는 모습을 확인할 수 있었다.
즉, 인터랙션 관점에서 보면 동작 규칙이 조금 모호하게 느껴진다. 사용자가 컬러를 바꿨을 때는
처럼 동작 방식이 명확하게 정의되는 편이 UX 측면에서 더 자연스러울 것 같다고 느꼈다.
또 하나 느꼈던 부분은 전체 컬러 구성이 거의 비슷하게 보인다는 점이다. 그래프나 폴더 구조 등에서 사용하는 색상이 모두 동일한 톤으로 보이기 때문에 정보가 구분되는 느낌이 약했다.
만약 명도 차이나 색상 단계를 활용해서 4~5단계 정도의 컬러 시스템을 구성한다면 시각적인 가독성이 훨씬 좋아질 것이라고 생각했다.
사용자가 RGB 컬러를 자유롭게 고르는 구조에서는 이런 단계별 색상을 자동으로 계산해 적용하기가 어려울 수도 있다. 그래서 두 가지 방법을 떠올렸다.
이렇게 하면 사용자 설정을 유지하면서도 전체 인터페이스의 시각적인 일관성과 가독성을 동시에 확보할 수 있을 것 같다고 느꼈다.
마지막으로 문서 부분에서도 개선 여지가 있다고 느꼈다.
GitHub 저장소에 처음 들어갔을 때 README에서 기여자 정보가 크게 강조되어 있고 프로젝트 설명은 상대적으로 적었다.
다른 유명 오픈소스나 함께 지원했던 ArgoCD 프로젝트는 설치 방법이나 구조 설명이 매우 상세하게 정리되어 있어 처음 접근하기 훨씬 수월했다.
이 프로젝트도 문서가 조금 더 보완된다면 처음 사용하는 개발자들에게 훨씬 친절한 프로젝트가 될 것이라고 생각했다.
전체적으로는 필요한 기능만 잘 담겨 있는 깔끔한 프로젝트라고 느꼈다. 더 규모가 큰 레포지토리에서 사용하면 어떤 모습으로 분석이 이루어질지도 궁금해졌다.
이렇게 살펴본 결과 내가 기여할 수 있는 부분들이 있을 것 같다고 판단해 이 프로젝트에 지원하게 되었다.