[온스탕탕ep.2] 너튜브 말고 온스타일에서 숏츠보기 (숏츠 프로젝트 a-z)

CJ온스타일 tech
CJ 온스타일 기술 블로그
7 min readFeb 16, 2024

온스탕탕💜 온스타일 IT 담당자들의 우당탕탕 비하인드 스토리

컨텐츠 강자 CJ온스타일에서 숏츠 영상을 선보입니다.

숏츠 영상을 새롭게 APP에 보여드리기 까지 APP 기획, 개발, 디자인은 물론 영상을 관리하기 위한 어드민 시스템 구축 이야기까지 그 우당탕탕 비하인드를 소개해 드립니다.

영상으로 고객의 취향을 공감하기 위한 여정

🎤서비스 기획자 Dongwon Kim님, 문호은님 Says

첫번째: 숏츠로 유입 시킬 수 있는 전시구좌를 만들었습니다.
선행 작업으로 ‘영상 자동 재생 정책’을 변경 하였고, 주요 서비스 영역(검색, 상품상세 등)으로 확장 계획을 가지고 있습니다.

두번째 : 영상 보기(무한탐색)이 가능한 숏츠플레이어를 만들었습니다.
현재는 다음 영상 보기 추천 로직이 단순화되어 있지만, SEG별(성/연령) 그리고 개인화 활동기반 추천 방식으로 개선을 진행하고 있습니다.(5월 즈음..)
마지막으로 : 다양한 지표(재생시간, 재생수, 좋아요, 성/연령 등)를 집계하고 있고, 하반기에는 유의미한 지표를 참고하여 개인화 영상 추천으로 발전시켜 나가려고 합니다.

숏츠는 단순히 상품이미지를 영상으로 변경해서 보여준다는 방식이 아닌, 다양한 추천 방식을 통해서 영상에 유입시키고, 이 영상을 통해서 상품상세로 진입시키는 것이 최종 목표라고 생각합니다.

더 많은 영상을 보게 만들기 위해, 추천 방식을 지속적으로 고도화 예정입니다.

어떻게 하면 사용자들이 숏츠 영상에 빠져들 수 있을까?

🎤UX 디자이너 H님, 박승혜님Says

미디어 플랫폼으로 진화를 위한 기본기 ‘숏츠 서비스’ 어떻게 하면 유튜브와 틱톡처럼 사용자들이 빠져들 수 있을까?

우리에게 중요한 것은 빠르게 서비스 반영하고, 영상 콘텐츠 노출의 최적화였고, 고민의 시간을 줄이고 효율을 높이기 위한 디자인 고려사항을 3가지로 정의 하고 프로젝트을 진행하였습니다.

자연스러운 인터랙션과 동선 설계
사용자가 영상을 탐색하고 상품을 구매하는 과정에서 자연스러운 인터랙션을 제공하였고. 예를 들어, 숏츠 영상을 스크롤하거나 스와이프하여 다음 영상으로 이동할 수 있도록 설계하고, 관련 상품을 바로 확인하고 구매할 수 있는 경로를 제공하여 사용자의 편의성을 높였습니다.

최적화된 UI/UX 디자인
사용자가 영상 콘텐츠를 쉽게 탐색하고 구매할 수 있도록 최소화된 UI/UX 디자인을 고려하였고, 너무 복잡한 인터페이스는 사용자의 혼란을 초래할 수 있으므로, 간결하고 직관적인 디자인을 통해 사용자가 원하는 콘텐츠에 빠르게 접근할 수 있도록 하였습니다.

영상 비율 최적화
다양한 영상 비율에 대한 최적화는 사용자가 다양한 디바이스에서 영상을 시청할 때 편의성을 제공하고,

영상 제작의 다양한 비율을 고려하여, 다양한 비율의 영상 콘텐츠를 제공하여 사용자들이 언제 어디서든 쾌적한 시청 경험을 할 수 있도록 합니다.

“시작은 미약하나 끝은 창대하리라” 우린 유튜브를 뛰어 넘을 것입니다. ㅎㅎㅎ

빠른 재생은 물론, 앞으로의 확장성을 고려한 영상 플레이어 구조 설계

🎤APP 개발자 김지은님, 강병영님 Says

먼저 유저의 사용성을 최우선으로 고려해서 작업했습니다.
자연스러운 스크롤, 빠른 동영상 재생 뿐만 아니라 발열은 없는지, 메모리에 누수가 발생하지는 않는지 등등 세부적인 부분도 체크하여 개발했습니다. 동영상 재생 속도 부분이나 네트워크 사용량 등 사용성 측면에서 아직 개선할 부분이 남아있는 부분은 지속적으로 고쳐나갈 예정입니다.

