스마트시대를 준비하는 웹표준 RIA

- 플랫폼 홍수의 시대, RIA에 요구되어지는 것들

2012

UI 기술의 진화

국내 스마트폰 시장 현황 국내 태블릿PC 시장 전망

2011년

2000만대 판매 - 파이낸셜뉴스 2012.01 -

모바일 시장의 폭풍 성장

풀 브라우징 가능한 스마트기기의 증가로 IT부서 고민 증가 !

N SCREEN

Seamless + Interaction

Cloud Computing

브라우저 점유율

미국과 유럽은 IE6 점유율이 1% 미만

중국 23.8% 한국 6.3%

MS가 ‘굿바이 IE6′ 캠페인을 진행하는 이유는 웹표준을 지키지 않은 구형 IE6 때문

시장 점유율 [http://gs.statcounter.com/#browser-ww-monthly- 201104-201203]

모바일 브라우저 점유율

[http://www.netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomd=1]

WebKit (Mobile Safari + Android

Brower) = 79%

61.0%

18.0%

15.0%

Other, 6.0%

비표준 웹기술 동향

UI 기술에 따른 모바일 플랫폼 지원 여부

스티브잡스, '아이폰서

플래시 거부'

- 2010.5.15 | 연합뉴스

어도비, 모바일용 플래시 포기...

HTML5에 집중

- 2011.11.10 | ITWORLD

실버라이트5 공개 임박… 후속판은

없다?

- 2010.11.10 | ZDNET

방통위, '액티브X(ACTIVE X)' 퇴출...

2011.4.5 | ITNEWS

윈도8 속 IE10 메트로버전, 더 이상

액티브엑스 못쓴다...어도비 플래시

등 난감 - 2011.9.16 | 전자신문

UI 기술

플랫폼 Flash (FLEX) Silver Light ActiveX HTML5

iPhone/iPad X X X O

Android O X X X O

Windows Phone △ X O X O

Adobe 모바일 플래시 사업 철수 발표

MS! "HTML5는 옳은 길이다" IE9는 HTML5 전격 지원

OS 업그레이드 리스크

2007년 윈도 비스타 출시

-> Active-X 지원 문제

-> 전수 테스트 후 보완작업

MS 차세대 운영체제 윈도우 8

-> 모바일 환경은

Active-X 배제 윈도우8

메트로 UI

Multi Platform/Multi Device 지원 요구 증가

웹브라우저 PC OS 모바일 OS

새로운 디바이스

One Source, Multi Use

다양한 플랫폼 지원

• 다양한 OS 지원

• 다양한 브라우저 지원

• iPhone, iPad, Android 등 다양한 디바이스 지원

다양한 해상도 지원

• 3.3인치부터 22인치까지 다양한 화면 지원

• 320*480부터 1680*1024까지 다양한 해상도 지원

One Source Multi Use

One Source Multi

Platform

One Source Multi

Device

최소 비용 최대 효과

웹표준 기술 !

JavaScript

XML

웹표준 = HTML + CSS + JS API “ ”

W3C 차세대 웹표준 HTML5

• 목적 – 방대하게 퍼져있는 웹 문서를 의미 있게 구조화하고 효과적으로 탐색, 해석 할 수 있는 시멘틱(semantic) 웹 실현

– 플래시나 실버라이트와 같은 별도의 플러그인 없이 웹에서 표준적인 방식으로 응용프로그램 수준의 웹을 개발하기 위함

• 일정 – 2011년 5월 초안에 대한 Last Call 종료 – 2012년 Q2 : HTML5 후보 표준안 (Candidate Recommendation) – 2014년 Q1 : HTML5 제안 표준안 (Proposed Recommendation) – 2014년 Q2 : HTML5 최종 표준안 (Recommendation)

• 기준 – 현존 브라우저의 상태를 반영한다.(하위호환성 지원)

– 유용한 확장기능들을 반영하고 표준화한다.

– " Evolution, not Revolution "

• 내용 – WebForm

– 리치 웹 미디어(Video, Audio, Canvas)

– 로컬 저장소, 오프라인 캐시, Web Sockets, Web Workers

W3C 차세대 웹표준 HTML5

HTML5는 모든 것의 해결책은 아니지만 많은 것의 대안이 될 것임에 분명하다 !

HTML5 지원 단말기 전망

[SA(Strategy Analytics) http://www.strategyanalytics.com/default.aspx?mod=reportabstractviewer&a0=6901]

0.03 억

4 억

7 억

16 억

2009 2011 2012 2016

(단위 : 대)

그럼 웹표준만 준수하면 될까요?

웹접근성

장애인에 대한 인터넷뱅킹 및 온라인 증권거래 등의 금

융서비스제공은 2013년 4월 11일부터 제공하면 된다

- 법제처 (2009년 8월 22일) -

[http://www.w3.org/WAI]

“웹의 힘은 그것의 보편성에 있다. 장애에

구애없이 모든 사람이 접근할 수 있는 것이

필수적인 요소이다. ”

- 팀 버너스 리 (웹의 창시자) -

모바일 환경에서 따로 고려할 점은 없나요?

기업이 지원해야 할 모바일 OS의 개수

9%

15%

25%

39%

12%

4+ 3 2 1 None

멀티 플랫폼 요건 : 50%

[Forrester, July 2009]

• 지원해야 하는 플랫폼 만큼 별도 개발 필요

• 디바이스 기능의 효과적 활용 네이티브 앱

• 단일 소스로 여러 플랫폼 지원

• 네이티브 연동 기능 지원 불가 웹 앱

• 네이티브 + 웹기술로 여러 플랫폼 지원

• 네이티브 연동 기능 지원 하이브리드 앱

모바일에서 멀티 플랫폼 지원 방안

하이브리드 앱 필요

빠른 속도 제공

디바이스 기능의 효과적 활용

효율적인 UI/UX 기능 활용

오프라인 상태에서의 구동성

네이티브 앱

웹표준 기반으로 다양한 디바이스 지원 (호환성 극대화)

개발자 수급 및 개발 용이

웹 앱

호환성

기능성

네이티브 앱 하이브리드 앱

웹 앱

하이브리드 앱

• 플랫폼 별 개발

• 느린 속도 • 디바이스 제어 불가

스마트시대, RIA의 기본 덕목

SMART

RIA

웹표준 기술 적용(HTML5)

UI 컴포넌트

WYSIWYG 개발도구

멀티 브라우저

크로스 플랫폼

웹 앱 / 하이브리드 앱

기존 RIA

웹표준 개발의 단점을 보완한 웹스퀘어

• 웹표준 기술 적용 및 통합

• 요소 기술 캡슐화

복잡한 기술 구조

• 4GL과 유사한 개발환경

• WYSIWYG 기반 통합 환경

낮은 개발 생산성

• 코드 체계화/스크립트 최적화

• 재사용 가능한 콤포넌트 스크립트 남용

• 하이브리드 플랫폼 제공

• 다양한 네이티브 기능 제공

네이티브 접근 제약

WYSIWYG 통합 개발 환경

하이브리드 앱

웹표준 통합 엔진

웹스퀘어( )는

국내 최초로 출시된 WYSIWYG 개발 도구가 포함된

웹표준 RIA 플랫폼

대규모 차세대시스템 구축 경험

웹표준 RIA 시장 선도제품

검증된 성능과 품질 완성도

One Source, Multi Use

다양한 이기종 H/W 플랫폼 지원 관리문서

다양한 OS 지원

윈도우즈

MS사 윈도우즈 계열 OS 동작 지원

비스타 및 윈도우7 도 지원

Mac OS iOS

애플사 Mac OS 계열 동작 지원

아이폰용 OS인 iOS에서 동작 지원

리눅스

오픈소스 Linux 계열 OS에서 동작 지원

태블릿 PC 지원

아이패드 갤럭시 탭

PC 지원

데스크 톱 PC 노트북 PC

스마트 폰 지원

아이폰 계열 갤럭시 계열

스마트 TV

안드로이드

구글사의 모바일 OS인 안드로이드 에서 동작 지원

하나의 개발환경에서 PC와 모바일 웹 어플리케이션 통합개발 가능

데스크톱용 일반 웹 개발

모바일 웹 개발

모바일에서 실행된 화면

모바일에서 실행된 화면

데스크톱 PC에서 실행된 화면

데스크톱 PC에서 실행된 화면

PC용으로 개발한 화면소스를 모바일과 PC에서 동일하게 동작

모바일용으로 개발한 화면소스를 모바일과 PC에서 동일하게 동작

PC용 화면 실행

스마트폰 용 화면 실행

WebSquare Architecture

업무화면

웹스퀘어 클라이언트 아키텍처

Data Manager Debugger

UI Engine

Ajax Engine

로깅

통신 HTTP/SOAP/REST/XML

서버 아키텍처

WAS

OS

Presentation

XML

CSS

이미지

JS

웹스퀘어 파일

어뎁터

Ajax엔진

Back End

Framework

Application

DB I/O

Data

JEUS

Jboss

DB DB

개발도구 WebSquare

Studio

Design View

Code Editor

Preview

Client

스마트 기기

모바일 지원

스마트 폰

태블릿 PC

PC

OS

HTTP XML

Deploy

노트북

개발도구의 주요기능

WYSIWYG 에디터

Events Driven 개발 도구

Flex, Active-X 연동기능

2600개의 다양한 API

제공

이클립스 플러그인

WYSIWYG 개발 도구 통합개발도구

개발자 편의 기능

특징

패키지 탐색기 속성 뷰 아웃라인 뷰 이벤트 뷰 네비게이터

디자인

WYSIWYG방식의 개발도구 제공

개발부터 테스트까지 통합된 개발환경 제공

화면 디자인 자바 스크립트 코딩 실행결과 확인

이클립스

플러그인

제공

스튜디오의 기능

50여가지 UI 컴포넌트

5,000

20 100,000 (0.2~1.5 sec)

대량데이터, 정렬, 필터, 틀고정, 합계, Excel 등 300여가지 API 지원

그리드

웹접근성

웹접근성

지원

W3C 웹표준

KWCAG

항목 지원

센스리더 지원

Cross Platform

• 웹접근성 및 멀티브라우저 지원 • https://open.shinhan.com • 2012년 2월 오픈

신한은행 오픈뱅킹

웹스퀘어 하이브리드는

웹스퀘어의 모든 기능을 앱 개발에 적용할 수 있는 하이브리드 앱 플랫폼

WYSIWYG 개발도구 및 컴포넌트 적용

한번의 개발로 웹과 앱 동

시 지원

인앱 업데이트 및 소스 무

결성

검증된 성능과 품질

완성도

WebSquare Hybrid Architecture

서버 아키텍처

WAS

OS

Presentation

XML

CSS

이미지

JS

웹스퀘어 파일

Resource Validate

In App Update

Back End

Framework

Application

DB I/O

Data

JEUS

Jboss

DB DB

개발도구 WebSquare

Studio

Design View

Code Editor

Preview

Client

Deploy

스마트 폰

스마트 패드

웹스퀘어 하이브리드 어플리케이션 플랫폼

UI Component UI Engine

Ajax Resource MGR XML/REST

Native Interface Framework

기본 네이티브

Camera GPS

Compass

Contact Gyro.

File

확장 네이티브

공인인증

기타

암호화

HTTP XML

네이티브 기능 지원

Camera Accelerometer GPS Contacts Media

File Connections Compass

Notification

3-rd Party 모듈 연계 가능

공인인증 기타 암호화 전자서명

인앱업데이트(In app update)

응용 프로그램

웹스퀘어 엔진

즉각적인 업데이트 가능

• 인앱업데이트(In app update)는 앱스토어나 마켓을 통하지 않고 앱 내에서 직접

업데이트 할 파일을 내려 받아 갱신하는 기능을 말한다.

In app update 유지보수 작업이 빈번한 엔터프라이즈 환경에서 더욱 유용한 기능

멀티 OS / 멀티 브라우저에서 실행한 화면

Linux

Mac OS X

Windows

iPad

Galaxy Tab

스마트폰에서 실행한 화면

태블릿에서 실행한 화면

[웹스퀘어는 2007년 국내 최초로 출시되어 60여개 이상의 여러 프로젝트에 성공적으로 적용한 범용적인 웹표준 RIA 제품입니다.]

차세대 시스템 구축

웹 청약시스템 코러스 WINAS

LIG GA 법인 시스템 구축

차세대 시스템 구축

신한은행 콜센터 어플리케이션 구축

Global Product Support System

차세대 시스템 구축

Port MIS 구축

차세대 시스템 구축

알프스론 시스템 (온라인 대출 시스템)

e-TRM 시스템 구축

품질관리 시스템 구축

차세대 업무 시스템 구축

전자투표 시스템 구축

통계 DB 시스템 구축

기술평가 시스템 구축

LIG 모바일 시스템 파일럿 구축

차세대 시스템 구축

대고객 웹서비스 및 정보보호시스템

통합정보시스템

다물 식자재 관리 시스템

신한은행 글로벌뱅킹 구축

환경부 국가 온실가스 종합관리

시스템 구축

u-도시생활 폐기물 통합관리 서비스

한국어능력시험 운영기반시스템

차세대 종합정보시스템

차세대 시스템 구축

학생정보시스템 구축

도요타 DMS시스템 구축

GPSS 고도화

e-catering 시스템

지능형 재난감시 및 상황전달시스템

스마트 채널 인프라(직원용) 프

로젝트

하이닉스 Hy CRM 구축

온실가스정보 시스템

위기관리 시스템

통합정보시스템 구축

테블릿 영업지원 시스템 1차 구축

자동차보험 진료비 전자청구시스템

태양광 시스템 구축

Klnet 전자물류사업

차세대 시스템 구축

KT BIT 프로젝트 (차세대 시스템 )

해운 종합정보시스템

내부업무시스템 구축

RFID기반 음식물쓰레기 관리시스템

e-planning 프로젝트

카드마감시스템

테블릿 영업지원 시스템 2차 구축

글로벌통합물류무역 3단계 구축

인터넷뱅킹 (오픈뱅킹) 리뉴얼

장기배전설비계획 시스템

영진대 차세대 시스템

IFRS 시스템 구축

하이브리드 앱 구축

사이버창구 구축

기간계 시스템 구축

Outbound Mobile Service

웹표준 RIA 인프라 구축

중소기업 보증공제 시스템 구축

舊한국산재의료원 통합 정보시스템

구축

국가 온실가스 종합 관리 시스템 고도화

자동차보험 과오납 보험료 환급조회 통합시스템 구축

적용 사례

웹표준 기술 기반의 RIA 플랫폼 선도 기업 “ ”

대표자 어 세 룡

설립년도 2002년 4월 16일

홈페이지 www.inswave.com

(정직원 기준)

기술지원 (19명)

SM/SI (25명)

영업 (4명)

연구소 인력 (20명)

기타 지원 (7명)

주 소

본사 서울시 구로구 구로3동 182-13 대륭포스트타워 2차 414호

데이터 센터 서울시 강남구 역삼동 708-6 LG화재 강남빌딩 2층

직원수 75명 (정직원 기준)

연락처 Tel. 02-2082-1400 (대표전화) Fax. 02-2082-1410

Direct* Insurer (보험 기간계 Package)

Direct* Plus (컨택센터 시스템 Package)

방카슈랑스/보험중개사 패키지 등

Business Package

소프트웨어 개발/판매

WebSquare (웹표준 기반 RIA 플랫폼)

ProWorks (차세대 ALM기반 통합 프레임워크)

시스템 통합 프로젝트 수행

IT Outsourcing, 데이터 센터 운영 및 시스템 관리

웹 기반 시스템 구축을 위한 공통 Application 시스템 개발 및 유지보수 운영

시스템 통합(SI) 시스템 관리(SM)

감사합니다.

서울특별시 구로구 구로3동 182-13 대륭포스트타워2차 414호

TEL: (02) 2082-1400 FAX: (02) 2082-1410