슬기로운 깃헙 생활을 위한 refined github 세팅

GitHub에서 코드 작업과 리뷰를 하다보면 사소하지만 불편한 부분들이 있다. 깃헙팀에서도 이런 불편함을 개선하기 위해 ⌘ + k로 이용 가능한 command palette 기능이나 코드 트리와 심볼을 사이드바로 볼 수 있게 하는 패치 등 예전엔 브라우저 확장을 이용해야만 가능했던 기능을 꾸준히 도입하고 있다. 그럼에도 아쉬움으로 남아있는 부분들은 존재하고 이를 위해 여러 플러그인이 있는데, 그 중 refined-github 브라우저 확장을 몇 년째 애용하고 있다. 이 글에서는 내가 코드를 생산하고, 이슈를 탐색하며, 다른 동료의 코드를 리뷰할 때 인지부하를 줄이고 깃헙 생활을 더 쉽고 유용하게 만들어주는 refined github 세팅을 공유하려한다.

들어가기 전

깃헙 브라우저 확장은 그 특성상 깃헙 사이트의 사소한 변경에도 큰 영향을 받는데 refined github은 메인테이너의 대응이 매우 빠르고 다른 기여자들 또한 활발히 활동하고 있어 대부분은 빠르게 고쳐진다. 또 이 글에서 다룬 기능들은 언제나 사라지거나 잠시 비활성화 상태일 수 있으니 그럴 땐 릴리즈 탭이나 이슈 페이지를 참고하자.

다른 기능들은 브라우저 확장의 옵션 페이지에서 확인 가능하다. 일단 모두 비활성화하고 본인에게 필요한 기능인지 스크린샷을 참고하며 활성화하길 권장한다. (전체 토글은 아래 debugging 섹션에서 toggle all features 버튼으로 가능하다) 예시는 크롬 refined-github 옵션 페이지

좋아하는 옵션

가능한 한 a-z 이름으로 소개했다.

action-pr-link

Adds a link back to the PR that ran the workflow.

사소하지만 유용하다. 코드 작업을 하다보면 내 pr에 올린 커밋의 actions run 결과를 상세하게 보는 일이 많은데 다 보고나서 다시 pr로 돌아갈 때 편하다. 원랜 아래처럼 actions 리스트로 이동한다.

clean-conversation-sidebar

Hides empty sections (or just their "empty" label) in the issue/PR sidebar.

pr 리뷰할 때 인지 부하를 줄여줘서 좋았다.

clean-readme-url

Drops redundant "readme-ov-file" parameter from repo URLs.

리드미에 있는 ## Installation, ## Usage 등의 헤더 앵커 링크를 복사할 때 붙는 tab=readme-ov-file 쿼리 파라미터를 없애준다. 매우 만족. discussion을 보니 다른 사람들도 불편해하는데 방치된 이슈로 보인다.

collapsible-content-button

Adds a button to insert collapsible content (via <details>).

details 태그로 노션의 토글버튼처럼 내용을 접어둘 수 있는데 개인적으로 아래처럼 이슈나 pr에서 자주 쓰는 기능이다. 이를 원 버튼 클릭으로 만들어줘 편하다.

copy-on-y

Enhances the y hotkey to also copy the permalink.

파일이나 코드의 특정 라인을 공유할 땐 단순히 master, main으로 공유하면 나중에 시간이 흘렀을 때 해당 파일이 없어진 경우도 있고 라인이 틀어져 원래 무엇을 의도했는지 모르기에 permalink로 공유해주는게 좋다. 깃헙에서도 이를 위해 y를 누르면 permalink를 url로 띄워주는데 이 기능은 클립보드에 복사까지 해줘서 좋다. 다만 깃헙도 그렇듯 한글 입력상태에서 누르면 y가 아니라 ㅛ로 인식돼 동작하지 않는다.

dim-bots

Dims commits and PRs by bots to reduce noise.

고맙지만 때때로 성가신 dependabot의 pr들을 흐린 눈으로 볼 수 있게 해준다.

expand-all-hidden-comments

On long conversations where GitHub hides comments under a "N hidden items. Load more...", alt-clicking it will load up to 200 comments at once instead of 60.

설명은 200개만 불러온다 하는데 사실 다 펼쳐준다. 묵은 이슈를 볼 때 코멘트가 많곤한데 유용하고 좋아요 많이받은건 꼭 collapsed에 있기 마련이라 종종 유용하다.

hide-low-quality-comments

Hides reaction comments ("+1", "👍", …) (except the maintainers’) but they can still be shown.

이슈를 볼 때 굳이 안봐도 되는 코멘트를 가려줘서 좋다.

highest-rated-comment

Highlights the most useful comment in issues.

이슈에서 유용하거나 인기많은 댓글을 하이라이트해주는데 workaround 적용이나 솔루션에 빠르게 접근할 수 있어 유용했다. 다만 코멘트가 너무 많아 가려져있고 load more 버튼으로 페이지네이션해야할 때 그 안에 가려진 코멘트까지 고려해서 하이라이트해주진 않는다. 최근엔 llm에게 물어보는 습관으로 유용성이 예전보단 덜해진 느낌도 있다.

new-or-deleted-file

Indicates with an icon whether files in commits and PRs are being added or removed.

