TVING PC/Mobile WEB 개편 스토리

mace
tving.team
Published in
5 min readApr 13, 2022

안녕하세요,
티빙 서비스기획팀에서 웹서비스 기획을 담당하고 있는 박선화입니다.
오늘은 티빙 PC/모바일 웹 개편 스토리를 생생하게 들려드릴게요.

저는 조금씩 날이 추워지던 작년 11월, 티빙에 합류해 웹 서비스 개편을 함께 준비했습니다.
이번 개편은 단순히 기능을 추가하는 업데이트에서 나아가, UX/UI는 물론 개발 구조까지 완전히 변화하는 대대적인 프로젝트였습니다. 서비스기획팀, 디자인팀, 개발팀 모두 기존에 쌓여있던 웹의 문제점을 파악하고 새롭게 만들어가는 순간이었죠.

2022년 올해, 확 달라진 티빙 웹의 변화된 모습을 소개해드립니다!

최적화된 반응형 웹
반응형 웹이라는 단어가 생소하다고요? 지금 브라우저 창을 축소 또는 확대 시 화면 크기에 따라 서비스가 변화한다면, 이는 ‘반응형 웹’ 구조로 된 사이트입니다.

기존 티빙 웹사이트는 어떤 환경에서 접속해도 고정된 화면과 콘텐츠 개수가 노출되었습니다. 변화된 티빙 웹에서는 웹사이트의 가로 사이즈에 따라 꽉 찬 화면을 제공하여 티빙의 콘텐츠를 더 풍부하게 전달합니다. PC뿐만 아니라 스마트 패드, 휴대폰으로 티빙 웹을 진입할 때도 접속 환경에 맞게 최적화된 경험을 제공해요.

혹시나… 한 화면에 콘텐츠가 많이 제공되면 서비스가 지연될까, 걱정하지 않게 바로 말씀 드릴게요:-)
개편된 티빙 웹에는 최신 웹기술(SPA)을 도입해 초기 로딩 속도 20% 절감, 페이지 로딩 속도는 무려 50%나 빨라진 환경으로 서비스를 이용할 수 있습니다.

과거 TVING WEB의 홈(좌), 변화한 TVING WEB의 홈(우)

처음 만나는 티빙의 얼굴, 온보딩
티빙 서비스를 처음 접하는 고객들을 위해 소개 페이지를 만들었습니다. 티빙의 주력 콘텐츠는 물론 실시간 타임머신 기능, 빠르게 올라오는 Quick VOD와 같이 핵심 기능들을 안내해드리고 있어요. 매달 주요하게 업데이트되는 콘텐츠는 시시각각 바뀌니 온보딩 페이지도 유심히 봐주세요!
온보딩 페이지를 지나 로그인을 완료하면, 티빙의 풍성하고 다채로운 콘텐츠를 확인할 수 있는 홈 화면을 만날 수 있습니다.

TVING Mobile WEB의 온보딩화면과 콘텐츠 상세화면

시청과 탐색에 집중할 수 있게
이번 개편에서는 보고 싶은 작품의 정보를 탐색하고, 시청에는 몰입할 수 있는 방향을 중점으로 두었습니다. 콘텐츠 상세 화면에는 크리에이터(연출, 작가), 출연진 정보 및 작품의 줄거리를 제공하여 콘텐츠 감상 전 작품에 대한 다양한 정보를 먼저 확인할 수 있습니다. 실제 시청을 위해선 전체 화면으로 변경하지 않아도 꽉 찬 플레이어로 감상할 수 있고요. 이처럼 티빙의 웹 서비스에선 내가 보고 싶은 작품의 정보를 손쉽게 확인하고, 시청에만 푹- 몰입감 있게 빠질 수 있는 환경을 만들었습니다.

이어보기 훨씬 편리해진 플레이어
플레이어에 이전, 다음 회차 버튼이 추가되어 시리즈를 감상하기 편리해졌습니다. 회차 목록을 통해 전체 회차를 볼 수 있지만, 더 쉽게 이전/다음 화를 넘나들 수 있게 된 것이죠. 키보드 조작을 통해 간편하게 지원하는 기능도 보완하여 PC로 감상하는 고객들의 편의를 지원하였습니다.

그리고 또 하나! 미니 플레이어를 추가했습니다. 시청 도중 플레이어를 빠져나갈 시, 보고 있던 작품은 미니 플레이어로 전환해 재생되어요. 티빙 서비스 어디에서 탐색하더라도 미니 플레이어가 유지되어 시청 중인 작품을 이어서 볼 수 있습니다. (기존의 팝업 플레이어는 브라우저 PIP 기능으로 사용할 수 있어요!)

직관적인 자동완성 포스터로 추천하는 검색
검색할 때 적합도가 높은 콘텐츠는 포스터로 미리 노출해 다른 검색 결과와 함께 제공되도록 변경했습니다. 좀 더 직관적인 검색 진행 화면을 통해 편리하게 콘텐츠를 확인할 수 있게 되었어요. 일부 단어만 검색해도 원하는 작품을 쏙쏙 찾을 수 있도록 검색에 대한 고도화는 앞으로도 계속해 나갈 예정입니다!

모바일 웹에서도 회원가입-콘텐츠 상세-결제까지 한 번에!
기존 모바일 웹에서는 일부 콘텐츠 포스터만 제공되고, 대부분의 정보는 어플리케이션으로 이동해야만 확인할 수 있었습니다. 티빙에서는 PC 웹 개편과 동시에 모바일 웹 개선을 진행했습니다.

이제는 모바일 웹에서도 로그인, 회원가입은 물론 콘텐츠 상세 탐색과 관련된 영상도 시청할 수 있습니다. 앱을 사용하기 전에도 충분히 내가 보고 싶은 작품 정보를 확인할 수 있는 것이죠. 이어서 이용권 결제까지 함께 지원하고 있으니 모바일 웹을 통해서도 편리하게 티빙을 만나보세요!

마무리하며
앞서 티빙의 확 달라진 PC/모바일 웹 서비스를 함께 알아보았습니다. 이처럼 고객들에게 풍성한 콘텐츠 제공은 물론 더 편리한 시청 환경을 조성하기 위해 티빙인들은 밤낮으로 노력하고 있어요.
많은 부서에서 도움을 주셨지만 특히나! 최신 기술을 도입해 서비스 지연을 줄이고 빠른 환경을 제공하기 위해 힘쓴 웹개발팀, 회원가입/결제 등 원활한 고객 여정을 만들어 주신 백엔드개발팀, 반응형 웹에 최적화된 UI를 만들어 주신 UX디자인팀, 개편된 서비스가 고객들에게 닿기 전 이슈를 상시 체크해 주신 QA팀, 확 바뀐 티빙의 서비스 시나리오를 하나하나 만들고 확인해 나간 서비스기획팀까지. 고객의 사용성을 위해 한마음으로 움직여 만든 티빙 웹 서비스를 앞으로 쭈욱-! 함께 해주시길 바라겠습니다.

언제나 고객들을 위해 지속해서 개선해나갈 티빙에게 응원의 목소리도 함께 보내주세요. 좀 더 나아갔으면 하는 의견도 환영합니다! (당근과 채찍, 모든 티빙 고객의 목소리에 귀기울이겠습니다 J)

--

--