웹개발기술의변화방향 - isquery.com 리치웹기술의현황 웹기반표준 바이너리...

웹 개발 기술의 변화 방향

윤 석 찬㈜다음커뮤니케이션

융합형 IT Specialist 인력양성 교육

HTML Timeline

HTML5

리치 웹 기술의 성장

• 과거의 유산– 웹 브라우저 전쟁 및 비표준 웹 브라우저 (IE6)

– 플러그인 양산 ActiveX, NS Plugin, Flash

• 웹 2.0과 웹 애플리케이션– 브로드밴드 환경 하에 사용자 참여 기반의 웹 플랫폼 성장

– Ajax 기반의 리치 웹 애플리케이션 성장 (구글맵, 지메일)

– 현대적 웹 브라우저의 기술 혁신 (파이어폭스, 사파리, 크롬)

• 새로운 트렌드– HTML5 기반 리치 웹 애플리케이션 제공

– 모바일 및 태블릿 OS에서 적극 이용 가능

리치 웹 기술의 현황

웹 기반 표준

바이너리플러그인

PC O모바일 X태블릿 X

PC O모바일 O태블릿 O

[현실]현재 웹 표준을 100% 지원하는

웹 브라우저는 없으며미래에도 없다!

웹 개발자들이 존재하는 이유

웹 개발의 중요 원칙

• 기술 요소의 분리 (Separation of Functions)– 구조(HTML), 표현(CSS), 동작(DOM Script)의 분리

• 점진적 기능 향상 (Progressive Enhancement)– HTML의 기능을 기반으로 CSS, JavaScript, Plugin

등 기능을 단계적으로 향상 시킴

• 단계적 기능 축소 (Graceful Degradation)– 반대로 기능을 단계적으로 축소하더라도 중요한 기능

은 수행되도록 해야 함.

• 하위 및 상위 호환성 (Backward/Forward Compatibility)– 웹 브라우저별 이전 버전의 기능을 제공하면서도 향

후 버전에 탑재될 미래 표준에 대한 기능 역시 제공

Plug-in

DBDB

<html><title> <?=$title?> </title><body><font size=2>Hello! World</font><?=mysql_query(“SELECT name…)?></body></html>

CGI

Internet

초창기 웹 개발 방식 (1990년 초반)

Plug-in

DBDBModel

Internet

View

Controller

<! DOCTYPE XHTML…><title>$title</title><body><h1>Hello, Wolrd</h1></body></html>

body { font-size: 9pt;}h1 {color:blue;}

Function popup(url) {window.open(url);

}

Structure

Presentation

Behavior

XHTML

CSS Layout

DOM Script

MS .NET

Spring Stru

ts

웹 표준 시대 (200년대 중반)

Plug-in

DBDBModelInternet

View

Controller

{"Name": "Cheeso", "Rank": 7}

Structure

Presentation

Behavior

Ajax OpenAPI

RubyOnRails

jQuery

Gears

Ajax 시대 (2000년대 후반)

Plug-in

InternetStructure

Presentation

Behavior

Ajax

LocalStorage

LocalStorage

diskdisk

NoSQL

CloudComputing

{"Name": "Cheeso", "Rank": 7}RESTful

소셜 웹 시대의 웹 개발 (2010년)

HTML5와 모바일웹 변화HTML5 and Mobile Web



HTML5 표준의 역사

HTML5 디자인 원칙

• 호환성– 기존의 HTML 문서를 최대한 지원, 단계적 기능 축소(Graceful

degradation), 기존 기능 재사용 및 엄격한 잣대를 대지 않는 것

• 유용성– 실제 웹 개발자들이 겪고 있는 가장 중요한 문제를 순위에 따라

나누되 문제점을 분리해서 독립적으로 해결 함.

• 상호 호환성– 브라우저 엔진 호환을 위해 최대한 자세한 스펙을 기술하되 복

잡하지 않고 오류 처리 방법을 꼭 기술.

• 보편적 접근성– 미디어 포맷 독립성, 전 세계 언어 지원, 웹 접근성 보장

<header>

<footer>

<section><nav> <aside>

<article>

1. 구조적 마크업

<input type="datetime">

<input type="range">

<input type="url">

And many more…

<input type="text"list="list"><datalist id="list">

