IPTV 디자인 리뉴얼 경험 기록 (3)
디자인하는 회사원 일기
0. IPTV 디자인 3탄을 쓰기 오래 걸린 이유 (Skip하셔도 됩니다)
IPTV 리뉴얼 프로젝트 글을 쓴 지 1년이 넘게 지났다. 이제야 3탄을 쓰게 된 이유는, 회사나 제품의 유추가 어렵게 쓰고 싶었는데 디자인을 설명하려면 그게 어려웠기 때문이다. 지금 생각해보니 괜히 너무 조심했던 것 같다. 지금은 또 몇 번의 업데이트를 거쳤기 때문에 모습이 조금 달라져서 부담을 줄이고 그때의 경험을 이어서 써보려고 한다.
먼저 읽으면 좋아요
IPTV 디자인 리뉴얼 경험 기록 (1) : IPTV UX리서치
IPTV 디자인 리뉴얼 경험 기록 (2) : TV UI디자인 가이드
할머니/할아버지도 쓸 수 있게, 극단적으로 편리하게 만들어라!
당시 회사의 높은 곳에서부터 나온 미션 문장이었다. TV의 유저타겟과 환경은 굉장히 넓고 다양하므로 어찌보면 당연한 목표지만 IPTV 1.0에서의 단점을 분석하고 완전히 개편하여 유니버셜 중에서도 최고로 유니버셜한, 쉬운 UX 중에서도 최고 쉬운 UX를 보여줘야 했다. 또한 개발적으로 당시 1.0 버전은 실시간에 관련된 플로우와 VOD 관련된 플로우가 분리되어 각각 관리되고 있어 경험이 저하되는 지점이 있었는데, 이를 통합할 수 있는 기회이기도 했다.
다만 완전히 새로운 UX를 (이전에 보지 못했던 TV 화면 같은 멋있는 거) 제작하는 것에는 개발적으로나, 그렇잖아도 사용자가 어렵게 느끼고 쉽게 학습하지 못하는 TV 환경 특성상 한계가 있었다.
이런 복합적인 지향점과 제약점을 토대로 우리는 아래와 같이 디자인 개편을 진행하게 되었다.
1. 디자인 원칙 세우기
IPTV Design Thinking, 데스크 리서치, 각종 설문과 옵저베이션을 통한 결과를 단순하게 정리하자면, 사용자들은 너무 많은 기능을 가진 IPTV 조작에 대한 두려움 즉, 심리적 장벽을 느끼고 있었고 리모컨 사용을 어려워했으며 TV 화면의 가독성에 대한 불만이 있었다. (리서치 과정은 IPTV 디자인 리뉴얼 1편 참고) 이제 우리의 타깃은 '할머니/할아버지'로 표현된, IT에 미숙한 사용자인 점을 고려하여 아래와 같이 디자인 원칙을 세웠다.
- 텍스트는 잘 보여야 한다.
- 리모컨 포커스가 명확해야 한다.
- 컬러는 정보의 대비/강조를 위해 제한적으로 사용한다.
- 시선의 흐름과 4방향 키를 고려해 레이아웃을 구성한다.
- TV 개발 환경을 고려해 이미지(소스)는 최소화한다.
2. 대표 화면 디자인 컨셉 작업
(편의상 2번으로 넘버링을 했지만 사실 디자인 원칙을 완벽하게 세운 후 디자인 작업을 시작하진 않았다. 대표 화면 디자인을 하면서 원칙이 강화되는 부분들이 있었다.) 모바일 앱은 홈 화면을 먼저 작업하곤 하지만, IPTV에서는 ‘실시간 방송’을 대표로 컨셉을 잡기 시작했다. 사용자가 마주치는 첫 화면이자, IPTV에서 가장 많이 보게 되는 화면이기 때문이다. 이 중에서도 'Mini EPG' 화면을 먼저 작업했다. (실시간 TV를 보면서 내가 지금 보는 방송의 정보를 볼 수 있는 화면. 'IPTV 용어 정리' 편에 더 자세히 정리해뒀다)
TMI 하나 : TV 디자인 작업의 시작은 배경 사진 찾기였다. 나는 당시 좋아하던 이제훈님으로 적절한 고화질 이미지를 찾는 데에 꽤 시간을 들였다. (잘생긴 사람이 배경이면 디자인도 잘 나온다는 것이 학계의 정설)
TMI 둘 : 기존 mini EPG 화면에 대한 사용자 조사에서 재미있는 점이 있었는데, 정보 영역이 화면을 가리는 면적 자체는 가장 작은데도 불구하고 사람들이 화면이 가려지는 것에 대해 더 거슬려했다. 영상 중간에 떠 있고, 형태감이 더 잘보이기 때문이라고 해석했다. 그래서 실제로 면적은 훨씬 더 많이 가리지만, 영상과 자연스럽게 이어져 보이도록 화면 전체를 사용하고 그라데이션으로 사라지도록 하여 가능한 거슬리지 않되, 텍스트 정보들은 훨씬 더 크게 작업했다.
3. 디자인 공통 가이드 제작
1번의 원칙과 2번의 디자인 컨셉 작업을 진행하면서, 실제 디자인 가이드는 아래와 같이 적용되었다.
텍스트는 잘 보여야 한다
일단 기존에 세련된 느낌이었던 폰트를 모두 더 Bold 한 세트로 바꾸고 사이즈를 키웠다. 그리고 배경과 텍스트에 가능한 투명도 효과를 쓰지 않았다. 예를 들어 기존 편성표 화면은 배경에 약간의 투명도가 있어서 뒤에 실시간 방송 영상이 살짝 보였는데, 배경 투명도를 모두 제거했다. 이왕 '편성표'를 보기 위해 화면에 진입했으니 필요한 정보에만 더 집중할 수 있도록 유도한 것이다.
GUI 작업 시 흔히 정보의 중요도에 따라 텍스트 일부에 투명도를 넣어 차이를 주곤 하는데, 이 것도 뒤에 화면이 움직인다면 겹쳐 보일 수 있으므로 TV에서는 가능한 투명도 효과는 빼고 컬러 조정으로만 차이를 주었다.
리모컨 포커스가 명확해야 한다
포인트 컬러를 강하게 사용하고, 사이즈를 106% 키우면서 그림자 효과를 줘서 튀어나와 보이도록 했다.
리모컨 포커스는 언제나 가장 중요하게 생각한 부분이다. TV를 켜놓고 잠시 다른 걸 하다 오거나 다른 화면에서 갑자기 진입해도, 어떤 화면에서도 내 포커스를 한눈에 알 수 있도록 하기 위해 가장 중요도를 높였다. 화면 전체적으로 Dark Gray를 기본으로 포커스에만 Yellow를 써서 색 대비를 강하게 했고, 사이즈를 키우고 그림자 효과를 주는 등 z 축으로 앞으로 튀어나와 보이도록 했다.
컬러는 정보의 대비/강조에 제한적으로 사용한다
기존 디자인은 영화는 노란색, TV다시보기는 연두색... 등 메뉴에 따라 다른 포인트 컬러를 사용하여 '카테고리 별 아이덴티티'를 강조하는 컨셉이었다. 위와 이어지는 이야기로, 이번 개편에서는 컬러 팔레트를 매우 제한적으로 사용하여 포커스 컬러가 어느 화면에서나 통일되어서 찾기 쉽도록 하였다.
배경은 푸른기가 도는 짙은 회색을 기준으로 조금씩의 톤 조정을 통해 레벨링 했고, 배경 대비 가장 눈에 띄는 노란색을 포인트 컬러로 사용했다. 서브 컬러도 유사색으로 구성해 포커스 컬러로의 시선 집중을 방해하지 않으려고 하였다.
IPTV 리뉴얼 프로젝트 컬러 팔레트 일부TMI 셋 : 포인트 컬러 '노란색'에 대해 이야깃거리가 있는데, 디자인 컨셉을 잡을 당시 노란색이 검은색(어두운 회색)에 가장 대비되어 가시성이 좋고 선호도에 영향을 덜 받는 중성적 색이기 때문에 사용하게 되었다. 하지만 앞서 IPTV 디자인 유의점 중 TV 디스플레이 색상 환경을 고려한다면, 사실 노란색은 TV별로 톤 차이가 가장 크게 나는 색 중 하나다. 어디서는 더 초록빛으로, 어디서는 더 주황빛으로 보이고 이에 따라 디자인 느낌이 미묘하게 달라져 이 부분이 힘들었다. (남들은 그다지 신경 쓰지 않았다. 개발자들은 차이점을 느끼지 못하는데 UX쪽만 '노란색이 상했어요..!' 괴로워했다.)
배경 컬러 관련하여 추가로 설명하자면, TV 인터페이스 배경은 어두운 톤인 경우가 많다. TV는 시청 환경이 실내이고, 영화관처럼 주변을 어둡게 하고 이용하는 경우를 고려했기 때문이다. 또 장시간 큰 디스플레이의 화면을 이용하므로 White는 눈의 피로도가 높아질 수 있다. 일부 어두운 콘텐츠가(공포영화 포스터나 예고편 같은) 배경 컬러에 묻히지 않도록 해주는 효과도 있다.
물론 이것도 바이블은 아닌 게, Apple TV나 삼성 스마트 TV 인터페이스는 밝은 톤을 사용해 깔끔한 느낌을 주고 Hulu TV는 컬러풀한 그라데이션을 활용했다. (최근 Hulu 디자인은 더 어두운 톤으로 변경됨) 여기는 실시간 방송을 기본으로 하는 IPTV냐 그 외 OTT냐의 차이도 있을 수 있다.
시선의 흐름과 4방향 키를 고려해 레이아웃을 구성한다
리모컨의 4방향 (상, 하, 좌, 우) 키 만으로 이동이 쉬우려면 내가 원하는 콘텐츠로 포커스를 어떻게 이동해야 할지 사용자에게 혼란스러운 상황을 최소화할 수 있어야 했다. 그래서 가능한 직선적 레이아웃을 구성했으며 정보 중요도를 시선의 흐름에 따라 구성했다. (좌상단에서 > 우하단으로)
예를 들어 영화 상세화면의 경우, 정보 우선순위를 재검토할 때 사용자는 이미 포스터를 보고 눌러서 진입했으므로 포스터 이미지 정보는 중요도를 낮춰도 될 것이라 판단하여 위치를 좌상단에서 우상단으로 변경하였다. 또한 기존에는 포스터 아래 버튼으로 이동할 때 그리드가 다소 불분명했다면 4방향 키 사용에 용이하게 레이아웃을 변경하였다. 이를 통해 화면을 2단으로 나누지 않아 많은 정보를 시원하게 구성할 수 있는 장점도 있었다.
TV 개발 환경을 고려해 이미지(소스)는 최소화한다.
이번 리뉴얼에는 개발 방식 개편도 포함되어 있었으므로, 개발에서 요청한 '이미지 용량 경량화' 부분을 고려하여 디자인 원칙에 추가하였다. 기존에는 큰 TV 화면을 꾸며줄 수 있는 배경 패턴이나, 리모컨 포커스를 강조할 수 있는 장식적 요소들이 더 있었는데 이러한 요소들을 모두 재검토했다.
물론 GUI에서의 '장식 요소'가 정말 시각적인 '장식'만을 위한 것은 아니다. 예를 들어 기존 디자인에서 제목 뒤에 있는 패턴은 제목으로 시선을 유도해줬을 것이며, 포커스를 따라다니는 점은 리모컨 포커스를 더 강조해줬을 것이다. 그러나 이번 리뉴얼 컨셉은 단순화가 목표였으므로 이러한 요소를 제거해도 되도록 다른 방법을 통해 중요 정보를 강조해줬다. (하지만 곧 다음 프로젝트를 진행하면서 이미지 용량은 엄청나졌다. 이건 다음에)
4. 애니메이션과 사운드(!)
리모컨 4방향 키로 화면을 넘나들 때 사용자가 방향감을 더 잘 이해할 수 있도록 애니메이션 효과를 사용하였다. 예를 들어 VOD 리스트 화면에서 카테고리가 접혔다 펼쳐지는 효과들은 이 전 화면으로 어떻게 돌아갈지에 대한 UI 방향감을 자연스럽게 익힐 수 있도록 해준다. 이 부분은 UX에서 흔한 개념이라 간단하게 넘어가지만, 그렇잖아도 TV 스펙을 고려해 용량을 줄여달라는 개발팀에 애니메이션을 넣어달라고 요청하는 것은 다소 부담스러운 일이었다. 최대한 영상 샘플을 제작하고 조율해나가면서 진행하였다.
그리고 작업 중 멘붕을 불러일으키는 요소가 있었는데, 바로 사운드였다. 당시 IPTV에서는 '효과음'을 사용하지 않는 것이 일반적이었다. 기본적으로 실시간 방송 소리가 깔리고 있고, 이를 끊거나 방해하지 않기 위함이었다. 그러나 Netflix나 Apple TV와 같은 OTT 서비스 들은 배경 사운드가 없어서 (OTT가 뭔지는 IPTV 용어 정리 편 참고) 각종 효과음들을 사용하고 있었는데 이번 프로젝트에서 우리도 사운드를 사용해보기로 하였다.
갑자기 사운드 UX요...?
우선 '실시간 방송' 사운드를 어떻게 해야 할지가 큰 고민이었다. TV 사용 경험 조사에 따르면 사용자들은 TV를 보고 있지 않더라도 소리를 계속해서 듣는 것을 중요하게 생각하고 있었기 때문에, 이 소리를 끊는 것에 대한 우려가 많았다. 이 부분은 지금도 정답은 없다고 생각하지만, 당시 아래와 같이 정리하였다.
영상이 조금이라도 보인다면 그 영상의 소리가 들리도록
예를 들어 기존에는 어느 화면에 들어가도 배경이 살짝 투명해서 뒤에 방송이 돌아가는 상태였고, 방송이 조금이라도 보인다면 그 소리가 나오는 것이 맞다고 생각했다. 하지만 이번 리뉴얼을 하면서 우리는 배경 투명도를 모두 제거하여 '영화 리스트를 탐색'하고 있다면 그 리스트에만 집중할 수 있도록 하였으며, 이에 맞게 방송 영상이 보이지 않고 있다면 소리도 들리지 않도록 하였다. 대신 편성표 화면과 같이 조금이라도 보이는 화면이라면 소리가 들리도록 했다.
소리가 끊기는 순간을 덜 불편하게 만들기
첫 번째로 방송 소리가 갑자기 100%에서 0%로 끊기지 않도록 했다. 예를 들어 방송을 보다가 '홈' 화면에 진입했을 때, 처음에는 소리가 50% 정도 들리고, 화면 스크롤을 내려서 탐색을 시작하면 0%가 되도록 했다. (여기서 50%는 실제 볼륨의 수치를 반으로 줄이는 것은 아니고 심리적인 50% 의 표현으로, 실제 50%로 줄이면 훨씬 안 들리기 때문에 테스트를 해보면서 약간 더 잘 들리도록 수치를 맞췄다.) 이에 맞게 홈 화면은 첫 진입 시에는 상단에 투명하게 살짝 영상이 보이고, 아래로 스크롤을 내려 탐색하면 영상이 모두 가려지도록 되어 있다.
그리고 효과음을 사용하였다. 아무 소리가 나지 않는 상태와, 짧은 효과음일지라도 사운드가 있을 때 어색함의 정도가 매우 다르다. 리모컨으로 '포커스를 옮길 때', '확인'을 누를 때, 화면이 전환될 때 등에 약간씩 다른 효과음을 이용하여 리모컨을 사용하는 탐색과정이 더 즐겁게 만들었으며 눌렀다는 피드백을 더 확실하게 느낄 수 있도록 하였다. 실시간 방송 영상 소리를 없앰으로 탐색하고 있는 콘텐츠에 더 집중할 수 있도록 유도했다.
이 효과음들을 사운드 전문 업체와 녹음(?)하고, 영상에 입혀보면서 테스트하고, 고르고, 볼륨을 조절해보는 과정을 거쳤다. 사운드 UX, AUI(Auditory User Interface)에 관해서는 작업했던 적도 없고 전문가가 없었으므로 처음에 많이 당황스러웠던 기억이 있다. 부서니 담당자니 구분 없이 다 같이 힘을 모아(...) 진행하여 잘 마무리되었다.
급 마무리
이 프로젝트가 나에게 의미 있는 이유에는 여러 가지가 있지만, 그중 하나는 내가 해보지 않은 것을 접했을 때 '이건 내가 모르는 거니까 패쓰' 가 아니라 '헐 처음 해보는 건데, 한 번 해볼까?'하게 되었다는 것이다. 나는 원래 TV를 많이 보는 사람도 아니었고, 사운드에 관해서는 1도 몰랐다. 그래도 찾아보고 공부하고 부딪힌 덕에 마무리할 때는 TV 좀 해본 사람인 척할 수 있게 되었다.
하지만 이 안도감도 금방 끝나게 되었다. 곧 또 완전히 다른 프로젝트가 시작되었기 때문이다.
'헐 Kids라뇨 이건 진짜 몰라요 모른다구여!'
IPTV 리뉴얼 시리즈의 디자인 결과물은 아래 링크에서 확인하실 수 있습니다.