두 번째로 쉽게 확장이 가능한 구조로 만들었습니다.
추후 TV, MLC 라이브 방송을 숏츠 페이지 내에 추가할 수 있다는 가능성 때문에 화면 각 영역의 컴포넌트 구조나 상속, 기능별 인터페이스 구조 등 확장하기 편하도록 개발했습니다.

마지막은 정확한 GA 데이터 수집입니다.
숏츠 서비스가 의미 있는 성과를 내고 있는지 분석하기 위해서는 정확한 데이터 수집이 꼭 필요했는데요. 배포 후 수집 데이터의 정합성이 틀어지는 케이스가 있어서 객체의 생명 주기를 다시 분석하고 데이터 정확하게 수집할 수 있도록 변경했습니다. 이를 바탕으로 추후 좀 더 고도화된 데이터 수집이 필요할 경우에도 쉽게 대응이 가능할 거라고 생각합니다.

Android APP 개발자 김지은 님의 자세한 이야기를 아래에서 확인해 보세요

숏츠 영상이 슉슉 넘어가게 하기 위한 Mobile Web 개발자들의 고민

🎤모바일 Web 개발자 , ㅇㅂㅇ Says

  • iOS의 HTML video 태그 관련 이슈를 해결한 과정
  • 여러 영상을 로드하고-재생하고-멈추고를 반복하는 만큼 동영상의 랜더 방식을 안정적으로 가져가기 위한 고민들
  • 마음에 안 들면 멈춰버리는 까다로운 웹브라우저의 자동재생 정책

들을 고민하며 정말 우당탕탕 해결해 나갔는데요. 자세한 내용은 아래 글에서 확인해 보세요 :)

새로운 서비스의 효과를 분석하고 개선 방향을 고민할 수 있는 기반 데이터를 만드는 작업

🎤데이터 분석가 shinjunghee님 Says

영상 데이터 수집 기준을 마련했습니다.
기존에 영상이나 방송을 분석하던 기준을 참고 삼아 프론트기획-개발조직이 함께 모여 데이터를 만드는 기준을 정의하였습니다. 개발된 데이터를 기준으로 로그를 잘 쌓아 고객의 탐색 경험과 해당 매장에서 발생하는 매출을 측정할 수 있도록 작업을 진행했습니다.

조직은 수익으로 평가하는 것 또한 필요한데요.
영상을 통해 발생한 주문이 얼마나 수익으로 남는지 측정하기 위한 기준을 수립하고 데이터 개발 작업을 진행하여 필요한 경영관리 부서에 이를 제공할 수 있는 기반 또한 마련했습니다.

아직 오픈 직후라 서비스 관련된 효율은 크지 않고 앞으로도 서비스를 확대하는 것이 필요하지만, 현재의 몇가지 데이터를 통해서도 개선점을 확인하여 서비스를 수정/고도화 하는 부분도 함께 진행 중입니다.

온스타일에 보여질 영상들을 효율적으로 관리하기 : 어드민 시스템 구축까지

🎤영상 어드민 시스템 기획자 Jh Park님 Says

최근 유튜브, 네이버, 인스타그램 등 많은 서비스에서 숏츠를 활용하고 있기 때문에 우리 CJ온스타일에서는 상품과 숏츠 영상을 어떻게 연관 지어야 할지에 대해서 개발팀과 함께 많은 고민을 진행 했습니다. 특정 부서에서 요청을 한 기능이 아니기 때문에 저희끼리 기능에 대해 아이데이션도 진행하고, 주로 사용하실 MD 분들의 편의성을 생각하면서 화면을 설계하는 과정을 거쳤습니다.

🎤영상 어드민 시스템 개발자 범범님 Says

많은 영상을 등록하고, 많은 영상을 노출하며 영상들을 사용자의 취향에 맞게 노출할 수 있는 내부 데이터를 쌓아야 했기에 영상 노출의 최적화 및 관리시스템이 필요했습니다.

AWS의 VOD 기술 기반으로 온스타일의 영상 관리시스템 (VAS, Video Admin Sytem)을 구축했는데요, 그 과정에서 많아지는 데이터를 줄이기 위한 노력도 필요했습니다. 자세한 이야기는 아래에서 확인해 주세요!

[Team CJ온스타일 숏츠] CJ ENM COMMERCE DIV. 서비스 기획 Dongwon Kim, 문호은 / UX 디자인 H, 박승혜 / APP 개발 Android 김지은, iOS 강병영 / Mobile Web 개발 , ㅇㅂㅇ / 데이터 분석 shinjunghee / Video Admin System 기획 Jh Park 개발 범범

--

--