모바일환경과 개발방향

모바일 환경과 개발방향
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 바로알기
“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

div id=“header”

<header>

Semantic Mark-up Elements
div id=“content”

div
id=“sid
ebar”

div ”class=“po
st”

div ”class=“po
st”

div id=“footer”

<section
id=“content”>
<article>
<nav>

<article>

<footer>

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

HTML5의 주요기능
HTML5와 API
“새로만들어진 태그 + 자바스크립트 API 들이 합쳐져서 HTML5”
Offline Support : Web database, Local Storage, App Cache
• Canvas
• Video
• GeoLocation
• Advanced Forms

http://www.html5rocks.com

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 와 새로운 인코딩 선언

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

<!DOCTYPE html>
<meta charset="utf-8">

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

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

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

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

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

국내 모바일 환경에서는 CSS3활용 가능
주요 브라우저의 CSS3 지원 단계
모바일 에서는 HTML5 와 CSS3를 자유롭게 사용 가능
Webkit은 가장 적극적으로 웹표준을 지원하는 렌더링 엔진 중 하나이다.
모바일의 Webkit시대

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

웹의 단계적 향상 Progressive Enhancement
현실적인 웹표준의 문제점
국내에서는 Internet Explorer의 점유율이 높아 이를 무시할 수 없기 때문에
새로운 기술을 적극적으로 적용할 수 없고, 스펙이 가장 낮은 웹브라우저에 맞춰 개발하게 됨.
“IE 구형버전의 웹브라우저에서도 필수 기능은 이용할 수 있도록 하되,

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

단계적 향상의 적용
필수 기능은 모든 사용자에게 제공하되

최신 웹브라우저에서 더 나은 화면과 효과,
추가된 부가기능을 사용할 수 있게 개발한다.

“모든 환경에서 똑같이 보여야 한다는
오래된 관념을 없애라!”

모바일웹 크로스브라우징의 끝?
특이사항 및 버그
자고 일어나면 출시되는 단말기
- OS와 디바이스별로 각종 해결되지 않는 버그들이 존재
- OS버전, 단말기별 모든 이슈를 해결할 수는 없다.
- 설계 단계에서 지원 범위를 정함.
- 단말기별 OS버전, 해상도, 글꼴등의 차이

- 모든 기종과 환경을 동일하게 적용하는 것이 아니라
기준 OS와 단말기에 준하여
제작함

반응형 웹디자인의 개념

Responsible web design / 반응형 웹UI

CSS3 + Javascript

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

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

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

Relayouting UI - CSS3 Media Query Stuffs

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

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); } }

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 ? Hybrid ?
Mobile Web

Hybrid WebApp

Mobile Native App

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

HTML5, CSS3, Javascript API

등록 및 업데이트 시간소요

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

* Native App관련 언어를 따로

오프라인 지원

제한적인 디바이스 사용

배울필요 없다

Device 모든 기능 활용

- 카메라, 마이크 …

NativeApp 개발기간보다

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

기존의 웹개발환경

짧고 비용적게든다

Android(JAVA) Windows( C#,

정적이며 단조로운 UI

API를 통한 Device 기능 활용

Silverlight)

브라우저 URL쉽게 접근

* 다양한 라이브러리 존재

App등록 비용 년 $

속도 (중)

Store, Market통해 배포

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
- 라이브러리 형태의 프레임웍

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

• Sencha

• QuickConnect

★ http://www.sencha.com/

★ http://quickconnectfamily.org/

• PhoneGap

★ iPhone, Android, Blackberry

★ http://www.phonegap.com/

• NimbleKit

★ iPhone, Android, Blackberry, Symbian, Palm, Windows Mobile
★ http://www.nimblekit.com/
• Titanium Mobile
★ http://www.appcelerator.com/
★ iPhone, Android

★ iPhone

iPhone style UI library
Mobile Web App Types
UI Library for Touch Devices #1

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

• iPhone style UI library

UI 기능이 풍부하지 않음

★ JQTouch - http://jqtouch.com/

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

★ iUI - http://code.google.com/p/iui/
★ WebApp.Net - http://webapp-net.com/

PhoneGap UI
• PhoneGap
★ http://www.phonegap.com/
★ iPhone, Android, Blackberry, Symbian, Palm, Windows Mobile

• 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

• 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

모바일환경과 개발방향

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (17)

Similar a 모바일환경과 개발방향

Similar a 모바일환경과 개발방향 (20)

모바일환경과 개발방향