기업협업 프로젝트 중 타자를 치는 것처럼 한 글자씩 써지고 지워지는 typewriter 효과를 넣어 꾸며야 하는 페이지가 있었다. Vue Writer 라이브러리를 이용해 내가 필요로 하는 기능이 없어 추가한 뒤 PR을 날렸고, 한 시간도 되지 않아 머지됐다.
처음엔 이 라이브러리가 아니었다
원래 처음에는 Vue Typer를 사용하려 했었다. 검색했을 때 상단에 위치하기도 했고, 주간 다운로드 수도 4자리 수로 적지 않았다. 무엇보다 우리가 프로젝트에서 사용했을 때 유용하게 사용할 수 있는 기능을 제공했다. Vue Typer는 typed 메서드를 이용해 작성이 완료되면 작성된 문자열을 인자로 콜백함수를 실행시킬 수 있다. 나는 지금 아이콘 폰트 패키지를 제작하는 프로젝트를 진행 중인데, 타이핑 효과가 끝난 뒤 작성된 문자열을 실제 아이콘의 클래스 네임에도 반영하고 싶었다.
하지만 치명적인 문제점이 있었는데, 바로 Vue3를 지원하지 않는다는 점이었다. 마지막 배포는 4년 전이었고, 작년 3월에 Vue3 지원에 관한 이슈가 올라왔지만 개발자의 답이 달리지 않고 있었다. 우리 프로젝트는 Vue3로 작업하고 있었기 때문에, 이 라이브러리를 Vue3로 마이그레이션할지, 아니면 다른 라이브러리를 찾을지 선택해야 했다.
나는 typed 메서드를 통한 효과를 꼭 활용하고 싶었기 때문에, 팀원에게 내가 마이그레이션을 해보겠다고 했지만 실패했다. 하나의 라이브러리를 마이그레이션한다는 것은 Vue를 접한지 3주차인 나에게는 너무나도 버거운 일이었다. 그동안 팀원은 애니메이션을 구현하기 위해 Vue Writer 라이브러리를 설치해 구현을 하고 있었다. 애초에 Vue3를 지원하는 라이브러리를 찾았던 것이므로, 프로젝트에 적용하는 것은 어렵지 않았다. 하지만 이번엔 typed 메서드를 활용할 수 없다는 점이 단점이었다.
원하는 게 없으면 추가하면 된다.
그렇게 팀원의 작업을 옆에서 지켜보던 중, 필요한 기능이 없으면 그냥 만들면 되는 거 아닌가? 라는 생각이 들었다.
마이그레이션을 시도하면서 typed 메서드가 동작하는 원리를 살펴보았었고, Vue Writer 라이브러리는 상대적으로 구조가 단순했기에 도전해보기로 했다. 먼저 내 계정으로 fork를 한 뒤, clone을 받아 feature/typed 브랜치를 생성해 작업했다. 사실 말은 거창하지만, 내가 추가한 라인은 총 네 줄에 불과하다.
Vue Writer의 로직 분석, 그리고 추가
Vue Writer는 타이핑하는 단어를 this.array[this.arrayIndex]로 찾아 반복문을 돈다. 그리고 그 반복문 안에서 문자열의 인덱스를 순회하며, 현재 순회하는 인덱스와 문자열의 length를 비교하는 로직이었다. 현재 순회하는 문자열의 인덱스와 문자열의 length가 같다면 문자열의 끝에 도달한 것이므로 다음 문자열로 넘어가게 된다. 그리고 이 지점이 타이핑이 완료된 지점, 내가 콜백 함수를 넘겨주고 싶은 지점이었다.
원하는 로직을 작성할 지점을 파악했으니, 이제 로직을 작성할 차례였다. 로직은 Vue Typer의 것을 많이 참고했다. 컴포넌트에 onTyped라는 메서드를 만든 뒤, Vue의 이벤트 에밋을 이용해 상위로 typed라는 이벤트에 문자열을 인자로 함께 담아 보내는 로직이다. 이렇게 로직을 작성하면 개발자는 Vue Writer 컴포넌트에 @typed="(typedString) => { ... }" 속성을 추가해 타이핑이 완료됐을 때 원하는 콜백함수를 작성할 수 있다.
간단하게 typedString => console.log(typedString)으로 확인해보니 원하는 대로 잘 작동했다. 팀원에게도 코드를 공유해 콜백함수를 통해 페이지에서 내가 원하던 효과를 구현할 수 있었다.
PR을 날리려고 했었는데요...
내가 원하는 기능을 구현했으니 사실 여기서 마쳐도 되지만, 이왕 기능을 추가한 거 PR을 날리기로 했다. typed 메서드는 분명 활용도가 높을 것이라고 생각했다.
그렇게 커밋과 푸시를 한 뒤 PR 제목을 수정하려 하는데... 그만 손이 미끄러져 PR 작성 완료 버튼을 눌러버렸다. 내용은 하나도 없이, 따옴표 하나를 미처 적지 못한 Add: Create 'typed method 제목을 달고 PR이 올라가버렸다.
더군다나 팀원과 약속한 집에 돌아갈 시간이 임박해서, 내용을 정리해서 적을 시간이 부족했다. 급하게 제목에 따옴표 하나를 추가하고, 내용에 손이 미끄러져 PR이 올라가 버렸다고, 작성 중인 PR이라고 추가했다.
그리고 엘리베이터를 타고 내려왔는데... 머지가 됐다. (어?)
추가한 내용이 많지 않아서였을까? 내용도 적지 않은 PR을 올린지 한 시간도 안 되어 머지되었다는 점이 당황스러웠지만, 어쨌든 오픈소스에 처음으로 기여하게 됐다.
해당 PR은 자세한 사항을 적어 내용을 수정할 예정이다.
이제 나도 오픈소스 컨트리뷰터?
PR이 머지되면서, 레포지토리의 Contributors에 내 이름이 들어가게 됐다. 9천 회가 넘게 다운로드 된 라이브러리에 아주 작게나마 기여했다. 거기다 기능을 추가하는 쪽으로 기여하다니! 개발을 공부한 뒤 항상 꿈꿔왔던 일을 실현할 수 있어 기쁘다.
앞으로도 라이브러리를 사용하면서 불편한 점이 있거나 내가 필요한 기능이 없으면 적극적으로 코드를 뜯어보고, 개선하고, 추가하는 일을 해야겠다! 🥰
