초보 개발자도 오픈소스에 기여할 수 있다 - Notion Avatar Maker 한국어 버전 개발기

오픈소스는 어렵다

개발자의 성장에 대한 글을 보면 자주 강조되는 부분이 오픈소스 기여다. 성장하고 싶었던 나도 오픈소스에 기여하고 싶었다. 하지만 우리가 사용하는 오픈소스 React, Vue.js등의 이슈를 찾아 해결해보려고 해도 이해하기도 어렵고 어떻게 고칠 수 있는지 감도 잘 안 오지 않았다. 그래도 굴하지 않고 코드를 보고 이해해 보려고 해도 역시나 어려웠다.

그런 나도 엄청나진 않지만 작게나마 오픈소스에 기여하면서 살고 있는데 기여 기회를 찾는 나만의 꿀팁과 실제로 기여했던 프로세스를 공유하고자 한다.

기회 잡기

나는 기여하려고 기회를 찾기 보다는 오는 기회를 잡는 편이다. 예를 들어, 공식문서를 보는데 스타일이 깨져서 보인 경우, 좋은 자료가 담긴 repository가 있는데 한국어 버전이 없는 경우, 공식 문서에 잘못된 명령어가 적혀 있는 걸 찾은 경우, 흥미로운 사이트를 찾았는데 한국어 버전이 없는 경우 등이다. 이번에 소개할 예는 흥미로운 사이트를 찾았는데 한국어 버전이 없는 경우이다.

Notion Avatar Maker라는 사이트를 구독중인 뉴스레터에서 발견했다. 노션 스타일의 아바타를 직접 만들 수 있는 사이트이다. 요소들을 클릭해서 나만의 아바타를 만들 수 있고 노션 스타일로 만들 수 있다는 게 매력적이었다. 가지고 놀다가 이 사이트의 한국어 버전이 없다는 것을 깨닫고 기여해보고 싶다는 생각이 들었다. 그리고 내가 기여할 수 있는지 체크했다. 일단 이슈나 PR에 한국어 지원 관련 내용은 없어서 다른 사람이 작업 중이진 않은 것 같았다. 그 다음으로는 어떻게 작업하면 될지 살펴봤다.

일단 README 파일에 I18n로 영어와 중국어를 지원한다고 적혀 있었다. 그래서 파일을 찾아보니 public/locales 디렉토리 내부에 관련 파일들이 있었다.

다음으로는 repository를 clone해서 public/locales/zh/common.json 파일의 변경내역을 살폈다.

커밋 전체 내역을 보니까 아래와 같은 작업 내역들이 있었는데, 초기 작업이다 보니까 i18n 라이브러리를 설치하고 세팅하는 부분들이 있다. 여기서 나는 next-i18next.config.js에 locales/ko/common.json을 추가하면 될 것 같았다.

이제 내가 작업할 내용이 어느정도 보였기 때문에 로컬 서버를 실행했다. public/locales/ko/common.json을 생성하고, next-i18next.config.js의 locale에 ko를 추가했다. 작업 후 실행해보니 아주 잘 적용되는 것을 볼 수 있었다.

빠진 부분이 없는지 이것저것 기능을 테스트해보는 데 걸리는 부분이 있었다. 영어와 한국어가 어순이 다르기 때문에 “눈 선택”이라고 나와야 자연스러운 부분이 “선택 눈”이라고 나오고 있었다. 그래서 이 부분을 코드에서 찾아봤다.

이 컴포넌트는 AvatarPicker였고 어순을 바꾸기 위해 한국어일 때 분기하는 방법을 찾아봤다.

useTranslation hook에서 i18n.language에 현재 언어가 무엇인지 담겨 있었다. 그래서 아래와 같이 작성해보려고 했는데 한국어 한정 코드인 거 같아서 마음에 걸렸다. 그래서 이 작업은 커밋하지 않고 메인테이너에게 설명을 하고 조언을 구하고자 했다.

const {
  t,
  i18n: { language },
} = useTranslation('common')

;<h1 className="py-4 w-full">
  {language === 'ko'
    ? `${t(`${avatarPart.part}`)} ${t('Choose')}`
    : `${t('Choose')} ${t(`${avatarPart.part}`)}`}
</h1>

그렇게 아래 PR을 작성하고 어순을 바꾸는 부분은 코멘트로 달았다.

그러자 메인테이너가 i18n의 interpolation 기능을 사용하면 해결할 수 있을 거 같고 일단 머지하고 싶다고 했다.

그렇게 내 작업은 머지가 됐고 노션 아바타 메이커의 한국어 버전이 탄생했다. 🐥 뿌-듯

조만간 interpolation 기능도 공부해서 작업을 마무리하려고 한다.

작은 관심

이렇게 초보 컨트리뷰터가 기여할 수 있는 가장 현실적인 방법은 작은 관심이라고 생각한다. 막상 뭘 기여할까 찾다 보면 잘 안 보이지만 이렇게 관심을 가지다보면 기회가 생겼었다. 내 프로젝트는 아니지만 기여해보면 애착도 생기고 엄청나게 뿌듯하다. 그리고 새로운 배움의 기회가 온다.

나는 이런 경험들이 좋아서 기회를 찾자마자 신나서 회사의 팀원들과 나누려고 했는데 작업해야 할 부분이 너무 작아서 혼자 하기로 했다. 아래는 검토를 안하고 공유한 결과다 😅

• 공유 직후

• 작업량 검토 후