모바일환경과 개발방향

30
모바일 환경과 개발방향 서명지 2013/12

Upload: wendyst-communication

Post on 03-Nov-2014

16 views

Category:

Technology


0 download

DESCRIPTION

모바일환경과 개발방향 2013

TRANSCRIPT

모바일 환경과 개발방향

서명지

2013/12

HTML5 & CSS3 HTML5 바로알기 HTML5의 주요내용 HTML5 & UI? HTML5와 CSS3? CSS3와 브라우저 CSS3와 웹 표준 실제 HTML5가 사용되는 간단 사례 HTML5/CSS3를 활용한 Naver모바일 검색 Daum 모바일 <time>태그를 통한 실시간 커뮤니케이션 국내 모바일 환경에서는 CSS3활용 가능 웹의 단계적 향상 모바일웹 크로스브라우징의 끝? Responsive Web UI ? 반응형 웹디자인의 개념 Relayouting UI - CSS3 Media Query Stuffs CSS3 @Media query 모바일 Web App Web ? App ? Hybrid ? 왜? HTML5가 모바일에 중요한가? 이제 앱은 모두 Hybrid Web App이다! 모바일 웹앱 개발 플랫폼 iPhone style UI library UI Library for Touch Devices

목차

HTML5 & CSS3

HTML5 바로알기

“HTML5의 개요와 목적은? 웹앱 개발을 위한 용도이다”

Abstract 개요, 초록

이 버전 에서는 웹앱 개발을 위한 인식 기능과 개발관행을 참고하여 만든 새로운 엘리먼트와 상호 운용성 향상을 위해 브라우저 개발시 준수할 기준을 제시하고 있다.

In this version, new features are introduced to help Web application authors, new elements are introduced based on research into revailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

HTML5의 주요내용

1. New elements Semantic Mark-up Elements

div id=“header”

div id=“sidebar”

div id=“content”

div id=“footer”

div ”class=“post”

div ”class=“post”

<header>

<nav>

<section id=“content”>

<footer>

<article>

<article>

새로운 엘리먼트 추가 많이 사용하는 것들을 통계를 내서 그 이름으로 태그를 만듦 : header, nav, content, section, article ..... div로 사용하던 엘리먼트를 각각의 의미에 맞는 태그의 명칭을 세분화시켜 네이밍을 정하고 웹문서가 xml처럼 데이터의 특성을 가지고 데이터를 가져갈수있게 인식하도록 시멘틱한 목적으로 Elements가 추가로 생성되었다고 볼 수 있습니다. - 기능과 역할은 div와 동일하므로 UI면에 있어서는 기존방식과 동일함. - 순서 > 의미 맞는 태그 사용 후 최종 DIV 사용 권고함.

HTML5의 주요기능

HTML5와 API

Offline Support : Web database, Local Storage, App Cache

• Canvas

• Video

• GeoLocation

• Advanced Forms

http://www.html5rocks.com

“새로만들어진 태그 + 자바스크립트 API 들이 합쳐져서 HTML5”

HTML5 & UI?

HTML5와 UI의 관계는?

•UI와 관계된 HTML5 Feature는 Canvas가 유일

•Canvas는 마크업 방식의 UI를 벗어난 픽셀 단위 제어를 가능 하게함

HTML5와 CSS3?

CSS란? HTML 문서에 스타일을 주기 위해 사용 Cascading Style Sheet

CSS3 - 기존CSS2.1에서 부족한 부분을 보완/개선

CSS3의 장점!

- 코드간결화 - 이미지 사용 줄임 - 용량슬림 - 동작속도향상 - 웹표준 기술로 동적효과 표현가능

CSS3 Styling

CSS3는 HTML5에 포함되는 개념은 아니지만 마케팅적인 측면에서 HTML5라는 우산안에 웹의 신기술들을 포함해서 HTML5로 모든것을 할 수 있다 이런 메시지를 전달하기 위해 묶어서 사용하기도 합니다.

CSS3와 브라우저

IE 와 Webkit 브라우저의 렌더링 차이점

Webkit 렌더링을 사용하는 모바일에서는 문제가 없다.

대부분의 해외사이트 들은 CSS3를 지원하지 않는 IE를 크로스브라우징 범위에서 제외시킴.

IE에서는 기능상 문제만 없으면 사용 가능하나,

개발비용을 추가하면서 HTML5 & CSS3의 기능을 사용하는 것은 비효율적

CSS3와 웹 표준

! CSS는 속성별로 표준화시기가 다르다.

국내 포털의 모바일 사이트의 CSS3사용 분석

Naver : 13-webkit-prefixes Daum : 60-webkit-prefixes 37-moz-prefixes 2-o-prefixes Nate : 8-webkit-prefixes 2-moz-prefixes 7-o-prefixes

