<div id="readability-page-1" class="page"><div><figure><figcaption>스마트TV APP 디자인할 때 고려해야하는 요소</figcaption></figure><p id="c112">OTT 서비스의 가장 큰 특징은 여러 플랫폼에서 콘텐츠 감상을 즐길 수 있는데요, 그중에서도 스마트 티비는 OTT 서비스를 최대로 경험할 수 있는 플랫폼이라고 생각해요.</p><p id="5204">이번 글은 프로덕트 디자이너가 어떻게 스마트TV의 앱을 디자인하는지 알려드리려고 해요.</p><p id="366f">여러분이 만약 프로덕트 디자이너로 스마트TV 앱을 디자인해야 한다면 어떻게 해야 할지 떠오르는 그림이 있나요?</p><p id="9db2">사실 우리는 모바일 및 웹의 경험을 설계하는 게 익숙해서 스마트TV의 앱을 디자인하기엔 쉽지 않은 일이라고 생각해요. 생각보다 자료도 많이 없고요. 조금은 특수한 스마트TV 앱을 디자인하는 방법을 이번 글에서 알려드리겠습니다.</p></div><div><p id="9793">먼저 TV의 특징을 알아야해요. 일반적으로 가족이 함께 생활하는 집에 TV는 보통 어디에 있나요?</p><figure><figcaption>Photo: Andres Jasso (Unsplash)</figcaption></figure><p id="4b4a">대게는 거실에, 보통 소파 앞에 위치해 있어요. 최근에는 LG의 스탠바이미 같은 퍼스널 장비도 나왔지만, 일반적으로는 큰 화면으로 몰입감 있게 콘텐츠를 감상한다는 특징이 있어요. 화면이 크기 때문에 가족들과 함께 시청하기도 하는데요, 다른 거 보고 싶어도 아빠의 채널 주도권 때문에 계속 뉴스를 보던 경험이 생각나네요. 여기서 바로 리모컨으로 조작한다는 특징을 볼 수 있어요.</p><p id="8b31">이런 특징을 가진 디바이스를 디자인할 때 고려해야 할 사항은 무엇일까요? 크게는 세 가지 정도로 정리해 볼 수 있어요.</p><h2 id="afb4">1. 포커스</h2><p id="42b1">가장 큰 특징이자 중요한 부분인데 터치 디바이스에는 없는 <strong>‘포커스’</strong>가 있어요.</p><p id="9b3b">스마트TV는 사용자와 리모컨으로 인터랙션해서 늘 포커스가 어딘가에는 있어야해요. 포커스가 없다면 사용자는 어라, 지금 내가 어디에 있는거지, 어디를 눌러야 하지? (마치 폰에서 터치했는데도 창이 안 닫히는 것과 같은 느낌과 비슷할 것 같아요)</p><figure><figcaption>Photo: Erik Mclean (Unsplash)</figcaption></figure><p id="f3fa">그렇기 때문에 버튼을 디자인한다면 꼭 2가지 상태(default / focused)를 같이 만들어야 해요.</p><figure><figcaption>default (left) focused (right)</figcaption></figure><p id="fdbb">시안에도 기본으로 포커스가 어디에 있어야 하는지 표시해주는 것도 개발자와 커뮤니케이션하는데 중요합니다.</p><figure><figcaption>페이지 진입했을 때, 포커스가 어디에 기본적으로 위치해 있는지 시안에서 알려줘야 해요</figcaption></figure><p id="facb">버튼을 설계할 때 주의해야 하는 상황은 명확하게 상하좌우로 갈 수 있는 위치에 있어야 해요. 개발적인 부분에서도 휴리스틱으로 사람이 인지하는 것과 달리 컴퓨터는 가까운 거리로 계산해서 이동하기 때문에 명확하지 않으면 개발 단계에서도 어려움을 겪어요.</p><p id="85b7">개발자에게도 화면에서 포커스를 처음에 어디에 위치해야 하는지, 어떻게 이동하는지 등 커뮤니케이션해야 최종적인 결과물에서도 설계한 대로 잘 구현될 수 있어요.</p><p id="68f7">아래는 하면 안 되는 사항들만 모아서 예시로 보여주기 위해서 그려봤어요.</p><figure><figcaption>잘못된 예시 (왓챠 서비스에는 없는 화면이에요)</figcaption></figure><ul><li id="d867">지금 상태에서 위로 올라가면 [간편결제]와 [카드 정보 변경] 중 어디로 가야할지 몰라요.</li><li id="1fd3">돌아가는 버튼은 좌측 오른쪽에 있어서 사용자가 리모컨으로 이동하기에 직관적이지 않아요.</li><li id="ddf4">[돌아가기]에 포커스가 있다면 [이용 약관]으로 이동하는 경로가 명확하지 않아요.</li></ul><h2 id="c283">2. 사이즈 및 컬러</h2><p id="e2bf">스마트TV는 우리가 보는 모니터와 다르게 대비가 강하고, 색의 채도도 높고, 그리고 더 쨍하고 날카롭게 나와요.</p><p id="6de6">백화점에 진열된 TV를 생각해보면, 거기 나오는 영상이 생동감있고 선명하다는 느낌을 받을 수 있어요. 같은 이유에서 그렇답니다. 우리는 이런 부분도 고려해서 디자인해야 해요.</p><p id="5ab5">텍스트 같은 경우 #ffffff와 같은 완전히 하얀색을 잘 쓰지 않아요. 글자 같은 경우 더 날카롭게 보여서 #e0e0e0 같은 색으로 사용하길 권장해요. 모니터에서는 회색같아 보이지만, TV에서 보면 하얀색으로 보여요.</p><p id="ef9b">특히 왓챠에서 사용하는 Primary 컬러인 핑크도 디자인 시스템에 규정된 컬러를 그대로 사용하면 스마트TV에서는 빨간색에 가깝게 나와요. 이러한 부분을 반영해서 왓챠에서는 스마트TV에서 사용하는 컬러를 모바일과 별도로 TV Design System으로 만들어서 사용하고 있어요.</p><figure><figcaption>TV Design System — Color</figcaption></figure><p id="1359">모바일 화면은 눈과 가까운 거리에서 보는 행태가 많다면, 앞서 TV의 특징을 생각해 보면 TV는 상대적으로 일정 거리를 두고 사용자가 화면을 봐요. 따라서 화면과 사용자간의 거리가 있기 때문에 글자 크기가 모바일과 달라요.</p><p id="7105">사실 이 부분이 디자인의 기초인 타이포그래피 영역이라서 가장 중요하기도 하고, 감을 잡는 데 시간이 걸렸었어요. 왓챠의 스마트TV앱에서 제일 작은 Caption의 Text Size가 23px이고, 제일 큰 Display는 71px로 쓰고 있어요. 모바일에서 쓰는 Text Size와 아주 다르죠?</p><p id="8dc3">이러한 특징 때문에 Text Style도 TV Design System에 추가해서 같이 쓰고 있답니다.</p><p id="eeb7">어느 정도 시안 작업이 끝났다면 가장 중요한 부분이 남았는데요, 텍스트 크기나 컬러가 잘 맞게 표현되고 출력되는지는 최종적으로 스마트TV를 통해서 확인해봐야 해요. (마치 인쇄 넣기 전에 테스트로 출력해서 보는 것과 비슷해요!)</p><figure></figure><p id="2a20">모니터는 Color Depth의 표현이 더 좋고, 색공간도 달라서 보는 데는 한계가 있기 때문이에요. 또한 Text Size도 실제 화면의 크기가 다른 TV에서 띄워 놓고 1.2~8m 뒤에서 보고 실제로 가독성이 좋은지 보는게 좋아요.</p><p id="b2da">왓챠에서는 미러링을 지원하는 스마트TV나 애플티비를 통해서 맥북으로 띄워놓고 봐요. 만약 연결을 지원하지 않는 티브이의 경우 HDMI로 연결해요. Smart TV app Usability Test를 진행할 때도 이렇게 진행한답니다.</p><p id="260a">하지만 실제 스마트TV의 색공간도 달라서 스마트TV의 앱에서 보는 건 또 다른 느낌이라서, 개발이 어느 정도 구현되었을 때 스마트TV에서 베타 서버로 접속해서 확인이 필요해요.</p><h2 id="f3c0">3. 스마트 티비의 성능은 스마트하지 않다.</h2><p id="7e50">스마트TV의 사양은 지금은 많이 좋아졌다고 할 수 있지만 아직은 성능에 한계가 있어요.</p><p id="4b1e">왓챠는 웹으로 구현하다 보니 (대부분의 스마트 티비의 앱이 동일합니다) 퍼포먼스의 제약이 있어요.</p><p id="5db1">또한 사용자의 스마트TV가 16~22년까지, 삼성과 LG에서 제작한 다양한 모델이 있어서 모든 걸 고려해서 만들기가 쉽지 않아요. 일반적으로 스마트TV는 구매하면 최소 5년 이상을 쓰기 때문에 신형 스마트TV가 보급되기 까지는 시간이 걸려요. 이런 부분 때문에 다양한 애니메이션이나 인터랙션을 구현하기가 쉽지 않아서 고려되어야 할 점이라고 생각해요.</p><p id="f57c">대신 애플이나 안드로이드 TV는 성능이 좋기 때문에 더 자유롭게 해볼 수 있지만, 플랫폼에서 제공하는 규약이 있어서 아무래도 디자인의 자유도는 떨어져요.</p></div><div><p id="df1b">왓챠는 우리의 여정을 함께할 동료를 언제나 기다리고 있답니다. 왓챠와 함께하고 싶다면, 다음 채용공고를 확인해주세요.</p></div></div>

