HTML5 적용과 IE 11 웹호환성

Transcription

1 HTML5 적용과브라우저 - 웹환경변화에대한기업의대응방법 이완근

2 목차 1. HTML5 등장및현황 2. 최신브라우저기술트랜드 3. IE 11 호환성변경사항 4. HTML5 웹표준적용 5. CSS 퍼블리싱 6. 주요 SW 대응현황 7. 브라우저표준전환전략

3 주요기사 웹환경의빠른변화 HTML5 기반 RIA 솔루션 Nexacro 출시 HTML5 표준제정공표 HTML5 Canvas 기반 exbuilder 5 출시 출시 Windows 10의최신브라우저 Edge 크롬브라우저 NPAPI 지원중단 Silverlight, FLEX 지원중단

4 HTML5 웹기술과 Internet Explorer 의변화 HTML5 와 IE 11 을이해하고기존시스템대응과신규개발전략모색 HTML5 기술현황 기술변화 신규시스템개발표준 향후방향 IE 11 변경사항 환경변화 기존시스템대응전략 문제해결

5 1. HTML5 등장및현황

6 차세대웹표준 HTML 5 확정 W3C 공식권고안 (W3C Recommandation) 지정으로재부각됨 ( ) 표준지정이전에이미주요브라우저에서사용가능 ( 현장적용가능 ) W3C 는 'write-once, run-anywhere' 라는개념으로미래오픈웹플랫폼의초석이될것으로기대 (One Source Multi Use) 별도플러그인없이도다양한어플리케이션을웹에서구현가능 지속적표준기능추가예정 ( 표준확정이기능 Fix를의미하진않음 )

7 웹환경의변화 Cross Browsing 해결과 Multi Device 지원서비스플랫폼의필요 차세대웹표준 HTML5 HTML5 장점 기존웹기술의보완 고질적인호환성이슈해결 RIA SW 대체 UI 제공 만능서비스플랫폼 OSMU 서비스플랫폼제공 Application 기능제공 Cross Browsing 미려한 UI Cloud 컨텐츠 IoT 서비스

8 Device 환경과개발환경의변화 컨텐츠제공과 Device 연결을위한표준플랫폼필요 1) Mobile - ios 와다양한버전의 Android 플랫폼 - 다양한화면 Size 2) Cloud - 다양한컨텐츠 Viewer 연동 ( 다양한프로토콜과코덱 ) 3) IOT/IOE - 비표준의다양한 Device/OS SSPL IOT, IOE Cloud Contents 스마트카등이미산업계전반에적용중

9 HTML5 의현실과이슈 For HTML5 mobile applications, please rank your satisfaction Web 은 Multi OS 지원과즉시배포만장점으로고려됨 Neutral to Dissatisfied Satisfied 1. Monetization (83.4%) 2. Security (81.8%) 3. Fragmentation (75.4%) 4. Performance (72.4%) 5. Timeliness of new updates (67.9%) 6. User experience (62%) 7. Distribution control (60.3%) 1. Cross-development capabilities (83.4%) 2. Immediate updates (81.8%) IDC-08/2012

10 차세대플랫폼이되기위한노력 HTML5는웹개발언어가아닌산업계표준플랫폼이되기위하여표준스펙, 기능, 성능, 개발도구측면에서대대적인혁신이반영 : HTML5는웹이가진기술적한계에대한모든해답은아니지만현실적인대안으로써의미있는기술적진화를보여주고있음 Web 의단점 HTML5 대응 (Web 단점극복 ) 1. Cross Browsing 취약 2. 기능부족 - Application 기능미지원 3. 느린성능 1. 강력한표준스펙정의 2. 다양한 API 제공 - 별도개발 X 3. 고성능엔진개발 - 화면렌더링엔진 (HTML 태그를화면에그림 ) - 고성능 JavaScript 엔진 ( 이벤트및로직계산 ) 4. 개발난이도高 4. 강력한개발자도구기본제공 - Debug 취약

11 History of Web Standard (W3C) HTML5 의경우 W3C 에의하여 Draft Recommend Recommend of HTML5 발표됨 CSS1 JavaScript CSS2 AJAX 버전 X HTML HTML2 HTML4 XHTML1 HTML5 버전단위가아닌기능단위로 Upgrade 되며계속기능추가진행중 W3C 에서표준화한기능스펙을브라우저제작사에서구현 - HTML5 & CSS3 지원여부확인 : 시사점 HTML5 언어의지속적인개선기대 단계적계획하에점진적인도입전략필요

12 웹플랫폼구조와브라우저엔진 2 Web Browser HTML5 ( 일반 ) 4 1 표준강화로 Cross Brousing 2 다양한기능추가 3 성능개선 4 개발자도구로개발생산성향상 HTML5 CSS3 Java Script 1 Rendering Engine 3 JS Engine 브라우저랜더링엔진자바스크립트엔진 익스플로러 Trident jscript(9은챠크라 ) 파이어폭스 Gecko tracemonkey 크롬 Webkit V8 사파리 Webkit SquirrelFish 오페라 Presto futhark

13 HTML5 시장현황 HTML5 의표준화및확대는 Multi Device 에 Contents 를서비스하기 위한 Platform 으로브라우저제작사가아닌 Contents 업체가주도 웹기반정보유통단일화로검색시장확장 웹 OS 주도권방어 웹기반컨텐츠판매시장통합 컨텐츠판매플랫폼확대

14 엔터프라이즈웹사용환경 대부분기업은 IE 브라우저종속적상황으로 HTML5 적용이미흡 HTML5 표준지연 HTML5 기반 SW 및개발도구부족 HTML5 적용미흡배경 HTML5 개발자부족 기업 HTML5 수요부족으로 HTML5 전문인력육성미흡 브라우저하위호환성제공 브라우저들의하위호환기능제공으로호환성이슈감소 생태계미성숙 HTML5 기반의개발도구및 Software 부족 전사모든시스템 HTML5 일괄전환불가

15 고려사항 웹브라우저표준변경시고려사항 Internet Explorer 브라우저다중버전동시설치불가 ( 일괄전환 ) HTML5, Windows10 : 버전개념이없어짐 ( 기능단위 Online Upgrade만존재 ) IE 11 : 하위호환을위해남겨진 Internet Explorer의마지막버전 (Win 10 Edge) IE 10까지의브라우저지원중단및 Windows10에서설치불가 ActiveX SW 대체기술부족 ( 보안정책반영 ) HTML5 기반 SW 성숙도부족 ( 표준솔루션도입곤란 ) HTML5 숙련개발자부족 기존시스템 IE 11 적용 신규시스템 HTML5 적용

16 2. 최신브라우저기술트랜드

17 Web Browser Trend 웹어플리케이션에대한중장기방향성정의가요구됨 [ 고민해야할것 ] [ 다양한브라우저경쟁 ] 기존 IE 중심의웹브라우징환경에서크롬등다양한브라우저시장확대 기존개발형태인사내에서허용하는웹브라우저렌더링엔진특성에맞춰각각개발할것인가? 크로스브라우징기술을사용할것인가? [ 다양한디바이스출시 ] 다양한해상도의다양한브라우저환경출시 성능 VS 표준화 사내표준에정의한모바일환경에최적화된모바일웹개발? (MEAP 기반 ) 반응형웹브라우저기술을사용한다양한표준지원할것인가?

18 Market Perception 사용자선입관혹은이슈중 브라우저속도 측면과 Old Version IE 사용에따른사용자경험측면 이슈가가장부각됨 오페라파이어폭스크롬사파리 블랙베리와함께모 넷스케이프파이어 속도!! 애플표준브라우저 바일타겟 폭스로 Linux 타겟 MS 는 Windows 10 Edge 브라우저로반격예정 기업형환경에서 IE 의기득권유지고려

