모바일 AD 동향 소개 오창현 (SK C&C) 2013.01.31 *) AD : Application Development
목차 Contents 모바일 표준프레임워크 구성 HTML5 HTML 개요 HTML5 변경사항 HTML5 주요특징 CSS3 CSS 개요 CSS 특징 Web App Frameworks Hybrid App Frameworks Page l 2
HTML5 HTML란? HTML(Hyper Text Markup Language)의 최신 버전. (현재 가장 널리 사용되고 있는 버전 - HTML 4.01 ) 라고는 하지만 HTML5라고 불리는 기술은 실제로 HTML과 직접적인 관계가 없는 Javascript API를 포함하는 것이 일반적임 오픈된 표준을 기반으로 한 Web의 플렛폼화 - 멀티미디어 기능 및 어플리케이션 기능 강화 HTML5이 해결하는 웹의 문제점 웹브라우저간 호환성이 낮다 문서내에 포함된 의미 가 불명확하다. 웹어플리케이션 기능이 제한된다. Why HTML5? 웹기술의 진보, 시장의 요구 모바일 시장의 확대 클로스 플랫폼 지원, 웹표준 기술의 강점 Page l 3
HTML의 역사 HTML5 역사 1993.03 HTML 1.0 팀 버너스리(CERN)가 개발 및 표준화 제안 1995.11 HTML 2.0 1996.04 HTML 3.0 1997.01 HTML 3.2 1997.12 HTML 4.0 1999.12 HTML 4.01 2000.01 XHTML 1.0 HTML + XML 2001.05 XHTML 1.1 2006.07 XHTML 2.0 2004. WHATWG 발족 (Web Hypertext Application Technology Working Group) 2007. W3C에서 HTML5 채택 2009. HTML5 Last Call 2011.05 HTML5 Last Call Finish 2014. HTML5 Recommandation (예정) Page l 4
어디까지 HTML5일까? 여기까지 모두 HTML5로 불리우는 경우도 HTML5 로 불리우는 범위 HTML5 JavaScript API CSS3 DOM Web Storage CSS3 selector SVG HTML 문법 Web Workers Transition MathML windows object Web Socket Animation WebGL Indexed DB Transform Page l 5
HTML의 주요 특징 1. 임베디드 오디오/비디오 지원 HTML5 이전에는 임베디드 오디오/비디오 콘텐츠를 지원하기 위해 Flash를 사용하였으나, Flash를 지원하지 않는 ios 및 안드로이드 등 모바일 디바이스의 시장 확대로 대체 기술이 필요하게 됨. 임베디드 오디오/비디오 기능을 지원하는 HTML5가 Flash를 대체하는 crossplatform을 지원하는 시장의 표준(de facto)으로 성장하고 있음 <video height="205" width="300"> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <source src="video.webm" type="video/webm"> Video 태그가 지원되지 않는 브라우저 입니다. </video> Page l 6
HTML의 주요 특징 2. 미디어 쿼리(Media queries) 스크린 사이즈(뷰포인트), 방향 또는 해상도를 기반으로 페이지에 특정 Style Sheet를 적용 하기 위해 사용하는 명세임. 스크린 사이즈 또는 해상도 등에 따라 CSS 코드를 분기하여 최 적화된 UX(User Experience)를 제공함 // 뷰포트 너비가 768px 이상 그리고 1024px 이 하이면 실행 @media all and (min-width:768px) and (maxwidth:1024px) { } // 뷰포트 너비가 768px 이거나 또는 1024px 이 면 실행 @media all and (width:768px), (width:1024px) { } // 뷰포트 너비가 768px 이상 그리고 1024px 이 하가 아니면 실행 @media not all and (min-width:768px) and (maxwidth:1024px) { } Page l 7
HTML의 주요 특징 3. CSS3 HTML5를 지원하는 브라우저는 또한 CSS3(Cascading Style Sheets) 표준을 준수 하고 있으며, 아래와 같은 스타일링 효과를 지원함 CSS 3 특징 Border Radius, Border Image, Box Shadow and Text Shadow Animation, Transition, Transform Custom Web Fonts with @Font-Face http://www.westciv.com/tools/3dtransforms/index.html Page l 8
HTML의 주요 특징 4. 위치정보 (embedded geolocation) HTML5에서는 별도의 서버 단 IP 위치정보 서비스를 사용하지 않고도, 브라우저 가 IP 주소, 주위의 무선 공유기 정보 등을 기본으로 위치 정보를 파악하여 제공함 <script> var x=document.getelementbyid("demo"); function getlocation() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(showposition); } else{x.innerhtml="geolocation is not supported by this browser.";} } function showposition(position) { x.innerhtml="latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude; } </script> Page l 9
HTML의 주요 특징 5. 캔버스 (Canvas drawing) HTML5 이전에는 일반적으로 제품 구성 도구(Product Configurator)와 같은 복잡한 온라인 도구를 개발하는데 Flash가 이용되었음. HTML5에서는 Canvas 기능을 통해 그래프, 차트, 2D, 3D 객체 등 어떤 형태의 타입도 그릴 수 있으며, 실시간 이미지 프로 세싱을 지원함 <canvas id="mycanvas" width="200" height="100"></canvas> <script> var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); ctx.fillstyle="#ff0000"; ctx.fillrect(0,0,150,75); </script> <예시> 그래프 예제 캔버스 기능을 이용한 그림판 예시 캔버스 Demo 사이트 Page l 10
HTML의 주요 특징 6. 오프라인 애플리케이션(Data storage and offline access) 고객 ID와 같은 작은 단위의 데이터를 저장하기 위해 쿠키를 사용하였으나, HTML5에서는 오프라인 데이터 저장소 기능을 통해 사용자 브라우저상의 구조화된 큰 볼륨의 데이터를 저장하고 관리할 수 있음. 이를 통해 애플리케이션의 성능 및 오프라인 액세스 권한 부여 기능을 향상시킴 HTML5 이전 쿠키 플래시 스토리지 IE UserData 구글 Gears HTML5 Web Storage Web SQL Database IndexedDB Application Cashe File*APIs 예 : 파이낸셜 타임즈에서는 HTML5의 데이터 스토리지 기능을 이용하여 독자가 아이패드 에서 페이퍼 에디션의 뉴스를 다운받고 오프라인 상태에서도 구독할 수 있는 서비스를 제 공하고 있음 Page l 11
HTML의 주요 특징 7. 파일 및 장치 제어 (File and hardware access) 사용자 파일 시스템이나 지정된 영역에 대한 직접적인 접근, 그리고 별도의 플러그인 또는 드라이버 설치 없이 마이크로폰이나 웹캠을 제어할 수 있음. 이를 통해 가상 Fitting Room 이나 음성인식 검색 또는 폼 필드 입력 등과 같은 고급 기능을 보다 쉽게 구현할 수 있음 예 : 구글 번역기는 HTML5를 사용하여 사용자가 최신 크롬 브라우저에서 번역할 문장을 음성 인식으로 입력 받는 기능을 지원함 Page l 12
HTML 사용 현황 HTML5 주요 스팩 지원 브라우저 ios3+, Android2+, RIM OS6+, palm webos 1.4+, WM7 20113Q, IE9+,FF3+,Chrome6+,Safari4+,Opera10+ 현재 보편적으로 사용되는 브라우저 중 75%이상에서 HTML5를 지원하고 있음 HTML5 적용시기 Mobile, TV 등 : Now!! PC (B2C) : 5년? Why? IE6/7/8/9 Page l 13
모바일 애플리케이션 기술 동향 Page l 14
Mobile Apps 개발 방식(1/2) 모바일 애플리케이션 개발 방식에는 4가지 타입이 있음 1 모바일 웹 브라우저에서 동작하는 HTML과 자바 스크립트 기반의 개발 방식 대부분의 최신 버전 브라우저에서 HTML5의 기능을 지원하고 있으나 모든 브라우 저가 HTML5의 <video>, <audio>같은 태그를 지원하는 것은 아님 모든 브라우저에서의 서비스를 위해서는 HTML, CSS, jquery Mobile이나 Sencha Touch같은 자바스크립트 라이브러리들을 이용하여 구현함 통신 네트워크(3G, 4G)의 속도 향상이 웹 기반의 모바일 서비스의 대중화에 일조함 2 Native App 각각의 디바이스 플랫폼에 특화된 모바일 애플리케이션 개발 방식 디바이스 플랫폼이 제공하는 Application programming interfaces(api)를 이용하여 최적화된 모바일 애플리케이션을 구현할 수 있음 그러나 각각의 플랫폼은 자체 개발언어, 프레임워크을 사용하고 있어, 각각의 플랫 폼에 맞춰 코드를 구현하여 함 코드 재사용이 쉽지 않음 Page l 15
Mobile Apps 개발 방식(2/2) 모바일 애플리케이션 개발 방식에는 4가지 타입이 있음 3 Hybrid App Native와 Web technology를 조합한 Hybrid 개발 방식 웹 컨텐츠를 간단하게 로드 하거나 native wrapper 또는 shell을 사용 카메라나 가속도계 등의 디바이스 기능을 이용한 애플리케이션을 구현할 수 있음 브라우저의 테두리를 안보이게 조정하여 애플리케이션 페이지를 보여 줌으로써 Native User Interface(UI)와 같은 스타일의 화면을 보여줌 일반적으로 오픈소스 PhoneGap 프레임워크를 활용하여 구현함 4 Mobile Middleware platform 추상화된 Native 플랫폼 미들웨어 플랫폼은 다양한 기술들을 이용하여 모바일 플랫폼의 특정한 구현 세부사 항들을 추상화하여 제공함 공통 개발 모델과 도구를 제공함으로써 한 번 개발한 애플리케이션을 멀티 플랫폼 환경에서 실행시킬 수 있음 미들웨어 플랫폼은 Hybrid app 방식과는 확연한 차이가 있음. Compressed communication, Device encryption, 데이터 동기화 같은 공통 업무를 수행하기 위해 Client/Server 기반 컴포넌트를 제공함(예 : Oracle PeopleSoft, SAP, Siebel) Page l 16
Mobile Apps 개발 접근법 모바일 애플리케이션 개발 방식의 선택은 예산, Agility, 성능, UX와 같은 다양한 요인들을 고려하여야 함 Source: Forrester Research, Inc. Page l 17
Native Application Native 방식은 애플리케이션 성능과 User Experience(UX)을 극대화함 Native 코드가 여전히 자바스크립트보다 빠름 - 애니메이션이나 그래픽 랜더링의 경우 ios나 안드로이드의 Native code가 On-device graphics processing unit(gpu)를 사용한 가속의 장점을 가지고 있음 플랫폼 파일 시스템에 보다 더 깊은 접근을 통한 오프라인 프로세싱과 스토리지 기능 이용의 강점이 있음 애플리케이션 스토어를 통한 B2C 시장의 존재 Native app 개발 방식이 성능과 UX 측면에서 탁월한 장점을 가지고 있어 모바일 웹 방식보다 사용자 만족도가 월등히 높음 Page l 18
Web Application 웹 애플리케이션 방식은 비용 절감 및 Agility 측면의 장점이 있음 다수의 플랫폼에 모바일 애플리케이션을 포팅(porting)시 두드러진 비용절감 효과가 있음 - Native app에 비해 포팅 비용이 50% ~70% 선임 애플리케이션 변경 및 콘텐츠 관리의 용이성 지적 재산권 위험의 감소 - 예 : In-app purchase(iap) 사용 특허 침해 소송 (오라클 -> 구글 상대로 소송) 사용하는 개인 개발자도 특허 침해 소송에 휘말릴 수 있음 쉬운 개발 언어 - 오브젝트 C과 같은 플랫폼 특화된 개발 언어의 Learning Curve 없 이 Web technology로 개발 가능 Page l 19
Hybrid Application Native와 Web 개발 방식의 차이를 줄이는 Hybrid App Hybrid app 개발 방식은 Native와 웹 애플리케이션 개발 방식의 조합 으로 양쪽의 장점과 단점을 동시에 상속받음 가장 큰 단점 중의 하나는 적어도 한번은 앱 스토어의 승인 프로세스를 받아야 한다는 것임 Page l 20
Middleware Platform 모바일 미들웨어 플랫폼은 공통 서비스들을 중심으로 Cross-Platform 고 객들을 유치하고 있음 Hybrid app 방식과 유사한 기능들을 제공하며 Native와 웹 방식 사이 에서 성능과 비용의 간격을 줄이고 있음 미들웨어 솔루션은 인력 공수를 줄일 수 있으나, 비용(Capital) 증가가 뒤따름 - 다수의 플랫폼에 배포하기 위한 코드 재개발 노동 비용의 절감 효과가 있 으나, 라이선스 구매 방식 등에 따라 추가적인 예산 증가가 따름 서버 사이드 프레임워크 활용을 통한 secure connectivity, 오프라인 사용 및 데 이터 동기화, 암호화 등의 기능을 모바일 애플리케이션에 쉽게 적용할 수 있음 시장에서는 미들웨어 솔루션이 다른 개발 방식들 보다 뒤처져 있으나, 기업들 의 거버넌스, 보안, 데이터 보호와 같은 Mission critical한 애플리케이션들에 대 한 모바일 서비스 제공이 늘어남에 따라 미들웨어 솔루션들의 사용도 증가 될 것으로 예상됨 빌트인 암호화, 자동화된 오프라인 동기화 또는 레거시 모바일 플랫폼 지원 등 에 있어, 미들웨어 솔루션이 가장 최적화된 개발 방식이 될 수 있음 Page l 21
Mobile AD 기술 동향 2015까지 HTML과 자바스크립트를 중심으로 하는 Web Technology가 모 바일 애플리케이션 개발에 있어 시장 지배적인 플랫폼이 될 것임 [가트너] 모바일 애플리케이션 개발에 있어 HTML5, 자바스크립트, CSS와 같은 Web Technology가 가장 보편적으로 사용되는 개발 언어가 될 것임 주요 사항 Hybrid App이 엔터프라이즈 모바일 애플리케이션 시장의 주류가 될 것임 적어도 임시적으로나마, 하이브리드 접근 방식의 등장이 많은 모바일 웹 솔루션들을 대체할 것임 소비자용과 기업용 애플리케이션 개발 방식에 있어 확연한 차이점이 생겨날 것임 Page l 22
Mobile AD 기술 동향 시장예측 PhoneCap과 같은 하이브리드 모바일 애플리케이션 개발 환경의 등장이 모바일 개발에 있어 Native와 웹의 장점들을 제공할 수 있는 솔루션을 제공함으로써, 개발 옵션사항들을 급격히 변화시켰음 개인용(B2C)과 기업용(B2E)의 개발 시나리오 요구사항 차이로 아래 와 같은 Native, Web 그리고 Hybrid 개발 접근 방식의 시장 점유율 을 보일 것으로 예측됨 개인용과 기업용 시나리오에 있어, HTML과 Web Technology가 개발 언어의 주류를 이룰 것으로 예측되며, 기업용 모바일 애플리케 이션 개발에 있어 보다 많이 사용될 것으로 보임 하이브리드 방식이 당분간은 많은 분야에서 모바일 웹 방식을 대체 할 것으로 보이며, HTML5의 기능들이 고도화 및 전파되면서 Crossplatform 브라우저 환경으로 이동할 것으로 예측되나, 2015년까지 는 아님 분류 Native Hybird Web 개인용(Consumer) 40 40 20 기업용(Enterprise) 10 60 30 가트너, (2012.11) Page l 23
가트너 Magic Quadrant (모바일 AD 플랫폼) <그림> Magic Quadrant for Mobile Application Development Platforms Page l 24
전자정부 표준프레임워크 모바일 웹 소개 Page l 25
표준프레임워크 구성 표준프레임워크는 실행, 개발, 관리, 운영 등 4개의 환경과 공통컴포넌트로 구성됨 모바일 표준프레임워크는 개발환경 실행환경, 공통컴포넌트로 구성됨 표준프레임워크 개발환경 구현도구 모 바 일 배포도구 테스트도구 형상관리도구 실행환경 화면처리 모바일 화면처리 업무처리 데이터처리 연계통합 공통기반 관리환경 서비스요청관리 변경관리 현황관리 표준관리 운영환경 모니터링 도구 운영관리 도구 공통컴포넌트 공통기술컴포넌트 기존 공통컴포넌트 모바일 전환 요소기술컴포넌트(유틸리티) 모바일전용 공통컴포넌트 Page l 26
모바일 실행환경 구성 표준프레임워크 실행환경은 6개 서비스 그룹/38개의 서비스로 구성되며, 모바일 실행환경은 UX 레이어로 구성되며, HTML5, CSS3 등 등 총 4개의 서비스를 제공함 실행 환경 화면처리 레이어 UX 레이어 업무처리 레이어 데이터처리 레이어 연계통합 레이어 Ajax Support Internationalization UX/UI Controller Component Biz. Process Management Data TBD Access DataSource Message Service MVC UI Adaptor Security HTML5 CSS3 JavaScript Module App Framework Exception Handling ORM TBD Transaction Naming Service Web Service 공통기반 레이어 AOP Cache Compress/Decompress Encryption/Decryption Excel File Handling File Upload/Download FTP Hot-Deploy ID Generation IoC Container Logging Mail Marshalling/Unmarshalling Object Pooling Property Resource Scheduling String Util XML Manipulation 실행환경 서비스그룹 서비스 Page l 27
모바일 실행환경 개요 사용자 경험(UX) 지원 기능은 스마트 기반 모바일 환경에서 최적화된 화면 처리 기능, 개발도구 및 모바일 특화 컴포넌트 제공을 통해 모바일 웹 서비스개발에 대 한 생선성 향상, 모바일 전자정부 시스템 간의 컴포넌트 재사용성 향상, 연계 표준 을 통한 상호 운용성 향상, 응용 소프트웨어의 표준화 효과를 제공함 Page l 28
모바일 표준프레임워크 배경 전자정부 모바일 서비스의 접근성 제고를 위하여 모바일 웹 방식에 의한 서비스 제공 을 권장하고 있으며, 모바일 웹 방식은 모바일 브라우저를 통하여 서비스가 제공됨 전자정부 서비스 호환성 준수지침 모바일 웹 프레임워크 행정안전부 고시 제 2010-40호 개정이유 모바일 전자정부 서비스 제공 시 접근성 제고등을 위하여 공공기관이 준수해야 할 사항을 규정 모바일 웹 모바일 단말에 내장된 브라우저를 통해 서비스가 제공 HTML4, HTML5, CSS 등 표준기술 활용 주요 개정 내용 국민들이 다양한 모바일 기기를 사용할 수 있도록 '모바일 앱' 방식보다' 모바일 웹'방식을 권고 모바일 웹 방식 개발을 위한 기술 표준 지침 최소 3종 이상의 웹 브라우저에서 동등한 서비스 제공 국제표준화기구에서 제공하는 표준 사용 의무화 모바일 앱 단말에 종속된 구축 필요 단말 및 OS별 중복 개발 필요 (전용SDK활용) 전자정부 모바일 서비스 제공 원칙 다양한 스마트폰 사용자들이 모두 혜택을 받을 수 있도록 모바일 웹 방식의 개발을 권장 Page l 29
표준프레임워크 모바일 웹 개발 방식 표준프레임워크의 모바일 공통 컴포넌트와 정의된 UX 컴포넌트들을 조합하여 모바일 웹 애플리케이션의 기반 구조를 만들고 프로젝트 특화된 기능을 추가하고 커스터마이 징하는 방식으로 개발이 가능함 전자정부 표준프레임워크 포털 협업 컴포넌트 실시간 공지 서비스 모바일 차트/그래프 멀티미디어 제어 모바일 사진 앨범 모바일 기기 식별 OPEN-API 연계 서비스 동기화 서비스 오프라인 웹 서비스 위치 정보 연계.................. 시스템/서비스 연계 컴포넌트 디지털 자산관리 컴포넌트 모바일 공통컴포넌트 모바일 공통컴포넌트는 모바일 기기의 스마트성을 지원할 수 있는 특화 기능인 실시간 공지 서비스, 모바일 사진 앨범, 오프라인 웹 서비스 등의 컴포넌트를 HTML5+CSS3+Javascript Mobile App Framework 기반에서 구현됨 공통기술 Page l 30
Page l 31