IPTV 디자인 리뉴얼 경험 기록 (2)
디자인하는 회사원 일기
IPTV 디자인 리뉴얼 경험 기록 (1)에 이어 이번 글에서는 IPTV 리뉴얼 프로젝트를 하면서 부딪혔던 문제점들을 좀 토로하고(징징거리고), TV GUI 디자인을 할 때 유의해야 할 점을 디자인 가이드들을 참고하여 정리해보았다.
UX인데 User만 있는 게 아니다
1. 부딪히는 문제점들
사용자가 보는 TV가 어떤지는 앞선 Design Thinking 과정을 통해 간단히 알아봤지만 실제 프로젝트에 들어가면 사용자만 고려할 순 없다. (당연) 수많은 이해관계자들의 요구사항, 물리적인 제약사항들은 이상적 시나리오와 반대되는 경우가 많다.
1) 다양해도 너무 다양한 이해관계자(Stakeholder)들
디자이너가 생각하는 서비스 기획-UX-개발로 이루어지는 일반적인 3개 구조 외에 IPTV는 영상 콘텐츠들이 필요하기 때문에 이를 가져오는 부서와 제휴를 맺는 부서, 그 콘텐츠의 제목, 설명, 썸네일 등을 운영하고 채널을 관리하는 부서들이 있고 홍보와 마케팅은 별도 부서에서 맡는다. 밖으로 홍보하는 것뿐 아니라 콘텐츠 구매와 상품 가입을 유도하기 위한 광고, 배너 배치를 요청하는 부서도 있다. 개발도 앞단의 인터페이스 개발 (front-end)와 서버 (back-end) 개발 부서가 다르고 (관련 업체도 다르고), 부가적인 앱 기능은 또 다른 부서에서 진행되었다. 외부 관계자들도 무시할 수 없다. 콘텐츠를 외부에서 가져오는 만큼 다양한 곳과 제휴를 맺는데 각자 원하는 바가 다르고, 국가에서 내려오는 정책사항들도 있다. (이 이상은 기억이 안 나 생략)
Photo by Samuel Zeller on Unsplash관련된 부서가 많다는 건 실무자들은 더 많다는 말이고, 각 의사결정권자도 다양해진다는 말이다. (결정은 하난데 의사는 서너 개~) 전에는 디자이너가 직접 커뮤니케이션해야 하는 사람이 PM(Project Manager) 중심으로 몇 명 없었다면, 이번 IPTV에서는 훨씬 많았다. 예를 들어 메뉴를 단순하게 고치고 싶다고 하여 방안을 내면, 카테고리 관리자부터 이제까지 기존 메뉴에 맞게 맵핑했던 콘텐츠들의 분류를 다시 다 설정해야 하는 최종 실무자까지 모두에게 무시무시한 요청사항이 되기 때문에 여러 번의 협의가 필요했다. (마찬가지로 나에게도 무시무시한 요청사항이 계속해서 들어온다) 그런 사정이니 '리뉴얼' 이름을 내걸고 처음부터 다시 그려보겠다는 건 모두에게 부담스러운 일이고 실무자가 아니면 이해가 힘든 내용이 많았다.
2) 다양한 디바이스 라인업과 버전과 디스플레이와...!
GUI의 숙명은 '대응'인 듯하다. OS대응, 해상도 대응, 신규 디바이스 대응, 대응, 대응..
먼저 IPTV는 셋톱박스 디바이스 라인업이 다양하다. 셋톱박스는 계속 새로 만들어지는데, 핸드폰처럼 사용자들이 빨리 교체하는 기기가 아니기 때문에 새 기기가 나올수록 대응해야 할 종류가 점점 많아진다. 그런데 소프트웨어 버전도 모두 다르다. 이번 리뉴얼 프로젝트는 UX로 따지자면 3.0 버전이었지만, 몇 년 전부터 조금씩 바뀌어온 수많은 버전들이 존재했다. 같은 셋톱박스 모델이라도 출시 시점에 따라 소프트웨어 버전이 다르기 때문에 셋톱박스 버전n=소프트웨어 버전n 으로 매칭도 안된다. (그래서 전 세계 OTT 시장에서는 소프트웨어 인터페이스를 통합해서 관리할 수 있도록 Cloud 화가 이슈)
TV 자체도 정말 다양하다. 핸드폰도 제조사 별로 같은 컬러가 미묘하게 다르게 보이는 걸 확인할 수 있는데, TV 디스플레이는 유난히 색상 차이가 심하다. 같은 제조사 제품 간에도 컬러 차이가 크다. 물론 TV 설정에서 밝기/채도/색상 등을 조정할 수 있지만 한계가 있고, 일반 사용자들에게 최적의 설정까지는 바랄 수 없다. 이 부분은 디스플레이 방식 영향이 크나 (LCD, OLED, 백라이트..) 자세히 알 필요는 없고, 분명한 건 디자이너가 컴퓨터에서 보는 색상과 실제 TV에서 보는 색상은 완전히 다르니 꼭 다양한 TV 에 테스트가 필요하다.
3) 셋톱박스는 PC, 모바일보다 성능이 떨어진다(?)
경험상 실시간 방송을 송출하는 IPTV 셋톱박스는 모바일, PC보다 여러 면에서 구현 능력이 떨어진다. 제조사가 제공하는 OS, 실시간 방송이 제외된 OTT 셋톱들은 (삼성 스마트 TV, 애플 TV 등) 화려한 모션 효과를 자랑하는데, IPTV 디자이너는 자신의 꿈이 (막 쉬리릭 나타나고 슈웅 커지게 해주세요!) 개발자에게 무산될 확률이 높다. 특히 실시간 방송이 재생되면서 동시에 일어나는 인터랙션 효과들은 제한이 있었다. 그래서 디자인 가이드를 만들 때 소스 용량을 최소한으로 가져갈 수 있도록 고려하였다. (급한 일정 중에는 계획적으로 소스를 정리하기 쉽지 않다) 또 개발자들의 난색에 굴하지 않고 다양한 방법을 찾아 협의점을 찾아갔다.
4) 테스트 환경 세팅의 어려움
위에 다양한 TV에서 테스트가 필요하다고 썼지만, 막상 그것이 쉽지 않다는 것을 안다. 사무실에 비싼 TV 여러 대가 세팅되어 있기는 힘들다. 작업 중인 맥에서 기깔나는 컬러로 디자인해놓고 이미지를 TV에서 틀어보면 많이 다른 느낌이 되어있을 것이다. 그 TV에 맞게 조정하고 다른 TV에서 보면 더 이상하고.. 반복. 다른 회사의 IPTV 서비스 분석도 한 장소에서 수행이 거의 불가능하다. SK, KT, U+ 통신사 인터넷망이 모두 깔려있는 공간이 거의 없다. 물론 이 모든 건 돈과 시간과 공간만 있으면 해결 가능하다. 회사에서 지원을 받아낼 수 있으면 된다.
2. TV 인터페이스 디자인을 할 때 고려해야 할 것
그럼 이제 진짜 디자인 시작! 하기 전에, 다양한 곳에서 제공하는 TV Design Guide 들과 주의점을 훑어보았다. TV에서 특징적인 내용 중 시각적인 것 위주로 정리해놓았다.
디자인 작업 영역과 TV 해상도
디자인 시 작업 영역은 1920 X 1080px (Full-HD 수준)에 320 dpi로 진행하면 된다. TV 해상도 종류들은 아래와 같다.
SD : 720 x 480
HD : 1280 x 720
FHD (Full-HD) : 1920 x 1080
UHD(4K) : 3840 x 2160 (4096 x 2160)
5K : 5120 x 2880
8K : 7680 x 4320
3미터 멀리에서
TV와 사용자의 거리는 평균 3미터라고 한다. (아마존 파이어 TV에서는 그래서 '10-foot UI'라고 칭한다) 화면이 크다고 웹사이트 디자인하듯이 작은 요소를 이것저것 넣다간 큰일 난다. 사용자는 멀리서 적은 관여도로 보고 있다는 사용 환경을 잊지 말고 정보의 양은 적게, 요소들은 크게, 가독성을 고려하자.
삼성TV 디자인 가이드라인 중
안드로이드TV 가이드라인 중Safe Area
모든 TV 디자인 가이드라인에서는 중요한 정보를 화면 조금 안쪽에 Safe Area(Safe Zone)을 고려하여 위치시키기를 권장한다. 저사양 TV나 설정에 의해서 상하좌우가 잘려 보일 수 있기 때문인데 사이즈는 제조사, 가이드마다 다르므로 가장자리가 잘릴 수 있다는 걸 참고만 하면 된다.
애플 TV 가이드 : 상하 60 pixel, 좌우 90 pixel
아마존 파이어 TV 가이드 : 상하좌우 화면 5%
Layout
레이아웃을 짤 때 가장 고려해야 하는 것은 리모컨 사용 환경이다. 특히 4방향 키를 쓸 때 꼬이지 않도록 상하좌우 이동 경로가 확실한 그리드 레이아웃을 추천한다. 이번 프로젝트에서는 모든 화면을 가능한 단순하게 배치해서 경로를 예상하기 쉽도록 했다.
Color
TV 디스플레이에는 특히 색상 관련된 유의점이 많다. 표현할 수 있는 색상 범위가 PC에 비해 좁고, 보통 대비가 더 강해지고 쨍해 보인다. TV 디스플레이 발전에 따라 좋아지고 있다고 하지만 TV도 자주 바꾸는 제품이 아니므로 Best Case만 고려하지 말자.
아마존 파이어 TV는 TV가 표현할 수 있는 색조(아래 표의 높이값) 범위가 좁다고 설명하며, 색상은 Bleed 현상 즉, 색 번짐 현상이 적은 한색 계열을 추천하고 있다.
아마존 파이어TV 가이드 중애플의 TV 디자인 가이드에서는 아래 표에서 넓은 영역을 차지하는 컬러 사용을 추천하고 있고, 4K TV는 일반적으로 아래 표의 Display P3로 표시된 영역은 문제없이 표현된다고 설명하고 있다. (그러나 TV에 넣어보면..?)
애플 TV 디자인 가이드 중
위와 같은 TV 환경 이해를 바탕으로 더 상세한 작업 유의점들을 다시 정리해보았다.
순수 백색(#FFFFFF) 사용은 지양하라. 순백색이 TV에서는 너무 쨍해 보여 눈이 아프다. 밝은 회색도 TV에서 충분히 흰색으로 보인다. 안드로이드 TV 디자인 가이드와 동일하게 우리도 #EEEEEE를 주 흰색으로 사용했다.
안드로이드 TV 디자인 가이드 중채도가 높은 원색(RGB)을 넓은 면적에 사용하는 것에 유의하라. 너무 밝고 높은 채도로 나타날 수 있다.
너무 어두운 배경에 너무 밝은 이미지 혹은 텍스트를 쓰는 것에 유의하라. 대비가 심한 색상을 사용할수록 디스플레이 주변에 색이 번져 보이는 헤일로(Halo) 현상이 일어나기 쉽다. 또 화면에 잔상이 남는 번인(Burn-in) 현상도 주의.
넓은 화면에는 그라데이션 사용을 주의 깊게 하라. TV에서는 그라데이션이 계단처럼 깨져 보일 수 있다. 빠른 시점에 TV에 넣어보면서 그라데이션 색과 정도를 조절해놓아야 한다.
결론은 최대한 빨리 TV에 넣어서 10 발자국 뒤로 간 다음
가상의 리모컨을 쥐고 테스트해보는 게 최고
참고한 TV 디자인 가이드 링크 :
Apple TV, Android TV (개발자 가이드), Android TV (디자인 가이드라인), 삼성 TV, Amazon Fire TV
IPTV 리뉴얼 시리즈의 디자인 결과물은 아래 링크에서 확인하실 수 있습니다.
