1. 표준기술 적용 운영 사례
A. 오픈뱅킹(우리은행, 국민은행, 기업은행)
i.
Why IE – 인터넷 뱅킹이나 쇼핑몰등에서 ActiveX를 사용해서 IE의
점유율을 줄일 수는 없었다.
ii.
한국
인터넷 뱅킹 현황 - Active-X, (공인)인증서 – 서버인증서, 개인인증서, 암호화
교신, 금융 기관이 주는 보안
프로그램 (http://openweb.or.kr/?page_id=1028)
iii.
오픈뱅킹
– 우리은행에서 2010.7 월 국내 최초 서비스, OTP 사용으로 ActiveX-모듈 사용 배제(OTP를 타사의 눈치가 보여 그냥 주기는 그래서 이벤트에 참가하면 무료 증정하도록 함, 하나의 OTP로 타 은행에서도 사용 가능), 10만명 인터넷 뱅킹 신규 가입, 2,500명 신규 계좌 개설, 여수신 잔액 100억원 가량
iv.
우리은행
오픈뱅킹의 의미 (http://openweb.or.kr/?p=3059)
1. 화려함을 위해 플래시를 사용하지 않고 깔끔한 페이지 레이아웃,
2. 플러그인으로 암호화 하지 않고 웹페이지를 경량으로 구축 후 웹브라우저를 사용한 SSL 암호화를 사용하여 기존 플러그인을 사용하는 은행들 사이트보다 빠르다
3. 불필요한 보안 프로그램 제거 효과(방화벽, 바이러스, 키보드 보안[마우스로
클릭하게 만듬])
v.
지원
가능 OS/브라우저 – 리눅스에서 오페라 및 크롬이 조회서비스만
가능하고 나머지 OS(윈도우, 매킨토시) 및 브라우져(IE, 파폭, 사파리, 오페라, 크폼, 우분투, 페도라)에서 모두 사용 가능
vi.
국민은행
– 플러그인 방식의 개인방화벽 사용, PC 지정하면 보안카드
사용가능 하도록 해서 OTP카드 의무화를 배제 했다.
vii.
기업은행
– nProtect netizen에 대해서 강제 설치 함
viii.
인터넷뱅킹
보안 규정 구현 방식
1. 공인 인증서 - ActiveX에서
플로그인 방식으로 변경
2. 개인 방화벽 설치 – 플러그인, AciveX
3. 키보드 보안 – 가상 키보드
4. 웹페이지 보안 – (브라우저에서
제공하는)SSL 표준 프로토콜로 감독기관 승인
B. iOSHTML5 관련App
i.
HTML5 Rederence Guide
ii.
HTML5 PRO
C. HTML5로구현된참고사이트
i.
Channy'sBlog(http://channy.creation.net/blog/776 )
ii.
차세대웹표준HTML5의탄생과미래(http://www.skyventure.co.kr/insight/web/view.asp?Num=17119&NSLT=Y)
iii.
HTML5 Demos and Examples (http://html5demos.com/)
iv.
HTML5 그놈이온다(http://www.iamcorean.net/187)
v.
HTML5 Gallery(http://html5gallery.com)
vi.
HTML5 and the Future of the Mobile Web
(http://www.slideshare.net/wonsuk73/html5-and-the-future-of-the-mobile-web)
vii.
HTML5 examples(http://www.phpguru.org/html5-examples#html5.canvas.examples)
viii.
15 HTML5 Demos Showcasing Prowess of HTML5 Over Adobe
Flash(http://www.techdrivein.com/2010/08/15-html5-demos-showcasing-prowess-of.html)
2. HTML5 적용 사례 소개
A. HTML5 왜 필요한가?
i.
HTML4 + Applet + Flash è HTML5 + Canvas + Video +
APIs (HTML5의 기능으로 모두 커버가 된다. 장치 비종속적이다. 범용적 웹 어플리케이션 표준)
ii.
사용자
1. Geolocation API로 장치의 지리적 위치 정보를 활용하는 향상된 사용자 경험 제공
2. Web Workers API를 이용한 JavaScript 멀티
쓰레드 지원으로 빠른 웹 환경 제공
iii.
개발자
1. 효율적인 사이트 구성, 향상된
사용자 경험 제공
iv.
마크업
개발에서의 HTML5
1. <div class=”header”> è <header> 로 코드 자체로서의 의미 강화
B. 개발 표준
i.
구조(HTML)와 표현(CSS)으로 변경 전 후
1. 변경 전 – (HTML + CSS)<td
bgcolor=“yellow”>첫번째 셀</td>
2. 변경 후 – (HTML) <td>첫번째
셀</td>, (CSS) td{backgroundcolor:yellow}
ii.
무엇이
좋아졌나?
1. 호환성 – IE, 파폭, Safari, Chrome, Opera(W7, Mac)
2. 개발 프로세스 단축 – 디자인(CSS)과 개발(HTML)이 동시에 진행될 수 있다.
3. UI관려 유지보수 비용 감소 – 디자인
관련 문제는 CSS만 수정함
4. 코드 용량 감소 – '(1)Table è (2)Div + CSS è HTML5' 형태의 변화로 코드량이 감소한다.
C. 적용 사례
i.
개인화
웹
1. 변경 및 폐지된 Element,
Attribute 초점
A. 의미가 변경된 Element
i.
<b>, <cite>, <hr>, <i>, <menu>,
<s>, <small>, <strong>
B. HTML5에서 사용할 수 없는 Element
i.
<basefont>, <big>, <center>, <font>,
<s>, <strike>, <tt >, <u>, <frame>,
<framesets>, <noframes>, <acronym>, <applet>,
<isindex>, <dir>
2. 구조(HTML)와 표현(CSS)의 구분 확실 - Background, bgColor, border의
속성 사용할 수 없고 CSS(표현)으로만 사용할 수 있다.
ii.
모바일
1. <Input type='search'>
사용해서 iphone
우측 하단에 'Search'버튼 보이도록 함
3. 웹에서의 실시간 네트워크 커뮤니케이션
A. Google docs를 같은 웹페이지를 2개의
창에 띄우고 한곳에 수정하면 다른 곳도 싱크 맞추어짐 ç HTTP is connectionless
B. HTML4에서의 방법
i.
Polling
1. 서버에 주기적으로 물어보는 방법(Comet
아님)
2. 네트웤 자원 낭비하고 요청 주기에 따라 사용자는 딜레이를 체감함
ii.
Long Polling (http://www.uengine.org:8088/wiki/index.php/Comet_%EA%B5%AC%ED%98%84_%EA%B8%B0%EB%B2%95)
1. 처음에 한번 서버에 요청하고 이후 서버에서 변경이 있을 시 Client에 응답이 오는 구조
2. 구현에 따라 서버에 부하가 있다.
iii.
Streaming
1. HTTP chunked(Response Data가 커서 나누어서 Client로
전달함)는 구조
2. IE에서는 onreadystate가 3번으로 날라오지 않아서 iframe을 사용함. 따라서 딸깍 소리 들림
C. 제약사항
i.
브라우져
마다 가능 가능한 최대 커넥션 수(IE는 2개의 컨넥션만
만들 수 있다고 함)
D. HTML5에서의 방법
i.
ServerSentEvent
1. Server에서 보내는 정보만 받을 수 있다.
2. Client간의 통신은 안된다.
3. 지원 하는 브라우져가 많지 않다.(IE
9 이상도 미 지원)
ii.
WebSocket
1. 양방향 통신 지원
E. 적용 사례
i.
마이피플
– flash socket 사용함, 추후 HTML5용 WebSocket 으로 변경 예정
ii.
Naver 야구 9단 – 주기적으로 결과를 받는 내용이 많으므로 Long Polling 적용함.
4. HTML5 2D, 3D, 벡터 그래픽
A. 기존에는 Photoshop,
Flash, Silverlight, CSS 등으로 '차트,
컨트롤(버튼)'등을 만들었지만 이젠 HTML5에서 다 가능하다.]
B. 2D in Canvas
i.
사용
예 (사각형 그리기)
1. <canvas
id="c1" width="150" height="150">
2. var canvas =
document.getElementById('tutorial');
3. if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100);
}
ii.
paper.js (http://paperjs.org/)
C. 2D in SVG
i.
사용 예
1. <body>
2. <svg
width="400" height="300">
3. <text x="100"
y="100"
4. font-size=”50px”
5. fill=”rgba(0,0,255,1)”
6. stroke=”red”
onclick="something();">
7. Hello World!
8. </text>
9. </svg>
10. </body>
ii.
일러스트레이터로
그리고 다른 이름 저장해서 SVG 내용 복사 후 붙여 넣으면 됨
iii.
Raphael JS 를 사용하면 HTML5 지원 가능하면 SVG를
사용하고 IE에서는 VML를 자동으로 사용하도록 함 (http://raphaeljs.com/)
D. WebGL (3D)
i.
고려사항
– 명암, 거리, 원근, 제질
ii.
OpenGL ES 2.0 , GLSL(OpenGL Shading Language) ç SpiderGL, GLGE, C3DL,
SceneJS
iii.
사용
예(http://bodybrowser.googlelabs.com)
5. 웹앱 및 하이브리드앱 개발
A. Native Apps (iOS, android의 SDK로 개발되는 것)
i.
장점 - High Performance, Full Device Resource, App Store, Gaming Machine
ii.
단점
– 개발자 비용 큼, 배우가 어렵다, App Store에 접수하기 어렵고 오래 걸린다. Adroid의
경우 삼성이 만든 것과 다른 곳에서 만든 것이 서로 틀리다. Device가 너무 많다. 버전 관리는 해야 한다.
iii.
웹
앱으로 개발 가능한 것들도 있다 – 잡지, 앵그리버드, 트위터 등등… 이렇게 할려면
HTML5로 좋다.
B. HTML5
i.
장점 - Open Web Standard, Multi Device, Multi Platform, Realtime Update 지원
ii.
단점
– Device Resource(카메라와 같은 장치를 사용하지 못함),
Accessibility(인터넷이 되어야 사용가능), confidence,
Cross-domain(cross domain에 접근 안됨), performance 떨어짐
C. 사용빈도
i.
www.Html5test.com 에서 조사한 내용에 따르면 HTML5는 mobile용 브라우져(safari, webkit, chrome)등에서
많이 사용한다.
D. 하이브리드 앱
i.
Device Resource 가 사용 가능하다(Camera, Contact, GPS)
ii.
앱에서 Browser의 접근에 대한 confidence은 믿을 수 있게 된다.
iii.
App Store에서 복잡한 게임성 카테고리를(30%) 제외한 다른 카테고리들(70%)은 모두 앱으로 개발 가능하다.
E. 적용 방법
i.
WebApps to native Apps
1. PhoneGap,
Appspresso(Eclipse IDE)
ii.
Build Native Apps with web Technology
1. Titanium 여러 Native App으로
만들어 주지만 개발언어가 어렵다.
iii.
WebApp과 NativeApp을 각각 개발하고 합친다.
6. 리얼타임 서비스 개발을 위한 자바스크립트 기술
A. Javascript 개발 구조 관련
i.
소스보기가
가능하고 복사해서 갔다 쓸 수 있고, Validation 용으로 사용할 수도 있지만, Ajax + DHTML 등을 이용해서 한 페이지에서 여러 가지 처리를 하는 응용프로그램(Application)을 만들 수 있다.
ii.
그러나 JavaScript에서는 개발 구조 Framework이 없어서 개발하기
어려웠다. 그래서 MVC나
MVVM(ModelView ViewModel) 등이 나왔다. 일반적으로 Ajax로 Controller를 호출해서 결과 JSON을 받아서 화면에 출력한다고 할 때 출력 값에 태그(Design)과
내용(Data)이 함께 있어 분업해서 작업하기 힘들어 진다. 이런
것을 중간에 편하게 템플릿 기능을 하는 knockout.js 가 지원해 준다. JSON과 HTML을 자동으로 연동하게 해 준다.
B. Realtime Service
i.
SNS, facebook, twitter, google+,
ii.
Javascript 엔진인 'Google v8'을 사용해서 chrome을
만들었다고 한다. 이후 'google v8' 을 가지고 서버
프로그램이 가능한 node.js를 만들었다.
iii.
Node.js 장점
– NIO, HTTP lib 포함, module system,
Javascript
iv.
WebSocket
v.
NowJS - Client에서 호출한 Method를 Server에서 바로
사용할 수 있게 된다. 프로토콜을 공유한다. (http://dev.paran.com/2011/05/17/nowjs-nodejs/)
1. Client – now.sendData(“abcd”);
2. Server – everyone.now.sendData = function(data){ … }
C. Mobile Javascript
i.
jqueryMobile, Sencha Touch 등이 있지만 많은 것을 수용하느랴 무겁다. 따라서 사용용도에
따라서 사용할 수 있는 다양한 Micro javascript Framework(FormfactorJS, MinPubSub,
Modernizr, JSON2, Objs, OORJa, $script.js, Artemia, Augment.js, domReady …)를
사용하는 것이 좋다.
Google Docs에 있는 첨부파일들 참고하기
HTML5_웹표준컴퍼런스2011_다녀와서.docx
