1. 배경 및 문제 정의
- 유저는 상세 페이지에 진입하기 전 콘텐츠를 체험할 수 있는 방법이 없음
- 이중 depth의 한계 기반 문제 인식
2. 아이디어 발상과 기획 의도
- 기존 API만으로도 콘텐츠 일부를 노출할 수 있음을 발견 (백엔드, 디자인 추가 리소스 사용 감소)
- 홈에서 자연스럽게 콘텐츠를 미리볼 수 있도록 미리보기 기능 제안
- 콘텐츠 탐색 경험 개선과 구매 전환 증대를 목표로 설정
3. 기술적 접근 및 구현 포인트
1) 복잡한 상태 관리
미리보기 플레이어는 단순 재생을 넘어 찜하기, 음향 설정, 호버, 시킹, 재생 상태 등 다양한 상호작용과 상태를 동시에 처리해야 했습니다.
각 요소가 충돌 없이 안정적으로 동작하도록 다음과 같은 구조를 설계했습니다:
- 재생, 정지, 음소거, 재상 시간 등 주요 상태를 명확히 분리
- 공통 로직을 커스텀 훅으로 추상화하여 재사용성과 유지보수성 확보
- 컴포넌트를 기능 단위로 분리하여 로직 복잡도 감소
2) 사용자 경험 향상
사용자에게 부드럽고 직관적인 미리보기 경험을 제공하기 위해 시각적 연출과 상호작용에 집중했습니다.
- 썸네일 위에 영상 플레이어를 덧대는 구조로 자연스러운 시각적 전환 구현
- 호버 시 영상이 재생되고, 마우스가 벗어나면 썸네일로 돌아오는 흐름을 애니메이션 효과로 부드럽게 처리
3) DRM 대응 및 브라우저 호환
콘텐츠 보호를 위한 DRM 환경을 지원해야 했으며, 브라우저마다 지원 방식이 달랐습니다.
- Chrome, Safari 등 주요 브라우저별로 Shaka player 또는 Fair player 사용 여부 결정
- DRM 처리 흐름에 대한 실무적 이해도 확보, 재생 실패 사례 학습
4) 이벤트 설계 및 성과 측정
성과를 정확히 파악하고 후속 실험에 반영하기 위해 사용자 행동 기반 퍼널을 정교하게 설계했습니다.
- 호버, 클릭, 구매 진입 등 핵심 이벤트 정의
- 이 데이터를 기반으로 구매 전환율 측정을 위한 퍼널 분석 체계 구축
- 실험 결과 구매율이 크게 상승(평균 45.28%, 호버 기반 74.3%)했음을 확인하고, 이를 앱 확장의 근거로 활용
4. 회고
실험하고 싶은 아이디어가 있다면, 빠르게 만들어보고 데이터를 통해 반응을 확인한 뒤 다시 제품에 녹여내는 사이클이 가장 효과적이라는 걸 느꼈습니다.
단순히 기능을 구현하는 걸 넘어서, 유저의 행동을 실제로 관찰하고 결과를 제품 개선으로 이어가는 경험이 인상 깊었습니다. 개발자로서 기술뿐 아니라 문제 정의, 실험, 결과 해석까지 능동적으로 관여하는 태도가 중요하다는 걸 배웠습니다.