Transcription

1

2

3

4

5

6

7 Ⅰ. 개요 1. 배경 3 2. 목적 4 3. 요약 4 4. 적용환경 5 5. 활용대상 5 6. 문서의한계 5 Ⅱ. 웹호환성 1. 보안 인증 전자결제 멀티미디어 그래픽 전자문서 파일처리 게임 시스템정보확인및 PC제어 102

8 Ⅲ. 멀티운영체제및브라우저정책 1. 멀티운영체제지원정책 브라우저서비스개발정책 113 Ⅳ. 멀티환경지원방안 1. 멀티브라우저지원방안 멀티스크린지원방안 126 Ⅴ. NPAPI 대체기술 1. NPAPI 대체기술개요 NPAPI 국내사용현황및분류 NPAPI 대체기술 주요기능별대체기술적용방안 NPAPI 전환적용사례 비표준대체기술, 실행파일보안이슈 172 Ⅵ. HTML5 1. HTML5 표준개요 HTML5 신규기능별보안이슈 HTML5 브라우저수용도 HTML5 글로벌동향분석 208

9 Ⅶ. 부록 1. 용어집 약어집 참고자료및인용 228

10 < 표 2-1> 제거 API 및대체기능 22 < 표 2-2> 주요인증방법 27 < 표 2-3> 브라우저별웹암호 API 33 < 표 2-4> 해킹및금융사기주요기법 43 < 표 2-5> 대체인증방식 44 < 표 2-6> 국내간편결제현황 49 < 표 2-7> 해외간편결제현황 50 < 표 2-8> 주요인증방법 51 < 표 2-9> 결제서비스제공주체별분류 52 < 표 2-10> 플랫폼기반분류 53 < 표 2-11> 해외신용카드 55 < 표 2-12> 결제단계별플러그인사용요소및개선방안 58 < 표 2-13> <video> 요소속성 62 < 표 2-14> <video> 요소의재생관련속성, 자바스크립트 API 63 < 표 2-15> 브라우저제조사별지원코덱, DRM 64 < 표 2-16> <audio> 요소속성 66 < 표 2-17> ActiveX 의그래픽기능을대체할수있는웹기술 73 < 표 2-18> Canvas 와 SVG의비교 77 < 표 2-19> 주요애니메이션및전환기능의비교 78 < 표 2-20> Canvas 및 SVG 라이브러리 83 < 표 2-21> 주요차트라이브러리 84 < 표 2-22> 웹에디터종류 89 < 표 2-23> 주요리포팅솔루션 90

11 < 표 2-24> 주요플러그인기반그리드컴포넌트 91 < 표 2-25> 전자문서보호솔루션제품들 92 < 표 2-26> 국내외오픈에디터의특징 93 < 표 2-27> 웹표준그리드컴포넌트 95 < 표 2-28> 파일전송 ActiveX 사용현황 96 < 표 2-29> XMLHttpReqeust readystate 97 < 표 2-30> 웹표준 File API 컴포넌트 98 < 표 2-31> PC 원격제어솔루션 104 < 표 2-32> 이용자에이전트문자열토큰설명 106 < 표 2-33> 윈도우 IE Trident 토큰 106 < 표 3-1> 운영체제연동기술현황 112 < 표 3-2> 브라우저개발자지원정책현황 113 < 표 3-3> 브라우저별확장기능지원사이트 113 < 표 3-4> IE 고유기술및 Edge 대응기술 114 < 표 4-1> HTML5 주요기능 120 < 표 4-2> 브라우저별확장기술요약 124 < 표 5-1> NPAPI 대체기술 155 < 표 5-2> 국내 NPAPI 사용현황 156 < 표 5-3> 국내 NPAPI 사용현황및분야 157 < 표 5-4> 크롬플러그인실행현황 157 < 표 5-5> manifest 파일구성필드 159 < 표 5-6> OS별 manifest 파일위치 159

12 < 표 5-7> 국내기능별대체기술 166 < 표 5-8> 전자결제대체기술 167 < 표 5-9> 키보드보안대체기술 167 < 표 5-10> 공인인증서대체기술 168 < 표 5-11> 대체기술구분 172 < 표 5-12> EXE 보안취약점 173 < 표 6-1> HTML5 신규기능요약 178 < 표 6-2> CORS 관련보안위협 181 < 표 6-3> Web Storage 설명 182 < 표 6-4> OWASP HTML5 보안위협항목 190 < 표 6-5> 브라우저별웹표준수용도 198

13 [ 그림 2-1] 바이오정보와공인인증서를연계한간편인증기술 12 [ 그림 2-2] FIDO(Fast IDentity Online) 인증기술동작과정 12 [ 그림 2-3] 추출된인증서로별도웹서버운영 ( 파밍 ) 13 [ 그림 2-4] 대칭키알고리즘을이용한데이터흐름에대한시퀀스다이어그램 20 [ 그림 2-5] Cookie 를이용한동작명령전달 23 [ 그림 2-6] CORS 를이용한외부애플리케이션과정보교환 24 [ 그림 2-7] 웹표준기반공인인증서서비스모델제시 31 [ 그림 2-8] 공인인증서저장매체 35 [ 그림 2-9] IndexedDB 에공인인증서저장예 36 [ 그림 2-10] 보안토큰과브라우저간연동모델 38 [ 그림 2-11] 스마트인증이용절차예시 39 [ 그림 2-12] Same-Origin 환경에서의공인인증서이용 40 [ 그림 2-13] 공인인증서상호연동 41 [ 그림 2-14] Web Messaging 메시지통신기능 42 [ 그림 2-15] FIDO 인증시나리오 45 [ 그림 2-16] TrustZone Hardware Architecture 46 [ 그림 2-17] mpay 결제프로세스 52 [ 그림 2-18] 페이핀결제프로세스 53 [ 그림 2-19] Paypal 프로세스 56 [ 그림 2-20] video.js 의비디오재생기 65 [ 그림 2-21] audio.js 재생기화면 66 [ 그림 2-22] WebRTC 브라우저지원현황 67 [ 그림 2-23] YouTube 69

14 [ 그림 2-24] 이퀄라이저시각화 70 [ 그림 2-25] Canvas 2D 샘플코드실행결과 74 [ 그림 2-26] SVG 예제코드의실행결과 ( 좌 ) 와결과물의부분확대 ( 우 ) 76 [ 그림 2-27] Canvas 활용게임 ( 앵그리버드 ) 81 [ 그림 2-28] SVG를이용한 D3.js 차트 82 [ 그림 2-29] 레이아웃발생의예 86 [ 그림 2-30] Layouting 으로인한 Repaint 발생의예 86 [ 그림 3-1] 운영체제및브라우저정책우선순위 111 [ 그림 3-2] 2016 년이후 IE 지원계획 115 [ 그림 4-1] 웹애플리케이션개발을위한연관표준기술 119 [ 그림 4-2] 크롬지원 NPAPI 대체플러그인기술 125 [ 그림 4-3] <meta> 태그미적용 / 적용사례 128 [ 그림 4-4] 기기에따른 Media Query 적용화면 129 [ 그림 4-5] 웹폰트그래픽 130 [ 그림 4-6] 고정폭 / 가변폭콘텐츠예시 131 [ 그림 4-7] Bootstrap Button 133 [ 그림 4-8] Bootstrap Button Group 134 [ 그림 4-9] Ionic Simulator 140 [ 그림 4-10] Ionic Folder Tree 140 [ 그림 4-11] 코드변화가적용된 Ionic Simulator 141 [ 그림 4-12] Alert 예시 146 [ 그림 4-13] Custom Alert 예시 148

15 [ 그림 5-1] asm.js 처리플로우 163 [ 그림 6-1] 브라우저점유율 177

16

17 Ⅰ. 개요

18

19 Ⅰ. 개요 1. 배경 1989년웹초기개발목적은웹을탄생시킨스위스유럽원자핵공동연구소 (CERN) 의연구자들이이기종의운영체제 (OS) 와개발환경에서도연구자료를쉽게공유할수있도록하는것이었다. 그러나현재의웹기술은초고속인터넷인프라발전에힘입어전자결제, 보안, 공공서비스, 전자문서, 멀티미디어, 소셜네트워크등다양한생활서비스를제공하는기반기술로사용되고있다. 특히국내에서는 2000년초반부터초고속인터넷인프라확산정책이진행되면서단기간에온라인뱅킹, 오픈마켓, 포털등다양한웹서비스가급속도로보급되었다. 그러나이러한웹기술확산은 2000년후반부터특정운영체제 (OS, Operating System) 및브라우저에포함된비표준기술때문에오히려웹서비스발전을저해하는한계를맞이하게되었다. 특히비표준기술은보안, 결제, 인증, 멀티미디어, 게임등에서이용자요구를충족시키기위한브라우저개발사의서로다른플러그인 (plug-in) 기술때문에파편화 (Fragmentation) 된상태에서빠르게확산되었다. 국내웹사이트개발자들도 2000 년초에 Microsoft 의 ActiveX, Firefox Netscape Plug-in API( 이하 NPAPI) 등비표준기술들을쉽게사용함으로써브라우저별비호환성때문에많은어려움을겪게되었다. 2009년아이폰등스마트단말시대를맞이하여애플의사파리, 구글의크롬등멀티브라우저및모바일웹서비스이용이확산되면서비표준기술전환에비용과시간이필요하게되었다. 특히최근 Windows 10에기본탑재된 Edge 브라우저에서비표준기술인 ActiveX 사용을전면금지하거나, 2016 년부터구글 Chrome, Firefox 브라우저에서 NPAPI를비활성화하는등브라우저자체에서비표준기술을지원하지않는방향으로정책이변하고있다. 이러한비표준기술을더이상적용할수없는웹서비스환경에서개발인력과구축비용을절약하기위해서는한번의개발로다양한기기및브라우저에서웹서비스를제공할수있는 HTML5 표준기술과반응형웹기술에대한지속적인기술투자가필요하며, 보안, 인증, 결제, 장치제어와같이운영체제와연동하는기술적용방식은서버연동을통한인증과보안에문제가생기지않게하거나운영체제개발업체가디지털서명을인증하는방식으로개발방법을변경해야한다

20 국내에서는비표준기술로인해발생한인터넷이용환경문제를개선하기위해 2011년부터인터넷이용환경개선기술안내서보급및웹표준전환지원컨설팅사업을벌이고있다. 하지만 10여년동안특정브라우저와비표준기술에의존해왔던웹서비스환경과관련법제도변경지연등의복합적인요인으로인해비표준기술퇴출이지연되고있다. 2. 목적 본안내서는국내웹개발자및웹사이트운영자가 ActiveX, NPAPI 와같은비표준기술을개선하고자할때참고할수있도록주요분야별비표준기술사용현황, 브라우저개발사의정책, 비표준대체기술의기술별특징, 구현방법, 적용시고려사항등에대한내용을제공한다. 더불어신규웹서비스개발시발생가능한불편사항을개선할수있는표준웹기술에대한구현방안도함께제공하는것을목적으로작성되었다. 3. 요약 본안내서는보안, 인증, 전자결제, 멀티미디어, 그래픽, 전자문서, 파일처리, 게임, PC 제어등웹호환성기술과멀티운영체제및브라우저정책, NPAPI 대체기술, HTML5 등크게 5개부문으로구성되었다. 웹호환성부문의경우 9개기술로분류하여, 각기술에대해 ActiveX, NPAPI 등비표준기술을사용하지않고웹호환성을확보할수있는방법및기술을제시하고있다. 멀티운영체제및브라우저정책은브라우저개발사의전환가이드적용방법, 운영체제기반의응용프로그램을제공하는방법, 브라우저개발사권고확장기술의적용방법과대안을제시하고있다. NPAPI 대체기술은브라우저개발사권고에따라 NPAPI 와같은비표준기술을사용하지않고웹표준방식으로상호호환성과상호운용성을확보하는방법및기술을제시하고있다. 끝으로 HTML5 는표준규격과웹애플리케이션규격, 구형브라우저에 HTML5 지원방안, 보안이슈, HTML5 브라우저수용도, HTML5.1 글로벌동향분석에대해기술하고있다

21 4. 적용환경 본안내서에서제시하는방법은대부분윈도우와맥 OS 환경에서시험되었으며, 일부기술들은모바일기기에서도시험되었다. 웹서버는윈도우 IIS와리눅스 OS 기반의아파치웹서버를기준으로하였으며, 클라이언트는윈도우및맥 OS에서동작하는크롬, 파이어폭스, 사파리및인터넷익스플로러 (IE) 등에서시험되었다. HTML5 표준과자바스크립트를이용해서구현된기능은 HTML5를지원하는최신브라우저에서만동작하므로, 웹개발자는 HTML5 표준웹기술을이용하여대체기술을구현, 적용할경우최신브라우저의버전과 과같은표준지원확인사이트를통하여서비스를제공하고자하는브라우저의 HTML5 기능지원여부를확인해야한다. 참고로 2016년 10월기준으로 PC용크롬 53, 파이어폭스 48, 사파리 9.1, 인터넷익스플로러 11 이상버전에서 HTML5 표준규격을대부분지원하고있다. 5. 활용대상 본안내서는웹개발자, NPAPI 개발자, 웹사이트운영자, 웹솔루션개발자를대상으 로하였다. 본안내서에서개발자는 PM(Project Manager), 기획자, Front-End, Back-End, Desktop Application 개발자를모두포함하는개념으로정의하였다. 6. 문서의한계 본안내서에서제시된기술은현장에서사용되는다양한사례중일부만을골라제시된것이다. 따라서제시된기술을이용하여상용솔루션과서비스를구현할경우법제도, 조직내부의서비스정책, 대상고객의이용환경등을고려하여변경, 적용하여야한다

22

23 II. 웹호환성

24

25 II. 웹호환성 이부문에서는웹호환성개선을위해국내에서비표준기반으로사용되는 9개주요기술분야를다룬다. 9개기술분야중전자결제기술과연관있는인증, 보안기술은기존공인인증서와새로운간편결제방식사용에대한웹호환성을다루고있다. 보안분야중키보드보안과같이특정기술이필요한솔루션의경우웹표준기술로대체할수있는방법이존재하지않을경우, 차선책으로별도의응용프로그램을제작하여배포하거나, 브라우저와응용프로그램간서버통신을통해서비스를제공하는방안을대안으로제시하고있다. 이때별도의응용프로그램을구현하는경우에도특정운영체제나브라우저개발정책에부합하고비표준기술에종속되지않도록구현해야한다. 운영체제및브라우저개발사는상호지원방식에따라고유의확장방식을제공하고있다. 운영체제와브라우저를결합된형태로제공하는 MS와애플은최근자사기술정책과로드맵에따라운영체제에설치하는응용프로그램기술과웹기술을상호독립적으로운영하는정책을유지하고있다. 반면자사운영체제점유율이미약한구글과모질라재단의경우높은브라우저점유율을기반으로샌드박스보안모델을유지하면서자체플러그인기술로웹과운영체제설치형응용프로그램이유기적으로연동할수있도록기술지원을하고있다. 다만플러그인기술중 NPAPI 의경우보안및안전성문제로인해더이상브라우저가지원하지않는점을고려하여브라우저별로지원하는다른플러그인기술을확인해야한다. 크롬, 사파리, 파이어폭스, 오페라등에서전자결제및연관기술로활용되고있는 NPAPI 플러그인기술의경우브라우저개발사가 2016년을시작으로지속적으로기술지원을중단하였다. 따라서멀티브라우저에서 NPAPI 를확장기술로활용하고있는솔루션과서비스는 HTML5 웹표준으로전환하거나, 브라우저별로지원하는다른플러그인 (NaCl, pnacl, ams.js, Native Messaging) 으로재개발할수있다. 또한운영체제설치형응용프로그램과브라우저간서버통신을통해대체할수도있다. 웹사이트에서사용되고있는 ActiveX, NPAPI 와같은비표준플러그인을진단하기위한방법은자동화도구를활용한방법과특정태그를검색해서페이지와서비스프로세스별로점검하는방법이있다. 현재무료로제공되는자동화점검도구로는 에서제공하는 웹표준진단도구 를활용할수있다

26 1 보안 1. 개요 HTML5 표준환경에서결제, 인증을위해가장기본적으로사용되는보안을위한기술요소를도출하고각기술요구사항별표준대응방안을정리한다. 보안은본인확인을위한로그인보안, 외부불법적인접근또는해킹공격을방지하기위해서비스및프로그램사용을제한통제하는개인방화벽, 백신, 키보드보안, 구간암호화등을포괄한다. 또한적격PG( 결제대행사 ) 사업자요구보안수준인 PCI-DSS(Payment Card Industry-Data Security Standard) 중웹서비스와관련된부분도언급하였다. 웹서비스를위한정보보호보안은유무선인터넷과같은네트워크를통하여전달되는정보의위 / 변조, 유출, 무단침입, 서비스거부등을비롯한각종불법행위로부터개인의컴퓨터와인증, 결제정보를안전하게보호하고, 물리적인공간에서의보안침해사고방지를위해서버, 이용자 PC( 클라이언트 ) 의양방향보안을기본적으로제공해야하나여기에서는이용자환경보안을좀더집중하여내용을구성하였다. 2. 사용현황 2.1 로그인보안 로그인보안을위한기술요소를도출하고각기술요구사항별표준대응방안을정리한다. 기존로그인보안방식은대부분공인인증서를통한로그인, 아이핀등공공기관에서인증심사를하고인증전문업체가솔루션을제공하는방식으로인증의안전성을보장하여제공하였으나, 최근간편결제가활성화되면서휴대폰번호, 카드번호, O TP등기존지식기반 (What you know) 에서인증매체의소지편의성이높은기기를활용한소지기반 (What you have), 온라인간편인증 FIDO(Fast IDentity Online) 은지문 홍채 얼굴인식등바이오인식기술과공개키암호기술을융합한생체인증본인확인기술이며활성화되고있다

27 가. 인증서로그인보안 기존공인인증서로그인시주민등록번호등특정값에대하여공인전자서명을하고인증서버로전달, 인증서버에서공인인증서에포함된 VID값으로주민번호를검증하여로그인을허용하였으나, 최근주민번호수집금지정책에의해주민번호로로그인인증하는현행방식을더이상사용할수없게되었기때문에공인인증서의플러그인의존도를줄일수있는웹표준방식의공통기반보안기술개발이나보안토큰기반스마트폰연계방식 (NFC) 을탑재하는방식의매체보호기술개발및보급이운용되고있다. 또한공인인증서와사설인증서를병행선택할수있는법적근거가마련됨으로써로그인보안기술을웹표준기반으로개선할수있는방안이마련되었으며, 간편결제를통해이를활용한웹표준기반인증보안을상용화하고있는추세이다. 나. 아이핀 / 마이핀보안 아이핀은인터넷상에서주민번호를대신하여아이디와패스워드를이용하여본인확인을하는수단으로 4개본인확인기관홈페이지나네이버, 다음등 i-pin이도입된웹사이트에서발급신청이가능하다. 아이핀발급을위해서는본인확인방식으로휴대폰, 범용공인인증서, 대면확인방식을이용하여발급이가능하다. 마이핀은행정자치부에서제공하는본인확인서비스로기존아이핀과유사하나주민번호를대체하는 13자리무작위번호를사용하여본인확인을수행하고있다. 아이핀과마이핀모두안정성을강화하기위하여, 아이핀과마이핀이용시 ID/PW외에추가인증을하며본인확인방법으로아이핀과마이핀 ID/PW 입력후, 2차비밀번호또는모바일 OTP입력을하여야한다. 다. 온라인간편인증보안 온라인간편인증 (FIDO) 기술은지문 홍채 얼굴인식등바이오인식기술과공개키암호기술을융합해비밀번호입력없이본인인증한번만으로결제가가능한기술로스마트폰등다양한모바일단말기에서생체인식기술을접목하여비밀번호입력의불편함을제거하고공인인증서를스마트폰 USIM 등하드웨어플랫폼에보관시키는기술로개발되었다

28 [ 그림 2-1] 바이오정보와공인인증서를연계한간편인증기술 [ 그림 2-2] FIDO(Fast IDentity Online) 인증기술동작과정 2.2 개인방화벽및백신 개인방화벽과백신은개인이직접검증된제품을설치하여사용하면보안상의요구를충족시킬수있다. 이용자본인책임의안전한금융거래를중시하고있는해외에서는이용자들에게백신과방화벽이포함된제품을쓰도록권고하고있다. 그러나사업자책임의비중이더큰국내에서는사업자가개인방화벽과백신을제공하지않아도적절한제품이정상동작하고있는지확인할필요가있었으며, 현재는 ActiveX 나 NPAPI, EXE 방식으로확인하고있다

29 2.3 키보드보안 키보드보안은크게 2가지역할을한다. 첫번째는키보드로입력되는정보가브라우저에전달되기전까지또는서버에이르기까지보호 ( 키보드보안 E2E 확장 ) 를해준다. 두번째는키보드가아닌다른방식 (SW 방식 ) 으로입력된정보가브라우저에전달되는것을차단하는것이다. 주로보호하는대상은카드번호, 계좌비밀번호, 이체비밀번호, 계정패스워드, 인증서비밀번호, 보안카드값, OTP 값등과같이외부로노출되면안되는정보들이다. 현재키보드보안을위해서는다양한인터페이스로연결되는키보드로부터입력되는정보를보호하기위한드라이브가필요하며, 이드라이브를메모리에로딩하고안전하게통신을하여브라우저에입력값을전달하기위해서는커널모듈에소프트웨어를설치해야한다. 지불결제시사용자정보입력및비밀번호입력에따른보안감시를위해최근에 EXE 방식이도입되어사용되고있다. 화면에서입력한정보를직접서버로전달하는방법이있으나서버에서동기화를맞추는방법이쉽지가않아현재대부분의솔루션은별도응용프로그램과주고받아서수행하는방식으로구현하고있다. 이를위해서대부분 PC에로컬서버를 https로운영중이며그에따른인증서와개인키가노출되고있어일종의악성코드역할을할수있는가능성이있다. 이는사용인증서를로컬서버인증서로사용하고있어서발생하는문제로해킹에의해인증서가유출될경우파밍으로이용될수있으며인증서발급기관에서이사실을알아인증서를폐기할경우국내서비스대부분이대책없이상당기간동안서비스가중단될수있는가능성이있다. [ 그림 2-3] 추출된인증서로별도웹서버운영 ( 파밍 )

30 2.4 데이터암호화 데이터암호화의경우이용자브라우저와같은클라이언트나웹서버간의통신, 그리고서버와서버간의통신등선로구간에전자금융정보나개인정보같이민감한데이터가인터넷을통해전송되는과정에서데이터노출을방지하거나데이터접근에대한경로를추적하기위한방법으로써데이터자체를암호화하여저장해야한다. 이래야만데이터가유출될시에도내부데이터를사용하지못하게방지할수있기때문이다. 특히금융기관또는전자금융업자는이용자와서버간의전자금융거래내역등중요정보가유출되지않도록암호화를통한비밀성 무결성을제공하여야한다. 이를위해인터넷과같은공중망환경에서는송 수신되는정보에대한보호대책이필요하다. 이러한보호대책으로 SSL/TLS, VPN 등과같은다양한통신암호기술이적용될수있다통신데이터암호화는 OSI 7 Layer중 Transport Layer와 Application Layer를대상으로한다. Transport Layer에는 SSL/TLS Protocol이적용되며 Application Layer에는자바스크립트를이용한 RSA Encryption/Decryption 또는 Symmetric Encryption/Decryption 을적용할수있다. 또한 Transport Layer 암호화와 Application Layer 암호화는함께공존가능하나 Transport Layer 암호화 (SSL/TLS) 없이 Application Layer만의통신암호화를구현하는것은매우위험한시도이므로지양해야한다. 3. 대체기술 현재까지보안기술은사용자클라이언트에보안기술과솔루션을적용했다면향후보안기술은이상거래탐지및거래단말지정, PCI-DSS(Payment Card Industry-Data Security Standard) 기반의고객신용카드정보를위한보안표준준수등의표준보안인증과 FDS와같은서버기반기술, 고객손해배상보장등비기술적인요소가중요할수있다. 또한웹서비스를위한보안서버와 HTTPS 구축시주요취약점 ( 암호취약점, 프로토콜취약점, 제품취약점 ) 에대한공격패턴을인지하고대응해야한다. 로그인보안, 개인방화벽, 키보드보안, 데이터암호화등의보안대체기술은사용자의이상행위및외부의불법적인접근또는해킹공격을방지하기위해웹표준및브라우저확장기술기반대체기술에대한안내이다

31 3.1 로그인채널보호 가. SSL Configuration 정상구성 안전한인증서사용을위해서는 SSL Configuration 을정밀하게구성하는것이필요하며공인및사설인증서는다수의브라우저에의해신뢰할수있는인증기관으로등록된인증기관으로부터인증서를발급받아사용해야한다. 또한 WebTrust 인증등제3자의정기적인보안감사를받는인증기관의인증서를이용하는것이바람직하다. SSL 구성은가능한 Protocol 을접속클라이언트의범위를고려하여정하되특별한경우가아니라면 SSLv2는사용하지않도록구성하고암호화에사용되는암호화키는최소한 128bit이상의보안비도를보장하는 Cipher Suites 목록을지정하여사용한다. 나. Application Level Encryption 구성 웹표준환경에서자바스크립트를이용하여 Application Level의 Encryption을구현하여사용하는것을권장하고있으며 Application Level Encryption의가용한구성은다음과같다. - 공개키암호알고리즘이용서버에서공개키와개인키페어를생성한후공개키를클라이언트로응답하고클라이언트에서데이터를공개키로암호화하여서버로전송한다. 서버에서개인키로복호화하여로그인데이터를확인한다. - 대칭키암호알고리즘이용서버와클라이언트간동일한키를공유한경우클라이언트에서데이터를대칭키암호화하여서버전송하고서버에서동일한대칭키로복호화하여데이터를확인한다. 다. Application Level Encryption 보안성보장조건 - 강력한보안구성을 SSL/TLS Transport Layer 상에서운용한다. - Encryption/Decryption 을수행하는자바스크립트에대한보호대책을적용한다

32 라. 2 채널관리를통한보안성을보완한다. - APT, 키보드해킹, 메모리위변조등의공격에대비하기위한이중교차확인을 통해보안취약점을방어한다. - 채널간독립적운영과보호를통해보안사고발생시대응방안을수립한다. 3.2 자바스크립트보호 자바스크립트는로그인보안을구성하는데있어실질적인 User Agent 를인지하고서버에인증을처리하는매우중요한역할을수행한다. 이때자바스크립트보호방안은매우중요하며, 자바스크립트보호방안은독립적으로사용되거나다른보안방식과함께사용될수있다. 가. 자바스크립트난독화 - 자바스크립트로중요한비즈니스로직및주요정보를서버에전달할경우 U ser Agent로자바스크립트가로드되면서해당코드가그대로노출되어해커입장에서함수와데이터, DB 테이블을분석하게되면서비스취약점이나동적으로자바스크립트인젝션공격을통해플러그인설치후악성코드를유포시키거나, 별도쿼리를만들어내부정보를탈취할수있다. 이를어렵게하기위해서자바스크립트난독화기술을적용한다. - Encryption/Decryption을수행하는자바스크립트에대한보호대책을적용한다. 나. 자바스크립트난독화과정 - 자바스크립트 Code 내모든 Symbol Name 들을난독화하기위해특별한스트링으로치환 ( 예 : hello 라는심볼네임은다른스트링으로치환 aadsfhdaskfd1asdfkfaskgfs ) - 자바스크립트내의주석 ( 코멘트 ) 을모두제거 - 코드내의공백, 탭또는빈줄을모두제거 - 모든코드를한줄로연결

33 다. 자바스크립트동적난독화 일반난독화과정에서자바스크립트 Code 내의 Symbol Name 을치환할때생성되는 스트링을세션에기반한난수로생성한코드로치환한다. User Agent 로로딩되는자바 스크립트코드는각세션별로고유한자바스크립트코드를가지게된다. 라. 자바스크립트에대한무결성검증 자바스크립트코드에대한동적난독화를하였더라도해커는 User Agent 로로딩된자바스크립트코드를분석하고변조할수있다. 따라서서버에서 UA로보낸자바스크립트코드가변조없이실행되는것을보장하는무결성검증방식을추가로개발해야한다. 마. 자바스크립트동적로딩 트랜잭션종류별또는단계별로사용되는자바스크립트코드를구분하여필요한자바 스크립트코드만을 UA 로로딩하여사용하는방식이전체비즈니스로직의노출을방지 하고자바스크립트코드를경량화하여보안성및속도개선에도움이된다. 바. 자바스크립트 Sandboxing 자바스크립트코드가제3의사이트에혼합되어사용되는경우제3자자바스크립트코드동작에의해실제자신의자바스크립트코드실행에영향을미칠수있게된다. 예를들어변수사용이중첩되어변수값을탈취, 변조등의공격이가능하며이에대한대책으로서자바스크립트코드의 Sandboxing 기법사용을권유한다. 대표적인 Sandboxing 기법은 iframe 을사용하는것이지만이방법이외에 Google Caja Project 등다수의 Sandboxing 기법이있다

34 사. 자바스크립트암호화 - 자바스크립트코드를동적난독화하거나무결성검증을하더라도코드자체에대한노출을원하지않을경우서버에서로딩되는중간에자바스크립트코드를암호화할수있다. 자바스크립트코드의암호화는 Application Layer 에서 Symmetric Encryption Algorithm을사용할수있다. UA에서는암호화된코드를실제실행하기전복호화하여실행하고폐기하는것이가능하다. 자바스크립트코드를복호화한내용은 UA의 Sandbox Memory 내에서만존재하며, 페이지전환이나 DOM 개체의삭제둥의행위로메모리에서코드삭제가가능하다. - 자바스크립트를사용하여암호화를구현할경우는실시간공격을배제한다면어떤경우든패스워드나암호키에보안성을의존하게된다. 결국가능한긴패스워드를적용하여사용될수있도록할필요가있다. 물론스크립트상에비밀키가노출되지않아야한다. 3.3 보안서버및페이지암호화 보안서버란인터넷상에서사용자 PC와웹서버사이에송 / 수신되는개인정보를암호화하여전송하는서버를의미한다. 보안서버는정보유출방지, 위조사이트방지, 웹서비스사이트신뢰도를보장하기위해인터넷에서송 / 수신되는개인정보 ( 로그인 : ID/ 패스워드, 회원가입 : 이름 / 전화번호, 인터넷뱅킹이용 : 계좌번호 / 계좌비밀번호 ) 등을 SSL 방식과응용프로그램방식으로암호화하는방법이다. 가. 보안서버웹서비스구축시보안서버구축을통해 HTML 소스코드가 https로암호화되도록웹페이지에적용하고, 이를통해웹서버와브라우저간개인정보 (ID, 패스워드, 주민등록번호, 전화번호, 이메일등 ) 를암호화하여송수신하는기능을제공할수있도록구축한다. 검증된보안서버를구축하기위해서는구축시보안서버보급지원정보사이트 ( 를통해신뢰할수있는솔루션 ( 업체 ) 및적용범위, 적용방법을확인후자사서비스에반영한다. 보안서버구축은사용자컴퓨터에별도보안프로그램을설치할필요가없는 SSL 인증서를통한암호화전송방식을사용하는것이바람직하며, 별도응용프로그램을설치하는방식을지양해야한다

35 - 또한서버에서 RSA 키쌍을생성시개인키의키사이즈는 2048bit이상이어야하고서버에서생성하는개인키는 HSM 내에보관하는등적절한보호조치를취해야한다. ( 생성된키쌍을세션에저장해두고세션종료시자동폐기되도록조치하는방안도고려가능 ) - 자바스크립트로제공되는암호라이브러리는많은기능을제공하지는않는다. 따라서여러라이브러리들중에서사용하고자하는알고리즘들을선택하여제공할필요가있다. 일반적으로많이사용되는것들은다음과같다. WebCryptoAPI( HTML5 에서지원하기때문에장기적으로볼때가장권고하는방식이며 IE 브라우저에서는 11 버전에서부터지원이제대로되고있으며 Edge 브라우저에서완벽하게지원이된다. 지속적으로추가스펙이만들어지고있어가장권고하는방식이다. Stanford JavaScript Crypto Library( ECC 중심으로가볍고빨라서널리사용된다. 그러나지원폭이넓지않기때문에용도와맞는지확인후사용하기를권고한다. CryptoJS( 제공되는안전한알고리즘도많고사용하는방법도용이하다. Jsbn( 데스크탑과모바일브라우저에서순수자바스크립트로 RSA 와 ECC 를지원한다. OpenPGP.js( 자바스크립트로 PGP 를지원하고싶은경우선택할수있는방법이다. Jwcrypto( JSON 환경에서사용한다면고려해볼수있는라이브러리로 JSON Web Signature, JSON Web Tokens, JSON Web Certificates 로구현되어있다. - RSA 암복호화는암호연산자원을많이소모하므로대규모데이터의송수신에는적합하지않아, 암복호화속도를고려할경우 RSA 공개키암호화보다는빠른대칭키암호알고리즘을이용하여애플리케이션데이터를송수신하는것을권장한다

36 - 대칭키알고리즘을이용한 Data Flow 에대한 Sequence Diagram 을그려보면아 래와같다. [ 그림 2-4] 대칭키알고리즘을이용한데이터흐름에대한시퀀스다이어그램 - 대칭키생성은 Random Number 알고리즘을이용하지만통상자바스크립트에존재하는 Math.random( ) 은암호기술에서사용될수있을만한유의미한수준의함수가아니다. 만일브라우저에서 HTML5 WebCrypto getrandomvalues( ) 함수처럼 True Random Number Generator를지원한다면해당기능으로대칭키를생성하는것을권장한다. 브라우저에서 True Random Number 생성을지원하지않을경우마우스이벤트, 디바이스움직임이벤트, W3C Web performance 표준인 performance.now( ) 함수를이용한 Micro Second를조합하여 Entropy 를증가시킨이후해당 Entropy에서 Random Number를생성하는것을권장한다

37 - SSL/TLS Transport Layer Encryption과 Application Layer Encryption을함께사용가능하지만 SSL/TLS Transport Layer Encryption 없이 Application Layer Encryption을단독으로사용하는것은매우위험한시도이므로유의해야한다. 또한 HSTS(HTTP Strict Transport Security) 를활성화하는경우 Max Age 를가능한긴시간 ( ) 으로설정해야한다. 서버에서 HSTS Header가활성화된응답을 User Agent로보내고해당 User Agent가이를지원한다면이후접속되는모든 Connection은 HTTPS Protocol을사용하도록강제로변경되므로서비스구현시유의한다. MS는윈도우 10의 IE에추가할예정이었으나최근윈도우 7과 8.1상의 IE 11에대하여우선지원하고있으며, 구글크롬은 2009년, Firefox는 2010년, Opera는 2012년부터지원했다. 나. 페이지암호화보안서버설치후웹페이지 ( 전체, 부분 ) 에암호화를적용해야하며, 이때전체페이지암호화의경우소스수정부분이단순하지만서버부하및네트워크지연등이용의불편을초래할수있어, 복잡도가증가하지만개인정보가송수신되는웹페이지부분에암호화를적용한다. 부분암호화는페이지별암호화방법과프레임암호화방법으로제공할수있다. - 페이지별암호화는현재위치하고있는페이지에서다른페이지로이동 ( 링크 ) 할때보안을위해서 https 페이지로이동하도록개발한다. - 프레임암호화는 <iframe>(html5 에서는 <frame>, <frameset> 은비추천태그임 ) 을활용하여프레임에삽입된웹페이지를암호화된페이지로적용하여개발한다. - 추가적인웹페이지암호화및취약점보안개선방안은 웹서버및홈페이지취약점점검가이드, 교육사이버안전센터 자료를참고하여웹페이지개발보안취약점을개선한다. - 로그인보안을회피하기위해서는알려진공격기법에대한최신정보를파악하고대응해야하며, 심각한보안취약성을초래할수있을경우검증된로그인보안상용솔루션도입을통해안전성을높이는방안이나, 검증된외부서비스와로그인계정을공유 (OAuth) 해서이용자로그인정보관리를회피하는방법을강구할수있다

38 3.4 개인방화벽, 키보드보안및백신대체 개인방화벽, 키보드보안, 백신은공인인증서저장위치와인증서접근에따른보안문제를해결하기위한요소로대부분설치와이용시플러그인문제가발생하고있다. 개인방화벽은이미대부분의윈도우운영체제에서는제공이되어무료로사용하거나사용자가직접설치한제품들에서제공을하고있기때문에대체가능하다. 따라서이용자의주도적인선택에의해서활성화하거나별도의프로그램으로설치를안내해야하며, 정상동작하고있는지점검하도록안내하는것이필요하다. 주의할것은무료백신중에는방화벽기능이없는경우가있기때문에서비스제공시이에대한안내부분도고려하여야한다. 윈도우 10에서커널 (Kernel) 구조가변경되었으며, 커널을접근하는소프트웨어는 x64 기반의컴퓨터시스템을로딩하기앞서 Windows Driver Kit(WDK) 을통해디지털서명을해야한다. 이에따라부트시작드라이버는커널모드코드서명을위한디지털인증서를발행하는상업적인증기관 (CA) 으로부터소프트웨어간행인증서 (Software Publishing Certificate; SPC) 를획득해야한다. 또한 IE 10 이하에서제공하던 API가 IE 11에서제거됨에따라아래의대체기능을이용하여서비스하도록기존소스를변경할필요가있다. < 표 2-1> 제거 API 및대체기능 제거된 API 기능 대체기능 attachevent addeventlistener window.execscript eval window,doscroll window.scrollleft, window.scrolltop document.all document.getelementbyld document.filesize, img.filesize XMLHttpRequest를사용 script.onreadystatechange script.onload script.readystate script.onload dodument.selection window.getselection document.createstylesheet document.createelement style.stylesheet style.sheet window.createpopup div, iframe을높은 zindex값과함께사용 이진동작 표준기반 ( 예, canvas, SVG, CSS3 애니메이션 ) 레거시데이터바이딩 프레임워크의바인딩사용 ( 예, WinJS)

39 또하나의문제는브라우저가구동되는시점을인지하고개인방화벽과백신이금융거래나결제가진행되는동안브라우저의이벤트와메모리를계속감시할필요가있다. 이를위해운영체제내탑재된애플리케이션과브라우저사이의안전한정보교환이가능해야하며개인방화벽, 백신개발업체가애플리케이션과브라우저가통신할수있는방안을만들어야한다. [ 그림 2-5] Cookie 를이용한동작명령전달 현재검토되고있는방식은 Cookie, Web Socket 등을사용하는방식부터다양한시도를하고있으나양방향통신에여러제약이존재하고브라우저의 Extension 을사용할경우각브라우저별로지원가능한플러그인기술을확인해서개발되어야하는단점이있다. Cookie 를사용할경우브라우저외부에서실행중인개인방화벽이나백신에명령을전달하기는용이하나역으로개인방화벽이나백신에서그상태를브라우저에전달하는것은용이하지않다. 즉외부에서그값을바꿔도브라우저를재시작하기전에는그값이반영되지않는다. Local Storage를이용하는경우도 Cookie와동일한방식으로동작한다

40 Web Socket이나 CORS(Cross-Origin Resource Sharing) 를활용하여외부애플리케이션과통신을수행할수있다. 그러나 https로서버와연결을맺은상태에서는 IE의경우 https로만통신이가능하다. Web Socket의경우에도동일한현상이발생한다. https 통신을위해서는로컬에인증서와개인키설정이필요한데이는 localhost 에대하여브라우저에서허용하는인증서발급도불가하지만사설로만들어서운영한다고하여도공격자에게이용당할수있기때문에추가적인보안조치방안이필요하다. [ 그림 2-6] CORS 를이용한외부애플리케이션과정보교환 기존동작방식에집착하지않고서버를상호작용에포함시켜브라우저키보드보안및백신서버브라우저와같은흐름으로정보를주고받을수도있으나기존방식을사용하고있지않을경우서버의동작방식을바꾸는위험이뒤따른다. 또는시큐어브라우저와같은개념의방식을통하여보안제품이브라우저를보호감시하면서브라우저를악성코드의공격이나해킹으로부터보호하는방법을사용할수도있으나이경우에도시큐어브라우저가서버에정상동작하고있음을알릴방안이필요하다

41 따라서개인방화벽, 키보드보안과백신의경우유의할사항은브라우저와운영체제에상주하고있는애플리케이션사이의상태정보전달을위한통신을위해서는항상제품이실행되고있는상태이어야하며, 이용자가금융이나결제, 공공업무를수행하는시점에대해인지하고실행하고있어야한다. 결국전자서명에서처럼 URI Scheme Callback 방식을통하여실행시킬수는있으나이용자가직접키보드보안및백신프로그램을실행해야한다. 이외에도 Windows 에서만가능하지만장애인접근성을해결하기위해도입된기술인데이를응용하여정보전달수단인 Microsoft Active Accessibility (MSAA) Control API를이용한회피방법, Localhost loopback 방식 ( 웹서버탑재 ) 을이용한모니터링방식, 브라우저의메모리이벤트모니터링을확인하기위해다른프로세스에침투하는 Dll injection 방식등을사용할수있으나해커가레지스트리를조작하거나 Hooking 함수를교체하는위험성이있어운영체제개발정책에따라언제든지차단될위험성이있다. 결국개인방화벽, 키보드보안및백신은현재상태정보를알기어려우며지속적인상태점검이필요하기때문에서버연동까지고려하지않는한문제해결이쉽지않다. 향후보안을위해서는운영체제애플리케이션형태로상시실행하는것이바람직하다. 추가로키보드보안의대체기술로각광받고있는가상키보드의경우 RCS를통한해킹가능성이있으므로화면저장 ( 캡처 ) 방지기술을탑재해서배포하는것도고려의대상으로포함시켜야할것이다

42 2 인증 1. 개요 인증기술은클라이언트와서버가인터넷과같이통신으로만연결된상태에서서명을 통해본인의행위를신뢰할수있도록지원하는기술로이를통하여불법이용자의접 근을막고거래를허용할수있게된다. 인증기술은크게세가지로지식기반, 소지 ( 토큰 ) 기반, 생체기반으로나눌수있으며, 공인인증서의경우지식기반의대표적인예이며, 소지기반의경우 OTP(One Time Password) 토큰이대표적인예이다. 최근사용되고있는생체기반의경우생체학적특징중가장일반적인지문인식및홍채인증이사용되고있다. 국내인증 ( 전자서명 ) 의경우대부분지식기반인공인인증서를통한본인확인을하고있으며서버방식을통한전자서명과본인인증기술보급은미약한상황이다. 해외의경우 HTTPS 를통해서버인증서에해당도메인이나주소를포함하여접속서버와인증서를상호인증하는방식을대부분사용하고있다. 인터넷상거래나인터넷트랜잭션보호에서인증기술은안전한키분배를위한수단으로사용되기도하고서버에접근하는이용자를명확하게식별하기위한수단으로사용하고있다. 최근기존공인인증서를보완하는기술로서버에서자동으로지시하는랜덤값문자 ( 이미지 ) 를자신의 ID 또는패스워드와혼합해입력한후서버로전달하면서버는지시문자를제외한입력값을자동추출한후로그인을수행하는방법이나, OTP를내장한스마트카드, 보안토큰, FIDO(Fast Identity Online) 국제표준기술규격을준수하는생체인증을통한이중보완방법으로사용하는 2채널인증방식을통하여본인확인및전자서명을강화하는방법등이상용화되고있다

43 2. 사용현황 현재인터넷환경에서의인증부분은본인확인보다결제등에서사용되는전자서명의부인방지부분에비중을많이활용되고있어공인인증서대체기술에서부인방지기능이반드시제공될것을요구하고있다. 최근공인인증서의무사용이폐지됨에따라전자상거래시신용 체크카드로전자결제를하는경우공인인증서대체사용이자율화되었으나, 나머지전자금융거래 ( 보안가군, 예 : 인터넷뱅킹 ) 에는공인인증서또는공인인증서수준의안전성을갖춘인증방법을대체할수있는기술요구되고있다. 현재예외가되는경우는 1회, 1일거래한도를적정선으로낮춘경우만가능하며, 대부분의모바일간편결제가이에해당한다. 현재까지공인전자서명을구현하고인증서운영및보호를위해서는 ActiveX, NPAPI 이외에도별도의확장기술 (URI Scheme, 로컬웹서버, dll injection) 을필요로한다. 이는브라우저개발사가국내의특수한인증서운영환경을고려한추가기능을제공하지않기때문이며. 결국운영체제개발사및브라우저개발사의기술정책변경에의해별도의확장기술이퇴출되면현재 ActiveX 나 NPAPI 퇴출문제와같이또다른기술방식을개발해야하는악순환이반복될수있다. 결국은행 ( 정보변경, 이체실행 ), 카드사의전자상거래에서거래사실확인및부인방지를위해사용하고있는공인인증서를대체하거나일체설치파일이나실행파일없이웹표준방식으로변경하면서, 2-Factor 인증과같은두단계의인증체계를통해부정사용을보완하는방식을선택하고현재사용하고있는비표준확장기술을퇴출할때이다. 최근브라우저플러그인을사용하지않고웹표준구현기술만을활용하는공인인증서발급및이용기술이개발되고있으며, 몇몇은행에서는본인확인을위한스마트 OTP 카드등의대체기술을보급하고있다. < 표 2-2> 주요인증방법 인증방법 공인인증서 구인증 설명여러가지인증방법중하나로서사전에발급받은공인인증서와비밀번호를통해신용카드결제인증신용카드번호, 카드비밀번호앞 2자리와생년월일 (2014년 8월이전에는주민번호뒤 7자리또는사업자번호 ) 로카드소유자확인을하는인증방법

44 안심클릭인증 카드발행사와카드소유자간에상호알고있는정보를토대로안심클릭인증 정보를생성하고이용자가등록된올바른인증정보를제공할수있는지여부로 본인확인 ISP 인증 카드발행사와카드소유자간에상호알고있는정보를토대로 ISP 인증정보 를생성하고이용자가등록된올바른 ISP 인증정보에근거하여생성한전자 서명 (Digital Signature) 을서버에서검증하여본인확인 AA 인증 랜덤한승인금액을생성하여이용자가승인금액이얼마였는지알아낼수있는 지여부로본인확인또는승인금액을고정하고가맹점명칭에포함된랜덤코 드를이용자가알아낼수있는지여부로본인확인 ARS 인증 카드사에서이용자가사전에지정한전화번호로전화를걸어본인확인을하 는형태로, ARS 시스템에의해자동으로이용자에게전화가걸리며, ARS 멘트 로거래내역사실이이용자에게안내되면확인후, 최종적으로고객이승인 2.1 본인확인 본인확인은기본적으로대면인증을통한최초인증과이후비대면인증을통한사후인증으로구분할수있다. 현재본인확인방식은공인인증서를통한방식이일반적으로사용되고있으며, 지난 10여년동안인증서를운영하는기술이특정운영체제및브라우저의존성이강한비표준기술로운용되었으며, 로그인, 아이핀등공공기관에서인증심사를하고인증전문업체가솔루션을제공하는방식으로인증의안전성을보장하였다. 최근간편결제가활성화되면서휴대폰번호, 카드번호, OTP 등기존지식기반 (What you know) 에서인증매체의소지편의성이높은기기를활용한 ARS 확인과같은소지기반 (What you have), 생체인식기반 (Biometrics) 으로본인확인수단이나보안방법을보호하기위한기술이활성화되고있다. 또한하나이상의본인확인인증방식을결합하여 2단계로인증을진행하는 2-Factor 방식을사용하여 SMS 인증후 OTP 인증을추가로수행하는방법, 지문인식후 OTP 인증을추가로수행하는방법, PKI 토큰을이용한비밀번호입력후 OTP 인증을수행하는방법으로본인확인을강화하는추세이다

45 2.2 공인인증서 ( 전자서명 ) 공인인증서의경우웹브라우저의확장기능을배제하고 W3C가제정한웹표준구현기술만을활용하여브라우저의로컬저장소 (localstorage) 에공인인증서를저장하고전자서명을받는방식 (Agentless) 으로서비스를제공할수있다. 웹표준기반공인인증서서비스는운영체제, 웹브라우저, 단말기에상관없이웹을통해공인인증서를발급받아이용하고자하는모든서비스에적용하고. 공인인증서이용방식을웹표준으로구현함으로써사용자가별도의공인인증서소프트웨어를설치하지않아, 이용불편과접근성이해소될것으로보인다. 특히데스크탑, 스마트폰, 스마트 TV 등웹브라우징이가능한모든환경에서공인인증서를이용할수있는장점이있으나공인인증서운용 ( 발급, 저장, 이용, 갱신, 폐기 ) 및보호를위한확장기술기반의 Agent 미설치로인해로컬저장소를이용함에따른보안성저하문제와웹표준구현기술인자바스크립트를이용함으로발생할수있는웹취약점관련한문제에대해서는적절한보완이필요하여현재이를보완하는방식으로 2-Factor 인증방식인 OTP 보안매체를활용한추가적인본인확인절차를수행하는서비스를제공하고있다. 3. 대체기술 사용자본인확인을위한대체기술은대부분공인인증서를통한로그인인증과금융거래의무결성확인및거래사실부인방지를위한전자서명용도로사용되고있어 웹표준기반의공인인증서 운용방식에대한기술과공인인증서를사용하지않고본인확인및부인방지를하며무결성을보장하는 대체인증수단, 인증관련기술적보완방식 등세가지방향으로구분할수있다. 본인확인및전자서명을위한웹표준기반의공인인증서운용방식에대한기술은보안위협에대처하기위한자바스크립트샌드박스, 웹콘텐츠보호 (W3C CSP), 자바스크립트동적로딩, 자바스크립트난독화및암호화, 자바스크립트무결성검사, WebCryptoAPI 등의보호수단을적용해서개발해야한다. 공인인증서를사용하지않고본인확인및부인방지를하는기술은이용자가가지고있는것으로식별하는 OTP, 보안카드등이있고이용자가알고있는것으로식별하는패스워드, 사이트키 (Site Key) 등이있다. 이와별도로이용자신체의특징이되는지문, 홍채, 정맥등이있고이용자행동의특징인입력리듬, 필체등이있다. 그러나이중에

46 충분한안전성을확보하면서인터넷상에서사용할수있는기술로받아들여지는것은공인인증서, OTP 정도를일반적으로사용하고있다. 이러한공인인증서를사용하지않는본인확인및부인방지기술은초기구매비용이나개인정보보호문제로보급확산과사용에제약이있는상황이다. 인증관련기술적보완방안은일반운영체제나브라우저에인증서를사전탑재하는 방식과 FIDO(Fast IDentity Online) 와같은생체인증, 기존인증방식의연동방식, 이상거 래탐지시스템 (FDS) 을활용되고있다. 거래사실부인방지는이용자에대한신뢰를바탕으로이용자가본질적으로거래한사실이없다면이용자의손해를보전하는방향으로발전해야하며거래사실이있지만이용자가부인하는경우정황증거 ( 로그등 ) 나제3자를활용하여이용자를설득할수있도록해야한다. 마지막으로인증방식은거래리스크나신용정보에따라각기다른방식을채택하고, 이용자가선호하는인증방식을선택할수있는다양성을확보하는것이바람직하며, 인증이필요한영역별로분할된인증방식을적용하는것도고려해야한다. 3.1 웹표준기반공인인증서 가. 브라우저에인증서탑재 브라우저로컬저장소에공인인증서를저장하고웹서비스를통해전자서명을지원하는방식으로, 기존의공인인증서를하드디스크나별도의메모리장치 (USB) 에저장하던방식에서사용하던비표준플러그인설치가없는장점이있는반면, 본인확인및거래안전성보강을위한 OTP와같은추가인증방식이필요하다. 이방식을사용할경우기본적으로로컬저장소는웹암호 API 적용등을고려하여웹스토리지를사용시인증서보호기술을적용하는것을우선적으로권고하고있다

47 [ 그림 2-7] 웹표준기반공인인증서서비스모델제시 웹표준기반공인인증서서비스를위해서는공인인증기관은공인인증서발급을별도통신채널과 Protocol 을사용하지않고브라우저만으로발급할수있도록시스템을갖추고, 전자거래, 전자민원등이용기관은발급 저장된공인인증서를이용하여전자서명문을생성할수있도록웹페이지내에기능을구현하여야한다. 또한공인인증기관및보안업체는안전한공인인증서저장을위해다양한저장매체를도입하고웹표준과연동하여야한다. 나. 공인인증서발급 기존에브라우저플러그인을통해발급하던공인인증서를웹표준구현기술만으로발급하기위해서는공인인증기관의발급시스템과 Protocol의변경, 클라이언트인브라우저에서의발급기능구현이필요하다. 공인인증기관은 HTTP를통해발급할수있도록발급방식을변경하고, 브라우저에서는전자서명키쌍과인증서요청양식의생성, 응답을처리하여저장하는기능등을구현하여야한다. 또한공인인증기관은브라우저만으로공인인증서를발급하기위해서는발급시스템에대한변경이필요하다. 공인인증서의발급과관리는발급시스템과클라이언트간의요청과응답을위한메시지를통해이루어지며, 이때메시지는특정 Protocol 이아닌 HTTP( 또는 HTTPS) 를통해전송되어야한다

48 기존공인인증서발급시스템을활용하고웹표준을적용할수있는방법은 HTTP Transfer for the Certificate Management Protocol 를준용하는것이다. [RFC6712] 공인인증서발급 관리와관련한모든요청과응답은 HTTP를통해 PKIMessage 로처리가능하며기존발급시스템의활용또한가능하다. RFC6712 를준용하기위해서, CMP(Certificate Management Protocol) 메시지는반드시 HTTP를사용하여야하며 HTTP/1.0, HTTP/1.1 을모두지원해야한다. 또한 GET이아닌 POST방식만을사용하여메시지를전송하여야한다. PKIMessage 를전송하는동안 HTTP 헤더의콘텐츠타입으로 application/pkixcmp 로설정하여야한다. DER 인코딩 ITU.X 된 PKI Message RFC4210는 HTTP POST 요청을본문에담아보내며 HTTP 요청이성공하면서버는 HTTP 응답에 CMP 응답메시지를담아보낸다. 이경우 HTTP 응답코드는 200이어야하며요청성공과관련한다른응답코드 (2XX) 는이경우사용해선안된다. 더상세한표준내용은 [RFC6712], [RFC4210] 등의표준문서를참고해야하며, 관련표 준규격이외에도기존발급프로세스에대한변경도고려해야한다. 다. WebCryptography API 활용 웹암호 (WebCryptography) API의경우현재표준규격 (W3C Proposed Recommendation) 제정이되었고, 일부최신브라우저에는관련기능이탑재되어있어사용이가능하며 htt p://caniuse.com/#feat=cryptography 에서브라우저버전별웹암호 API 지원정보를얻을수있다

49 < 표 2-3> 브라우저별웹암호 API 브라우저명 인터넷익스플로러 (Edge, IE 11) 크롬 파이어폭스 사파리 ( 웹킷 ) 웹암호 API 소개페이지 아래와같이 WebCryptography API 를사용하여전자서명키쌍을생성할수있다. [ 예시 : 웹암호 API 사용전자서명키쌍생성 ] var subtle = window.crypto.subtle; var publickey; var privatekey; var extractable = false; var algorithmkeygen = { name: "RSASSA-PKCS1-v1_5", moduluslength: 2048, publicexponent: new Uint8Array([0x01, 0x00, 0x01]), // Equivalent to hash: { name: "SHA-256", } }; subtle.generatekey(algorithmkeygen, extractable, ['sign']).then( function(e) { publickey = new crypto.key(e.publickey); privatekey = new crypto.key(e.privatekey); resultcallback ( { publickey: publickey, privatekey: privatekey } ); }, function(e) { resultcallback(new crypto.error(e)); } );

50 생성된키쌍을이용하여전자서명을수행하는것은다음과같다. var subtle = window.crypto.subtle; var algorithmsign = { name: "RSASSA-PKCS1-v1_5" }; plain = crypto.util.stringtoarraybuffer(input); Subtle.sign(algorithmSign, privkey, plain.buffer).then( function(e) { resultcallback(crypto.util.arraybuffertostring(e)); }, function(e) { resultcallback(new cryoto.error(e)); } ); 웹암호 API이외에도암호화통신알고리즘을안전하게사용하기위해서는보안결함이발견된 SHA(Secure Hash Algorithm)-1 해싱알고리즘은더이상사용하지말아야한다 년 1월 1일이후브라우저개발사 (Microsoft, Google, Mozilla) 는 SHA-1 서명인증서에대한신뢰중단이되었으며, 기존 SHA-1 로서명발급된모든 SSL, CA 인증서는신뢰를보장할수없다. 따라서 2016 년 1월 1일이전에기존 SHA-1 을 SHA-2 알고리즘기반인증서로반드시재발급및갱신해야한다. (SHA-2 전환일정 : 웹암호 API 에관한보다상세한내용은현재표준화가진행중인 W3C Web Cryptography API( 를참고할수있다. 라. 공인인증서저장비표준플러그인기반의기존공인인증서저장환경은주로하드디스크와이동식디스크내의 /NPKI/ 디렉토리에저장되었다. 하지만웹표준환경에서는별도플러그인을사용하지못하고웹표준 File API의경우디렉토리접근이자유롭지않기때문에기존방식으로저장하는것은어렵다. 웹표준방식으로공인인증서를발급받은후저장할수있는저장매체는브라우저내의웹저장소, 보안토큰, 소프트토큰, 스마트인증등이있다

51 [ 그림 2-8] 공인인증서저장매체 - 웹스토리지 (WebStorage) 공개키 HTML5의웹스토리지 (Web Storage) 는 HTML5 표준으로웹사이트의데이터를브라우저에저장할수있는새로운자료구조로서기존쿠키 (Cookie) 의단점을개선하기위해개발되었다. 현재웹스토리지는모든브라우저에서지원가능하며저장된데이터는서버로전송되지않는다. 웹스토리지는클라이언트디바이스에직접저장되고네트워크로전송되지않기때문에네트워크레벨에서는안전할수있다. 웹스토리지는물리적으로는파일로저장되며, 이용자계정하위디렉토리에저장된다. 웹페이지가브라우저에랜더링되기전에브라우저는물리적으로저장되어있는데이터를읽어메모리에올려둔다. 브라우저개발자도구등을통해웹스토리지에저장된데이터접근이가능하며, 수정및삭제가가능하다. 공인인증서와개인키를웹스토리지에저장하고자하는경우, 세션스토리지는데이터가영구적으로저장되지않아사용이어렵다. 로컬스토리지의경우에도이용자가브라우저메뉴등을통해삭제하거나브라우저개발도구등을통해임의수정이가능하다. 따라서웹스토리지에공인인증서를저장하는경우이용자인증등추가적인보안수단과인증서보호방안을강구하여야한다. 또한물리적으로는이용자계정하위디렉토리에파일로저장되며웹암호 API로생성된 Key 객체의경우저장되지않아웹암호 API를이용하는경우데이터변환및위변조가능성에대한주의가필요하다

52 - 인덱싱된데이터베이스 (IndexedDB) 웹스토리지가용량이작고구조화된데이터를다루기엔부족하기때문에브라우저에서많은양의구조화된데이터를영구적으로저장하여검색및이용할수있도록만든 HTML5 API가인덱싱된데이터베이스 (IndexedDB) 이다. IndexedDB 는기본적으로자바스크립트객체 (Object) 를저장하며기존 RDBMS( 관계형데이터베이스관리시스템 ) 와는다르게 Object Store를만들고자바스크립트를통해저장한다. SQL과는개념이비슷하나쿼리대신 Index를사용하는것이차이점이다. 웹스토리지와마찬가지로동일출처정책에따라해당도메인만접근가능한저장소이다. 각각의데이터항목크기나데이터베이스자체의크기제한을두지않지만, 브라우저는저장용량제한을둘수도있다. [ 그림 2-9] IndexedDB 에공인인증서저장예 웹스토리지와마찬가지로클라이언트디바이스에직접저장되고네트워크로는전송되지않는다. IndexedDB 또한브라우저개발도구에서저장된데이터에대한열람및삭제가가능하다. 따라서안전한저장을위해서는추가적인암호화, 이용자인증등다양한보안및안전한인증서관리수단을강구하여야한다. 웹암호 API를이용하는경우, 키객체저장이가능한 IndexedDB를저장소로이용

53 할수있다. IndexedDB 에웹암호 API 를이용해생성된키객체등을저장하는 경우웹스토리지와는달리별도의데이터변환등이필요치않다. - File API 공인인증서의발급과저장에 W3C 웹표준의 File API를사용할수도있다. 발급받은공인인증서와개인키를 [PKCS12] 로변환한후 mime-type 을 application /x-pkcs12 로설정하여이용자단말기로다운로드할수있으며, 이용자는다운로드된 [PKCS12] 파일.p12 또는.pfx 파일을브라우저에서이용할수있다. mime-type 설정을이용한다운로드방식이외에도 W3C File Writer API를이용할수있으나, 현재표준화가진행중에있어일부브라우저에서만한정적으로지원되고있다. File Writer API를이용하는경우이용자가파일다이얼로그박스로파일을선택하는것보다브라우저를이용하여비교적자유롭게.p12, pfx 파일을처리할수있다. 또한브라우저의 Drag&Drop 기능과결합하여이용자단말기의파일시스템에 [PKCS12] 로저장한인증서를브라우저에서편리하게이용할수있다. Drag&Drop은대부분의브라우저에서지원가능하며, 이용페이지에서전자서명이요구되는경우 [PKCS12] 파일을이용자가 Drag&Drop으로이용페이지에넣고비밀번호를입력함으로써전자서명처리가가능해진다. File API를이용하여파일형태로공인인증서와개인키를저장하여이용하는경우, 인증서및키파일에대해사용자가관리해야하는불편함등이발생할수있으며, 복사 유출 분실등에대한위험이여전히존재한다. - 보안토큰 (HSM) 보안토큰은하드웨어장치내에서공인인증서를생성및저장하고전자서명을수행하는 USB 인터페이스를갖춘개인휴대용저장매체 ( 대부분보안 USB나휴대폰 USIM 활용 ) 를말한다. 보안토큰은하드웨어칩기반으로공인인증서및개인키를보관하고전자서명등암호연상기능을수행함에따라전자서명생성요청에대해보안토큰은내부의개인키를이용하여전자서명을생성하고결과값만을보안토큰외부로전달한다. 결과적으로공인인증서와관련한모든연산을보안토큰칩내부에서수행함으로써개인키에대한유출위험이최소화된다

54 보안토큰을이용하기위해서는 PKCS11 표준 API를사용하여야한다. 따라서하드웨어장치에대한드라이버프로그램과이용을위한표준 API의설치가필요하다. 또한웹페이지내데이터에대해전자서명하기위해서는브라우저와의연동이필요하나현재플러그인없이브라우저에서보안토큰하드웨어매체에접근하거나브라우저에데이터를연동하는것은불가능하다. 이와관련한표준제정논의가진행되고있으나현재로서는별도의실행파일기반의소프트웨어설치가필요하며, 최근로컬서버로작동하는별도소프트웨어를설치하는방법이이용되고있다. 본안내서에서는로컬서버를활용하는방법에대해기술한다. 로컬서버방식은브라우저가로컬PC에설치된소프트웨어에접속하여전자서명을요청하고응답을처리하는방식이다. 유럽에서많이사용되고있는 e-id에서도이와같은방식으로 e-id 카드리더기와브라우저간연동을처리한다. PC에설치되어브라우저와연동되는보안토큰클라이언트소프트웨어는단일소프트웨어로구현될수있으며, 다음과같이편의상여러개의모듈로나뉠수있다. [ 그림 2-10] 보안토큰과브라우저간연동모델 브라우저는보안토큰클라이언트에 HTTP( 또는 HTTPS) 접속후 JSON 타입의명령어를전달함으로써보안토큰을이용한공인인증서비스를제공하게된다. 로컬서버와통신하기위한포트는 8443포트를사용하며, XMLHTTPRequest( 이하 XHR) 등을활용한다

55 target.contentwindow.postmessage(json-message, - 소프트보안토큰 (HSM) 공인인증서를안전하게저장 이용하는보안토큰과같은물리적하드웨어매체가작동하는방식을소프트웨어로구현한것이소프트웨어방식의보안토큰즉, 소프트토큰이다. 소프트토큰을브라우저와연동하기위해서는보안토큰과동일한연동방식을이용할수있으며, 별도의연동방식을이용할수있다. 소프트토큰은브라우저이외에도모바일소프트토큰, PC 소프트토큰등의실행파일기반에서사용할수있다. - 스마트인증 (Smart HSM) 스마트인증은스마트폰과같은모바일기기의 USIM, ese 등보안모듈을모바일통신을통해 PC와같은타기기에연결하여전자서명생성키등비밀정보를안전하게저장및보관하고키생성및전자서명생성등을처리하는하드웨어와소프트웨어를총칭하는것이다. 기존스마트인증서비스는보안토큰인터페이스와동일하게만들고브라우저플러그인을통해서비스가되었으나, 플러그인없이동작하기위해서는별도의연동방법이필요하다. HTML5 WebRTC를활용한방법, 외부의서버를통한방법등다양한연동방법이가능하다. [ 그림 2-11] 스마트인증이용절차예시

56 마. 공인인증서이용브라우저를통해발급된인증서를이용하기위해서는각저장매체에저장된인증서목록을조회하고해당인증서를이용하여전자서명문을생성하는기능의구현이필요하다. 하지만브라우저샌드박스보안정책, 동일출처정책으로인해브라우저내의웹스토리지에저장된인증서를이용하는경우제약이발생한다. 이에본안내서는웹스토리지나인덱스DB 에공인인증서를발급 저장한경우동일출처 (Same-Origin) 와교차출처 (Cross-Origin) 환경에서공인인증서를이용하는방법을기술한다. - 동일출처 (Same-Origin) 정책환경에서공인인증서사용동일출처정책은한개의 URI 출처 (Origin) 에서문서나스크립트가다른 URI 출처자원과상호작용을하지못하도록제한하는보안정책이다. 두웹페이지의 Protocol, 호스트, 포트가동일하면동일출처 (Same-Origin) 이며, 하나만달라져도다른출처로처리된다. 공인인증서저장매체로웹스토리지를이용하는경우는동일출처정책영향을받게되며, 이로인해공인인증서를발급한웹사이트 ( 이하발급사이트 ) 와공인인증서를이용하는웹사이트 ( 이하이용사이트 ) 가상이한경우발급된공인인증서를이용하지못하는제약사항이발생한다. 따라서동일출처환경으로만공인인증서발급과이용을제한하거나, 동일출처환경에서발급된공인인증서를타웹사이트에서이용할수있는기능을제공할수있다. 이경우웹스토리지에발급된인증서를 PKCS12 형식의파일로내보내고타웹사이트에서해당파일을불러와사용하는등다양한방안이이용될수있다. 공인인증서의발급과저장이 PKCS12 로이루어지고, 이용사이트에서 Drag&Drop 방식으로공인인증서가이용되는경우, 동일출처및교차출처여부와관계없이이용이가능하나공인인증서의저장및이용관리에대해사업자및사용자의주의가필요하다. [ 그림 2-12] Same-Origin 환경에서의공인인증서이용

57 - 교차출처 (Cross -Origin) 환경에서공인인증서사용인증서발급사이트와이용사이트가다른 Cross-Origin 환경하의이용사이트에서발급사이트의웹스토리지에발급된공인인증서를이용하기위해서 HTML5 Web Messaging 표준이활용될수있다. 발급사이트와이용사이트간에 postmessage 통신을통해발급사이트에서생성된전자서명문을이용사이트에전송함으로써공인인증서를이용할수있다. 이경우전송되는메시지는암호화하여 JavaScript injection 취약점에대비해야한다. [ 그림 2-13] 공인인증서상호연동 Web Messaging 은기존 HTML에없던메시지통신방식으로 HTML5에서새로추가되었다. 이는일반적인 Windows API에서사용하던메시지이벤트를이용하는방식과거의동일한형태이다. Web Messaging 을이용하는일반적인방식은다음과같다. a. postmessage( ) 를이용하여메시지를목표의메시지큐에넣는다. b. dispatch 를통하여메시지큐에서메시지를추출하여목표에전달한다. c. onmessage 이벤트핸들러에서메시지를받아서처리한다

58 [ 그림 2-14] Web Messaging 메시지통신기능 Web Messaging 은 cross-document messaging 과 channel-messaging 두가지방식이 있으며, postmessage 메소드의정의는다음과같다. windows.postmessage(message, targetorigin, [ports]); message : 송신메시지 targetorigin : 목적지도메인, 메시지수신도메인지정, 특정도메인이아닌경우 * 지정 ports: 메시지포트 ( 생략가능 ) - 웹표준기반공인인증서비스의보호웹표준으로구현되는공인인증서발급및이용기능은웹취약점에대한보호, 자바스크립트소스에대한보호, 통신구간에대한보호, 저장소에대한보호기능을필요로한다. 또한공인인증서를브라우저내에저장하는경우피싱, 파밍등에대한대비가필요하다. 이와같은보안위협에대처하기위해서자바스크립트샌드박스, 웹콘텐츠보호 (W3C CSP), 자바스크립트동적로딩, 자바스크립트난독화및암호화, 자바스크립트무결성검사, 저장소의해킹여부판별, 유출여부판별확인등의보호및검증수단을강구해야한다

59 < 표 2-4> 해킹및금융사기주요기법 기법키로거트로이목마메모리해킹 MITM 후킹스미싱보이스피싱피싱파밍 설명사용자의키보드입력정보를몰래수집하고외부로전송하는프로그램사용자가인지하지못한상태에서파일, 입력정보및네트워크전송정보를수집하거나임의의명령어를실행하는등의악성행위를목적으로개발된프로그램실행중인프로그램의메모리영역에접근하여중요정보를추출하거나변조하는기법네트워크구간이나프로그램내부데이터전송구간에서전송되는정보를수집변조하는기법프로세스등을대상으로내부에삽입되어데이터의흐름을변경하거나데이터자체를변조하는기법 SMS나피싱이결합된용어로피싱 SMS를전송하여사용자가특정사이트에접속하거나악성앱을설치하도록유도하는기법전화를통해기관을사칭하거나음성과개인정보를이용하여금융정보를수집하고현금을인출하는형태의금융사기이메일등을통해정상적인사이트로위조된변조사이트에접속을유도하여개인정보및금융정보를수집하는기법 DNS 설정변경등을통해정상적인사이트로의접근을위조된사이트로접속시켜개인정보및금융정보를수집하는기법 3.2 대체인증수단 가. 대체인증기술 금융위원회는전자금융감독규정제37조개정을통해 금융회사또는전자금융업자는전자금융거래의종류 성격 위험수준등을고려하여안전한인증방법을사용하여야한다 로변경했다. 이는공인인증서또는이와동등한수준의안정성을보장할경우다양한인증, 보안기술을활용할수있는기반을마련한계기가되었으며, 현재대체인증기술로생체인증, OTP인증, 신분증인증, 간접인증, 대면인증등다양한대안을조

60 합하여사용하고있으나, 충분한안전성을확보하면서인터넷상에서사용할수있는기술로받아들여지는것은인증서, OTP정도이고나머지는보조적인수단으로사용되고있다. 현재대체인증수단의경우인터넷, 모바일의본인및결재인증용도로사용하는데있어비용적으로나개인정보보호문제로일부사용에제약및보완이필요한상황이다. < 표 2-5> 대체인증방식 인증방식세부인증기술설명 생체인증 지문인식인증화자인증서명인증기타 등록된이용자의지문일치여부로인증음성인식과구분되며말하는사람이예전등록된화자와일치하는지여부확인이용자의서명특성에기반하여인증홍체인식, 심박특성, 음성특성인증등 키입력패턴인증동작제스처인증사용자패턴을사전에등록인증에활용 특징기반추론인증신분증인증 AML KYC 간접인증평판이력간접대면인증카드인증 OTP 토큰인증 질문에대한답을유도하는 QA 활용여권주민증, 면허증등신분증을업로드하여인증, 얼굴인증과결합사용가능체크리스트에의한인증, 다양한체크 Factor로거래상대방의신뢰성, 진위여부를인증정보소유자가해당정보를확인해낼수있는지여부로인증, 이메일인증, 문자인증, ARS 인증, CallerID 인증등의비금융정보기반인증과신용카드금액인증, 계좌 1원이체후소유주확인증금융정보기반인증으로구분가능인증의보조수단으로사용. SNS 계정평판, 검색평판조회우편수신여부로인증, 다른신분증의특성정보를이용한인증 ( 신분증을갖고있는사람만이제시가능한정보요구 ) 3D Secure, CVC, ARS등신용카드정보에기반한인증일회용비밀번호를발생기를이용한인증, 최근신용카드일체형으로카드인증과병행해서 2-factor 인증

61 나. FIDO(Fast IDentity Online) 생체인증 최근애플, 삼성을시작으로바이오메트릭 (biometric) 즉생체정보를활용한솔루션이스마트폰결제인증에도사용되기시작하고있으며, 생체인증기술표준화의중심에 FIDO 얼라이언스 (Alliance) 가있다. FIDO 얼라이언스는온라인환경에서생체인식기술을활용한인증방식에대한개방형기술표준을정하기위해 2012년두가지표준으로구성되었으며, 현재아이디와패스워드방식대신에상대적으로탈취하기어려운개인의고유한생체정보즉음성, 지문및얼굴인식등을인증과정에사용하는비 ( 非 ) 비밀번호인증표준인 UAF(Universal Authentication Framework) 방식과기존아이디, 패스워드인증방식과함께추가의보안정보를보관하는 USB 동글및스마트카드와같은별도의인증장치를사용하는이중인증인 U2F(Universal 2nd Factor) 방식으로구성되어있다. [ 그림 2-15] FIDO 인증시나리오 아이디와패스워드기반의인증방식은파밍, 메모리해킹과같은기법으로손쉽게탈취할수있기때문에생체정보를이용한인증기술의활성화및표준화가필요하며그중심에 FIDO와같은생체인증기술이있다. 현재일반적으로가장많이활용되고있는아이디, 암호와같은지식기반 (Something you know) 방식에서, 인증서및 USB를활용하는인증방식인소유기반 (Something you have) 및생체정보를이용하는생체기반 (Something you are) 방식의기술적용시국제인증기술표준규격에대해이해하고적용하는것이바람직하다

62 3.3 인증관련기술적보완방식 가. 일반운영체제나브라우저에서인증서를사전탑재하는방식 국내의반인증서사용움직임과달리전세계적으로는안전한방식으로인증서를사용하여인터넷거래를가능하게하려는움직임이활발하게일어나고있으며 Intel의하즈웰이상버전에서는 IPT(Identity Protection Technology) 기술의일부로인증서저장방식이들어가있어별도의보안토큰배포없이도인증서를안전하게사용할수있다. [ 그림 2-16] TrustZone Hardware Architecture ( 스마트폰의경우 ARM의 TrustZone 기술을사용하여인증서를안전하게저장하고사용할수있는기술들이점차보급되고있는상황이다. 그러나이러한시스템에포함된장치를통해공인인증서를사용하는데에는여전히제약이따른다. 이는공인인증서에서사용하는식별번호로인한문제로 IPT나 TrustZone 에포함된기술들은현재전세계적으로널리통용되는범용기술까지만지원하고있어식별번호의추가가불가능하다. 결국해당식별번호규격을지원하는방식으로변경되기전까지는저렴하고안전한이런장치들을이용하여 HTTPS 에포함된클라이언트인증서를활용한이용자인증기능사용이불가하다

63 3 전자결제 1. 개요 온라인결제수단의등장과스마트폰확산으로온라인과모바일환경에서전자상거래 가일반화되었다. 또대부분안전한전자상거래를위해카드사가인증하는다양한신 용카드기반의결제서비스가사용되고있다. 이러한신용카드기반의결제서비스기술은정부의안전성과무결성준수규정에따 라이용자확인, 서버인증, 통신채널보호, 통신데이터암호화, 거래내역의위변조방지, 거래부인방지기능등을지원해야한다. 2014년 9월부터금융위원회는 전자상거래결제간편화및 Active-X 해결방안 및후속조치를통해안전성과무결성을지원하는전자결제수단의경우전자상거래에서카드결제시공인인증서의무사용을폐지하였다. 이에따라카드사나전자금융업자 (PG) 들이공인인증서외에대체인증방식과직접카드정보를수집, 저장하여영업에활용할수있는환경이마련되었다. 현재는신용카드기반의 ISP(Internet Secure Payment), 일반결제서비스와스마트폰간편결제, 휴대폰소액결제, 전자화폐등을활용한전자결제서비스가일반적으로제공되고있으나, 최근페이팔, 알리페이, 텐페이와같이본인에대한사전인증절차를사후확인절차로전환하여편의성을제고하는방식의 One-Click 간편결제와같은다양한전자결제방법이확산되고있다. 특히모바일카드방식의결제는스마트폰사용보편화, 앱 (App) 방식카드발급확대등 으로꾸준히증가하고있으며, 다양한모바일결제인증기술들이적용되고있다

64 참고자료 전자상거래결제간편화방안 금융위원회와금융감독원은 전자상거래결제간편화방안 을통해아래와같은내용의결 제간편화방안에대한조치를추진하고있다. 1. 공인인증서의무사용폐지전자상거래에서카드결제시공인인증서의무사용폐지 (5.20, 금융위원회 ) - 현재공개키 (PKI) 기반기술을공인전자서명방식으로사용되고있지만, 전자서명요건을충족하는다양한인증기술을공인전자서명기술로인정 - 웹표준기반의공인인증서기술개발및보급 2. 카드정보저장허용과정보보호 - 기술력 보안성 재무적능력등정보보호능력 ( 시스템 ) 을충분히갖춘 PG사에대해서카드정보저장허용 - 적격 PG사는전자상거래과정에서카드회원의동의후수집 저장 3. 간편결제방식도입확대 - 대체인증수단제공카드사에인센티브 (IT실태평가 ) 부여 - 페이팔, 알리페이와경쟁할수있는국내간편결제서비스에대한인센티브부여 - 금융보안원금융보안적합성시험 ( 시험기준확인필요 2. 사용현황 2014년 9월규제완화이후각업체들은시장을선도하기위해경쟁적으로다양한방법과기술을도입하며결제프로세스를간소화하는간편결제가활성화되면서다수의소비자들이스마트폰을활용한간편결제를이용하면서시장이급속도로성장하고있다. 현재는신용카드기반의 ISP(Internet Secure Payment), 일반결제서비스와스마트폰간편결제, 휴대폰소액결제, 전자화폐등을활용한전자결제서비스가일반적으로제공되고있으나, 최근페이팔, 알리페이, 텐페이와같이본인에대한사전인증절차를사후확인절차로전환하여편의성을제고하는방식의 One-Click 간편결제와같은다양한전자결제방법이확산되고있다

65 < 표 2-6> 국내간편결제현황 간편결제명칭설명웹호환성여부 카드사앱카드 간편결제 모바일앱에이용카드를등록해두고온라인과오프라인에서사용. ( 롯데, 신한, 삼성, 현대등 ) 모바일 App 기반 페이올웹표준기반이며카드사서버에카드정보를등록해두고사용. (BC 카드 ) 웹표준 UI SSG Pay 엘로페이페이나우페이핀시럽페이스마일페이티몬페이 유통사인신세계에서도입한간편결제. 모바일앱을이용하여카드를등록해두거나충전하여사용, 충전방식중신용카드충전이별도로있음 ARS로비밀번호등록하여사용하는계좌기반직불결제서비스. 주요사용처로인터파크가있음 PG사인 LGU+ 에서제공하는간편결제. 카드, 계좌이체및휴대폰결제를지원정보소유자가해당정보를확인해낼수있는지여부로인증, 이메일인증, 문자인증, ARS 인증, CallerID 인증등의비금융정보기반인증과신용카드금액인증, 계좌 1원이체후소유주확인등의금융정보기반인증으로구분가능 SK플래닛주도로 11번가쇼핑몰에서사용. 신용카드를서버에등록해두고사용하는방식지마켓과옥션에서사용가능한결제수단. 카드정보를서버에등록해두고사용하는방식티켓몬스터앱을이용하여카드정보를등록해두고사용. 티켓몬스터사이트에서사용 모바일 App 기반 간편결제가입시 ActiveX 와 공인인증서사용 모바일 App 기반 모바일 App 기반 웹표준 웹표준 모바일 App 기반 페이코 NHN 엔터테인먼트에서제공하는간편결제서비스모바일 App 기반 모카페이카드정보를앱을통해등록해두고바코드를통해오프라인결제에사용모바일 App 기반 네이버페이 네이버에서제공하는간편결제. 카드및계좌정보등결제정보등록후사용, 온라인송금의경우앱이용 웹과모바일 App 기반 카카오페이다음카카오에서제공하는간편결제. 카드정보를앱을통해등록후사용모바일 App 기반 엘페이롯데유통망과롯데멤버스를통한포인트중심의간편결제서비스모바일 App 기반 H 월렛현대백화점유통망을통한포인트중심중심의간편결제서비스모바일 App 기반 삼성페이 페이게이트 금액인증 마그네틱결제방식 (MST) 과근거리무선네트워크 (NFC) 방식을모두 지원하여추가인프라투자없이기존인프라사용가능 페이게이트에서제공하는간편결제. 카드정보등록없이바로결제 모바일 App 기반 웹표준

66 < 표 2-7> 해외간편결제현황 간편결제명칭설명웹호환성여부 안드로이드페이 구글에서안드로이드스마트폰내에서의결제를지원하기 위한플랫폼 안드로이드 OS 기반 구글월렛구글에서웹상에서의결제를지원하기위한플랫폼웹표준 아마존페이 아마존내에서만사용하던원클릭페이를포함한결제플 랫폼을일반상점에게까지확대한결제환경 웹표준 애플페이 지문인식터치 ID 로인증하며애플에서제공하는앱내결제 환경 Tokenization 사용 ios 기반 위쳇페이중국텐센트위쳇앱내에서의결제환경모바일 App 기반 페이팔페이팔서버에카드정보를등록한후사용웹표준 알리페이 알리페이서버에결제정보등록후사용 일부플러그인 기술사용 2.1 은행계좌기반결제수단 가. 실시간계좌이체 LG 유플러스는은행제휴를통해서실시간계좌이체서비스 (ActiveX 기반 ) 를제공중에 있고, 이니시스는뱅크타운계좌이체부문을인수하여실시간계좌이체서비스 (ActiveX 기반 ) 를제공하고있다. 나. 가상계좌결제 은행계좌에서파생된가상의계좌번호를벌크로생성해두었다가실제거래시해당 거래와 1:1 로매핑되는가상계좌번호를조회하여고객이가상의계좌로입금시은행 의통지에의해입금대기상태의거래를입금완료로종결한다

67 다. 간편송금 간편송금앱을설치하고가입 / 본인인증후, 은행계좌를연결시키면 1) 송금자가수취인의연락처와금액을입력하고송금하면, 2) 수취인이 받을계좌를지정하는웹페이지 링크가담긴문자메시지를받고, 3) 수취인이웹페이지를통해입금받을계좌를지정하면보낸금액이즉시입금되는방식으로 1회 /1일이용한도에제약이있다. 2.2 신용카드기반결제수단 LG 신용카드기반결제는간편결제방식으로확산되고있으며, 아래와같이전자결제 승인을위한다양한인증방식을활용하고있다. < 표 2-8> 주요인증방법 인증방법 공인인증서 구인증 설명여러가지인증방법중하나로서사전에발급받은공인인증서와비밀번호를통해신용카드결제인증신용카드번호, 카드비밀번호앞2자리와생년월일 (2014년 8월이전에는주민번호뒤 7자리또는사업자번호 ) 로카드소유자확인을하는인증방법 안심클릭인증 카드발행사와카드소유자간에상호알고있는정보를토대로안심클릭인증 정보를생성하고이용자가등록된올바른인증정보를제공할수있는지여부로 본인확인 ISP 인증 카드발행사와카드소유자간에상호알고있는정보를토대로 ISP 인증정보를 생성하고이용자가등록된올바른 ISP 인증정보에근거하여생성한전자서명 (Digital Signature) 을서버에서검증하여본인확인 AA 인증 랜덤한승인금액을생성하여이용자가승인금액이얼마였는지알아낼수있는지 여부로본인확인또는승인금액을고정하고가맹점명칭에포함된랜덤코드를 이용자가알아낼수있는지여부로본인확인 ARS 인증 카드사에서이용자가사전에지정한전화번호로전화를걸어본인확인을하는 형태로, ARS 시스템에의해자동으로이용자에게전화가걸리며, ARS 멘트로거래 내역사실이이용자에게안내되면확인후, 최종적으로고객이승인

68 가. 결제서비스제공주체별분류 < 표 2-9> 결제서비스제공주체별분류 결제서비스제공주체 설명 카드사제공인증 신용카드사에서주도하여제공하는인증방법 ISP, 안심클릭, 모바일 ISP, 모바일안심클릭, 앱카드, 스마일페이, ARS 인증 PG 사제공인증 AA 인증, 케이페이, 페이나우, 셀프페이, 엠페이, 페이핀 [ 그림 2-17] mpay 결제프로세스

69 나. 플랫폼기반분류 < 표 2-10> 플랫폼기반분류 플랫폼 설명 PC ActiveX 모바일앱모바일웹 Only 전화 (ARS) ISP, 안심클릭카드사앱카드, 모바일 ISP, 페이나우, 엠페이, 페이핀모바일안심클릭 ARS인증결제 웹표준 AA 인증 ( 휴대폰문자필요 ) [ 그림 2-18] 페이핀결제프로세스

70 2.3 통신사모바일앱 ( 메신저 ) 기반결제수단 가. 통신사소액결제 통신사의통신요금청구시결제대금을함께청구하여대금을수납하며, 결제방식은전화번호및이와매핑된주민번호 ( 또는개인식별번호 ) 를입력하면본인휴대폰으로인증코드가 SMS로전송됨, 이를이용자가해당 SMS 코드를인증정보로입력하여결제완료하는방식이다. 나. ARS 인증기반결제 통신사요금청구시결제대금을함께청구하여대금을수납하며, 결제방식은전화번호및이와매핑된주민번호 ( 또는개인식별번호 ) 를입력하면본인전화로 ARS 콜이인바운드로걸려오거나이용자가 ARS번호로아웃바운드콜을하게되면인증번호를확인하고결제페이지에입력하여결제를완료하는방식이다. 다. 모바일앱 ( 메신저 ) 기반결제 모바일메신저를통한결제방법으로신용카드정보등록과인증절차를거친후신용카드정보를카드사서버와 PG에나눠보관하여안전성을강화하고있다. 온라인결제시에는모바일메신저실행후가맹점상품을선택하고사전등록한비밀번호와 OTP 기반의결제인증번호 (2회) 를결제페이지에입력하여결제완료하는방식이다

71 2.4 해외결제수단 해외는비실시간의계좌기반결제수단이광범위하게사용되고있으며, 최근계좌기반 결제수단의경우투채널인증방식을통해안전성과무결성, 본인인증을강화하고있다. 가. 해외신용카드결제방식 < 표 2-11> 해외신용카드 결제방식 카드번호 + 유효기간결제 CVV/CVC 인증결제 설명신용카드의유효성만을확인하여결제 CVV/CVC Code는고객이실제로카드를소지하고있는지여부를확인하는목적이며본인인지여부를확인하지는못함 AVS 인증결제 카드등록자의주소와결제시입력한주소가동일한지여부로인증 북미지역에서만유효한인증방식이며고객의입력실수등에의한 인증오류발생빈도가높음 3D Secure 인증 AA 인증 국내안심클릭의원본이며 Visa 3D Secure, MasterCard SecureCode, JCB J/Secure 등카드브랜드별로다양한용어로통칭됨. 카드발행사에서 3D Secure 인증을지원하는 ACS서버를운영해야하지만국제적으로모든카드발행사가해당인증방식을지원하지는않음거래금액을인증코드로이용하거나가맹점명칭에인증코드를추가하여승인을내고고객이해당정보를알아낼수있는지여부로인증 나. 페이팔 최초카드정보등록시본인확인을위해 1.95달러정상거래승인을카드사에요청하고, 정상카드의경우인증코드 4자리를사전에등록한휴대폰이나메일로전송한다. 카드소유고객이전달받은 4자리인증코드를온라인에서입력하면본인확인이완료된다. (1.95달러는 24시간이내에환불 ) 카드정보등록이후에는페이팔로그인정보만으로온라인결제가이루어지며, 최근에는카드결제대행이외에도이메일을통한온라인송금서비스도제공하고있다

72 [ 그림 2-19] Paypal 프로세스 다. 알리페이 은행계좌기반결제서비스로고객은최초계좌등록시계좌소유주확인을위해서알리페이에서등록된고객계좌로소액을 2회이체한다. 고객은이체된금액이얼마인지를자체적으로알아내서해당금액을인증코드로입력하여본인이정당한계좌소유주임을증명하는방식이다. 알리페이는이러한본인확인절차후온라인 ( 모바일 ), 오프라인신용카드연동결제, 계좌충전지불, 물품수령지불등의결제방식을활용하여제3자결제대행서비스를제공하고있다

73 라. 애플페이 고객의신용카드와체크카드를 itunes등애플서비스이용과정에서등록할수있으며, 신용카드 (American Express, MasterCard, Visa) 를직접사진으로찍어서 (OCR) 등록할수있다. 애플페이는 NFC와터치ID( 지문인식 ) 조합을통해본인확인및부인방지기능을제공하며, 애플은결제안전성을보장하기위해신용카드정보는전용보안칩 (Secure Element) 에암호화해서저장하고, 결제시일회용보안토큰을생성하고결제상점은해당토큰을 NFC로전달받아네트워크를통해제휴금융기관에서결제카드유효성을검증한다. 이때금융기관은애플사에보안토큰의유효성검증을요청하고승인응답코드만상점에전달한다. 아이폰분실시에는 나의아이폰찾기 를통해해당단말에대한지불기능을중지할수있다. 3. 대체기술 전자결제시결제창, 전자서명을통한결제인증, 보안영역등에서 ActiveX 등비표 준기술을사용한다. 본안내서에서는결제창과카드결제에서만사용하는전자서명, 인 증, 보안에대한단계별, 정책적, 기술적대응방안을명시한다. 3.1 결제단계별개선방안 기본적으로결제단계에서플러그인을사전에설치해두는접근방식을지양하고, 고객이선택할인증방식에대비하여미리플러그인을설치하는방식보다는해당플러그인이필요한단계에서만전자결제기능을활성화하여사용하는형태로제공한다. 실시간전자결제활성화에대응하기위해서는 Single Page 내에서결제단계를구현하고서버와의통신은 XMLHTTPRequest 또는 DOMRequest 등의통신방식을사용할수있다. 현재플러그인에의존하여처리하는전자결제방식및이에대한개선방안은아래와같다

74 < 표 2-12> 결제단계별플러그인사용요소및개선방안 결제단계단계별플러그인사용요소개선방안 PG 사결제화면 카드사선택이나이벤트표시 등결제화면자체를 ActiveX 등의플러그인으로구현 HTML5 나자바스크립트프레임워크등을 이용하여 UI 를구현 카드사 ISP 인증 ISP 결제 UI 전체가플러그인 으로구현 BC 카드 PayAll 등웹표준방식의 ISP 인증으로전환 통신채널암호화를위한 플러그인사용 웹표준방식의 E2E 통신채널암호화 방식으로전환 카드사안심클릭 인증 안심클릭입력정보의보호를 위해키보드보안프로그램설치 주요인증정보에대하여직접입력하지 않도록구현및의입력정보보호방식적용 공인인증서사용을위한 플러그인을설치 웹표준방식의공인인증서사용또는 ARS 인증, OTP 등대체수단인증방식을사용 카드사 misp 인증 ISP Mobile App 을사용하여 결제 BC 카드 PayAll 등웹표준방식의 ISP 인증으로전환 가상계좌조회 무통장가상계좌입출금거래일의경우 ActiveX 등의플러그인을이용하여가상계좌번호조회 가상계좌번호를 XMLHTTPRequest 또는 DOMRequest 등 Ajax 통신을통하여조회계좌정보에대한무결성검증을위하여자바스크립트에서 Hash 검증및자바스크립트에대한보호조치적용 실시간계좌이체 ActiveX 등의플러그인이용하여 실시간계좌이체구현 은행의인터넷뱅킹의웹표준화수준과연관이있으며실시간계좌이체를위한 ActiveX 실행이불가한환경을고려하여플러그인의사전설치가아닌선택시실시간활성화방식으로구현. 이용자가다른결제방식을선택할수있도록옵션을제시 휴대폰결제 주민번호등개인정보의일부또는전부가휴대폰결제를위해사용되며이의보호를위해플러그인사용 결제과정에서민감한개인정보를사용하지 않도록본인확인방식을개선

75 3.2 결제창대체방안 각결제서비스제공업체별로고유한결제창을구현하여제공하는결제창은일체의플러그인을사용하지않고구현한다. 특히결제창을팝업 (Popup) 으로구현할경우 Auto Popup을지양하고가능한 User Popup으로한다. - Auto Popup은브라우저의팝업차단매커니즘에의해블록되는경우가많고이를해결하기위해서 ActiveX 등의플러그인이필요하다. - User Popup은이용자가명시적으로팝업을띄우는행위를하는경우로브라우저의팝업차단설정에영향을받지않으며동시에팝업차단문제해결을위한플러그인도필요하지않다. - 또한모바일환경등을감안할때결제창의팝업이용없이화면전환형태로구현하거나 <Div> Tag나 <iframe> 등을이용하여 Mesh-up하여구현하는방식도검토가능하다. 3.3 전자결제인증대체방안 웹과스마트폰앱을연동하는결제방식등최근등장하고있는표준기반의다양한인증방식도입에대한검토가필요하다. 카드결제의경우 EMV(Europay, Mastercard, Visa) 기반의 IC카드표준규격을준수하고추가적으로전자결제인증정보를웹을통해서전달하는경우에는거래연동 OTP 등노출되더라도관계없는 2-Factor 인증정보를사용하거나별도보호방안을적용할수있다. 또한전자결제인증정보를웹이외의다른채널을통해서전송하는방식도고려할수있다. 3.4 전자결제보안대체방안 전자결제보안은인증이나암호화등특정요소에집중함으로인해다른요소 ( 물리보안, 네트워크보안등 ) 에취약점이발생하지않도록주의한다. 전체적인보안성의유지를위하여 PCI-DSS(Payment Card Industry-Data Security Standard) 인증등 정기적 으로 제3의전문가 를통해종합적인보안성을검증받는체계를도입하는것이바람직하다. 또한내부통제를위해보안관리조직은물론, 금융사기방지를위해실시간모니터링시스템 (FDS) 을운영하거나다양한보안 S/W, H/W를사용자의선택에따라설치및사용가능하다. 일반적인전자결제보안사항은본안내서의 [1. 보안 ] 을참조하여구현한다

76 참고자료 전자결제구현시주요점검항목 1. 이용자인증은웹표준환경에서는아래와같은다양한인증을하나또는여러개를조합하여이용자인증시이용가능하다. - 이용자기억 (Knowledge) 에근거한인증방식으로기존패스워드나 PIN( 숫자로구현된개인식별번호 ) 이주로사용되었으나최근이미지패턴에근거한인증방식이소개되고있다. - 소지 (Possession) 기반인증방식으로 OTP 토큰이나소프트토큰, 스마트폰푸쉬등을통해인증코드를전송하거나확인하고이용자가입력하도록하여이용자를인증하는방식이다. - 생체 (Biometrics) 인증방식으로지문, 홍채, 음성, 얼굴, DNA 등을통해고유한특징을추출하고기존채취데이터와비교확인하고매칭하여이용자의신원을인증하는방식이다. 2. 서버인증거래상대인서버의인증은사기거래방지등을위해서는매우중요한요소로기본적으로 SSL을활성화하여신뢰할수있는정보처리시스템임을이용자가인증할수있도록하며 EV(Extended Validation) SSL 인증서를활성화하여정보처리시스템의명확한신원을이용자에게제공하여인증하는것이중요하다. 3. 통신채널암호화는기본적으로 SSL 을활용하되구현시올바른설정이필요하다. 4. 거래내역무결성보장 Hash 알고리즘을이용하여거래내역의무결성을상호검증할수있도록해야하며, 특히 CSRF(Cross-site request forgery) 등에대응하기위해 Form Data나 Parameter 에대한무결성검증매커니즘의추가가필요하다. Hash 알고리즘은가능한 SHA2 이상의알고리즘을사용하며 SHA1이나 MD5 알고리즘사용을지양한다. 5. 웹표준환경에서의부인방지는 KS 국가표준인 KS X ISO/IEC , , 을고려하여구현할수있으며현재 KS표준에추가준비중인 ISO/IEC 표준도참고할수있다. 현재부인방지의구현방식은공인인증서에서사용되는 PKI (Public Key Infrastructure) 기술을이용하여구현하는방식을사용하고있으며, KS 표준 ( ) 에서는신뢰할수있는제3자 (TTP, Trusted Third Party) 를이용한부인방지구현에대한방안도제시하고있다. 신뢰할수있는제3자를이용한부인방지모델구현시에는브라우저에복잡한암호기술을탑재하고구현할필요성이줄어들어웹표준환경에대응가능한모델이될수있지만, 제3자의신뢰성을어떻게확보할것인지에대한비기술적인과제가남아있으며, 현행법제도측면에서는공인인증기관이부인방지구현을위한신뢰할수있는제3자역할을하는것도가능하다

77 4 멀티미디어 1. 개요 비디오 / 오디오와같은멀티미디어사용은 HTML5 표준이나오기전에는 ActiveX 와같은플러그인기술을사용할수밖에없는대표적인분야였다. 그러나 HTML5 에서는멀티미디어를위한비디오 / 오디오재생을위한요소와 API, 자막을위한요소, 카메라 / 마이크제어 API, 오디오에에코와같은음향효과를주는데사용할수있는웹오디오 (Web Audio), 멀티미디어데이터의스트리밍및데이터제어를위한미디어소스확장 (Media Source Extentions), 멀티미디어데이터 DRM(Digital Rights Management) 를위한 EME(Encyrpted Media Extensions) 와같은다양한기능이추가되어 Flash Player나 ActiveX 를사용하지않고도멀티미디어를사용할수있게되었다. 다만브라우저에따라지원하는기능과화면 UI가다르기때문에개발자가 HTML5 에서제공하는기능을사용할때는사용자의브라우저버전과멀티미디어태그지원여부를확인해야한다. 현재 HTML5 표준기술을활용한오픈소스를통해개발자가쉽게적용할수있도록만든자바스크립트라이브러리등을소개한다. 2. 사용현황 현재멀티미디어와관련하여비표준플러그인과 ActiveX 를사용하는부분을정리하면크게다음과같다. 비디오재생기 : 자막 오디오재생기 : 음향효과 인터넷강좌 : 다양한강좌 인터넷방송 : 방송사나통신사등에의해서제공되는방송및 VOD 서비스 실시간인터넷중계 : 아프리카 TV와같은중계서비스 컨퍼런싱 : 동영상회의시스템 DRM이지원되는멀티미디어재생

78 3. 대체기술 별도플러그인설치및 ActiveX 사용을대체하기위해서사용가능한 HTML5 표준기술로는다음과같은것들이있다. 멀티미디어요소 : <video> 요소, <audio> 요소 WebRTC(Web Real Time Communication), Media Streaming, APIMedia Capture API 웹오디오 (Web Audio) MSE(Media Source Extensions) EME(Encrypted Media Extensions) 3.1 HTML5 Video 요소 비디오를포함하려면 HTML5 Video 요소를선언하고재생할비디오의소스를요소의속성이나 <source> 요소를사용하여지정해야한다. 비디오재생화면에제어기를표시하거나자동재생이되도록속성값을지정해야해야한다. ( 참고 : w3schools.com 의 HTML5 Video, <video controls src=" 재생할비디오파일이름 " width=" 폭 " height=" 높이 " > [ 예시 : <video> 요소사용 ] < 표 2-13> <video> 요소속성 이름 설명 src 비디오콘텐츠의위치를지정 controls 미디어제어기를표시 loop 비디오반복재생횟수 autoplay 파일이로드되자마자자동으로재생

79 width 화면에서비디오콘텐츠가표시될영역의폭을설정 height 화면에서비디오콘텐츠가표시될영역의높이를설정 videowidth 비디오콘텐츠의폭 ( 읽기전용 ) videoheight 비디오콘텐츠의높이 ( 읽기전용 ) poster 동영상데이터가로딩되고있을때보여줄이미지를지정하는속성 preload 브라우저가미리비디오콘텐츠를로딩할지지정 * auto( 기본값 ) * metadata : 비디오의메타데이터만다운로드 * none : 재생을시작하기전까지비디오를다운로드하지않음 < 표 2-14> <video> 요소의재생관련속성, 자바스크립트 API 종류이름설명 메서드 속성 이벤트 play( ) pause( ) currenttime duration ended paused canplay timeupdate 재생시작재생일시정지현재재생위치전체길이마지막까지재생했는지여부일시멈춤여부재생이가능할때발생재생중주기적으로발생 HTML 표준에서는비디오를위한코덱을지정하고있지않고, 브라우저개발자가이를 선택할수있도록되어있어, 브라우저마다지원하는비디오코덱이다르다는문제가있다

80 이러한문제를해결하기위해서 HTML5 Video 요소에서는 <source> 요소를사용하여 여러비디오코덱을지정할수있는기능을제공하고있다. <video> <source src="movie.mp4" type="video/mp4"></source> <source src="movie.ogv" type="video/ogg"></source> <source src="movie.mpeg" type="video/mpeg"></source> </video> [ 예시 : <source> 요소사용 ] 또한 HTML5 Video 요소에서는자막지원을위한 <track> 요소를지원하고있다. 자세한사용법은 HTML5Rocks 웹페이지의 Getting Started With the Track Element ( 에서살펴볼수있다. <video src= foo.ogv"> <track kind="subtitles" label="korean subtitles" src="subtitles_ko.vtt" srclang="ko" default></track> <track kind="subtitles" label="english subtitles" src="subtitles_en.vtt" srclang="en"> </track> </video> [ 예시 : <track> 요소사용 ] HTML5 Video 요소는브라우저마다지원하는코덱과실시간전송기술, DRM등의다양한문제가있으며, 이를정리하면아래표와같다. < 표 2-15> 브라우저제조사별지원코덱, DRM 제조사코덱실시간전송기술 DRM Microsoft VC-1/WMA WMA/ISMV Smooth Streaming PlayReady EME Apple H.264/AAC M4V HTTP LiveStreaming FairPlay EME Google H.264/AAC WebM Ogg MEPG-DASH HTTP LiveStreaming EME Firefox Ogg WebM MEPG-DASH HTTP LiveStreaming EME

81 브라우저에서지원하는 HTML5 Video 요소는브라우저마다지원여부와제어기모양, 세부작동방식이다른문제점이있어서, 비디오재생을위한자바스크립트라이브러리를많이이용한다. 대표적인오픈소스비디오재생기로는 video.js( 가있으며다양한브라우저와변경가능한 UI를제공하고있다. [ 그림 2-20] video.js 의비디오재생기 그외다양한 HTML5 비디오재생기들이있으며, HTML5 Video Player 비교사이트 ( 를통해브라우저에따른지원기능을확인할수있다. 3.2 HTML5 Audio 요소 오디오콘텐츠를포함하려면 HTML5 Audio 요소를선언하고재생할오디오의소스를요소의속성이나 <source> 요소를사용하여지정하고오디오콘텐츠재생을제어하기위한제어기를표시하거나자동재생이되도록속성값을지정해야해야한다. ( 참고 : w3schools.com Audio, <audio controls src=" 재생할오디오파일이름 "> [ 예시 : <audio> 요소사용 ]

82 HTML5 Audio 요소는오디오와재생제어를위한다양한속성과자바스크립트 API 를 제공하고있다. < 표 2-16> <audio> 요소속성 이름 설명 src controls loop autoplay preload 오디오콘텐츠의위치를지정미디어제어기를표시오디오반복재생횟수파일이로드되자마자자동으로재생브라우저가미리비디오콘텐츠를로딩할지지정 * auto( 기본값 ) * metadata : 비디오의메타데이터만다운로드 * none : 재생을시작하기전까지비디오를다운로드하지않음 HTML5 Audio 요소는 HTML5 Video 요소와함께미디어요소를이루고있으며, 미디어요소에정의된많은속성과 API를같이가지고있다. 오디오도비디오와비슷하게브라우저마다지원여부와 UI, 세부기능이다른문제점이있으며, 비디오처럼자바스크립트재생기를통해이를해결하고있다. audio.js ( ber.github.io/audiojs/) 는대표적인오픈소스오디오재생기이다. [ 그림 2-21] audio.js 재생기화면 Top 10 Best HTML5 Audio Players 기사 ( 에서여러오디오재생기를살펴볼수있다

83 앞의비디오재생기표에서볼수있는것처럼비디오재생기중일부는오디오재생 기기능을동시에지원하는것도있으며, 대표적인오픈소스기반멀티미디어재생기로 는 MediaElement.js( 와 jplayer( 가있다. 3.3 WebRTC WebRTC(Web Real-TIme Communations) 기술은웹환경에서화상통신, 전화통신과같은통신을위해서정의된기술이다. 현재 ActiveX를이용하고있는컨퍼런싱시스템이나아프리카 TV와같은개인인터넷방송등에도이용될수있는기술이다. 현재표준제정작업은 W3C의 WebRTC 워킹그룹 ( 에서하고있으며, WebRTC( 에서도정보를얻을수있다. 세부적으로는카메라와마이크같은장치로부터입력을받을수있는미디어캡처기능과피어통신 (peerconnection), 데이터채널관리와같은통신기능으로구성되어있다. HTML5 Rocks 의 Getting Started with WebRTC 에서간단한사용법을확인할수있다. ( WebRTC 를지원하는브라우저로는 Chrome 과 Firefox, Edge, Opera가있으며 ( ebrtcreadyyet.com), 낮은버전의인터넷익스플로러와사파리에서는지원하고있지않으나, webrtc4all( 와같은오픈소스를사용하거나 PlayRTC ( 와같은상용소프트웨어를통해 WebRTC를지원하지않는브라우저에서도사용할수있다. [ 그림 2-22] WebRTC 브라우저지원현황

84 3.4 웹오디오 웹오디오 (Web Audio) 는웹애플리케이션에서오디오를생성, 처리하는데사용하는자바스크립트 API이다. 이를사용하면여러오디오를믹싱하거나에코와같은필터효과를줄수있다. <audio> 요소는오디오재생을위한기능을제공하지만, 웹오디오에서지원하는고급기능을사용할수없다. HTML5Rocks 의 Getting Started with Web Audio API 에서사용법을확인할수있다. ( 웹오디오를지원하는브라우저에는 Chrome, Firefox, Safari가있다. 3.5 MSE MSE(Media Source Extensions) 은 HTML5 Video 에서멀티미디어데이터프리패칭 (prefetching), 버퍼링 (buffering) 등과같은스트림을제어하는데사용하는자바스크립트 API이다. 이를사용하면브라우저에서기본으로제공하는스트리밍방식이아닌제공서비스의특성에따른스트리밍을할수있어서비스내에서안정적인스트리밍을할수있게한다. Chrome, IE 11(Windows 8), Safari 8, Firefox 42, Opera 9 에서지원하며, dash.js(https: //github.com/dash-industry-forum/dash.js) 에서 MSE를지원하는 DASH 자바스크립트라이브러리를사용할수있다. 3.6 EME EME(Encrypted Media Extensions) 는 HTML5 Video와 Audio 요소를확장하여플러그인을사용하지않고도 DRM( 디지털권한관리 ) 보호된콘텐츠를사용할수있는기능이다. HTML5 Rocks의 EME WTF? ( 에서간단한예를확인할수있다. EME와같은멀티미디어콘텐츠 DRM 기술은참여, 공유, 개방을기반으로하는웹철학을훼손하는주장도있으나미디어업계와같은멀티미디어산업측면에서는매우중요한발전기술로생각되고있다. 모질라의경우 Mozilla 의사명과 W3C EME 스펙의조화 ( 의글을통해이런측면과브라우저의지원계획을살펴볼수있을것이다

85 EME 는인터넷강좌, OTT(Over The Top) 유료비디오서비스와같은멀티미디어콘 텐츠의보호가필요한서비스를위해서사용될수있다. 3.7 멀디미디어적용사례 가. 적용사례 멀티미디어요소는단순한웹문서내에서의멀티미디어파일의재생을넘어동영상사이트나음성채팅, 영상통화, VOD와같은응용에도적용되고있다. 대표적인사례를보면아래와같다. - 유튜브대표적인동영상사이트인유튜브 (YouTube, 는플래시기반의동영상재생기를 HTML5 기반의동영상재생기로모두변경하였다. [ 그림 2-23] YouTube

86 - 구글행아웃구글행아웃 ( 은구글에서서비스하는동영상컨퍼런스서비스이다. 구글행아웃은초기에는플러그인기술을사용하여서비스되었으나, 다음기사의내용처럼앞으로 WebRTC 을사용할것이라고하며현재도최신버전의구글크롬을사용하면플러그인없이사용할수있다. Google Hangouts Plugin No Longer Needed in Chrome ( 웹소통을확바꿀 구글 + 수다방 ( - WaveSurfer..js wavesurfer.js( 는웹오디오 API와캔버스를사용하여오디오시각화 (Audio Visualization) 을보여주고, 이퀄라이저기능을자바스크립트라이브러리로제공한다. [ 그림 2-24] 이퀄라이저시각화 wavesurfer.js 라이브러리는 github를오픈소스형태로제공하고있어다양한응용이가능하며깃허브 ( 에서관련코드를살펴볼수있며 wavesurfer.js 의웹오디오를지원하는브라우저로는파이어폭스, 크롬, 사파리, 오페라가있다

87 3.8 멀티미디어적용시고려사항 멀티미디어기능을사용할때웹문서내에서어떻게멀티미디어콘텐츠를표현할것인지와멀티미디어콘텐츠를단일화면안에서표현할것인지외부링크또는별도의화면에서표현할것인지와같은콘텐츠의표시방식을고려해야한다. 브라우저에서의멀티미디어요소지원여부, 지원코덱등과같은브라우저기능을고려하여지원하는브라우저와그렇지않은브라우저에대해서표현하는방법을구분할필요가있다. 최신브라우저에서는멀티미디어요소를지원하고있으나, 아직지원되지않는브라우저를사용하는경우도많기때문이다. 이런경우멀티미디어관련라이브러리에서는 ActiveX 나플래시와같은플러그인기술을사용하여최신브라우저처럼작동하게할수있다. 그러나멀티미디어관련라이브러리가모든웹사이트의요구를만족하는것은아니기때문에웹사이트에적용할때사용할기능이있는지미리확인해야한다. 또한상대적으로 WebRTC 와웹오디오, MSE, EME 관련부분은최신브라우저에서도지원을시작하는단계이기때문에단기적으로는모든브라우저에서사용할수없으므로응용에따라제한된조건에서사용여부를결정해야한다

88 5 그래픽 1. 개요 초기웹환경의그래픽은브라우저성능문제로정적인이미지처리라는환경적한계가존재하였다. 이로인해실시간으로변경되는이미지가필요한경우는이미지를서버에서생성하여사용하였다. 특히해상도에독립적인벡터이미지나애니메이션이필요한경우는플래시와같은별도의플러그인을통해처리하는방법이선호되었다. 그러나서버기반의이미지생성은정적인이미지를처리하는한계에서는벗어나지못하며플러그인방식의경우이를허용하지않는특정모바일플랫폼에서지원되지않는문제가발생하였다. HTML5 에는벡터그래픽을처리할수있는 SVG(Scalable Vector Graphics, 이하 SVG), 동적인 2D/3D 그래픽 Drawing 기능을제공하는 Canvas, 애니메이션을지원하기위한 CSS3 Animation/Transition 이제공되어브라우저에서별도의플러그인이없이도능동적으로그래픽관련기능을구현할수있게되었다. 다만각각의기능이추구하는목적과방법이다르므로정확한목적에따라사용하여야한다. 본안내서에서는각 HTML5 그래픽기능이가지는특징과선택기준을설명하고, 개발에활용할수있는몇가지오픈소스자바스크립트라이브러리를소개한다. 또이용자경험의향상을위해필수적으로요구되는렌더링성능최적화에대한기초개념에대해설명한다. 2. 사용현황 그래픽에관련된가장대표적인 ActiveX 사례는역시어도비의플래시플레이어를예로들수있다. 플래시플레이어는기존 HTML에서의그래픽기능과애니메이션구현상의한계를해결하는대안으로오랜기간동안활용되어왔다. 플래시플레이어는이미지등의그래픽뿐만아니라멀티미디어기능을복합적으로제공하였으며도구기반의애니메이션저작기능의지원등으로많은사랑을받아왔다. 대표적인사용사례는다음과같다

89 - 그래픽객체를통해동적으로구성되는이미지 ( 애니메이션의출력 ) - 벡터그래픽의표현을통한이용자의실행환경에최적화된화면출력 이러한그래픽관련플러그인들은최근의웹환경에서다른플러그인시스템과마찬 가지로다음과같은한계성을지니고있다. - 브라우저와별도로플러그인의설치필요 - 표준웹규격에포함되지않으므로콘텐츠저작환경의종속성발생 - 브라우저플러그인의구조상보안이취약해질수있는가능성존재 - 주요모바일브라우저는별도의플러그인사용이불가능하여모바일웹에서대체방안이필요하다. 3. 대체기술 그래픽기능의표현을위한대체기술은다음과같이분류할수있다. < 표 2-17> ActiveX 의그래픽기능을대체할수있는웹기술 카테고리기술설명적용대상 2D Graphics Canvas 2D 일반적인 2D 그래픽기능 <canvas> 3D Graphics WebGL OpenGL/ES 기반의 3D 그래픽 <canvas> Vector Graphics SVG 벡터기반의그래픽기능 <svg> Animation SVG Animaiton SVG 대상애니메이션기능 <svg> Animation CSS3 Animation 키프레임기반의애니메이션 DOM 요소 Transition CSS3 Transition CSS 속성설정을통한전환효과 DOM 요소 Animation requestanimationframe( ) 자바스크립트기반애니메이션을위한프로그래밍모델제공 자바스크립트

90 3.1 Canvas 를이용한 2D/3D 그래픽기능의구현 <canvas> 는 HTML5에서새로추가된대표적인그래픽요소이다. 기본적으로 <canvas> 는다음과같이일반적인 DOM 요소와마찬가지로웹페이지내에서배치가능한요소이며, 개발자는 Canvas 가제공하는자바스크립트 API들을통해그래픽기능을처리할수있다. <canvas id="my_canvas" width="300" height="300"> HTML5 Canvas 를지원하지않는브라우저입니다. </canvas> <script type="text/javascript"> var canvas = document.getelementbyid("my_canvas"); var context = canvas.getcontext("2d"); context.fillstyle = "#000000"; context.fillrect(0, 0, 300, 300); </script> [ 예시 : Canvas 2D] 위의예제는웹문서내에 <canvas> 를선언하고자바스크립트 2D API 를통해다음과 같은간단한사각형을출력한다. [ 그림 2-25] Canvas 2D 샘플코드실행결과

91 더불어앞에서설명했던바와같이 HTML5 의 <canvas> 요소는 OpenGL/ES 를지원하 는자바스크립트기반의 API 세트인 WebGL 을지원한다. 위의예제와동일한화면을 WebGL 을통해표현하면다음과같다. <canvas id="my_canvas" width="300" height="300"> HTML5 Canvas 를지원하지않는브라우저입니다. </canvas> <script type="text/javascript"> // get canvas element var canvas = document.getelementbyid("my_canvas"); // get "WebGL" graphics context var context = canvas.getcontext("webgl"); if (context) { context.clearcolor(0.0, 0.0, 0.0, 1.0); context.enable(context.depth_test); context.depthfunc(context.lequal); context.clear( context.color_buffer_bit context.depth_buffer_bit); } </script> [ 예시 : Canvas 3D(WebGL) 코드 ] 다만, WebGL 의경우현재모바일브라우저는지원하지않는경우가많으므로사용시에대상이용자환경에대한주의가필요하다. Canvas 에대한더자세한내용은다음링크목록에서표준규격, MDN의관련문서그리고브라우저의지원현황을참조한다. - Canvas 표준규격 - Canvas 지원현황 - WebGL 지원현황 - MDN의 Canvas 참조문서

92 3.2 SVG 를이용한벡터그래픽기능의구현 <svg> 는 HTML5 이전부터논의되던그래픽요소이며대부분의브라우저에서지원하고있는그래픽규격이다. XML 기반으로그래픽요소를표현할수있고벡터기반이므로확대 / 축소와같은출력공간의해상도변화에도픽셀의도드라짐현상없이미려한그래픽출력이가능하며이러한특징으로인해그래프의출력등에유용하다. <svg version="1.1" baseprofile="full" xmlns=" width="300" height="300"> <rect width="100%" height="100%" fill="blue" /> <circle cx="150" cy="150" r="100" fill="lightblue" /> <text x="150" y="150" font-size="50" text-anchor="middle" fill="white"> SVG </text> </svg> [ 예시 : SVG 코드 ] 위예제는다음과같은벡터기반의이미지결과를표시하며확대의경우에도픽셀이 도드라지는계단현상 (Jaggies) 이없음을확인할수있다. [ 그림 2-26] SVG 예제코드의실행결과 ( 좌 ) 와결과물의부분확대 ( 우 )

93 SVG의규격은매우방대하므로자세한내용은다음링크들의관련문서를참고한다. - SVG 표준규격 - SVG 플래시폴리필라이브러리 - MDN의 SVG 관련문서 구현기술관점에서의 Canvas 와 SVG 선택기준 앞에서설명한바를토대로 <canvas> 와 <svg> 의선택기준에대해살펴보도록하자. 이두가지기술모두그래픽을표현하기위한각자의규격을포함하고있지만기본적으로표현하고자하는대상과접근방식이완전히다르다. <canvas> 의경우자바스크립트를기반으로동작하는그래픽요소이므로이미지필터, 애니메이션등동적인처리가필요한게임등의웹애플리케이션에적합하다. <svg> 역시애니메이션에관련된규격이있으나, 복잡한객체와애니메이션이포함될경우사실상수작업으로코드를작성하는것이매우어려우므로그래프등확대와축소가주로사용되는그래픽요구사항이있을경우에적합하다. 가장기본적인차이점과적합한대상은다음과같다. < 표 2-18> Canvas와 SVG의비교 항목 <Canvas> <SVG> 출력방식비트맵이미지벡터 비트맵이미지편집가능불가 성능의존성자바스크립트의복잡도하위요소에의존 ( 개수등 ) 대상게임, 이미지편집등그래프, 다이어그램등

94 3.4 애니메이션및전환효과 HTML5 는다양한형식의애니메이션관련기능을가지고있다. HTML5 애니메이션기능은기본적으로각각의대상이명확하게지정되어있으므로선택의기준이그리복잡하지않다. < 표 2-19> 주요애니메이션및전환기능의비교 규격표현대상고려사항 CSS Animation DOM 요소키프레임기반애니메이션에유리 CSS Transition DOM 요소스타일속성값변경에대한애니메이션에유리 SVG Animation <svg> 없음 requestanimationframe( ) JavaScript,<canvas> 미지원브라우저에대한처리필요 (e.g. settimeout( ) 등 ) 최근이러한다양한애니메이션을자바스크립트레벨에서통합할수있는방법을제공하는것을목표로 Web Animations 라는새로운 W3C 표준규격이논의되고있으나아직규격이확정되지않았다. 각각의상세규격은매우방대하므로각애니메이션관련규격이가진특성을이해하고필요한기능을선택하는데필요한내용을소개한다. 가. CSS3 Animation 및 Transition CSS3에추가된 Animation 과 Transition 은 HTML5 에서적용할수있는가장보편적인애니메이션구현방법이다. 이는 CSS 스타일을통해애니메이션을수행할수있으며 CSS의특성상시각적인모든 DOM 요소에적용이가능하다. 좀더설명하자면 CSS3 Animation 은키프레임기반의애니메이션기능을제공하며 CSS3 Transition 은각 DOM 요소의스타일이변경되었을때속성값의전환을다양한형태로시각화할수있다. 자세한규격및문서는다음링크를참조한다

95 - CSS3 Animation 관련 표준규격 : MDN 참고문서 : - CSS3 Transition 관련 표준규격 : MDN 참고문서 : CSS3 Animation 과 Transition 이가지는성능상의특징은대부분의내용이동일하다. 다만, Transition 의경우전환효과가적용될요소들과속성을브라우저가지속적으로모니터링해야하므로속성이많은경우일부성능저하요인이될수있다. 따라서가급적필요한효과에한정해서지정하는것을주의하여개발하여야한다. 나. SVG Animation SVG는하위규격에많은애니메이션기능을포함하고있으나 SVG에한정적인애니메이션방법으로 SVG 이외의규격에는적용할수없다. SVG 애니메이션에대한항목은다음링크를참고한다. - 표준규격 : - MDN 참조문서 : 다. requestanimationframe( ) <canvas> 와같이자바스크립트기반의그래픽기능을이용한애니메이션기능은구현방법에다른별다른제약사항은존재하지않는다. 그러나자바스크립트의특성상메인스레드를사용하므로과도한애니메이션연산이웹페이지의렌더링이나 UI 동작등을지연시킬수있다. settimeout( ) 이나 setinterval( ) 과같은타이머를통해애니메이션을출력하는경우브라우저에서각프레임을렌더링하기위한시점을결정하기어렵기때문에성능에영향을줄가능성이다른방식에비해크다고할수있다

96 requestanimationframe( ) 은이러한문제를해결하기위해렌더링을위한적절한시점에자바스크립트콜백함수를호출한다. 이콜백함수내에서구현된그래픽기능은브라우저의렌더링스케줄상에큰영향을주지않고안정적으로동작이가능하다. 간략한예제는다음과같다. <canvas id="my_canvas" width="300" height="300"> HTML5 Canvas를지원하지않는브라우저입니다. </canvas> <script type="text/javascript"> var canvas = document.getelementbyid("my_canvas"); // get "2D" graphics context var context = canvas.getcontext("2d"); window.requestanimationframe = window.requestanimationframe window.mozrequestanimationframe window.webkitrequestanimationframe window.msrequestanimationframe; // set default fill color context.fillstyle = "#000000"; var box_length = 0; function render(timestamp) { // drawing filled rectangle context.fillrect(0, 0, box_length, box_length); // grow up box_length ++; requestanimationframe(render); } requestanimationframe(render); </script> [ 예시 : requestanimationframe() 코드 ] 보다자세한사항은다음링크에있는표준규격과 MDN 의관련문서를참고한다. - 표준규격 : - 참조문서 :

97 3.5 그래픽적용사례 가. 적용사례 그래픽기능은가장빈번하게사용되는기술이므로일반적인사례를살펴보는것은큰의미가없을것이다. 여기서는그래픽요소기술중 <canvas> 와 <svg> 기술에대한사례를살펴보도록한다. - Canvas의적용사례 Canvas 의가장좋은사례중의하나는역시게임이다. 익히알고있는 앵그리버드 ' 역시 HTML5 버전이제공되며 Canvas 를사용하고있다. [ 그림 2-27] Canvas 활용게임 ( 앵그리버드 ) Canvas 의경우앞에서말한바와같이다양한이미지처리및개발자가직접그래픽 출력을위한모듈을구성할수있으므로개발의자유도가높다. 특히 2D/3D 환경을 아우르는기술을통해보다효율적인게임렌더링모듈을구성할수있다

98 - SVG의적용사례 SVG는앞에서말한바와같이확대 / 축소가빈번한환경에서특히유리하며가장대표적인경우가바로다이어그램과차트이다. 예를들어데이터시각화에서가장많이사용되는 D3.js의사례에서보면이러한 SVG를이용한시각화사례를쉽게찾아볼수있다. [ 그림 2-28] SVG 를이용한 D3.js 차트 SVG의경우벡터기반의입력을기반으로하고있으므로해상도에대한의존성에서자유롭다. 특히애니메이션기능과결합하면복잡한코드구성없이도미려한이미지를생성할수있으므로차트등에특히적합하다. 단, XML 기반의구조로인해개발시 SVG의복잡도를해결할방법을고려해야한다

99 나. 상용라이브러리 - Canvas 및 SVG 라이브러리 < 표 2-20> Canvas 및 SVG 라이브러리 라이브러리주소설명 Kinetic.js ( 오픈소스 ) Ÿ Ÿ Ÿ Ÿ Canvas 기반객체모델지원애니메이션및컨트롤지원다양한입출력관련기능제공 Fabric.js ( 오픈소스 ) Ÿ Ÿ Ÿ Canvas 기반객체모델지원 SVG 입출력제공 Three.js ( 오픈소스 ) Ÿ Ÿ Ÿ Canvas, WebGL 기반자바스크립트 3D 엔진가장범용으로사용되는순수자바스크립트 3D 엔진 Babilon.js ( 오픈소스 ) Ÿ Ÿ Canvas, WebGL 기반자바스크립트 3D 엔진 D3.js ( 오픈소스 ) Ÿ Ÿ Ÿ 데이터라이브러리시각화라이브러리데이터드리븐모델많은차트라이브러리들의기반소스로활용 processing.js ( 오픈소스 ) Ÿ Ÿ Canvas 기반 Processing 문법지원 paper.js ( 오픈소스 ) Ÿ Ÿ Ÿ Ÿ Canvas 기반 DOM 모델지원마우스및키보드인터랙션지원벡터모델지원 Raphael ( 오픈소스 ) hub.io/raphael/ Ÿ Ÿ Ÿ SVG 라이브러리자바스크립트기반의 SVG 컨트롤제공 IE6 지원 Snap.svg ( 오픈소스 ) Ÿ Ÿ Ÿ Ÿ SVG 라이브러리 Raphaël과동일개발자더폭넓은기능지원 IE 구버전지원안함

100 - 차트라이브러리 < 표 2-21> 주요차트라이브러리 라이브러리주소설명 Nwagon ( 오픈소스 ) Ÿ Ÿ Ÿ 네이버차트오픈소스라이브러리 SVG 기반 IE6 지원 한글문서및커뮤니티 AMCharts ( 유료 ) Ÿ Ÿ Canvas 기반 깔끔하고광범위한기능지원 Chart.js ( 오픈소스 ) Ÿ Ÿ Ÿ Canvas 기반 깔끔한디자인 충실한문서 DC.js ( 오픈소스 ) Ÿ Ÿ D3.js 기반 반응형그래프인터랙션 dygraphs ( 오픈소스 ) Ÿ Ÿ Canvas 기반 대량데이터에대한핸들링지원 NVD3 ( 오픈소스 ) Ÿ Ÿ D3.js 기반 깔끔한디자인 Highchart ( 상용유료 ) Ÿ Ÿ Ÿ Ÿ SVG 기반개인 / 비상업적용도무료다양한차트지원 IE6 지원 ExtJS 5 Ÿ Ÿ Ÿ Ÿ UI 컴포넌트, UI 위젯 100종제공트리메뉴지원 20종의트리메뉴지원엑셀과유사한기능제공, 대용량데이타전송가능, 2D/3D 용그래프, 차트 26종이상지원 Flotr2 ( 오픈소스 ) Ÿ Ÿ Ÿ Canvas 기반 커스터마이징손쉬움 타라이브러리에대한의존성없음

101 3.6 그래픽적용시고려사항 그래픽기술의선택은지금까지설명한내용을기반으로결정할수있을것이며이를제외하면가장큰고려사항은역시성능이라고할수있다. 순수소프트웨어기반의렌더링환경에서는그래픽관련성능을극적으로개선할수있는방법은많지않지만다행스럽게도최근모바일을포함한거의모든디바이스는하드웨어가속을제공하고있으며브라우저역시더나은이용자경험을위해하드웨어가속기반의그래픽렌더링기능을제공하고있다. 특히플래시등이전의 UI 컴포넌트나그래픽기능을제공하는플러그인들에서 HTML5 기반의그래픽기능으로전환할때성능으로인한이슈로인해전환이우려된다면빠른성능을위해렌더링성능의위험인자를제거하는과정이필요하다. 가. 렌더링성능저하의주요요인 ( 레이아웃의재계산과 Repaint 의발생 ) 일반적인경우는웹페이지의마크업요소들을브라우저가해석하여화면에처리하는과정을간단하게보자면다음과같다. a. 웹문서내의마크업들은파싱을통해 DOM 노드들로해석되며 DOM 노드로구성된트리형태로메모리에적재된다. b. 브라우저내의렌더링엔진은 DOM 노드들을개별적인이미지로만들어낸다. c. DOM 트리의구조및스타일에따라화면에이미지를합성한다. 대다수의렌더링성능병목은노드들을이미지로만드는과정과이들을화면에배치하여그려내는단계에서많이일어난다. 특히렌더링에필요한웹페이지의일부이미지를다시그리는 (Repaint) 동작을발생시킨다. - Reflow Layout, Layouting 혹은 Relayout이라고부르기도하는 Reflow는렌더트리의일부혹은전체가다시계산될필요가있어 DOM 노드의넓이가재계산되는경우를의미한다. Reflow에서특정노드의레이아웃연산이상위혹은형제노드들에대한영향을줄수있고특히변경사항이폭이나높이, 위치에관련된경우는레이아웃의연쇄발생이일어날수있다

102 [ 그림 2-29] 레이아웃발생의예 - Repaint DOM 노드의 (left, width 등의 ) 기하정보변경이나레이어이미지에직접적으로영향을주는스타일의속성변경과같은경우는화면의일부가갱신되어야한다. 이러한스크린상의일부혹은전체갱신을 Repaint 혹은 Redraw라고한다. 만약레이아웃과 Repaint를비롯한각종성능인자들을추적하고싶다면각브라우저의개발자도구에서확인할수있다. [ 그림 2-30] Layouting 으로인한 Repaint 발생의예

103 나. 렌더링성능최적화접근방법 브라우저에서의렌더링과연관되는문제점은레이아웃의위치나크기정보등레이아웃연산과렌더링을위한비트맵출력오버헤드이며하드웨어가속에있어서는생성된비트맵의 GPU 업로드오버헤드가포함된다. DOM 노드내의콘텐츠나스타일의변경등은렌더링성능저하의가장큰원인이된다. 다만, 이는웹개발자가렌더링패스를선택할수없는철저한브라우저의영역이므로유일한최적화방법은프로그래밍된렌더링프로세스에서처리되는데이터를예상해서병목구간을피하도록구현한다. - 불필요한렌더링요소회피를통한최적화의예모던브라우저들이구현하고있는하드웨어가속렌더링은대다수의그래픽연산을 GPU(Graphics Processing Unit) 를이용하여처리성능을높이는방법이다. 웹규격들은대다수가표현되어야할형태는지정하고있지만이를하드웨어가속에어떻게적용할지에대한정보는명시적으로가지고있지않기때문에브라우저들은빠른출력을위해많은부분들을고민하고처리해왔으나이는일반화할수있는경우들에한정하여최적화되어있다. 예를들어투명도 (Opacity) 의경우겹쳐진다른이미지와픽셀단위의혼합 (Blending) 해야하므로다른레이어의이미지와함께한장의이미지로나타내는것은일반적으로도매우불합리하다. 같은이유로매번표시되는이미지가변경되는 <video> element는별도의레이어로분리해두는것이보다효과적이다. 이를이용하는가장손쉬운방법은자주변경될것으로생각되는 DOM 노드를하드웨어가속처리가되는단일한단위로변경하는것이다. 예를들어 CSS 속성을자주본개발자라면 translatez(0); 속성을확인한경우가있을것이다. translatez(0); 는해당노드의 Z축값으로 0을주는무의미한코드로보일수있지만, 해당노드를강제로레이어를변경하는일종의핵 (Hack) 트릭으로이용된다. 다만이러한트릭은추가적인메모리를소모하므로한정된메모리를넘어설때새로운오버헤드를발생할수있다

104 6 전자문서 1. 개요 전자문서의경우빠른웹에디터리포팅툴과그리드컴포넌트, 위변조복제방지를위한 DRM, 워터마킹과같은전자문서보호에비표준기술을사용했다. 웹에디터는브라우저내에서풍부한텍스트를입력할수있도록하는웹구성요소이다. 대체적으로 HTML 기반웹에디터는운영자나이용자가손쉽게시스템에서콘텐츠를만들수있는콘텐츠관리시스템이나게시판등에서사용된다. 리포팅관련기술은리포트를만들어주는서버기술과생성된리포트를보여주는클라이언트기술이핵심이다. 이때생성된리포트를보기위해서는일반적으로전용뷰어의설치가필요하다. 리포트가만약 PDF라면전용뷰어설치없이일반브라우저에서볼수있다. 최근에는 PDF 또한자바스크립트에서바로랜더링해서보여줄수있다. 여기서는 HTML5 를활용해서 PDF뷰어를구현하기위한기초적인 HTML5 관련 API와 PDF를랜더링해주는기술들을살펴본다. 그리드컴포넌트는웹상에서엑셀과유사한테이블뷰및연산기능을수행하는기능을담당한다. CS(Client-Server), RIA(Rich Internet Application) 환경에서처리되던많은업무영역들이 HTML5 기반표준웹환경으로전환되고있다. 이를위해서는복잡한형태의표기반레이아웃이나엑셀 import 를통해데이터를처리할수있는기술이필요하고데이터의경우도 XML 형식과배열형식, JSON 형식을파일이나 String 형태로지원해야한다. 전자문서위변조방지의경우출력물의위변조방지및디지털콘텐츠의무단사용을막아, 제공자의권리와이익을보호하는기술로민원문서발급, 내부전자문서의유출방지를위한 DRM 기술등을전자문서보호및출력을위해지원해야한다. 최근 PC 및모바일환경에서전자문서를확인할수있는페이퍼리스방식의전자문서솔루션도빠르게보급되고있으나대부분앱방식으로배포하고있다

105 2. 사용현황 브라우저기반으로웹콘텐츠관리및화면관리의경우빠른실행속도를위해웹에디터, 리포팅툴과그리드및차트컴포넌트가 NPAPI 나 ActiveX 기반플러그인을사용했으며, 전자문서의위변조, 복제방지를위한 DRM과워터마킹, 화면캡쳐방지, 원본진본확인을위한전자서명및시점인증확인, 전자문서출력등을위해비표준기술을클라이언트에배포, 처리했다. 최근웹콘텐츠관리의경우플러그인을통해추가프로그램을설치없이웹표준 Canvas와 SVG 기반오픈소스를활용하는방식으로전환하고있으며, 전자문서의경우클라우드서버를통한서버처리후문서뷰어형태로제공하는방식이나 EXE 실행파일방식으로전환하고있다. 현재전자문서의비표준기술을가장많이활용하고있는분야는복잡한수식연산과다양한화면구성, 실시간문서변환이필요한공공, 금융, 협회, 학교, 병원등으로최근웹표준전환을위한다양한솔루션적용을시도하고있다. 2.1 웹에디터 현재웹에디터에 WYSIWYG 이나풍부한기능을제공하는오픈소스기반의다양한솔루션이개발되고있으며국내의경우네이버, 다음등의포털에서상용수준의오픈소스웹에디터를배포, 지원하고있다. 웹취약점이있는웹에디터버전을사용하는경우파일업로드시보안취약점에노출될수있으므로오픈소스기반의웹에디터를사용할경우공개된보안취약점을보완한최신버전을사용해야한다. < 표 2-22> 웹에디터종류 제품명제품설명개발사 SmartEditor Basic SmartEditor는자바스크립트로구현된웹기반의 WYSIWYG 편집기이다. 글꼴, 글자크기, 줄간격등을자유롭게설정할수있으며, 단어찾기 / 바꾸기와같은편리한기능을제공한다. 네이버

106 DaumEditor DEXT5 Editor ( 상용 ) Daum Editor는 OpenAPI, Microformat, RDF 등을지원하여시맨틱콘텐츠생산을돕고웹데이터의상호연결성을높였다. 웹접근성및웹표준을준수하는 HTML5.0 기반의웹편집기로별도의설치가필요없는 Non-ActiveX 방식으로 5대브라우저를완벽호환하며, XSS와같은보안문제와모바일까지지원한다. ( 다음 라온위즈기술 namo CrossEditor 브라우저상다양한텍스트를입력할수있는웹구성요소지원나모인터렉티브 S3 웹저작도구 CKEditor 브라우저상텍스트및멀티미디어자료삽입지원, IE9 이상버전에서지원 GPL, LGPL, MPL 등의오픈소스라이선스를따르고있다. 높은접근성을갖추고있다. 4.0 버전에서는스킨및플러그인기능을추가할수있다. Fdesk CKSource 2.2 리포팅툴 리포팅관련비표준기술은주로리포팅솔루션사에서배포한전용뷰어를사용할때사용된다. 주요기능으로는문서뷰어, 문서위조방지, 프린터출력기능을제공하고있으며, HTML5 기술기반으로리포팅툴을제공할때문서뷰어와문서위조방지는대체가능하지만프린터출력기능은 EXE 설치와같은기술을사용해야한다. 주요리포팅솔루션사의배포업체는아래와같다. 최근클립소프트는클라우드서버기반의문서스트리밍방식의 HTML5 웹리포팅툴을개발하였다. < 표 2-23> 주요리포팅솔루션 제품명 ( 리포팅툴 ) 오즈리포트 (OZ ActiveX Viewer) 크로닉스리포트 (Crownix Report Viewer) CLIP Report 4.0 유비리포트 (UbiViewer) Reportexpress enterprise Stream Docs AI-Report 배포사포시에스엠투소프트클립소프트유비디시전 캡소프트이파피루스솔비텍

107 2.3 그리드컴포넌트 그리드컴포넌트는사용목적, 크로스브라우저와멀티플랫폼지원유무에따라상용유료솔루션 (IBSheet, MiPlatform, XPlatform, Flex) 과오픈소스를활용하여개발한다. 국내외업체는대부분은플래시기반제품으로업무기반에최적화된그리드컴포넌트를제공하고있으며, 기업및공공웹사이트지원을위한개발편의성과생산성을높일수있는 API 방식의서버연동기술을제공하고있다. 또한엑셀등록및화면 UI 수준을제공하고있다. 그리드특성상데이터는 XML 형식과배열형식, JSON 형식, CSV(comma-separated value s) 와 TSV(tab-separated values) 형식을지원하는방식으로, 데이터형식을변환하는기능을제공하고있다. 크롬 45버전이상에서기본 NPAPI 기반 Flash Player 가구동하지않는문제가있어, 최근서버 + HTML5 기반의그리드컴포넌트가빠르게전환보급되고있다. < 표 2-24> 주요플러그인기반그리드컴포넌트 제품명 기반기술 개발사 IBSheet 7 ActiveX, 웹표준 아이비리더스 MiPlatform RIA 투비소프트 RealGRID+WEB 플래시, 웹표준 ( 주 ) 우리테크인터내셔날 Flex Flex Abobe GirdFX 플래시 Software FX WiseGirdFX 플래시 유니포스트 Extjs5 웹표준 미래웹기술연구소 SBGrid 2.0 웹표준 소프트보울 Sencha Touch Grid 웹표준 미래웹기술연구소 웹스퀘어5 Grid 웹표준 인스웨이브시스템즈 rmate Grid( 플래시버전 ) 플래시 리아모어소프트

108 2.4 문서보호및출력 전자문서보호및출력솔루션은다양한웹사용자환경에서전자문서의원본검증과위변조방지및위변조추적을위한기능을제공하기위해제공하며대부분상용유료솔루션 ( 마크애니, 파수닷컴 ), 서버기반 Enterprise Content Management 솔루션 ( 사이버다임, 파수닷컴, 오라클, IBM) 과같이문서보호와유통을결합한일체형솔루션, 오픈오피스, pdf.js와같은문서뷰어및문서편집기능을지원하는오픈소스를활용하여개발한다. 대부분의문서보호및출력기능은운영체제내프린터드라이버및전자문서의빠른실행을위해비표준기술을활용했으나, 최근클라우드기반의 Paperless 솔루션들이등장하면서서버기반의문서보호및출력기술을대체하고있다. < 표 2-25> 전자문서보호솔루션제품들 제품명 기반기술 개발사 epage SAFER for NoAX EXE, 웹표준 마크애니 ( 위변조방지 ) Fasoo eprint ActiveX 파수닷컴 ( 출력물개인정보보호 ) Perfact Paperless Solution ActiveX 레드비씨 ( 온라인전자문서관리 ) Office Hard 웹표준 지란지교시큐리티 리자드클라우드 웹표준 이노티움 3. 대체기술 전자문서대체기술의경우두가지대응방안으로구분하여대체기술적용이필요하며웹콘텐츠관리및화면관리의경우빠른실행속도를위해웹에디터, 리포팅툴과그리드및차트컴포넌트의경우 Pure Web기반솔루션의서버연동을통해대부분해결이가능하나전자문서보호및위변조방지의경우운영체제내커널과프린터드라이버등의동작을감시해야하는기능을포함하고있어현재로써는 EXE 실행파일방식으로대응하거나, 클라우드프린터가지원될경우모든문서를스트리밍방식으로위변조및개인정보보호를서버에서처리하고클라우드프린터를통해출력하는방식을제공할수있다

109 3.1 웹에디터 현재웹에디터에 WYSIWYG 이나풍부한기능을제공하는오픈소스기반의다양한솔루션이개발되고있으며국내의경우네이버, 다음등의포털에서오픈소스웹에디터를배포, 지원하고있다. 웹에디터의경우지속적인전환홍보및기술적난이도가낮아오픈소스나상용솔루션을이용해대체가가능하다. < 표 2-26> 국내외오픈에디터의특징 구분국산외산 Brand SmartEdit or Basic Naver Smart Editor Daum Editor FCKeditor TinyMCE markitup License LGPL NHN Corp. Daum Corp. GPL, LGPL, MPL, CDL LGPL MIT/GPL Demo Yes None None Yes Yes Yes Cross Browser IE/FF/ CR/SF/OP IE/FF/ CR/OP IE/FF/ CR/SF/OP IE/FF CR/SF/OP IE/FF CR/SF/OP IE/FF CR/SF/OP 3.2 리포팅툴 리포팅기술은증권차트, 통계그래프, 문서레이아웃등리포트템플릿을만드는리포트디자이너와데이터베이스의값을읽어와지정된템플릿에리포트형태로렌더링해주는리포팅엔진기술그리고렌더링된화면을보는리포팅뷰어로구성된다. 과거에는웹에서리포팅하기위해서는리포팅뷰어의경우별도의 ActiveX 로구현된전용뷰어를설치해야볼수있었지만최근 HTML5 의그래픽처리지원이강화됨에따라전용뷰어없이 HTML5 로렌더링해서바로볼수있다. 또한리포트를 PDF로변환하는것까지가능해져서 PDF를보기위한플러그인없이도이용이가능하다. 최근에는랜더링속도를가속하기위해전용리포트서버 ( 클라우드 ) 기반으로최종리포트결과물을생성하고클라이언트뷰어에스트리밍으로화면을보여주는방식도쓰이고있다

110 가. PDF 처리적용 브라우저에서 PDF를보여주기위한방법으로는일반적으로어도비리더와같은별도의플러그인을설치해서보여주었지만크롬, 파이어폭스브라우저는 PDF 뷰어를내장하고있다. 최근에는브라우저성능향상으로 HTML5 및자바스크립트만으로화면을바로 PDF 로렌더링해주는오픈소스자바스크립트라이브러리들이있다. - jspdf : jspdf는 MIT라이센스로공개되어있으며대부분의브라우저에서지원한다. 공식사이트 : 오픈소스코드 : 각종활용예제 : - Mozilla pdf.js : 모질라에서자바스크립트오픈소스로진행하고있으며, 파이어폭스, 크롬, 오페라브라우저를지원한다. 다른종류의브라우저를지원하려면여기서제공하는별도의스크립트라이브러리를이용할수도있다. 공식사이트 : 오픈소스코드 : - pdfkit: MIT라이센스로공개되어있으며, Node 와브라우저에서 PDF생성을지원한다. pdfkit 은 CoffeeScript 로작성되어있으며 npm패키지매니저를이용해설치가능하다. 공식사이트 : 오픈소스코드 : 그리드컴포넌트 Pure Web 기반으로는 jqgrid, ExtJS(Sencha), 리아모어소프트의 rmate, 인스웨이브웹스케어를활용하여그리드를표현하는방법이대중적으로사용되고있으며, 상용그리드컴포넌트로는 Adobe Flex나투비소프트의마이플랫폼과같은 RIA기반 UI 솔루션이대중적으로사용되고있다. 그리드컴포넌트도지속적인전환홍보및기술적난이도가낮아오픈소스나상용솔루션을이용해대체가가능하다

111 < 표 2-27> 웹표준그리드컴포넌트 제품명기반기술개발사지원브라우저 WebSquare HTML5, 자바스크립트 INSWAVE rmate Grid(HTML5) HTML5, 자바스크립트리아모어소프트 JUI HTML5, 자바스크립트제니퍼소프트 jqgrid HTML5, 자바스크립트 JQuery Foundation IE, Firefox, Chrome, Safari, Opera Ext.JS 자바스크립트 Sencha Inc 3.4 문서보호및출력 전자문서의경우빠른리포팅과그리드처리, 위변조, 복제방지를위한 DRM과워터마킹, 화면캡쳐방지, 원본과진본확인을위한전자서명및시점인증확인, 전자문서출력등을위해비표준기술을클라이언트에배포, 처리했던방식에서클라우드기반서버시스템을통해관련기능을제공하고, 화면캡쳐와같은키보드인식및이벤트인식의경우실행파일과 Custom URI Scheme 연동이나 Native Messaging을통해기설치된실행파일과연동을통해서비스를제공할수있다. 전자문서출력의경우클라우드프린터를활용하여서비스를제공할수있으나, 프린터가클라우드프린터지원여부확인이필요하며, 인쇄영역을지정할경우 CSS로인쇄영역을지정할수있다

112 7 파일처리 1. 개요 웹에서파일업로드 / 다운로드는 HTML5 File API를통해별도플러그인없이도개발가능하다. 하지만파일접근및파일명, 파일디렉토리이동과같은기능을고려하거나대용량파일전송시속도개선을위해웹이아닌 UDP와같은별도의 Protocol 사용을위해 ActiveX 로제작된네트워크가속이나특정디렉토리에파일을다운로드하기위한별도컴포넌트를개발하는경우가있다. 최신 HTML5 스펙에추가된 File API와개선된 XMLHttpRequest 를활용할경우자바스크립트만으로파일업로드 / 다운로드하는코드예제뿐만아니라 File API를이용해이용자 File 정보를보여주고 Drag&Drop으로처리가가능하다. 또한 XMLHttpRequest 를활용해서파일전송과정을이벤트로모니터링하고중단될경우재연결과같은기능을구현할수있다. 참고로여기서사용하는 HTML5 File API의경우하위브라우저버전에서는동작하지않는다. (IE10이상, 크롬 43이상, 파이어폭스 38버전이상에서동작한다 ) 2. 사용현황 파일전송관련한비표준플러그인의주요사용처는아래표와같다. 메일과같이기본기능에사용하는경우도있지만웹하드서비스와같이업로드 / 다운로드속도를가속하기위해사용하는경우가대부분이다. 파일처리를위한비표준플러그인배포의경우각서비스업체에서만들어배포하는경우도있고, 전문솔루션사에서개발하여일괄적으로배포하는경우가대부분이다. < 표 2-28> 파일전송 ActiveX 사용현황 사용케이스웹하드서비스에서파일업로드 / 다운로드메일서비스에서파일첨부 SW 자료실다운로드관리 주요사용처대부분웹하드업체 Daum, Naver, Nate 등네이버, 심파일, 쉐어웨어코리아, 보물섬등

113 3. 대체기술 파일전송을위한 ActiveX 대체기술로는 HTML5, 플래시, Java, 브라우저플러그인등이있다. 여기에서는추가설치없이대부분최신브라우저에서지원가능한기술로 HTML5 및관련 API를활용해서설명한다. 여기서는 HTML5 및 File API를바로사용했지만, 실제구현할때에는브라우저버전에따라해당 API를지원하지않는브라우저에대해서는일반 Form 을이용해업로드하도록구현해야한다. < 표 2-29> XMLHttpReqeust readystate 값 사용케이스다중파일선택이용자파일정보접근 Drag&Drop 파일업로드상태모니터링파일다운로드상태모니터링 관련 API <input> 태그 multiple 속성 File API drop 이벤트핸들러 XMLHttpRequest 이벤트핸들러 XMLHttpRequest 이벤트핸들러 3.1 HTML5 File API 사용 HTML5 는바이너리데이터와사용자로컬파일시스템과상호작용을위한정말강력한 API를지원한다. File API로동기 / 비동기로파일을읽고, Blob을생성하며, 임의의위치에파일을작성하고, 파일의디렉토리를재귀호출하고, 데스크탑에서브라우저로드래그앤드롭을실행하고, XMLHttpRequest2 를사용해서바이너리파일을업로드할수있다. HTML5 파일접근과관련한주요내용은 HTML5Rocks 의파일접근제어에대한참고자료 ( 를확인하면빠르게웹표준방식으로안전하게파일을관리할수있다

114 3.2 File API library 사용 파일업로드방식은동기방식과비동식방식으로나눌수있으며, 대체로동기방식은멀티파일업로드처리를하는데이경우화면이리플레쉬되고특정페이지로이동하는문제가있어, 단일페이지웹애플리케이션에서는비동기파일업로드가필요하다. 하지만 AngularJS 만으론이러한요구사항을처리하기엔부족함이많다. 최근이러한문제를오픈소스인 angular-file-upload 를이용하여비동기파일업로드를처리할수있다. angular -file-upload 는낮은브라우저버전에서도사용이가능하며, shim과함께사용할경우 IE8, I E9 버전에서도사용이가능하다. < 표 2-30> 웹표준 File API 컴포넌트 제품명기반기술개발사지원브라우저 넥사크로 (nexacro) File API, 자바스크립트넥사크로 RESUMABLE.js 상동오픈소스 Angular 상동 Google jquery-file-upload 상동 JQuery Foundation uploadify 상동 Reactiveapps(Donate) IE, Firefox, Chrome, Safari, Opera dropzonejs File API, Drag&Drop dropzonejs(donate) Plupload File API, Drag&Drop Ephox(GPLv2) RAPID5 대용량 (2G) Drag&Drop 라온위즈

115 8 게임 1. 개요 최근웹에서파일게임런처는웹페이지상에서로컬 PC에있는게임애플리케이션을실행시켜주고, 사용자가게임을즐기는데에필요한필수적인기능들을관리할수있도록해주는웹에서실행되는애플리케이션이다. 보안상의문제로웹브라우저에서는직접적으로사용자의 PC 파일시스템에접근하거나사용자의 PC에설치되어있는애플리케이션을실행할수없는데, 이와같은문제를해결하기위해인터넷익스플로러에서는 ActiveX, 크롬등의브라우저에서는 NPAPI 와같은별도플러그인을통해구현된다. 2. 사용현황 게임런처의주요기능은사용자 PC내의게임애플리케이션을웹브라우저상에서실행하도록하고이를통해버전확인및패치작업을진행하도록하는것이다. 웹브라우저에서 PC내에설치되어있는애플리케이션을곧바로실행하는것은보안상의문제로불가능하며, 이에따라사용자 PC내파일시스템접근권한을획득하고효율적인게임애플리케이션실행환경을확보하기위해 ActiveX나 NPAPI가사용되고있다. 사용자의 PC내에설치되어있는게임애플리케이션을호출하기위한 URL 프로토콜핸들러를미리브라우저에등록하고이를통해해당애플리케이션을실행하는방법도가능하지만, 사용자가직접브라우저에게임애플리케이션실행을위한핸들러를등록해야하는과정과실제구현시일정시간지연이발생하는불편함을초래할수있고, 일관된서비스제공이어려운부분이있어현재사용되지않고있다

116 게임런처가브라우저에서호출되면통상게임런처는아래의기능을실행하여사용자가원활하게게임을진행할수있도록한다. - 웹브라우저에서게임애플리케이션실행 - 게임파일의다운로드 - 게임패치확인및업그레이드 - 각종보안모듈의설치및업그레이드 위의기능을브라우저에서직접실행하도록하기위해게임개발사와퍼블리셔는 IE 환경에서 ActiveX 를, 구글크롬이나파이어폭스등의환경에서는 NPAPI 를이용한별도의플러그인을제작하여배포했다. 그러나최근구글이더이상 NPAPI 를지원하지않도록정책을바꿈에따라크롬에서는게임런처를활용하기가대단히어렵게변화되었다. 3. 대체기술 게임런처의가장핵심적인역할은브라우저내에서이용자의 PC에설치되어있는게임애플리케이션실행파일을호출하여게임내의버전체크및패치작업을진행하는것이다. 이와같은게임실행방식은보안상의이유로인하여별도의 ActiveX 나플러그인없이구현자체가불가능한것으로, 본안내서는게임런처기능을반드시활용하고자하는서비스제공자가호환성과이용자경험을극대화할수있도록하기위한일련의방안들을제공하고자한다. 3.1 실행파일방식 게임런처의가장기본적인기능은로컬 PC내의게임애플리케이션의실행이다. 따라서게임런처를통해진행하는게임실행기능은가능한최소화하는것이게임런처의실행시발생되는오류를최소화하는가장좋은방법이다. 통상게임런처내에게임실행을위한애플리케이션기능뿐만아니라, 다운로드모듈, 보안모듈등의여러가지기능을다수탑재하는것보다는가능한기능을분할하여제공하는것이효과적이다. 기본적인실행파일다운로드기능의경우는 HTML5 File API 요소를활용하도록하고게임런처와브라우저와통신은 URL Protocol Handler 나로컬웹서버내장을통한브라우저연동방식을이용하는실행파일 (EXE) 설치방식이가장현실적이다

117 3.2 웹코어내장방식 게임런처의브라우저종속문제를해결하는방안으로 WebView 오픈소스코어를게임런처에내장해서개발하는방식으로 chromium-webview core를게임런처에포함해서실행파일방식으로구현하고내장웹뷰를통해브라우저와동일한기능 ( 게임사웹서버접근 ) 을수행하는방법이다. 이를위해서는오픈소스버전변화에대한지속적인대응등개발리소스가지속적으로투입되는단점이있지만, 브라우저플러그인을사용하지않고개발하며배포하기때문에향후브라우저의개발사정책변경에유연하게대응할수있는장점이있다. 3.3 브라우저별플러그인으로변환 C/C++ 로개발된게임을 asm.js를사용하여웹에서실행가능하도록할수있다. asm.js 는충분히상용화가능한수준의퍼포먼스를제공한다. 다만 asm.js는 WebAssembly 로전환해서현재개발중인기술로상용서비스에적용시안전성과향후변화관리가추가될가능성이있다

118 9 시스템정보확인및 PC 제어 1. 개요 웹서비스상에서 ActiveX, NPAPI 같은플러그인을사용하지않고시스템의화면정보의일부내용을확인방법으로현재가장많이활용하는기술은 navigator 객체의유저에이전트를확인하는방법이며, 최근엔 CSS 미디어쿼리를활용하여시스템의해상도와같은화면정보를함께확인하는방법을가장일반적으로사용한다. 장치관리 ( 카메라, 음성저장, 외장디바이스인식, 프린터드라이브설정및출력 ) 의경우도기존에는일반적으로 ActiveX 나 NPAPI 기반플러그인을사용했으나최근 OS 장치관리는기본보안정책인샌드박스 (sandbox) 보안모델을위반하는사례가급증하고, 다수의심각한문제 ( 드라이버변조를통한 OS 시스템파괴, 메모리해킹, 원격장치모니터링 ) 를야기할가능성을내포하고있어, 브라우저개발사들은관련기술지원을중단하거나, 보안모델을위반하지않는안전한방식으로대체기술 (NaCI, pnaci) 을제공하고있다. 그럼에도불구하고현재브라우저개발사는보안정책상완벽한장치관리기능은제공하지않고있다. 다만일부브라우저의경우화상회의와같은킬러서비스를제공하기위해 WebRTC 와같은표준규격을활용하여카메라, 음성저장기능을제공하거나, W3C Device API 및 System Application API, Geolocation API, DeviceOrientation Event, Media Capture and Streams, Web Bluetooth, Web NFC를통해블루투스기기접근및 USB 하드웨어, 카메라접근을위한 API를제공하고있다. 이러한기능들은기본적으로이용자의 H/W 접근인지및사용동의후기능사용이가능하다. PC 원격제어, VNC(Virtual Network Computing) 프로그램은대부분 ActiveX 와 NPAPI, Java 기반플러그인기술을사용하여구축되고있으며, 플러그인은시스템자원제어와시스템식별확인 ( 라이센스 ), 빠른제어실행속도와안정적인세션관리, 원격프로그램호출이벤트를전달을지원하기위해사용하고있으며, 윈도우 PC 원격제어의경우별도의 Protocol( 원격데스크탑 Protocol) 지원하기위해 Remote Desktop ActiveX control interfaces 플러그인기술이나 Terminal Services Session Broker를활용하고있다

119 2. 사용현황 시스템정보확인및장치관리의주요한기능은아래와같이이용자단말내의 H/W 및드라이버정보확인등과같이시스템자원에대한정보획득과시스템과이용자를식별하기위한맥어드레스 ( 고유값 ) 정보를서버에전송하기위해 ActiveX 나 NPAPI 와같은확장기술을사용하였으나, 브라우저는기본보안정책 (Sandbox) 상시스템접근에한계가있으므로, 시스템자원을확인하거나인증하는방법이외에 ID/Password 방식과같은이용자지식기반으로처리해야한다. - H/W 시스템사양및드라이버사양확인 - 맥어드레스를통한이용자인증 - 기설치된 S/W 유무확인 - 브라우저버전확인 - 시스템및브라우저지원해상도확인 PC 원격제어의경우현재대부분고객콜센터의원격 PC접근을통한상담과원격서버의관리및파일전송등에활용되고있으며, 최근에는스마트폰, 태블릿등을통한 PC 원격제어등에도활용되고있다. 현재 PC원격제어의경우다양한기술활용을위해 HOST PC나서버에는별도응용프로그램을설치해야하며이를위해대부분 OS 개발사들이기본적인 RDP (Remote Desktop Protocol) 규격이나 VNC 지원을위한 RFB(Re mote Frame Buffer) 라이브러리를지원하고있다. PC 원격제어프로그램들은 HOST 와 Viewer 사이에중계서버가있는유형과 HOST 와 Viewer 가직접접근하는두가지방식으로개발하고있으며, RemoteCall, TihinVNC, Chrome Remote Desktop 등은중계서버를통해전달받은스크린이미지를 HTML5 Canvas 를활용하여 Viewer 기능을수행하는방식이확대되고있다. 이때대부분 clientless remote desktop gateway 를통해 VNC나 RDP 프로토콜을구현한다. 최근엔 WebRTC 의 RTCDataChannel 을이용한원격데스크탑애플리케이션을개발하는방안도일부개발사에서시도되고있다

120 < 표 2-31> PC 원격제어솔루션 제품명사업자주요기능지원운영체제유 무료 RemoteCall 알서포트 브라우저를통해고객의단말접근, 원격장애진단처리 윈도우, 맥 OS, 리눅스, Android 유료 TeamViewer TeamViewer 원격지원, 서버관리, 파일전송, VPN, 원격인쇄, 오피스실행 윈도우, 맥 OS, 리눅스, ios, Android, WP8 무료 Real VNC RealVNC Inc 원격지원, 시스템인증, 파일관리, 채팅,128bit AES 암호화 윈도우, 맥 OS 리눅스, HP-UX 솔라리스, AIX 유료 MS Remote Desktop 마이크로소프트 다채널화상통화, 음성통화및문자메시지전송 ( 모바일에최적화 ) 윈도우무료 무료 FreeRDP freerdp.com 원격지원, 비디오, 오디오스트리밍, 파일관리, 다채널관리 윈도우, 맥 OS, 리눅스, BSD, ios, Android, 무료 GPL2.0 Guacamole GLYPTODON clientless remote desktop gateway VPN, RDP 지원 브라우저기반 MIT 3. 대체기술 3.1 navigator 객체를통한시스템정보확인 navigator 객체는브라우저의종류와버전등브라우저전반에대한정보를제공하는객체이다. navigator 라는객체이름은 Netscape Navigator 브라우저에서온것이며, IE의경우벤더중립적인표현으로 clientinformation 을지원하기도한다. 실제로 IE에서 navigator === clientinformation 을실행하면 true를반환한다. navigator에는대표적으로다음과같은프로퍼티가있다

121 <script> var uastring = window.navigator.useragent; if(console && console.log) console.log(uastring); else alert(uastring); </script> [ 예시 : navigator 객체를통한시스템정보확인 ] - navigator.appname : 브라우저의간단한이름 - navigator.appversion : 버전또는버전과관련된정보. 브라우저내부적으로 사용되는버전에대한숫자이므로이용자에게표시되는버전숫자와항상일 치하지는않다. - navigator.useragent : 브라우저가 User-Agent HTTP 헤더에넣어전송하는문자열로 appname과 appversion의모든정보를포함하며더자세한정보를추가로담고있다. 이정보에대해서는표준화된서식이존재하지않기때문에각브라우저특성에따라파싱해야한다. - navigator.appcodename : 브라우저의코드네임. Netscape 에서는 "Mozilla" 라는 코드네임을사용한다. 호환성을위해 IE 도역시같은코드네임을사용한다. - navigator.platform: 브라우저가실행되는하드웨어플랫폼으로자바스크립트 1.2 버전부터지원한다. - navigator.connection.type : 이용자의네트워크연결상태를확인한다. ( 모바일 에서지원한다.) navigator 객체의프로퍼티가알려주는정보는완전히신뢰할수있는것이아니다. 예를들어, Firefox 1.0 에서 appname 은 "Netscape" 로, appversion 은 "5.0" 으로시작한다. 모질라코드에기반을두지않은사파리브라우저에서도똑같은값이반환된다

122 3.2 각브라우저별 User Agent 정보 가. Internet Explorer Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; Trident/5.0; IPMS/A640400A-14D460801A ; TCO_ ; SLCC2;.NET CLR ;.NET CLR ;.NET CLR ; Media Center PC 6.0; InfoPath.2; Tablet PC 2.0) - Mozilla/5.0 : Mozilla 5.0과 호환가능 하다. - MSIE 10.0 : Internet Explorer 10.0이다. - Trident/5.0 : Trident 레이아웃엔진 5.0 버전으로구현됐다. * 최신 Edge 브라우저의경우웹코어엔진이변경되어 User Agent 정보가다수변경되었으며변경정보는 에서확인할수있다. < 표 2-32> 이용자에이전트문자열토큰설명 Token Description Windows NT 10 Edge Mozilla/5.0 Internet Explorer 11 Windows NT 6.3 Internet Explorer 10 Trident/7.0 Internet Explorer 9 rv:11.0 Internet Explorer 8 < 표 2-33> 윈도우 IE Trident 토큰 Token AppleWebKit/ Description Edge Trident/7.0 Internet Explorer 11 Trident/6.0 Internet Explorer 10 Trident/5.0 Internet Explorer 9 Trident/4.0 Internet Explorer

123 나. Chrome Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/ Safari/ Mozilla/5.0 : Mozilla 5.0과호환가능하다. - AppleWebKit/version (KHTML, like Gecko) : Gecko 같은 브라우저레이아웃엔진인 KHTML을사용한다. Webkit는 KHTML을기반으로한엔진이다. - Chrome/version : Chrome이며해당버전이다. - Safari/version : Safari의해당버전과비슷하다. 다. Firefox Mozilla/5.0 (Windows; U; Windows NT 6.1; ko; rv: ) Gecko/ Firefox/3.6.8 IPMS/A640400A-14D460801A Mozilla/5.0 : 모질라 5.0 기반이다. - platform : 플랫폼정보 - rv : Gecko 레이아웃엔진의배포버전 - Gecko/yyyymmdd : Gecko의개발용배포일로 yyyymmdd 형태이다. 실제배포일은아니며, 추후삭제될수있다. - Firefox/appversion : Firefox의버전이다. 라. Safari Mozilla/5.0 (Windows; U; Windows NT 6.1; ko-kr) AppleWebKit/ (KHTML, like Gecko) Version/5.0.2 Safari/

124 3.3 설치형앱으로개발 장치관리의경우브라우저의기본보안정책상문제가발생할소지가있으며, 개발사정책에따라플러그인지원여부도유동적이여서모바일과같이 PC에서도 OS별로설치형애플리케이션을개발하여앱스토어를통해배포하는방식으로 OS 개발사의 Native API(MFC, Win32, WinFX) 와웹 API(MS WinJS) 를통해하이브리드방식으로개발하여앱스토어검수통과후배포할수있다. 이경우모바일과유사하게오류발생후문제점을수정하고배포하는데있어실시간대응이어렵고, 검수에따른추가시간이소요된다는단점이있다. 3.4 Viewer 를 HTML5 로구현 PC원격제어의경우시스템자원접근과 RDP(RFB) Protocol 지원을위해 HOST에는반드시응용프로그램을설치해야하며, Viewer(Client) 는중계서버 (Proxy) 를거쳐브라우저를통하여어느곳에서나접근하고제어할수있는방식으로제공할수있다. HOST 클라이언트와 VNC Server 는 RFB(Remote Frame Buffer) Protocol 을지원하는오픈소스 (TigerVNC, TurboVNC) 등을활용하여구축하고, 물리적으로 VNC 서버내에웹 Protocol 변환을위한프록시서버를구축하여브라우저에서 socket.io 를이용하여 WebSocket 기반으로타임아웃설정시간까지세션을지속적으로유지할수있도록개발한다. 이때 VNC Server에서전달받은스크린버퍼프레임을 Canvas에지속적으로 Draw해서브라우저에서 PC화면을보여주는방식으로구현한다. 4. 시스템정보확인시유의사항 웹서비스개발사에서시스템정보에접근하거나장치제어가필요할경우확인할경우반드시플러그인을설치해야하는문제가발생한다. 현재대부분의운영체제나브라우저개발사는보안문제로더이상브라우저의장치접근이나장치제어를허용하지않는방향으로정책을변경하고있어, 웹서비스개발사도이점을유의해서반드시필요한시스템정보의경우고객동의후직접입력하도록서비스정책을변경할필요가있다. 또한장치및시스템에반드시접근하거나제어해야하는서비스의경우설치파일형태의애플리케이션으로배포, 관리하는방식을우선고려해야한다

125 Ⅲ. 멀티운영체제및 브라우저정책

126

127 III. 멀티운영체제및브라우저정책 1. 멀티운영체제지원정책 운영체제및브라우저개발사는자사의전략적이해관계에따라기술지원방식을제공하고있다. 운영체제와브라우저가결합된방식으로제공되고있는 MS와애플은최근자사기술정책과로드맵에따라설치형응용프로그램기술과웹기술을상호독립적으로운영하는정책을유지하고있다. 자사운영체제점유율이낮거나일부플랫폼만제공하고있는구글과모질라재단의경우높은브라우저점유율을기반으로윈도우와맥운영체제에설치형웹애플리케이션을구동하거나브라우저내에서 3D 게임과멀티미디어지원을위한다양한확장기술을지원하고있으며, 기존윈도우와맥운영체제설치응용프로그램과브라우저간연동을위한브라우저개발사의확장기술은보안취약점및이용자서비스선택권을제약하는한계로인해최근에는브라우저개발사의정책에따라안전성이보장된웹표준기술로개발하는방향으로전환하고있다. [ 그림 3-1] 운영체제및브라우저정책우선순위

128 대부분의웹서비스 ( 솔루션 ) 개발사는시스템개발사정책, 시스템사용자정책, 브라우저사용자정책을인지하고, 가이드에따라개발방법과운영방법을관리해야한다. Windows, Mac OS X, Linux등운영체제에적용할수있는간단한확장기술은현재까지 Custom URI Scheme(Protocol Handler 레지스터등록 ) 을통한브라우저와운영체제설치응용프로그램간파라미터연동방식이대표적인기술이다. (URI Scheme 은 IETF RFC 4395 규격참고 ) 최근엔 Custom URI Scheme 을통해브라우저와운영체제설치응용프로그램호출후직접메시지를교환하지않고 HTTPS(SSL) 을통한중계 ( 서비스 ) 서버연동을통해메시지를암호화하고인증서를이용해서메시지를교환하는방식을사용함으로써보안취약점문제를일부해결하고있다. < 표 3-1> 운영체제연동기술현황 지원 OS 브라우저와응용프로그램간 통신방법 개발지원사이트 공통 IETF RFC 4395 표준 URI 정의 hemes.xml Windows Registering an Application to a URI Scheme aspx#prot_sec Mac OSX Launch Services Programming Guide tion/carbon/conceptual/launchservicesconcepts/l SCIntro/LSCIntro.html# Android URL Scheme (Intent Scheme) /filters.html ios Custom URL Scheme 연동 on/iphone/conceptual/iphoneosprogrammingguid e/inter-appcommunication/inter-appcommunicati on.html#//apple_ref/doc/uid/tp ch6-sw

129 2. 브라우저서비스개발정책 브라우저개발사들은자사기술전략에따라다양한확장기술을제공하였으나보안 취약점과피싱과같은문제가지속적으로발생하여최근에는 Sandbox 보안모델을준수 하는브라우저별확장기술이나 HTML5 기반의웹표준기술을권고하고있다. < 표 3-2> 브라우저개발자지원정책현황 브라우저 Microsoft Edge for Windows 10 Developer Guide 개발지원사이트 Chrome Program Policies Mozilla AMO Policies Mozilla Add-on SDK Safari for Developers < 표 3-3> 브라우저별확장기능지원사이트 브라우저 Microsoft Internet Explorer Extension 확장기능개발지원사이트 Chrome Extension Mozilla Add-on SDK Safari Extension ols/conceptual/safariextensionguide/introduction/introducti on.html Opera Extension

130 2.1 MS Internet Explorer 정책 마이크로소프트는 Windows10 부터표준웹기반으로웹사이트를개발할것을권장하고있으며, 기존 IE에서사용하는비표준기술과 IE 고유기술을사용하지말것을권고하고있다. 비표준여부에대해서는 Edge 개발자지원사이트의웹페이지정적분석도구 ( 를활용하여문제를발견할수있다. < 표 3-4> IE 고유기술및 Edge 대응기술 기존기술 대응표준기술 ActiveX HTML5 기반기술 *PDF 뷰어 / 플래쉬는지원, IE11 Enterprise Mode Browser Helper Object(BHO) HTML/JavaScript 기반확장기술 ( 예정 ) Document Modes 단일의문서모드만지원 Vector Markup Language(VML) Scalable Vector Graphic(SVG) VBScript JavaScript attachevent/removeevent addeventlistener removeeventlistener currentstyle getcomputedstyle Conditional Comments Feature detection 활용 IE8 Layout quirks 표준기반레이아웃으로변경 DirextX Filters & Transitions CSS3, SVG 마이크로소프트는 2016 년 1 월 12 일이후부터운영체제버전에따라 IE 브라우저지원 정책정하여브라우저버전에따라순차적으로보안, 비보안업데이트, 무료 / 유료기술 지원, 온라인기술콘텐츠업데이트를중단하였다

131 [ 그림 3-2] 2016 년이후 IE 지원계획 Windows7, 8, 8.1의 IE8, 9, 10의경우 일이후무상기술및보안업데이트지원이중단되었다. Widows7, 10에서 IE11이 IE의마지막버전으로 2019년까지무상기술및보안업데이트를지원할예정이다. Windows7, 10에서 IE만의고유기능 (ActiveX, BHOs, 툴바 ) 을활용해야할경우엔터프라이즈 ( 기업용 ) 모드를통한하위호환성제공하나, 사용자가도구메뉴에서엔터프라이즈모드를켜고사용해야하는단점이있어, 장기적이고근본적인해결방안은최신웹표준을준수하는 Edge 브라우저사용을권장하고있다. 윈도우 10 부터는모든커널모드디바이스드라이버를개발하는애플리케이션이나서비스의경우 EV(Extended Validation) 인증서로서명필요하며, 백신, 키보드보안, 웹방화벽, 시스템드라이브와커널에접근하는경우 EV 인증서발급후드라이버패키지서명을한후마이크로소프트의승인이완료되어야배포가가능하다. 이에따라마이크로소프트의사전검증및승인기간을고려해서배포및관리계획을세워야한다

132

133 Ⅳ. 멀티환경지원방안

134

135 IV. 멀티환경지원방안 1. 멀티브라우저지원방안 1.1 HTML5 HTML5 는웹서비스나크롬앱, WinJS 기반웹애플리케이션을만들기위한 HTML 표준규격으로 월표준이완료됐다. HTML5 는기존비표준 ActiveX, NPAPI 플러그인기술을활용한별도의플러그인프로그램 (FlashPlayer, Java) 의설치없이브라우저만으로멀티미디어, 게임, 오피스, 그래픽, 그리드, 차트등을구현할수있는기술로아래그림과같이마크업이외에도다양한스크립트, API 기술요소를포함하고있다. [ 그림 4-1] 웹애플리케이션개발을위한연관표준기술 HTML5 표준만으로웹애플리케이션을개발하는데한계가있으며자바스크립트기반 의 API 나전문적인분야의기능을제공하는라이브러리를활용하여개발해야한다

136 < 표 4-1> HTML5 주요기능 주요기능 웹폼 (Web From) Canvas SVG (Scalable Vector Graphic) Video/Audio Geolocation 오프라인웹애플리케이션 (Offline Web Application) 로컬저장소 (Local Storage) Service Work 설명 이용자의입력정보를받기위해사용되는입력형태에대한정의에사용되는마크업, 애트리뷰트와이벤트 웹에서즉시모드 (immediate mode) 로 2 차원그래픽을그리기위한 API 와 <canvas> 내각종객체를회전, 변환하고이미지생성등각종효과를주는기능에대한 API XML 기반의 2 차원벡터그래픽을표현하기위한언어 <video> 는비디오또는영화를보여주기위해사용되는미디어 element 이며, <audio> 는사운드나오디오스트림을표현하기위한미디어 element 디바이스의지리적위치정보를제공하는 API 표준 인터넷연결이지원되지않는경우에도웹애플리케이션이정상적으로수행될수있도록지원하는기능으로애플리케이션에대한캐시와데이터에대한캐시로구성 기존의쿠키의기능을개선하기위한목적으로개발된기능으로웹클라이언트에서키와값이쌍으로구성된데이터를영구적으로저장하는기능 페이지나사용자인터랙션이필요하지않은기능들을위한기회를제공하고, 웹페이지와는별개로자바스크립트내에서 register 등록하고, 브라우저에의해백그라운드에서실행되는스크립트 관련 W3C 표준명 HTML5 Canvas 2D API HTML Canvas 2D Context HTML5 HTML5 Geolocation API HTML5 Web Storage Indexed Database API Service Worker File API 클라이언트에있는파일선택및데이터추출 File API Web RTC 비디오채팅기능과 P2P 데이터공유지원 Web RTC 웹소켓 (Web Socket) 웹워커 (Web Worker) 3D 그래픽라이브러리 (WebGL) 웹애플리케이션이서버측의프로세스와직접적인양방향통신을위한 API 웹애플리케이션을위한쓰레드 (Thread) 기능에대한 API WebGL 은웹기반의그래픽라이브러리로자바스크립트프로그래밍언어를통해서사용할수있으며호환성이있는브라우저에서인터랙티브한 3D 그래픽을사용할수있는 API Web Socket API Web Workers WebGL HTML5 표준에대한상세내용은방송통신표준 HTML5 웹애플리케이션개발지침, TTA 웹표준참조

137 가. HTML5 웹애플리케이션 API 구현방법 HTML5 웹애플리케이션은개발자가제공하는다양한구현방법에따라웹문서의컨텍스트를실행한다. - 스크립트요소의처리를통해구현한다. - 인라인 javascript: URL 의실행 ( 예 :img 요소의 src 속성이나 CSS style 규칙 ) - addeventlistener( ) 를이용해서 DOM 에등록, 명시적인이벤트핸들러내용속성을사용하거나 IDL 속성이벤트핸들러를사용하여구현한다. - 고유의스크립트기능을가진 XBL, SVG 같은기술로구현한다. - W3C Web Application WG은지속적으로규격이업데이트되고있으므로, 관련표준규격확인후서비스에구현해야한다. 1.2 Custom URI Scheme Custom URI Scheme 은특정응용프로그램을가리키는고유의지시어이다. 이규격은브라우저에서다른응용애플리케이션을호출하거나반대로응용프로그램에서브라우저의특정페이지를호출할수있다. 다만 URI Scheme 을처리하는응용프로그램은신뢰할수없는메시지 ( 악의적인메시지 ) 를수신할수있기때문에, 대부분의 URI Scheme 방식으로호출하는응용프로그램들은이용자계정식별이가능한 OS 기본탑재애플리케이션에서주로사용한다. 만약웹서비스개발사가 Custom URI Scheme 를통해특정응용프로그램과연동하도록개발할경우보안서버를경유해서메시지를전달하는방식과같이악의적인데이터에대응할수있는방법을고려하여개발해야한다. 가. Custom URI Scheme 등록 정의된 URI 체계를처리할수있는응용프로그램을등록하려면윈도우의경우 HKEY_CLASSES_ROOT 에대한적절한하위키와값과함께, 새로운키를추가해야하며, 루트키가추가되는 URI 체계와일치해야한다. 아래는 HKEY_CLASSES_ROOT 에게경고키를추가하는예제이다

138 HKEY_CLASSES_ROOT alert (Default) = "URL:Alert Protocol" URL Protocol = "" DefaultIcon (Default) = "alert.exe,1" shell open command (Default) = "C:\Program Files\Alert\alert.exe" "%1" [ 예시 : HKEY_CLASSES_ROOT 에게경고키추가 ] 나. Custom URI Scheme 호출 시스템 Shell 에등록된 URI Scheme 은아래와같은방식으로호출되어사용된다. - 웹페이지에서하이퍼링크클릭시 URI Scheme 이 System 에전달됨 - System에전달된 Custom URI Scheme을보고실행가능한응용프로그램이있는지확인 - 해당 URI Scheme을받을수있는응용프로그램이있다면실행시키고, URL에포함된값을함께전달한다. - 응용프로그램이실행되면서 URL에포함된값을참고해서사전에정의된특정기능을수행한다. - 별도호출후특정시간까지반응하지않을경우를대비해고객통보나설치유도와같은사전정의된예외처리를구현해야한다

139 <script> var appstoreurl = " //url 은 naversearchapp://search?qmenu=voicerecg&version=1 function onclickapp(url) { var clickedat = +new Date; naverappchecktimer = settimeout(function() { if (+new Date - clickedat < 2000){ if (window.confirm(" 네이버앱최신버전이설치되어있지않습니다.\n 설치페이지로이동하시겠습니까?")) { location.href = appstoreurl; } }, 1500); } } location.href = url; </script> [ 예시 : Custom URI Scheme 예외처리 ] 다. Custom URI Scheme 활용시유의사항 정의된 URI Scheme 에의한특정응용프로그램호출및메시지전달시악의적인추가명령줄매개변수를전달하기위해추가따옴표또는백슬래시문자를사용할수있다. 이는 Protocol Handler 를통해메시지를위변조하여시스템에악성코드나바이러스설치를유도하는방법으로사용할수있어외부데이터에의해호출메시지가위변조될수있는상황에서는가급적 URI Scheme 을사용하지않는것이바람직하다. 또한 URL 파라미터위변조를방지하기위해보안서버를통한 HTTPS(SSL) 통신을고려해야한다. 1.3 브라우저별확장기술 브라우저개발사들은자사기술전략에따라다양한확장기술을제공하고있으나보안 취약점과피싱과같은문제가지속적으로발생하여최근에는 Sandbox 보안모델을준수 하는검증된확장기술이나 HTML5 웹애플리케이션기술을권고하고있다

140 < 표 4-2> 브라우저별확장기술요약 브라우저플러그인기반기술플러그인기술웹앱기술 인터넷익스플로러 (MS) ActiveX (Edge Deprecated) Silverlight(Deprecated 예정 ) Java 애플릿플러그인 Flash Player 시스템플러그인 Custom URI Scheme 연동 (ProtocolHandler 레지스터등록 ) HTML5 WinJS asm.js (WebAssembly) 사파리 ( 애플 ) NPAPI(Deprecated) Java 애플릿플러그인 Custom URI Scheme 연동 (ProtocolHandler 레지스터등록 ) HTML5 asm.js (WebAssembly) 크롬 ( 구글 ) PPAPI(Bride) Native Client Portable Native Client NPAPI (45 Ver. Deprecated) Native Messaging 커스텀 URI Scheme 연동 (ProtocolHandler 레지스터등록 ) Legacy Browser Support( 옵션 ) HTML5 Chrome App(IE Tab) Chrome Web API Chrome JavaScript API asm.js (WebAssembly) 파이어폭스 ( 모질라 ) NPAPI(Deprecated) Native Client Java 애플릿플러그인 Flash Player 시스템플러그인 Custom URI Scheme 연동 (ProtocolHandler 레지스터등록 ) HTML5 Add-on SDK (Low Level APIs) asm.js (WebAssembly) 오페라 NPAPI Java 애플릿플러그인 Flash Player 시스템플러그인 Native Client HTML5 브라우저별로아래와같이 NPAPI 를대체할수있는플러그인기술및확장기술사용한다. - 구글 : 네이티브클라이언트 (NaCl, PNaCl), 설치형웹앱, 네이티브메시징 API등의사용을권장하고있다. - 모질라 : WebGL, Web Sockets, Web RTC, asm.js 등을활용할것을권고하고있다. - 애플 : 기존 NPAPI 를사용하지만보안충돌을고려하여사용을최소화하고 HTML5 나앱방식으로개발할것을권장하고있다. - 오페라 : 기존 NPAPI를사용하지만보안충돌을고려하여사용을최소화하고 HTML5나 PPAPI로개발할것을권장하고있다. - 마이크로소프트 : Edge 버전부터 HTML5표준사용을권장하고있다

141 관련대체기술과관련한구체적인내용은아래 URL 을통해확인가능하다. - Browser Extension : - Chrome Web API : - NPAPI : - NaCl(Native Client) : - WinJS : - asm.js : NPAPI 는샌드박스를거치지않고동작하여보안문제가발생할경우접속통제및사용제한없이브라우저강제종료및사용자시스템에문제를발생할가능성이있어크롬, 파이어폭스, 오페라, 사파리에서사용을제한하거나지원을중단하고있다. 이에따라각브라우저개발사및웹서비스개발사는 NPAPI 를 WebGL, Canvas, Web Socket, Web Worker, Video/Audio, Adaptive Streaming, Web RTC, WebVTT 와같은웹표준기술로대체하고있다. [ 그림 4-2] 크롬지원 NPAPI 대체플러그인기술

142 2. 멀티스크린지원방안 반응형웹은 HTML5, CSS3 를기반으로다양한디바이스 (PC, 태블릿 PC, 스마트폰, 스마트 TV 등 ) 의특성 ( 해상도, 화면비율 ) 에따라유연하게대응하여노출되는하나의웹문서또는사이트를의미하며, 디바이스의해상도에따라레이아웃과콘텐츠를가변폭으로표시하는방법을의미한다. - CSS3 Media Queries - Fluid/Hybrid Grid Layout - Flexible Media Content - One HTML : 하나의콘텐츠에오직하나의 HTML 소스만있다. 만약특정장치에최적화된여러벌의 HTML이있으면반응형으로분류하지않는다. (CSS, JS 파일은여러벌존재할수있다.) - One URL : 하나의콘텐츠에서별도의 URL이있으면반응형으로분류하지않는다. 2.1 도입배경 - 한번의구축으로다양한디바이스대응예전에는 PC와모바일용홈페이지를각각구축했으나이제는웹에접속할수있는디바이스가다양해졌고, 스마트폰만하더라도브랜드에따라해상도가천차만별이기때문에최적의웹서비스를제공하기위하여반응형웹디자인 (RWD) 을이용하여페이지를구현하는사례가증가하였다. - 유지 / 관리의효율성하나의소스로구축하여사용하기때문에 (OSMU : One Source Multi Use) 콘텐츠관리또한하나의소스로가능하다. PC용, 모바일용콘텐츠를따로생성하거나수정할필요가없기때문에관리의일원화로매우편리하며, 웹사이트방문자또한 PC에서보던내용을연속해서모바일기기로볼수있는장점이있다

143 - 웹표준, 호환성유지 반응형웹은다양한브라우저 (IE, Chrome, FireFox, Safari 등 ) 의호환성을보장하여야 하며, 이를위해반드시웹표준을준수하여야한다. 2.2 반응형웹기법 가. ViewPort ViewPort 란사용자가볼수있는화면에웹페이지의영역을지정하는것을말하며, 웹페이지를보는장치에따라각각의해상도를지원할수있는기능이다. 특히스마트폰기기는태블릿이나데스크탑과달리독자적인뷰포트처리방식을가지고있는데, 단말기의스크린사이즈와무관하게웹문서의너비와높이가 ViewPort 가되고스마트폰스크린에웹문서 (ViewPort) 를모두출력하기위해스크린사이즈보다큰문서는자동으로줌아웃처리를하게된다. 다시말하면 ViewPort 를스크린크기에맞게강제로축소하게됨으로써데스크탑에대응하도록만들어진문서를스마트폰으로열어보면통상 3~4배이상줌아웃되어글씨를알아볼수없는형태로작게표시하게된다. 이문제를해결하려면 HTML 문서 <head> 영역에모바일뷰포트를재설정하는 <meta> 코드를사용해야하며, 아래와같은방식으로사용한다. <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta> : 브라우저가웹페이지의크기를설정할수있게지시해주는태그 width=device-width : 접속장치의 Width 에맞춰페이지의 Width 를정해줌 initial-scale=1.0 : 브라우저에서페이지가처음로드될때배율을어떻게할지설정 [ 예시 : <meta> 코드적용방법 ]

144 <meta> 를설정하지않으면, PC 에서보는형태로아래와같이노출되게된다. [ 그림 4-3] <meta> 태그미적용 / 적용사례 Viewport 를재설정함으로써스마트폰에서웹문서를원본크기로표시하게되면스크린사이즈보다더큰너비를가지고있는문서는가로스크롤을유발하게되는데웹문서와콘텐츠의너비를가변폭으로설정하고미디어쿼리를이용해서좁은스크린상태의레이아웃을다시배치하면된다. 나. Media Query 콘텐츠내용을반응형으로제어 : CSS3 미디어쿼리는화면크기에따라서각기다른 CSS를적용할수있는중단점 ( 혹은분기점 ) 을제공한다. 데스크탑브라우저의창크기를조절해서 View Port 의크기가달라질때마다아래그림과같이서로다른내용과스타일이화면에표시된다

145 [ 그림 4-4] 기기에따른 Media Query 적용화면 - 글꼴크기를반응형으로제어 a. 미디어쿼리를이용해서화면너비에비례하도록 <html> 요소의글꼴크기를절대단위 (px) 로지정한다. b. <body>, <div>, <span> 등등 반응형으로글꼴크기를제어하고자하는요소를선택하여글꼴크기를상대 (rem) 단위로지정한다. c. 사용자환경에따라 ViewPort 의너비가달라지면 <html> 요소의글꼴절대크기도화면크기에비례하여달라진다. d. <html> 요소의글꼴크기가달라지면 <body>, <div>, <span> 등등 rem 단위를적용한요소의글꼴크기도 <html> 요소의글꼴크기에비례하여함께달라진다. 결국사용자단말의화면크기는 <html> 요소의글꼴크기를결정하고, rem 단위를사용한요소들은 <html> 요소로부터글꼴크기를결정하게되어화면크기가글꼴크기에영향을미치는원리이다

146 - 웹폰트사용미디어쿼리를통해스마트폰단말영역으로추정할수있는해상도를분기하고스마트폰단말에는적용하지않는것이좋은데그이유는다음과같다. a. 한글글꼴이포함된웹폰트는용량을아무리최적화하더라도일반적으로웹문서용량의 30% 이상을차지하게된다. b. 웹폰트는느리게로딩되기때문에글꼴이로딩되기전까지화면을출력하지않거나또는글꼴이로딩된이후화면을다시출력하는문제가있다. 따라서웹폰트를사용하고싶다면테블릿또는데스크탑화면으로추정할수있는화면크기에한해제한적으로적용하는것이좋다. 스마트폰단말은일반적으로작은화면에최적화된시스템글꼴을제공하기때문이다. 한편웹폰트사용을권장할만한상황도있다. 웹폰트는글꼴아웃라인정보만담아낼수있는것은아니기때문에다양한형태의그래픽정보를표현할수있고벡터방식으로출력하기때문에확대축소를해도비트맵처럼계단현상이발생하지않는다. 또한웹문서안에서글꼴처럼다루기때문에하나의심볼은크기뿐만아니라색상또한자유롭게변경하여아래그림과같이재사용이가능하다. [ 그림 4-5] 웹폰트그래픽 창크기를조절하면이미지의크기또한변경이되는데이때계단현상없이어떤크기로도또렷하게표시할수있다. 웹문서에이미지사용이많은경우이미지대신웹폰트그래픽을사용하면이미지전송요청횟수와그래픽파일용량을줄여서웹문서로딩성능을개선할수도있다

147 Media Query 사용법은아래와같다. (Mobile 767px 이하해상도, 반응형글꼴제어 (max-width:767px){ body { background-color: lightblue; font-size: 10px; font-family: Helvetica, Arial, Sans-serif; line-gheight: 1.5; } } [ 예시 Mobile 대상 Media Query 적용소스 ] 다. 가변폭미디어콘텐츠 본문영역을가변폭으로처리했다면포함하는콘텐츠역시가변폭에대응해야한다. 일반적인문자열은가변폭을가진부모요소의너비에따라서자동으로줄바꿈처리가되지만이미지와비디오같은미디어콘텐츠요소는기본적으로고정폭을지니고있기때문에아래그림과같은문제점이발생할수있으며, 가변폭을가진본문너비에대응할수있도록너비를다시설정해주어야한다. [ 그림 4-6] 고정폭 / 가변폭콘텐츠예시

148 예를들면다음과같은원칙을적용할수있다. a. 본문너비보다작은너비의이미지는아무런처리를하지않는다. b. 본문너비보다큰너비의이미지는본문너비를초과하지않도록너비를 100% 로재설정한다. c. 비디오는본문너비와동일하도록무조건 100% 로다시설정한다. d. 이미지또는비디오의너비가재설정될때높이또한동일한비율로다시설정한다. 이런원칙을적용하면가변폭에완벽하게대응하는본문콘텐츠를만들수있다. 데스크탑브라우저의창크기를조절하여본문콘텐츠 ( 이미지, 비디오 ) 가가변폭에대응 하는것을확인할수있다. 적용한소스코드는다음과같다. video { max-width: 100%; min-width: 100%; height: auto; } img { max-width: 100%; height: auto; } [ 예시가변폭을적용한 video, img 콘텐츠 ] 2.3 반응형웹 Framework Bootstrap 은 Twitter 내부에서개발하던라이브러리로각종 UI Component 들을모아놓은 Front-End Framework 이다. Bootstrap 을이용하면간단한스크립트와 CSS/HTML 만으로깔끔한형태의 UI/UX를구성할수있다. 디자인에익숙하지않은개발자들이데모또는프로토타입을만들기에아주유용하며, 구현하기까다로운여러 Javascript action들도간단하게라이브러리로제공하고있어쉽게사용할수있다는장점이있다

149 가. Bootstrap 의구성 Bootstrap 은사용방법에따라크게 3가지 (CSS stylesheet, Reusable component, Javascript component) 로구분할수있다. - CSS stylesheet HTML 자체의기능을확장하고강화할수있게해주는것이 CSS이다. Bootstrap 의 UI 요소중가장간단하게사용할수있는방법으로써 Boostrap 의 CSS에정의된 class 들을 tag에적용하여사용할수있다. <a class="btn btn-primary" >link with bootstrap</a> <a >link without bootstrap</a> [ 예시 Bootstrap Button CSS 코드 ] [ 그림 4-7] Bootstrap Button 위예시와같이간단한버튼을만들기위해서는일일이마우스이벤트들을처리해야 하지만이미 Bootstrap 에정의된버튼 CSS 를사용하면간단하게버튼을생성할수있다. Grid system : Grid 형태의영역구분을가능하게해주는 Layout 체계 Typography : 각종텍스트서식을위한스타일 Code : 코드또는키코드표시를위한스타일 Tables : 테이블스타일 Forms : 폼스타일 Buttons : 버튼스타일 Images : 이미지스타일 Helper classses : 자주사용하는기능을모아놓은유틸 Responsive utilities : 반응형페이지동작을위한유틸 [ 예시 Bootstrap 에서제공하는 css]

150 - Reusable component HTML만으로는표현할수없었던화면구성요소들을 css와 javascript 의조합을통해다양하게제공한다. 버튼묶음을예로들면 HTML 에서는버튼을단순하게나열할수밖에없었지만 Bootstrap 을통하면시각적으로나기능적으로묶음으로서의동작을구현할수있다. Bootstrap 컴포넌트들을사용할때는단순하게 tag 안 class 입력만으로가능하다. <div class="btn-group"> <button type="button" class="btn btn-default">left</button> <button type="button" class="btn btn-default">middle</button> <button type="button" class="btn btn-default">right</button> </div> [ 예시 Bootstrap Button Group 코드 ] [ 그림 4-8] Bootstrap Button Group

151 Glyphicons : 아이콘컴포넌트 Dropdowns : 드랍다운형태를만들어주는컨테이너컴포넌트 Button groups : 버튼그룹컴포넌트 Button dropdowns : 버튼액션에드랍다운이추가된컴포넌트 Input groups : 입력폼묶음컴포넌트 Navs : 탭 / 버튼형태의각종네비게이션버튼묵음컴포넌트 Navbar : 네비게이션메뉴바컴포넌트 Breadcrumbs : 페이지이동경로표시컴포넌트 Pagination : 페이징컴포넌트 Labels : 레이블 / 태그컴포넌트 Badges : 알람등에사용되는뱃지컴포넌트 Jumbotron : 타이틀화면구성용컴포넌트 Page header : 페이지상단구성용컴포넌트 Thumbnails : 썸네일컴포넌트 Alerts : 알림표시를위한컴포넌트 Progress bars : 프로그레스바컴포넌트 Media object : 다양한종류의자료를목록형태로표시하기위한컴포넌트 List group : 목록표컴포넌트 Panels : 제목틀을가진패널컴포넌트 Responsive embed : embed로삽입된객체의반응형처리를위한컴포넌트 Wells : 인용문구표시컴포넌트 [ 예시 Bootstrap 에서제공되는 Reusable component] - Javascript component jquery 를이용하여보다다양한 Bootstrap 의기능들을사용할수있다. 장점으로는반응형웹을지원하며 CSS 에대한이해도가낮은초보자가이용하기편리하다. 단점으로는정형화되어있는 CSS 로인해흔한디자인의사이트가양산될수있으며, 타 Front-end Framework 과구성은비슷하나, 퍼포먼스가나오지않는다

152 나. Foundation Foundation 은기본적으로는 Bootstrap 과마찬가지로각종 UI/UX 컴포넌트를제공하고 있지만 Foundation 은빠른프로토타이핑을위한여러장치들을제공하고있다. HTML Templates : 웹페이지에자주사용되는기본 HTML Template을제공하여불필요한반복코드생산을줄일수있다. Stencils : Foundation 컴포넌트들의스텐실을제공함으로써웹디자이너가개발자에게보다정확한시안을제공하여보다빠른프로토타이핑이가능하다. Icon packs : 프로토타이핑시자주사용하는 icon 을기본적으로제공하여보다빠른프로토타이핑이될수있도록한다. [ 예시 Components of Foundation] Foundation 홈페이지에서는 Learn 항목을따로내놓고 Foundation 을처음접하는개발자와디자이너를위한강좌가개설되어있다. - Foundation 구성요소 a. Structure : 반응형웹페이지구성을위한각종레이아웃구성을위한기능들을제공 Media Queries : CSS Media Query를이용한화면크기별 CSS 적용법 Visibility : 화면크기또는화면방향에따른표시여부를설정 Grid : 화면크기에따라다양한레이아웃을적용할수있는영역설정법 Block Grid : 화면크기에따라콘텐츠블럭의배열을조정할수있는영역설정법 Interchange Responsive Content : 화면크기의변경에따라 javascript 이벤트가발생하여상황에맞추어처리가능 [ 예시 Foundation 에서제공되는 Structure]

153 b. Navigation : 화면이동 / 선택등의기능들을제공 Offcanvas : 메인콘텐츠의좌우에메뉴를숨겼다열수있음, 안드로이드의 Drawer와비슷한기능 Top Bar : 웹페이지상단에다양한형태의메뉴를표시할수있는 Navigation 바를만드는기능 Icon Bar : Navigation Bar에 Icon을넣은메뉴를만드는기능 Side Nav : 화면양옆에표시할수있는 Navigation 바를만드는기능 Magellan Sticky Nav : 스크롤시에상단에따라오는 Navigation 바를만드는기능 Sub Nav : 간단한 Navigation 메뉴를만드는기능 Breadcrumbs : 단계가있는메뉴를따라이동시에현재단계를나타내는기능 Pagination : 페이지구분을기능을간편하게제공하는컴포넌트 [ 예시 Foundation 에서제공되는 Navigation] c. Media : 콘텐츠사용되는미디어를표시하기위한기능들을제공 Orbit Slider : 이미지슬라이더를만드는기능, 모바일의경우 Swipe도지원 Thumbnails : Thumbnail 이미지를테두리와함께표시하는기능 Clearing Lightbox : 화면의크기에따라내부콘텐츠의표시위치를자동으로변경해주는기능 Flex Video : 화면의크기에따라 Youtube, vimeo 등의 embed 된 Video의크기를자동으로변경해주는기능 [ 예시 Foundation 에서제공되는 Media] d. Forms : 사용자입력데이터를처리하기위한 UI 기능 Forms : Form layout을구성할수있는기능 Switches : checkbox, radiobutton을 switch 형태로표시하는기능 Range Sliders : Slider를구현할수있는기능 Abide Validation : 입력값의형태가유효한지확인할수있는기능 [ 예시 Foundation 에서제공되는 Forms]

154 e. Buttons : 입력버튼을다양하게구현할수있는기능 Buttons : Button을구현할수있는기능 Button Groups : Button을묶음으로구현할수있는기능 Split Buttons : Dropdown Button과유사하지만 Dropdown 메뉴표시영역이다름 Dropdown Buttons : Dropdown Menu가포함된 Button을구현할수있는기능 [ 예시 Foundation 에서제공되는 Buttons] f. Typography : 문자를목적에맞게표현하기위한기능 Type : 각표시목적별로 Style이정의되어있음 Inline Lists : List를가로로표시할수있는기능 Labels : 다양한형태의 Label을구현할수있는기능 Keystrokes : 키입력을표시할수있는기능 [ 예시 Foundation 에서제공되는 Typography] g. Callouts & Prompts : 특정조건, 시점에대한알림이나팝업에관한기능 Reveal Modal : Modal을구현할수있는기능 Alerts : 알림메세지를표현하는기능 Panels : 여러컴포넌트를묶어서표현할수있는기능 Tooltips : 풍선도움말을표시하는기능 Joyride : Step by Step 설명을동적화면이동과함께표현할수있는기능 [ 예시 Foundation 에서제공되는 Callouts & Prompts] h. Content : 내용을목적에맞추어가독성을높이는등다양하게표현하는기능 Dropdowns : Dropdown을구현할수있는기능 Pricing Tables : 가격테이블을표현할수있는기능 Progress Bars : 진행상태표시바를구현할수있는기능 Tables : Table 화면을구성할수있는기능 Accordion : Accordion 화면을구성할수있는기능 Tabs : Tab 화면을구성할수있는기능 Equalizer : 다양한화면크기에도동일한크기의 Panel을구성해주는기능 [ 예시 Foundation 에서제공되는 Contents]

155 - 장점으로는반응형웹을유연하게구현할수있다. - 단점으로는초보자가사용하기매우복잡하다. 다. Javascript Framework 1) Ionic 아이오닉 (Ionic) 은하이브리드앱중하나이다. 기본적으로코르도바 (Cordova) 개발프레임웍위에서동작하고앵귤러 (AngularJS) 자바스크립트프레임웍을사용한다. 때문에 MVC 뿐만아니라 MVW 디자인패턴구현이쉽고, 웹에서사용하는앵귤러코드를그대로모바일로가져다사용할수있는코드재사용의이점이있다. 아이오닉은각모바일페이지관리를위해 UI Router 라는앵귤러써드파티라이브러리를추가로사용한다. - 개발환경구성 : 아이오닉은노드개발환경을사용하기때문에 Node.js 를설치해야한다. a. Npm으로아이오닉과코르도바 (cordova) 를설치한다. $ sudo npm install -g ionic cordova 아이오닉은내부적으로코르도바를사용한다. 코르도바로빌드하게되면네이티브앱이만들어지기는하지만플랫폼에어울리는디자인은아니다. ios나안드로이드스타일의컴포넌트디자인이아니라는것이다. 하지만아이오닉은각플랫폼에맞는스타일의컴포넌트를미리제공하기때문에쉽게 UI를개발할수있다. 또한 ionic serve 명령어로편리하게개발할수있고결과물이코르도바에비해뛰어난성능을보장한다. 이러한장점에더해앵귤러가제공하는 MV* 패턴으로견고한애플리케이션을설계할수있는장점이있다. b. 프로젝트생성 : 아래명령어로 helloworld 아이오닉프로젝트를생성한다. $ ionic start helloworld blank 마지막에 blank 옵션없이사용하면기본적으로 tabs 옵션이따라붙는다. 이것은프로젝트생성시템플릿을설정하는옵션이다. 푸시노티피케이션사용을위한 ionic.io 계정생성에대한질문을하지만 n를입력하고진행한다. 설치가완료되면 helloworld 폴더가생성되는데이쪽으로이동한뒤다음명령어를실행하면 [ $ ionic serve ] 로컬서버가구동되며, 웹브라우저를통해아래의화면이노출된다. 웹브라우저를시뮬레이터로사용하면서개발을진행할수있다

156 [ 그림 4-9] Ionic Simulator 코드수정 : 생성된폴더를에디터로열어보면아래와같다. [ 그림 4-10] Ionic Folder Tree

157 www 폴더에 html, js, css 파일들이있다. index.html 을열고간단히타이틀만 "Hello world" 로변경하고저장하면바로 ionic serve 명령어가코드변화를감지하고 이를웹브라우저에반영한다. [ 그림 4-11] 코드변화가적용된 Ionic Simulator

158 아이오닉은멀티플랫폼을지원하여다음명령어를사용하면 [ $ ionic serve lab ] 각플랫폼에서의결과물을테스트할수있다. - 장점 하나의코드로멀티플랫폼을지원한다. 하나의코드로모든디바이스애플리케이션을빌드할수있다. 각플랫폼에최적화된 UI 컴포넌트를제공한다. Angular.js 의모든장점을그대로수용한다. ( 데이터바인딩, MVW 디자인패턴, 테스트, 다양한서트피티모듈등 ) - 단점 네이티브모바일애플리케이션에비해성능및일부기능의한계가있다. 2) React React는사용자인터페이스를만들기위해페이스북과인스타그램에서개발한오픈소스자바스크립트라이브러리로써, 사용자인터페이스 (User Interface) 에집중하며, Virtual DOM을통해속도와편의를높이고, 단방향데이터플로우를지원하여보일러플레이트코드를감소시켜, 많은사람들이 React를 MVC(Model View Controller) 의 V(View) 를고려하여선택한다. 즉, React 는지속해서데이터가변하는대규모애플리케이션의구축이라는하나의문제를풀기위해서만들어졌다. - React 특징 a. 뷰레이어 React는일반적으로 MVC, MV* 패턴에서뷰레이어만을담당하며, 특별히어떤형태의모델이사용될것인지에대한가정을하지않으므로, 아무라이브러리나사용해도무방하며, 작은앱이라면굳이사용하지않아도상관없다. 데이터를서버에서가져온다거나 (ajax 요청 ), 데이터들을조작한다거나 (underscore/lodash) location 에따라다른컴포넌트를마운트해준다거나 (Backbone.Router, angular-route) 하는기능은직접구현하거나, 상황에맞는라이브러리를사용해야한다. 페이스북에서는 Flux 아키텍쳐을이용하는데, 이를 React 와함께사용할수있는자바스크립트리퍼런스구현이공개되어있다

159 b. Virtual DOM Virtual DOM을사용하면, 실제 DOM에접근하여조작하는대신에, 이를추상화시킨자바스크립트객체를구성하여사용한다. 실제 DOM의가벼운사본이라고생각하면된다. React 에서데이터가변하여브라우저상의실제 DOM을업데이트할때에는다음과같이 3가지절차를따른다. 1 데이터가업데이트되면, 전체 UI를 Virtual DOM에리렌더링 2 이전 Virtual DOM에있던내용과현재의내용을비교 3 바뀐부분만실제 DOM에적용 Virtual DOM을사용한다고해서, 사용하지않았을때와비해무조건빠른것은아니다. React 매뉴얼에따르면, 지속해서데이터가변화하는대규모애플리케이션을구축하기위해만들어진것이며적절한곳에사용해야 React 의최적의퍼포먼스를뽑을수있다. React와 Virtual DOM의특장점은바로업데이트처리에대한간결함이다. UI를업데이트하는과정에서생기는복잡함을모두해소해주고, 업데이트에더욱쉽게접근할수있게해준다. c. JSX JSX는 JavaScript의확장문법이다. DOM 엘리먼트를만들때 JavaScript 형식으로작성해야하는것을, XML과비슷한형태로작성할수있게해준다. JSX는템플릿언어이지만일반적인템플릿언어들과는다르다. JSX는 EcmaScript 로치환되는간단한치환 / 확장언어로서, 지금은사라진언어명세인 E4X에영향을받아만들어졌다. React 컴포넌트와 React.DOM 가상엘리먼트생성자들은트랜스파일러를통해 React.createElement 함수콜로치환된다. <div foo={0} bar={'baz'} /> <script> // 치환후 React.createElement('div', { foo: 0, bar: 'baz' }); </script> [ 예시 React.createElement 함수치환 ]

160 JSX는 Handlebars 나 Jinja2와같이자체적인 if-else, 반복문, 조건적표현블럭등의제어구조를가지고있지않고, EcmaScript 표현식들을 {} 안에써준다는정도에그치기때문에일반적인템플릿언어라고보기에는무리가있다. 그렇지만 JSX는 EcmaScript 로치환되는언어일뿐이므로, 그냥함수호출식으로써도무방하며, React에서는 JSX로쓰기를권장한다. d. Component React 는모두 Component 로구성이되어있으므로 React 개발을할때는모든것을 Component 로서생각해야한다. React 는컴포넌트라이프사이클훅을제공하는데컴포넌트가마운트 (Owner 에서 React.CreateElement 함수호출로새컴포넌트인스턴스를만들거나, React.render 로 DOM 컨테이너위에 Render 되는순간 ) 되는순간과언마운트되는시점, 업데이트되는시점등등에불리는함수들을컴포넌트스펙오브젝트에서인터페이스를구현하듯이작성해두며, 일종의이벤트훅같은것이라고생각하면된다. 또한모든 React 컴포넌트들은 HTML 의인라인이벤트핸들러같은 onclick 등의 prop을넘김으로서인터랙션을표현할수있다. - 장점 클라이언트는물론, 서버에서도렌더링될수있음 다른프레임워크와사용가능 Component 와 Data 패턴의가독성이높아큰규모의애플리케이션의유지보수가가능 JavaScript 객체형태의 Virtual DOM 을사용 (JavaScript Virtual DOM 처리가실제 DOM 보다빠르기때문에애플리케이션의성능을향상시킴 ) - 단점 모든코드를재사용할수있지는않음 내부적인 proxy 구현등으로인해제약이발생하는경우도있음 아직은버전이낮은편이고, 계속개발중이라 API 가업데이트될수도있음 애플리케이션의 'View' 레이어만다루므로이외의부분은다른기술을사용해야함 inline-template 과 JSX 를사용하는데, 일부개발자들에게는적응이안될수있음

161 3) Angular.js & UI Bootstrap AngularJS는웹애플리케이션개발에필요한여러기능을제공하는오픈소스자바스크립트프레임워크다. SPA(Single Page Application) 형태의웹애플리케이션개발에적합하며, 반응형웹디자인을위해고안된프레임워크는아니다. DOM 제어에중점을두지않고데이터변화와출력에중점을두는특징이있다. UI Bootstrap 과연동하기좋다. 그러므로 Angular js의기능적인소개보다는 UI Bootstrap 과연동에초점을맞추어서술한다. UI Bootstrap 중트위터에서공개한트위터부트스트랩 (Twitter Bootstrap) 은웹프론트엔드 UI 작업시가장인기있는라이브러리중하나이다. 앵귤러 UI팀에서는이러한부트스트랩라이브러리를앵귤러디렉티브로만들기위한 UI-Bootstrap 프로젝트 (UI Bootstrap) 를진행하고있다. 트위터부트스트랩컴포넌트중자바스크립트연동이필요한컴포넌트를앵귤러디렉티브로모듈화하였다. UI-Bootstrap 을사용하면템플릿코드에서디렉티브선언만으로부트스트랩컴포넌트를구현할수있다. 이러한특징은코드를간결하게유지할뿐만아니라선언형프로그래밍의특징을활용하여로직을모듈화할수있다는장점이있다. - UI Bootstrap 의구성 : UI Bootstrap 은부트스트랩의컴포넌트구성과유사함 Accordion : 아코디언디렉티브 Alert : 알럿메세지디렉티브 Carousel : 캐러셀 ( 슬라이드 ) 디렉티브 Callapse : 컬랩스디렉티브. 엘러맨트요소를숨기거나보일수있다. Dropdown : 드랍다운메뉴디렉티브 Modal : 모달 ( 팝업창 ) 디렉티브 Pagination : 페이지네이션디렉티브 Popover : 팝오버디렉티브 [ 예시 UI Bootstrap 의구성 ]

162 - UI-Bootstrap 에서별로도제공하는컴포넌트목록이다. Buttons : 버튼그룹디렉티브. 라디오박스, 체크박스기능을제공한다. Datepicker : 데이트픽커 ( 날짜선택 ) 디렉티브 Timepicker : 타임픽커 ( 시간선택 ) 디렉티브 Rating : 래이팅디렉티브. 별점주는용도로활용할수있다. Typeahead : 타입어헤드디렉티브. 자동완성필드에활용할수있다. [ 예시 UI Bootstrap 의 Component 목록 ] - 사용법 a. 템플릿에서의선언 Alert을생성하는디렉티브를사용하면간단하게아래와같이만들수있다. <alert type="danger">danger alert 입니다 </alert> [ 예시 Alert 생성예시코드 ] [ 그림 4-12] Alert 예시 alert 디렉티브를통해생성되는엘리먼트를살펴보면 type 속성값에따라클래스명이동적으로붙게된다. type="danger 일경우.alert-danger 클래스가붙고 type="warning 일경우.alter-warning 클래스가붙는규칙이다. 만약 type="custom 이라고선언하면.alert-custom 클래스가붙게될것이다. 이러한특징을활용하여커스텀색상의 alert을만들수도있다. b. 컨트롤러데이터와바인딩앵귤러를사용하는장점중의하나는컨트롤러를통한템플릿과의데이터바인딩이다. 컨트롤러의스코프변수에 alert을위한데이터를정의하고이것을템플릿에서연결하여 alert을동적으로생성 / 삭제할수있다. 컨트롤러코드를먼저살펴보자. 컨트롤러에서는 {type:, msg: } 객체를정의하여 alert 데이터객체배열을생성한다

163 angular.module('demo').controller('democtrl', function($scope) { $scope.alerts = [{ type: 'danger', msg: 'danger 알람입니다.' }, { type: 'success', msg: 'success 알람입니다.' }]; }); [ 예시컨트롤러예시코드 ] 사용자입력에따라 alert 을추가하기위해 addalert() 함수를만들고스코프변수에 저장한다. $scope.addalert = function(alert) { // alert 파라매터가비었을경우기본값을설정한다. alert = alert { type: 'warning', msg: 'warning 알람입니다 ' }; alert.type = alert.type 'warning' alert.msg = alert.msg 'warning 알람입니다 ' // 배열에 alert 객체를추가한다. $scope.alerts.push(alert); $scope.type = $scope.msg = '' }; [ 예시 addalert() 예시코드 ] Alert 우측상단의 x 버튼을클릭하여해당 alert 을삭제하기위한 clsealert() 함수도 만들어스코프변수에저장한다. $scope.closealert = function(index) { }; $scope.alerts.splice(index, 1); [ 예시 closealert() 예시코드 ]

164 위와같이컨트롤러를구성한다음템플릿에이컨트롤러를연결한다. 앵귤러컨트롤러를 템플릿과연결하여스코프변수를사용하기위해서는 ng-app=" 모듈명 " 디렉티브를 이용하여앵귤러를사용을명시한다. <html ng-app="demo"> [ 예시앵귤러사용명시코드 ] 그리고컨트롤러를연결을위해엘레멘트에 ng-controller=" 컨트롤러명 디렉티브를 추가한다. <div ng-controller="democtrl"> [ 예시컨트롤러디렉티브예시코드 ] 컨트롤러에서정의한 $scope 변수를사용하여 alert 를생성한다. <alert ng-repeat="alert in alerts" type="" close="closealert($index)"></alert> [ 예시 $scope 변수를이용한 alert 예시코드 ] 컨트롤러스코프변수에저장된 $scope.alerts 배열을 ng-repeat 디렉티브로순회하면서 alert 엘리먼트를생성한다. 그리고 close 속성에 closealert($index) 함수를바인딩하여클릭시알람을제거하도록하였다. 여기까지작성하면템플릿은아래와같이 alert 을생성한다. [ 그림 4-13] Custom Alert 예시

165 - 장점 유지보수가쉽고, 개발속도가빠르다. 간편한데이터바인딩을통해뷰업데이트가쉽다. 코드패턴이동일해개인간차이에따른결과물의차이가적다. 코드량이감소한다. SPA 개발에최적화되어있다. 기능적인분리가명확해협업이쉽다. (MVC 디자인패턴 ) - 단점 크로스브라우징의제약 Google 이외의검색엔진에서콘텐츠가웹크롤링되지않는다. 버전파편화및지나친제약이따른다

166

167 Ⅴ. NPAPI 대체기술 개요

168

169 Ⅴ. NPAPI 대체기술 1. NPAPI 대체기술개요 브라우저개발사들은점진적으로비표준플러그인기술 (ActiveX, NPAPI) 들을아래와같은사유로 3년전부터폐지하거나, 대체방안을제시하고있으며, 특히구글크롬브라우저에서지원되던 NPAPI 의경우 45버전부터현재까지유지하던수동설정기능까지도지원을중단하였다. 구글의 NPAPI 지원중단사유는다음과같다. - 보안 : 플러그인은일반적으로샌드박스를거치지않는 Low Level 언어 (C, C++) 로웹브라우저의 CPU 자원을남용하는원인으로지목되어왔다. - 안정성 : 플러그인일반적으로 Low Level 코드로시스템에접근함으로써웹사이트강제종료및수동종료를유도하는주된원인이었다. - 성능 : NPAPI 사용웹콘텐츠들은그래픽가속화등구글의최적화기능을사용할수없어더많은전력을소모하며, 전반적으로브라우저의성능을저하시킨다. - 호환성 : NPAPI 는전체적인브라우저와통합되지않으며, 현재급속도로성장중인모바일웹에서지원하지않는다. - 사용량 : 구글이 NPAPI 지원중단을시작하기전부터플러그인사용량은급속도로감소하고있으며, 지금가장자주쓰이는플러그인조차실행률은 1% 미만이다. - 개발자개발부담 : NPAPI 에대한지속적인지원은크롬코드베이스의복잡성을증가시키고, 과도하게개발부담을개발자에게전가하고있다. 가. 구글의웹사이트및개발자지원계획 구글은이전에발표한 *NPAPI 중단관련개발자안내서 이외에 NPAPI 기능을대체할 수있는최신웹기술에대한별도계획은없다. 특정개발자집단을위한개발지원계 획이나실행프로그램을제공하지도않는다. 기본적으로 NPAPI 대체기술과관련해서는

170 웹서비스개발사가자사서비스정책에맞는다른기술을적용하는것을추천하고있다. 또한스택오버플로워 (stackoverflow) 같은개발자사이트정보를참고하는것을권하고있다. * 나. 구글의 NPAPI 중단관련개발안내서요약 NPAPI 가차단됨에따라기존에각운영체제별 NPAPI 플러그인에의존하던기능을실행할수있게해주는최신기술에관한일부개발자의문의에따라일반적인 NPAPI 사용사례와표준웹기술기반대안방안을제공한다. 일반적으로주요웹표준기반기술 (HMTL, CSS, JS) 은대부분샌드박스내부에서클라이언트소프트웨어개발에적합하다. 만약웹샌드박스외부의기능에대한접근을필요로하는경우무수히많은 * 크롬확장기능과 **App API가제한적인 OS 기능에대한접근을제공한다. 2015년 4월부터크롬은 NPAPI 지원을기본설정으로비활성화하였으며, 크롬웹스토어에서 NPAPI 플러그인을필요로하는확장프로그램을삭제하였다. 사용자및기업들에게임시로 NPAPI 를사용할수있는옵션으로주소창에 chrome://flags/#enable-npapi 기입을통해 NPAPI 플러그인설정을변경하여사용할수있는방법을제공하였다. 그러나 2015년 9월이후에는해당방법또한 NPAPI 지원기능종료와함께사용할수없게되었다. * ** 다. 브라우저개발사추천확장기술 브라우저별로아래와같이 NPAPI 를대체할수있는플러그인기술및확장기술사용한다. - 구글 : 네이티브클라이언트 (NaCl, PNaCl), 설치형웹앱, 네이티브메시징 API등의사용을권장하고있다. - 모질라 : WebGL, Web Sockets, Web RTC, asm.js 등을활용할것을권고하고있다. - 애플 : 기존 NPAPI 를사용하지만보안충돌을고려하여사용을최소화하고 HTML5 나앱방식으로개발할것을권장하고있다

171 - 오페라 : 기존 NPAPI를사용하지만보안충돌을고려하여사용을최소화하고 HTML5나 PPAPI로개발할것을권장하고있다. - 마이크로소프트 : Edge 버전부터 HTML5 표준사용을권장하고있다. ( 기존 IE에서는 ActiveX 지원 ) < 표 5-1> NPAPI 대체기술 기술별 NPAPI 적용부분 세부기술 표준대체기술 기본구성요소 Ÿ Ÿ HTML5 Media Elements : HTML5 표준은 <audio>, <video> 엘리먼트를제공하며대부분의경우 <canvas> 와함께사용 ( 예 : Video FX Chrome Experiment) WebRTC : Peer간실시간통신을위해설계되었으며실시간미디어, 데이터의라이브스트리밍시사용가능 비디오및 오디오 Adaptive Streaming (DASH) 화상회의 Ÿ Ÿ Ÿ Silverlight의 Smooth Streaming 혹은 QuickTime의 HTTP Live Streaming과같이모던웹에서각각의사용자들에게반응적으로스트리밍할수있는기술 HTML Media 엘리먼트의 Media Source Extension 으로구현가능 WebRTC 에서제공되는 JavaScript API 를이용하여구현가능 ( 예 : Cube Slam Chrome Experiment) DRM (Digital Rights Management) Ÿ EME(Encrypted Media Extensions) 표준으로 HTML5 video 에 DRM 적용가능하며, 공개코덱인 WebM 을이용해서비디오구성요소의미디어확장기능을사용할수있음 네이티브 애플리케이션과의 커뮤니케이션 폐쇄자막 게임및 3D - Ÿ WebVTT 와 <video> 태그의하위엘리먼트인 <track> 구성요소를이용하여 HTML 앱에서시간제한텍스트자막기능을추가할수있음 - Ÿ 크롬앱및크롬확장 Native Messaging API 를사용할수있음 Ÿ Ÿ Native Client(NaCl) 의크로스플랫폼게임개발환경사용 WebGL 표준으로 3D 그래픽가속기능사용 보안 - Ÿ TLS 로전환을권장하며추후에는 Web Crypto 표준사용을권장 하드웨어접근 - 화면캡쳐 - Ÿ Ÿ Ÿ Ÿ 웹캠, 마이크등과같은사용자 PC의외부장비에대한접근을 Media Capture 표준으로구현가능 USB 하드웨어에대한액세스및블루투스장치를액세스하기위한응용프로그램 API(chrome.usb, chrome.bluetooth) 사용 Desktop Capture 를이용하여전체화면캡처가능 Tabs API의 capturevisibletabs 를이용하여개별탭캡처가능

172 2. NPAPI 국내사용현황및분류 국내민간주요 200대웹사이트중 78개웹사이트에서 241개의 NPAPI 를사용하고있으며, 주요사용기능은결제, 보안, 인증, 게임실행, 멀티미디어, 파일처리, PC제어 ( 바로가기설치, 원격제어 ), 전자문서 ( 위변조방지, 시점확인, 출력 ) 에사용되고있다. 분야별로는포털이 NPAPI 를가장많이사용하고있으며, 결제, 보안, 인증기능을많이사용하는금융분야가두번째로많이사용하고있다. NPAPI 를사용하는사이트대부분이 10개이하의 NPAPI 를사용하고있으며, 직접 NPAPI 를개발하기보다는웹솔루션에기능이포함되어사용하는경우가대부분이다. < 표 5-2> 국내 NPAPI 사용현황 구분 민간 200 대사이트 NPAPI 사용수 결제 ( 전자서명, 전자결제 ) % 보안 ( 백신, 방화벽, 로그인보안, 키보드보안 ) % 게임 ( 게임실행 ) % 인증 ( 본인확인, 시점확인 ) % 기능별 NPAPI 멀티미디어 ( 그래픽편집, 동영상, 음원재생 ) 9 3.7% 파일처리 ( 대용량다중파일처리, 고속파일다운, 업로드 ) 8 3.3% PC 제어 ( 시스템정보확인, 장치연동관리 ) 6 2.5% 전자문서 ( 문서보호, 암호화, 출력 ) - - 기타 ( 채팅상담 ) - - 합계 241(100%)

173 < 표 5-3> 국내 NPAPI 사용현황및분야 순위 구분 기능 NPAPI 명 업체명 중복수 비중 1 WP 업데이트 SandBox Plugin think-bowl 41 17% 2 전자결제 INISAFE CrossWeb NP Plugin 이니텍 30 12% 결제 3 전자결제 INICIS INIPay Plugin 이니시스 % 4 보안 플러그인 통합설치 Veraport Mozilla Plugin 베라포트 % 5 결제 전자결제 KCP 한국사이버 결제 % 6 전자결제 LG Uplus XPay Plugin npruntime) LG U % 7 키보드보안 TouchEnKey for Multi-Browser 라온시큐어 % 8 보안관리 백신 AhnLab Online Security 안랩 8 3.3% 9 개인방화벽 nprotect Netizen v5.5 Install. 잉카인터넷 8 3.3% 10 인증 인증서관리, 암호화 SoftForum XecureWeb Control Plug-in 소프트포럼 7 2.9% 합계 % < 표 5-4> 크롬플러그인실행현황 구분 Sliverlight 15% 13.3% 11% Google Talk 8.7% 8.7% 7% Java 8.9% 7.2% 3.7% Facebook 6% 4.2% 3.0% Unity 9.1% 3.1% 1.9% Google Earth 9.1% 0.1% 0.1%

174 3. NPAPI 대체기술 가. Native Messaging Native Messaging 은크롬브라우저에서실행되는웹과 Native 애플리케이션사이에메시지를전달하여통신할수있는기능 (API) 을제공한다. Native Messaging 으로통신하기위한 Native 애플리케이션은 Native 애플리케이션이실행되는 OS에 Native Messaging Host로등록되어있어야한다. Native Messaging 으로통신시크롬은각 Native 애플리케이션을분리된프로세스로시작하며 standard input/output (stdio) 스트림으로메시지를교환한다. 나. Native Messaging Host 등록 Native Messaging Host 등록은통신에필요한설정으로구성된 manifest 파일을사용 한다. 다음은 manifest 파일을구성한예이다. { "name": "com.my_company.my_application", "description": "My Application", "path": "C:\\Program Files\\My Application\\chrome_native_messaging_host.exe", "type": "stdio", "allowed_origins": [ "chrome-extension://knldjmfmopnpolahpmmgbagdohdnhkik/" ] } [ 예시 : manifest 파일구성 ] manifest 파일구성시사용되는필드별설명은다음표와같다

175 < 표 5-5> manifest 파일구성필드 필드이름 Name description path type 설명 Native Messaging Host 이름.runtime.connectNative 과 runtime.sendnativemessage API 에서전달되는인자중 Native Application 을지정할때사용한다. Native Application 에대한설명 Native Application 의 binary 파일에대한경로정보. 리눅스, OS X 에서는절대경로로만지정해야하며 Windows 경우에는상대경로도가능하다 통신방법을지정하는필드. 현재 standard input/output 스트림으로만통신이가능하므로이필드의값은 stdio 만사용할수있다. allowed_origins Native Application 으로접근할수있는 Chrome Extensions 목록을정의한다. 구성된 manifest 파일은 Native 애플리케이션이동작하고있는 OS 에따라저장되는 위치가틀리며다음표에서확인할수있다. < 표 5-6> OS 별 manifest 파일위치 OS Windows OS X Linux 설명 manifest 파일이위치한경로를레지스트리에등록해야한다. 등록할레지스트리키값은아래둘중에하나가되어야한다. HKEY_LOCAL_MACHINE\SOFTWARE\Google\Chrome\NativeMessagingHosts\com.my _company.my_application HKEY_CURRENT_USER\SOFTWARE\Google\Chrome\NativeMessagingHosts\com.my_ company.my_application. 아래의경로에 manifest 파일이위치해야한다. /Library/Google/Chrome/NativeMessagingHosts/com.my_company.my_application.json 애플리케이션이특정이용자만실행하도록설치된경우는아래의경로에 manifest 파일이위치해야한다. ~/Library/Application Support/Google/Chrome/NativeMessagingHosts/ com.my_company.my_application.json 아래의경로에 manifest 파일이위치해야한다. /etc/opt/chrome/native-messaging-hosts/com.my_company.my_application.json 애플리케이션이특정이용자만실행하도록설치된경우는아래의경로에 manifest 파일이위치해야한다. ~/.config/google-chrome/nativemessaginghosts/com.my_company.my_application.json

176 - Native 애플리케이션연결및메시지전송 runtime.connectnative 로 Native 애플리케이션으로통신할수있다. 다음은 runtime. connectnative 의사용예이다. var port = chrome.runtime.connectnative('com.my_company.my_application'); port.onmessage.addlistener(function(msg) { console.log("received" + msg); }); port.ondisconnect.addlistener(function() { console.log("disconnected"); }); port.postmessage({ text: "Hello, my_application" }); [ 예시 : 연결및메시지전송예시 ] 위의예와같이 runtime.connectnative 로연결하고해당객체 ( 예에서는 port) 로계속통신하는경우 Native 애플리케이션을실행된상태로유지하면서통신하게된다. runtime.connectnative 를사용하지않고 runtime.sendnativemessage 로통신하는경우실행시마다 Native 애플리케이션을다시실행시킨다. chrome.runtime.sendnativemessage('com.my_company.my_application', { text: "Hello" }, function(response) { console.log("received " + response); }); [ 예시 : runtime.sendnativemessage 를통한메시지전송예시 ] 브라우저에서실행되는 Native Messaging API를사용하는데있어다음과같은제약사항이있다. Native Messaging 을사용하는경우크로스사이트스크립팅공격에노출될수있어, 크로스사이트스크립팅공격에대하여안전하도록처리가필요하다. chrome.tabs.sendmessage(tab.id, {greeting: "hello"}, function(response) { // WARNING! Might be evaluating an evil script! var resp = eval("(" + response.farewell + ")"); });

177 chrome.tabs.sendmessage(tab.id, {greeting: "hello"}, function(response) { // WARNING! Might be injecting a malicious script! document.getelementbyid("resp").innerhtml = response.farewell; }); [ 예시 : 크로스사이트스크립팅공격을받을수있는예 ] 이외 SDK, 개발방법및예제소스, PPAPI 개발은아래사이트를참조할수있다 다. Chrome Web API 대다수확장기능의경우웹페이지나웹애플리케이션에크롬자바스크립트 API와크롬 Web API를포함하여개발할수있다. 특히네이티브코드 (C, C++) 를추가하지않고, 구글이만든추가기능을 API를통해쉽게활용할수있다. 크롬브라우저에서확장할수있는 API 샘플은아래와같다. - 표준자바스크립트 APIs : 일반적인웹응용프로그램에서사용할수있는 (DOM) API를동일한코어자바스크립트와문서객체모델 - XMLHttpRequest : 하나이상의서버로부터웹서비스데이터를요청하는 XML HttpRequest 객체를사용한다. 확장기능을호스팅하는매니페스트권한필드요청을보낼수도있다. - HTML5 and other emerging API : 구글크롬은새로운 API 와함께 HTML5 기능을지원한다. 다음은사용할수있는일부 API로써아래와같다. audio, video application cache canvas geolocation local storage notification web database

178 이외최신튜토리얼과정보는 html5rocks.com 를통해확인할수있다. - WebKit APIs: 구글크롬은웹킷기반으로구축되어있기때문에, 확장을위해웹킷 API를사용할수있다. 특히 CSS 확장기능을통해이미지필터, 애니메이션, 이미지변형등을쉽게제공할수있다. - V8 APIs, such as JSON : JSON은 V8에있기때문에, JSON 기능을사용할수있는 JSON 라이브러리를포함할필요가없다. - APIs in bundled libraries : 브라우저 ( 예를들어, jquery) 를제공하지않는라이브러리를사용하는경우, 확장기능과라이브러리의 JavaScript 파일을번들할수있다. 번들된라이브러리들은다른웹페이지와마찬가지로작동한다. 라. asm.js asm.js는 NativeClient 와유사하게, C/C++ 로개발된소스를웹에서실행가능하도록단순히자바스크립트로변환해주는기술은지속적으로개발되어왔다. asm.js 코드는 (LLVM 기준 ) Emscripten 등의소스컴파일러에의해번역되고수동메모리관리와정적으로입력된언어로작성되는자바스크립트의엄격한서브세트로구성되어있다. 최근보다빠른웹과 asm.js의부족한기능을해결하기위해모질라, 구글, MS, 애플이새로운바이너리표준 (low-level programming language) 인 WebAssembly 를개발하고있다. 이러한 WebAssembly 는웹브라우저에가상현실, 암호화기술, 동영상, 3D 게임등에활용될것으로기대하고있다. asm.js를이용하여웹서비스를확장할수있는방법은아래와같다. - asm.js 의경우는현재대부분의최신브라우저에서지원되고있기때문에 Emscripten 이나 Mandreel 등의컴파일러를이용하여기존의 C/C++ 로개발된코드를자바스크립트로변환하고, asm.js를아래와같이선언하여실행한다. - asm.js 소스코드는아래와같으며, unreal engine 에서활용되어초당 40 프레임의퍼포먼스를보여주었다. 최근의브라우저에서는 60 프레임까지성능이향상되는것으로나타나상용화하기에충분히가능한성능을보여주고있다

179 function DiagModule(stdlib, foreign, heap) { "use asm"; var sqrt = stdlib.math.sqrt; function square(x) { x = +x; return +(x*x); } function diag(x, y) { x = +x; y = +y; return +sqrt(square(x) + square(y)); } return { diag: diag }; } [ 예시 : asm.js 소스코드예 ] 만약기존의게임이 C/C++ 이아니라 Java 등의다른언어로개발되어있다면 XMLVM 등의툴을이용하여자바코드를 C++ 로변환한이후에다시 Emscripten 등의컴파일러를활용하여자바스크립트로변환하면된다. [ 그림 5-1] asm.js 처리플로우

180 asm.js는자바스크립트이지만일반적으로사용하는자바스크립트와아래와같은차이가있다. - asm.js는숫자타입만다루고다른타입은다룰수없다. - 모든외부데이터는유일한힙객체에 typed array 힙객체에모두저장된다. - 변수에접근하거나설정할때는특정타입으로일관성있게강제한다 - 컴파일이필요한 asm.js에는 "use asm 디렉티브를사용해서명시적으로컴파일대상을지정한다. - use asm 디렉티브를만나서 asm.js 코드를처리할때엄격한유효성검사를통과하지못하면이는무시한다. ( 오류는아니고콘솔에경고를출력한다.) asm.js 및 WebAssembly 를활용하기위한관련정보는아래의링크를참조하면된다. - asm.js 관련정보 : - Low Level JavaScript : - XMLVM 관련정보 : - WebAssembly 정보 : 마. Chrome for Work( 인트라넷 ) Chrome for Work는기관 / 단체의요구사항을충족시키는 100개이상의정책을제공한다. 직원들이받는애플리케이션및확장프로그램을설정하고다양한플러그인을관리할수있을뿐아니라, 맞춤및선별된앱을갖춘사설웹스토어를배포하고이전앱의호환성을관리하는등의작업을수행할수있다. 또한자사보안정책에맞춰최신보안수정사항을자동업데이트할수있으며, 제어범위를확대하려면수동업데이트를선택할수있다. 이를통해최신웹기술이적용된브라우저를쓰면서도회사정책및환경에맞는맞춤기능을제공할수있다. Chrome for Work :

181 바. Legacy Browser Support( 기존브라우저지원 ) Legacy Browser Support( 이하 LBS) 는 Chrome for Work를이용하는조직에서 Chrome 브라우저를활용하려고하지만사용자가 Internet Explorer 가필요한기존웹사이트와앱에계속액세스해야하는경우이기능을사용하여브라우저간에쉽게전환할수있다. Chrome 기존브라우저지원확장프로그램을사용하면사용자가 Chrome 과다른브라우저간에자동으로전환할수있다. 사용자가 ActiveX가필요한사이트등기존브라우저로열어야하는링크를클릭하면 URL이자동으로 Chrome 에서기존브라우저로이동하여열린다. 또한네이티브호스트부가기능실행파일을설치하면 LBS에서사용자가 Chrome 에서기존소프트웨어에의존하지않는링크를클릭하면 IE에서링크가열린다. 이네이티브호스트부가기능을설치하면 Chrome 과 IE는액세스하는앱이나웹사이트에따라최적의브라우저로전환한다. LBS는 Internet Explorer 6, 7, 8, 9, 10, 11과호환되며, LBS가작동하려면 Windows 의향상된보호모드를사용중지해야한다. LBS 소개 :

182 4. 주요기능별대체기술적용방안 기존 NPAPI 를대체하기위해서는브라우저별로지원하는플러그인기술과웹표준기술을확인하고적용가능성과호환성, 유지보수성, 향후지원중단가능성을확인하고대체기술을적용해야한다. 또한국내법제도와기술가이드에대한인지를통해, 실제현장적용가능여부에대한판단이필요하다. < 표 5-7> 국내기능별대체기술 기능플러그인기술웹표준기술 전자결제 보안 인증 Custom URI Scheme 연동 (Protocol Handler 레지스터등록 ) Portable Native Client(PNaCl), NaCl PPAPI Native Messaging Chrome Apps asm.js(webassembly) Chrome for Work(Enterprise) Legacy Browser Support ( 기존브라우저지원 ) Chrome App IE Tab 호환성지원 HTML5, WebApplication asm.js(webassembly) Chrome Web API Service Workers (Background Script) File API System Application API 멀티미디어 Portable Native Client(PNaCl) PPAPI EME (Encrypted Media Extensions) API HTML5, WebApplication Chrome Web API asm.js(webassembly) 파일처리 Portable Native Client(PNaCl), NaCl PPAPI Native Messaging HTML5(File API) asm.js(webassembly) 전자문서 Portable Native Client(PNaCl), NaCl PPAPI Custom URI Scheme 연동 (Protocol Handler 레지스터등록 ) Google Cloud Print, Cloud Documents DRM, WaterMark PDF.js jspdf Web Open Document Format 게임런처 Portable Native Client(PNaCl), NaCl PPAPI asm.js(webassembly)

183 가. 전자결제 전자결제플러그인은기술적으로는웹표준방식으로쉽게전환이가능하지만결제서비스를이용하는머천트의동의나새로운연동에소요되는인력및시간등의요인이장애요소가되고있다. 또한다양한기능들이플러그인내에결합되어복잡성이증가된것역시문제해결의장애요인이되고있다. 아래와같은대안을하나이상사용하는것을권장한다. < 표 5-8> 전자결제대체기술 대체기술 HTML5 기반의웹표준결제 UI 구현 결제창의기능별분리 충분한리소스투입 설명 HTML5 등웹표준기술을사용하여전자결제 UI 를구현한다. CSS 를통해가상키보드나숫자키패드를구현할수있다. 전자결제의다양한기능들 ( 결제수단등 ) 을논리적으로분리하여기능별로플러그인의존성을해제해나가는방식권장한다. 충분한리소스 ( 인력, 비용, 시간등 ) 를투입하여전자결제서비스를이용하는머천트설득및결제연동방식을웹표준방식으로전환할수있는기술을개발한다. 나. 키보드보안 키보드보안은이용자의키입력정보의제3자누출을방지하기위해사용되며 OS 수준에서키입력정보를암호화하는기술을사용하기위해서 ActiveX 나 NPAPI 와같은플러그인이선택되고있다. 데이터유출을방지하기위해서는대안들중하나이상을조합하여사용할것을권장한다. < 표 5-9> 키보드보안대체기술 대체기술 Browser Sandbox 활용 간편결제 다른채널을통한정보입력 설명 브라우저 Sandbox 내에서구현되며이용자의직접적인키입력을방지하기위해서마우스로키입력을유도하는 On-Screen Keyboard, 키보드커서키사용을활용한 Combo box 등이대안이될수있다. 최초인증에서민감한개인정보유출의위험이있을수있지만최초결제이후의결제과정에서민감한개인정보입력을최소화할수있는간편결제형태를활성화하여키보드보안에대응가능하며, 간편결제비밀번호입력의오용에대해서는 FDS 등서버쪽의기술을사용하거나고객손해배상보장등비기술적인요소를사용할수있다. 현재접속한채널이아닌다른채널을통한정보입력을유도하여키보드입력정보보호를달성할수있다

184 다. 개인방화벽 개인방화벽은이용자의주도적인선택에의해서활성화하거나별도의프로그램으로설치 를안내해야하며, 서비스운영업자가개인방화벽의활성화를강제하는접근은지양한다. 라. 공인인증서 공인인증서를전자금융거래에사용해야하는법률적의무가없어지면서, 공인인증서의주요 2대기능인이용자인증및거래사실부인방지에대해서는각각을구분하여해결방법을모색하고있다. 이용자인증은생체인증, OTP인증, 신분증인증, 간접인증, 간접대면인증등다양한대안을조합하여인증하는방법을모색하고있다. < 표 5-10> 공인인증서대체기술 기능세부기능설명 생체인증 지문인식인증화자인증서명인증기타 등록된이용자의지문일치여부로인증 음성인식과구분되며말하는사람이예전등록된화자와일치하는지여부확인 이용자의서명특성에기반하여인증 홍체인식, 심박특성인증등 신분증인증여권주민증, 면허증등신분증을업로드하여인증. OTP 인증 AML KYC 간접인증평판이력간접대면인증카드인증 일회용비밀번호 (One Time Password) 를통해인증 (S/KEY 방식, 시간동기화방식, 챌린지응답방식, 이벤트동기화방식 ) 체크리스트에의한인증, 다양한체크 Factor 로거래상대방의신뢰성, 진위여부를인증 정보소유자가해당정보를확인해낼수있는지여부로인증이메일인증, 문자인증, AS 인증, CallerID 인증등의비금융정보기반인증과신용카드금액인증, 계좌 1 원이체후소유주확인증금융정보기반인증으로구분가능. 인증의보조수단으로사용. SNS 평판, 검색평판조회 우편수신여부로인증. 다른신분증의특성정보이용한인증. ( 신분증을갖고있는사람만이제시가능한정보요구 ) 3D Secure, CVC, ARS 등신용카드정보에기반한인증

185 거래사실부인방지는이용자에대한신뢰를바탕으로이용자가본질적으로거래한사실이없다면이용자의손해를보전하는방향으로발전해야하며거래사실이있지만이용자가부인하는경우정황증거 ( 접속로그등 ) 나기존거래내역정보를활용하여이용자의사실여부를확인할수있도록사용로그를수집관리해야한다. 또한 Fraud Detection System을통해사용자별거래유형을분석하고이상거래를모니터링해서사고를조치할수있는모니터링시스템을구축하는것이바람직하다. 마. 멀티미디어 비디오 / 오디오와같은멀티미디어사용은 HTML5 표준이나오기전에는 ActiveX, NPAPI 와같은플러그인기술을사용할수밖에없는대표적인분야였다. 그러나 HTML5 표준에서멀티미디어지원을위한비디오 / 오디오재생요소와 API, 자막을위한요소, 카메라 / 마이크제어 API, 오디오에에코와같은음향효과를주는데사용할수있는웹오디오 (Web Audio), 멀티미디어데이터의스트리밍을위한데이터제어를위한미디어소스확장 (Media Source Extensions), 멀티미디어데이터 DRM(Digital Rights Management) 를위한 EME(Encrypted Media Extensions) 과같은다양한기능이추가되어비표준플러그인을사용하지않고도아래와같은웹 API를통해대부분의멀티미디어기능을제공할수있게되었다. - HTML5 멀티미디어요소 : <video> 요소, <audio> 요소 - WebRTC(Web Real Time Communication), Media Streaming API, Media Capture API : 영상커뮤니케이션과녹취를위한기능 - 웹오디오 (Web Audio) : 오디오를생성, 처리하는데사용하는자바스크립트 API - MSE(Media Source Extensions) : HTML5 Video에서멀티미디어데이터프리패칭 (prefetching) 과버퍼링 (buffering) 등과같은스트림제어 - EME(Encrypted Media Extensions) : HTML5 Video 와 Audio 요소를확장하여플러그인을사용하지않고도 DRM( 디지털권한관리 ) 보호된콘텐츠를사용할수있는기능으로인터넷강좌와같은멀티미디어콘텐츠의보호가필요한서비스를위해서사용될수있다

186 바. 전자문서 전자문서의경우빠른리포팅과그리드처리, 위변조, 복제방지를위한 DRM 과워터마킹, 화면캡쳐방지, 원본진본확인을위한전자서명및시점인증확인, 전자문서출력등을위해비표준기술을클라이언트에배포, 처리했던방식에서클라우드기반서버시스템을통해관련기능을제공하고, 화면캡쳐와같은키보드인식및이벤트인식의경우실행파일과 Custom URI Scheme 연동이나 Native Messaging 을통해기설치된실행파일과연동을통해서비스를제공할수있다. 전자문서출력의경우클라우드프린터를활용하여서비스를제공할수있으나, 프린터가클라우드프린터지원여부확인이필요하며, 인쇄영역을지정할경우 CSS로인쇄영역을지정할수있다. 사. 게임런처 게임런처와같은서비스를제공하고자한다면, asm.js 이나 PNaCl(NaCl) 을활용하여게임 자체의소스를웹기반으로변환하거나게임의기획단계에서부터 HTML5 기반의웹표 준게임제작의비율을늘려나가도록하는등의대책이필요하다

187 5. NPAPI 전환적용사례 가. Adobe PPAPI 어도비의 FlashPlayer 는 ver 14부터 PPAPI 에대한콘텐츠디버거를지원했으며, ver 16 부터원도우와맥운영체제에서공식적으로다운로드를지원하고있다. 기존 Flash Player는 Flash runtimes과 Adobe Flash Player browser plug-in으로구성되어있으며 AIR는 Flash runtimes core위에개발자가독립적으로콘텐츠를배포실행할수있도록지원하는런타임으로구성되어있다. FlashPlayer 는다음과같은기능들로구성되어있으며, 공식적으로 PPAPI 적용사항은아래와같다. - Animation - Vector-based graphics - Audio (including MP3) (PPAPI) - Multicast Video(PPAPI) - Hardware video decoding(ppapi) - Microphone and webcam access - Low-level bitmap manipulation(ppapi) - Binary-based sockets - Strongly typed, class-based programming language - Hardware-accelerated 2D and 3D content(ppapi) 현재기능중 PPAPI 를사용하지않는기능들은브라우저가지원하는 HTML5, WebApplication API, SVG, CSS, Web Animation 을통해구현할수있다

188 6. 비표준대체기술, 실행파일보안이슈 현재 Active 와 NPAPI 비표준대체기술로사용하고있는 EXE 파일방식의경우 URI 프로토콜핸드러, 브라우저별익스텐션, 로컬웹서버루프백방식, Dll injection 을통한메모리이벤트모니터링방식을사용하고있으나아래와같이배포, 실행, 운영 ( 업데이트 ) 중문제점이있어, 향후별도설치가필요없는 Agentless 방식으로전환하는것을고려해야한다. < 표 5-11> 대체기술구분 구분 ActiveX 설치 / 실행파일있음 Non ActiveX 설치파일없음 기술명칭플러그인 Non 플러그인 Agentless 기술구현방식 ActiveX NPAPI 개요및특징 파일포맷 MS 전용 CAB,MSI 등파일포맷 비 MS 계열, ActiveX 와기술적유사성 URI 프로토콜핸들러 표준규격 Non 플러그인대안으로등장했으나구동시간지연및관리이슈로사용하락세 Pure Web 자바스크립트로구현하였으나보안취약성으로사용하락세 EXE 파일포맷 브라우저별익스텐션 각브라우저확장규격으로지원 로컬웹서버 Non 플러그인방식의시장수용도가높은대안방식으로등장했으나보안취약점존재 Dll injection Non 플러그인방식의시장수용도가높은대안방식으로등장했으나운영체제개발사의기술방식퇴출가능성있음 웹표준 EXE 방식에비해보안성및가용성은부적하나향후기술발전가능성과시장수용성이높음 별도설치파일없음 지원 OS 윈도우계열멀티 OS 멀티 OS 멀티 OS 윈도우계열윈도우계열윈도우계열멀티 OS 지원브라우저 사업자선호도 소비자선호도 IE(Edge 는지원안함 ) 시장퇴출 Chrome, Firefox 지원안함 시장퇴출 멀티브라우저 응답속도지원으로퇴출가능성높음 멀티브라우저 보안성취약으로퇴출가능성높음 개별브라우저 전용스토어사용거부감, 개발비증가로사용가능성낮음 멀티브라우저 사용자 PC 점유리소스증대및향후보안문제발생가능성있음 멀티브라우저 사용자 PC 점유리소스증대및향후보안문제발생가능성있음 멀티브라우저 보안취약점보완을위한 2factor 인증및 FDS 와같은보완재필요 낮음낮음낮음낮음낮음낮음낮음높음

189 EXE 파일방식의보안및운영상문제점은배포, 실행, 운영단계별로세분화하고, 그에대한대응방안을고려해야한다. 또한 EXE 파일특성상바이러스가포함된악성파일로둔갑하기쉬워불법유통의위험과배포신뢰성을보장할수있는방안을강구해야한다. < 표 5-12> EXE 보안취약점 단계 보안상문제점 배포 로컬웹서버의경우는브라우저와 XHR 이나 WebSocket 으로통신할경우는필요지만, Pipe 로직접통신할경우브라우저 Extension 을사용하여브라우저쪽에서 EXE 로부터정보를받아가며이에따라실제로는 EXE 만배포하는것이아니브라우저 Extension 을따라서브라우저마켓에서따로사용자가설치를해야하는문제가있다. ( 이경우 pnacl 을사용할수있으나, 실행과업데이트에문제가발생할수있다.) 실행 로컬웹서버방식을사용하는경우는자체인증서키쌍을보유하고있으며브라우저경고를발생시키지않기위해서상용인증서를사용하거나 PC 마다다른인증서를생성해서보유하고있다. 보안상문제는이인증서들이유출되어서피싱이나파밍을유도할수가있으며, 상용인경우에는위법적사용이어서신고등으로판매자가인지하는경우해당인증서가폐기될경우관련서비스가모두중지하게된다. 또한실행중보안무결성을보장할방법이없어 Pipe 를사용하는경우는중간에정보를쉽게가로챌수가있다. ( 배포후해킹된실행파일을구분할수있는제 3 자검증방법이없음 ) 운영 ( 업데이트 ) 항상실행하고있을경우에는버전확인및자동업데이트기능을구현하면되나, URL Scheme 방식인경우는사용자거부감으로업데이트가쉽지않다. ( 모바일애플리케이션처럼사용자인지후사용자가선택해서업데이트시행해야함 ) 결국실행할때마다업데이트를점검해야하는데긴급업데이트는시간이느리기때문에어려움이있으므로점검페이지에서먼저모듈을실행하여버전을점검한후에모듈스스로업데이트점검을하도록기능을개발하고, 업데이트후자체검증을수행해야한다. 이러한방식은향후운영체제개발사의정책이변경되거나업데이트가차단될경우사용이불가능할수있다

190

191 Ⅵ. HTML5

192

193 Ⅵ. HTML5 1. 개요 웹브라우징을위한다양한브라우저가존재하지만글로벌브라우저점유율과는다르게국내에는인터넷익스플로러점유율이높은편이다. 국내점유율이높은인터넷익스플로러의경우 9 이전버전의경우 HTML5 표준을지원하지않고있어 HTML5 표준으로구성된웹페이지를제대로볼수없는문제점이있다. 아래는 StatCounter 에서확인한 2016년 5월 ~ 2016년 10월사이에국내사용자가데스크탑에서사용하는브라우저점유율이다. [ 그림 6-1] 브라우저점유율 (2016 년 5 월 ~ 2016 년 10 월 ) 문제가되고있는부분은 IE8.0 으로 1.97% 로나타난부분이다. 국내에서사용중인 1. 97% 의브라우저만이 HTML5 표준으로구성된웹페이지를제대로표시할수없는상태이 다. 향후국내홈페이지가 HTML5 표준을준수하여작성되어야할것으로보여진다

194 2. HTML5 신규기능별보안이슈 2.1 HTML5 신규요소 HTML5 표준을기반으로웹애플리케이션개발시기존 HTML4.01 기반의웹애플리케이션보안대응방안이외에도 HTML5 신규명세에따른다양한구성요소의 DOM 조합이나 CORS(cross-origin resource sharing), Web Storage, WebSocket, Web Worker 와같은새로운기술도입에따른보안문제에대한대응방안을같이고려해야한다. < 표 6-1> HTML5 신규기능요약 단계신규요소 CORS(Cross Origin Resource Sharing) Web Storage Web Socket Geolocation Web Worker 보안상문제점 audio, video, source, canvas, embed와같은신규태그와각태그에대한세부기능에대한 XSS 필터를우회하는조합이가능하다. CORS 는브라우저가 XHR 을이용하여 Cross-Origin 요청을가능하게한다. 해당기술은서로다른도메인 ( 사이트 ) 간자원을공유할수있게해주며, 특정조건들이만족될경우동일출처정책 (SOP : Same Origin Policy) 에의한제한을완화하는데사용될수있으며, 다른도메인의리소스를호출하여서버부하를일으키거나, 스패밍, 비트코인마이닝과같은다른악성행위에악용될수있다 Web Storage는브라우저에서구현되는약 5MB 크기의저장공간이며각도메인에따라별도로제공된다. 웹애플리케이션은정보유지및관리를위해해당공간에다양한정보를저장할수있으며, 저장된정보의유출및변조에따른공격이가능하다. Web Socket 은웹서버와 User Agent간지속적인연결을기반으로하는전이중통신을가능하게해준다. 채팅, 주식차트와같은실시간통신이필요한애플리케이션에활용할수있다. 또한사용자의정보를탈취하는은닉채널로써쓰일수있다. Geolocation은사용자 ( 단말기 ) 의위치정보를브라우저단에서측정할수있는기능이다. 해당기술은모바일장치에서유용하게사용되며사용자의위치정보노출로다른범죄에악용될수있다. HTML 4.01에서는자바스크립트를한쓰레드로만구동가능하였으나, Web Worker를통하여여러개의쓰레드로자바스크립트를구동할수있다. Web Worker를이용하여악성행위의파급력을증대할수있다

195 Indexed DB Pointer Vibration Custom Schema SVG Indexed DB는각웹브라우저에서도메인별로 DB를제공 / 관리하는기능이다. Web Storage와마찬가지로저장된정보의유출및변조에따른공격이가능하다. Pointer API는웹페이지내사용자의마우스 / 터치위치를감지하는 API이다. 사용자의마우스이동 / 클릭좌표와터치좌표를알아낼수있어, 사용자의행동을유추하는공격에악용될수있다. Vibration API는진동이가능한단말에진동을하는 API로, 일정시간동안진동하거나패턴을가지고진동하는두가지방식이가능하다. 오랜시간진동을하여사용자의불편을유발할수있다. Custom Schema는웹브라우저에서처리하는프로토콜을특정웹서비스로처리할수있도록등록하는기능이다. 만약악의적인서비스로특정프로토콜을처리하도록하면, 해당프로토콜을사용할때마다악의적인서비스가구동될수있다. XML 양식으로이미지를표현하는 SVG는애니메이션, key 이벤트탐지등을제공한다. SVG 내에자바스크립트삽입이나사용자 Key 입력정보유출이가능하다. 2.2 보안대응이슈 안전한웹애플리케이션개발을위해서는보안취약점에따른적절한대응방안을고려하여개발및운영하여야한다. 또한시스템전체의보안취약점을인지하고웹서버, 네트워크, 데이터베이스, 웹기반라이브러리에대한종합적인보안대응이필요하다. 이를위해자동화된보안점검도구를통한지속적인모니터링과상시적인웹애플리케이션감시체계를구축하여야하며, 특히웹애플리케이션의경우보안과기밀성이요구되는경우 SSL이나 TLS를사용하여데이터의기밀성을보장하는방법을고려해야한다. 가. HTML5 신규요소관련보안위협 HTML5 의신규요소및속성, API 들은보안의관점에서보면보안취약점을통해공격에 악용될가능성이높다. 예를들어 onfocus, autofocus 등의속성들은기존 XSS(Cross-SiteScripting) 필터에포함되지않으면서자바스크립트를실행하는데사용될수도있다

196 아래는신규 video, audio 태그및속성을이용한 XSS 취약점예이다. <video><source onerror= alert(1) ></source></video> <audio><source onerror= alert(1) ></source><audio> <select autofocus onfocus= alert(1) > <textarea autofocus onfocus= alert(1) > XSS외에도신규태그를이용하여사용자의웹페이지사용을저해할수있다. 기존의서비스거부 (DoS) 가웹서버가아닌사용자의브라우저에서일어나는경우이다. 아래의예는웹페이지내에벗어날수없는입력폼을삽입하여다른폼에입력을할수없도록하는예이다. <input autofocus onblur=focus()></input> 나. CORS(Cross Origin Resource Sharing) 웹서비스업체들이제공하는각종콘텐츠와서비스를가져와새로운서비스를재창출하는매시업 (Mash-Up) 형태의서비스가활발하게개발되고있다. 이는기존에만들어진자원 ( 또는서비스 ) 을재사용하면개발비용및시간이절약되기때문이다. 하지만동일출처정책 (SOP: Same Origin Policy) 에의한제한은이러한유형의매시업서비스개발을어렵게만들었다. 동일출처정책 (SOP) 이란, 웹브라우저들이보안을위해자바스크립트로다른도메인의웹페이지에접근하는것을못하도록막아놓은제약조건이다. 즉호스트나응용계층의프로토콜, 포트번호가일치하지않는곳으로부터의요청발생을제한하는정책이다. 기존에는 SOP를우회하기위해 Server-Side Proxy, JSONP 등의다양한편법들이사용되기도했지만웹서비스구현이복잡해지고성능에영향을준다는단점을가지고있었다. CORS는웹페이지에서자바스크립트를이용하여 XHR(XMLHttpRequest) 을다른도메인으로발생시킬수있도록해주는기능을가지고있다. 해당기술은 XHR 기반 CrossOrigin 요청을이용하여자원을공유해야하는브라우저와서버사이의대화방법을정의한다

197 CORS 는 2004 년 3 월미국의통신회사인 Tellme Networks 사의엔지니어들이처음제안 했으며, 차후 W3C 와주요브라우저제조사들이참여하여표준화작업을진행하고있다. - CORS 관련보안위협 CORS의근본적인보안문제는 XHR을다른도메인으로발생시킬때, 사용자에게허가요청을받지않는다는것이다. 이러한문제는사용자의세션을오용한접근제어와관련된보안문제를야기할수있다. 공격자가사용자의세션을오용할수있게된다는것은접근제어를우회하여허가되지않은리소스에접근할수있다는의미이다. < 표 6-2> CORS 관련보안위협 관련보안위협접근제어우회 CORS와 Web Socket 을이용한원격쉘공격 CORS 와 Web Socket 을이용한웹기반정보유출 CORS와 Web Worker 를이용한 DDoS 공격 보안상문제점사용자가속해있는내부네트워크에존재하는웹사이트가 Access- Control-AllowOrigin 응답헤더를잘못정의했을경우공격자는외부에서직접접근할수없는내부네트워크의웹사이트에접근할수있다. XHR 과 Web Socket 기술을이용하면사용자의브라우저세션을탈취하고행동을제어할수있다. 대표적인예로세션하이재킹공격이있다. CORS와 Web Socket 기술을이용하면사용자의브라우저들을제어하여다양한정보를수집하거나명령을내릴수있다. 또한 Cookie, 유출한 Web Storage, Indexed DB 정보를외부로보낼수있다. CORS와 Web Worker를이용하면보다효과적으로 DDoS 공격을수행할수있다. - CORS 보안대응방안 CORS를이용한사용자개인정보탈취시나리오는공격대상사이트의파일업로드취약점 ( 게시판등에저장된자료에대해위치지정에대한제한을부여하지않음으로써웹서버내의비공개자료를다운로드 / 업로드받을수있도록하는취약점 ) 을이용하는것으로시작된다. 때문에웹서버의파일업로드취약점에대한대응조치를한다면악성실행프로그램을업로드하는방식의공격을완화할수있다. 그리고서버는 Cross-Origin 요청을모두허용할수있는 Access-ControlAllow-Origin: * 과같은설정을피하는것이좋다

198 다. Web Storage HTML5 이전버전에서는웹애플리케이션관련콘텐츠를클라이언트측에저장할때주로쿠키를사용하였다. 하지만쿠키의경우몇가지문제점을가지고있다. 첫번째는도메인 ( 사이트 ) 별로 20개까지만쿠키를생성할수있으며각쿠키는 4KB 크기를넘을수없다는것이다. 두번째는 HTTP 요청이발생할때마다쿠키값이포함되어서버로전송된다는것이다. 이는불필요한오버헤드및웹세션탈취관련문제점을야기한다. Web Storage 는이러한문제점들을보완하기위해서고안된기술이다. Web Storage 는웹사이트와관련된콘텐츠를사용자의컴퓨터에저장하고이후에자바스크립트를이용하여접근하거나통제할수있다. 컴퓨터에저장할수있는데이터의용량은브라우저의종류에따라다르나일반적으로도메인당 5MB 정도의크기를사용할수있다. < 표 6-3> Web Storage 설명 종류 Session Storage 설명 기본적으로 Local Storage 와유사하나브라우저혹은탭을종료할경우 데이터가삭제된다. Local Storage 해당영역에는모든텍스트값을저장할수있다. 각아이템들은 Key Name - Value 쌍으로구분되며, 존재하는기존아이템은 Key Name 을통해접근할수있다. 사용자혹은웹애플리케이션에의해서생성 / 삭제될수있으며, 브라우저를종료해도데이터들은삭제되지않는다. - Web Storage 관련보안위협 Web Storage 와관련된가장큰보안이슈는해당영역에저장되어있는데이터에대한불법적인접근과이를사용자측에서인지할수없다는것이다. Web Storage 에대한모든접근및제어는자바스크립트를통해이루어지며, 특정도메인이 XSS 등스크립트기반취약점을가지고있을경우공격자는사용자의브라우저에있는모든 Web Storage 데이터들을사용자모르게조작하거나가져올수있다. 해당취약점은 HTML5 Web Storage 의자체적인취약점으로는볼수없지만, Cookie 에비하여저장공간이크며, 다양한정보가저장되기때문에공격자가탈취할수있는정보역시많다고볼수있기에, 개발자는해당기술을구현할때중요정보를암호화하여저장하거나취급하지않아야할것이다

199 - Web Storage 관련보안대응방안 Local Storage 에저장된사용자개인정보탈취시나리오는공격대상사이트의 XSS 취약점을이용하는것으로시작된다. 때문에 XSS에대한대응조치 ( 웹방화벽혹은보안코딩등 ) 가되어있다면공격을완화할수있다. 그리고웹애플리케이션개발자는평문상태로데이터를저장하는 Local Storage에사용자의민감한개인정보를저장하지않도록하거나암호화를적용시켜저장하도록구현함으로써정보관리에유의하도록한다. 라. Web Socket 웹에서주로사용되는 HTTP는브라우저가서버에게요청을해야만서버에서응답을해주는구조로설계되어있다. 이러한구조는채팅이나주식시장차트처럼실시간정보전달을요구하는애플리케이션을개발하는데제한적이다. 네트워크세션형성 / 종료에많은오버헤드를가져오기때문이다. 결국한번의네트워크세션형성을통해전이중통신이가능한기술에대한개발자들의요구사항이커지게되었고, 이러한필요에의해 HTML5 의 Web Socket 이제안되었다. - Web Socket 기술관련보안위협사용자의허가없이다른도메인으로연결요청을발생시킬수있으며, 요청이발생했다는사실을사용자에게알려주지않는다. 공격자는사용자의브라우저에임의의자바스크립트코드를실행하게하여사용자모르게브라우저를통해다른도메인에있는시스템과통신채널을형성한후데이터송수신이가능하다. - Web Socket 관련보안대응방안 Web Socket API를이용한사설네트워크정보수집시나리오는공격대상사이트의 XSS 취약점을이용하는것으로시작된다. 때문에 XSS 에대한대응조치 ( 웹방화벽혹은보안코딩등 ) 가되어있다면공격을완화할수있다. 만약공격자의사이트로유도한후개인정보를탈취하는시나리오를구현하는경우라면대응할수없다

200 마. Geolocation 모바일기기를통한인터넷이용률증가는위치정보기반의서비스들이급증하는데큰역할을하였다. 대표적인예가 SNS( 페이스북등 ) 를이용하여자신의위치를공유하는기능이다. 과거에는이러한기술을구현하기위해서는부가적인플러그인을설치를해야만가능했다. 하지만 HTML5의 Geolocation API가등장하면서브라우저자체기능만으로단말의위치정보계산이가능해졌다. 일반적으로스마트단말의경우 GPS(Global Positioning System), 3G, 4G네트워크정보등을기반으로위치정보가수집되며, GPS가없는단말기의경우에는 IP 주소정보를통해위치정보를계산한다. - Geolocation 기술관련보안위협대부분의브라우저들은 Geolocation API를사용할때사용자에게동의를구하도록설계가되어있지만, 동일도메인에서는단한번의동의를통해사용자의위치정보를계속수집할수있는경우가있다. 이경우사용자가공격자의위치정보수집악성링크를클릭하고무심결에동의를누를경우자신의위치정보를계속적으로공격자에게전달할수있다. 이는기존 Native-App 에서도발생가능한공격기법이지만, Geolocation 을적용한 HTML5 Web App의경우단순사이트방문만으로도사용자의위치정보가노출될수있기때문에, 기존설치된앱에서의사용자위치추적보다위험성이크다고볼수있다. Geolocation 기술활용에대한개발자및사용자의세심한주의가필요하다. - Geolocation 보안대응방안 Geolocation API를이용한사용자위치정보추적시나리오는공격대상사이트의 XSS 취약점을이용하는것으로시작된다. 때문에 XSS에대한대응조치 ( 웹방화벽혹은보안코딩등 ) 가되어있다면공격을완화할수있다. 하지만사용자를공격자의사이트로유도한후해당시나리오를구현하는경우라면대응할수없다. 개발자는사용자가위치정보활용동의를할때정확한가이드와사업자정보를제공하는방법으로위치접근에따른신뢰성을높일수있다

201 바. File API File API는자바스크립트를통해파일시스템에있는파일의데이터를읽을수있게하는 API를말하며, Firefox 3.6 버전에서처음구현되었다. HTML5 에서해당명세가제안되면서웹애플리케이션은일부브라우저상에서플러그인의도움을받지않고시스템에있는파일을유연하게다룰수있게되었다. - File API 기술관련보안위협현재까지 File API 자체취약점은알려진바없다. 악성자바스크립트를브라우저에삽입한다하여도사용자가자의적으로파일을선택하지않는이상공격자는아무런공격을수행할수없다. 하지만사회공학적기법을활용하면사용자의시스템에있는파일들을탈취하는것이가능하다. - File API 보안대응방안 File API 를이용한사용자시스템파일탈취시나리오는공격대상사이트의 XSS 취약점을이용하는것으로시작된다. 때문에 XSS에대한대응조치가기본적으로선행되어야하고, 사용자가파일을저장할때사용자정보저장여부를확인할수있도록해야한다. 사. WebWorker Web Worker 는기존의자바스크립트를단일쓰레드로만처리하는문제점을개선하기위 하여, 자바스크립트를여러쓰레드로처리할수있도록제공된기능이다. Web Worker 를 이용하면복잡한연산을병렬적으로처리하여높은효과를볼수있다. - WebWorker 관련보안위협 Web Worker 는보안상의이유로별도의자바스크립트를구동하며, 이별도의자바스크립트는 Web Worker 를구동하는웹페이지내다른리소스에접근이불가능하다. 단, Web Worker 는외부로의통신을보낼수있기때문에 DoS, 스패밍, 해시크래킹, 비트코인마이닝등에악용될수있다. 또한사용자에게 Web Worker 구동에대한별도의허가를받지않으므로, 사용자는 Web Worker가자신의브라우저자원을사용되는것을모른채공격이진행될수있다

202 - Web Worker 보안대응방안 Web Worker 가공격자의웹사이트에서구동되는경우, 의심스런웹사이트에대한접근을주의하여야한다. 정상사이트에서는 XSS 취약점을이용하여 Web Worker 를구동함으로 XSS에대한대응조치가선행되어야한다. 아. Indexed DB Indexed DB 는각도메인별로 DB 형태의저장공간을제공하는기능이다. Indexed DB 를 이용하여웹사이트에서처리할정보를사용자의브라우저에저장 / 사용할수있다. - Indexed DB 관련보안위협 WebStroage 와마찬가지로 Indexed DB를사용하는웹사이트에 XSS 취약점을이용하여악용하는자바스크립트가삽입되면, 사용자의정보가유출되거나사용자가의도하지않은악성행위를할수있다. - Indexed DB 보안대응방안 Indexed DB에민감한정보를저장하지말아야하며, 부득이하게저장할경우암호화하여저장하도록한다. 또한정상사이트에서 Indexed DB에접근하는악의적인자바스크립트를 XSS 취약점을이용하여삽입함으로 XSS에대한대응조치가선행되어야한다. 자. Pointer Pointer API는웹페이지내의포인터가될수있는좌표정보를처리한다. 대표적으로마우스나터치위치를이벤트로감지한다. Pointer 이벤트는다양한기능을구현하는데쓰일수있으나, 반대로사용자의행동을파악하여다른공격에악용하는데쓰일수도있다

203 - Pointer 관련보안위협 Pointer API 자체의취약점은없으나, Pointer 정보는경우에따라민감한정보에속할수있다. 특히가상키보드와같이마우스나터치입력으로개인정보를다루는경우, 해당마우스 / 터치위치가공격자에게전송되어개인정보유출로이어질수있다. - Pointer 보안대응방안마우스나터치입력이읽히지않도록민감정보를다루는영역에서자바스크립트가구동되지않도록한다. iframe내자바스크립트구동을막는 sandbox 속성을이용하거나민감한영역을별도의영역으로지정한다. 기본적으로공격코드가삽입되지않도록 XSS에대한대응조치가같이진행되어야한다. 차. Vibration Vibration API 는진동이가능한단말에서작동하는 API 로, 특정시간동안혹은특정 패턴으로진동을하도록하는 API 이다. Vibration API 가작동하는웹페이지가가장상 단에활성중인상태여야작동가능하다. - Vibration 관련보안위협 Vibration API는최대 10분간만진동할수있도록되어있다. 패턴을입력하는경우도마찬가지이다. 다만 Vibration API 자체를여러번호출할경우, 10분이넘도록진동을하게할수있다. 웹페이지가켜져있어야작동하지만, 해당웹페이지를이용하는동안에는계속진동을하여사용자단말의배터리를소모하거나사용자에게불편을유발할수있다. - Vibration 보안대응방안 Vibration 보안은웹브라우저에서패치되어야할내용으로웹사이트관리자가취할 수있는조치는 Vibration API 가삽입되지않도록주의하는방법외엔없다

204 카. Custom Schema Custom Schema 는웹브라우저에서처리하는프로토콜을특정서비스로연결시켜주는 기능이다. 예로메일 (mailto) 의경우기본메일프로토콜대신지메일의프로토콜을쓸 수있도록설정해주는경우를들수있다. - Custom Schema 관련보안위협 Custom Schema를통하여사용자가자주사용하는메일 (mailto), 공유서비스 (magnet) 을악의적인서비스에연결하여해당프로토콜내용을유출할수있다. 또한해당프로토콜을사용할때마다공격자의서비스가실행됨으로사용자를공격자의웹사이트로이동시키거나사용자의브라우저리소스를다른공격에사용할수있다. - Vibration 보안대응방안 Protocol Schema 는사용자에게해당서비스로등록할건지여부를묻지만, 한번등록되면웹브라우저설정에서바꾸지않는한변하지않는문제점이있다. Protocol 등록과자동으로연결되는서비스에주의하여야한다. 또한공격코드가삽입되지않도록웹사이트를관리한다. 타. SVG SVG 는벡터로이미지를표현하는포맷으로, HTML5 에서는 SVG 포맷과 SVG 태그를 지원한다. SVG 는 XML 형태로작성되고, SVG 를이용한애니메이션이나사용자의키입 력을감지하는이벤트기능을제공한다. - SVG 관련보안위협 SVG 파일이나태그내에자바스크립트태그인 script가삽입가능하다. 즉, SVG 이미지나태그내에자바스크립트를삽일할수있다. SVG 내의스크립트는 SVG 로딩과함께자동으로실행된다. 이를이용하여다른공격을위한 XSS에쓰일수있다

205 - SVG 보안대응방안 SVG내의자바스크립트는 embed, object, iframe을사용하였을때실행된다. embed, object 태그를이용하여 SVG를로딩하지않아야하며, iframe을이용할경우에는자바스크립트실행을막는 sandbox 속성을함께쓴다. 이미지를처리하는 img, image 태그로 SVG를로딩하면삽입된자바스크립트가실행되지않으므로, img, image 태그를이용하여 SVG를처리하도록한다. 또한이미지나파일업로드시파일확장자명을제한하여 SVG 업로드를막는다. 파. 기타보안이슈 - iframe 보안이슈 HTML5 에서는투명한 iframe이가능하다. 투명한 iframe을이용한사회공학적기법인 Clickjacking 은사용자를공격자가의도한웹사이트로이동시키거나, 사용자의파일업로드를가로채유출하는공격이다. 이에대응하여 iframe 삽입이되지않도록웹사이트에서조치를취해야한다. 단, HTML5에추가된 iframe 속성인 sandbox는 iframe 내의자바스크립트실행을방지하는속성으로, 기존의숨은 iframe 을제거하는 iframe killer 코드와충돌을일으키기때문에사용에주의해야한다. - 사회공학적기법이슈 HTML5 속성을이용한사회공학적기법은위에언급한 ClickJacking 외에도자동완성기능을악용한정보유출, 웹페이지가비활성화상태일때웹페이지의내용을바꿔서다른사이트로착각하게만드는 Tabnabbing, 사용자의단말에알림을주는 Desktop Notification 을이용한피싱공격등이있다. - 비공식 API 사용이슈 HTML5 요소의알려진비공식적인 API 를웹사이트구축에이용하는경우가있다. 대표적으로 FullScreen API는 HTML5 신규 API로알려져있으나, 실제로는 HTML5 신규 API 로채택이거절당했음에도몇몇웹브라우저에서자체적으로지원하는기능이다. 또한 WebSQL 은 Indexed DB 이전에 SQL문법을이용하여사용자브라우저에 DB를제공하는방식으로제안되었으나, HTML5 표준으로등록되지못하였다. 이도몇몇웹브라우저에서구현한기능이나, 이에대한검증이부족함으로이러한기능을사용하지않도록유의한다

206 - 내부네트워크정보수집이슈 HTML5에서는 XHR, WebSocket 을이용하여외부로호출을보낼수있다. 보낸호출에대한응답시간을이용하여해당 IP 혹은 Port가활성화된상태인지확인할수있다. 이런사설네트워크정보수집은다른공격에악용될수있다. 내부네트워크에연결된장비중에외부호출에반응하는장비가있을경우, 추가적인악성행위를할수있다. 예로추가적인보안설정이되지않은네트워크프린터의경우, 기본포트인 9100으로웹호출이들어올경우, 해당웹호출정보를종이에출력한다. - HTML5 모바일앱코드인젝션모바일앱중 HTML5 를기반으로만들어진앱의경우, 앱에서파일을불러올때, 파일이름이나메타정보에들은자바스크립트가실행될수있다. 또한입력되는 QR 코드나바코드의내용이자바스크립트면자동으로실행되기도한다. 이를 HTML5 코드인젝션이라한다. HTML5 모바일앱을만들경우, 외부로부터입력되는값에대한필터링이필요하다. 하. OWASP(The Open Web Application Security Project) < 표 6-4> OWASP HTML5 보안위협항목 공격유형설명대응방안 크로스사이트 스크립팅 (XSS) 정상웹사이트에태그와속성을이용하거나업로드하는리소스를이용하여자바스크립트를삽입할수있는취약점으로, 주로사용자가올리는정보에대한필터링이없는점을악용한다. HTML 태그를분석해안전한태그및속성값만으로 HTML을재구성하고신뢰할수없는스크립트실행을차단한다. 시큐어코딩가이드 3 판, 크로스사이트요청위조 [19] 참고 크로스사이트 요청 (CSRF) 변조 웹애플리케이션이사용자인증을요청할때매번 HTTP 요청시마다암호를입력하도록하지않고세션쿠키나 HTTP 인증헤더등을이용해다수의 HTTP 요청에서이를사용한다. CSRF 는이점을이용하며, 사용자가신뢰할수있는서비스에로그인되어있다가사용자인척가장하여서비스를악용하거나다른공격에사용한다. 폼데이터를전송할때해당입력값의인코딩방식및유효값여부를사전에검사하고신뢰할수있는데이터만처리한다. 시큐어코딩가이드 3 판, 크로스사이트요청위조 [19] 참고

207 JSON 하이재킹 JSON 하이재킹은 CSRF를기반으로한공격방법이며, 일부브라우저의특성을이용하여, 악성사이트에서 JSON 포맷으로된기밀데이터를가로채어공격한다. 클라이언트코드의무결성을검증할수있는코드를별도로구현한다 (MD5 기반해시값을사전에서버로보내무결성을검증하는방법도사용한다 ). OWASP AJAX Security Guidelines[20] 참고 서비스거부공격 (DoS, Denial of S ervice) 일반적 DoS는특정웹사이트에반복적으로리소스를요구하는제3의자바스크립트가사용자의브라우저에서수행되어특정사이트를반복적으로응답요청 ( 공격 ) 한다. Client DoS는웹사이트가아닌사용자의브라우저에부하를주거나사용자의사용을불가능하게만든다. 웹애플리케이션특성상경로를허용하는경우에는../ 와같은상대경로를차단하고절대경로만허용하도록해야한다. 사전에허용된경로가아닌곳으로접근하는것은서버에서차단해야한다. KISA DDoS 공격대응가이드 [21] 참고 API Mashup 을 통한공격 비공식외부 API를통한매쉬업애플리케이션을개발하여배포할경우사용자와매쉬업애플리케이션모두보안취약점을갖게되며, 매쉬업애플리케이션에악성코드를삽입하여 XSS, CSRF, DDoS 등을포함하여공격한다. 인가된 API key 값을사전에확인해야하며, API 취약점정보를모니터링하고, 기술적문제점을보완해야한다. OpenAjax Alliance, Ajax and Mashup Security[22] 참고

208 3. HTML5 브라우저수용도 HTML5 에대한브라우저별수용도는브라우저의버전별로차이가있기때문에아래의표는현재최신버전의기준으로분류하여수용도를제공하였다. 본문서의웹브라우저 HTML5 표준및관련규격지원여부를측정을위하여벤치마크사이트는 에서제공하였으며, 각평가항목에대한정보를아래와같다. 3.1 HTML5 수용도평가항목분석 1) 구조규칙 (semantics) HTML5 에서문서의구조및규칙을의미하는태그로파싱규칙 (parsing rules), 요소 (element s), 폼 (Forms), 웹구성요소 (web components) 로구분되었고웹을구성하는기본적인의미의태그로구분되었다. 가. 파싱규칙 (parsing rules) 웹페이지상에기술된 HTML5 명령어를인식할수있는기능을정의하는부분으로가장기본적인부분으로 <!DOCTYPE html> 은웹브라우저가읽게될문서의종류를정의하는부분이며 HTML5 tokenizer, HTML5 tree building, Parsing inline SVG, Parsing inline MathML 에대한파싱규칙이있으며대부분최신브라우저에서는모두수용하고있다. 나. 요소 (elements) 요소는시작과끝을의미하는태그로구성되어있고태그사이에는콘텐츠를포함하고있다. 대표적인태그는 header, footer 등이있다. 섹션태그및그룹핑관련태그들은최신브라우저에서대부분수용되고텍스트레벨관련요소들은수용되지않고있다. 다. 폼 (Forms) 폼은텍스트필드, 버튼, 체크박스, 범위컨트롤, 색상선택기같은폼컨트롤, 필드의정규식규칙을포함하고있다. 특정파일필드의업로드기능을제외한폼과관련한기능은대부분의브라우저에서수용하고있다

209 라. 웹구성요소 (web components) 웹컴포넌트를구성하는템플릿, 새로운요소를만들수있는커스텀요소, DOM의구조를가지고있으나외부에노출되지않는섀도 DOM으로구성되어있다. 웹컴포넌트는대부분의브라우저에서수용되고그밖에커스텀요소및섀도 Dom은최신브라우저에서일부만수용되고있다. 2) 단말접근 (device access) 가. 위치및방향 (Location and Orientation): 디바이스의방향 ( 가로, 세로 ), 모션 ( 가속도, 회전 ), 위치를포함하고있으며, 최신브라 우저에서대부분의기능이수용되고있다. 나. 출력 (Output) 사용자에게알리는알림및전체화면으로볼수있는기능을포함하고있으며, 최신 브라우저에서대부분의기능이수용되고있다. 다. 입력 (Input): 게임패드컨트롤, 터치이벤트등을포함한 Pointer event, Pointer Lock 기능을포함하 고있으며, Xbox 및최신브라우저에서일부수용되고있다. 3) 연결성 (Connectivity) 가. 커뮤니케이션 (Communication) 서버와통신시발생하는이벤트 ( 컨넥트, 접속종료 ), 비콘및 socket 통신활용을위한 WebSocket 등서버및다른디바이스와통신을위한기능을포함하고있으며, 대부분의브라우저에서수용되고있다

210 나. 스트림 (Streams) 디바이스로부터데이터를읽거나기록할때사용하는중간매개체의역할기능을포함하고있으며, 데이터를읽는기능을대부분의브라우저에서수용되고기록에사용되는기능은모든브라우저에서수용되지않고있다. 다. 대등연결 (Peer To Peer) 계층통신으로네트워크에연결되어있는모든컴퓨터들이서로대등한입장에서데이터혹은주변장치를공유할수있다. WebRTC, WebCam 접근등의기능을포함하고있으며, 퍼미션등의보안권한이필요한 Screen capture 등의기능을제외하고최신브라우저에서일부수용되고있다. 4) 동작및통합 (Performance & Integration) HTML5 에서사용자와상호작용하는인터페이스동작및 Editing 요소, 클립보드기능을포함하 고있으며, 그밖에다중프로그래밍을위한 Woker 및보안기능, 결제기능도포함하고있다. 가. 사용자상호작용 (User Interaction) 사용자와상호작용하는기능으로 Drag and drop( 끌어다놓기 ), Editing 요소, 맞춤법검사, 복사붙여넣기기능을포함한클립보드기능을포함하고있다. 최신브라우저에서상호작용기능이수용되고있다. 나. 동작 (Performance) 멀티쓰레드기능을포함한 Workers 기능을포함하고있으며 window.requestidlecallback 기능을제외한 Workers 기능은대부분의브라우저에서관련기능이수용되고있다. 다. 보안 (Security) 암호화 API 및 iframe 에제한이엄격하여생긴 sandbox iframe 의기능을포함하고으 며, 대부분의브라우저에서관련기능이수용되고있다

211 라. 결제 (Payments) HTML5 내에서결제를지원하는기능으로아직실험단계이며, 브라우저에서관련기 능이수용되지않고있다. 5) 다중매체지원 (multimedia) HTML5 에서다중매체를지원하는기능으로 video 요소, audio 요소및관련코덱을부 분적으로지원하고있다. 가. 영상 (Video) Video 요소및자막및포스터이미지의기능을지원하고있다. 그밖에 Video 관련 코덱을지원하고있지만대부분의브라우저에서관련기능이수용되고있지않다. 나. 음성 (Audio) Audio 요소및음성 API, 음성인식기능을포함하고있다. 다. 전송 (Streaming) 사용자들에게각종비디오, 오디오등의멀티미디어디지털정보를제공하는기술로다운로드없이실시간으로재생해주는기법이다. 그밖에디지털저작권관리라고도불리는 DRM지원을포함하고있다. 대부분의브라우저에서관련기능이수용되고있지만코덱은제한적으로제공하고있다. 6) 입체, 영상효과 (3d, graphics & effects) HTML5 에시각적으로보여주는기능들을포함하고있다. 시각적으로보여주는기능으 로반응형이미지, 2D, 3D 그래픽을포함한애니메이션을포함한다. 가. 반응형이미지 (Responsive images) 해상도에따라사이즈를자동적으로조절하는 picture 요소를포함하고있으며 sizes 의 속성을지원한다. 대부분의브라우저에서관련기능을수용하고있다

212 나. 2차원-평면- 이미지 (2D Graphic) 캔버스를활용한 2D 그래픽기능을포함하고있다. 2D 그래픽기능으로는텍스트, 패스, 선종류등이있다. 지원하는이미지로는 PNG, JPEG 포맷을지원하고있으며, 대부분의브라우저에서관련기능을수용하고있다. 다. 3차원-입체 ; 가상현실 (3D and VR) 3D 그래픽을활용하기위해 OpenGL을활용한 WebGL 기능및 WebVR 기능을포함하고있다. WebGL 기능은대부분브라우저에서수용되고있지만 WebVR 기능은수용되고있지않다. 라. 애니메이션 (Animation) Web Animation API 기능을포함하고있다. (opacity, scale 등 ) 최신브라우저에서관련기능이일부수용되고있다. 7) 오프라인저장공간 (offline & storage) HTML5 에서는네트워크가연결되지않은상태에서실행가능한웹응용프로그램및 내부저장소, DB 를포함한다. 가. 웹응용프로그램 (Web applications) 클라이언트측에저장하고활용하는캐쉬및서비스워커, 푸쉬메시지를포함한다. 캐시및서비스워커는최신브라우저에서관련기능을수용하고있고푸쉬메시지는일부모바일브라우저에서관련기능을수용하고있다. 나. 저장공간 (Storage) 클라이언트사이드의 key-value 형식의저장소및 IndexedDB 를제공한다. 그밖에 Web SQL Database 를제공한다. 대부분의관련기능이브라우저에서수용되고있지만 Web SQL Database 는더이상업데이트되지않고 IndexedDB 로변경예정이다

213 다. 파일 (Files) 일반적인파일의읽기, Blob API 및파일시스템 API 를포함하고있으나, 파일시스 템의쓰기기능은브라우저에서수용되고있지않다. 8) 기타 (other) 스크립트및세션히스토리, 텍스트선택기능들이포함되어있다. 가. 스크립트지원 (Scripting): ECMA-262 기술규격에정의된표준화된스크립트프로그래밍언어를지원하고있다. 그밖에 base64 인코딩, 디코딩및 URL API 등을포함하고있으며, 일부최신브라우저에서 ECMAScript6 까지수용되고있다. 나. 기타 세션히스토리, Page Visibility API 및텍스트셀렉션기능을포함하고있으며, 최신 브라우저에서대부분수용되고있다

214 3.2 HTML5 수용도평가표 < 표 6-5> 브라우저별웹표준수용도 ( : 수용, : 분수용, : 별도처리, x: 비수용 ) Desktop browsers Mobile 구분 IE 11 Edge 14 Chrome 52 Safari 9.1 Firefox 48 Opera 37 삼성인터넷 4.0 ios 10 Parsing rules <!DOCTYPE html> triggers standards mode HTML5 tokenizer HTML5 tree building Parsing inline SVG Parsing inline MathML Elements Embedding custom non-visible data New or modified elements Section elements Grouping content elements Text-level semantic elements Interactive elements x x Global attributes or methods hidden attribute Dynamic markup insertion

215 Forms Field types input type=text input type=search input type=tel input type=url input type= input type=date x x x input type=month x x x input type=week x x x input type=time x x x input type=datetime-l ocal input type=number input type=range x x x input type=color x x x input type=checkbox input type=image input type=file Fields textarea select fieldset datalist x x output x progress meter x x Field validation Association of controls and forms Other attributes CSS selectors Events

216 Forms Form validation Web components Custom elements x x x x x Shadow DOM x x x x HTML templates x HTML imports x x x x x Location and orientation Geolocation Device Orientation x Device Motion x Output Full screen support Web Notifications x x x Input Gamepad control x x x Pointer Events x x x x x x Pointer Lock support x x x Video video element Subtitles Audio track selection Video track selection x x x x x x x x x Poster images Codec detection Video codecs MPEG-4 ASP support x x x x x

217 H.264 support H.265 support x x x x x x x Ogg Theora support WebM with VP8 support WebM with VP9 support x x x x x x x x x x x x x Audio audio element Loop audio Preload in the background Advanced Web Audio API x Speech Recognition Speech Synthesis Audio codecs PCM audio support x x x x x x x x x x x x MP3 support AAC support Dolby Digital support Dolby Digital Plus support Ogg Vorbis support Ogg Opus support WebM with Vorbis support WebM with Opus support Streaming x x x x x x x x x x x x x x x x x x x x x x x x x x x Media Source extensions x x DRM support x

218 Adaptive bit rate Dynamic Adaptive Streaming / MPEG-DASH HTTP Live Streaming / HLS x x x x x x x x x x x Codecs Video codecs x x Audio codecs x x Responsive images picture element x srcset attribute x sizes attribute x 2D graphics Canvas 2D graphics Drawing primitives Text support Path support x Ellipse support x Dashed line support System focus ring support x Features Hit testing support x x x x x x x x Blending modes x Image export formats PNG support JPEG support JPEG-XR support x x x x x x x x WebP support x x x x

219 3D and VR 3D Graphics WebGL WebGL 2 x x x x x x x x VR Headset WebVR x x x x x x x x Animation Web Animations API window.requesta nimationframe x x x x Communication Server-Sent Events x x Beacon x x x Fetch x x x XMLHttpRequest Level 2 Upload files Response type support WebSocket Basic socket communication ArrayBuffer and Blob support Streams Readable streams x x x x Writable streams x x x x x x x x Peer to peer Connectivity WebRTC 1.0 x x x x ObjectRTC API for WebRTC x x x x x x x Data channel x x x x

220 Input Access the webcam x x x Screen Capture x x x x x x x x Enumerate devices x x x x Recording Media Stream recorder x x x x x User interaction Drag and drop Attributes x x Events x x HTML editing Editing elements Editing documents CSS selectors x Clipboard APIs Clipboard API and events x x x Spellcheck spellcheck attribute Performance Workers Web Workers Shared Workers x x x x Other window.requesti dlecallback x x x x x x Security Web Cryptography API

221 Content Security Policy 1 Content Security Policy 2 Cross-Origin Resource Sharing Subresource Integrity Cross-document messaging x x x x x x x x x x Authentication Web Authentication / FIDO 2 Credential Management x x x x x x x x x x x x x x Iframes Sandboxed iframe iframe with inline contents x x Payments Web Payments x x x x x x x x Web applications Offline resources Application Cache Service Workers x x x x Push Messages x x x x Content and Scheme handlers Custom scheme handlers Custom content handlers x x x x x x x x x x Storage Key-value storage Session Storage Local Storage

222 Database storage IndexedDB Objectstore Blob support Objectstore ArrayBuffer support Web SQL Database x x x x Files Reading files Basic support for reading files Create a Blob from a file Create a Data URL from a Blob Create an ArrayBuffer from a Blob Create a Blob URL from a Blob Accessing the file system FileSystem API x x x x x x x x File API: Directories and System Scripting Script execution x x x x x Asynchronous script execution Defered script execution Script execution events Runtime script error reporting x x x x x x x ECMAScript 5 JSON encoding and decoding

223 ECMAScript 6 Modules x x x x x x x x Classes x x Arrow functions x x x Promises x Template strings x Typed arrays Internationalizati on x x ECMAScript 7 Async and Await x x x x x x x x Other API's Base64 encoding and decoding Mutation Observer URL API Encoding API x x x x Other Session history Page Visibility Text selection Scroll into view

224 4. HTML5.1 글로벌동향분석 웹표준화단체인 W3C의웹플랫폼워킹그룹 (Web Platform Working Group) 이 HTML5.1 을 W3C 권고안으로공개했다. 지난 9월권고를목표로작업을진행하던것이다. W3C가 HTML5 권고안을공개한건 2014년 10월 28일당시권고안공개는지난 1999 년 HTML 4.01 이후 15년만의일이었다. HTML 4.01 당시에는웹응용프로그램등이고려되지않았고웹페이지를기술하기위한포맷이었던만큼전면개정됐다. 이번에권고안을공개한 HTML5.1 은원래 HTML5 의일부였던규격이다. 하지만모든기능에대한버그문제해소를목표로했던 2014년권고안이늦어질수있다는우려로 2012년 9월플랜 2014가제안됐다. 이계획은당시안정화된부분만 HTML5.0 으로, 해결해야할문제가있던부분은 HTML5.1 로분할한다는것이다. 이에따라 HTML5.0 을 2014년에권고한것이다. 또 HTML5.1 은 2016 년권고한다는내용도담고있었다. 이런계획에따라 HTML5.1 은예정대로 11월에권고안으로공개된것이다. HTML5.1 책정작업은 2015년말까지 HTML 워킹그룹이진행했지만웹플랫폼관련분야에인계되면서일정에맞추기위해기술사양을깃허브에공개했다. W3C 측은 HTML 포맷안정화를 1년에 1번권고안으로공개할수있는워크플로개발을목표로한다고밝히고있으며지금은 HTML5.2 책정작업을진행하고있다. 4.1 HTML5 vs HTML5.1 HTML5.1의스펙의최근표준화, 핵심어휘와기능은 HTML5와비교하여 5가지차이점을두고확장을했다. - 원래 HTML5 사양에서제거된모듈은개별적으로표준화하기로했다. (Microdata 또는 Canvas와같은 HTML5 ApIs) - 다수개국어의마크업같은 HTML5 확장성으로써 HTML5.1은소개되었다. - HTML5 확장성또는 SVG와같은특징처럼 HTML5.1 은별도의사양으로적용되었다. - HTML5.1, HTML5.2 등앞으로의사양 (HTML5의표준화를최소화한특정기능개선 ) - 구현의부족함을제거 ( 브라우저는사용자의키보드인식, 포커스탐색고정, 누락된이벤트를추가 )

225 4.2 HTML5.1 spec HTML5.1 스펙개발작업은주로새로운 API나이벤트등새로운기능을추가하는작업, 기존의표준내용을수정하거나실제활용성이떨어지는기능은삭제하는방식으로진행되고있다. 2016년에 HTML5.1 에서구체적으로정리된내용들을보면 Accesskey 속성같은단일문자만허용하도록수정되었고, 패치 (Fetch) 또는로딩알고리즘에서필요시미디어요소 (Media Element) 에서미디어소스 (Media Source) 를분리시키는기능이추가되었다. 또한 2013년에 HTML5 스펙에서분리된마이크로데이터 (Microdata) 관련속성이제거되었고, WHATWG(Web Hypertext Application Technology Working Group) 와조율작업을하고, 표준추가의장점이없다고생각하여 <iframe> 에서의 seamless 속성및테이블정렬모델을스펙에서삭제하였다. 또한, <figure> 엘리먼트내에서 <figcaption> 의위치가어디든표현가능하도록수정하였고, 보안이슈및사용률이낮은 <isindex> 를삭제하였다. 4.3 HTML5.1 한계 먼저웹기술변화에아주큰변화와혁신이일어나고있는데반해웹표준화프로세스는여전히과거의프로세스를그대로답습하고있어서빠른변화를능동적으로수용하기에한계가있다. ( 물론 W3C가메일링리스트외부개방, 표준문서소스컨트롤활용, 커뮤니티그룹으로참여확대등표준제정단계에많은변화를받아들이는점은고무적이다.) 이에따라 HTML5 의표준에디터였던이안힉슨이지난 4월부터표준안혁신을지속하려면표준안자체가소프트웨어개발방식같은변화가따라야한다고강조하면서새로운표준개발협업방식을제안했다. 요컨대 2004년부터 2006년까지 W3C 이전에 HTML5 표준안작업을한후, W3C에제출했던 WHATWG 라는표준커뮤니티가있다. W3C HTML W/G가만들어진후에도활동이계속됐으나이들기능들이빠르게 W3C 내부로전달되어포함되지못했다. 따라서, WHATWG에서 HTML의개발버전 (Living HTML이라고도명명하고소스개발상의 Trunk에해당하는 ) 을담당하고, W3C가외부작업과내부작업을병합해서주기적으로표준안스냅샷을내놓는 ( 일종의 Branch 버전 ) 방법을제안해야한다

226 4.4 기능소개 가. 추가된기능 a. <picture> 와 srcset 속성은반응형이미지선택을허락한다. 이미지사이즈의크기가고정됐을때선택하는디바이스픽셀비기반 img 요소의 src 및 srcset 속성은크기가다른여러이미지를제공하기위해 x 기술이사용된다. <h1> <img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w" src="wolf-400.jpg" alt="the rad wolf"> </h1> 뷰포트기반선택은 srcset 및 sizes 속성은크기가다른여러이미지를제공하기위해 w 기술이사용된다. <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="kettlebell Swing"> 예술방향기반의선택은 <picture> 요소와 <source> 소자는 media 속성과함께이미지내 용을다르게하는다수의이미지를제공하는데사용된다. ( 작은이미지는큰이미지를잘라낸버전 ) <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img src="small.jpg" alt="the wolf runs through the snow."> </picture>

227 이미지포맷에기반을둔선택은 <source> 요소의 type 속성다른형식의여러개의이 미지를제공하기위해사용된다. <h2>from today s featured article</h2> <picture> <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp"> <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo"> <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150"> </picture> <p><b><a href="/wiki/marie_lloyd">marie Lloyd</a></b> ( ) was an English <a href="/wiki/music_hall">music hall</a> singer,... b. <details> 및 <summary> 속성은사용자가읽을여부를선택할수있는 확장된정보를제공하기위해사용된다. <details> 속성이진행보고서에서기술적인세부사항을숨기는데사용된다. <section class="progress window"> <h1>copying "Really Achieving Your Childhood Dreams"</h1> <details> <summary>copying... <progress max=" " value=" "></progress> 25%</summary> <dl> <dt>transfer rate:</dt> <dd>452kb/s</dd> <dt>local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt>remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd> <dt>duration:</dt> <dd>01:16:27</dd> <dt>color profile:</dt> <dd>sd (6-1-6)</dd> <dt>dimensions:</dt>

228 <dd> </dd> </dl> </details> </section> 이번항목은세부항목요소가기본적으로일부컨트롤을숨기기위해사용하는방법을 보여준다. <details> <summary><label for=fn>name & Extension:</label></summary> <p><input type=text id=fn name=fn value="pillar Magazine.pdf"> <p><label><input type=checkbox name=ext checked> Hide extension</label> </details> c. <menuitem> 및 type="context" 속성은사용자가브라우저의컨텍스트메뉴에 기능을값에추가할수있도록한다. 사용자가가진요소를마우스오른쪽버튼으로클릭하면 contextmenu 속성, 사용자 에이전트가먼저발생한다. <form name="npc"> <label>character name: <input name=char type=text contextmenu=namemenu required></label> <menu type=context id=namemenu> <menuitem label="pick random name" onclick="document.forms.npc.elements.char.value = getrandomname()"> <menuitem label="prefill other fields based on name" onclick="prefillfields(document.forms.npc.elements.char.value)"> </menu> </form> <details>

229 고양이의이미지는네가지명령컨텍스트메뉴가주어진다. <img src="cats.jpeg" alt="cats" contextmenu=catsmenu> <menu type="context" id="catsmenu"> <menuitem label="pet the kittens" onclick="kittens.pet()"> <menuitem label="cuddle with the kittens" onclick="kittens.cuddle()"> <menu label="feed the kittens"> <menuitem label="fish" onclick="kittens.feed(fish)"> <menuitem label="chicken" onclick="kittens.feed(chicken)"> </menu> </menu> d. requestanimationframe API 는보다효율적인애니메이션을할수있다. requestanimationframe 설명은각문서는처음에비어있어야하고애니메이션프레임 콜백식별자인최상위레벨의 browsing context 와관련되어있다. 이애니메이션프레임은 CallBack 목록초기에숫자 0 이어야한다. requestanimationframe 메서드설명은 requestanimationframe( ) 메서드가호출될때, 사용자에이전트는다음단계를실행해야한다. 1 윈도우객체의문서객체를문서화시켜야한다. 2 문서의애니메이션프레임콜백식별자를 1씩증가시켜야한다. 3 메소드인수를문서의애니메이션프레임콜백식별자의현재값과연관된애니메이션프레임콜백목록의문서에추가한다. 4 문서의애니메이션프레임콜백식별자의현재값을반환합니다

230 e. enqueuejob 및 nextjob 은마이크로태스킹관점에서약속된해결책을 설명하는데도움을준다. enqueuejob 설명 (queuename, job, arguments) 은자바스크립트사양이 EnqueueJob 추상적동작호출할때, 다음의알고리즘은자바스크립트의 EnqueueJob 환경에서사용되어야한다. enqueuejob 추가설명사진 1 Assert: queuename is "PromiseJobs". ("ScriptJobs" must not be used by user agents.) 2 세팅객체의작업이 [[Realm]] 이되게한다. 3 이벤트루프응답세팅의 Queue a microtask는다음절차를수행해야한다. - 스크립트를실행시킬수있는세팅인지확인해야한다. 만약실행이되지않는다면중단해야한다. - 스크립트를다시실행시키기위한세팅을준비해야한다. - 인수의요소를사용하는단계에의해지정된추상작업을수행한결과를만들어야한다. - 세팅한스크립트를실행후클린시켜야한다. - 결과가갑자기나오면그결과에의해표시된 Exception을보고해야한다. f. 링크에대한 rev 속성은, 주로 RDFa 를지원한다. ( 이전 HTML 4 에정의 ) A link with a rev attribute: <a rev="nofollow" href=" >Cheep Flights</a> g. HTMLMediaElement 와 srcobject 객체들 HTMLMediaElement 설명은 HTMLMediaElement 객체 ( 이규격에서의 <audio> 및 <video>) 는단순히미디어요소로알려져있다

231 h. 교차출처 track 및 EventSource 및 <canvas> 에서 ImageBitmap 위한 교차출처콘텐츠활성화 canvas 요소는실시간으로그래프, 게임그래픽, 예술, 또는다른시각적이미지를렌더 링하는데사용할수있고해상도에의존비트맵캔버스와스크립트를제공한다. 예를들어, 값 "image/png의" PNG 화상을생성하는것을의미한다, 값 "image/jpeg의" JPEG 화상을생성하는것을의미한다, "image/svg+xml" 값은 SVG 이미지생성을의미한다. ( 이것은일반적이지않는좋은기능으로써사용자에이전트트랙이어떻게비트맵을추적할지를요구한다. ) track IDL 속성은 <track> 요소의텍스트트랙에상응하는해당 TextTrack 객체를반환해야한다. src, srclang, label, 및 default IDL 속성들은있어야특성을반영하는같은이름의각각의콘텐츠특성을반영한다. 이러한종류 IDL 속성은알려진값에한정된동일한이름의콘텐츠속성을반영한다. <section id="video"> <p><a href="playing-cats.nfv">download video</a></p> </section> <script> var videosection = document.getelementbyid('video'); var videoelement = document.createelement('video'); var support = videoelement.canplaytype('video/x-new-fictional-format;codecs="kittens,bunnies"'); if (support!= "probably" && "New Fictional Video Plugin" in navigator.plugins) { // not confident of browser support // but we have a plugin // so use plugin instead videoelement = document.createelement("embed"); } else if (support == "") { // no support from browser and no plugin // do nothing videoelement = null; } if (videoelement) {

232 while (videosection.haschildnodes())videosection.removechild(videosection.firstchild); videoelement.setattribute("src", "playing-cats.nfv"); videosection.appendchild(videoelement); } </script> i. event-source-error, event-track-error 및 event-track-load 미디어피칭 에대한이벤트 <video src="brave.webm"> <track kind=subtitles src=brave.en.vtt srclang=en label="english"> <track kind=captions src=brave.en.hoh.vtt srclang=en label="english for the Hard of Hearing"> <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="français"> <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="deutsch"> </video> j. onrejectionhandled 및 onunhandledrejection 그리고거부된약속을위한 APIs Unhandled promise rejections 설명은동기런타임스크립트오류이외에 unhandledrejec tion 및 rejectionhandled 이벤트를통해추적된경우스크립트는비동기약속거부가발생할수있다. Unhandled promise rejections 절차 동기런타임스크립트오류외에도, 스크립트는처리되지않은거부및거부당한이벤트를통해추적된비동기식약속거부를경험할수있다. 사용자에이전트가주어진환경설정객체설정객체에서거부된약속에대해통지할때, 다음절차대로수행되어야한다. 1 거부된약속목록들을통보하는세팅객체들의복사리스트를만들어야한다. 2 만약리스트가비어있다면, 다음절차를실행해야한다. 3 거부된약속목록들을통보하는세팅객체들을클린시켜야한다

233 4 다음하위단계를실행하는작업을대기열에넣는다. - 만약 p s [[PromiseIsHandled]] 내부슬롯이사실이면, 루프의다음반복을계속수행해야한다. - 정렬되진않지만취소가능한새로운신뢰할수있는 PromiseRejectionEvent 객체로이벤트를보낸다, 그러면이벤트이름에처리되지않은응답들이있을것이다. - 이벤트의 promise 속성을 p 로초기화해야한다. - 이벤트의 reason 속성을 p [[PromiseResult]] 내부슬롯의값으로초기화해야한다. - 설정개체의전역개체에서이벤트를보낸다. - 이벤트가취소된경우약속거부가처리되고, 그렇지않으면약속거부가처리되지않는다. - p [[PromiseIsHandled]] 내부슬롯이 false 인경우설정개체의미해결거부약속약점세트에 p 를추가한다. k. HTMLTableCaptionElement, HTMLTableSectionElement, HTMLTableRowElement, HTML 테이블요소. HTMLTableCaptionElement 은만약 <caption> 속성이부모를가지고있고 <table> 요소면은 <caption> 요소는부모테이블의제목을나타낸다. <caption> 요소는테이블모델의일부분이다. <table> 요소가 <figure> 요소외에 <figcatpion> 요소를포함하고있을때, <catpion> 요소는 <figrcatpion> 요소의종류로생략되어야한다. <caption> <p>table 1. <p>this table shows the total score obtained from rolling twosix-sided dice. The first row represents the value of the first die,the first column the value of the second die. The total is given inthe cell that corresponds to the values of the two dice. </caption>

234 HTMLTableSectionElement 의 <section> 속성은간략한설명을제공하는 aria-lable 속성을가 지고있다. 보조기술들은유저들의힌트로써 aria-label 값과함께 region 역할을전달할수있다. <article> <header> <h2>apples</h2> <p>tasty, delicious fruit!</p> </header> <p>the apple is the pomaceous fruit of the apple tree.</p> <section aria-label="red apples."> <h3>red Delicious</h3> <p>these bright red apples are the most common found in many supermarkets.</p> </section> <section aria-label="green apples."> <h3>granny Smith</h3> <p>these juicy, green apples make a great filling for apple pies.</p> </section> </article> l. history.scrollrestoration 은그들의역사를탐색할때사용자의뷰방향위치를 제어할수있다. <head> <script> if ('scrollrestoration' in history) history.scrollrestoration = 'manual'; </script> </head>

235 m. 컬렉션을반환하는일부개체에대한 IDL [SameObject] [Unforgeable] interface Location { stringifier attribute USVString href; readonly attribute USVString origin; attribute USVString protocol; attribute USVString host; attribute USVString hostname; attribute USVString port; attribute USVString pathname; attribute USVString search; attribute USVString hash; void assign(usvstring url); void replace(usvstring url); void reload(); [SameObject] readonly attribute USVString[] ancestororigins;}; n. 브라우징컨텍스트는분리될수있도록 rel 와 window 에 noopener 를추 가하는것을허락한다. interface HTMLScriptElement : HTMLElement { attribute DOMString src; attribute DOMString type; attribute DOMString charset; attribute boolean async; attribute boolean defer; attribute DOMString? crossorigin; attribute DOMString text; attribute DOMString nonce;};

236 o. 콘텐츠보안정책의사용을지원하기위해 <script> 및 <style> 에 nonce 속성추가 나. 제거된기능 - appcache - 미디어컨트롤러 - commandapi. - <object> 에 usemap 속성 - accesskeylabel IDL 속성 - form 속성은더이상 <label> 태그에유효하지않다. - input type="range" 에서 multiple 속성 - <area> 에서 hreflang과 type에속성 - <section> 요소로각각의윤곽을만들수있는 <h1> 중첩의사용한다. - form submission에서특별취급의 isindex - navigator.yieldforstorageupdates() 와 the Storage mutex. - tbody 하기전에 tfoot 사용을금지한다. - HTMLHyperLinkElementUtils 위한 [Exposed=Window], DOMStringMap 위한 [Exposed=Window, Worker] 그리고 IDL Date 다. 변경된기능 - accesskey는하나의문자값으로가져온다.(html 4처럼 ) - 각각의레벨이섹션요소내에있으면 <header> 및 <footer> 요소는중첩될수있다. - <option> 요소는비어있을수있다. - mousewheel 이벤트는 wheel로부른다

237 - input type="submit" 속성의값은변경될수있다. - <figcaption> 태그는 <figure> 태그내에서어디서나나타낼수있다 - 제목을갖고있거나또는친구에게이메일을작성하는 alt 속성이없는 <img> 태그를만들지않는다. - <time> 콘텐츠는내용또는텍스트를분할한다. - 중복된 href 속성을가진 area 요소에빈 alt은더이상준수하지않는다. - 내부적으로탐색할때, 링크등을위한다음검색은내비게이션에이동한곳에서시작된다. - <img> 와관련된요소는 width="0" 를지원한다 -.tfoot 그리고.createTFoot() 은항상테이블의끝에삽입해야한다 - fieldset와 nameditem는 HTMLFormControlsCollections와 HTMLOptionsCollectio ns도아닌 HTMLCollections를만든다. - frameelement null 값을반환할수있다 - 해결자에게주어진 URL currentsrc가해결되지않은이미지는절대적으로필요로하지않는다. - script IDL 속성을반영한다. - meta refresh는 ; 또는 url= 이선택적일수있도록허락한다. - navigator.javaenabled() 는함수이다. - filecallback은 blobcallback라고부른다. - toblob() 은 null 입력이가능하다. - HTMLHyperlinkElementUtils와 Location 본원은읽기전용이다. - titlesvg의첫번째자식제목은마지막이아닌그것의제목이다. - window.open() 은 null로반환할수있다

238

239 Ⅶ. 부록

240

241 Ⅶ. 부록 1. 용어집 자바스크립트 (JavaScript) 액티브 X (ActiveX) 플래시 (Flash) 이용자에이전트 (User-agent) 하이퍼텍스트전송규약 (HTTP) XMLHttpRequest 암호수출제한정책 (Encr 미국의넷스케이프커뮤니케이션즈사 (Netscape Communications) 가개발한스크립트언어 년 2 월에발매한월드와이드웹 (WWW) 브라우저인넷스케이프내비게이터 (Netscape Navigator) 2.0 에실장하였다. 브라우저에서실행하는스크립트언어를기술한다. 언어규격은자바의부분집합 (subset) 으로되어있다. 하이퍼텍스트생성언어 (HTML) 문서를작성하는수준의이용자가사용하는것을주안점으로하여자바의언어규격으로부터변수의형 ( 정수형이나문자열형등 ) 을생략하거나새로운클래스정의를할수없도록하였다. 스크립트는 HTML 문서속에직접기술하며, script 라는꼬리표를사용한다. 윈도이용자들이인터넷을편리하고쉽게이용하도록 MS 에서개발한것으로, 기존의응용프로그램으로작성된문서등을웹과연결시켜그대로사용할수있게하는기술. 인터넷익스플로러를위해고안되었으며, 실생활페이지에접속하면자동으로내려받기되어설치된다. 선마이크로시스템즈사의자바 (Java) 기술에대항하는기술이다. 어도비사에서개발되었으며액션스크립트와모션그래픽을이용하여 PC 용, 웹용모듈을작성할수있는도구이다. HTTP 요청시 HTTP 헤더에넣어전송하는문자열로브라우저에서는브라우저이름, 버전정보등이포함된다. 각브라우저, 검색로봇마다다른문자열이포함된다. 인터넷의월드와이드웹 (WWW) 서버와 WWW 브라우저가파일등의정보를송수신하는데사용되는클라이언트 / 서버규약. WWW 브라우저의화면상에서 URL(uniform resource locator) 를지정하는데사용된다. 예를들면 ac.kr/index.html 과같이 로시작되는 URL 을지정하면, 여기에있는데이터를하이퍼텍스트전송규약 (HTTP) 을사용하여서버에서브라우저로전송한다. 브라우저에서 XML 을요청할수있도록하는내장객체로자바스크립트로제어가가능하여동적인웹페이지를만드는데사용된다. 미국정부에서전통적으로강력한암호에대해서강력한통제를

242 yption Export Controls) 중간자공격 (Man in the Middle Attack, MITM) HTML5 (HyperText Markup Language 5) 웹애플리케이션 자바스크립트 API CSS(Cascading Style Sheets) 지속해왔다 년부터비군사적인항목에대해서조금씩완화되기시작하여여러차례의관련규제조항의수정을거쳐서적대국가가아닌나라에대해서는 2001 년까지대부분완화되었다. 네트워크통신을중간에서조작하여도청하거나변경하는공격 HTML 의차기주요제안버전으로 W3C 에서표준을제정하고있는핵심마크업언어 년초기리뷰기반으로시작하여 2014 년 4 분기표준권고안 (Recommendation) 을목표로하고있으며, 다양한서비스를지원하기위한규격들이추가되고있다. 자바스크립트 (JavaScript), HTML, CSS 등 Web 기반언어로개발된응용프로그램에서클라이언트로브라우저나웹런타임을사용하는모든응용프로그램이다. 자바스크립트와같은인터페이스정의언어 (IDL) 를사용하여정의된웹애플리케이션을위한프로그램인터페이스. 일반적으로디바이스기능 (device capabilities) 에대한접근을위해웹애플리케이션을실행하기위한수단으로써제공된다. 웹문서의전반적인스타일을미리저장해두는기술로월드와이드웹컨소시엄 (W3C) 에서표준화한하이퍼텍스트생성언어 (HTML) 용스타일시트. HTML 을이용해서웹페이지를개발할경우전반적인틀에서세세한글꼴을일일이지정해주어야하지만, 웹페이지의스타일을미리저장해두면웹페이지의한가지요소만변경해도관련되는전체페이지의내용이한꺼번에변경되므로, 문서전체의일관성을유지할수있고작업시간도단축된다. 하나의스타일을정의하면여러개의문서에서사용할수있으며수정이쉽다 DOM(Document Object Model) SEED Site Key CAPTCHA 문서형식선언 (DTD : Document Type Declaration) 또는 DOCTYPE 이란어떤 SGML 이나 XML 기반문서내에그문서가특정문서형식정의 (Document Type Definition) 를따르는것을지정하는것이다. 본래 DTD 에기반한 SGML 도구를이용해문서해석가능성과유효성을검사하기위한목적으로문서내에삽입된다 년한국정보보호진흥원에서개발한대칭키블록암호알고리즘. 128bit 로표준화되었고 256bit 까지있다. 이용자가이미등록해놓은정보를통하여웹에서이용자사이에상호인증하는방식. 피싱방지목적으로사용됨 자동화된입력인지사람이입력하는지를식별하기위한방법. 임의의숫자나문자를컴퓨터가알아보기어렵게하여표시한후이에대한값을입력하도록요청하는방식. 때로는사람도알아보기어렵다

243 2. 약어집 AA API ARS CAPTCHA CORS CMP CMS CSR DDoS DTD ECMA FDS EME HTTP HTTPS IDL HSM ISP ISO JSON MPEG NPAPI OTP OS OWASP PCIDSS PKI RDP RFB TCP TLS TTP URL URI SEED SSL VNC VPN W3C XBL XHTML Amount Authentication Application Program Interface Advanced Record System Completely Automated Public Turing test to tell Computers and Humans Apart Cross-Origin Resource Sharing Certificate Management Protocol Content Management System Certificate Signing Request Distributed Denial of Service attack Document Type Definition European Computer Manufacturers Association Fraud Detection System Encrypted Media Extensions Hyper Text Transfer Protocol Hypertext Transfer Protocol over Secure Socket Layer Interface Definition Language Hardware security module Internet Secure Payment International Organization for Standardization JavaScript Object Notation Moving Picture Experts Group Netscape Plugin Application Programming Interface OneTime Password Operating System The Open Web Application Security Project Payment Card Industry Data Security Standard Public Key Infrastructure Remote Desktop Protocol Remote Frame Buffer Transmission Control Protocol Transport Layer Security Trusted Third Party Uniform Resource Locator Uniform Resource Identifier 128-bit Symmetric Block Cipher Secure Socket Layer Virtual Network Computing Virtual Private Network World Wide Web Consortium XML Binding Language extensible HyperText Markup Language

244 3. 참고자료및인용 [ 웹기술 ] 1. 웹표준진단도구 2. W3C HTML5 표준 W3C, HTML5, w3school.com 4. New Tricks in XMLHttpRequest2(Eric Bidelman) 5. Internet Explorer 호환성도움말 6. 브라우저 HTML5 지원확인 7. 네이버개발자블로그 - 브라우저는어떻게동작하는가 8. Rendering: repaint, reflow/relayout, restyle 9. How (not) to trigger a layout in Webkit 프론트엔드개발자를위한렌더링성능인자이해하기 W3C CSS3 MediaQuery W3C Drag&Drop W3C, HTML5, Drag and Drop, W3C FileAPI W3C, File API, W3C FileWriter W3C, File API: Writer, W3C IndexedDB W3C, Indexed Database API,

245 16. W3C WebMessage W3C, HTML5 Web Messaging, W3C Web RTC W3C, WebRTC 1.0, W3C WebStorage W3C, Web Storage, W3C XHR W3C, XMLHttpRequest Level 1, W3C XHR2 W3C, XMLHttpRequest Level 2, Bootstrap jspdf / pdf.js MSXML 사용방법 XML 파서사용방법 (libxml2) HTML5 Video Player 비교 Top 10 Best HTML5 Audio Players HTML5rocks- 크롬의렌더링가속 : 레이어모델 Google검색 - GPU Accelarated Compositing in Chrome HTML5rocks- Scrolling Performance HTML5rocks- Jank Busting for Better Rendering Performance HTML5rocks- CSS 페인트타임과페이지렌더가중치

246 32. HTML5rocks- 불필요한페인팅회피하기 HTML5rocks- 불필요한페인팅회피하기 : Animated GIF버전 HTML5rocks- 고성능애니메이션 Getting Started with WebRTC Saying Goodbye to Our Old Friend NPAPI W3C Standards for Web Applications on Mobile: current state and roadmap 공개프레임워크와라이브러리, 툴기술자료 [ 보안 ] 39. TLS Cipher Suite Registry OWASP HTML5 Security Cheat Sheet 보안서버보급지원정보사이트 SSL 테스팅툴 FIDO(Fast IDentity Online) Alliance Web Cryptography API W3C, Web Cryptography API, CryptoJS Google, JavaScript implementations of standard and secure cryptographic algorithms, CryptoJS CSP W3C, Content Security Policy 1.0,

247 47. CSP2 W3C, Content Security Policy Level 2, 브라우저 Sandbox 보안모델 W3C,HTML5Sandboxing, 49. Keygen W3C, HTML5 keygen element, keygen-element, MSRCRYPTO Microsoft Research, MSR JavaScript Cryptography Library, v1.2, research.mic rosoft.com/en-us/downloads/29f9385d-da4c-479a-b2ea-2a7bb335d727/, SCJL Stanford University, Stanford Javascript Crypto Library, stanford.edu/sjcl/, PKCS1 RSA Laboratories PKCS#1, RSA Cryptography Standard v2.1, PKCS5 RSA Laboratories PKCS#5, Pasword-Based Cryptography Standard v2.0, PKCS8 RSA Laboratories PKCS#8, Private-Key Information Syntax Standard, PKCS10 RSA Laboratories PKCS#10, Certification Request Syntax Specification, PKCS11 RSA Laboratories PKCS#1, Cryptographic Token Interface Standard v2.1, PKCS12 RSA Laboratories PKCS#12, Personal Information Exchange Syntax Standard v1.0, RFC2511 IETF, RFC 2511, Internet X.509 Certificate Request Message Format, March RFC4210 IETF, Internet X.509 Public Key Infrastructure Certificate Management Protocol (CMP), RFC6454 IETF, The Web Origin Concept, RFC6712 IETF, Internet X.509 Public Key Infrastructure -- HTTP Transfer for the Certificate Management Protocol (CMP), HTML5 Security Cheatsheet

248 63. HTML5 Top 10 Threats Stealth Attacks and Silent Exploits 홈페이지취약점진단 제거가이드 ( 정보보호시스템관리 ) [ 인증 / 결제 ] 65. MPay 페이팔개발자센터 e-id BSI TR Das ecard-api-framework, Publikationen/ TechnischeRichtlinien/tr03Au112/index_htm.html, W3C, Web Payments use cases Wiki, Multi-factor authentication OASIS, OASIS Security Services (SAML) OAuth [MS IE, Edge] 72. Edge 개발자사이트 Microsoft Edge 호환성확보 Microsoft 윈도우드라이버코드사이닝실용가이드 Internet Explorer Support Lifecycle Policy FAQ

249 인터넷이용환경개선기술안내서 (2016 년개정판 ) 인쇄 2016년 12월발행 2016년 12월발행인 백기승발행처 한국인터넷진흥원 (KISA, Korea Internet&Security Agency) 서울시송파구중대로 135 ( 가락동 ) IT벤처타워 Tel: (02) 인쇄처 ( 주 ) 웹소울랩 < 비매품 > 1. 본안내서는미래창조과학부의출연금으로수행한 HTML5 기술지원 사업의결과입니다. 2. 본안내서의내용을발표할때에는반드시한국인터넷진흥원 HTML5 기술지원 사업의 결과임을밝혀야합니다. 3. 본안내서의판권은한국인터넷진흥원이소유하고있으며, 당진흥원의허가없이무단전재 및복사를금합니다.

250

251

252