Smart TV App 앱의 각 화면 별 UI 구조 분석 내용을 공유하고 분석 된 내용을 바탕으로 Smart TV App UX 향상을 위한 UI 구조를 도출했습니다. 무료 Smart TV 앱을 직접 사용해 보며 TV UI 구조를 확인 해 볼 수 있는 레퍼런스 사이트를 공유드립니다. DGMIT 디지엠정보기술 스마트TV SmartTV

1. Smart TV App UX 향상을 위한 UI 구
조
2014.08.26
전략기획팀 박경현 매니저
Version : 1.0.0
This material is proprietary to DGMIT. It contains trade secrets and confidential information which is solely the property of DGMIT. This material is solely
for the Client’s internal use. This material shall not be used, reproduced, copied, disclosed, transmitted, in whole or in part, without the express consent of
DGMIT. © All rights reserved.

2. 2
Contents
I. TV App UI 구조 및 분석 … 3
II. Smart TV App UX 향상을 위한 UI 구조 … 26
III. TV App 레퍼런스 사이트 … 27

3. 3
I. TV App UI 구조 및 분석
 Sebasi
 TED
 TOU.TV
VOD App
Music App  Naver Music

4. 4
I. TV App UI 구조 및 분석
VOD
세상을 바꾸는 시간 15분 (세바시)
제작사 (국내) 핸드스튜디오
앱 소개
세바시는 다양한 영역의 전문가들이
트렌드, 교육, 경제, 청년, 평화 등의 주제로 15분 동안 강연하는 프로그램입니다.

5. 5
Screen 1. 가로 리스트 형식의 메인 화면
최근 VOD 콘텐츠가 순으로 나타나고 가운데 항목에 포커스가 가며 확대되는 방식.
메뉴항목이 상단에 정렬되어 있고 하위 메뉴항목이 있는 경우 아이콘으로 표시.
하단의 배너 클릭 시 배너광고가 확장되어 나타남.

6. 6
Screen 2. 하위 메뉴항목 화면 - ①
하위 메뉴항목이 있는 메뉴에 에어 마우스 포인트를 올릴 시 리스트가 확장되어 보여짐.
좌우 방향키를 이용하여 리스트 이동 가능.

7. 7
Screen 3. 하위 메뉴항목 화면 - ②
메인 화면에서 상단 메뉴 클릭 시 페이지가 전환됨.
세로로 리스트가 확장되어 보여짐.

8. 8
Screen 4. 동영상 썸네일 리스트
썸네일 이미지를 리스트 형태로 배치하여 영상과 관련된 정보를 나타냄.

9. 9
Screen 5. About
앱을 개발한 회사 정보만이 아닌 참여인력에 대한 간략한 소개를 덧붙임.

10. 10
I. TV App UI 구조 및 분석
VOD
TED (Technology, Entertainment, Design)
제작사 (해외) TED
앱 소개
18분 동안 기술(Technology), 오락(Entertainment), 디자인(Desing)에 관한
주제를 전달하는 프로그램입니다.

11. 11
Screen 1. 가로 리스트 형식의 메인 화면
최근 VOD 콘텐츠 순으로 정렬되며 좌우 리스트 이동이 가능함.
썸네일 이미지를 리스트 형태로 배치하여 영상과 관련된 정보를 나타냄.
메뉴항목이 상단에 정렬되어 있음.

12. 12
Screen 2. 상세 페이지 화면
영상 이미지와 요약된 내용, 영상play, 즐겨찾기 추가 버튼 제공.
하단에 관련영상을 보여줌.

13. 13
Screen 3. 세로 리스트 형식
썸네일 이미지를 리스트 형태로 배치하여 영상과 관련된 정보를 나타냄.

14. 14
Screen 4. 태그별 영상 검색 화면
알파벳 별로 태그 항목을 확인 할 수 있음.
에어 마우스 동작시에는 알파벳 항목을 선택하기 어려움.

15. 15
I. TV App UI 구조 및 분석
VOD
TOU.TV
제작사 (해외) Radio-Canada
앱 소개
TOU.TV is a French Canadian video-on-demand website launched on January
26, 2010 by the Société Radio-Canada.