<option value="Mr">

...</datalist>

2. Web Form

3. 멀티미디어

• 비디오 및 오디오– 멀티미디어 서비스가 주류 콘

텐츠로 편입

– 거의 모두 플러그인 기반으로제공되고 있음 (c.f. Open Video)

– 브라우저에 네이티브 지원 필요성 (c.f. OGG)

• Canvas– 간단한 2D Graphics

Demo: Video, Canvas, WebGL

4. 오프라인 지원 및 스토리지

• 데이터를 클라이언트 사이드에서 저장 필요

• 웹 애플리케이션의 오프라인 기능 지원 필요– 데이터베이스 서비스 지원

– SQLite database 및 DOM storage api (key/value pairs)

• 구현 브라우저– Firefox, Safari, Opera, Google Chrome and IE8

5. 웹 워커

• 일반 애플리케이션은 Thread와 Process를 가짐

• 웹 애플리케이션에 동시 실행 가능성 부여

• 오버로드가 심한 애플리케이션에서 분리된 Thread로 실행 가능– Dedicated (think: bound to a single tab)

– Shared (shared among multiple windows in an origin)

– Persistent (run when the browser is “closed”)

• 구현 중: Firefox 3.5, Safari and Google Chrome

그 밖에 주요 웹 표준

• PNG 구현

• CSS 2.1 및 CSS 3

• 3D API

• Selector API – querySelector()

• Geolocation API

HTML5 Right now?

• Google.com

• Apple.com

• Mozilla.com

• html5gallery.com

And many more…

태블릿 != 데스크톱 OS

모바일 OS가 주목 받는 이유

• 왜 모바일 OS인가?– 데스크톱 OS가 태블릿에서 실패했기 때문

– 모바일과 데스크톱 사이의 영역을 새롭게 정의

– 인터넷 기반의 웹 애플리케이션의 성장

– 전혀 새로운 소프트웨어 생태계 주도

• 태블릿 애플리케이션의 구도– 태블릿 OS의 네이티브 개발 환경

• iPhone OS, Android, WindowsPhone, Symbian…– 차세대 웹 표준 기반 개발 환경

• HTML5 (Audio, Video, Canvas, SVG, CSS3, WebSocket…)

무엇이 문제인가?

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

모바일에서 주요 구현 현황

√√ √√ √√ √√

√√ √√ √√ √√

√√ √√ √√

√√ √√ √√ √√

Canvas

Video/Audio

WebGL

SVG

Workers √√ √√ √√ √√

Plug-in

InternetNoSQL

CloudComputing

{"Name": "Cheeso", "Rank": 7}

Structure

Presentation

Behavior

Ajax RESTful

LocalStorage

LocalStorage

Web Storage

Web Socket

SelectorAPI

Canvas

Geolocation

Drag&Drop

diskdisk

Casandra

Hbase

Amazon AWS

MS Azure

HTML5 시대의 웹 프레임웍

CSS3

HTML5

AppCacheWebGL

온라인 기반 애플리케이션

• Canvas 이용 간단한 멀티미디어 기능 구현 가능• 광고 및 온라인 게임 등 활용

Hand of Greedhttp://brainiumstudios.com/webapp/Spin the Bottlehttp://www.idean.com/iphone/spin/

하이브리드형 애플리케이션

• 아이폰 앱 안에 웹 기반 UI 제공

• 네이티브+웹 기반 형태로 앱스토어에서 다운로드 가능

Harmonious - 웹 기반 스케치패드http://harmoniousapp.com/

오프라인 애플리케이션

• HTML5기술+로컬 저장소만 이용한 애플리케이션

• App Cache 혹은 앱스토어를 통해 배포 가능

Monocle - 웹 기반 eBook Reader http://monocle.inventivelabs.com.au/

차세대 빅뱅: Chrome OS?

• 웹 기반 차세대 태블릿 OS

• 웹 앱스토어 마켓

• 디바이스 API 지원

Q&A 및 교육 프로그램 안내



웹개발기술의변화방향 - isquery.com 리치웹기술의현황 웹기반표준 바이너리...

Documents

Transcript of 웹개발기술의변화방향 - isquery.com 리치웹기술의현황 웹기반표준 바이너리...