====== LG 스마트 TV 앱 개발 ====== July 01, 2015 | 스마트미디어 테크니컬 스쿨 http://www.smicenter.or.kr/ 최경원 선임 연구원 LG 전자 LG전자 Software Platform 연구소 kw.choi at . . . . lge dot com APPU - Web app framework 제공 http://developer.lge.com/webOSTV/develop/web-app/code-samples-html/ ===== Web OS ===== Palm - HP (touch pad tablet) - 2013 LG 인수 (smart watch, 사이니지, Web OS TV, 등) * 3 (kinds) simple concepts - Simple connection - Simple Switching * Youtube - facebook - Back to Youtube (not continuous threads) - Simple discovery ===== Platform Structure ===== Figure . . . . * Enyo Framework support * Luna Bus (Service) ===== SDK ===== SDK - API Eclipse 기반 IDE Plugins (Subline text?) Command Line Interface (CLI) - App launching, sending ===== Web OS UI ===== Figures * Recent (past) * Home (present) * Launcher (future) . . . Magic Remote Controller . . . ===== Features ===== ? Virtual Keyboard \\ * Text input UI 가 존재할 시에 자동으로 올라 오도록 . . . * 2가지 UI (number only | whole keyboard) ? Magic remote control \\ * . . . 숫자 keypad (권장하지 않음) ? 화면해상도 * 1920 x 1080 pixel * safe zone (area) 사방 20 pixel * 아이콘 배치 * 이미지 등이 배치되지 않도록 * 가독성 * Lean back media * 10 feet experience * 추천기능 * 시스템의 추천기능 * 시스템 라이브러리 * Moonstone library * Spotlight library 활용 권장 * 폰트 * WOFF | TTF 지원 * 타 폰트 적용가능 (라이선스 허용된 경우) * 앱을 이용하여 폰트 다운로드하도록 할 수 있으나 권장하지 않음 * 권장폰트 * MuseoSans * MISO * 비라틴 계열 언어의 경우, LG Display 폰트 권장 * APP Tile 사용시 . . . * 아이콘 * 130x130 px + 10 px padding * 80x80 px + 5 px padding ===== Web OS 2.0 ===== * Performance * Home screen UI * WebKit 538.2 * API * Luna Service API * Standard Web API * Enyo 2.5 support ===== Web OS Echo System ===== * APP Purchase (LG Store) * LG Smart World (Seller Lounge) * LG Developer * 10 위권 앱 * 콘텐츠 관련 * 유럽관련 * 한국 - 교육 + 게임 쪽 앱 * Developer site * Discover * Design * Devleop * app development guide * code sample * app test * API * API guide * SDK * SDK . . . * Seller Lounge * IPK package 로 올린다고 . . . ====== SDK app development ====== - planning - . . . refer to print-outs - development - test - distribution - LG QA Verification process . . . can take several months . . . * App type * Web App * JavaScript Service * 2nd Screen App * Connect SDK *** * Open Source Framework * . . Phone to TV | TV to phone . . * SDK (software development kit) * http://developer.lge.com/webOSTV/sdk/web-sdk/ * 구성 . . . * 활용 * Plan: 문서 * Sample app * SDK tool 가이드 및 * Open API * Tool: CLI & IDE (eclipse 변종) * Control: Open API * Test: Emulator ===== WebOS TV API ===== Web App Standard API \\ Cordova Stnandard API * http://developer.lge.com/webOSTV/api/supported-standard-web-apis/ * http://developer.lge.com/webOSTV/api/cordova-api/ LG TV 에 특화된 API . . . Luna Service API * http://developer.lge.com/webOSTV/api/webos-service-api/ ===== Enyo ===== http://enyojs.com/ http://developer.lge.com/webOSTV/develop/web-app/how http://developer.lge.com/webOSTV/develop/web-app/enyo-developer-guide/ javascript 기반 vs. markup 기반 enyo, sencha touch(유료) 등 vs. markup 이해가 필요 http://enyojs.com/sampler/latest/ ===== App Dev ===== ? App categories * 방송시청 * VOD * 육아용 (아동용) * 게임 * 정보성 ? 능력 * Java * C * ... * Web * Specification * API / Standard API ? ... * Enyo, HTML5, Jquery?, . . . . (platform) -- SDK * IDE, CLI, Emulator * Hosted vs. Packaged DRM 관련 컨텐츠 ... \\ http://developer.lge.com/webOSTV/develop/web-app/app-developer-guide/playing-drm-content/ http://developer.lge.com/webOSTV/develop/web-app/app-developer-guide/billing/ Luna service http://developer.lge.com/webOSTV/api