LG Smart TV SDK 활용법
Contents 1. Using LG Smart TV SDK 2. Testing & Publishing 3. UX Guideline
Using LG Smart TV SDK
LG Smart TV SDK 구성 Open API IDE* App 구현을 위한 LG Smart TV 인터페이스 제공 Media playback, TV 제어, App 관련 개발도구 빌드환경 LG Smart TV App 개발을 위한 환경 제공 프로젝트 생성 Docs SDK 개발방법 및 Open API Reference 가이드 개념 설계 테스트 디버깅 Emulator LG Smart TV와 같은 환경에서 App 구동 LG Smart TV없이 App 제공 시뮬레이션 Real TV 디버깅 지원 SDK* 다운로드: LG Developer (http://developer.lge.com) * SDK : Software Development Kit * IDE : Integrated Development Environment
SDK 설치 환경 HW Category Processor RAM Operating system Screen resolution Video memory Pentium 4 2.0 GHz or higher 1 GB or higher 상세 사항 - Windows XP Service Pack 2 or higher Windows 7 (32-bit/64-bit) - Mac OS X : snow leopard or higher (32-bit / 64-bit) - Ubuntu 10.04, 12.04 (32-bit / 64-bit) 1280 x 1024 or higher 256 MB or higher SW Category 상세 사항 Oracle VirtualBox (for 2012, 2013 Emulator) LG SDK Safari (for IDE) Microsoft DirectX (for 2011 Emulator)
VirtualBox for LG Emulator VirtualBox 다운로드 (http://www.oracle.com/technetwork/server-storage/virtualbox/downloads/index.html) LG Smart TV SDK(2.4 이하) 를 설치하기 전, 먼저 반드시 VirtualBox가 설치되 어 있어야 함
LG Developer Site http://developer.lge.com LG Smart TV SDK 다운로드
SDK 설치 과정 1 LG Developer (http://developer.lge.com) 회원 가입 후 로그인 > Resource Center > Smart TV > SDK & Tools > SDK 메뉴 클릭 2 파일 다운로드 클릭 > 약관 동의 체크 후 Download 버튼 3 PC에 파일 다운로드 진행 4 압축 파일 해제 후 SDK 설치 시작 Linux와 Mac 의 경우 Installation Guide 참고 Installation Guide Resource Center > Library > Developing > Using SDK > Installation Guide 참조
IDE & Emulator Linux와 Mac 의 경우 Working Directory는 다름 Emulator User Guide Resource Center > Library > Testing > Testing App on Emulator 참조
IDE 실행 및 구조
프로젝트 생성 및 동작 Eclipse 메뉴 - [File > LG Web Project] Step 1. LG 웹 프로젝트 생성 Step 2. Application 개발 Web Content 폴더에서 Web Application 개발 Step 4. Emulator에서 동작 테스트 Step 3. Run LG 프로젝트
Testing & Publishing
샘플 App Web App 샘플 Web App Samples (10) Music Photo Video Virtual Keyboard Library Advertisement Sample Broadcast Sample Tic Tac Toe Sample HTML5VideoPlayer Sample ImageViewer Sample MediaPluginVideoPlayer Sample API Samples (17) Voice Recognition API App Window Media Player API App #1 Key Repeat App Key Up/Down App Window Media Player API App #2 Window Media Player API App #3 Subtitle API App NetCastReturn/Back/Exit API App NetCastPageLoadingIcon API App NetCastOutOfMemory Event App ASX Play App CE-HTML App Multi Audio App Full Screen App 3D Video App 샘플 및 튜토리얼 문서 Resource Center > Smart TV > SDK & Tools > Tools & Samples
디버깅 - Emulator 디버그 실행 * 웹 인스펙터 더 알아보기 : https://developers.google.com/chrome-developer-tools/docs/overview
디버깅 Real TV 디버그 실행
Digital Signing Tool 1. Issuing Certificate - LG Developer의 ID와 Password 사용하여 Certificate 발행 - Certificate Password는 7-12자의 알파벳 또는 숫자 2. Selecting Certificate and application - Certificate 선택 - Application Root 디렉터리 선택 - Uncheck Developer Test with USB 3. Signing Application - LDS 포맷의 Signing 된 파일의 저장위치 지정 Digital Signing Tool 가이드 Resource Center > Library > Publishing > Packaging App > using LG Digital Signing Tool 참 조 * Tool 경로 : 시작메뉴 > LG Smart TV SDK > LG SDK Tools > LG Digital Signing Tool (Windows 기준)
Hello Smart TV 프로젝트 새로운 LG Web Project 생성 or 16
Hello Smart TV 프로젝트 Web 프로젝트 설정 Project Name Add a new Project SDK Version 17
Hello World 프로젝트 App 제작 및 구동 Make your Code Run LG Project 18
Hello World 프로젝트 실행 Select running target 19
Hello World 프로젝트 Emulator 결과 확인 20
App 테스트 환경 Emulator Emulator (NetCast 2.0, NetCast 3.0, NetCast 4.0) Emulator 사용에 관한 설명은 Resource Center > Library > Testing > Testing App on Emulator 참조
App 테스트 환경 - USB USB App 테스트 과정 Step 1. IDE에서 Export App Test 실행하여 ZIP파일 생성 Step 2. [App Test] 에 해당 파일 및 대표아이콘 Upload Step 3. [App Test] 페이지에서 DRM 작업화된 파일을 다운받아, USB로 이동 Step 4. LG Smart TV 로그인 Step 5. LG Smart TV에 USB 연결하여, My App에서 실행 App Test에 관한 자세한 설명은 Resource Center > Library > Testing > Deploying and Testing App on Real TV 참조
App 테스트 환경 - USB 이용 LG Smart TV 의 SDK 버전 확인 - LG Smart TV의 SDK 버전이 1.5 버전 이상이어야 함 - SDK 버전이 1.5 미만일 경우 소프트웨어 업데이트 필요
App 테스트 환경 - USB 이용 LG Developer의 App Test 페이지에서 App 업로드 - LG Developer (http://developer.lge.com)에 로그인 후 [Resource Center] > [Smart TV] > [Test] > [App Test] 메뉴 클릭
App 테스트 환경 - USB 이용 상세 정보 입력 6 1 2 3 4 5 7 1 제목 입력 2 App 타입 선택 3- Hosted app: Web 어플리케이션 서 버 주소 입력 예: http://www.abc.com/ http://www.abc.com/index.html -Packaged app: 최초실행 HTML 파일의 상대 경로 입력 예: index.html./abc/index.html abc/index.html 4 업로드 파일 선택 - Hosted app: 공란 - Packaged app: 어플리케이션 압축 파 일 5 App 아이콘 이미지 선택 6,7 CP일 경우에만 선택 (Option 입력) 8 저장하기 8
App 테스트 환경 - USB 이용 1 1 아이콘 이미지 조회 2 약관 조회 3 DRM이 적용된 어플리케이션 파일 다운로드 4 업로드 정보 수정 5 업로드 App 삭제 6 목록으로 2 4 3 5 6
App 테스트 환경 - USB 이용 Step 1. USB에 DRM 패키징된 어플리케이션 파일을 다운로드 USB에 다운로드된 파일을 압축 해제하면, 이름이 숫자로된 폴더가 있고 이 폴더를 아래 그림과 같이 USB의 lgapps\installed 폴더 아래에 복사
App 테스트 환경 - USB 이용 Step 2. Smart TV에 USB 삽입 LG Apps TV의 ID와 Password로 LG Smart TV 로그인 USB 포트에 USB 삽입 Step 3. My Apps 페이지에서 App 확인 1. 마이앱 페이지로 이동 2. USB 아이콘 클릭 3. 자신의 App 확인 * 12년 이전에 출시된 모델 중에서 USB 포트가 하나인 모델은 사용 불가 1 2 3
App 테스트 환경 - USB 이용 (13년 TV)
UX Guideline
UX Guideline TV UX에 관하여 어디서? - 거실 누구와? - 가족과 함께 무엇을? - TV 프로그램, 영화, 게임 등 어떻게? - 편한 자세로 Recommended Distance: 3.5M
UX 체크 리스트 - 필수사항 LG Smart TV 앱 개발을 위한 체크 리스트 Screen Layout - 1280 x 720 해상도 (화면에 스크롤 바가 생기지 않도록) - 클릭 가능한 오브젝트, 텍스트, 로고의 배치 Navigation - 매직리모컨 (4방향, OK, Back 버튼) 과 리모컨 센서 32 pixel 32 pixel 32 pixel Over-Scan Pixel Guide 22 pixel On Screen Button - 텍스트 입력 시 Screen Keyboard 이용 Font - Recommend: LG Display Font, Tiresias Font (이미지 제외) - TV 시청 거리에서도 읽을 수 있는 Font 크기 (최소: 18 pt) Visual Treatment - 화면을 Black으로 만들지 말 것 - 클릭 가능한 아이템은 최소 54 x 54 pixel로 UI Checklist 문서 참조 LG Smart TV and Media Product UI Guideline 참조
예시 #1 Over Scan 영역 및 포커스를 고려하지 않은 예
예시 #2 글자 크기를 최적화하지 못한 예
예시 #3 이중 포커스의 예
예시 #4 초기 포커스 부재의 예