19 History of Internet Explorer Windows OS 의하부기능으로써, 제품에대한관리형태를가져감. IE 11 의경우성능및웹표준에주안점을두어개발됨 Windows 7 Windows Vista IE 6 IE 7 IE 8 IE 9 IE 10 IE 11 EDGE Windows 8 Windows 8.1 Windows XP EOS Windows 10 Windows 10 에서는 Edge 브라우저가 기본브라우저이며 IE 11 만지원함

20 브라우저 Upgrade 방식 최신브라우저는자동 Upgrade 방식을통하여기존브라우저퇴출 을유도하고있으며, 하위호환성을제공하여사용자불편을최소화함 브라우저구분 Upgrade 방식하위호환성대응 Internet Explorer 사용자수동선택 브라우저별변화많음 (IE6, IE7, IE8, IE10, IE11) 호환성보기, 쿼크모드, EMIE 타브라우저 자동 Upgrade 일관성으로이슈적음 하위호환모드 시사점 HTML5 를기점으로하위브라우저지원중단시도 (ex. NPAPI 지원중단등 )

21 기존웹개발방식단절 웹표준의등장으로최신브라우저는 ActiveX와 Plugin (NPAPI) 의지원중단을선언함 IE 11의기본모드에서는 ActiveX 미지원 ( 現, 하위호환모드로구동되고있음 ) IE 11 및 Chrome 브라우저의기본모드에서는 NPAPI 미지원 ( 現, 하위호환모드로지원 ) : Chrome NPAPI 지원중단기사 Windows 10 기본브라우저 Edge에서 NPAPI 지원중단 ( 출시예정 ) NPAPI 지원중단으로 ActiveX 뿐만아니라 Plugin 기반 Software 도전환고려대상이됨

22 멀티 OS 지원기술 운영체제및브라우저개발사는상호지원방식에따라고유의확장방식을제공함 이러한브라우저개발사의확장기술은보안취약점및이용자서비스선택권을제약하는한계로인해최근에는브라우저개발사의통제 ( 승인 ) 를거쳐안전성이보장된권고기술로개발, 배포하는방향으로정책으로유도하고있다. (Sandbox 보안모델을준수하는확장기술이나 HTML5 기반의웹앱기술을권고 ) -> Acrobat Reader 브라우저별확장기술요약 구분기반기술플러그인기술웹앱기술 Internet Explorer (MS) ActiveX Silverlight, Java 애플릿, Flash Player 커스텀 URI Scheme 연동 (Protocol Handler 레지스터등록 ) HTML5 WinJS Chrome ( 구글 ) NPAPI ( 폐기예정 ) Native Client Java 애플릿, Flash Player, Native Messaging 커스텀 URI Scheme 연동 (Protocol Handler 레지스터등록 ) Legacy Browser Support HTML5 Chrome App Firefox ( 모질라 ) NPAPI ( 폐기예정 ) Native Client Java 애플릿, Flash Player 커스텀 URI Scheme 연동 (Protocol Handler 레지스터등록 ) HTML5(Web GL, WebSocke ts,webrtc) asm.js

23 Chrome 브라우저 HTML5 선두주자구글의브라우저 간단하고효율적인사용자인터페이스를제공하며현존하는다른웹브라우저들에비해나은안정성과속도, 그리고보안성을갖는것을목표하고있다 크롬이란뜻은원래그래픽사용자인터페이스에서창틀을가리키는데, 여기서는브라우저틀영역을가리키며, 이영역을최소화시키자는목표로크롬이라고이름을지었다고한다 스탯카운터통계기준으로 2012년 5월부터인터넷익스플로러를제치고현재전세계에서가장많이쓰이는웹브라우저이다 HTML5 기능을가장많이지원 버전 27 까지웹키트레이아웃엔진이용, 버전 28 이후웹키트의포크인블링크를사용

24 Internet Explorer 11 개요 Internet Explorer 의마지막버전 IE는기업고객을타겟으로 OS 연동기반의다양한서비스제공하였고, 하위호환성유지를위해서점점무거워짐 2013년 7월 25일개발자버전공개 2013년 10월 17일 Windows 8.1과함께출시 (Windows 7용은 2013년 11월 8일정식버전출시 ) 윈도우 7 서비스팩 1부터지원, 윈도우 8.1의기본브라우저 CSS3는거의지원, HTML5는아직미흡 User Agent 등여러부분에서호환성변경 엔터프라이즈모드제공 (EMIE)

25 Windows 10 기본브라우저 Microsoft Edge Web 시장주도권탈환을위한 MS 의반격 2015년 1월 21일 Windows 10 프리뷰행사에서공개 - Windows 10 에 IE 11과스파트탄을동시에탑재할계획 - IE 11는기존의웹사이트를, 스파르탄은모던웹앱을지원 코드명스파르탄 HTML5 전용브라우저 최신고성능렌더링엔진탑재 - 엣지 (Edge), IE의 Trident 엔진보다고성능 윈도우앱스토어를통해배포예정 (2015년 9월. Windows 10 출시예정 ) MS가 IE라는브랜드를사용하지않는것은사용자들에게형성되고있는부정적인이미지때문 매우간소화된인터페이스 ( 크롬과거의유사 ) 빠른캡처기능 다양한탭기능 ( 개인, 업무, 비밀탭등 ) 향상된읽기모드 ( 광고를포함해웹페이지의불필요한요소를정리 ) 읽기목록기능으로기사를저장했다가나중에오프라인사용가능

26 3. IE 11 호환성변경사항

27 IE 11 기준기존시스템호환성확보 웹표준준수로 IE11 의호환성측면에서변경된사항대응법 웹브라우저특히 Internet Explorer와그버전에따라다르게동작하는페이지들은 User Agent String의변화로인해서오동작할수있습니다. 향상된보호모드로인해서 ActiveX 컨트롤, BHO, 툴바등이영향을받습니다. 호환성도구 IE 11 에서제공하는하위버전호환성도구를사용하여기존시스템의호환성을확보한다. 기존시스템호환성확보 최소비용으로호환성확보 - 전면재개발지양 - 오동작원인수정권장 호환성보기 EMIE 소스수정 UA String, 향상된보호모드변경으로인한오동작을소스코드를수정하여대응한다. IE 11 변경 API 수정 SW 패치

28 IE 11 호환성변경항목 IE11 호환성변경항목 Internet Explorer 11 에서는웹표준, 다른브라우저, 실제웹사이트와의호환성을위해일부기능이변경됨 User Agent 문자열변경 브라우저버전확인에사용되는리턴값이변경되어, ActiveX 설치오류등의문제를야기함. 문서모드변경 IE11 부터는 Edge 모드가기본문서모드입니다. 이모드는브라우저에서사용할수있는최신표준에대한최고의지원을나타냅니다. 레거시 API 추가 / 변경 / 제거 화면 Windows, Document 객체에서제공하는 API 및각종함수들이변경되었습니다. URL 문자인코딩 쿼리문자열과 XHR 요청이 UTF-8 문자인코딩을사용하게되어, 다른브라우저의동작과일치하고브라우저간 XHR 코드를간소화합니다.

29 User Agent String(UA String) 변경 웹표준에맞춰제작된웹문서들이브라우저종속성을두지않기위해 UA String 의리턴값이변경됨 호환가능 ("compatible") 및브라우저 ("MSIE") 토큰이제거되었습니다. "like Gecko" 토큰이추가되었습니다 ( 다른브라우저와의일관성을위해 ). 이제브라우저버전이새수정 ("rv") 토큰에의해보고됩니다. IE 11 에서는 MSIE 라는브라우저명칭은사용하지않으므로서향후 IE 에따라서혹은버전에따른변경되는기능은사용하지않겠다는의지의표현 Windows 8.1 Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko Windows 7 Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko

30 User Agent String 사용대체방법 기존 Cross Browsing 처리를위해서사용하던브라우저및버전체 크로직을기능단위지원여부로변경 [ 브라우저체크분기문 ] [ 기능체크분기문 ] var IS_IE = navigator.useragent.indexof( MSIE ) > -1; var IS_FF = navigator.useragent.indexof( Firefox ) > -1; var IS_OP = navigator.useragent.indexof( Opera ) > -1; var IS_SF = navigator.useragent.indexof( Apple ) > -1; var IS_CH = navigator.useragent.indexof( Chrome ) > -1; function getinternetexplorerversion() { var rv = -1; if(navigator.appname == Microsoft Internet Explorer ) { var ua = navigator.useragent; var re = new RegExp( MSIE ([0-9]{1,}[\.0-9]{0,}) ); if(re.exec(ua)!= null) { rv = parsefloat(regexp.$1); } } } function registerevent( stargetid, seventname, fnhandler ) { var otarget = document.getelementbyid( stargetid ); if ( otarget!= null ) { if ( otarget.addeventlistener ) { otarget.addeventlistener( seventname, fntoberun, false ); } else { var sonevent = "on" + seventname; if ( otarget.attachevent ) { otarget.attachevent( sonevent, fnhandler ); } } } } 이예제는이벤트명을호출하여기능이사용가능 한지여부만확인합니다. ( 브라우저버전무관 )

31 User Agent String 사용호환성예제 XPlatform 은기능단위가아니므로브라우저체크적용 => Active X 설치에사용 <script language= javascript > function fn_onload() { if (navigator.useragent.indexof( MSIE ) > -1 navigator.useragent.indexof( Trident )!= -1) { window.location.href =./Install/x_installAX.html ; } else { window.location.href =./Install/x_installPlugin.html ; } } </script> IE 11 을위한 XPLATFORM 분기처리 : index.html 의 browser 체크구문 Internet Explorer 를체크하는조건에서 User Agent String 반환값에대해 MSIE' 대신 'Trident' 문자열을사용하는것을마이크로소프트에서권장함 => Windows 10 에서는 Edge 엔진을사용하며 Active X 사용불가

32 브라우저모드 DOCTYPE meta 요소의 content 값으로 IE=EmulateIE7 을입력하면 IE8 이 IE7 처럼작동하게되어호환성을유지할수있음 - IE 만을고려한코드 - 이코드가있으면 HTML 유효성검사를통과할수없음 IE 7 로렌더링해라. <meta http-equiv= X-UA-Compatible content= IE=EmulateIE7 /> IE8 이상웹브라우저엔진의렌더링모드를 IE7 로변경하여호환성을유지하는설정입니다. <meta http-equiv= X-UA-Compatible content= IE=edge, chrome=1 /> IE=edge : 설치된 IE 중현재브라우저가표현할수있는가장최신버전을렌더링에사용호환성보기아이콘이생기지않는다. chrome=1 : 크롬프레임 (ActiveX) 사용 (IE 에서만작동 ). 크롬이설치되어있다면 IE 에서도크롬렌더링을사용한다. IE11부터는 Edge 모드가기본문서모드입니다. IE11부터는문서모드가사용되지않으며일시적인경우를제외하고더이상사용하면안됩니다. 최신표준을반영하도록레거시기능및문서모드를사용하는사이트를업데이트해야합니다.

33 브라우저모드 DOCTYPE - Quirks Mode DTD 가없는페이지는 IE 8 이상에서 Quirks Mode 로렌더링 (DTD 를표준에따라인식하지못했던과거의 IE 5 브라우저의렌더링을흉내내는모드 ) DOCTYPE 태그가없을경우 DOCTYPE 태그가있을경우

34 URL 문자인코딩 IE11 에서는 URL 에대한문자인코딩을변경함. 특히, 이제쿼리문자 열과 XHR 요청이 UTF-8 문자인코딩을사용하여인코딩됨. 이변경내용은다음을제외하고모든 URL 에영향을줌. 앵커이름구성요소 ( 조각이라고도함 ) 사용자이름및암호구성요소 file:// 또는 ftp:// 프로토콜링크 이러한변경내용은다른브라우저의동작과일치하고브라우저간 XHR 코드를간소화합니다. 브라우저 WEB/WAS 서버 DBMS UTF-8 UTF-8 UTF-8 UTF-8 XHR (XML HttpRequest) : 브라우저와서버사이에서 HTTP 요청과전송및응답을서버측에서제어가능

35 향상된보호모드 (Enhanced Protected Mode) Internet Explorer 11에서향상된보호모드를기본값으로설정함에따라서 ActiveX 컨트롤들은실행에제약을받음. [ 추가기능실행 (R)] 버튼을누르면ActiveX 컨트롤을실행할수있으며해당웹사이트에서는더이상동일한내용을묻지않습니다. 사용자가선택적해제가능 향상된보호모드는각종스파이웨어나애드온이나악성코드가사용자의의지와상관없이설치가되는것을방지하는기능 Windows 7 용 IE 11 에서는향상된보호모드가적용되지않음

36 Legacy API 변경 웹표준준수와성능향상을위해서기존지원하던 API 를지원하지않거나, 새로운 API 를추가하여, 이를사용한소스수정이필요 기존 API IE 11 대응설명 Event attachevent addeventlistener 특정객체에이벤트부여 Window Document execscript eval 다른언어로개발된스크립트실행 doscroll scrollleft, ~Top Scroll Bar 사용제어 all 참조사이트 : getelementbyid 화면상모든객체를포함하는배열값 ( 개별객체단위로선택되도록변경 ) createstylesheet createelement( style ) 객체를 Style Sheet 에연결 filesize XMLHttpRequest 객체크기리턴 Script readystate onload 이벤트셋팅 Style stylesheet sheet 객체속성에 Style Sheet 를저장 이진실행 C++ 개발 Canvas, SVG, CSS3 C++ 이나컴파일된요소실행 기타 W3C 는이러한표준 API 변경이재발되는것을막기위해, HTML5 표준수립시엄격하고폭넓은스펙을제공함

37 JavaScript 호환성변경 IE 11 에서일부 JavaScript 함수리턴값이변경되어소스수정필요 구분 배열인덱스처리 JavaScript 속성열거 호출된간접 eval 함수가이제전역범위로지정됨 내용 배열길이속성의초기값이 2E+31-1( 즉, ) 보다큰경우 Windows Internet Explorer 8 은 ECMAScript( 제 3 에디션 ) 사양을따르지않습니다. Internet Explorer 9 은 2E+31-1 과 2E+32-2 사이의인덱스를사용하는배열요소를올바르게처리합니다. 어떤문서모드에서든 for in 문을사용할경우속성열거순서가 Windows Internet Explorer 8 에서반환되는순서와다를수있습니다. 예를들어이제숫자속성이숫자가아닌속성보다먼저열거됩니다. eval 함수는 IE5( 쿼크 ) 모드, IE7 표준모드및 IE8 표준모드에서는예상대로작동하지만, IE9 모드에서는 " 정의되지않음 " 을반환합니다. 수학정밀도및 SSE2 차이점 IE 9 에포함된 JavaScript 엔진인 Chakra 는 SSE2 를사용합니다. 이경우연산속도는빨라지지만 IE 8 의 Microsoft JScript 엔진과정밀도가차이납니다. Math.sin( ) - IE8 의모든모드 : e-16 - 플랫폼이 SSE2 를지원하는 IE 9 의모든모드 : e-16 SSE2 : Streaming SIMD Extensions 2

