Android APP 숏츠 영상 플레이어 설계 : 다음 개발자를 고려하여
온스탕탕 ep2. 후속편
안녕하세요! 프론트개발팀 APP파트에서 CJ온스타일 Android 개발을 맡고 있는 김지은입니다.
미디어 PJT (a.k.a. 미피) 개발자
프론트개발팀에서는 Android APP, iOS APP, Web(+마크업), 이렇게 3가지 플랫폼의 프론트를 제공합니다.
프로젝트를 진행할 때마다 각 플랫폼 담당자가 그룹을 이뤄 함께 스펙을 논의하곤 하는데요.
플랫폼 별로 다른 특성은 유지하되, 각 기능이라던가, 예외 처리 플로우라던가, 사용자의 경험을 최대한 동일하게 지원하기 위해 크로스 체크를 하고 있습니다.
팀즈에 배너 기능이 없어서 아쉬웠던 참인데..!! 최강 미피 💪
미디어 PJT 첫번째 미션 — 숏츠 영상 플레이어 개발(APP)
CJ온스타일 APP에서 이제 숏츠 영상을 만나실 수 있는데요, Android APP 개발을 하면서 제가 중점적으로 고민한 부분은 공통화, 재사용, 확장성 이었습니다.
공통화, 재사용, 확장성을 고려한 설계
1. 메인 화면 모듈
숏츠 상세에 진입 가능한 모듈 포함 2개의 신규 모듈을 개발하게 되었는데, 앞으로 추가될 신규 동영상 모듈에서 모두 동일한 재생 정책을 사용할 계획이라고 했습니다.
공통 부분을 잘 구현해서 앞으로 누군가 추가 개발을 할 때 수월하게 해야겠다 생각했습니다. (안녕하세요, 누 입니다.)
- interface 의 default 함수로 동영상 재생 정책을 구현 → 각 모듈에서 이 함수만 호출해주면? 끝!
- 라이프사이클, 스크롤 이벤트를 받아 처리하는 동영상 뷰를 정의 → 각 모듈에서 이 뷰만 add 해서 사용하면? 끝!
아래는 설계 UML 의 일부를 발췌한 내용입니다.
2. 숏츠 상세 화면
미디어 PJT로 피드 (동영상 상세화면) 중 숏츠를 개발하게 되었습니다. 앞으로 피드에서 숏츠 이외에도 다양한 타입의 동영상 서비스를 제공할 계획이지만, 아직 구체적인 기획은 없는 상태였습니다.
그렇다면! 비디오를 가진 Base 화면을 만들고 그 위로 각각의 레이어를 동적으로 붙일 수 있도록 확장성 있게 구조를 미리 잡아놔야겠다 생각했습니다.
공통으로 사용할 수 있는 기능은 ViewModel 에 구현해두고, Base 를 상속받아 각 타입 별로 원하는 레이어를 구성하도록 처리했습니다.
물론, 향후 추가될 피드의 디자인이 드라마틱하게 바뀐다면 새로 개발이 필요하겠지만… 그것은 미래의 “누”가 잘 하겠졍…
3. 동영상 캐시 히트 GA
미디어PJT를 진행하기에 앞서 APP에서는 속도와 비용 적인 측면을 고려하여 로컬에 동영상 캐싱을 할 수 있는 기반을 다져놨었는데요.
실제로 사용자들이 같은 동영상을 얼마나 반복적으로 보고있는지, 동영상 캐시 효율을 확인해보고자 재생 관련 GA를 전송할 때 캐시 히트 여부를 추가로 수집해보기로 했습니다.
미디어PJT 이외의 프로젝트에서도 데이터 수집을 하고 싶은 니즈가 있을 거라 판단하여, 이 부분 역시! 공통 영역에 enabled 플래그와 함께 캐시 히트 여부를 체크할 수 있는 함수를 제공하였습니다.
글만 보면 너무너무너무 완벽해 보이는데~~ 오픈 당일에 우당탕탕 핫픽스 나간건 안 비밀🤢 후후…그래도 성공적으로 런칭! (이라고 말해죠요오오…🥲)
앞으로도 계속해서 업그레이드 될 CJ온스타일 숏츠 많관부!
미디어 전용 탭도 생길 예정이니 기대해주세용!
