까먹을 것 같아서 꼭 글로 써놔야지 했다가 반 년이 다 지나서 겨우 완성한 첫 오픈소스 기여한 경험에 대한 기록
실제 기간 2021.11.25. ~ 2022.01.13.
✔️ 오픈소스에 기여하게 된 동기
3학년 2학기에 수강한 공개소프트웨어 과목의 한 학기 팀 프로젝트로 시작하게 되었다. 내 코드만 건드려봤지 다른 사람의 프로젝트 단위로 코드를 이해하고 건드려본 적은 없어서 시작부터 너무 어렵게 느껴졌다.
✔️ FLEXBOX FROGGY 🐸 ?
CSS의 flexbox 속성에 대해 학습할 수 있는 개구리를 이용한 게임이다. 게임의 미션 완수 방법은 개구리를 이 속성을 이용해 수련잎 위로 이동하도록 하는 것이다. 총 24단계의 스테이지가 있고, 초·중·고급의 세 개의 난이도로 조절할 수 있다.
✔️ 이 repository로 선정한 이유
팀 프로젝트로 진행하다보니 레포 선정이 먼저가 아니라 사용할 언어를 먼저 선정했어야 했을 것은데, 개인적으로 레포만 조사해오다보니 각자의 주력 언어가 대비되어 버렸다. 학기 초의 나는 배움의 의지가 강했고 다른 과제는 고려하지 않은 채 다른 언어라도 배우면서 할 수 있을 것이라고 당시에는 생각해서 어떤 것이든 거부감이 없었는데, 다른 팀원들은 이 부분에 걱정을 꽤 많이 했던 것 같다.
결국 원활한 프로젝트 진행을 위해 모두가 기본적으로 다룰 줄 아는 웹(html, css, vanilla js) 위주로 레포를 선정하게 되어 여러 후보 중 FLEXBOX FROGGY 🐸를 최종적으로 선정했다.
수업에서는 거창한 결과를 원하는 것이 아니라 오픈소스에 기여하는 과정을 경험해보는 것을 목표로 진행했다. 그래서 프로젝트를 전체적으로 갈아엎는 게 최종 목표가 아니기 때문에 해당 서비스를 이용하는데 더 개선할 수 있는 포인트가 많은 오픈소스를 선택하게 되었다. 나는 1학년때 css를 공부하면서 실제로 이 게임을 플레이해봐서 반갑기도 하고 신기했다! (노마드코더의 카카오클론 강의 중 이 게임을 추천해준다.)
프로젝트는 서버를 따로 필요로 하지않아서 오로지 html, css, js(vanilla)만으로 구현되어 있고, 코드가 전반적으로 어렵지 않았다.
언어에 대해서는 이미 웬만한 언어들은 각각을 하드코딩한 형태로 번역되어 있는 상태였는데, 레포를 분석하다가 한국어 버전 중 오타가 몇 개 발견했다. 운좋게 오타를 수정하는 것으로 기여를 시작할 수 있었다 :)
간단한 게임이지만 css 특성상 여러 속성이 있고, 이 속성들의 속성 값에 따라, 여러 속성의 조합에 따라 적용되는 모습이 바뀐다. 하지만 게임 속에서는 속성: 속성 값을 각각 사용자가 타이핑하는 것이 정답 입력의 방식이었다. 이 게임은 정답만 찾는 것으로 끝나는 게 아니라 각 속성의 조합에 따라 box에 어떻게 적용되는지를 게임을 통해 쉽게 확인해볼 수 있는 게임이라고 생각한다. 그래서 일일이 타이핑하는 것보다 클릭으로 속성: 속성 값을 입력할 수 있는 기능을 제공하면 시간이 절약되어 좋을 것 같다고 생각했다. 실제로 이미 누군가 issue를 낸 내용이었고 댓글을 보니 프로젝트의 오너도 오케이한 내용이지만 구현까지는 이루어지지 않았었다.
그래서 우리는 위 기능(클릭 기능)과 한국어 번역 오타 수정을 시작 목표로 세워 소스에 기여하기 위한 활동을 시작했다.
✔️ issue를 통해 contribute할 내용 제안하기
➊ 우리는 기존 issue의 댓글에서 멘션 통해 오너에게 확인을 받았다.
➋ 원래는 이 클릭 기능뿐만 아니라 다른 기능도 구현하려고 했었다. 초급모드도 어려워 할 사용자를 위해 힌트 기능을 제공하는 것이다. 어떤식으로 구현할지 이미지와 함께 설명하며 우리 팀장님이 글을 작성해보았으나 ...
힌트를 얼마나 어떻게 줘야할 지에 대한 많은 고민이 필요하고, 모든 언어에 대한 추가 번역이 필요하다는 점이 문제가 되어 기각되었다..🥲
이때 우리팀은 평가방식으로 다양한 것을 제시하고, 코드기여를 많이 해야한다고 생각해서 이 기능에 대한 제안을 거절당했을 때 걱정을 많이 했던 것 같다. 확실히 작지도, 크지도 않은 기능 하나만을 목표로 하는 게 시간적 여유가 많이 남을 것 같아서 걱정이었지만 너무 손을 벌렸다가 수습하지 못하는 상황이 최악일 것 같아서 따낸 기능부터 착실히 구현하기로 했다 :>
✔️ 프로젝트 진행 과정
일단 공개소프트웨어 실습이라는 과목에서 진행되지만 모든 과정이 이 수업시간에만 이뤄지는 것은 아니다. 수업시간에는 카카오 개발자 강사님께서 오픈소스 기여에 대한 정보들을 주시고 들은 내용을 기반으로 팀이 알아서 프로젝트를 진행한다.
그리고 감사하게도 학교에서 팀마다 멘토님들이 함께 해주셨다. 우리팀은 우리학과를 졸업하신지 오래되지 않으셨던 선배님이셨고 모두가 아는 게임회사의 개발자로 근무하고 계셨다. 멘토님과 우리 팀은 Microsoft Teams를 이용해서 미팅을 진행했고 약 4회정도 진행됐다.
최종보고서에 작성된 내용이다. 소요시간만 보면 한학기 프로젝트치고 아주 쉽게쉽게 진행된 것 같지만 팀원 개개인이 코드를 분석하고, 오너와 소통하고 코드를 추가/수정하는 시간을 본다면 절대 쉽지만은 않았다.
초반 미팅을 진행하며 기여할 프로젝트를 선정하는 것이 가장 어려웠고 정말 오래 걸렸다. 후보로 모은 레포만 열을 넘었던 것 같다.
멘토님과 함께 한 미팅에서는 우리 팀이 진행한 내용을 깃허브를 통해 확인하시고 개선해야할 점, 경험담을 알려주시거나 팀에서 고민이 있다면 공유한 것을 듣고 조언해주시기도 했다. 가장 기억에 남는 조언이 있다면 issue나 pr를 날릴 때 설명을 보지않고도 이해하기 쉬운 gif나 이미지를 첨부하는 것이 좋다는 점! 프로젝트 내용 외에 선배님으로서 진로 조언도 해주셨다. 👏
✔️ Contributor에 내 얼굴 올리기
지금은 프로필 상태가 아예 바꼈지만 flexboxfroggy에 들어가면 메인에서 여전히 내 깃허브 프로필 아이콘을 찾을 수 있다 🙃
Merge된 것까지 :)
마지막으로 너무 오래돼서 많이 까먹었지만 당시 받았던 피드백이나 유의할 점, 꿀팁 등에 대해
✔️ 오픈 소스 기여 시 유의할 점
- 불필요한 코드 수정은 삼가기
팀에서 직접 코드를 수정거나 작성한 것이 아니라 불필요하다고 생각되어 기존에 있던 공백이나 안쓰는 코드를 지워서 커밋하는 일이 있었는데, 이는 owner를 혼동시킬 수 있기 때문에 삼가도록 피드백받았다.
- issue나 pr시 변경사항을 한 눈에 알 수 있도록
클릭 기능을 구현 후 pr을 날릴 때 함께 첨부한 gif 파일이다. 이처럼 어떤 기능을 구현한 것인지 시각적으로 보여줄 수 있다면 같이 보여주는 것이 어떤 기능인지 글을 자세히 읽지않더라도 owner가 파악하기 쉬울 것이다.
-
최소한의 코드 수정 후 커밋
-
커밋 메세지 형식 맞추기, 직관적인 메세지
위 두 내용은 다른 상황에도 공통적으로 적용되는 사항인 것 같다. 최소한의 기능 또는 코드를 수정하고 각각에 대해 커밋메세지를 남겨야 나중에 다른 사람(또는 project owner)이 봤을 때 변경사항을 이해하기 쉽다. 커밋 메세지 형식을 맞추는 것과 세부 수정내용을 짐작할 수 있는 직관적인 commit message를 남겨야하는 이유도 마찬가지
- open source에 명시된 license의 종류에 대해 알아보기