38 EMIE 모드 (Enterprise Mode) Internet Explorer 11 엔터프라이즈모드로최신상태유지 기업의기존시스템호환성대응을위해, EMIE 는 IE11 에서 IE8 엔진으로에뮬레이션하면 서성능, 보안및 IE 8 바이너리실행과관련된여러문제들을방지함 IE 8 과 IE 11 간호환기능통합 ~IE 8 : 호환성보기 ( 개인 ) ~IE 11 : EMIE ( 기업 ) 값 사용자에이전트문자열의차이 설명 브라우저버전검색기능에대응하여 IE8 사용자에이전트문자열을복제하여제공 ActiveX 컨트롤및기타바이너리일부 ActiveX 컨트롤은브라우저버전을쿼리하고예상하지않은응답을받은경우백그라운드에서실행되지않기때문에엔터프라이즈모드는 IE8 의응답을모방하여이러한현상을완화 제외된기능 사전캐싱및사전렌더링 CSS Expression( 개체동적배치 ) 과같은 IE11 에서제외된 IE8 고유기능몇가지를그대로유지 IE11 에추가된사전캐싱및사전렌더링기능해제 EMIE(Enterprise Mode Internet Explorer) : IE 11 상에서지정사이트에대해 IE 8 엔진으로구동지원

39 AD 서버관리환경에서 EMIE 설정 AD 환경에서 EMIE 정책을배포하면, 정책을내려받는클라이언트 PC(Windows 7 + IE11) 에서는 EMIE 설정이자동적용됨. 1. 사이트주소등록 2. EMIE 작동 1. AD 서버에접속 서버관리자 도구 그룹정책관리 2. Tested.lab Default Domain Policy 편집을클릭 3. 그룹정책관리편집기컴퓨터구성 정책 관리템플릿 4. 템플릿을추가 5. 다운로드받은정책파일에서 KB 폴더에서 inetres.adm 파일을선택후열기 6. inetres 항목이추가된것을확인후닫기 7. 그룹정책관리편집기를닫은후다시실행 8. 컴퓨터구성 정책 관리템플릿 Windows 구성요소 Internet Explorer 로이동 9. 엔터프라이즈모드 IE 웹사이트목록사용을더블클릭 10. 엔터프라이즈모드 IE 웹사이트목록사용을사용으로선택 11. 해당위치에 Sites.xml 파일의위치를입력 12. 테스트 3. 사이트주소연결

40 5. 호환성보기 Internet Explorer 업그레이드로인하여아래와같은오류를경험 - 특정웹페이지와익스플로러와의호환성이문제가되는경우임. 호환성깨짐현상 이전에정상적으로접속했던페이지접속불가 이미지혹은페이지전체가깨져서나오는현상 특정페이지의편집기능오류현상 Active X 설치를계속묻는현상 매번호환성보기설정을하는것이귀찮은경우에는 IE11 호환성보기강제설정 을하 시면항상 IE9 환경으로실행이됩니다. ( 사이트의보안설정에따라정상적으로동작하 지않는경우도있습니다.)

41 향상된보호모드 향상된보호모드환경에서는툴바나 BHO 등이실행되지않음 1) ActiveX 컨트롤이설치되지않는다면, 개발자도구에서 [Emulation] 영역에서 User Agent String 을 [Internet Explorer 10] 이나그이하버전으로바꿔서설치해보고, 설치되지않으면 ActiveX 컨트롤내의코드가호환되지않는경우이므로해 당웹사이트또는 ActiveX 컨트롤제작업체에문의 2) ActiveX 컨트롤이설치는되었지만향상된보호모드로인하여실행되지않는다면, [ 추가기능실행 ] 버튼을클릭하여동작하면, ActiveX 컨트롤이향상된보호모드를인식하여실행되 도록수정합니다. 동작하지않는다면, 제작업체에문의 3) ActiveX 컨트롤실행도중에 IE 가비정상종료 (Crash) 되는경우, ActiveX 컨트롤내의코드가호환되지않는경우이므로제작업체에문의 BHO (Browser Helper Object) : IE 기능을외부플러그인을이용해확장할수있게설계된기술 ( 네이버, 야후툴바등 )

42 개발자도구활용가이드 개발자도구에서 [ 에뮬레이션 ] 영역에서 User Agent String 을 [Internet Explorer 10] 이나그이하버전으로바꿔서 Test 시도 테스트가능한옵션제공

43 테스트수행절차 IE11 설치및실행 ActiveX 컨트롤설치및실행확인 URL 입력후페이지이동 ActiveX Layout Event 렌더링이정상적으로동작하는지확인 버튼클릭등의기능확인 잘안됨 User Agent String 바꿈 잘안됨 User Agent String 바꿈 잘안됨 User Agent String 바꿈 ActiveX 컨트롤설치및실행다시확인 설치, 실행잘됨 렌더링이잘되는지다시확인 렌더링잘됨 버튼클릭등의기능이잘되는지다시확인 EPM( 향상된보호모드 ) 에맞도록수정 웹표준에맞게수정또는버전인식문제수정 웹표준에맞게수정또는버전인식문제수정 테스트종료

44 4. HTML5 웹표준적용 - 신규시스템개발시 HTML5 개발표준적용 -

45 웹표준, 웹접근성, 웹호환성 규격 ( 문법 ) 대로쓰고 ( 웹표준 ) 웹접근성과웹호환성과관련된부가적인부분을다듬는다. - 똑같은화면에집착해서시간을소비하거나표준을벗어나는일이없도록주의. 브라우저가다르게표현하는데구태여그것을다맞출필요는없음. 중요한건정보. 누구나, 어떤환경에서나 웹호환성 웹표준 웹접근성 ( 법규 ) 구분 웹표준웹접근성웹호환성 정의 (X)HTML 등에대해 W3C 가정해놓은규격 ( 문법 ), 또는이를준수하는것을의미 원하는정보에접근하고제어가가능한구현하는부분에초점 ( 대체텍스트의올바른사용, 색만이아닌패턴과동시사용등고려필요, 장애인차별금지법 ) 어떤브라우저에서보더라도같은정보를제공 (Cross Browsing 처리 : 브라우저의표현, 해석방식이제각각. 핵, 필터등부가조치필요 )

46 웹표준준수지침 IE 11 표준선정시시스템개발및운영의대원칙 1. 웹표준을기준으로개발하되, 범용적이지않은기능은 Cross Browsing 처리를한다. 2. 웹표준에서대응지침이없는기능은기존방식을유지해도되나, 최신트랜드를반영할수있다면반영함이원칙이다. 대상기업권장정책비고 HTML5 HTML5 태그스펙준수 Media Tag 권장 Canvas, SVG 권장 Device 제어지양 Offline Storage 금지 HTML5 스펙으로개발시 IE8에서미지원기능이발생하므로 HTML5shiv 같은 Library를이용하여임시대응가능 보안정책에위반이되는기능사용금지 (Offline Storage 등 ) HTML5 제공 Graphics 사용권장 CSS3 RIA 플랫폼 단계적향상기법 CSS2.1 준수 Media Query 허용 JavaScript 기반권장 최신버전 RIA 허용 CSS3.0의성숙도를고려하여 CSS2.1 기반으로개발하는것을권장하며, 동일환경에서일부 CSS3.0 기능사용가능 JavaScript 기반개발을권장하나, 생산성이나기술성숙도문제시상용 RIA 솔루션사용권장 (C/S 아키텍처 ) 적용 SW JavaScript 기반권장 Plugin 허용 Active X 금지 웹에서일부기능영역을제외하고는 JavaScript 기반의 SW 가이미출시되어있어서최신의 JavaScript 기반 SW 권장

