Webware - 문서에서 운영 체제 까지 - 윤석찬 (2014)

윤 석 찬
facebook.com/channyblog

Think about Web
•Universal Access •Semantic •Interoperability
•Trust Evolvability Decentralization Cooler Multimedia!

<html>
<head>
<title>웹웨어 강의</title>
</head>
<body>
<h1>강의 소개</h1>
<p>
본 콘텐츠는 <a href=http://webware.kr>Webware</a>
사이트를 참조하시면 됩니다.
</p>
</body>
</html>

90년대 웹 문서
<blink>
<marquee>
<font>

웹의 세가지 요소
•© Doug Bowman

<html>
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</html>
<style type=“text/css”>
#header li {
float:left;
background:url("left.gif")
no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
</style>
<script language=“text/javascript”>
var document.getElementbyID(“header”);
</script>
요소간 분리

JVM Platform Web site
Java API Interface Open API
Java
Application
Software Data
Developer Participators User, Small Biz.
API Lock-in Key Factor Data Lock-in

Web Hypertext Application Technology Working Group
%

0
5,000
10,000
15,000
20,000
25,000
30,000
35,000
40,000
45,000
0 1 2 3 4 5 6
GlobalUnitShipments(000)
Quarters After Launch
iPad iPhone iPod
•Source: Gartner, Morgan Stanley Research, as of Q2:11.

0
20
40
60
80
100
120
140
160
180
0 1 2 3 4 5 6 7 8 9 10 11
GlobalCumulativeUnitShipments(MM)
Quarters After Launch
Android iPhone
•Source: Gartner, Morgan Stanley Research, as of Q2:11.

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

The biggest mistake we made, as a
company, was betting too much on
HTML5 rather than native…
It's not that HTML5 is bad. I'm
actually, on long-term, really
excited about it. One of the things
that's interesting is we actually
have more people on a daily basis
using mobile web Facebook than we
have using our iOS or Android apps
combined. So mobile web is a big
thing for us.

HTML5: 현재의 Web Runtime
2D Canvas Offline
Web Form Markup
Video & Audio
HTML5 Buzz World?
HTML5
File API
Geolocation
Web
Workers
XMLHttpRequest 2 Server-Sent Events
Indexed DBWebGL
DOM Storage
Web
Sockets
CSS3
Device API
WebRTC
WebM Codec
Drag & Drop
API
Micro Data
SPDY
ECMA 5th
Audio Data
API
WebFont(WO
FF)
SVG
•http://caniuse.com/

STRONG
EM#text: a
#text: b
#text: c
p
EM STRONG
EM#text: a
#text: b #text: c
p
STRONG
EM#text: a
#text: b #text: c
p
<p><strong>a<em>b</strong>c</em>

HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
DOCTYPE

웹의 네 가지 문제점
소프트웨어 설치 문제
로컬 저장 공간 문제
인터랙티브한 유저인터페이스 문제
서버 의존성의 문제

•지메일 모바일 버전
•오프라인에서 사용 가능~

• Web Storage
• Indexed DB

•File API & Drag/Drop API
•플러그인 없이 파일 첨부 기능 이용 가능~

function loc(position) {
alert(position.coords.latitude +
position.coords.longitude);
}
navigator.geolocation.getCurrentPosition(loc);

WebRTC – 아예 서버 의존성 탈피

Plug-in
DB
Model
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
c.f. 과거 웹 개발 (Web Document)

Plug-in
Internet
NoSQL
Cloud
Computing
{"Name": "Cheeso",
"Rank": 7}
Structure
Presentation
Behavior
Ajax RESTful
Local
Storage
disk
HTML 5 기반 (Web application)

그러나 아직 웹이 못하는 것
디바이스 제어…

Hand of Greed
http://brainiumstudios.com/webapp/

Open Mobile Web OS
– 웹 기반 앱의 실행에 최적화
– 폐쇄형 상용 모바일 OS의 대안
주요 구성
– Gaia – 유저인터페이스
– Gecko – 웹 런타임
– Linux – Gonk 기반 임베디드 OS
https://wiki.mozilla.org/B2G

Chrome Web Store
https://chrome.google.com/webstore

모바일/PC 앱 배포 채널 제공

•HTML5/CSS3
•https://developer.mozilla.org/ko/demos/detail/the-planetarium/launch
•https://developer.mozilla.org/ko/demos/detail/3d-image-transitions/launch
•https://developer.mozilla.org/ko/demos/detail/minipaint/launch
•https://developer.mozilla.org/ko/demos/detail/ghostwriter-art-studio/launch
•WebFont
•http://tympanus.net/Tutorials/InteractiveTypographyEffects/index4.html
•http://fff.cmiscm.com/#!/main
•Canvas
•http://9elements.com/io/projects/html5/canvas/
•http://spielzeugz.de/html5/liquid-particles.html
•http://ie.microsoft.com/testdrive/Performance/AsteroidBelt/#
•https://developer.mozilla.org/en-US/demos/detail/3d-grapher/launch
•http://fff.cmiscm.com/#!/main
•Video
•https://developer.mozilla.org/ko/demos/detail/remixing-reality/launch
•https://people.mozilla.org/~prouget/demos/tracker/tracker.xhtml
•WegGL
•http://helloracer.com/webgl/
•http://www.eveoline.com/universe/spaceships
•http://thinkercad.com
•http://ro.me

HTML – Open Living Standard
•http://www.whatwg.org/specs/web-apps/current-
work/multipage/

미래의 웹 기술
서버가 필요 없는 웹
– DOM Storage, Indexed DB
– WebSocket, WebRTC, Offline App Cache
멀티미디어 기반 웹
– Audio/Video, 2D(Canvas/SVG), 3D(WebGL)
– CSS3(Transform, Animation, 3D)
웹 운영체제
– Firefox OS
– Chrome OS
비즈니스 플랫폼으로서 웹
– Firefox 마켓플레이스
– 구글 앱스토어

누구나 접근 가능한
모바일 웹의 미래!

Q&A
@channyun
http://channy.creation.net

Webware - 문서에서 운영 체제 까지 - 윤석찬 (2014)

More Related Content

What's hot

Viewers also liked

Similar to Webware - 문서에서 운영 체제 까지 - 윤석찬 (2014)

More from Channy Yun

Recently uploaded

Webware - 문서에서 운영 체제 까지 - 윤석찬 (2014)