너무나 바쁜 시간을 보낸것도 있고 자잘한것은 TIL에 정리하고있다보니
개발일지를 주기적으로 잘 갱신하지 못했다.
1차 런칭과 유저테스트를 마친 현재까지를 정리해보고자 한다.
우리 하품은 3일간의 유저테스트 속에서 568명의 사용자가 이용했고,
312명의 데스크톱 / 274명의 모바일 / 9명의 태블릿 유저가 이용했다.
크롬 / 사파리 / 안드로이드 순으로 브라우저 사용율이 높았으며,
가장 의외였던것은 ios 유저가 가장 지표가 높았다는 것이다.
그리고 이와 동시에 너무나도 뼈아팠던 것은
ios 환경에서 서드파티 쿠키가 제한적으로 사용된다는 사실을 제대로 숙지하지 못했던 대가를
치뤘다는 것이다.
너무나도 감사하게도 무려 77명께서 어플리케이션 이용 및 소중한 피드백을 함께 남겨주셨고,
ios 유저분들이 소셜로그인 사용이 불가하거나 , 접속자의 쿠키를 이용하는 서비스 사용에 문제를 겪었다.
급하게 조치하기 위해 userAgent에서 ios 사용자일 경우 소셜로그인 버튼을 나오지 않게 픽스하고
쿠키를 주고받던 부분을 바디를 통해 정보를 전달받게 하여 긴급조치 하였으나,
이미 사태를 파악하고 고쳤을때는 소중한 유저테스트 기간의 절반이 지난후였다.
..........................
새삼 많은 개발자분들이 왜 ios 디바이스를 꼭 한대씩은 가지고 있는지 이유를 알게 되었다.
나는 안드로이드 디바이스에 윈도우만 주구장창 사용하다보니 ios 환경의 테스트를 전혀
진행하거나 ios 생태계를 고려하는 프로덕트를 제작하지 않았던 것이다.
너무나도 뼈아픈 대가를 치루고 크게 배운 순간이었다.
다행히도 이것 이외에는 성능이나 기능에 대해서는 호평을 정말 많이 받아서
NextJs를 사용한 것과 다수의 api를 어떻게든 효과적으로 넣으려고 했던 노력이
보답을 받은 것 같아 너무나도 기뻤다.
하나하나 남이 구현해놓은 것을 보았을때
아 그냥 지도구나 , 아 그냥 검색기능이구나 하던 실제 서비스들을
선배 개발자 분들께서 심혈을 기울여서 하나하나 만들어내고
이를 고객들이 사용할때 피땀눈물을 보답받으셨다는 것을 알게 되는 과정이었다.
그리고 기술적으로는 크게 세가지 경험이 더 있었는데,
1. 트래픽 공격 사건
런칭 첫날 새벽에 누군가가 악의적으로 매크로를 돌려 300개의 게시글을 작성하는 트래픽 공격을 가하였고,
우리 팀원들은 혼비백산 하여 빠르게 해당 계정을 삭제하고 서버 인스턴스를 가동중단하였다.
나는 이날 너무 피로하여 10시에 잠이 들었었고 새벽에 깨어나 소식을 접하자 마자 급하게 컴퓨터를 켜서
악성유저 차단을 위한 미들웨어를 작성했다.
다양한 api에 대응하는 리미터를 다르게 작성하고 ,
정해진 횟수 이상으로 비정상적인 접근을 시도할때 해당 유저를 악성유저로 등록하고 ip 차단을 시켰다.
2. youtube api 이슈
유튜브 실시간 검색 및 유튜브 음원플레이어 기능을 구현하기 위해
Youtube Data Api v3를 사용했었다.
어플리케이션 디자인에 어울리게 만들기 위해 디바운스를 적용한 자동검색 기능을 만들었고,
검색된 링크를 기반으로 동영상을 재생하게 한뒤 , 유튜브 기본 플레이어를 display none을 걸고
커스텀한 플레이어가 나오게 만들었었다.
그러나 세가지 큰 문제를 만나게 되었는데,
-
우리 프로젝트 팀원 전원과 멘토님 및 항해관계자 분들 모두 유튜브 프리미엄 유저였다 ㅡㅡ;
그렇다. 프리미엄 유저가 아니면 음원이 나오는게 아니라 광고가 먼저 나오면서 오류가 발생하기 때문에
디폴트 플레이어를 숨기는 순간 많은 문제가 발생하게 되는 것이다. -
유튜브 정책상 자신들의 기본 플레이어를 통해 재생하지 않은경우 문제가 된다.
이를 고려하기 위해 기존 방식을 갈아엎는 수밖에 없었다.
그래서 처음엔 이 기능 자체를 없앨까 고민을 했지만 위기를 기회로 만드는것이 일류의 조건이라고
생각하기 때문에 이를 대체하기 위한 음성녹음/음성편집 기능과 ncs 음원을 제공하는 방식으로 리팩토링
하게 되었으며 , 이러던 도중 그냥 광고 나오던 말던 신경쓰지말고 유튜브도 기본 플레이어로 제공해버리자!
하는 생각으로 바뀌게 되어 유튜브 기능을 다시 제공했고 가장 크리티컬한 세번째 문제를 직면하게 된다.
- Youtube Data api v3는 하루에 약 100~150건의 검색밖에 허용하지 않는다.
무료 quote의 제공량이 너무 적고 , 아무리 검색량을 줄여서 아껴서 쓰려고 해도 기본 사용량이라는게 존재하기 때문에 실제 서비스에 사용하기엔 너무나도 어렵다.
그래서 url을 사용자가 직접 들고와서 동영상을 지원하는 식으로 리팩토링을 했었다.
그러나 이렇게 하면 솔직히 누가 url을 직접 들고와서 할까.. 라는 생각이 맴돌고 있던 찰나에
번뜩이는 아이디어가 생각났다.
그렇다면 팀원들의 quote 사용량을 연결해버리면 되잖아?
이 생각이 들자마자 7인의 팀원 전원의 youtube data api 신청 및 api key 공유를 시켰고,
이 api key들을 .env에서
이와같이 저장하고
이렇게 api키가 사용량이 끝나 에러를 반환하면 그대로 다음 api key에 연결하여 서비스를 제공하도록 리팩토링 하여 실제 런칭 서비스까지 충분히 사용할 수 있는 quote 사용량을 얻을 수 있었다.
개인적으로는 이번 프로젝트에서 가장 자랑스러운 트러블슈팅 부분이다.
3. PWA / SOCKET IO를 통한 알림기능
소켓을통한 새글/유저접속 알림을 상단에 구현 및
웹푸시를 통한 알림을 함께 구현했다.
소켓은 원래 써봤던 기능이라 크게 어렵지 않았는데 문제는 PWA 및 웹푸시 쪽이었다.
SSE 쪽 보다는 직접 커스텀 서비스워커를 작성하여 PWA 개발과 함께 이어가길 원했기 때문에
유저가 로그인 했을때
공용으로 사용하는 헤더컴포넌트에서 유저의 로그인 여부 및 브라우저의 권한요청 상태를 체크하여
구독 요청을 보내고 사용자는 브라우저의 알람허용 팝업을 통해 구독신청을 하게 구현했다.
그 이후 페이지 우측 상단의 종 아이콘을 통해 소켓/웹푸시 알람을 일괄적으로 ON/OFF 할 수 있게
처리하였고 실제 런칭에서 이부분이 제법 호평을 받았다.
그러나 완벽하게 구현하지 못한 부분이 많고 PWA가 버전이 갱신될때마다 자동으로
새 버전을 다운받게 만드는 부분이 아직 구현되지 않아 아직 더 도전할 수 있는 여지가 많이 남아있다.
이제는 JEST 작성 및 발표자료 준비를 하며 하품 프로젝트 및 항해99의 일정을
마무리하는 단계에 오고있다.