Prefixes 개수를 파악한 결과 전체적으로, 꼭 필요한 부분에 사용되었으며, 포털은 하위호환성 때문에 보수적으로 적용되었다고볼 수 있고, 앞으로는 좀 더 적극적으로 사용되지 않을까 예상해볼 수 있습니다.

실제 HTML5가 사용되는 간단 사례

Naver, Daum

HTML5/CSS3를 활용한 Naver모바일 검색

마크업 측면에서 본 HTML5와 CSS3의 활용사례 소개

HTML5 DTD 와 새로운 인코딩 선언 <!DOCTYPE html> <meta charset="utf-8">

HTML5에 추가된 태그 적용 HTML5에 새롭게 추가된 태그 중 <header>, <footer>, <nav>, <section>, <time> 을 시멘틱한 구조 표현의 용도로 사용

검색창에 “search type” 적용 웹킷 엔진에서 제공하는 CSS3 추가

실시간 급상승 검색어 영역에는 <time>태그를 적용해 기계에서 인식할 수 있도록 시멘틱하게 표현

Daum 모바일 <time>태그를 통한 실시간 커뮤니케이션

HTML5 <time>태그를 활용해 실시간으로 추천과 댓글도 바로바로 써서 의견을 함께 나눌 수 있도록 하여 관심사를 통한 그룹 커뮤니케이션을 즐길 수 있도록 서비스에 활용하고 있습니다.

<time> 태그를 적용해 실시간 업데이트되는 정보를 로컬정보에 저장하고 교환하므로써 기계에서 인식할 수 있도록 시멘틱하게 표현

국내 모바일 환경에서는 CSS3활용 가능

주요 브라우저의 CSS3 지원 단계

모바일 에서는 HTML5 와 CSS3를 자유롭게 사용 가능

Webkit은 가장 적극적으로 웹표준을 지원하는 렌더링 엔진 중 하나이다.

HTML5 & IE

IE는 HTML5와 CSS3를 지원하지 않는다.

모바일의 Webkit시대

웹의 단계적 향상 Progressive Enhancement

현실적인 웹표준의 문제점

국내에서는 Internet Explorer의 점유율이 높아 이를 무시할 수 없기 때문에

새로운 기술을 적극적으로 적용할 수 없고, 스펙이 가장 낮은 웹브라우저에 맞춰 개발하게 됨.

“IE 구형버전의 웹브라우저에서도 필수 기능은 이용할 수 있도록 하되,

최신 웹브라우저를 사용할 때 더 좋은 기능을 사용할 수 있도록 개발한다.”

단계적 향상의 적용

필수 기능은 모든 사용자에게 제공하되

최신 웹브라우저에서 더 나은 화면과 효과,

추가된 부가기능을 사용할 수 있게 개발한다.

“모든 환경에서 똑같이 보여야 한다는

오래된 관념을 없애라!”

모바일웹 크로스브라우징의 끝?

특이사항 및 버그

자고 일어나면 출시되는 단말기

- OS와 디바이스별로 각종 해결되지 않는 버그들이 존재

- OS버전, 단말기별 모든 이슈를 해결할 수는 없다.

- 설계 단계에서 지원 범위를 정함.

- 단말기별 OS버전, 해상도, 글꼴등의 차이

- 모든 기종과 환경을 동일하게 적용하는 것이 아니라

기준 OS와 단말기에 준하여

제작함

Responsive Web UI ?

반응형 웹디자인의 개념

예를들어 naver.com, m.naver.com처럼 데스크탑용, 모바일용 분리했는데 , 반응형 UI변형은 하나의 디자인이 변형되는 스토리를 예측해서 동시에 지원하는 방식입니다. One코드(원소스)로 CSS 미디어 쿼리를 이용해서 화면사이즈에 반응하고 컨텐츠의 View와 Hidden, 이미지의 Crop유무와 정렬방식에 대한 aligning 상황을 CSS만으로 조정하게 되는 방식입니다. 컨텐츠 내용은 html로 코딩되어있고 주로 CSS로 제어하는 방식입니다.

Responsible web design / 반응형 웹UI

! 단, 이런방식이 모든 사이트에 적용되는 것은 무리이고, 컨텐츠 구성과 가변레이아웃에 대한 순차적인 반응을 UX와 UI를 충분히 고민하여 구성할 경우 다양한 기법을 활용할 수 있습니다.

http://colly.com/ http://mediaqueri.es/ http://www.kingshillcars.com/

CSS3 + Javascript

Relayouting UI - CSS3 Media Query Stuffs

CSS3 Media queries를 활용해 디바이스의 종류뿐 아니라 다양한 조건을 이용하여 Style을 분기하여 사용하는 방식을 말합니다.

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

- 각 디바이스별

별도의 스타일 시트를 사용한 분기방식

#header { background:url(medium-density-image.png); }

@media screen and (-webkit-device-pixel-ratio: 1.5) {

/* CSS for high-density screens */

#header {

background:url(high-density-image.png); } }