16. 16
Screen 1. 가로 리스트 형식의 메인 화면
최근 VOD 콘텐츠 순으로 나타나고 가운데 항목에 포커스가 가며 확대되는 방식.
메뉴항목이 좌측에 세로로 정렬되어 있음.
하단 네비바에 마우스or리모콘 동작이 잘 명시되어 있음.

17. 17
Screen 2. 메뉴 영역
좌측 메뉴 클릭 시 하위 메뉴 영역이 확장됨.

18. 18
Screen 3. IME
앱 고유 디자인이 반영된 IME를 갖고 있음. (대부분의 경우 tv플랫폼에 내장된 IME 사용.)

19. 19
Screen 4. 상세 페이지 화면
영상 관련 기사, 동영상 및 서머리된 영상 내용 제공.
별도의 알림 창을 띄우지 않고 상단 로고 영역에 알림 메시지를 띄움.
(사용자가 인지하지 못 할 가능성이 있음.)

20. 20
Screen 5. 가로+세로 리스트 형식
카테고리 별로 한 라인씩 영역이 구분되고 가운데 항목에 포커스가 가며 확대되는 방식.
리스트 영역이 상하좌우로 움직이므로 다소 어지러울 수 있음.

21. 21
I. TV App UI 구조 및 분석
VOD
네이버 뮤직 (Naver Music)
제작사 (국내) NHN
앱 소개
번거롭게 TV에 mp3플레이어를 케이블로 연결하지 않아도 네이버 뮤직의 TOP100,
최신음악, 인기 뮤직비디오를 모두 즐길 수 있으며 PC나 스마트폰에서 만들어 놓은
내 리스트와 관심음악까지 모두 손쉽게 사용 가능합니다.

22. 22
Screen 1. 플레이어 화면
음악이 재생되는 동안 싱크가사 제공.
리모콘으로 상하이동시 이전, 다음 항목 재생 가능.

23. 23
Screen 1. 튜토리얼 화면
모바일 앱은 처음 앱 실행 시 튜토리얼을 띄우지만
tv앱의 경우 하위 메뉴항목에 포함되어 있음.

24. 24
I. TV App UI 구조 및 분석
 특이사항
Fashion tv AIJazeera
Case 1. 배경에 VOD가 재생되고 하단에 VOD 리스트가 있는 경우

25. 25
Ⅲ. TV APP UI 레퍼런스 소개 및 분석
 특이사항
Case 2. 메인 화면은 앱 특징에 맞게 제공될 기능 및 정보 배치

26. 26
Ⅱ. Smart TV App UX 향상을 위한 UI 구조
1. 리모콘으로 선택한 항목에는 눈에 띄는 포커스 영역 표시가 필요하다.
2. 네비게이션 바에는 각 화면에 맞는 리모콘 동작 설명이 잘 명시되어 있어야 한다.
3. 작거나 애매한 버튼 크기는 평균 버튼 사이즈 규격을 참조하여 제작한다.
4. 눈에 대한 피로를 줄이기 위해 배경색을 주로 어두운 계열을 사용한다.
5. 리스트에 썸네일 이미지를 보여주는 경우 한눈에 정보를 확인하기 용이하다.
6. 중요한 콘텐츠는 가운데 크고 눈에 띄게 배치하여 가독성을 높인다.

27. 27
Ⅲ. TV App UI 레퍼런스 사이트
웹 사이트 Samsung Apps TV
사이트 명 Samsung Apps TV
사이트 URL http://tvapps.samsung.com/kr/main.do
사이트 소개
현재 삼성 스마트TV 앱 스토어에 있는 앱에 대한 상세정보를 얻을 수 있고
대부분 무료 앱이므로 앱을 설치하여 직접 사용해 볼 수 있습니다..

28. 28
본사/기업부설연구소 : 서울시 강남구 삼성동 113-3 5F 스마트컨버전스연구소 : 경기도 용인시 수지구 죽전로 152 단국대학교 자연과학관 514호
Tel. 070-8680-1770 Fax. 02-2179-9114 http://www.dgmit.com