잊을만하면 찾아왔던 오디오 재생버그

 글로벌 서비스를 개발하면서 다루기 어려웠던 부분 중 하나가 오디오 관련 이슈다. 다양한 브라우저, 네트워크, 운영체제 환경을 가진 유저들이 있어서 런타임에서 다양한 이슈가 발생했다. 특히 에러 없이 오디오 재생이 안되거나, 혹은 재생 중간에 멈추는 버그가 가끔 발생했는데 원인을 찾기가 까다로웠다. 정확한 문제의 원인을 알기위해서 코드 레벨부터 브라우저, 네트워크단까지 확인하며 원인을 찾아 해결했다.

 

주요 이슈

"오디오가 나오지 않아요", "오디오가 조금 재생되다가 멈춰요"

몇몇 유저들에게 위와 같은 오디오 재생 버그가 리포트 되었다. 웬만하면 재시도를 하거나 브라우저 캐시를 제거하면 정상으로 돌아 왔지만, 그렇지 않은 유저도 아~주 소수 존재했다. 자주는 아니지만 주기적으로 동일한 현상이 생겨 정확한 원인을 찾아야 겠단 생각이 들었다. 

 

원인

열악한 네트워크 환경

 결론부터 말하면 문제의 원인은 유저의 네트워크 환경과 관련이 있었다. 특정 MediaError 에러가 발생하지 않아서 직접 유저를 모니터링 하다가, 접속한 국가의 인터넷 환경이 열악할 수도 있겠다는 의심이 들었다. 비슷한 네트워크 환경을 셋팅하기위해 유저 국가의 VPN을 사용해 보았다. 크롬 개발자 Network탭에서 네트워크 속도를 낮추어가며 다양하게 테스트하다보니 같은 현상의 버그가 재현되었다.

  네트워크 환경이 좋지 않은 경우 오디오를 다운받는 시간이 오래걸렸다. 큰 파일의 경우 분단위 까지 다운로드 시간이 기록되었다. 그 사이 유저에게 어떤 안내도 하지 않아서 재생이 안되는 것 처럼 보인 경우도 있고, 다운로드 중간에 문제가 생기는 경우도 있었다. 또한 재생이 시작되어도 버벅거리는 문제가 있었다. 재생이 원활하지 않으니 3분짜리 오디오가 7분동안 재생된 케이스가 있었다. 하나 배운 점은 *canplaythrough 이벤트 시점에 오디오가 재생된다고 해도 원활한 오디오 재생이 100% 보장되는 건 아니라는 것이다. 그저 충분히 오디오 데이터가 다운로드 된 시점 그 이상 그 이하도 아니다.

 

*canplaythrough: 버퍼나 멈춤이 발생하지 않을 만큼 오디오 데이터가 충분히 다운로드 된 후 발생하는 이벤트. 하지만 오디오 데이터가 충분히 다운로드 된거지 완전히 다운로드 된 건 아니다. canplaythrough 이벤트 발생 후에도 오디오 재생과 다운로드는 병렬로 작업이 진행되는 상태다. 만약 다운로드 속도가 느리면 재생속도에 역전당해 오디오 재생이 멈출 수 있다.

 

해결

mp3 파일 용량 줄이기
비지니스로직 개선하기

 1. mp3 파일 용량 줄이기

 2. 비지니스 로직 개선하기 - 네트워크가 느린 유저에대한 예외 처리 하기

 3. CDN 서버가 필요하다. 

 

mp3 파일들을 3배 더 압축해서 음질 테스트를 했다. 내가 듣기엔 괜찮아보여서 연관 부서 사람들에게 피드백을 요청드렸고 OK 사인을 받았다. 약 1000개 파일들의 용량을 각 파일당 3배정도 압축했다. 동시에 성능이 5배 정도 개선되었다. 예시로 4.6MB -> 1.6MB로 압축된 파일을 Fast 3G 네트워크 환경 테스트 했더니 다운로드 속도가 50초에서 11초로 줄었다. 

 10초가 지난 후에도 오디오가 재생이 안되면 유저에게 모달을 띄워 안내하는 플로우를 추가했다. 긴 로드 시간 동안 유저에게 안내하기 위함도 있지만 서비스가 멈추었다고 착각하여 문의가 들어오는 걸 방지하기 위해서다.

 아직 검토중이지만 CloudFront 도입을 요청 드렸다. 해외 유저들이 국내에 있는 Origin S3로 요청과 응답을 왕복하는 것은 성능에 좋지 못하다. 유저에게 가까운 CDN 서버에 데이터를 캐싱해두고 요청과 응답이 이루어지면 물리적인 거리가 훨씬 줄어들어 성능에 유리할 것이기 때문이다. 다양한 국가의 해외 유저들이 많은 서비스이기 때문에 CDN 서버는 필요하다고 생각한다.

 결과적으로 한달에 평균 5~6건 들어오던 유저 문의가 배포 이후 한달동안 0건이었다. 아직까진 다행이다.... 묵은 숙제를 해결한 기분이라 매우 홀가분하다. (지켜봐야겠지만)

(+ 23.09.24 - 2달간 유저문의 0건!!)

 

더 나아가기

적절한 가이드 제시하기

때로는 적절한 가이드를 제시하는 것이 좋은 해결 방법이 될 수 있다.

 

- 시크릿 모드에서 시도하기

- 확장프로그램, 플러그인, 방화벽 비활성화

- 크롬브라우저 권장 또는 서비스에 최적화된 브라우저 권장

- 브라우저 쿠기와 캐시 삭제하고 컴퓨터 재부팅

- 브라우저 탭 많이 열려있는 경우 필요한 것외 닫기

- 브라우저 버전 업데이트

- 인터넷 속도 확인

- 네트워크 기기나 컴퓨터 재부팅

- 오디오 볼륨 확인