47 웹표준 관심사의분리 웹페이지개발은 W3C 에서규정한웹표준을따라웹문서의구조 와표현그리고동작을구분해서사용해야함 일반적으로말하는 HTML5 무슨의미인가? 어떻게보이는가? 어떤동작을하는가? HTML5 데이터내용전달문서의구조표현 문서구조의상세화 멀티미디어 폼과이벤트등 CSS3 웹브라우저에서비주얼표현 기능의모듈화 웹폰트 JavaScript 각종 API 를통해기능을표현 웹스토리지 웹워커스 웹소켓 문서구조의의미를명확히하여디자인과프로그램의독립성을확보 서로다른다양한웹브라우저상에공통적인느낌을구현 ( 글꼴, 크기, 색상, 이벤트등 ) 풍부한기능과표현등을활용한로컬애플리케이션 웹표준문서 상호관계 동작이나표현이없더라도사용할수있어야한다. 표현은.css 파일로, 동작은.js 파일로분리한다. 마우스가없어도, 키보드만으로도사용되어져야한다.

48 HTML5 적용 모든브라우저가 HTML5 스펙에정의된모든기능을지원하고있지 는않으므로현재아래기능범위안에서 HTML5 활용을권고함 Reporting CSS2.1 구글맵 Cross Browsing 고려필요 각브라우저별 HTML5 및 CSS3 지원상태정보사이트 :

49 HTML5 적용 HTML5 기본템플릿 - 간단해진독타입 : html 의진화의과정일뿐이므로굳이숫자로버전을표시하지않음 <!doctype html> - html 요소 <html lang= ko > </html> - head 요소 : 문자인코딩선언은문서에서처음의 512 자이내에지정해야함 <meta charset= utf-8 > - 브라우저선택적적용 (IE 브라우저만해당 ) : 조건부주석 (IE 10 까지기능 ) <!--[if lt IE 9]> <script src= <![endif]--> - No More Type : 불필요한구문제거 <link rel= stylesheet href= main.css type= text/css > <script src= script.js type= text/javascript > - 대등한상황으로만들기 : John resig 이개발한 HTML5 를 IE 에서도인식하게만드는 HTML5Shiv.js 를사용하여 IE9 이전버전에서적용하도록설정. 레미샤프 Modernizr

50 HTML5 적용개요 HTML5 에서이용해볼만한몇가지가이드라인 - 엄격한 xhtml의방법을따를필요는없지만, 일관되고단순한코딩스타일을고수. XHTML에서처럼모든요소와속성에서소문자를사용.. 콘텐츠가없는빈요소는 <meta img input...> 닫는태그와뒤에붙는사선을생략한다. <img>. 콘텐츠를포함하는모든요소는닫는태크를써준다. <p></p>. 속성값에는다중클래스나링크값등이포함될수있으므로일관되게따옴표를써준다. - 논리속성에대해중복값을제공하지않는다.. <input type= check checked= checked > 보다는 <input type= check checked> 로표기

51 절제된스크립트처리 (unobtrusive scripting) 자바스크립트와 DOM을완벽히지원하지않는브라우저에서도웹사이트나웹애플리케이션이제대로동작하도록신중히 DOM 스크립트를작성한다는뜻 ( 많은기능을지원하는브라우저를사용할경우좀더나은사용자경험을제공하고, 많은기능을지원하지않는브라우저를사용해도사이트의기본적인정보제공에는문제가없도록한다는것 ) 자바스크립트사용최소화 (CSS 와 HTML 로대체 ) 마우스오버이벤트처리 (CSS 만으로구현가능 ) 얼룩말줄무늬테이블 ( 짝수행과홀수행의배경색을따로지정, CSS3 구조선택자사용 ) 페이지의마크업및디자인영역과기능영역분리하기 이벤트리스너를활용하여마크업문서와기능을담당하는코드 (DOM 스크립팅 ) 를분리

52 JavaScript Library 선택하기 Brian Reindel이자바스크립트라이브러리선택기준을발표 - 사용하고자하는라이브러리가주요브라우저전부를지원하는가? (Cross Browsing) - 라이브러리와관련된핵심개발팀이있는가? - 사용하려는라이브러리가충분히검증되었는가? ( 성숙도 ) - 공식적인업데이트가얼마나자주진행되는가? - 문서화가어느정도진행되었는가? - 활성화된커뮤니티가있는가? - 정기적으로벤치마크테스트가이루어지고있는가? - 사용자가직접확장가능한라이브러리인가? ( 난이도 ) - API 스타일이마음에드는가? ( 선호도 )

53 개발을쉽게도와주는 JS Framework 유티리티모듈 프레임워크 빌드도구 백엔드 테스트 파생언어 데이터베이스 underscore RequireJS 범용 MVC Full Stack GruntJS gulp.js Node.js socket.io Mocha QUnit CoffeeScript Dart Redis MongoDB Sizzle jquery AngularJS Meteor Broccoli express Karma TypeScript CouchDB Async YUI Backbone.js bsjs node-mysql Jasmine Jade OrientDB ZeptoJS Ext JS UPPERCASE node-oracle PhantomJS DBSlayer Dojo Toolkit CoreChain KnockOut Ember.js 패키지매니저 그래픽 connect Yeoman CasperJS Kendo UI TipJS npm.js bower D3.js three.js 참고 : Enyo processing.js Bootstrap No Data Binding No templating Routing via History API Basic persistence Data Binding Keep View in sync with Model Built-in templating Built-in view helpers Form handling Full Stack Framework End-to-end persistence Backbone Can JS Ember JS Meteor Spine JS Batman JS Angular JS

54 웹호환성 - CrossBrowsing 웹호환성은모든브라우저에서동일하게보이는것을의미 웹표준준수 표준 (X)HTML 문법준수 표준 CSS 문법준수 표준 DOM, Script 등문법준수 브라우저내장프로그램호환성 웹호환성준수지침 크로스브라우징 모든브라우저에서동일한서비스제공 기존시스템의 IE 하위버전브라우저호환성제공 웹호환성의확보 웹표준을준수하여특정브라우저에대한종속성을탈피하고, 최신웹기술사용을가능하게한다. 단, 정보외의브라우저개성이반영된사소한부분까지동일할필요는없다.

55 웹호환성파괴현상 Layout 파괴클릭무반응로그인불가 페이지레이아웃이흐트러지거나특정부분이표시되지않음 웹사이트안의단추를눌러도반응하지않음 로그인을해도로그인을하지않은상태로되돌아감 이밖에도작성된비표준코드에따라사용자가미처예상할수없는황당한현상이나타날수있다. 문제가되는 웹호환성파괴현상

56 5. CSS 퍼블리싱 - HTML5 기반웹퍼블리싱

57 CSS3 적용원칙 디자인을구현할때, 반드시동일한화면일필요는없이브라우저별특징 ( 초기값, 제약사항 ) 을반영할수있으면서내용의전달과기능사용이적절하게유지될수만있으면괜찮음. 단계적향상 등의원칙을적용하여개발하면생산성이향상됨 CSS 단계적기능향상 (Progressive Enhancement) 모든사용자에게반드시제공할정보와기능은기본으로모두제공하고좋은성능을가진브라우져를사용하는사용자에게는좀더멋진화면과추가적인기능을제공최근기기가다양해지면서현실적으로구버전브라우저도똑같은화면을제공하는것은비효율적위키북 : JavaScript 적절한기능축소 (Graceful Degradation) 어떤브라우저가어떤기능을지원하지않을때그러한기능결여가사용자에게최대한영향을미치지않아야한다는개념자바스크립트가동작하지않는브라우저에서도최소한콘텐츠가보이고동작하도록만드는것자바스크립트를정확하게사용하면, 해당기능이없는브라우저사용자들도동일하게서비스를이용할수있다. 이것을자바스크립트의단계적기능축소라고한다.

