천천히 성장하는 익스텐션
성장하는 익스텐션 그리고 나
유저 피드백을 통해 꾸준히 개선한 결과 2.0.0 버전을 릴리즈 했습니다.
이번 포스팅은 2.0.0 버전을 기념하여 그동안 걸어왔던 과정을 기록하려 합니다.⭐️
2022년 10월 16일 영어로부터 고통받는 스스로를 구원하기 위해 만든 자막 크롬 익스텐션이 탄생한 날입니다.
정확한 표현으로는 1.0.0 버전을 릴리즈한 날입니다.
영어와 한글 자막을 함께 보여주는 방식을 통해 영어 강의에 대한 어려움, 오역으로 인한 불편함을
해소할 수 있었고 많은 영어 강의를 부담없이 볼 수 있다는 점에서 너무나도 고마운 익스텐션입니다.
2023년 03월 12일 우리 자막 크롬 익스텐션은 다양한 유저 피드백을 통해
2.0.0 버전으로 재탄생하게 되었습니다. 🎉
2023년 04월 06일 꾸준히 사용자가 늘어나면서 현재 45명이라는 유저가 익스텐션을 사용해주고 계십니다.
(2023년 06월 02일 기준, 사용자 100명에 도달하게 되었습니다 🎉)
(2024년 03월 31일 기준, 사용자 1000명에 도달하게 되었습니다 🎉🎉)
2.0.0 버전으로 업데이트를 하는 동안 주변 사람들의 적극적인 홍보와 피드백 덕분에
자막 크롬 익스텐션의 사용자는 꾸준히 늘어나고 있습니다.
(홍보해주시고 사용해주시는 분들 정말 감사합니다 🙏)
지속적인 피드백, 개선이란 선순환의 고리를 통해 성장한 크롬 익스텐션
그리고 그 과정 속에서 함께 성장하고 있는 나
이 글을 통해 걸어왔던 과정, 경험, 느낌을 공유하고자 합니다.
유저 피드백
1.0.0 버전을 배포한 후 얼마 지나지 않아 피드백들이 들어왔습니다.
- 익스텐션이 넘 못생겼어요ㅠㅠ... 😰 (헉...)
- 스위치를 통해 자막 on, off 하는 기능을 추가해주세요!
- Udemy, Youtube 도 지원 해주세요!
- 한글 자막을 더 크게 보고 싶은데 Font Size 가 조절되면 좋겠어요!
오우! 생각보다 많은 유저 피드백이 들어왔습니다!
이 때 당시 기분은 되게 신나고 설레고 당장이라도 개발 후 배포하고 싶다는 생각이 들었습니다.
설레는 마음을 진정시킨 후, 각 요구사항의 우선 순위를 먼저 생각했습니다.
피드백을 듣는 과정에서 공통된 피드백 두 개가 있었습니다.
1번 익스텐션이 넘 못생겼어요ㅠㅠ... 😰
2번 스위치를 통해 자막 on, off 하는 기능을 추가해주세요! 입니다.
익스텐션이 넘 못생겼어요... 네.. 이 부분은 정말 할 말이 없었습니다.
"얼른 배포해서 쓰고 싶어서..🥺" (구차한 변명을 툭...) 라는 조그마한 한 마디와 함께 후다닥 개선을 시작했습니다.
먼저 사용성에 큰 문제를 끼치고 있는 2번 문제 해결을 목표로 시작했습니다.
(못생긴 1.0.0 버전입니다 ㅠㅠ.. 버튼을 누르면 자막을 표기합니다)
스위치 도입
스위치 도입하기 전, 동작 방식은 아래와 같습니다.
- 어떠한 동작도 하지 않을 경우 자막이 보이지 않습니다.
- translation 버튼을 누르면 자막이 보입니다.
유저가 원하는 동작은 자막의 on, off 입니다.
단순한 동작이지만 요구사항을 구체화 해보겠습니다.
- 스위치를 클릭하여 자막을 표시하고, 끌 수 있어야 합니다.
- 변경된 상태는 다른 강의를 듣더라도 유지되어야 합니다.
먼저 1번 요구사항을 구현해보겠습니다.
1.0.0 버전 자막 크롬 익스텐션은 MutationObserver 를 통해 자막 활성화를 했습니다.
자막 on, off 는 MutationObserver disconnect 를 통해 충분히 구현이 가능할 것으로 판단했습니다.
그러나 첨부된 PR 링크의 동영상을 보시면 동작이 이상하다는 것을 느낄 수 있습니다.
바로 스위치 off 했을 때 바로 자막이 사라지지 않는다는 점입니다.
단순히 대상 DOM 을 추적하고 있는 신호만 끊었을 뿐
이 시점에서 자막을 삭제하지 않으므로 다음 자막으로 넘어갈 때 삭제하는 것입니다.
disconnect 를 실행할 시점에 자막 삭제도 함께 실행하면 해결할 수 있을 것 같았습니다.
해당 기능을 바로 구현했습니다.
이렇게 스위치 자막 활성화, 비활성화 기능을 탑재한 1.1.0 버전을 릴리즈하게 되었습니다. 🎉
다음 우선 순위는 못생긴 레이아웃 개선이였습니다.
그러나 스위치 도입 후 다른 피드백이 더 많이 들렸습니다.
바로 Udemy, Youtube 도 지원 해주세요! 입니다.
사이트 지원을 요청하신 분들 중 못생겼다는 피드백을 주신 분들께 물어봤습니다.
"왜 레이아웃 개선보다 사이트 지원이 더 필요하다고 생각하신거예요?"
다들 똑같은 답변을 주셨습니다.
스위치로 바뀌니깐 이전 버튼보다 명확하게 상태가 보여서 크게 불편하지 않아요.
문제를 해결할 수 있는 서비스 + 쉽고 익숙한 사용 방식
이 두 조합이 정말 중요하구나 라는 걸 느낄 수 있었습니다.
그래서 가장 많이 들어오는 피드백인 지원 사이트를 늘려주세요! 를 반영하기 시작했습니다.
지원 사이트 늘리기
이 피드백 반영에 앞서 제가 번역 익스텐션을 만들 때 수립했던 목표를 말씀드리고 싶습니다.
다양한 사람이 쉽게 기여할 수 있는 익스텐션을 만들어보자!
저는 우리 자막 익스텐션을 다양한 사람이 쉽게 기여할 수 있는 형태로 만들고 싶었습니다.
처음부터 그렇게 만들기는 어려울테니 단계를 만들었습니다.
- 개발자 분들이 코드를 이해하고 기여할 수 있는 수준
- 개발자 분들이 코드를 이해하지 않고 기여할 수 있는 수준
- 일반인 분들이 쉽게 기여할 수 있는 수준
먼저 개발자 분들이 코드를 이해하고 기여할 수 있는 수준 을 목표로 시작했습니다.
사이트에서 필요한 정보는 간단합니다.
자막 Text 의 DOM Element 그리고 그 DOM Element 를 감싸는 DOM Element 의 정보입니다.
이 정보를 별도의 파일로 분리하여 URL 을 통해 접근할 수 있도록 구현했습니다.
그리고 이를 기반으로 Udemy 를 지원하게 되었습니다! 🎉
(이 과정에서 고민한 여러가지가 있습니다. 아래 PR 에서 확인해보실 수 있습니다.)
이렇게 Udemy 도 지원하는 1.2.0 버전을 릴리즈하게 되었습니다. 🎉
이 후로 익스텐션 스타일 개선, Youtube 지원까지 하며 1.3.0 버전까지 빠르게 릴리즈할 수 있었습니다. 🎉
저는 1.2.0 버전을 진행하면서 개발자 분들이 코드를 이해하고 기여할 수 있는 수준 라는 목표가 있었습니다.
이 때 회사 동료 개발자님께서 다른 사이트를 지원해주는 PR 을 올려주셨습니다! 🤗
(정말 정말 정말 감사합니다~~)
코드 리뷰를 진행하면서 느낀 부분은 필요한 부분만 잘 캐치하셔서 구현해주셨다는 점입니다.
코드를 이해하고 어떤 데이터를 넣어야하는지 파악하는데 시간이 걸리셨다고 하셨지만
목표였던 코드를 이해하고 기여할 수 있는 수준 은 이뤘다고 생각합니다.
정말 큰 보람을 느꼈던 순간이였습니다.
다양한 사람들이 기여할 수 있었으면 했고, 기여해줬으면 했습니다.
그 첫 발걸음을 떼주셨고 너무나도 성공적인 결과였습니다!
폰트 사이즈 조절
그리고 이와 더불어 초기 피드백 중 마지막 남은 하나인 폰트 사이즈 조절 기능도 진행했습니다.
자막 크롬 익스텐션의 코드는 MVC 패턴 기반으로 구현되었습니다.
앞으로 추가될 기능들이 괘 많고, 각 기능마다 필요한 데이터, 화면 조작 등을 감안했을 때
목적에 맞게 로직을 분리하고, 관리할 수 있게 디자인 패턴이 필요할 듯하여 적용했습니다.
MVC 패턴을 처음 사용해보는 것이기도 하고, 이해도가 높지 않아 여러 착오도 많았습니다.
다만 MVC 패턴을 적용한 덕분에 데이터가 흘러가고 컨트롤 되는 어떠한 방향성을 수립하는데
큰 도움을 받았습니다.
이번 폰트 사이즈 조절 기능을 구현할 때도 도움을 많이 받았습니다.
FontSlider 라는 View 를 추가하고, model 에 font size 에 대한 값을 관리하며
유저 인터렉션을 기반으로 View, Model 을 Controller 가 핸들링 하도록 구성했습니다.
이렇게 Epic React 지원 , 폰트 사이즈 조절 기능 과 함께 1.4.0 버전을 릴리즈 하게 되었습니다! 🎉
고민
그동안 사용자 피드백을 받고 빠르게 기능을 구현하고 배포를 했습니다.
1.0.0 버전을 배포한 2022년 10월 16일부터
1.4.0 버전을 배포한 2022년 12월 23일까지..
약 두 달 동안 받았던 피드백을 모두 반영하고, 정비할 시간을 가졌습니다.
내가 익스텐션을 사용하면서 불편한 점은 없었나?
코드는 괜찮나? 와 같은 스스로에게 물음을 던지며 개선을 위한 시간도 가졌습니다.
그리고 그 과정에서 한 개의 피드백과 익스텐션 지표를 통해 꼭 추가해야할 기능이 떠오르게 되었습니다.
피드백은 회사 외국인 동료로부터 들었던 내용입니다.
다른 언어도 지원해주면 좋을 것 같아요!
우리 자막 익스텐션은 영어에 고통받는 저를 구원하는 목적이 1순위였기 때문에
자막 언어는 당연하게도 한국어였습니다.
익스텐션 한국어 지원만 한다고 썼지만 생각 외로 설치하는 지역이 한국 뿐만 아니라 미국, 캐나다, 기타 등등
다양한 국가에서 설치하시는 것을 확인할 수 있었습니다.
그리고 설치해주신 유저분들이 떠나는 수의 지표도 기타 국가 분들이 굉장히 많았습니다 ㅠㅠ
기타 국가가 삭제하는 비율이 절반 이상이였습니다.
지표를 보며 다양한 국가에서 저와 비슷한 문제를 겪고 있다는 점을 느끼게 되었고
이 시점에서 한국어 뿐만 아니라 다양한 언어에 대한 지원도 함께 이루어지는 것이 좋을 것 같다는 생각을 했습니다.
생각을 했다면 바로 실행으로! 바로 개발을 시작했습니다.
지원 언어 확대
모든 언어를 다 지원하는 것도 좋지만 빠른 개발 및 배포를 위해 먼저 일부 국가만 선정해보았습니다.
일부 국가를 선정하는 기준은 지표에서 계속 보였던 국가 위주로 선정했습니다.
일본어, 영어, 중국어, 한국어, 스페인어, 독일어 이렇게 6가지 언어를 선택했습니다.
이 과정도 Font Size 때와 마찬가지로 정해진 워크 플로우에 따라 동일하게 작업했고
덕분에 굉장히 빠른 속도로 개발을 마칠 수 있었습니다.
작은 프로젝트지만 정해진 패턴이 있으니 개발에 되게 큰 도움이 된다는 걸
기능을 추가하면서, 그리고 리팩토링 하면서 많이 느끼게 되었습니다.
이제 다양한 언어를 지원하므로 기존 closed caption korean 프로젝트 이름을 벗어던지고,
closed caption - dual subtitle viewer 이라는 이름으로 변경했습니다!
이렇게 다른 언어 지원 과 함께 2.0.0 버전을 릴리즈 하게 되었습니다! 🎉
후기 및 목표
글을 쓰고 있는 지금 굉장히 뿌듯함을 느끼고 있습니다.
영어의 한계를 느끼며 고통 받는 스스로를 위해 만들었지만
함께 스터디를 하는 팀원들과 함께 사용하며 다른 분들에게도 도움을 줄 수 있었습니다.
그리고 이를 배포하여 04월 06일 현재 45명이라는 유저분들이 사용해주고 계십니다.
내가 만든 것이 누군가가 사용해주고, 피드백을 전달해주시고, 피드백을 반영하여 제품을 개선하는
과정은 정말 즐겁고 행복한 시간이였습니다.
제품을 만들면서 고민하는 시간조차도 즐거웠습니다.
피드백을 어떻게 반영하는게 좋을까?, 더 좋은 방법은 없을까?
어떻게 하면 유저를 더 만족시킬 수 있을까?, 이탈하는 유저는 왜 생기는 것일까?
여전히 많은 고민을 하고 있고, 그 과정 속에서 즐거움과 개선할 수 있을거란 설렘을 느끼고 있습니다.
그리고 기존의 목표와 새로운 목표를 기반으로 더 나아갈 생각입니다.
- 많은 분들이 쉽게 기여할 수 있는 형태의 제품으로 개발하자
- 유저와 쉽게 커뮤니케이션 할 수 있는 방안을 마련하자 - ✅ (2023년 04월 20일 2.3.0 버전부터 지원)
- 영어가 아닌 다른 언어도 번역할 수 있는 기능을 만들어보자 - ✅ (2023년 04월 07일 2.1.0 버전부터 지원)
1번 목표를 위해 꿈꾸고 있는 제품의 모습은 다음과 같습니다. ⭐️
번역할 사이트에서 출력되고 있는 자막을 클릭하면?
그 아래 번역 자막이 출력되고, PR 이 자동으로 등록되는 꿈을 꾸고 있습니다.
2번 목표를 위해 꿈꾸고 있는 제품의 모습은 다음과 같습니다. ⭐️
우선 익스텐션 아래 개인 메일로 의뢰할 수 있도록 Footer 를 추가하고
어떤 사이트를 지원하고 있는지, 또 어떻게 기여할 수 있는지에 대한
정보를 확인할 수 있는 별도의 웹사이트를 구축하고자 합니다.
3번 목표는 목표 자체가 꿈꾸고 있는 제품 자체입니다! ⭐️
1.0.0 버전에서 2.0.0 버전을 배포하는데까지 걸린 시간 148일
많은 유저분들의 피드백 덕분에 다양한 기능을 추가했고 더 좋은 제품을 만들 수 있었습니다.
저는 앞으로도 목표를 가지고 꾸준히 제품을 발전시킬 것입니다.
각 버전 별 익스텐션 사진을 마지막으로 이번 글을 마무리하려 합니다.
긴 글 읽어주셔서 정말 감사합니다!
나의 익스텐션 성장 과정
1.0.0 버전
1.1.0 ~ 1.2.0 버전
1.3.0 버전
1.4.0 ~ 1.5.0 버전
2.0.0 버전
