영상 재생 화면의 중요성!
(에디터 🐳) 영상은 우리의 시간을 가장 많이 할애하는 '콘텐츠'가 아닐까 싶습니다. 이런 영상을 조금 더 편리하게 볼 수 있도록 도와주는 역할이 '플레이어'라고 할 수 있는데요. 지난 뉴스레터에서 '음악 플레이어'를 살펴본 것과 같은 맥락으로, 서비스에 따라 플레이어에서 강조하는 기능은 무엇이며, 어떤 편의를 제공하고 있는지 자세히 살펴보고자 합니다. 오늘 포함된 사례는 네이버TV, 라프텔, 티빙, 유튜브, 시즌, 웨이브입니다.
(에디터 🐥) 영상 재생화면은 유튜브부터 최근 런칭한 디즈니플러스까지 우리와 아주 밀접한 화면이에요. 영상 재생화면은 기본 기능 범위가 정해져 있어 유사한 모습을 많이 띄고 있는데요. 다만, 서비스 특성에 따라 조금씩 다른 기능을 활용하기도 합니다. 오늘은 브이라이브, 디즈니 플러스를 통해 각 서비스가 지닌 영상 재생화면을 자세히 살펴보겠습니다.
(에디터 🐱) 휴가 중!
🐳 기본 구성, 영상 리스트, 설정 화면으로 살펴보는 6개 서비스 플레이어
기본 재생화면 및 기능 구성
콘텐츠 성격이나, 서비스가 중요하게 생각하는 '기능'에 따라 조금씩 다른 플레이어 UI 구성이 눈에 띕니다.
1.네이버 TV
영상에 대한 사용자의 직접적인 행동을 중요하게 생각하고 있어요. (1) 좋아요, 나중에 보기, 공유하기 버튼이 오른쪽 상단 차례로 위치하고 있습니다. 더보기에서는 해상도, 화면비율, 재생속도를 설정할 수 있습니다. (2) 추천 영상은 왼쪽 아래에 있는 버튼을 통해 확인할 수 있는 모습입니다. 영상 내 좌, 우 영역을 두 번 탭 하면 10초 단위로 건너뛰기가 가능하며 기본 버튼은 이전, 다음 영상 보기로 구성되어 있습니다.
아쉬운 점은 좋아요는 선택 여부를 시각적으로 확인할 수 있지만, 나중에 보기는 토스트로만 안내 후 아이콘에 변화가 없어 특정 영상에 대해 나중에 보기를 선택했는지 확인이 어렵다는 점입니다. 현재 재생중인 영상에 대한 사용자의 반응이 우선이라면, 행동에 대한 즉각적인 피드백과 더불어 이후에도 언제든 현재 상황을 확인할 수 있는 장치가 제공되면 좋을 것 같습니다.
2.라프텔
라프텔에서 가장 눈에 띄는 기능은 (4) 오른쪽 중앙에 위치한 ‘카메라’ 버튼입니다. 특정 장면을 캡처할 수 있는 기능으로 애니메이션 콘텐츠를 제공하는 서비스 특성상 좋아하는 장면을 기록하거나 공유하기 위한 목적으로 제공되는 것 같습니다. (2)(3) 좋아요 등의 기능이 여럿 위치한 네이버 TV와 달리 오른쪽 상단에는 화면 잠금과 더보기 버튼만 제공되고 있습니다. 라프텔 역시 네이버 TV처럼 영상 내 좌, 우 영역을 두 번 탭 하면 10초 단위로 건너뛰기가 가능하며, 기본 버튼은 일시 정지만 제공하고 있습니다.
(1) 화면 밝기 조절을 재생 화면 내 가능하다는 것은 좋지만, 별도 컨트롤러를 정확히 조작해야 한다는 점은 아쉽습니다. 볼륨은 디바이스 설정을 활용해야 한다는 점도 마찬가지입니다. 넷플릭스, 티빙, 웨이브 등은 좌, 우 영역을 크게 잡아 화면 밝기와 볼륨 조절을 상대적으로 쉽게 조작할 수 있습니다. 이런 경험을 하고 편리하게 느낀 사용자라면 라프텔의 화면 밝기는 상대적으로 아쉽게 느껴질 수 있습니다. (5) 일시 정지를 누르려다 다음 영상 보기 버튼을 잘못 누르는 경우 등을 대비해 라프텔은 다음화 보기를 하단에 배치한 것 또한 눈에 띕니다. 시리즈로 제공되는 콘텐츠 성격 역시 고려된 것으로 보입니다.
3.티빙
티빙은 (1) 영상의 좌, 우 영역을 활용해 왼쪽은 밝기, 오른쪽은 볼륨 조절을 할 수 있도록 구성했습니다. 영역이 넓게 잡혀있어 엄지손가락 등으로도 충분히 조작할 수 있다는 장점이 있습니다. (2) PIP 기능과 별개로 크롬 캐스트 연결 아이콘을 별도 제공하는 점도 눈에 띕니다. 구글이 직접 서비스하는 유튜브에서만 볼 수 있는 기능이기 때문입니다. 그 외 화면 잠금과 더보기 버튼을 제공, 화면 비율과 기능 소개 내용을 확인할 수 있도록 구성된 모습입니다.
(4) 티빙은 여러 콘텐츠가 섞여 있습니다. 실시간 채널을 볼 수도 있고, 여러 에피소드로 구성된 시리즈나 영화 등 단편으로 구성된 콘텐츠 재생이 가능합니다. 그래서 추천 영상을 어떻게 구성할까 궁금했는데요. 채널을 기준으로 하면 현재 보고 있는 채널 외 다른 ‘인기’ 채널을 볼 수 있는 기능을 제공합니다. 이는 다른 기능에도 영향을 미치는데요. 실시간 채널의 경우 일반 콘텐츠와 달리 건너뛰기(10초 등) 등의 기능을 제공하지 않기 때문입니다.
(3) 시청 구간 확인도 마찬가지입니다. 네이버 TV와 라프텔의 사례는 라이브 영상이 아닌 경우인데요. 그래서 건너뛰기 외, 시청 구간을 사용자가 직접 조작할 수 있습니다. 하지만 티빙은 실시간 채널을 보는 사례로, 슬라이더가 아닌 바 형태로 전체 시간 대비 현재까지 본 시간만 확인할 수 있습니다. 조작이 불가능하다는 사실을 시각적으로 안내하는 방법이기도 합니다.
4.유튜브
우리가 가장 많이 접하는 플레이어가 아닐까 싶어요. 유튜브는 (1) 자동재생 설정과 크롬 캐스트, 자막 설정이 상단에 위치하고 있습니다. 네이버 TV는 추천 영상 리스트 내 자동 재생 설정이 있었는데, 유튜브는 아무래도 ‘단편 영상’을 연달아 보게 되는 경우가 많기에 쉽게 접할 수 있는 위치에 해당 기능을 활용하고 있습니다. 다양한 언어로 된 영상이 업로드되는 플랫폼의 특성을 반영, 자막 역시 별도 메뉴로 들어가지 않고 영상 플레이어 내 쉽게 설정할 수 있습니다.
(4) 재밌는 건, 다른 영상 리스트를 보여주는 방법입니다. 영상 썸네일 일부를 노출, 위로 끌어올리면 언제든 다른 영상을 확인하고 재생할 수 있기 때문입니다. 화면을 탭 하면 일시정지와 이전, 다음 영상 보기 버튼을 확인할 수 있으며 더블 탭을 하면 앞, 뒤로 건너뛰기가 가능합니다. 유튜브는 건너뛰기 시간을 사용자가 임의로 설정할 수 있도록 구성되어 있어요.
5.시즌
(1) 시즌은 화질과 재생속도, 클립 생성과 더보기 버튼이 오른쪽 상단에 자리 잡고 있습니다. 화질은 보통 기본으로 설정한 값을 자주 변경하지 않기에 맨 앞에 위치한 게 조금 의아했습니다. 일반적으로 화면에 띄우는 기능은 영상을 보며 자주 사용하거나, 환경에 따라 자주 변경되는 내용을 배치하기 때문입니다.
(2) 시즌은 티빙과 같이 좌, 우 영역을 통해 밝기와 볼륨을 조절할 수 있습니다. 넷플릭스 역시 같은 UI를 제공하기에 꽤 익숙해진 경험이라 없는 경우 불편하게 느껴지는 기능 중 하나입니다. 시즌과 다음에 설명할 웨이브가 재생 화면 내 기존 제공하는 기능 중 눈에 띄는 건, 앞서 살펴본 서비스가 일시정지 버튼 양옆에 다음 영상, 이전 영상 보기 등 ‘영상 단위’로 이동하는 것과 달리 10초 단위 건너뛰기를 기본으로 활용하고 있다는 점입니다.
아무래도, 50-60분 단위의 영상을 시리즈로 재생하는 경우 다음 영상으로 넘어가는 행동보다는 건너뛰기를 더 자주 경험하기에 선택한 방법이 아닐까 싶습니다. 회차 별 이동이나 회차 목록은 하단 별도 버튼을 통해 제공되고 있습니다.
6.웨이브
(1) 웨이브는 PIP 기능과 화면 잠금만 재생화면 내 기본 제공됩니다. 화질, 화면비율, 재생속도 등은 모두 더보기 메뉴 내 포함되어 있어요. 자주 쓰이지 않거나, 영상을 보며 계속 사용하지 않을 기능은 과감하게 뺀 모습입니다. (2) 시즌, 티빙과 같이 좌,우 영역을 통해 밝기와 볼륨을 설정할 수 있습니다. (3) 회차 리스트는 별도 버튼을 제공해 확인할 수 있습니다. 시즌과 마찬가지로 건너뛰기가 기본 적용된 모습도 눈에 띕니다.
추천 및 에피소드 영상 리스트
다음 영상을 자연스레 접하게 하는 건, 우리 서비스에 머무는 시간과 제공하는 여려 콘텐츠를 볼 수 있게 하는 좋은 방법 중 하나입니다. 앞서 기본 플레이어 UI를 살펴본 6개 서비스는 모두 ‘영상 리스트’를 볼 수 있도록 구성되어 있습니다.
(1) 네이버 TV는 ‘추천 동영상’이라는 이름으로 영상 리스트를 제공하며 재생 화면 왼쪽 아래 버튼을 탭 해 확인할 수 있습니다. 해상도에 따라 다르지만, 폴드3를 기준으로 6개 영상을 리스트 내 확인할 수 있고 영상 썸네일과 제목, 재생수와 좋아요 수 등의 정보를 함께 볼 수 있습니다. 영상 리스트를 보며 ‘자동재생’ 여부를 선택할 수 있습니다. 자동 재생이란 추천 영상을 계속 재생해줌을 의미하기에 앞으로 볼 영상을 미리 확인하고 설정할 수 있다는 점에서 좋았습니다.
(2) 라프텔은 여러 편으로 구성된 시리즈 중 하나를 보는 경우가 많아 전체 ‘에피소드’ 리스트를 기본으로 확인할 수 있습니다. 여러 개의 에피소드 리스트를 확인하게 되는 경우 현재 사용자가 어떤 영상을 보고 있는지 안내하는 것이 중요합니다. 라프텔은 현재 재생 중인 영상 아래 ‘재생 중’이라는 안내를 별도 제공하고 있으며, 재생 아이콘을 제외해 재생 중이지 않은 회차와 구분할 수 있도록 하고 있습니다.
(3) 티빙은 실시간 채널을 기준으로 사례를 살펴봤기에, 인기 채널과 추천 TV 프로그램을 확인할 수 있습니다. 실시간 채널 리스트에서는 현재 방송 중인 프로그램 정보과 편성 시간 등을 확인할 수 있습니다. 아쉬운 점은, 현재 재생 중인 채널을 구분할 수 없다는 점입니다.
(4) 유튜브는 현재 보고 있는 영상의 채널 정보를 리스트에서도 확인할 수 있습니다. 광고 역시 노출되고 있는 모습입니다. 다른 영상을 선택하기 전까지 ‘채널’에 대한 정보를 계속 확인할 수 있도록 안내하는 점이 가장 눈에 띕니다. 아무래도 유튜브는 채널에서 제공하는 ‘단편 영상’을 보는 경우가 많아 채널 단위가 아니라 영상 단위의 이동이 많아 보고 있는 영상이 마음에 들 경우, 채널을 ‘구독’하도록 유도하는 방법을 활용하는 것 같습니다.
(5) 시즌 역시 현재 재생 중인 에피소드를 별도 확인할 수 있도록 제공합니다. 썸네일 내 별도 컬러를 씌우고, 재생 버튼을 유일하게 배치해 현재 일시정지된 영상을 다시 재생할 수 있도록 하고 있습니다. 게다가 전체 에피소드(영상)가 몇 개인지 알 수 있으며, 리스트를 최신순과 오래된 순으로 정렬할 수 있는 기능도 함께 제공합니다.
시즌도 네이버 TV와 같이 리스트 내 자동재생 기능을 활용할 수 있습니다. 다만, 한 가지 어색하게 느껴진 점은 라프텔과 같이 왼쪽에서 오른쪽으로 회차 순서를 배치한 것이 아니라, 역으로 배치한 점입니다. 시선의 흐름이 보통 왼쪽에서 오른쪽으로 향하는 것을 생각해봤을 때, 재생 중 에피소드를 기준으로 왼쪽으로 시선을 옮겨야 다음 회차 정보를 볼 수 있다는 점은 낯설게 다가왔습니다.
(6) 웨이브는 유일하게 영상을 보며 리스트를 확인할 수 있는 UI를 제공합니다. 오른쪽 영역 일부를 활용해 리스트를 볼 수 있기 때문입니다. 다른 회차 리스트를 본다는 건 현재 영상에 흥미를 잃었기 때문일 수도 있지만, 다른 회차가 궁금하기 때문일 수도 있기에 영상 재생 환경을 방해하지 않는 방법으로 리스트를 제공하는 점이 눈에 띄었습니다. 시즌과 마찬가지로 에피소드는 최신화, 첫회부터 기준으로 확인할 수 있는 모습입니다.
플레이어 기본 설정
자주 쓰이는 설정 기능은 보통 플레이어 내 직접 위치하게 되지만, 그 외 기능은 더보기 메뉴에 포함됩니다.
(1) 네이버 TV는 더보기 버튼 탭 시, 가로로 길~게 설정 메뉴를 확인할 수 있습니다. 이동 중에 영상을 보는 경우라면, 한 손으로 디바이스를 잡고, 다른 한 손으로 조작할 가능성이 많기에 이런 구성은 조작이 쉽지 않다는 단점이 있습니다. 설정된 값을 더 연하게 처리한 것도 아쉽습니다. 무엇을 설정하느냐도 중요하지만, 현재 설정된 값이 무엇인지 확인하는 것도 중요하기 때문입니다. (라프텔, 시즌, 웨이브는 모두 설정된 값을 브래드 고유 컬러로 구분해 보여주고 있습니다)
(2) 라프텔은 네이버 TV와 달리 오른쪽 영역에 설정 메뉴를 배치하고 있습니다. 덕분에 한 손으로도 조작이 가능합니다. 또 한 단계 더 들어가지 않고도 설정값을 변경할 수 있어 편리합니다. 주어진 값 중 하나를 선택하면 되도록 구성되어 있기 때문입니다.
(3) 티빙도 라프텔과 같이 오른쪽 영역을 할애해 설정 메뉴를 보여주지만 기능 안내 외 화면 비율만 제공됨에도 불구하고 한 단계를 더 들어가야 설정값을 확인하고 변경할 수 있다는 점은 아쉽습니다.
(4) 유튜브도 네이버 TV와 같은 아쉬움이 느껴집니다. 게다가 네이버 TV 보다 더 많은 기능을 제공하기에 화면 전체를 활용, 보던 영상으로 돌아가는 것 역시 쉽지 않습니다. 영상 재생 화면에 포함된 기능을 설정 화면에서 다시 보여주는 경우가 많습니다. 자주 쓰이는 기능은 영상 화면에서 만나는 것으로 충분하지 않을까 싶습니다.
(5) 시즌은 화면 가운데 설정 메뉴를 보여줍니다. 조작이 쉽지는 않지만, 현재 설정된 값을 별도 컬러로 보여주는 것은 좋았습니다. 현재 설정된 값이 무엇인지 쉽게 알 수 있어야, 변경 시 기준으로 활용할 수 있기 때문입니다.
(6) 웨이브는 에피소드 리스트를 보여주는 것과 같은 사이즈로 설정 메뉴도 확인할 수 있습니다. 시즌과 같이 설정된 값은 웨이브 고유 컬러로 구분해 보여주는 것이 눈에 띕니다.
+ 티빙, 시즌, 웨이브가 밝기/볼륨 조절을 보여주는 방법
밝기와 볼륨 조절이 플레이어 내 자유롭게 설정 가능하다는 건 좋지만, 실제 작동 시 변경되는 내용을 어떻게 보여주냐도 정말 중요합니다. (2) 시즌처럼 조작할 수 있는 영역 내 밝기 정도를 보여주는 경우 손가락에 가려 변경되는 내용을 확인할 수 없는 상황이 발생할 수 있기 때문입니다. 이런 상황을 피하기 위해 (1) 티빙은 터치 영역 바깥에(화면 중앙) 조작에 따른 피드백을 보여주고 있으며, (3) 웨이브는 아예 상단에서 확인할 수 있도록 구성되어 있습니다. 개인적으로는 손가락의 위치와 상관없이 언제든 변경 값을 확인할 수 있는 웨이브의 구성이 가장 편리하다고 생각합니다.
(💡 참고 글) 슬라이더 값이 상단에 위치해야 하는 이유
서비스 별 세로, 가로 플레이어 살펴보기
1.네이버 TV
2.라프텔
3.티빙
4.유튜브
5.시즌
6.웨이브
🐥 서비스 특색에 맞게 플레이 화면을 꾸민 : 디즈니 플러스, 브이라이브
디즈니 플러스
론칭 이후 연일 화제였던 디즈니 플러스를 살펴보겠습니다. 서비스를 먼저 정리하면, 디즈니 소유 폭넓은 IP로 구독자 확보에 힘쓰는 모습으로 DAU 59만여 명을 기록하고 있다고 해요. 넷플릭스와 공통점은 하나의 마스터 계정 내 여러 프로필을 설정할 수 있는 구조라는 점입니다. 사실 많은 OTT 서비스가 지닌 정책입니다. 눈에 띄는 점은 각 프로필 별 비밀번호를 설정, 계정을 셰어 하는 사람들끼리도 프로필을 보호할 수 있는 기능입니다.
모바일에서 영상 재생 화면은 (1a) 재생 기능과 자막 설정에 대한 기능만 배치되어있었는데요. 다양한 언어로 영화 배급을 많이 하던 콘텐츠인 만큼 오디오와 자막의 언어를 각각 설정할 수 있는 기능이 눈에 띄었습니다. 그리고 삼성 TV로 연결할 경우에는 자막 뒷 배경 색도 지정할 수 있어 자막 기능에 꽤 신경을 많이 썼다는 점을 짐작할 수 있었어요. (조금 다른 이야기지만, 번역 품질 이슈는 시간이 좀 필요할 것 같네요!)
디즈니 플러스를 살펴보다 유튜브와 다른 점을 발견할 수 있었습니다. 유튜브는 플레이 중인 영상 하단에 추천 영상을 배치하는 반면, 디즈니 플러스는 시리즈 마지막 회차가 모두 끝난 후 다른 콘텐츠를 추천해주기 때문입니다. (1c) 하나의 시리즈가 완결되지 않았을 때는 다음 회차를 추천하고, (1d) 시리즈의 마지막 회가 모두 플레이된 후에 다른 콘텐츠를 추천해주는 이유는 콘텐츠의 연속성 때문이라 생각합니다. 유튜브는 콘텐츠 간의 연속성이 낮아 다음 콘텐츠로의 이동을 빠르게 연결, 체류 시간을 늘려야 하기 때문입니다.
(💡 참고 글) 왓챠에서 R&D연구원이 하는 일
브이라이브
브이라이브는 서비스의 색이 명확한 영상 플레이 화면을 갖고 있습니다. 아이돌과 팬덤이 소통할 수 있는 콘텐츠가 많은데, 팬덤에서 사용하는 응원봉을 디지털로 끌어와 비즈니스 모델을 생성, 영상 플레이 화면에서도 노출하고 있습니다. (2a) 조회 수와 좋아요 바로 아래, 다른 서비스라면 타이틀이 있을 위치에 응원봉 하트 순위를 눈에 띄게 배치하고 있어요. 응원봉은 사용자가 기간 이용권을 구매해 사용권을 얻는 구조입니다. 방송에서 응원봉을 사용하면 하트가 2배로 카운트되어 아이돌에게 도네이션 하는 느낌으로 사용할 수 있는데요. 주요 BM을 영상 플레이 화면에 잘 녹여낸 사례라고 생각합니다.
또 다른 특색으로는 영상을 짧게 잘라서 저장하는 모먼트 픽 기능입니다. (2b) 응원봉과 달리 모먼트 픽은 우측 상단에 더보기 메뉴에 포함되어있는데요. 모먼트 만들기를 누르면 시청 중인 영상 위에 구간을 자를 수 있는 버튼이 생성됩니다. 영상 재생 화면 내 많은 정보와 기능이 포함되면 집중도가 낮아질 수 있기에 우선순위를 구분해줄 필요가 있는데요. 모먼트 픽이 그 관계에서 응원봉보다 조금 더 낮은 단계에 있다고 볼 수 있습니다.
📌 2021년, 마지막 공지
팁스터 뉴스레터는 처음 2명으로 시작, 현재 3명이 운영하고 있어요. 앞으로 하고 싶은 게 많아, 함께 할 네 번째, 다섯 번째 에디터를 찾고 있습니다 :) 관심이 있는 분이라면, 아래 버튼을 클릭해 자세한 내용을 확인해주세요!
🐳 🐥 팁스터 뉴스레터 12월 안내
팁스터 뉴스레터가 한 달 간의 휴식기를 갖고자 합니다. 이번 뉴스레터는 올해 마지막 뉴스레터가 될 것 같아요 :) 12월 한 달은 무료 뉴스레터는 물론, 곧 공개될 멤버십 콘텐츠와 굿즈 등에 대한 내용을 정리하고, 정비하는 시간으로 활용하고자 합니다. 팁스터가 꼭 반영했으면 하는 내용이 있다면 아래 피드백 링크를 통해 의견 남겨주세요! 다음 뉴스레터는 2022년 1월 5일 목요일 오전 8시에 발행될 예정입니다.
구독자님, 부족함이 많은 팁스터 뉴스레터를 구독해주셔서 감사합니다. 더 좋은 모습으로 찾아뵐게요! 조금만 기다려주세요!
댓글
의견을 남겨주세요