58 단계적향상 (Progressive Enhancement) 단계적향상적용예 섀도이펙트 구버전브라우저 (IE 8) 웹표준브라우저 ( 크롬 ) 내용만보임 효과까지보임 CSS3 에는 text-shadow, box-shadow 가추가됨. ( 기존에이미지로만처리할수있던기능임 ) 잘못된사례 Here, Are the texts you see? Here, Are the texts you see?

59 CSS3 적용 현재 CSS3 는데스크탑웹에서는범용적이지못하므로 CSS3 에서제 공하는기능중보편화된기능을일부만선별하여적용하도록권고함 반응형 UI

60 IE 11 하위버전브라우저호환성확보기법 API 명 조건부주석 (Conditional stylesheets) IE 버전별조건문제공 조건부클래스명 (Conditional classnames) Class 명을여러개사용 장점단점장점단점 내용 유효한 HTML 문법 CSS hack 대체가능 다수의 HTTP 요청이발생하기때문에브라우저의성능이감소 하나의조건부주석을로드하는동안다운로드를차단 반복사용시파일크기커짐 유지보수불리 ( 기본스타일시트변경시 IE의스타일시트도변경해야함 ) IE에정상 HTTP 요청을늘리지않음 (html 및 body 태그에 class 명부여 ) 조건부주석이다운로드를차단않음 HTML 파일의크기를늘림 스타일시트의셀렉터를늘림 메인과는별도로 IE의스타일을정의해야함 meta의문자코드선언은 HTML 문서의첫 1024 바이트에배치해야하는한도를초과하게됩니다. 예 : <meta charset= utf-8 > IE의호환성뷰 (X-UA-Compatible) 를제대로작동하지않을수있음

61 조건부주석 (Conditional stylesheets) 특정한버전에서만작동하는코드를위한태그제공 ( 타브라우저는주석으로인식함, IE 구버전대응은핵보다는조건부주석을권장 ) HTML CSS. foo { color : black ;} <!-- [if lte IE 8] <link rel = stylesheet href= lte-ie-8.css > <! [endif] --> <!-- [if lte IE 7] <link rel = stylesheet href= lte-ie-7.css > <! [endif] --> <!-- [if lte IE 6] <link rel = stylesheet href= lte-ie-6.css > <! [endif] -->. foo { color : green ;} / * lte-ie-8.css, for IE8 and older * /. foo { color : blue ;} / * lte-ie-7.css, for IE7 and older * / 장점 조건부주석을사용하여스타일시트를지정하는방법은유효한 HTML 문법 CSS hack을사용할필요가없음 단점. foo { color : red ;} / * lte-ie-6.css, for IE6 and older * / 다수의 HTTP 요청이발생하기때문에브라우저의성능이감소 하나의조건부주석을로드하는동안다운로드를차단 조건부주석은모든 HTML 파일에반복하여사용하면파일크기가커집니다. HTML 안에만사용할수있고, CSS에는이런식으로조건에따른주석사용불가. 여느편법과마찬가지로조건부조석역시가능하면적게사용해야합니다.

62 조건부클래스명 (Conditional classnames) CSS hack 을사용하는것을원하지않는경우, 주로다음과같은 <html> 및 <body> 에 class 이름을부여하는방법을사용 HTML <! [if lt IE7] <html class= ie6 > <! [endif] --> <! [if IE7] <html class= ie7 > <! [endif] --> <! [if IE8] <html class= ie8 > <! [endif] --> <! [if gt IE8] <! --> <html> <! -- <! [endif] --> CSS.foo { color: black; }.ie8.foo { color: green; } /* IE8 */.ie7.foo { color: blue; } /* IE7 */.ie6.foo { color: red; } /* IE6 & IE5 */ 장점 IE 에정상 HTTP 요청을늘리지않습니다. 특정경우조건부주석이다운로드를차단하지않습니다. 단점 이방법을사용하는 HTML 파일의크기를늘림 IE 의각버전에 class 이름을늘리기위해스타일시트의셀렉터를늘림 IE 의스타일을위해메인과는별도로 IE 의스타일을정의해야함 meta 의문자코드선언은 HTML 문서의첫 1024 바이트에배치해한도초과. 예 : <meta charset= utf-8 > IE 의호환성뷰 (X-UA-Compatible) 를제대로작동하지않을수있음

63 브라우저핵 브라우저이해, 버그해결, 선별적용 지난 10 년간브라우저버그와단점을해결해주는각종브라우저핵이개발되었지만, 이 러한핵사용이지금은어느정도효과가있을지몰라도다음버전의브라우저에서는먹 히지않을가능성이있으니될수있으면핵사용을자제해야합니다. 브라우저의문제점 어떤기능에대한지원이아예없음 ( 단계적향상기법에따르면, 그기능을지원하지않는브라우저는그냥무시 ) 어떤기능에대한지원이버그투성이. ( 똑같은기능의명세와구현이브라우저마다다름 ) 브라우저업체별 CSS 접두어 최신기능을먼저지원할수있도록제공. 브라우저업체별접두어는속성명, 선택자, 기 타 CSS 기능앞에붙습니다. 특정접두어가붙은기능은그접두어를지원하는브라우저 만이인식할수있습니다. 표준속성명도함께 지정하면브라우저의향후버전에서속성이 완전하게지원될때코드를수정하지않아도 됩니다. p { -webkit-border-radius: 1em; border-radius: 1em; }

64 FolyFill HTML5, CSS3 지원플러그인 Internet Explorer 이하의구현브라우저에서 HTML5 와 CSS3 에서제 공하는기능을사용하기위해서는플러그인을사용할수있음 HTML5 플러그인 1 HTML5 의새로운요소인 article, aside, hgroup, header, footer, figure, figcaption, nav, section 을인식할수있게만듬 ( 용량 2KB) <!--[if lt IE 9]> <script type= text/javascript src= html5shiv.js ></script> <![endif]--> HTML5Shiv.js 2 CSS3 플러그인 CSS3의 border-radius 속성, box-shadow 속성, linear-gradient 속성을사용가능 ( 모든 CSS3 속성을지원하는것은아님 ) CSS3 Pie IE9.js : HTML5 태그는물론일부 CSS3 선택자도인식하게해줌 ( 용량 41KB)

65 FolyFill IE7, IE8 에서미디어쿼리플러그인 IE6, IE7, IE8에서 CSS3 MediaQueryies.js 플러그인으로미디어쿼리사용가능 (CDN 대신다운로드하여내부링크권장 ) <!-- [if lt IE 9]> <script src= ></script> <script src= mediaqueries.js ></script> <! [endif] --> <link> 나 <script> 요소를사용하도록권장함 <link> 의 {~} screen and (min-width: 1200px) {} 와 media type이없으면효과가없는경우가있음

