실시간 스트리밍 서비스의 '타임머신' 기능의 UI에 관한 생각
최근 온라인 스트리밍 플랫폼인 Twitch가 국내 사업 철수를 결정하면서, 네이버의 '치지직'으로 많은 스트리머들이 이동하고 있습니다. 게임 생방송을 종종 보는 입장에서 트위치는 참 마음에 안들었고, 프라이버시에 민감한 성향상 네이버 플랫폼은 더더욱 마음에 안들지만, 아무튼 많은 스트리머들이 네이버로 송출 플랫폼을 옮기면서 '네이버 카페'를 통한 커뮤니티가 활성화되는 과정을 보았습니다.
아직 베타 서비스인 '치지직'의 특성상 여러 기능이 누락되어 있었기 때문에 '네이버 카페'를 통해 많은 사람들이 치지직의 단점을 말하고 있었고, 그 중 눈에 띈 것은 실시간 스트리밍의 '타임머신' 기능의 부재였습니다. '타임머신' 기능은 이미 지나간 장면을 되돌려 볼 수 있는 기능입니다.
그런데, 생각해보니 지금 유튜브를 필두로 한 스트리밍 시장의 '타임머신' 기능, 그 중에서도 '탐색 바'의 역할이 그렇게 썩 마음에 들지 않아서 관련하여 개선안을 말해봅니다.
일반 동영상에서 '탐색 바'의 기능
일반적인 동영상을 볼 때, 한 번의 드래그로 동영상 곳곳을 탐색할 수 있는 '탐색 바'는 정말 혁신적인 UX입니다. 우리는 '탐색 바'만 보고서 전체 영상의 어느 부분까지 보았는지 알 수 있습니다. 전체 영상을 100%로 놓고, 가운데로 탐색 바를 드래그 하면 영상의 50% 지점이 나오며, 그로부터 절반은 25% 지점이라고 명확하게 알 수 있습니다. 탐색 바를 드래그하면서 실시간으로 영상의 미리보기가 출력되기 때문에 알아보기도 쉽습니다.
위의 모습은 Firefox 팝업 플레이어의 UI입니다. 대부분 이런 형식의 UI를 가지고 있을 것입니다.
실시간 스트리밍의 탐색 바
문제는 실시간 스트리밍의 탐색 바입니다. 대부분은 탐색 바를 지원하지 않거나, 아래와 같이 오른쪽 끝으로 정렬되어 있는 모습을 볼 수 있습니다.
오른쪽 끝에 탐색바를 위치하면, 왼쪽 대부분의 공간의 의미는 무엇일지 생각해보았습니다. 유튜브의 경우 해당 부분에 마우스를 올리면 지나온 시간을 표시해줍니다. 지금으로부터 3분 전 영상일 경우 '-3:00'과 같은 식으로요.
문제는 이게 얼마나 '기능적인 기능'인지 모르겠습니다. '타임 머신' 기능은 생방송 중 잠깐 놓친 부분을 보기 위해 사용되는 경우가 많습니다. 예를 들면 야구에서 홈런 장면을 다시 보기 위해 사용할 수 있습니다. 전체 사용자 중 얼마나 많은 사람이 '영상의 가장 처음부터' 생방송을 시청하기 시작할지는 잘 모르겠습니다. 영상을 처음부터 다시보고 싶다면, 생방송 송출 페이지와 별개로 '다시보기' 페이지가 있으면 됩니다. Twitch같은 경우 다시보기 페이지에 현재 실시간 스트리밍중인 영상이 즉시 업데이트되어, 처음부터 다시볼 수 있게 해두었습니다. (한국에선 2022년 종료된 기능입니다.)
'실시간 스트리밍에서의 기존 탐색 바를 통한 다시보기'가 왜 잘못되었는지, 제가 느낀 단점은 다음과 같습니다.
1. 세밀한 이동이 불가능함
탐색 바는 화면 상에서 같은 거리를 이동하더라도 전체 영상 길이에 따라 탐색되는 정도가 다르다는 점 때문에, 영상의 길이가 길수록 '휙휙' 탐색됩니다. 라이브 스트리밍은 유튜브 편집 영상처럼 10분 내외가 아닌, 기본 1시간인 경우가 많습니다. 조금만 스크롤해도 10분전 장면을 보게 될 것입니다. 저는 1분 전 영상을 보고싶은데요! 결국 탐색 바의 본 기능은 조금 퇴색되게 됩니다.
2. 모바일 기기에서 조작이 불편함
오른쪽 맨 끝에 있는 탐색 바는 조작이 잘 되지 않습니다. 모바일 기기에서 오른쪽 끝은 곧 화면의 끝인 경우가 많은데, 이게 '스와이프' 동작과 일치하여 기기에서 잘 조작이 되지 않는 경우가 많습니다. 또, 조작이 잘 된다고 하더라도 구석에 있는 작은 점을 신중히 터치해야 한다는 점은 참 '힘이 드는' 동작입니다.
3. 다시 돌아올 때 불편함
타임머신 기능을 이용한 후 다시 생방송으로 돌아올 때 불편합니다. 오른쪽 끝으로 다시 스크롤바를 이동시켜야 하는데, 이거 의외로 잘 되지 않습니다. 위의 1번 단점과 겹쳐서 약간이라도 오른쪽 끝이 아니라면 -10초, -5초 등으로 이동되어 있습니다.
유튜브의 경우 하단의 Live 버튼을 누르면 생방송 싱크로 볼 수 있지만, 제 주변 사람들은 대부분 이를 "생방송임을 알려주는 표시자" 정도로 생각했지, 버튼이라고 생각하진 못했습니다. 상단의 사진에서 탐색 바 아래에 있는 Live 글씨를 보고, 얼마나 많은 사람이 '누르면 생방송 싱크로 맞춰지겠구나'라고 생각하겠습니까?
개선안?
실제 서비스에 적용할 새 디자인의 '탐색 바'(혹은 탐색 바를 사용하지 않는 새 UI/UX)는 석학들이 따져보고 적용할 것입니다. 개인적으로 현행 디자인은 참 불편한 단점 덩어리라고 생각합니다. 그럼에도 불구하고 제가 생각하는 독특한 디자인은 아래와 같습니다.
1. 항상 가운데에 위치한 탐색 바 손잡이
탐색 바 손잡이는 항상 가운데에 위치합니다. 왼쪽 공간은 "지나간 장면을 다시 볼 때", 오른쪽 공간은 "되돌아올 때" 사용합니다. 사용자는 왼쪽으로 탐색 바를 당겨서 지난 장면을 볼 수 있고, 오른쪽으로 당겨서 조금씩 되돌아올 수 있습니다.
탐색 바를 놓으면 자동으로 가운데에 위치하게 됩니다. 따라서 탐색 바의 손잡이는 항상 가운데에 위치하게 됩니다.
2. 강도를 인식하는 탐색 바
탐색 바를 살짝 왼쪽으로 당기면 조금만 이동되며, 맨 끝까지 빠르게 당기면 영상의 첫 부분까지 이동됩니다. 적당한 속도로 조금씩 왼쪽으로 당기면 그 길이에 따라 더 많이/더 적게 이동됩니다. 오른쪽으로 당기는 경우도 마찬가지입니다. 살살 당기면 조금씩 앞으로 가며, 끝까지 세게 당기면 라이브 싱크로 다시 맞출 수 있습니다.
이렇게 하면 영상의 길이와 무관하게, 항상 일정한 감각으로 일정한 만큼만 되돌리기/돌아오기를 할 수 있습니다.
경로 의존성과 사람들의 거부감
소비자들은 익숙한 것이 아니면 본능적으로 거부감이 들 수 밖에 없습니다. 그렇기 때문에 위와 같은 UI는 중소 업체가 아닌, 충분한 양의 점유율을 갖고 있는 회사에서 점진적으로 바꿔나가야 그 반향이 적을 것입니다. 구글의 유튜브가 그 예입니다.
그럼에도 불구하고 제가 새 라이브 스트리밍 서비스를 만든다면, 위와 같은 형태의 탐색 바를 적용해볼 것입니다.