나의 첫 Figma 입문 (feat. TVING)
[코드스테이츠 PMB 11] Ep15. Figma와 Wireframe
요즘의 나는 일과가 끝난 저녁 시간에 티빙이나 넷플릭스 같은 OTT 서비스를 보며 하루를 마무리하는 걸 나름의 낙으로 삼고 있다. '나의 해방일지'나 '우리들의 블루스'처럼 최근 종영한 따끈따끈한 드라마부터 '라라랜드', '노트북', '비포 선라이즈' 같은 명작의 반열에 드는 로맨스 영화, 우리나라보다 더 현실적으로 느껴지기도 한 인물들과 상해에서의 녹록지 않은 현실을 그려낸 '겨우 서른'이라는 중국 드라마에 한 때 빠져있기도 했다.
최근에는 애플의 창시자 스티브잡스의 3번의 신제품 출시회 시작 전 40여 분을 몰입감 있게 그려낸 실화 바탕의 영화 '스티브잡스'를 꽤 인상 깊게 보았다. 인물의 일대기를 그린 이야기가 아니라 신제품 프레젠테이션 무대 뒤를 배경으로 잡스와 주변 인물들 사이의 대화와 논쟁의 장면으로 구성되어 있어 스티브잡스라는 인물의 성격과 내면을 중심으로 스토리가 전개된다. 완벽을 매우 추구하는 완벽주의자인 그는 타인에게 차갑고 자신의 능력이 뛰어난 만큼 겸손과는 거리가 먼 모습을 보인다. 하지만 그도 자신의 딸의 존재로 인해 변화하기 시작했으며, 내면적으로도 변화하는 모습도 영화에 담겨 있다.
스티브잡스가 시대를 앞서간 혁신가이자 성공한 기업인이 될 수 있었던 것은 그만의 통찰력과 남다른 사고방식, 끝없는 도전과 열정, 엄청난 노력이 있었기에 애플을 성공시킬 수 있었다고 생각한다. 한 번쯤 볼만한 영화라 추천드리고 싶네요..!
뮤지션은 악기를 연주하고
난 오케스트라를 지휘하죠
- 영화 '스티브잡스' 中
원래는 사실 OTT 서비스를 즐겨보는 편은 아니었는데, 우연히 동기들의 넷플릭스 4인 팟에 끼게 되면서 OTT 서비스의 오리지널 콘텐츠의 매력을 알게 되었다. 넷플릭스에는 없고 티빙에만 있는 보고 싶은 콘텐츠들이 생기면서 몇 개월 전부턴 티빙도 같이 구독하고 있다.
그래서 오늘 포스팅에서는 'TVING'의 와이어프레임을 Figma로 그려보려 한다. Figma라는 디자인 툴을 처음 사용하다 보니 막연한 두려움 같은 게 있었는데 평소에 내가 좋아하고 자주 사용하는 서비스를 선택하여 이 심리적 장벽을 상쇄시켜 보려는 심산이었다.
아마 나 말고도 티빙의 열혈 구독자들이 많았던 모양이다. 최근, 티빙의 성장세를 보면 심상치 않다.
데이터로 보는 티빙 성장… "유료 가입자 63% 증가" / 출처: 전자신문티빙은 2020년 10월 CJ ENM에서 물적 분할하고 신규 법인으로 독립한 이후 성장을 거듭하고 있다.
온라인 동영상 서비스(OTT) 핵심 성장지표인 유료 가입자, 콘텐츠 시청률, 콘텐츠 소비율 등이 지속 상승하고 있으며, 기존 티빙 핵심 고객층인 20~30대뿐만 아니라 40대 이상 가입자도 늘어나는 등 다양한 연령대 고객 확보에 성공했다.
티빙 누적 유료 가입자는 티빙 분사 이전인 2020년 9월 대비 2021년 4월 기준 63% 증가했다. 올해 1월 오리지널 콘텐츠 공개를 시작으로 다양하고 흥미로운 웰메이드 콘텐츠를 제공하며 성장을 거듭하고 있다는 게 티빙의 설명이다.
1. TVING의 User Story
티빙의 유저가 티빙을 이용하는 이유는 무엇일까. 글로벌 서비스인 유튜브와 넷플릭스, 토종 OTT 서비스로 사세를 확장하고 있는 왓챠, 웨이브, 쿠팡플레이 등 유저의 눈과 귀를 즐겁게 해 줄 것들은 차고 넘친다. 그럼에도 사람들이 티빙을 찾는 이유가 있을 것이다.
결론부터 이야기하자면 티빙이라는 플랫폼 자체 영향력이 막강해진 덕분이다. 오리지널 콘텐츠를 적극 수급해 충성 고객 저변을 넓힌 것이다. 서비스의 기능이 뛰어난 측면도 물론 있겠지만, 콘텐츠 자체가 얼마나 재밌고, 타 플랫폼과 차별화된 경험을 할 수 있는지가 관건이다. 티빙에 따르면 오리지널 콘텐츠를 통한 유료가입 기여 비중이 지난 1분기 대비 3분기는 155%까지 성장했다.
티빙은 지난 1월 첫 오리지널 '여고추리반'을 선보인 이후 예능, 영화, 드라마 등 다양한 장르에 걸쳐 오리지널 콘텐츠를 제작하고 있다. '신서유기 스프링캠프', '아이돌 받아쓰기 대회', '환승연애' 등 예능 콘텐츠에 '샤크:더 비기닝' 등 영화까지 라인업을 구축했다. 더불어 '유럽축구선수권대회(유로2020)' 생중계로 스포츠 영역까지 콘텐츠 수급을 확대하고 있다.
- TechM <강력해진 티빙 플랫폼...오리지널 콘텐츠 효과 톡톡> 2021.10.18
티빙은 작년 CJ의 케이블 채널인 엠넷이 낳은 또 하나의 스타 예능 <스트릿 우먼 파이터>의 스페셜 비하인드 영상을 독점 공개하며 시청자들의 채널 유입을 독려했다. 다른 OTT들에 비해 상대적 강세를 보이고 있는 예능 콘텐츠의 연이은 화제성이 과연 티빙의 상승세를 견인하고 있는 것이다.
- W코리아 <OTT의 난 속에> 2021.12.03
티빙은 다양한 영역의 오리지널 콘텐츠 경험을 제공하여 유저의 만족도를 끌어올렸다. 이를 종합적으로 보아, 티빙을 이용하는 유저 스토리를 다음과 같이 정리해볼 수 있다.
고객(사용자)은
MZ세대 유저는
목적(목표)을 위해서
다른 OTT 서비스들과 차별화된 예능, 영화, 드라마 등 오리지널 콘텐츠를 즐기기 위해
필요(욕구)를 원한다
티빙의 월 정액 이용권을 구매한다.
2. TVING 유저의 이용권 구매 Flow
티빙을 처음 접하는 신규 유입 고객의 경우 가장 먼저 티빙에 접속하여 '티빙 시작하기'를 선택해 계정에 로그인한다. 로그인만 한 상태 즉, 티빙 이용권을 구매하기 전에도 무료로 제공되는 프로그램들이 있다. 프로그램을 누르게 되면 3분 미리보기를 제공하고 미리보기가 끝나면 구매하기 버튼이 뜬다. 영상 하단으로 내리면 전체 회차를 볼 수 있는데, 전체 회차 중에서 구매할 회차를 선택하고 구매하기 버튼을 누른 후 결제하면 해당 회차를 다시 볼 수 있다.
3분 미리 보기 외에 매주 업데이트되는 무료로 제공되는 프로그램(1회차에 한함)이 있다. 이 프로그램들은 티빙 내에서도 편성표로 구성되어 있어, 내가 보고 싶은 회차를 자유롭게 볼 수 있는 것은 아니다. 그렇기 때문에 사용자는 한 회를 맛보고 나서 다음 회차가 나올 때까지 기다리다 참을 수 없게 되면 이용권을 구매하게 된다. 이처럼 월 정액 이용권을 구매하면 모든 콘텐츠를 무제한으로 감상할 수 있다.
앞서 살펴본 유저 스토리를 해결하기 위한 핵심 기능은 '월 정액 이용권 결제' 기능이다.
이용권 결제를 위해 유저는 다음과 같은 Flow로 이용권을 구매하게 된다.
티빙 앱 접속 → 회원가입(계정 로그인) → 홈 화면(내가 보고 싶은 콘텐츠 확인) → 내 계정 → 이용권 선택 → 이용권 구매
페이퍼 프로토타입 (Lo-Fi Prototype)
위의 화면 흐름을 동일하게 Lo-Fi Wireframe으로 그려보았다.
3. Figma 실습
Wireframe 그려보기 (Mid-Fi Prototype)
1. 티빙 앱 접속 : 유저가 처음 티빙 앱/웹 페이지에 접속한다.
2. 계정 로그인 : 로그인할 계정을 선택한다.
3. TVING ID 로그인 : 아이디, 비밀번호를 입력하고 로그인한다.
4. 홈 화면에서 콘텐츠 탐색 : 홈 화면에서 보고 싶은 콘텐츠를 탐색한다. (또는 무료 보기 콘텐츠를 시청한다.)
5. 내 계정 선택 : 내 계정에 들어가 [이용권] 구매 정보를 얻는다.
6. 이용권 안내 : 원하는 이용권의 종류를 선택한다.
7. 이용권 구매(결제) : App Store와 연동된 계정으로 구독 및 결제를 완료한다.
화면 설계서 작성하기
Figma를 이용해 와이어프레임을 그려보았으니 와이어프레임의 각 기능들의 요소와 인터랙션이 어떻게 구현되어야 하는지 설명하는 화면 설계서도 같이 작성해보며 실습하는 것이 좋을 듯 했다. 실무에서는 제품을 개발하기 위한 최종적인 기획 산출물이 화면 설계서이기 때문에 각 기능이 명확하고 상세하게 설명되어야겠지만, 이번 포스팅에서는 간단히 '홈 화면'의 Description을 작성해보았다.
Figma를 사용해 본 것은 이번이 처음인데 와이어프레임을 그리는 과정이 쉽지만은 않았다. 세 화면을 그리는 데 두 시간 가량이 걸렸다. 툴 사용이 익숙해지면 시간도 단축되겠지만 초보자(?) 입장에서는 긴 여정이었다..ㅎㅎ 다양한 컴포넌트를 사용해보면서 어떤 버튼이나 아이콘이 있는지, 무슨 기능을 설명할 때 사용하는지도 알게 되었다. Figma를 사용하면서 실제 화면 구성과 거의 흡사하게 구현할 수 있어 미리 산출될 결과물을 확인해 볼 수 있다는 점에서, 보다 익숙하게 다룰 수 있게 된다면 유용하겠단 생각이 든다. 그러기 위해서 미리 잘 배워놓아야겠다!
참고자료
https://www.mobiinside.co.kr/2021/07/19/ott-tving/
https://www.techm.kr/news/articleView.html?idxno=89653
https://www.wkorea.com/2021/12/03/ott%EC%9D%98-%EB%82%9C-%EC%86%8D%EC%97%90/