@media screen and (-webkit-device-pixel-ratio: 0.75) {

/* CSS for low-density screens */

#header {

background:url(low-density-image.png); } }

- 하나의 스타일시트 내에

다른 스타일을 지정해서 분기하는 방식

사용자 반응형 레이아웃 구조이며 국내에서는 “반응형 웹디자인” (Responsive Web Design)이란 개념으로 좀 더 알려져 있습니다.

CSS3 @Media query

CSS3 media-query 를 이용한 반응형 웹 구현

다양한 레이아웃을 제공하기 위해 CSS3 media-query 를 이용한 반응형 웹을 구현한

Gallery 사이트를 통해 다양한 방식을 확인

http://www.smashingmagazine.com/

http://www.w3.org/conf/2013sf/

HTML5 Gallery

http://html5gallery.com/

Relayout Web Gallery

http://mediaqueri.es/

모바일 Web App

Web ? App ? Hybrid ?

Mobile Web Hybrid WebApp Mobile Native App

제작,배포 및 업데이트 쉬움

* 서버에서 바로바로 업데이트~

제한적인 디바이스 사용

- 카메라, 마이크 …

기존의 웹개발환경

정적이며 단조로운 UI

브라우저 URL쉽게 접근

속도 (중)

HTML5, CSS3, Javascript API

* Native App관련 언어를 따로

배울필요 없다

NativeApp 개발기간보다

짧고 비용적게든다

API를 통한 Device 기능 활용

* 다양한 라이브러리 존재

Store, Market통해 배포

등록 및 업데이트 시간소요

오프라인 지원

Device 모든 기능 활용

플랫폼별 개발 Ios(Objective-C)

Android(JAVA) Windows( C#,

Silverlight)

App등록 비용 년 $

Store, Market배포

업그레이드 할때마다 검수

(즉각대응 어려움)

다양한 플렛폼별 개발-TEST

- 배포로 인한 고비용+알파

속도(상)

왜? HTML5가 모바일에 중요한가?

많은 회사들이 각 모바일 플렛폼용 네이티브 앱을 모두 만들기는 어렵다!

Even Google was not rich enough to support all of the different mobile platforms

from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and

the many variations of the Nokia platform - Vic Gundotra, Google Engineering VP

“웹기술을 이용해서 많은 스마트폰을 동시에 대응하는 것을 만들겠다”

이제 앱은 모두 Hybrid Web App이다!

최근 출시되거나 업데이트 되는 다양한 앱들은 모두 하이브리드 방식!

네이버 – 뮤직, 지도, 카메라 등 디바이스 제한적 기능 제외한 모든 서비스

GS SHOP - 이벤트

카카오톡 – 선물하기 기능

모바일 웹앱 개발 플랫폼

Web App to Native App Framework

• Sencha

★ http://www.sencha.com/

• PhoneGap

★ http://www.phonegap.com/

★ iPhone, Android, Blackberry, Symbian, Palm, Windows Mobile

• Titanium Mobile

★ http://www.appcelerator.com/

★ iPhone, Android

• QuickConnect

★ http://quickconnectfamily.org/

★ iPhone, Android, Blackberry

• NimbleKit

★ http://www.nimblekit.com/

★ iPhone

- 라이브러리 형태의 프레임웍

- 크로스 플렛폼 지원

- 코딩으로 UI를 그리거나 비주얼베이직 위지윅 에디터를 사용

iPhone style UI library

Mobile Web App Types

UI Library for Touch Devices #1

• iPhone style UI library

★ JQTouch - http://jqtouch.com/

★ iUI - http://code.google.com/p/iui/

★ WebApp.Net - http://webapp-net.com/

계층적인 정보를 보여주는데 적합

UI 기능이 풍부하지 않음

가장 초기에 나온 라이브러리

PhoneGap UI

Mobile Web App Types

• PhoneGap

★ http://www.phonegap.com/

★ iPhone, Android, Blackberry, Symbian, Palm, Windows Mobile

UI Library for Touch Devices

Mobile Web App Types

UI Library for Touch Devices #2

• Sencha Touch : jQTouch + Ext JS + Raphaël

http://sencha.com

★ HTML5 + CSS + Javascript Mobile App Framework

★ Support for iOS , Android

★ Touch 기반의 다양한 UI 컨트롤 지원

★ 한개의 소스로 iPad / iPhone / Android 화면 동시 지원

• 예제 : http://j.mp/senchak

UI Library for Touch Devices

Mobile Web App Types

UI Library for Touch Devices #3

• iAd JS : Appleʼs Javascript Web UI Library

★ HTML5 + CSS + Javascript UI Framework

★ CocoaTouch 에서 사용하던 거의 모든 컨트롤을 Web 으로 변환하여 제공

★ 추가 UI Control 제공, Audio / Video : Using HTML5 audio/video element

★ Galleries : 360-Degree Object Rotation & Panorama, Horizontal/Vertical Slide,

Coverflow

감사합니다