TV GUI 디자인 시 고려해야 할 점
TV 어플리케이션 GUI 디자인 팁
TV APP GUI 디자인
TV App은 모바일이나 웹과 컨트롤 방식이 다르기 때문에 인터페이스나 디스플레이 환경 등을 고려하여 디자인할 필요가 있습니다. 처음 TV 디자인을 접하게 되면 디스플레이의 크기 때문에 당황을 할 수도 있는데 몇 가지 제한사항들만 유의한다면 크게 어렵진 않습니다.
IPTV와 홈쇼핑의 TV 앱을 작업했을 때를 떠올려 TV GUI 디자인 시 고려해야 할 사항들을 간단히 정리해 보았습니다.
1. TV App 작업 해상도
TV 시장에서 광고하는 QLED 혹은 OLED라는 용어는 디스플레이 구현 기술을 말하며, 현재는 8K라 불리는 해상도가 가장 높은 해상도입니다.
디자인할 때에는 대부분 1920*1080px(xhdpi) 기준으로 작업하며 개발환경에 따라 1280*720px로 작업을 하기도 합니다.
2. Safe Zone 고려하기
TV 디자인을 할 때에도 상하좌우 가장자리에 여백을 두어야 하는데 이것을 Safe Zone이라고 합니다.
이 영역이 필요한 이유는 크게 2가지인데 TV 스크린의 가장자리까지 사용자의 시선이 미치지 못하기도 하고 구형 TV에서는 콘텐츠 영역이 잘리는 이슈가 있습니다.
물론 이 영역은 제조업체마다 다르긴 하나, 공통으로 콘텐츠 영역이 잘리지 않도록 Safe Zone 내에서 디자인해야 합니다.
*Apple TV Home ScreenApple TV는 상하 60px, 좌우 90px의 마진을 권장함
Android TV는 최소 5%의 마진을 설정, 전체 영역의 90%내에 콘텐츠를 배치함
3. Color 사용 시 유의할 점
TV의 색상은 제조업체, 밝기 및 디스플레이 설정에 따라 다르기 때문에 다양한 환경에서 수많은 테스트가 필요합니다.
TV 화면은 콘트라스트가 높아 색상이 더 밝고 생생하게 보이기 때문에 모바일이나 웹에서 사용했던 컬러보다 채도를 2~3단계 정도 낮춰 적용
해야 합니다. 또한 Warm tone보다 Cool tone이 색 번짐이 적어 효과적이라고 합니다.
* 이미지 출처 : developer.apple.com
* 이미지 출처 : developer.amazon.com화이트 컬러를 쓸 때 주의해야 점은 Pure White(#ffffff)는 사용하지 않도록 해야 합니다. 화이트는 특히 TV에서 더 밝게 보이기 때문입니다.
#eeeee 혹은 #f2f2f2 등의 밝은 회색을 권장하며, 어두운 배경을 활용하여 가독성을 높이도록 합니다.
4. Typography
텍스트는 TV 디자인에서 중요한 요소이며 모든 화면에서 텍스트가 읽힐 수 있도록 해야 합니다.
또 TV는 시청 거리가 있기 때문에 텍스트가 너무 작으면 가독성이 떨어집니다.
텍스트는 사이즈는 1080p 기준으로 본문은 28pt이상, 최소 23pt이상을 권장합니다. 자세한 사이즈 가이드는 하단에서 확인할 수 있습니다.
* 이미지 출처 : designguidelines.withgoogle.com
* 이미지 출처 : developer.apple.com또 행간은 1.2~1.4배 정도로 넓게 잡아야 멀리서도 잘 구분이 가능합니다.
더불어 색맹을 가진 사람들을 고려하여 4.5 : 1의 최소 명암비를 사용하도록 합니다.
* 이미지 출처 : developer.samsung.com또, 사람들은 TV 화면에서 많은 텍스트를 읽지 않기 때문에 너무 긴 단어보다는 짧고 명확한 단어가 좋습니다.
5. UI Elements
UI 요소들도 모바일이나 웹디자인을 할 때와 차별화된 효과가 필요합니다.
#. Focus
TV 화면 내에서 포커스는 사용자가 화면상 위치를 쉽게 인식할 수 있는 요소이기 때문에 눈에 잘 띄도록 표현해야 합니다.
예를 들면 메뉴, 썸네일, 버튼 등의 요소들에 포커스가 갔을 때 전체적인 사이즈를 키우거나 컬러 대비를 강하게 주어 선택을 강조하는 방법이 있습니다.
이때 일관성 있는 UX경험이 되도록 요소별로 디자인룰을 정하여 디자인해야 합니다.
* 이미지 출처 : developer.samsung.com포커스 예시 화면
* 이미지 출처 : designguidelines.withgoogle.com
* 이미지 출처 : developer.apple.com
* 이미지 출처 : Android TV Home Screen
* 이미지 출처 : Amazon Fire TV Home Screen#. Interaction
사용자의 컨트롤 방향에 따른 인터페이스가 자연스러워야 합니다.
가장 많이 사용하는 리모컨의 4방향 환경을 고려하여 레이아웃이 구성되어야 합니다.
* 이미지 출처 : designguidelines.withgoogle.com포커스 방향은 일관되게 배치하여 사용성을 높이고, 복잡한 구성이나 대각선 배치는 피해야 합니다.
* 이미지 출처 : developer.samsung.com컨트롤 방향이 애매한 중첩된 레이어의 사용을 지양합니다.
* 이미지 출처 : designguidelines.withgoogle.com정리
그동안 작업했던 TV GUI를 토대로 디자인을 시작하기 전에 고려해야 할 기초적인 내용들을 정리해 보았습니다.
제가 생각하는 TV 디자인의 가장 중요한 목적은 사용자의 명확하고 정확한 탐색을 돕는 것입니다.
TV 환경에서만 나타나는 특징적인 요소들을 잘 파악하고 컬러와 화면 구성, UI 컴포넌트들을 잘 정의 하시길 바랍니다. 더불어 TV 앱 디자인을 할 때 가장 중요한 것은 TV에 이미지를 직접 넣어보고 확인하는 과정이 필요하다는 것입니다.
보다 나은 TV GUI 디자인을 위해서는 다소 번거롭더라도 최대한 많이 테스트해보기를 권장드립니다.
– 라이트브레인 가치디자인그룹 정유희
[참고 사이트]
https://developer.apple.com/design/human-interface-guidelines/tvos/overview/themes/
https://developer.amazon.com/docs/fire-tv/design-and-user-experience-guidelines.html
https://developer.android.com/design/tv
https://developer.samsung.com/tv/design/
[타이틀 이미지] : gadget360
