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

Contents

I. TV App UI 구조 및 분석 … 3

II. Smart TV App UX 향상을 위한 UI 구조 …

26

III. TV App 레퍼런스 사이트 … 27

3

I. TV App UI 구조 및 분석

Music App Naver Music

Sebasi

TED

TOU.TV

VOD App

4

I. TV App UI 구조 및 분석

VOD

세상을 바꾸는 시간 15 분 ( 세바시 )

제작사 ( 국내 ) 핸드스튜디오

앱 소개세바시는 다양한 영역의 전문가들이트렌드 , 교육 , 경제 , 청년 , 평화 등의 주제로 15 분 동안 강연하는 프로그램입니다 .

5

Screen 1. 가로 리스트 형식의 메인 화면 최근 VOD 콘텐츠가 순으로 나타나고 가운데 항목에 포커스가 가며 확대되는 방식 .

메뉴항목이 상단에 정렬되어 있고 하위 메뉴항목이 있는 경우 아이콘으로 표시 . 하단의 배너 클릭 시 배너광고가 확장되어 나타남 .

6

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

좌우 방향키를 이용하여 리스트 이동 가능 .

7

Screen 3. 하위 메뉴항목 화면 - ② 메인 화면에서 상단 메뉴 클릭 시 페이지가 전환됨 .

세로로 리스트가 확장되어 보여짐 .

8

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

9

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

10

I. TV App UI 구조 및 분석

VOD

TED (Technology, Entertainment, Design)

제작사 ( 해외 ) TED

앱 소개 18 분 동안 기술 (Technology), 오락 (Entertainment), 디자인 (Desing) 에 관한주제를 전달하는 프로그램입니다 .

11

Screen 1. 가로 리스트 형식의 메인 화면 최근 VOD 콘텐츠 순으로 정렬되며 좌우 리스트 이동이 가능함 .

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

메뉴항목이 상단에 정렬되어 있음 .

12

Screen 2. 상세 페이지 화면 영상 이미지와 요약된 내용 , 영상 play, 즐겨찾기 추가 버튼 제공 .

하단에 관련영상을 보여줌 .

13

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

14

Screen 4. 태그별 영상 검색 화면 알파벳 별로 태그 항목을 확인 할 수 있음 .

에어 마우스 동작시에는 알파벳 항목을 선택하기 어려움 .

15

I. TV App UI 구조 및 분석

VOD

TOU.TV

제작사 ( 해외 ) Radio-Canada

앱 소개 TOU.TV is a French Canadian video-on-demand website launched on Janu-ary 26, 2010 by the Société Radio-Canada.

16

Screen 1. 가로 리스트 형식의 메인 화면 최근 VOD 콘텐츠 순으로 나타나고 가운데 항목에 포커스가 가며 확대되는 방식 .

메뉴항목이 좌측에 세로로 정렬되어 있음 . 하단 네비바에 마우스 or 리모콘 동작이 잘 명시되어 있음 .

17

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

18

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

19

Screen 4. 상세 페이지 화면 영상 관련 기사 , 동영상 및 서머리된 영상 내용 제공 .

별도의 알림 창을 띄우지 않고 상단 로고 영역에 알림 메시지를 띄움 .

( 사용자가 인지하지 못 할 가능성이 있음 .)

20

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

21

I. TV App UI 구조 및 분석

VOD

네이버 뮤직 (Naver Music)

제작사 ( 국내 ) NHN

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

22

Screen 1. 플레이어 화면 음악이 재생되는 동안 싱크가사 제공 .

리모콘으로 상하이동시 이전 , 다음 항목 재생 가능 .

23

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

24

특이사항

Case 1. 배경에 VOD 가 재생되고 하단에 VOD 리스트가 있는 경우

Fashion tv AIJazeera

I. TV App UI 구조 및 분석

25

Ⅲ. TV APP UI 레퍼런스 소개 및 분석

특이사항

Case 2. 메인 화면은 앱 특징에 맞게 제공될 기능 및 정보 배치

26

Ⅱ. Smart TV App UX 향상을 위한 UI 구조

1. 리모콘으로 선택한 항목에는 눈에 띄는 포커스 영역 표시가 필요하다 .

2. 네비게이션 바에는 각 화면에 맞는 리모콘 동작 설명이 잘 명시되어 있어야 한다 .

3. 작거나 애매한 버튼 크기는 평균 버튼 사이즈 규격을 참조하여 제작한다 .

4. 눈에 대한 피로를 줄이기 위해 배경색을 주로 어두운 계열을 사용한다 .

5. 리스트에 썸네일 이미지를 보여주는 경우 한눈에 정보를 확인하기 용이하다 .

6. 중요한 콘텐츠는 가운데 크고 눈에 띄게 배치하여 가독성을 높인다 .

27

Ⅲ. TV App UI 레퍼런스 사이트

사이트 명 Samsung Apps TV

사이트 URL http://tvapps.samsung.com/kr/main.do

사이트 소개 현재 삼성 스마트 TV 앱 스토어에 있는 앱에 대한 상세정보를 얻을 수 있고대부분 무료 앱이므로 앱을 설치하여 직접 사용해 볼 수 있습니다 ..

Samsung Apps TV웹 사이트

28

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