66 CSS 초기화 브라우저는브라우저마다약간씩다른 Default Style Sheet를이용하여마진, 패딩, 링크색상등을표시한후, 개별스타일시트를적용함. CSS 초기화를사용하면, 각브라우저별로다르게설정된스타일값을동일하게하여원하는스타일을표현하기쉬움 웹페이지의스타일시트적용 Step 1 Step 2 Step 3 Step 4 브라우저가웹 각브라우저별 웹페이지에설 최종스타일이 페이지파일을 디폴트스타일 정된개별스타 입혀진웹페이 메모리에로딩한 시트를웹페이 일시트를적용 지를화면에표 다. 지에적용한다. 한다. 현한다. 웹페이지를크기와두께가전부같은글자로구성된한개의긴단락으로표시 제목, 단락등블록요소에디폴트스타일적용 개별사용자가지정한모든설정을추가로적용 ( 추가된스타일만덮어쓰기 ) 브라우저화면사이즈에따라최종스타일이적용된웹페이지의내용을표시

67 CSS 초기화명령문의형태 수석 CSS 전문가인 Eric Meyer 가개발한초기화파일 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbdoy, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline } 이명령문을보면많은요소의 margin, padding, border가전부 0으로지정돼있어서모든요소의너비와높이는그안의콘텐트에따라서만결정됩니다. 이명령문에는전체선택자 (*) 가사용되지않아서사이트성능을고려했습니다. 브라우저내장스타일시트의기본 font-family, font-weight, 글자크기를무효화합니다. 이것은대부분의초기화명령에들어가는핵심요소입니다. Linked Style : <link rel= stylesheet type= text/css href= css파일명 />

68 CSS3 적용 기본적으로하나의 html 에다음 4 가지 CSS 가들어간다. CSS 이 css 들을 main.html 에모두링크시키는게아니라, main.html styles/main.css layout.css base.css reset.css 식으로들어간다. 이렇게 CSS 를외부파일로작성시꼭 CSS utf-8 ; 이라고선언을해주어야하지만위의경우처럼여러파일을불러올때에는제일처음불러오는파일 (reset.css) 에만 charset 선언을하면된다. ( CSS 작성순서 : position -> width -> height -> border -> margin -> padding) 전체선택자 : * {} 전체선택자는해당페이지에서사용하지않는태그들까지모두검색하기때문에속도가느려진다. 특히포털사이트처럼컨텐츠가많으면많을수록더더욱느려지기때문에절대사용하지않는다. CSS 적용테스트 : Acid Test 웹브라우저별로렌더링시어떤차이를보이는지확인함으로써, 웹표준 ( 크로스브라우징 ) 을준수했는지를체크. - Acid2 : css 만체크 - Acid3 : html, xhtml, dom, css2, css3 모두체크 용도 reset.css 모든요소들이가지고있는스타일을초기화 (ex. 블럭요소여백없애기 ) base.css layout.css main.css 모든페이지에공통적으로적용되는기본스타일 레이아웃을잡아줌 각페이지의 CSS

69 CSS 와사이트의성능문제 CSS 를이미지, 스크립트등과같은외부자원으로써사용하면, 두 가지측면에서사이트의성능문제에관여함 CSS 파일자체의크기 링크를통해사용한 CSS 파일개수 보통 CSS 파일은이미지같은외부자원에비해파일크기가작습니다. 하지만, 빈글자열과주석문을제거하고속기법을적극적으로사용하면파일크기를더압축할수있습니다. CSS 코드압축도구 : 실제필드에배포할때는스타일시트파일하나에모든속성선언문을모아서파일개수를줄이는것이성능에유리합니다.

70 CSS 프레임워크 글자, 레이아웃, 그밖의기능을대상으로하는재사용가능한주요 CSS 스타일을미리설정하여제공 - 코드재사용으로복잡한격자레이아웃을간단히제작가능하나디자인다양성제약 - 여러개의 CSS 파일로사이트성능저하 ( 파일병합압축으로해결 ) Christian Mortoya Blueprint CSS 초기화, 글자크기조절과기준선, 격자레이아웃, 폼요소스타일지정, 인쇄스타일등의기능 위지위그방식의웹기반격자레이아웃빌더 단점 : 탄력 / 유동레이아웃기능없음, 무의미한클래스명명법 ( 예 : push-12나 prepend-8 같은클래스명 ) YAML 탄력레이아웃과유동레이아웃기능우수 (vs Blueprint) 단점 : Blueprint의섬세한활자스타일기능이없음 (vs Blueprint) 비주얼레이아웃빌더 IE5 이상의모든브라우저지원 YUI Library CSS 툴 developer.yahoo.com/yui YUI 라이브러리에는 CSS 브라우저초기화, 정교한격자레이아웃 ( 비주얼격자빌더이용 ) 기능, 폰트배치기능을비롯한각종 CSS 도구가들어있습니다.

71 글꼴계통 CSS 는사용자의시스템에이미설치되어있는글꼴만사용가능 ( 웹글꼴 (web font) 은예외 ) CSS font-family 에하나이상의글꼴지정 가능 하나의 font-family에지정하는글꼴은비슷한글꼴을선택하는것이좋습니다. 비슷한글꼴의대표적인예는 Helvetica와 Arial입니다.( 대부분플랫폼에서지원함 ) font-family : Helvetica, Arial font-family : Times, Times New Roman, serif serif, sans-serif, monospace, cursive, fantasy 글꼴은 CSS가제공하는공통글꼴입니다. 사용자의컴퓨터에서글꼴을지원하지않을경우를대비하여비슷한글꼴을준비해야합니다. 여기서비슷한글꼴이라함은단순히서로모습이비슷한글꼴만을의미하는것이아니고, 크기또한비슷한글꼴을의미합니다. 글꼴의크기가비슷해야하나의글자가비슷한공간을차지하기때문입니다.

72 유효성검사 validator.w3.org 유효성검증기는마크업문서의 DOCTYPE 을확인해서해당 DOCTYPE 에맞는마크업구 문을적용해제공된문서의유효성을검증 HTML 구문에러원인 URL 을표현하거나혹은일반콘텐츠를표현하는곳에서앰퍼샌드기호 (&) 를사용한경우 ( 앰퍼샌드기호는특수문자, 숫자형문자참조에서만사용해야함 ) XHTML DOCTYPE 에서비어있는요소를표현할때닫는기호 (>) 앞에슬래시 (/) 를빠드린경우 XHTML DOCTYPE 에서요소의태그명과속성을작성할때대문자를사용한경우 요소를비정상적으로중첩한경우 ( 예를들어 <strong><a href= index.html >Home</strong></a> 처럼작성했을때 ) 인라인요소안에서블록요소를포함한경우 폼컨트롤과레이블이 form 요소바로아래직계자손으로포함된경우 ( 폼컨트롤과레이블은블록요소에포함된상태로 form 요소안에있어야함 ) img 요소처럼 alt 속성을반드시포함해야하는요소가 alt 속성을포함하지않는경우 font 또는 color 처럼폐기예정된요소와속성을사용한경우 문서최상단에선언된 DOCTYPE 지시자를대문자로작성하지않은경우 XHTML DOCTYPE 에서속성값에따옴표를빠뜨린경우 링크검사 validator.w3.org/checklink : 깨진링크를검사하는일

73 6. 주요 SW 대응현황

74 IE 11 적용권장 SW 선정기준 HTML5 기반의최신버전이나와있는 SW 는최신버전사용을권장 ( 단, SW 의성숙도를고려하고, HTML5 의기술적한계를고려하여선정 ) 기존 / 신규시스템에대한 SW 적용방침 IE 11, EMIE, 호환성보기로가능할경우기존 SW 를유지 기존시스템 단순패치로호환성확보가가능할경우기존 SW 를패치 기존 SW 교체만으로호환성확보가가능할경우 SW 교체 업무재개발영향도가클경우시스템재개발권장 신규시스템 HTML5 웹표준스펙을준수한 SW 사용권장 ( JavaScript 방식 > Plugin 방식 > ActiveX 방식 ) IE 11 과 IE 8 지원이상충될때, IE 11 지원을우선