리뷰하다보면 이게 아예 새롭게 추가된 파일인건지 그냥 많은 줄이 추가된건지 다 봐야만 아는 경우가 있는데 이를 심볼을 추가해 좀 더 인지하기 편하게 해준다.

one-click-pr-or-gist

Lets you create draft PRs and public gists in one click.

나는 pr 올릴 때 draft로 올리고 file changes를 셀프 리뷰해보며 리뷰어를 위한 코멘트를 달거나 잘못된게 없는지 다시 짚어본 뒤 ready for review로 오픈하곤 한다. 이 때 사소하게 편하게 pr을 열 수 있다. 최근엔 이전에 사용했던 옵션을 기억해 자동으로 띄워주는듯 하지만 그래도 여전히 편하다.

one-click-review-submission

Simplifies the PR review form: Approve or reject reviews faster with one-click review-type buttons.

종종 레이아웃이 깨지거나 핫픽스하느라 옵션이 비활성화 되는 경우가 있는데 그래도 refined github에서 제일 좋아하는 기능이다. 전 직장에선 리뷰를 1만개 넘게 할 정도로 리뷰를 많이 하는데 저 조그마한 라디오 버튼을 일일이 클릭해 바꿀 필요가 없이 한 번에 리뷰를 마칠 수 있어 매우 편했다.

open-all-notifications

Adds a button to open all your unread notifications at once.

위에서 말한 원클릭 리뷰 다음으로 좋아하는 기능이다. 회사에서 동료들과 일하다 보면 코드 리뷰하거나 단순 watching하는 이슈나 pr이 많아지는데 일일이 열어 보는 것도 일이었다. 이 기능 덕분에 아침에 출근하고 혹은 퇴근 전에 inbox 비우는 느낌으로 스트레스 없이 리뷰할 수 있었다.

show-whitespace

Makes whitespace characters visible.

은근 꿀기능. 언어에 따라 탭과 스페이스를 혼용하면 에러나는 경우도 있는데 이를 방지할 수도 있다. 굳이 그런 경우가 아니더라도 readme에 코드 예시를 적을 때 golang처럼 탭을 쓰는 코드를 쓰다보면 스페이스가 섞여 들어가서 보기 어려워지곤 하는데 이를 잡아낼 수 있다.

python 같은 경우 혼용하면 에러가 난다.

>>> def hello():
    print("4 spaces")
	print("1 tab")
  File "<stdin>", line 3
    print("1 tab")
TabError: inconsistent use of tabs and spaces in indentation

status-subscription

Lets you subscribe to opening/closing events of issues in one click.

리뷰를 하면 해당 pr에 author가 커밋을 하거나 내가 단 코멘트에 reply를 달 때 마다 알림이 온다. 리뷰할 게 적을 땐 괜찮은데 많아지다보면 (특히 위의 open all notifications 기능이랑 같이 쓰다 보면) 아직 볼 게 없는데도 pr이 열리고 이를 인지해야하는 경우가 잦았다. 이를 위해 리뷰 요청이 다시 오거나, 머지가 됐거나 등 유의미한 상태 변화가 있을 때만 알림을 받고자 해당 pr의 알림 설정을 바꾸곤 하는데 이 때 1 depth 편해진다.

useful-not-found-page

Adds possible related pages and alternatives on 404 pages.

브랜치가 없어진건지 파일이 없어진건지 레포가 없는건지 인지하기 편해진다.

꼭 끄는거

좋아하는 기능이 있다면 반대로 정신 사나워지고 괜히 인지 비용만 드는 기능도 있다.

ci-link

레포의 최신 커밋 actions 상태를 이름 옆에다 달아주는데 어느 페이지를 가나 보여서 정신사나웠다.

conventional-commits

최근에 추가된 기능으로 conventional commit에 맞게 작성된 커밋 메시지는 앞에 카테고리를 달아준다. 커밋 앞에 알록달록한게 정신사납기도 하고 커밋 컨벤션이라는게 아무리 feat: , fix: prefix로 맞추려해도 회사마다 팀마다 docs, chore, hotfix 등으로 달라지기 마련이라 저 기능으로 잘 잡히지도 않아서 그냥 끄는게 나았다.

reactions-avatars

제일 싫어하는 기능이다. 굳이 다른 사람들의 아바타를 볼 필요가 없어서 반드시 끈다.

repo-avatars

마찬가지로 레포의 아바타를 굳이 볼 필요가 없어서 끈다.

그 외 도움 되는 브라우저 확장

refined github은 아니지만 프로젝트의 코드를 트리로 보고 싶을 때 정식 기능이 있음에도 아쉬운 점이 있어 octotree(부분 유료)나 gitako(무료)를 써보길 추천한다. 레포 뿐만 아니라 pr에서 어떤 파일이 변했는지 한 눈에 보여주는 점이 좋다. 깃헙에서도 해당 기능을 빌트인으로 제공해주긴하나 사용 경험이 묘하게 좋진 않았다.

끝으로

이렇게 아주 개인적인 취향의 refined github 기능을 정리해봤는데 이 외에도 개인에 따라 충분히 유용하다고 느낄만한 기능이 많으니 한 번 옵션 페이지에서 각 기능들의 설명과 스크린샷을 보며 커스터마이징 해보길 추천한다.