[UI 디테일] 모바일 동영상 플레이어 내 Gesture UI 살펴보기

시작하며

우리의 일상에서 동영상 시청이 차지하는 비율이 점점 높아지고 있다. 필자 또한 예전보다 동영상을 감상하는 시간이 많이 늘어난 것을 실감하고 있다. 그리고 집에 있는 TV보다는 모바일로 영상을 감상하거나 이동 중에도 수시로 영상을 감상한다. 어느 날은 모바일로 유튜브 영상을 보다가 우연히 플레이어 영역을 ‘두 번 터치’ 한 경우가 있었는데 '10초 다음으로 이동’ 기능이 제공되어 놀랐었던 경험이 있다.

개인적으로 UCC(User creative contents) 중심 UI는 Youtube가 선도적이라고 생각하는데, 그도 그럴 것이 동영상 플레이어 관련한 새로운 기능들은 대부분 Youtube에서 출발한 것들이 많다. (세로 모드로 영상 시청 중 화면을 아래로 쓸어내리면 '미니 플레이어’로 전환되는 방식도 Youtube에서 먼저 제공했던 것으로 알고 있다. 현재는 해당 멀티태스킹형 UI가 표준화되었지만 말이다)

이와 맞물려 시간이 지남에 따라 모바일 플레이어 앱 서비스는 점점 고도화되고, 사용자의 편의를 위해 한정된 영역에서 다양한 기능을 활용할 수 있는 다양한 방식들이 고려되고 있다. 이에 각종 모바일 동영상 플레이어에서 Gesture를 어떤 식으로 활용하는지 사례를 간단하게 찾아보았다. 사실 IT 업계가 그렇듯 1~2년만 지나도 새로운 것이라고 생각하던 서비스들이 옛날 것으로 바뀌는 것이 현실이다. 하지만 현시점에서의 UI가 나중에 또 어떤 방향으로 변화하는지 살펴보는 것도 흥미로울 것 같다.

[그림1] Youtube 동영상 플레이어 : 미니 플레이어 전환

조사 개요 : 2018년 8월 21일 기준, iOS 모바일 앱, VOD(Video on demand) 콘텐츠 위주로 조사

(Youtube, 페리스코프, TVING, 옥수수, 비디오포털)

해당 조사는 ‘실시간 TV' 화면은 포함하지 않았다. 그 이유는 실시간 TV의 경우 구간탐색 기능을 제공하고 있지 않아 VOD 플레이어보다 상대적으로 적은 기능을 제공하기 때문이다. (국내 VOD 제공 서비스에서는 보편적으로 실시간 TV에서 좌/우 Swipe 시 이전/다음 채널로 이동하는 UI를 제공한다)

또한, 해당 글에서는 손가락을 댄 후 한쪽 방향으로 드래그하는 동작을 편의상 Swipe로 용어를 통일하였다. UI설계를 하다보면 해당 용어를 혼용해서 사용하는 경우가 있는데, 필자도 설계할때마다 헷갈리는 부분 중 하나이다.

• Swipe : 손가락을 댄 후 일직선으로 드래그하는 동작
• Flick : 손가락을 댄 후 빠르게 한쪽 방향으로 긋는 동작

1. Youtube

Youtube VOD는 기본적으로 영상을 한번 탭 하면 관련 버튼들이 호출되고, 다시 탭 하면 사라지는 방식으로 제공된다. (다른 동영상 플레이어도 유사한 방식을 제공한다) 그리고 VOD 영상의 좌측 영역을 두 번 탭 하면 10초 이전으로, 우측 영역을 두 번 탭 하면 10초 다음으로 이동한다. 또한, 세번 탭 하면 20초, 네번 탭 하면 40초 단위로 이동한다. 즉 해당 기능을 재생구간 이동 용도로 활용하고 있다. 이건 최근에 추가된 기능인데, 영상에서 하→상 방향으로 Swipe 하면 관련 동영상 목록을 불러올 수 있다. 이는 단순히 하나의 영상을 감상하기만 하는 것이 아니라 다양한 영상을 쉽게 탐색할 수 있도록 하는 기능을 강조하려는 의도라고 생각한다.

유튜브 플레이어(Web)의 과거

그렇다면 건너뛰는 플레이 타임을 어떤 기준으로 잡는것이 좋을까?

한상택 | Youtube 웹에서는 더블 클릭은 전체화면 전환 기능으로 제공되며, 화살표 좌/우 키 선택 시 5초 단위로 제공된다. 그 외의 사례를 보면 동영상 서비스의 원조 격인 Tivo 의 instant replay는 8초 단위로 제공된다. 또한, Roku는 7초 단위로 제공한다.

문한별 | 건너뛰는 플레이 타임을 어떤 기준으로 잡아야 할까 생각해보다가, 영상을 만들 때 각 컷은 몇 초를 기준으로 편집하는지 알아보았다. 일단 드라마와 영화가 상황이 조금 다르다고 한다. 영화는 한 컷 자체 농도가 짙다. 그래서 컷 하나에도 더 심혈을 기울여서 많은 것을 보여주어야 하며, 컷 전환이 너무 빠르면 몰입을 해친다고 한다. 반면 드라마는 짧게는 1초 단위로 컷 전환이 이뤄진다고 한다. 인물과 환경을 설명하는 설정 숏트라는게 있는데 이게 보통 3초 정도 된다고 한다. 설정 숏트 이후부터는 주인공 A의 모습 2초, 말하는 모습 클로즈업 1초, 그 말을 듣는 B의 반응을 1초로 보여주는 식이다. 그래서 10초 이상은 아예 다른 씬으로 뛰어넘을 수 있는 시간이 되기 때문에 "3초에서 7초 정도가 플레이어에서 건너뛰기로 적당하지 않나?" 는 업계 관계자의 의견을 들을 수 있었다. 물론 일반화하긴 어려운 얘기다.

[그림2] Youtube 동영상 플레이어 : 주요 Gesture

2. 페리스코프 (Periscope)

실시간 개인방송을 지향하는 페리스코프에서도 VOD를 제공한다. 페리스코프는 기본적으로 세로 모드 영상을 제공하는 것이 특징이다. 페리스코프에서는 VOD 영상을 Long Tap 하면 구간 탐색 기능을 제공한다. 조금 특이한 방식이고, 재미있기는 한데 전체 영상 시간을 직관적으로 알 수 없고, Gesture를 이어서 진행하기에는 불편한 느낌이다. 구간탐색 모드에서 구간탐색은 좌/우 Drag로 이동하고, 좌/우 구간탐색을 하는 중에 상/하 이동을 같이 수행하면 미세 조정이 가능한 방식으로 되어있다.

[그림3] Periscope 동영상 플레이어 : 주요 Gesture

3. TVING

TVING VOD에서는 좌측영역을 상/하 Swipe 하면 밝기조절 기능을, 우측영역을 상/하 Swipe 하면 음량조절 기능을 제공한다. 그리고 좌/우 Swipe를 하면 추천 채널 및 회차 이동 UI를 제공한다. 좌→우 Swipe 하면 '인기 Live 채널' 호출을, 우→좌 Swipe 하면 '회차, 최신방송'을 호출한다.

[그림4] TVING 동영상 플레이어 : 주요 Gesture

4. 옥수수 (Oksusu)

옥수수 VOD에서는 좌측영역을 상/하 Swipe 하면 밝기조절 기능을, 우측영역을 상/하 Swipe 하면 음량조절 기능을 제공한다. 그리고 좌/우 Swipe 하면 재생구간 이동 기능을 제공한다. 이 외에 타사에 없는 새로운 기능을 제공하는 것이 하나 있다. 화면을 Double Tap 하면 가로 모드에서 세로 모드로 전환, 세로 모드에서 가로 모드로 전환한다. 확실히 특이하긴 하지만 유용한 기능인지는 잘 모르겠다.

[그림5] 옥수수 동영상 플레이어 : 주요 Gesture

5. 비디오포털

비디오포털 VOD에서는 좌측영역을 상/하 Swipe 하면 밝기조절 기능을, 우측영역을 상/하 Swipe 하면 음량조절 기능을 제공한다. 그리고 좌/우 Swipe 하면 재생구간 이동 기능을 제공한다.

[그림6] 비디오포털 동영상 플레이어 : 주요 Gesture

정리하며

다음과 같이 모바일 동영상 플레이어 내 Gesture UI를 간략하게 살펴보았다. 예전에는 동영상 플레이어에서 Gesture를 잘 활용하지 않았지만, 요즘에는 고객의 시청 경험을 향상하기 위한 부가요소로 Gesture가 적절히 활용되고 있는 것을 알 수 있다.

[그림7] 각 VOD 서비스별 Gesture를 통한 UI 호출방식

한 가지 흥미로운 점은 대부분의 국내 서비스는 상/하 Swipe 하면 밝기조절과 음량조절을 제공한다는 것인데, 정작 해외 사례를 보면 상/하 Swipe를 다른 부가적 기능으로 활용(관련 동영상 호출)하거나, 해당 Gesture를 사용하지 않는 것을 파악할 수 있었다. 또한, 대부분의 국내 서비스에서는 좌/우 Swipe는 구간 탐색 기능이나 관련 영상 호출 기능으로 활용하는데 해외 사례에서는 좌/우 Swipe Gesture를 활용하지 않는 경우가 대부분이었다. 상/하/좌/우 Swipe 기능이 잘 활용이 되면 유용하겠지만, 사용자의 입력 오류를 발생시킨다는 점을 고려해 신중히 활용되어야 할 것이다.

N Player의 경우 좀 더 나아가서 Gesture를 별도로 커스터마이징 할 수 있는 기능을 제공한다. 모든 설정이 귀찮듯, 커스터마이징을 사용자에게 전부 맡길 수는 없겠지만 필요에 따라 사용자의 성향과 상황에 맞는 Gesture를 제공할 수도 있겠다.

[그림8] N Player : Gesture 커스터마이징

물론 Gesture 사용에 있어서 단점도 존재한다. Gesture는 직접 사용해보지 않고는 해당 기능이 있는지 알기 어렵고, Gesture 자체가 익숙하지 않은 경우도 있다. 이러한 문제를 해결하기 위해서는 ‘도움말’ 같은 팝업 화면을 활용하여 안내할 수도 있다. 팝업 형태의 안내도 있겠지만 Youtube에서는 프로그래스 바의 Knob을 잡고 Drag & drop을 했을 때 상단에 구간이동 Gesture에 대한 간단한 설명을 제공한다. 이런 방식으로 자연스럽게 사용자에게 기능을 안내하는 것도 바람직한 방향이라고 생각한다.

[그림9] NaverTV 동영상 플레이어 : Gesture 이용 가이드

[그림10] Youtube 동영상 플레이어 : 재생구간 Gesture 이용 가이드

반면 넷플릭스의 동영상 플레이어는 Gesture 기능이 제공되지 않는다. Gesture 기능이 제공되지 않는다고 해서 특별히 사용이 불편한 것도 아니다. 만약 동영상 플레이어의 Gesture UI를 기획해야 한다고 하면, 이러한 점을 함께 염두에 두어야 할 것이다. 마지막으로 단순히 타사를 참고하기만 할 게 아니라, 어떤 Gesture와 기능을 활용할 수 있을지 깊이 있게 고민해야 한다. 좀 더 나은 UI를 기획하기 위해서는 당연하게도 더 많은 고민이 필요하고, 그것은 결국 사용자의 편의를 위한 것이어야 한다. ⓦ

*이 글은 브런치에서도 볼 수 있습니다 - @uxdragon

[참고##UI 디테일##]