WATCHA - Medium

OTT 서비스의 가장 큰 특징은 여러 플랫폼에서 콘텐츠 감상을 즐길 수 있는데요, 그중에서도 스마트 티비는 OTT 서비스를 최대로 경험할 수 있는 플랫폼이라고 생각해요.
이번 글은 프로덕트 디자이너가 어떻게 스마트TV의 앱을 디자인하는지 알려드리려고 해요.
여러분이 만약 프로덕트 디자이너로 스마트TV 앱을 디자인해야 한다면 어떻게 해야 할지 떠오르는 그림이 있나요?
사실 우리는 모바일 및 웹의 경험을 설계하는 게 익숙해서 스마트TV의 앱을 디자인하기엔 쉽지 않은 일이라고 생각해요. 생각보다 자료도 많이 없고요. 조금은 특수한 스마트TV 앱을 디자인하는 방법을 이번 글에서 알려드리겠습니다.
먼저 TV의 특징을 알아야해요. 일반적으로 가족이 함께 생활하는 집에 TV는 보통 어디에 있나요?
대게는 거실에, 보통 소파 앞에 위치해 있어요. 최근에는 LG의 스탠바이미 같은 퍼스널 장비도 나왔지만, 일반적으로는 큰 화면으로 몰입감 있게 콘텐츠를 감상한다는 특징이 있어요. 화면이 크기 때문에 가족들과 함께 시청하기도 하는데요, 다른 거 보고 싶어도 아빠의 채널 주도권 때문에 계속 뉴스를 보던 경험이 생각나네요. 여기서 바로 리모컨으로 조작한다는 특징을 볼 수 있어요.
이런 특징을 가진 디바이스를 디자인할 때 고려해야 할 사항은 무엇일까요? 크게는 세 가지 정도로 정리해 볼 수 있어요.
1. 포커스
가장 큰 특징이자 중요한 부분인데 터치 디바이스에는 없는 ‘포커스’가 있어요.
스마트TV는 사용자와 리모컨으로 인터랙션해서 늘 포커스가 어딘가에는 있어야해요. 포커스가 없다면 사용자는 어라, 지금 내가 어디에 있는거지, 어디를 눌러야 하지? (마치 폰에서 터치했는데도 창이 안 닫히는 것과 같은 느낌과 비슷할 것 같아요)
그렇기 때문에 버튼을 디자인한다면 꼭 2가지 상태(default / focused)를 같이 만들어야 해요.
시안에도 기본으로 포커스가 어디에 있어야 하는지 표시해주는 것도 개발자와 커뮤니케이션하는데 중요합니다.
버튼을 설계할 때 주의해야 하는 상황은 명확하게 상하좌우로 갈 수 있는 위치에 있어야 해요. 개발적인 부분에서도 휴리스틱으로 사람이 인지하는 것과 달리 컴퓨터는 가까운 거리로 계산해서 이동하기 때문에 명확하지 않으면 개발 단계에서도 어려움을 겪어요.
개발자에게도 화면에서 포커스를 처음에 어디에 위치해야 하는지, 어떻게 이동하는지 등 커뮤니케이션해야 최종적인 결과물에서도 설계한 대로 잘 구현될 수 있어요.
아래는 하면 안 되는 사항들만 모아서 예시로 보여주기 위해서 그려봤어요.
지금 상태에서 위로 올라가면 [간편결제]와 [카드 정보 변경] 중 어디로 가야할지 몰라요.
돌아가는 버튼은 좌측 오른쪽에 있어서 사용자가 리모컨으로 이동하기에 직관적이지 않아요.
[돌아가기]에 포커스가 있다면 [이용 약관]으로 이동하는 경로가 명확하지 않아요.
2. 사이즈 및 컬러
스마트TV는 우리가 보는 모니터와 다르게 대비가 강하고, 색의 채도도 높고, 그리고 더 쨍하고 날카롭게 나와요.
백화점에 진열된 TV를 생각해보면, 거기 나오는 영상이 생동감있고 선명하다는 느낌을 받을 수 있어요. 같은 이유에서 그렇답니다. 우리는 이런 부분도 고려해서 디자인해야 해요.
텍스트 같은 경우 #ffffff와 같은 완전히 하얀색을 잘 쓰지 않아요. 글자 같은 경우 더 날카롭게 보여서 #e0e0e0 같은 색으로 사용하길 권장해요. 모니터에서는 회색같아 보이지만, TV에서 보면 하얀색으로 보여요.
특히 왓챠에서 사용하는 Primary 컬러인 핑크도 디자인 시스템에 규정된 컬러를 그대로 사용하면 스마트TV에서는 빨간색에 가깝게 나와요. 이러한 부분을 반영해서 왓챠에서는 스마트TV에서 사용하는 컬러를 모바일과 별도로 TV Design System으로 만들어서 사용하고 있어요.
모바일 화면은 눈과 가까운 거리에서 보는 행태가 많다면, 앞서 TV의 특징을 생각해 보면 TV는 상대적으로 일정 거리를 두고 사용자가 화면을 봐요. 따라서 화면과 사용자간의 거리가 있기 때문에 글자 크기가 모바일과 달라요.
사실 이 부분이 디자인의 기초인 타이포그래피 영역이라서 가장 중요하기도 하고, 감을 잡는 데 시간이 걸렸었어요. 왓챠의 스마트TV앱에서 제일 작은 Caption의 Text Size가 23px이고, 제일 큰 Display는 71px로 쓰고 있어요. 모바일에서 쓰는 Text Size와 아주 다르죠?
이러한 특징 때문에 Text Style도 TV Design System에 추가해서 같이 쓰고 있답니다.
어느 정도 시안 작업이 끝났다면 가장 중요한 부분이 남았는데요, 텍스트 크기나 컬러가 잘 맞게 표현되고 출력되는지는 최종적으로 스마트TV를 통해서 확인해봐야 해요. (마치 인쇄 넣기 전에 테스트로 출력해서 보는 것과 비슷해요!)
모니터는 Color Depth의 표현이 더 좋고, 색공간도 달라서 보는 데는 한계가 있기 때문이에요. 또한 Text Size도 실제 화면의 크기가 다른 TV에서 띄워 놓고 1.2~8m 뒤에서 보고 실제로 가독성이 좋은지 보는게 좋아요.
왓챠에서는 미러링을 지원하는 스마트TV나 애플티비를 통해서 맥북으로 띄워놓고 봐요. 만약 연결을 지원하지 않는 티브이의 경우 HDMI로 연결해요. Smart TV app Usability Test를 진행할 때도 이렇게 진행한답니다.
하지만 실제 스마트TV의 색공간도 달라서 스마트TV의 앱에서 보는 건 또 다른 느낌이라서, 개발이 어느 정도 구현되었을 때 스마트TV에서 베타 서버로 접속해서 확인이 필요해요.
3. 스마트 티비의 성능은 스마트하지 않다.
스마트TV의 사양은 지금은 많이 좋아졌다고 할 수 있지만 아직은 성능에 한계가 있어요.
왓챠는 웹으로 구현하다 보니 (대부분의 스마트 티비의 앱이 동일합니다) 퍼포먼스의 제약이 있어요.
또한 사용자의 스마트TV가 16~22년까지, 삼성과 LG에서 제작한 다양한 모델이 있어서 모든 걸 고려해서 만들기가 쉽지 않아요. 일반적으로 스마트TV는 구매하면 최소 5년 이상을 쓰기 때문에 신형 스마트TV가 보급되기 까지는 시간이 걸려요. 이런 부분 때문에 다양한 애니메이션이나 인터랙션을 구현하기가 쉽지 않아서 고려되어야 할 점이라고 생각해요.
대신 애플이나 안드로이드 TV는 성능이 좋기 때문에 더 자유롭게 해볼 수 있지만, 플랫폼에서 제공하는 규약이 있어서 아무래도 디자인의 자유도는 떨어져요.
왓챠는 우리의 여정을 함께할 동료를 언제나 기다리고 있답니다. 왓챠와 함께하고 싶다면, 다음 채용공고를 확인해주세요.
프로덕트 디자이너 at Watcha
멋진 동료를 구하고 있어요
TV APP 디자인할 때 고려해야하는 요소들 was originally published in WATCHA on Medium, where people are continuing the conversation by highlighting and responding to this story.

TV APP 디자인할 때 고려해야하는 요소들

댓글