75 권장 SW 대상분야 SW 버전별 IE 11 호환성대응방안에따라호환성조치및권장 SW 신규적용 분야내용비고 RIA MiPlatform, Xplatform, Nexacro, WebSquare Nexacro, WebSquare5, exbuilder5 Report OZ Report, Rexpert, CLIP Report, Report Designer CLIP, OZ 6.0, Crownix Grid WiseGrid, IBSheet, Spread, Gauce, XENA, jqgrid SBGrid, rmate, jqgrid 등 Chart Chart FX, amchart, TeeChart, Xchart, Infragistics Chart FX, D3, Rapheal 등 웹에디터 DextWebEditor, CKEditor, JWEditorPro, Cross Editor Dext5Editor, Naver, Daum 등 Utility File 처리 InnoEX, IUPDOWN Pro, DextUpload, OfficeHD EVA DextUpload 등 Call CTI Manager, CTI Monitor, CTI Softphone, evoice - Security INISAFE Web, TrustNet, ServiceLinker for Web Softcamp, 테르텐등 고려사항 RIA, Grid, File 처리분야는 HTML5 기술성숙도부족으로향후구현방식변화가예상됨 HTML5 기술미성숙분야과도기적 SW 적용불가피함 ( 프로젝트별기술검토필요 )

76 HTML5 기반 SW HTML5 기능적용사례 구분 Reporting Grid Chart 내용 HTML5 기술을적극도입한 Reporting Tool - 클립소프트 Clip Report : SVG 기반고품질이미지 - 포시에스 OZ Report 6.0 : Client Canvas, 서버 SVG 생성방식지원 대부분 JavaScript 기반으로제작하여 HTML5 완벽호환 오픈소스가활발한 Chart - SVG, Canvas, WebGL 기반의 Library 다수제공 (Rapheal, D3 등 ) 초기단계의 RIA RIA - exbuilder5 : Canvas 기반으로 FLEX 영역대체용이 - Nexacro : 웹표준을엄격하게준수 - WebSquare 5 : HTML5, CSS3 등지원

77 7. 브라우저표준전환전략

78 표준브라우저전환 HTML5 사용과 IE8 브라우저 EOS 대비 ( ) 필요성 고려사항 전략 브라우저별호환성확보로유지보수성향상 (Cross Browsing 기술필요 ) HTML5 기반사이트이용및개발 ( 최신브라우저필요 ) Active X 배제를통한보안강화 ( 대체기술필요 ) 신규 / 기존시스템동시운영 HTML5 기반신규시스템개발저비용 / 단기간전환표준브라우저일괄교체일부 Active X 기반 SW 유지 기존시스템 IE 11 기준보완신규시스템 HTML5 표준적용 브라우저전환 원칙 웹개발표준적용으로브라우저종속성탈피에대응 기존시스템의점진적개편으로시간 / 비용효율적전환

79 [Approach] 현기업의웹표준대응방안 기존웹사이트 EMIE 기반운영 / 신규웹사이트웹표준화준수 일반적웹브라우저호환성확보방법 자사개발웹어플리케이션 사내업무포털 외부고객사마케팅사이트등 기업용패키지웹어플리케이션 ERP 패키지 CRM 패키지 모바일웹어플리케이션 New Web Application Legacy Web Application Issue 웹표준을준수하여개발 HTML5 & CSS3 / Media Queries 적용 일부웹표준기반코드변경수행 구버전웹브라우저최적화된웹사이트에대하여, 호환성모드를활용한우회방안적용 ( 브라우저, 웹서버등에호환성기능활용 ) 새버전의브라우저호환성대응기간은평균 2~3 년단위로 PC 교체주기에맞추어서진행.( 빠른대응어려움 ) Active-X 사용하는업무시스템이평균전체 70% 이상 (ERP, 포털, 전자결재, 대용량이메일등 ) 호환성테스트 100% 수작업진행 호환성테스트문서기록없음 아직많은기업의웹로딩성능을고려하여, 모바일전용웹사이트등을제작하고있으나, 변화하는 IT 환경에효과적으로대응하기위하여웹표준준수를권고합니다.

80 기존시스템호환성확보지침 원칙 최소한의비용으로 IE 11 브라우저에서운영이가능하게구현 - EMIE 등도구사용가능, 사소한이미지깨짐은무시가능 기존시스템호환성지침 IE 11 변경사항보완 - IE 11에서변경된사항으로인한호환성오류수정 IE 11 호환도구 일반적인 IE11 대응지침 - EMIE 적용, 호환성보기사용법 브라우저설치 SW 패치 - IE 11 패치여부및대체 SW 권장가이드 패키지솔루션패치 - 패키지솔루션벤더사의패치 or 최신버전설치필요 예외사항참고자료 비표준아키텍처 SI 로 ActiveX 방식으로개발된시스템

81 브라우저비호환성대응유형 단계적향상 브라우저호환성을지원하지않는브라우저에는해당기능을제공하지않는것 -> 개발난이도 ( 디자인제약사항 ) 증가 -> 구형브라우저의점유율잔존으로인한고객불만 최신브라우저위주개발 조건부주석브라우저접두어 브라우저별로서로다른자바스크립트코드를작성하는것 -> 개발복잡도증가 -> 신규브라우저등장 ( 버전업 ) 에대한대응부족 브라우저별별도코드작성 조건문코딩 특정기능별로브라우저가지원하는지체크한뒤, 대체방법을제공하는코딩 ( 기능단위로코드분리 ) -> 개발복잡도증가 최신기능구현원칙 브라우저마다다른차이점으로생기는비호환성대응방법

82 신규시스템웹표준준수지침 원칙 웹표준을준수하게구현하여모든브라우저에서구동이가능 - 현재웹표준대응기술이없는영역에대해서는 IE11 기준으로개발 신규시스템웹표준지침 HTML5 태그를표준으로사용 ( 다른버전사용금지 ) CSS2.1 를표준으로사용 (CSS3 의일부기능이용가능 ) HTML5 기반 웹표준준수 기능별권장 SW ( 되도록웹표준에부합하는최신 SW 사용 ) Hack 적용가이드 (IE8 임시운영방편, HTML5Shiv, CSS3Pie) 퍼블리싱표준적용 - Cross Browsing 을고려하여 CSS 초기화적용 - Publisher 투입필수 (X-Platform 등 RIA 기반프로젝트예외 ) 미지원영역에대하여 IE11 기준개발 웹표준미지원영역에대한지침 IE11 기준개발시, 구버전지원기능은모듈화하여개발하여향후시스템을 Update 할때제거가쉽도록한다.

83 웹표준준수의방향성 웹표준을준수하여유지보수편의성강화 " 최신웹기술사용이가능하게한다. - HTML5 도입 - CSS 3 도입 - JavaScript 기반 SW 도입 웹보안강화를위하여비표준기술을제거한다. - 기존 Active X SW 대체 검증된표준 SW 사용으로안정성및유지보수성을향상시킨다. - TRM 준수 - 기획 TA 검토 웹표준준수로브라우저별중복개발 / 관리를줄인다. - 웹표준준수 - Cross Browsing

84 첨부. 웹표준및웹호환성진단하기 W3C 프로그램 KW3C : 한국정보화진흥원에서배포 사이트에서다운로드

85 참고. HTML5 웹호환성국내관련사이트 실전 HTML5 가이드 HTML5의모든것 한국 HTML5 사용자그룹 W3C HTML5 대한민국관심그룹 웹표준공방, 클리어보스 한국웹접근성그룹 NULI 널리공유하는웹표준화가이드 CSS DESIGN KOREA MS IE 11 호환성센터

86 End of Document