목 차 Ⅰ. 웹접근성의이해 11 Ⅱ. 웹접근성을고려한콘텐츠제작기법 29 원칙 1. 인식의용이성 (Perceivable): 모든콘텐츠는사용자가인식할수있어야 한다. 29 검사항목 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나 용도를이해할수있도록대체텍스트를제

Size: px
Start display at page:

Download "목 차 Ⅰ. 웹접근성의이해 11 Ⅱ. 웹접근성을고려한콘텐츠제작기법 29 원칙 1. 인식의용이성 (Perceivable): 모든콘텐츠는사용자가인식할수있어야 한다. 29 검사항목 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나 용도를이해할수있도록대체텍스트를제"

Transcription

1 - 한국형웹콘텐츠접근성지침 2.0(KICS.OT /R1, 2010 년 12 월 31 일제정 ) 을기준으로 연구책임자 최두진단장 한국정보화진흥원정보사회통합지원단 공동연구책임자 김석일교수 충북대학교전기전자및컴퓨터공학부 참여연구원 홍경순부장 한국정보화진흥원정보접근지원부 노석준교수 성신여자대학교교육학과 윤좌진과장 신승식차장 현대자동차 신현석과장 현준호책임 한국정보화진흥원정보접근지원부 구경모주임 한국정보화진흥원정보접근지원부

2 목 차 Ⅰ. 웹접근성의이해 11 Ⅱ. 웹접근성을고려한콘텐츠제작기법 29 원칙 1. 인식의용이성 (Perceivable): 모든콘텐츠는사용자가인식할수있어야 한다. 29 검사항목 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나 용도를이해할수있도록대체텍스트를제공해야한다. 31 검사항목 ( 자막제공 ) 멀티미디어콘텐츠에는자막, 원고또는수화를 제공해야한다. 55 검사항목 ( 색에무관한콘텐츠인식 ) 콘텐츠는색에관계없이인식될수 있어야한다. 62 검사항목 ( 명확한지시사항제공 ) 지시사항은모양, 크기, 위치, 방향, 색, 소리등에관계없이인식될수있어야한다. 70 검사항목 ( 텍스트콘텐츠의명도대비 ) 텍스트콘텐츠와배경간의명도 대비는 4.5 대 1 이상이어야한다. 77 검사항목 ( 배경음사용금지 ) 자동으로재생되는배경음을사용하지않아야 한다. 83 원칙 2. 운용의용이성 (Operable): 사용자인터페이스구성요소는조작가능하고 내비게이션할수있어야한다. 93 검사항목 ( 키보드사용보장 ) 모든기능은키보드만으로도사용할수있어야 한다. 106 검사항목 ( 초점이동 ) 키보드에의한초점은논리적으로이동해야하며 시각적으로구별할수있어야한다. 115 검사항목 ( 응답시간조절 ) 시간제한이있는콘텐츠는응답시간을조절할수 있어야한다. 115

3 검사항목 ( 정지기능제공 ) 자동으로변경되는콘텐츠는움직임을제어할수 있어야한다. 119 검사항목 ( 깜빡임과번쩍임사용제한 ) 초당 3~50 회주기로깜빡이거나 번쩍이는콘텐츠를제공하지않아야한다. 123 검사항목 ( 반복영역건너뛰기 ) 콘텐츠의반복되는영역은건너뛸수 있어야한다. 128 검사항목 ( 제목제공 ) 페이지, 프레임, 콘텐츠블록에는적절한제목을 제공해야한다. 133 검사항목 ( 적절한링크텍스트 ) 링크텍스트는용도나목적을이해할수 있도록제공해야한다. 137 원칙 3. 이해의용이성 (Understandable): 콘텐츠는이해할수있어야한다. 140 검사항목 ( 기본언어표시 ) 주로사용하는언어를명시해야한다. 142 검사항목 ( 사용자요구에따른실행 ) 사용자가의도하지않은기능 ( 새창, 초점변화등 ) 은실행되지않아야한다. 145 검사항목 ( 콘텐츠의선형화 ) 콘텐츠는논리적인순서로제공해야한다. 154 검사항목 ( 표의구성 ) 표는이해하기쉽게구성해야한다. 165 검사항목 ( 레이블제공 ) 입력서식에는대응하는레이블을제공해야한다. 174 검사항목 ( 오류정정 ) 입력오류를정정할수있는방법을제공해야한다. 183 원칙 4. 견고성 (Robust): 웹콘텐츠는미래의기술로도접근할수있도록견고하게 만들어야한다. 201 검사항목 ( 마크업오류방지 ) 마크업언어의요소는열고닫음, 중첩관계 및속성선언에오류가없어야한다. 202 검사항목 ( 웹애플리케이션접근성준수 ) 콘텐츠에포함된웹애플리케이션은 접근성이있어야한다. 209

4 적용기술목차 적용기술 1) 이미지등에대한대체텍스트제공 31 적용기술 2) 버튼이미지에대한대체텍스트제공 32 적용기술 3) Java 애플릿등에대한대체텍스트제공 32 적용기술 4) 이미지맵에대한대체텍스트제공 35 적용기술 5) 텍스트이미지, 그래픽문자등에대한대체텍스트제공 35 적용기술 6) 플래시콘텐츠의대체텍스트제공 37 적용기술 7) 실버라이트콘텐츠의대체텍스트제공 38 적용기술 8) 그래프등에대한설명문제공 39 적용기술 9) 생방송콘텐츠에대한대체텍스트제공 40 적용기술 10) CAPTCHA 에대한대체텍스트제공 41 적용기술 11) 온라인시험등에대한대체텍스트제공 42 적용기술 12) 대체텍스트를빈공간 (alt="") 이나생략해서제공해야하는경우 42 적용기술 13) 열린자막제공 55 적용기술 14) 닫힌자막제공 56 적용기술 15) 대본또는원고제공 56 적용기술 16) 수화제공 57 적용기술 17) 음성이없는동영상의대체수단제공 57

5 적용기술 18) 색을보완하는텍스트제공 62 적용기술 19) 색을보완하기위하여글자모양을이용하는방법 63 적용기술 20) 색을보완하기위하여무늬또는모양을이용하는방법 64 적용기술 21) 시각정보를이용한지시문의보완 70 적용기술 22) 청각정보를이용한지시문의보완 71 적용기술 23) 배경과텍스트콘텐츠의색지정방법 77 적용기술 24) 배경과텍스트콘텐츠색을기본값으로지정하는방법 78 적용기술 25) 배경과텍스트콘텐츠색을변경하는컨트롤의제공 78 적용기술 26) 재생시간이 3 초미만인배경음의사용 83 적용기술 27) 배경음을정지상태로제공하는방법 84 적용기술 28) 플래시콘텐츠의배경음자동실행방지 84 적용기술 29) 실버라이트콘텐츠의배경음자동실행방지 89 적용기술 30) 키보드와마우스이벤트핸들러제공 95 적용기술 31) 마우스드래그와드롭기능에서의키보드이용보장 97 적용기술 32) 웹애플리케이션제공시키보드이용보장 98 적용기술 33) 실버라이트플러그인의키보드접근제공 101 적용기술 34) 콘텐츠화면순서와동일한키보드내비게이션순서제공 106 적용기술 35) 시각적으로표시가능한초점표시방법 107 적용기술 36) 플래시에서키보드내비게이션순서제공방법 110 적용기술 37) 실버라이트에서키보드내비게이션순서제공방법 111

6 적용기술 38) 제한시간연장방법제공 115 적용기술 39) 메타태그를이용한페이지재이동방법제공 116 적용기술 40) 변화하는콘텐츠를일시정지시키고, 일시정지된곳으로부터 다시시작할수있도록제공 119 적용기술 41) 전체배너를보여줄수있는방법제공 120 적용기술 42) 전체배너의리스트제공 120 적용기술 43) 사용자요구에의한업데이트방법제공 120 적용기술 44) 깜빡이는시간이 3 초이내인콘텐츠만제공 124 적용기술 45) 경고페이지제공 125 적용기술 46) 반복적인콘텐츠영역의시작부분에건너뛰기링크제공 128 적용기술 47) 건너뛰기링크의화면표시 129 적용기술 48) 웹페이지의제목제공 133 적용기술 49) 콘텐츠블록의제목제공 134 적용기술 50) 프레임제목제공 134 적용기술 51) 링크의목적을설명하는링크텍스트제공 137 적용기술 52) <html> 태그에주사용언어지정 142 적용기술 53) 초점변화에의해맥락을변화시키지말고, 해당인터페이스가 활성화 (activate) 되었을때기능을실행 145 적용기술 54) 명확한서식제출 (submit) 버튼제공 146 적용기술 55) 새창열림을사전에알림 146 적용기술 56) 콘텐츠를의미있는순서로배열 154

7 적용기술 57) 스타일을이용한글자간격조절 157 적용기술 58) 동적으로생성된요소는그것을유발시킨요소바로뒤에위치 158 적용기술 59) 표제목을 <caption> 으로제공 165 적용기술 60) 표의구조또는내용에대한요약을 summary 로제공 166 적용기술 61) 표의헤더셀과데이터셀의관계정의 167 적용기술 62) 입력서식과 <label> 의명시적관계제공 174 적용기술 63) <label> 을제공할수없는입력서식에 title 제공 176 적용기술 64) 여러개의유사한입력서식묶기 178 적용기술 65) 입력값또는형식에대한예시제공 183 적용기술 66) 서버측오류검사 184 적용기술 67) 클라이언트측적합성검사와본문에오류메시지표시 185 적용기술 68) 오류메시지를스크립트경고창으로제공 194 적용기술 69) 중요한서식제출시재확인절차제공 197 적용기술 70) 여는태그와닫는태그의정확한사용 202 적용기술 71) 속성이름과속성값의정확한사용 203 적용기술 72) 태그의정확한중첩관계 204 적용기술 73) 표준에부합하는태그와속성이름, 값사용 205 적용기술 74) 플러그인플랫폼이제공하는접근성 API 활용 209 적용기술 75) 웹애플리케이션의대체콘텐츠제공 210 적용기술 76) 용도, 목적지, 종류, 사용법에맞는사용자인터페이스요소사용 212

8 잘못된사례목차 잘못된사례 1) 의미나기능이있는텍스트아닌콘텐츠에빈문자열을대체텍스트로 제공 45 잘못된사례 2) 복잡한정보를하나의이미지로표현하고간단한대체텍스트로만 제공 47 잘못된사례 3) 주기적으로변하는콘텐츠의대체텍스트를변경하지않는경우 48 잘못된사례 4) 의미있는정보를배경이미지로제공 48 잘못된사례 5) 빈칸이미지의대체텍스트가콘텐츠의인식을방해하는경우 50 잘못된사례 6) 도와같은텍스트아닌콘텐츠에대한설명이불충분한경우 51 잘못된사례 7) 중요한정보를색으로만제공하는경우 51 잘못된사례 8) alt 속성이아닌 title 속성을이용하여대체텍스트제공 52 잘못된사례 9) QR 코드에서 URL 을대체텍스트로알려주지않는경우 53 잘못된사례 10) 자막, 원고, 수화중어느한가지도제공하지않는경우 58 잘못된사례 11) 동영상의내용을요약하여제공하는자막또는원고의경우 59 잘못된사례 12) 대체수단에대한또다른대체수단임을알려주지않는경우 60 잘못된사례 13) 열린자막이수화를가리는동영상 61 잘못된사례 14) 동영상의해상도가낮아수화를볼수없는경우 61 잘못된사례 15) CSS 로인하여링크임이구분되지않는경우 65 잘못된사례 16) 색으로만필수입력항목을표시한경우 66

9 잘못된사례 17) 오류메시지를색으로만구분하도록한경우 67 잘못된사례 18) 그래프를색으로만인식하도록하는경우 68 잘못된사례 19) 일정구분을색으로만구분하도록한경우 69 잘못된사례 20) 방향, 위치정보만을이용하여사용법을알려주도록구현한경우 72 잘못된사례 21) 화면위치만을이용하여객체를지정한경우 74 잘못된사례 22) 버튼모양만을이용하여사용법을알려준경우 74 잘못된사례 23) 특수기호만을이용하여사용법을알려준경우 76 잘못된사례 24) 전경색은기본값으로두고배경색만을지정한경우 79 잘못된사례 25) 배경색은기본값으로두고전경색만을지정하는경우 80 잘못된사례 26) 배경음이 3 초이상지속되도록구현한경우 91 잘못된사례 27) 마우스오버또는키보드초점을받으면자동적으로배경음이 실행되는경우 92 잘못된사례 28) 마우스로만접근가능한이미지버튼을제공하는경우 101 잘못된사례 29) 키보드로접근할수없는플래시메뉴 102 잘못된사례 30) 마우스로만접근할수있는링크를제공한경우 103 잘못된사례 31) 키보드만으로이전입력서식이동이불가능한경우 105 잘못된사례 32) 초점을일부러보이지않도록한경우 112 잘못된사례 33) 키보드이동순서가비논리적인경우 113 잘못된사례 34) 페이지재이동시회피수단을제공하지않는경우 116 잘못된사례 35) 마우스로만정지할수있는콘텐츠를제공한경우 121

10 잘못된사례 36) 자동으로변하는배너 122 잘못된사례 37) 깜빡이는콘텐츠가많은경우 125 잘못된사례 38) 발작가능성이있는동영상을제공한경우 126 잘못된사례 39) 번쩍임이지속되는영상을제공한경우 127 잘못된사례 40) 건너뛰기링크를제공하지않은경우 130 잘못된사례 41) 건너뛰기링크를과도하게제공한경우 131 잘못된사례 42) 콘텐츠가다른페이지에동일한제목을제공한경우 135 잘못된사례 43) 프레임제목이누락된경우 135 잘못된사례 44) 특수문자 ( ) 기호를제공한경우 136 잘못된사례 45) 목적이나용도를알기어려운링크텍스트 138 잘못된사례 46) 목록선택상자에서초점변경만으로새창이열리는경우 148 잘못된사례 47) 체크상자의선택만으로페이지가다시로드되는경우 150 잘못된사례 48) 텍스트입력서식에값을넣으면자동으로제출되는경우 151 잘못된사례 49) 페이지가로드될때자동으로팝업창이열리도록한경우 152 잘못된사례 50) 상위메뉴와하위메뉴의읽는순서가잘못된경우 160 잘못된사례 51) 배치용표를잘못사용한경우 162 잘못된사례 52) 표를이미지로표현하고, 표제목을제공하지않은경우 170 잘못된사례 53) 이메일입력서식의레이블을잘못제공한경우 180 잘못된사례 54) 오류정보를확인한후오류발생페이지로돌아가지못하는경우 199 잘못된사례 55) 아이디를중복선언한경우 206

11 잘못된사례 56) 태그의중첩관계에오류가있는경우 207 잘못된사례 57) 이미지링크를자바스크립트로잘못구현한경우 214 잘못된사례 58) 잘못된이미지버튼구현사례 214

12 Ⅰ. 웹접근성의이해 o 웹접근성의개념 웹접근성이란어떠한사용자 ( 장애인, 고령자포함 ), 어떠한기술환경에서도 전문적인능력없이웹사이트에서제공하는모든정보에비장애인과동등하게 접근 이용할수있도록보장해주는것이라정의할수있다. 월드와이드웹컨소시엄 (W3C: World Wide Web Consortium) 의웹접근성이니셔티브 (WAI: Web Accessibility Initiatives) 에서는웹접근성을 장애인도웹을인식하고, 이해하며, 내비게이션하고, 상호작용할수있으며, 그들이웹에기여할수있는것을의미한다. 웹접근성은또한나이가들어감에따라능력이변화하는고령자를포함한다른사람들도혜택이있다. ( 라고정의하고있다. WAI에서는접근성의 4 가지핵심원리로인식의용이성 (perceivable), 운용의용이성 (operable), 이해의용이성 (understandable), 그리고견고성 (robust) 을제시하고있으며, 장애인뿐만아니라고령자, 비장애인도접근성의대상이됨을함축하고있다. o 웹접근성의필수요소들 웹접근성을준수하려면, 콘텐츠자체의접근성준수만으로는불가능하다. 즉, 콘텐츠뿐만아니라해당콘텐츠의개발자와사용자간에상호작용등을가능하도록하는여러가지필수요소들이함께작동하지않으면불가능하다. 이러한필수요소들을제시하면다음과같다 ( 콘텐츠 (contents): 웹페이지또는웹애플리케이션에있는정보사용자도구 : 웹브라우저 (Web browsers), 미디어플레이어등보조공학 (assistive technology): 스크린리더, 대체키보드, 스위치, 스캔소프트웨어등사용자 (users): 웹을사용하는사람들 ( 장애인등특별한기술을필요로하는사람들포함 )

13 개발자 (developers): 웹콘텐츠를개발하는사람들 ( 장애를지닌개발자와콘텐츠를제공하는사용자를포함한, 설계자, 코딩하는사람, 저자등포함 ) 저작도구 (authoring tools): 웹사이트를제작하는소프트웨어평가도구 (evaluation tools): 웹접근성평가도구, HTML 유효성검사기 (validators), CSS 유효성검사기등 출처 : [ 그림 1] 웹접근성필수요소들간의관계 o 웹접근성준수의필요성 그렇다면우리는왜웹접근성을준수해야하는가? 우리가웹접근성을준수해 야하는대표적인이유를크게네가지로나누어보면, 다음과같다. 첫째, 장애인, 고령자등을포함한웹이용자의확대를들수있다. 장애인의경우 2000년에는 958천명으로전체인구의 2.01%, 2005년에는 1,777천명으로전체인구의 3.64% 를차지하였으나, 2010년에는 2,517천명으로전체인구의 5.18% 를차지하고있는것으로나타났고, 고령자의경우 2000년에는 3,395천명으로전체인구의 7.11%, 2005년에는 4,366천명으로전체인구의 8.95% 를차지하였으나, 2010년에는 5,357천명으로전체인구의 11.0% 를차지함을알수있다. 이러한통계치들을보면, 장애인뿐만아니라고령자수가매년지속적으로증가하고있음을알수있다

14 한편, 보건복지가족부와한국보건사회연구원의 2008년장애인실태조사결과에따르면, 지체장애, 시각장애, 청각장애등대표적인장애유형별휴대폰, 컴퓨터, 인터넷보유율과사용률이우리가생각하고있는것보다는훨씬높음을알수있다 (< 표 1> 참조 ). 바로이러한사람들이웹을보다많이이용하면할수록웹접근성을제대로준수하지않으면그들이겪는접근성의문제또한증가할수밖에없다. < 표 1> 장애유형별휴대폰, 컴퓨터, 인터넷보유율및사용률 구분 지체뇌병변시각청각언어지적장애장애장애장애장애장애 전체 휴대폰 보유율 사용률 컴퓨터 보유율 사용률 인터넷 보유율 사용률 출처 : 보건복지가족부, 한국보건사회연구원 년장애인실태조사, p 둘째, 웹접근성을준수하는것이법률로서의무화되었다. 이는웹접근성을준수하지않을시법률적인처벌을받게됨을의미한다. 아직까지우리나라에서는웹접근성미준수로인해법률적인처벌을받은경우는없다. 그러나 Target을상대로 NFB(National Federation of the Blind) 의회원인 Bruce Sexton( 시각장애인학생 ) 이대체텍스트를제공하지않고, 마우스가아닌키보드만으로구매가불가능하는등미국장애인법 (ADA) 을위반했다는이유로 2006년에제소해 2008년 8월 27일에 Target이 6백만달러 ( 한화 60억원 ) 를지불 ( 소송참가개인당최대 $7,000 지급 ) 하도록한판결, Ramada.com과 Priceline.com 등에대한판결등외국의경우를보면이는언제든지그리고특정분야가아닌모든분야에걸쳐일어날수있음을알수있다

15 Target 홈페이지 ( ( Ramada.com 홈페이지 ( Priceline.com 홈페이지 ( 셋째, 웹접근성을준수하게되면디자인및설계등에대한효율성을제고함으로써비용절감효과도있다. Henry(2006) 에의하면, 일반적으로 한웹사이트에서웹접근성해결책을실행하면종종기술적인향상을가져올수있다 고한다. 접근성을준수하지않은불필요한이미지나동영상자료등을올리면접근성을준수할수없기때문에꼭필요한이미지나자막, 수화등이포함된동영상만을올리게된다. 그결과, 서버에대한부하량이감소하게되며, 이는다운로드속도의증가를가져올수있다. 또한단한가지의장치나브라우저가아닌여러장치또는다양한브라우저에서도접근할수있기때문에상호작용성과장치독립성을증진할수있으며, CSS(Cascading Style Sheets) 를사용함으로써사이트개발시간을단축하고유지관리시간이나비용도절감할수있다. 넷째, 공공기관및기업의이미지제고와이윤을창출하기위해접근성을준수할필요가있다. 그것이공공기관이든민간기업이든어떤조직이웹사이트를접

16 근가능하게만들기위해노력을하면할수록해당기관은긍정적인투자대비회수율과비용효율성을가져올수있다. 웹의중요한혜택들중한가지는융통성과웹이제공하는서비스에대한접근의용이성에기인한다. 실제로, 이것은전화, 면대면또는우편과같은다른수단을통해공공서비스나다른서비스들과상호작용하는데필요한시간, 노력, 비용의절감을의미한다. 접근성의결여는많은사람들이대안적인채널들을사용함으로써보다높은처리비용을지속적으로지출해야함을의미한다. 특히, 공공기관이웹접근성을준수함으로써얻을수있는투자대비회수율또는비용효율성은최근 EU 의연구결과를보면보다명확하게알수있다 (< 표 2> 참조 ). 대상집단도달율경제적비용효과성범주 웹사이트접근성을달성하기위한추가적인비용 2% 5% 15% 30% 전자접근성을위한정부투자비용 -24,256,800-60,641, ,925, ,851,994 5% 10% 20% < 표 2> 접근가능한전자정부를위한비용 - 효과성모형 - 연간순수비용절감액 정부의처리비용절감액 158,223, ,223, ,223, ,223,882 순수정부비용대비이익 133,967,082 97,581,883-23,702, ,628,112 국민의이익 153,112, ,112, ,112, ,112,707 전체비용대비이익 287,079, ,694, ,410,592-52,515,405 전자접근성을위한정부투자비용 -24,256,800-60,641, ,925, ,851,994 정부의처리비용절감액 316,447, ,447, ,447, ,447,764 순수정부비용대비이익 292,190, ,805, ,521,767-47,404,230 국민의이익 306,225, ,225, ,225, ,225,415 전체비용대비이익 598,416, ,031, ,747, ,821,184 전자접근성을위한정부투자비용 -24,256,800-60,641, ,925, ,851,994 정부의처리비용절감액 632,895, ,895, ,895, ,895,528 순수정부비용대비이익 608,638, ,253, ,969, ,043,534 국민의이익 612,450, ,450, ,450, ,450,829 전체비용대비이익 1,221,089,558 1,184,704,358 1,063,420, ,494,363 출처 : European Commission, 2008, p. 10. < 표 2> 를보면, 웹사이트를이용하는사람 ( 장애인, 노인 ) 들의비율을높일수록 접근성을위한비용추정치가내려가전반적인비용대비회수율은더높아짐을 알수있다. 즉, 이웹접근성에관한투자대비비용효과성모형은전자정부서

17 비스등에대한접근성준수율이높아질수록또는국민들이웹을통해정보에접 근할수있는비율이높아질수록정부와국민들은다른수단들을통해정보에접 근하는데드는처리비용을현격하게절감할수있음을잘보여주고있다. 마지막으로, googlebot과같은검색엔진에서찾는정보들을명시적으로제시함으로써, 즉검색엔진에최적화함으로써자신의홈페이지를홍보하기위해별도의비용을지출하지않고도사이트를홍보할수있어궁극적으로웹사이트의활용률을증가시킬수있다. 또한이미살펴본바와같이, 접근성을준수하지않은것으로인해소송을당하게되면높은법률비용을지출해야하지만접근성을준수하면그러한비용을지출할필요가없으며, 하나의접근가능한콘텐츠를통해다양한특성을지닌사용자들의요구를수용할수있기때문에장애유형별로별도의자료를제작 배포할필요가없게된다

18 < 참고 > 웹접근성 vs 웹사용성 웹사용성전문가인 Nielsen(1993) 은웹사용성의다섯가지구성요소로학습가능성 (learnability), 사용의효율성 (efficiency of use), 기억가능성 (memorability), 오류허용한계 (error tolerance) 또는효과성 (effectiveness), 그리고주관적만족 (subjective satisfaction) 을제시하였다. 학습가능성이란버튼의레이블이나용어등이간단명료해쉽게학습할수있는가의여부를말하며, 사용의효율성이란복잡하고여러단계를거쳐수행해야하는작업을한두번의조작만으로, 커다란노력이나비용을들이지않고도, 신속하게처리할수있어야함을의미한다. 또한기억가능성이란한두번의학습만으로도특정기능이나내용을쉽게기억할수있어야함을의미하며, 오류허용한계또는효과성이란사용자가사소한실수나부주의, 착오등으로인해실수를범할지라도해당실수를복구할수있도록해주며, 그러한수정과정을통해당초계획했던행동이나목표를보다성공적으로달성할수있도록해주는것을말한다. 또한주관적만족이란사용자가특정웹사이트를이용하는데있어색상등이자신의취향이나선호도에맞게배열되어보다편안한분위기에서웹서핑을함으로써궁극적으로만족감을얻는것을의미한다. 일반적으로, 웹접근성은 Nielsen(1993) 이말한다섯가지구성요소중처음네가지요소들, 즉학습가능성, 사용의효율성, 기억가능성, 오류허용한계또는효과성과밀접한관련이있는반면, 주관적만족은포함되지않는다. 예를들어, 접근성에서는전경색과배경색이충분한정도의가독성에만초점을맞춘다. 사용자가검정색바탕에노란색글씨를선호하지만검정색에흰색글씨를사용하였다고제시되는문제는사용성관련문제이다. 이처럼, 사용성은사용자들이기능성 (functionality) 을얼마나잘사용할수있는가에관한문제, 즉웹사용성은사용자가애플리케이션의작동, 목적, 콘텐츠를얼마나잘이해할수있도록할것인가를나타내는척도 (Mueller, 2003) 인반면, 접근성은사용성을위해필요하지만모든사용성설계원리들이접근성에적용되지는않는다. 한마디로, 접근성은사용자가애플리케이션과얼마나잘상호작용할수있는가를나타내는척도 (Mueller, 2003) 라할수있다. 따라서접근성은사용성을위한필요조건이지충분조건은아니며, 바로이점에서접근성은사용성과차이가있다. o 장애인의웹사용시애로점 우리나라의장애인복지법시행령 [ 별표 1] 에는동법시행령제2조 ( 장애인의종류및기준 ) 에근거해장애인의종류와기준을구체적으로명시해놓고있다. 이시행령에명시된장애인은지체장애, 뇌병변장애, 시각장애, 청각장애, 언어장애, 지적장애, 자폐성장애, 정신장애, 신장장애, 심장장애, 호흡기장애, 간장애, 안면장애, 장루 요루장애, 간질장애의총 15가지장애중하나이상의장애를지닌

19 사람을말한다. 한편, 이들장애인의종류와기준은해당장애인의특성에따라보다세분화될수있다. 예를들어, 시각장애인의경우전맹, 약시, 색각장애등으로나눌수있다. 웹접근성을고려할때는일반적으로이러한세분화된특성들을고려하는것이일반적이다. 이미언급한바와같이, 웹접근성을준수하면다양한특성을지닌장애인들뿐만아니라고령자, 비장애인모두에게혜택을준다. W3C는웹에서접근성장애를겪을수있는대상별로시나리오를작성한후각대상별접근성준수방안을제시하고있다. W3C에서제시한장애유형별대표적인웹접근성장애를요약 제시하면다음과같다 ( 1) 시각장애 대체텍스트를가지고있지않은이미지 적절하게기술되지않은복잡한이미지 ( 예 : 그래프나차트 ) 텍스트나오디오로기술되지않은비디오순차적으로 ( 셀단위로또는 선형화된 모드로 ) 읽을때의미를알수없는표 NOFRAME 대체수단을가지고있지않거나의미있는이름들을가지고있지않는프레임논리적인순서로탭을할수없거나부적절하게레이블된서식모든명령어들에대한키보드지원이되지않는브라우저와저작도구들기반이되는운영체제의표준애플리케이션프로그래밍인터페이스를사용하지않은브라우저와저작도구들화면낭독프로그램 (screen reader) 이해석하기어려운비표준문서서식쉽게변경되지않는 ( 크게하거나작게할수없는 ) 절대글자크기가사용된웹페이지일관성없는배열로인해확대했을경우주변의콘텐츠를잃어버려내비게이션하기가어려운웹페이지

20 부적절한명도대비로인해명도대비를사용자가자신의스타일시트로대체하거나 (override) 쉽게변경할수없는웹페이지나웹페이지상의이미지확대했을경우다음줄로자동변경되는것을차단한이미지로된텍스트웹사이트에있는텍스트를강조하기위해독특한표시물 (marker) 로사용된색상배경색이나패턴과부적절하게대비된텍스트 2) 청각장애및언어장애 웹방송 (webcasts 등을포함 ), 웹상의오디오에관한자막이나원고가없는경우제1언어가문어나구어가아닌수화인사람들이이해하기어려운텍스트로꽉찬페이지에서콘텐츠관련이미지가없는경우간단명료한언어가제공되지않는경우웹사이트에서음성입력을요구하는경우음성기반상호작용을요하거나어떠한대체입력모드도가지고있지않은웹사이트 3) 지체장애 웹페이지상의시간제한반응옵션 마우스명령어에대한키보드대체물을지원하지않는브라우저와저작도구들 논리적인순서로탭 (tab) 할수없는서식 4) 지적및신경장애 시각을보완하기위해오디오로변환할수있는대체텍스트를제공하지않거나오디오에대한자막을제공하지않는경우와같이, 웹사이트에있는정보에대한대체유형 / 포맷을제공하지않는경우쉽게끌수없도록된, 주의를산만하게하는시각또는비디오요소

21 웹사이트가명료하고일관성있게조직되지않은경우불필요하게복잡한언어를사용한경우절대글자크기를사용한웹페이지발작을촉발할수있는시각적또는오디오주기사용 한편, W3C는몇가지대표적인장애유형별웹접근성문제를준수했을때장애등으로인한콘텐츠의접근문제는더이상문제가되지않는다고주장한다. W3C가제시한대표적인장애유형별접근성준수사례들을제시하면 < 표 3> 과 같다 ( WAI/bcase/soc). < 표 3> 대표적인장애유형별웹접근성준수사례 장애유형시력이감퇴하고있는고령자민첩성이떨어지거나미세운동조절을하기어려운고령자청각이손상된고령자문해능력이낮은사람과언어가유창하지않은사람저대역인터넷접속이나오래된테크놀로지를사용하는사람 준수사례전경색과배경색간의충분한명도대비약간의시각장애를지닌사람들이화면확대기와같은보조공학을사용할필요없이직접읽을수있도록, 읽기쉬운글꼴과줄간격을늘릴수있는것과글자크기를크게할수있는텍스트정보를전달하기위해텍스트의비트맵이미지를사용하는것대신에더나은브라우저기반확대를할수있는스타일이맞추어진텍스트사용자들을산만하게하거나발작을유발하지않는방식으로깜빡거리거나번쩍이거나움직이지않는텍스트와다른요소객체의클릭가능한영역을늘릴수있는기능모든웹사이트의상호작용 ( 장치독립성 ) 을위해마우스를사용하는것대신에키보드를사용할수있도록한것오디오콘텐츠에대한원고와자막오디오의전경 정보 와배경 소음 간의대비간단명료한언어보충적인설명명료하고일관성있는디자인, 내비게이션, 링크그룹으로나누어진정보묶음너무많이깜빡거리거나번쩍이거나움직이지않는텍스트사용자들에게콘텐츠를읽고사용할수있는충분한시간제공이미지, 멀티미디어, 그리고다른비텍스트객체들에대한대체텍스트색상으로전달되는정보를위한풍부한 (redundant) 코딩과전경색과배경색간의충분한명도대비상대값으로정의된텍스트크기

22 신규사용자와웹을빈번하게사용하지않는사용자 정보를전달하기위해텍스트의비트맵이미지대신에다운로드속도를높여줄수있는스타일에맞춘텍스트 콘텐츠를프레젠테이션으로부터분리하기위해효과적으로사용된, 그렇게함으로써파일크기와파일다운로드요구조건들을줄여다운로드속도를증가시킬수있는스타일시트 몇몇오래된테크놀로지는스타일시트를처리할수없기때문에, 스타일시트없이도읽을수있고이해할수있도록조직화된사이트 타당한 W3C 테크놀로지를사용하며오래된테크놀로지에서도작동할가능성이높은사이트 사용자들이원하는페이지들을열수있도록도와주고잘못된경로를거쳐가는것을막아줌으로써낭비되는페이지로딩시간을절약할수있도록도와주는, 명료하고일관성있는디자인, 내비게이션, 그리고링크 명료하고일관성있는디자인, 내비게이션, 그리고링크 이미지맵에대한풍부한텍스트링크제공 새로운브라우저창이열리기전에사용자에게공지 o 웹접근성관련국내외법률과표준 웹접근성관련국내외법률이나표준등에는어떠한것들이있는지살펴보고, 특히웹접근성에관해보다구체적으로명시해놓은 장애인차별금지및권리구제등에관한법률 ( 이하 장애인차별금지법 ) 과 장애인차별금지법시행령 에대해좀더구체적으로살펴보면다음과같다. 먼저, 웹접근성관련국내법률과정책, 지침으로서는 장애인 노인 임산부등의편의증진에관한법률 제4조 ( 접근권 ), 장애인복지법 제20조 ( 정보에의접근 ), 2005년 12월에국가표준으로승인된 인터넷웹콘텐츠접근성지침 (IWCAG 1.0), 2008년 4월 11일부터시행되고있는 장애인차별금지법 제21조 ( 정보통신 의사소통에서의정당한편의제공의무 ), 그리고 2009년 5월 22 일공포된, 기존 정보화촉진기본법 의전부개정법인 국가정보화기본법 제32조 ( 장애인 노인등의정보접근및이용보장 ) 등을들수있다

23 제32조 ( 장애인ᆞ고령자등의정보접근및이용보장 ) 1 국가기관등은인터넷을통하여정보나서비스를제공할때장애인 고령자등이쉽게웹사이트를이용할수있도록접근성을보장하여야한다. 2 정보통신망이용촉진및정보보호등에관한법률 제2조제3호에따른정보통신서비스제공자 ( 이하 " 정보통신서비스제공자 " 라한다 ) 는그서비스를제공할때장애인 고령자등의접근과이용의편익을증진하기위하여노력하여야한다. 3 정보통신관련제조업자는정보통신기기및소프트웨어 ( 이하 " 정보통신제품 " 이라한다 ) 를설계, 제작, 가공할때장애인 고령자등이쉽게접근하고이용할수있도록노력하여야한다. 4 국가기관등은정보통신제품을구매할때장애인 고령자등의정보접근과이용편의를보장한정보통신제품을우선하여구매하도록노력하여야한다. 5 행정안전부장관은장애인 고령자등의정보접근및이용편의증진을위한정보통신서비스및정보통신제품등의종류 지침등을정하여고시하여야한다. 특히, 장애인차별금지법 제21조와 장애인차별금지법시행령 제14조 ( 정보통신 의사소통에서의정당한편의제공의단계적범위및편의의내용 ) 는공공및민간웹사이트에대한웹접근성준수를단계적으로의무화하고있다. 이를좀더구체적으로살펴보면, 다음과같다. 먼저, 장애인차별금지법 제 21 조는장애인이비장애인과동등하게전자정보에 접근, 이용하는데필요한수단, 즉웹접근성을보장하는웹사이트를보장받아 야한다고명시하고있다. 제21조 ( 정보통신ᆞ의사소통등에서의정당한편의제공의무 ) 1 제3조제4호 제6호 제7 호 제8호가목후단및나목 제11호 제18호 제19호에규정된행위자, 제12호 제14호부터제16호까지의규정에관련된행위자, 제10조제1항의사용자및같은조제2항의노동조합관계자 ( 행위자가속한기관을포함한다. 이하이조에서 " 행위자등 " 이라한다 ) 는당해행위자등이생산 배포하는전자정보및비전자정보에대하여장애인이장애인아닌사람과동등하게접근 이용할수있도록수화, 문자등필요한수단을제공하여야한다. 이경우제3조제8 호가목후단및나목에서말하는자연인은행위자등에포함되지아니한다. 2공공기관등은자신이주최또는주관하는행사에서장애인의참여및의사소통을위하여필요한수화통역사 문자통역사 음성통역자 보청기기등필요한지원을하여야한다. 3 방송법 제2조제3호에따른방송사업자와 인터넷멀티미디어방송사업법 제2조제5호에따른인터넷멀티미디어방송사업자는장애인이장애인아닌사람과동등하게제작물또는서비스를접근 이용할수있도록폐쇄자막, 수화통역, 화면해설등장애인시청편의서비스를제공하여야한다

24 4 전기통신사업법 에따른기간통신사업자 ( 전화서비스를제공하는사업자만해당한다 ) 는장애인이장애인아닌사람과동등하게서비스를접근 이용할수있도록통신설비를이용한중계서비스 ( 영상통화서비스, 문자서비스또는그밖에방송통신위원회가정하여고시하는중계서비스를포함한다 ) 를확보하여제공하여야한다. 5 다음각호의사업자는장애인이장애인아닌사람과동등하게접근 이용할수있도록출판물 ( 전자출판물을포함한다. 이하이항에서같다 ) 또는영상물을제공하기위하여노력하여야한다. 다만, 도서관법 제18조에따른국립중앙도서관은새로이생산 배포하는도서자료를점자, 음성또는확대문자등으로제공하여야한다. 1. 출판물을정기적으로발행하는사업자 2. 영화, 비디오물등영상물의제작업자및배급업자 6 제1항에따른필요한수단을제공하여야하는행위자등의단계적범위및필요한수단의구체적인내용과제2항에따른필요한지원의구체적인내용및범위와그이행등에필요한사항, 제3항과제4항에따른사업자의단계적범위와제공하여야하는편의의구체적내용및그이행등에필요한사항은대통령령으로정한다. 이를보다구체적으로실현하기위해, 장애인차별금지법시행령 에는각행위주체별로접근성준수의무화단계를설정해놓고있다. < 표 4> 에서보는바와같이, 국가및지방자치단체, 대통령령으로정한공공기관의경우 1년이내, 즉 2009년 4월 11일까지, 그외대상은 1년에서 5년내, 즉 2013년 4월 11일까지단계적으로웹접근성을준수하도록하고있으며, 장애인에게정당한편의제공규정을위반할경우최고 3,000만원의과태료가부과되고, 행위가악의적인경우 3년이하징역이나 3,000만원이하의벌금을부과할수있도록규정하고있다. < 표 4> 장애인차별금지법시행령에명시된웹접근성준수의무화단계별대상기관 년도 공공기관 공공기관 국 공립유치원 초 중등교육법 , 고등교육 법 에따른국 공 사립각급 교육기관 ( 책임자 ) 국 공 사립특수 학교 특수학급이 설치된 국 공 립각급학교 장애전담 보 육시설 일반병원, 치 과, 한방병원 ( 입원 30인 이상 ) 의료기관 복지시설 문화 예술 체육 법인 사회복지시설 상시 300명 ( 사회복지관 이상의 근로 종합병원 등 ) 자사용사업 장애복지시설장과국가및 ( 요양및재활 지방자치단체 시설등 ) * 국립문화예술 단체, 박물관, 미술과 국립중앙도서 관, 공공도서관 상 시 명의 근로자사용사업장 *

25 학교 영재학교, 영 재교육원 보육시설 ( 인이상 ) 사립유치원 평생교육시설, 연수기관 직업훈련기관 (1,000 m2이상 ) 국 공립보육시설및법인설립보육시설 그외병원 ( 입 원 30 인이 하 ) 민간종합공연 장 체육관련 행 위자 민간 종합공 연장및소공 연장 ( 석 미만 ) 영화관 (300석 미만 ) 사립박물관 미 술관 모든법인 법인인사용자가사용자의지위에서제공하는정보 ( 예 : 직원의모집 채용, 임금및복리후생등의정보 ) 가아닌경영공시및제품판매를위한정보의경우예외 특히, 여기에서주목할사항은현재단계적웹접근성준수대상이아니더라도 직원의모집 채용, 임금및복리후생등에관한정보와같이법인인사용자가사 용자의지위에서제공하는정보는접근성을준수해제공해야한다는점이다. 다음으로, 웹접근성관련대표적인국외법률이나표준을살펴보면다음과같다. 먼저, 웹접근성에대해서는호주의장애차별금지법 (Disability Discrimination Act: DDA), 브라질의접근성에관한법 (Law on Accessibility, L ), 벨기에의차별금지법 (Anti-Discrimination Law), 핀란드의 JHS 129 공공행정에서웹서비스를설계하기위한지침 (JHS 129 Guidelines for Designing Web Services in the Public Administration), 독일의무장애정보기술에관한법령 (Ordinance on Barrier-Free Information Technology), 영국의장애인차별금지법 1995(Disability Discrimination Act 1995), 일본의기본 IT법 (Basic IT Law), 미국의재활법제508조 (Section 508 of the Rehabilitation Act) 등을포함해전세계의상당히많은나라들이웹설계에관한법률이나정책, 지침등을가지고있다. 특히, 웹접근성에관한법률과지침들을마련하고이를체계적으로잘수행하

26 고있는국가들중대표적인두국가를예를들어살펴보면다음과같다. 먼저, 미국은 2000년 12월에 W3C의지침중우선순위 (Priority) 1과 2를기초로 16개항목에대한웹접근성표준 (Section 508 Standards) 제정하였으며, 2001년 6월부터 재활법제508조 (Section 508 of the Rehabilitation Act) 에의거연방정부및소속기관에서제공하는모든웹사이트에웹접근성준수를의무화하였다. 또한 2006년 7월부터 W3C의 WCAG 2.0 개정에발맞추어해당표준의개정을진행중에있다. 영국은 2004년 10월에 장애인차별금지법(Disability Discrimination Act, 1995년제정 ) 에의거해모든웹사이트이용에웹접근성을준수할것을의무화하여시행하고있다. 영국정부는이를보다체계적으로지원하기위해 2006년부터 W3C의 WCAG 1.0을활용해 PAS(Publicly Available Specification) 78 이란웹접근지침해설, 평가방법등을포함한가이드라인을마련 제공하고있다. 또한웹접근성에관한국제표준화기구인 W3C 역시웹접근성에관한여러가지가이드라인을마련 제공하고있는데, 그대표적인것이바로 1999년 5월 5일에제정 공표된웹콘텐츠접근성지침 (Web Content Accessibility Guidelines: WCAG) 1.0이다. 이 WCAG 1.0은총14개의가이드라인과각가이드라인에따라한개에서 7개까지의체크포인트들 (checkpoints) 로구성되어있다. 또한이들체크포인트각각은 1부터 3까지의우선순위 (Priority) 을가지고있는데, 1은반드시준수해야하며 (must), 2는가급적준수해야하고 (should), 3은준수하면좋음 (may) 을의미한다. 이 WCAG 1.0은많은나라들이그대로채택활용하거나수정해사용하고있다. 한편, W3C는 2008년 12월에 WCAG 2.0을발표하였다

27 < 그림 2> W3C 의 WCAG 1.0 홈페이지 ( < 그림 3> W3C 의 WCAG 2.0 홈페이지 ( 우리나라도 W3C의 WCAG 1.0 중우선순위 1과 2 중일부를토대로 인터넷웹콘텐츠접근성지침 (IWCAG 1.0) ( 국가표준으로승인 ) 을마련해시행하고있다. 또한다른나라들과마찬가지로, 우리나라도 W3C의 WCAG 2.0 의개정에발맞추어 WCAG 2.0 및미국의 Section 508 개정내용등을수용해한국형웹콘텐츠접근성지침 (KWCAG) 2.0을개정하였으며, 2010년 12월 31 일에이를국가표준으로지정하였다

28 [ 참고문헌 ] 보건복지가족부, 한국보건사회연구원 (2009) 년장애인실태조사. w European Commission (2008). Accessibility of ICT products and services to Disabled and Older People: Evidence-based analysis for a possible co-ordinated European approach to web accessibility 일접속. information_society/newsroom/cf/itemdetail.cfm?item_id=4722. w Henry, S. L. (2006). Understanding Web accessibility. In Thatcher, J. et al. (2006). Web accessibility: Web standards and regulatory compliance. w Mace, R. L. (1985). Universal design: Barrier free environments for everyone. Designers West, 33(1), w Mueller, J. P. (2003). Accessibility for everybody: Understanding the Section 508 accessibility requirements. New York: Apress. w w Nielsen, J. (1994), Usability Engineering. Boston, MA: AP Professional. Vanderheiden, G., & Tobias, J. (2000). Universal design of consumer production: Current industry practice and perceptions 일접속. [ 참고할만한자료 ] 웹접근성관련법률, 표준, 지침정보 w w w w 국가정보화기본법및시행령 ( 국가법령정보센터 ( 에서검색가능 ) 장애인차별금지및권리구제등에관한법률및시행령 ( 국가법령정보센터 ( 에서검색가능 ) 장애인 노인 임산부등의편의증진보장에관한법률및시행령 ( 국가법령정보센터 ( 에서검색가능 ) 장애인복지법및시행령 ( 국가법령정보센터 ( 에서검색가능 ) w 장애인등에대한특수교육법및시행령 ( 국가법령정보센터 ( main.html) 에서검색가능 ) w w 한국형웹콘텐츠접근성지침 2.0 : Section 508 of the Rehabilitation Act: w Guide to good practice in commissioning accessible websites(pas 78: 2006): w Common Look and Feel Standards 2.0 Canada: clf2-nsi2/ w Disability and the Equality Act 2010 UK: DisabledPeople/RightsAndObligations/DisabilityRights/DG_ w w W3C 의웹접근성지침 1.0(WCAG 1.0): W3C 의웹접근성지침 2.0(WCAG 2.0):

29 웹사용성 (Web Usability) 관련정보 w w w w w The Usability Professional's Association: Usability.gov: Jakob Nielsen's Alertbox: Webusability: Web Usability: 보편적설계 (Universal Design) 또는보편적학습설계 (Universal Design for Learning: UDL) 관련정보 w Center for Applied Special Technology(CAST): w The Center for Universal Design: sod5/cud/index.htm

30 Ⅱ. 웹접근성을고려한콘텐츠제작기법 원칙 1. 인식의용이성 (Perceivable): 모든콘텐츠는사용자가 인식할수있어야한다. o 인식의용이성 웹사이트에서제공하는콘텐츠를이용하기위해서는해당콘텐츠를정확히인식할수있어야한다. 시각장애인은시각을이용하여인식하도록만들어진이미지를인식할수없다. 여기에서텍스트는화면낭독프로그램을이용하면읽어줄수있으므로시각장애인이인식할수있는콘텐츠로간주한다. 약시자와고령자는통상적인크기의폰트로표시된텍스트콘텐츠를인식하기 어렵다. 색각장애인은특정한색으로표시된콘텐츠의구별이어렵다. 청각장애인 은동영상의음성, 오디오등과같은청각콘텐츠를인식할수없다. 콘텐츠를인식하기어려운경우는비단장애인에게만국한된것이아니다. 다음 과같은특별한환경에서의콘텐츠는비장애인이인식하는경우도어려움을준다. 직사광선이내려쪼이는장소에설치된모니터에표시되는콘텐츠매우작은폰트를사용한콘텐츠흑백모니터에표시되어색의차이가드러나지않는콘텐츠소음이매우심한환경에서제공되는청각을이용하는콘텐츠 이와같이장애또는주변여건등으로인하여인식이불가능하거나어려움을겪는콘텐츠는사용자가그내용을동일하게인식할수있도록추가적인정보를함께제공해야한다. 따라서이원리에따라제작된콘텐츠는특정감각을이용할수없거나특별한환경에서콘텐츠에접근하는사용자들도그정보를다양한방법 ( 예 : 보조공학이용 ) 으로인식할수있게된다. 또한동영상의오디오트랙, 음성이나사운드와같은멀티미디어콘텐츠는청각

31 장애인이그내용을인식하기어렵다. 따라서멀티미디어콘텐츠는그내용을인 식할수있도록자막, 원고, 화면해설과같은대체콘텐츠를제공해야한다. 시각을이용하여콘텐츠를인지하는사용자의경우도비슷한채도의사물이나 명도대비가낮은사물을구분하기어렵다. 그러므로콘텐츠를명료하게전달하기 위해서는명도대비와채도대비가뚜렷해야한다. o 관련지침 인식의용이성은사용자가장애유무등에관계없이웹사이트에서제공하는모 든콘텐츠를동등하게인식할수있도록제공하는것을의미한다. 인식의용이성 은대체텍스트, 멀티미디어대체수단, 명료성의 3 가지지침으로구성되어있다. < 표 5> 인식의용이성관련지침및검사항목 지침 (3 개 ) 검사항목 (6 개 ) 1.1( 대체텍스트 ) 텍스트아닌콘텐츠에는대체텍스트를제공해야한다. 1.2( 멀티미디어대체수단 ) 동영상, 음성등멀티미디어콘텐츠를이해할수있도록대체수단을제공해야한다 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나용도를이해할수있도록대체텍스트를제공해야한다 ( 자막제공 ) 멀티미디어콘텐츠에는자막, 원고또는수화를제공해야한다 ( 색에무관한콘텐츠인식 ) 콘텐츠는색에관 계없이인식될수있어야한다. 1.3( 명료성 ) 콘텐츠는명확하게전달되 어야한다 ( 명확한지시사항제공 ) 지시사항은모양, 크기, 위치, 방향, 색, 소리등에관계없이인식될수있어야한다 ( 텍스트콘텐츠의명도대비 ) 텍스트콘텐츠와배경간의명도대비는 4.5대 1 이상이어야한다 ( 배경음사용금지 ) 자동으로재생되는배경음 을사용하지않아야한다

32 검사항목 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐 츠는그의미나용도를이해할수있도록대체텍스트를제공 해야한다. o 개요 이미지등텍스트가아닌콘텐츠를이용할경우, 해당이미지가제공하는의미나용도를가급적동일하게인식할있도록적절한대체텍스트를제공해야한다. 텍스트로제공할수있는콘텐츠를이미지등텍스트아닌콘텐츠로제공하는것은바람직하지않은방법이므로지양해야한다. 또한대체텍스트는간단명료하게제공해야한다. o 적용기술 적용기술 1) 이미지등에대한대체텍스트제공 웹페이지에이미지를포함시키기위하여 img 태그를사용하는경우, alt 속성 을이용하여짧은대체텍스트를제공한다. 이미지에대한대체텍스트는이미지의시각적인특징보다는이미지가표현하 려는의미나기능에중점을두어야한다. 예를들어, 1988 서울올림픽웹사이트로연결되는이미지링크를제공할경우이이미지에대한대체텍스트를 "1988 서울올림픽 " 또는 "1988 서울올림픽에대해알아보기 " 등과같이제공한다. <img src="1988seoul_olympic.gif" alt="1988 서울올림픽 " 1) /> < 참고 > 적절한대체텍스트작성방법 1) 이하에서 은개선전소스와개선후소스의비교부분또는수정된부분을나 타냄

33 특정감각만을이용해서인식할수있는콘텐츠는해당감각이없는사용자들도인식할수있어야한다. 예를들어, 오디오파일은청각장애인이이용할수없다. 시각적이미지는시각장애인이인식할수없다. 따라서오디오파일이나이미지는각각청각장애인과시각장애인이인식할수있는대체수단을제공해야한다. 대체텍스트는대체수단의한가지방법이다. 텍스트아닌콘텐츠에대한대체텍스트의적절성을판단하기위해서는대체텍스트가다음질 문에대한답을제시하는가를살펴보아야한다. 1) 텍스트아닌콘텐츠를이곳에제공하는이유가무엇인가? 2) 텍스트아닌콘텐츠로제공하려는정보는무엇인가? 3) 텍스트아닌콘텐츠가의미하는내용이무엇인가? 4) 텍스트가아닌콘텐츠가제공하는기능이나정보를어떻게설명할것인가? 예를들어, 미술품 ' 모나리자 ' 의사진에대한대체텍스트로는 " 레오나르도다빈치작모나리자 " 가적절하다. 장한나가연주하는 ' 브람스첼로소나타 No. 1' 의 MP3 파일에대한대체텍스트 로는 " 장한나연주, 브람스첼로소나타 1 번 " 이적절하다. 위에열거한방법은 HTML 기반의콘텐츠뿐만아니라, 자바스크립트, 플래시, 실버라이트등과 같은리치인터넷애플리케이션 (Rich Internet Application: RIA) 을구성하는모든텍스트아닌 콘텐츠에도적용된다. 적용기술 2) 버튼이미지에대한대체텍스트제공 이미지를이용한입력버튼은 input 태그를사용하여구현할수있다. 이경우, 버튼에사용된이미지의대체텍스트는 alt 속성을이용하여제공한다. <form action=" method="post"> <input type="image" name="submit" src="button.gif" alt=" 확인 " /> </form> 적용기술 3) Java 애플릿등에대한대체텍스트제공 웹콘텐츠를이용하여 Java 애플릿등을제공하는방법은 applet 태그를사용 하는방법, embed 태그를사용하는방법, object 태그를사용하는방법이있다

34 applet 태그의사용 Java 애플릿을웹페이지에포함시켜제공하기위하여 applet 태그를사용하는 경우, alt 속성을이용하여애플릿에대한대체텍스트를제공할수있다. <applet code="tictactoe.class" width=120 height=120 alt="tic tac toe 게임 "> tic tac toe 게임 </applet> < 참고 > 1) applet 태그는 HTML 4.0 이후에는사용하지않도록권고하는방법임 2) 웹브라우저는 applet 태그내의대체텍스트를읽어주나웹브라우저에따라서 alt 속성을읽어주는경우도있으므로위의예와같이두곳에동일한대체텍스트를제공하는것이바람직함 3) 우리나라에서통용중인센스리더와 Jaws for Windows 는 applet 태그내의대체텍스트를읽어줌 embed 태그의사용 Java 애플릿을웹페이지에포함시켜제공하기위하여 embed 태그를사용하는 경우 alt 속성을이용하여대체텍스트를제공한다. <embed type="application/x-java-applet" code="tic.class" </embed> width=120 height=120 alt="tic tac toe 게임 "> 참고로, 대체텍스트가아니라 Java 애플릿에대한대체수단을제공하고자하 는경우 noembed 태그를사용하여대체수단을제공한다. <embed type="application/x-java-applet" code="tic.class" width=120 height=120 alt="tic tac toe 게임 "> <noembed> <a href="tac_tac_toc.htm">tic Tac Toe 게임 </a> </noembed> </embed>

35 noembed 태그는다음과같이 embed 태그밖에제공해도된다. <embed type="application/x-java-applet" code="tic.class" width=120 height=120 alt="tic tac toe 게임 "> </embed> <noembed> <a href="tic_tac_toc.htm">tic Tac Toe 게임 </a> </noembed> < 참고 > 1) embed 태그는광범위하게사용되나 HTML 4.01 표준에정의되지않은요소임. 최근에제안된 HTML5에는표준에포함되었음 2) 우리나라에서통용중인화면낭독프로그램은 embed에대한대체텍스트를지원하지못하므로 embed 태그를사용하기위해서는화면낭독프로그램 (screen reader) 의지원여부를먼저확인해야함 object 태그의사용 object 태그를이용하여웹페이지에표시하는 java 애플릿은 title 속성을이용 해서도대체텍스트를제공할수있다. title 태그대신 object 태그내에대체텍 스트를포함시킬수도있다. <object type="application/x-java-applet" data="tic.class" width=120 height=120 title="tic tac toe 게임 "> <param name="code" value="tic.class"> tic tac toe 게임 </object> 대체수단을제공할경우 object 태그를중첩하여구현할수있다. 예를들어, java 애플릿을제공하지못하는경우이미지 (tic_tac_toc.gif) 를제공하는방법은 다음과같다. <object type="application/x-java-applet" data="tic.class" width=120 height=120 title="tic tac toe 게임 "> <param name="code" value="tic.class"> <object data="tic_tac_toc.gif" type="image/gif">

36 </object> Tic Tac Toc 게임 </object> < 참고 > 1) 웹브라우저에따라 object 태그의 title 속성을읽어주지못하고 object 태그내의대체텍스트를읽어주므로두곳에모두제공하는것이좋음 2) 우리나라에서통용중인센스리더와 Jaws for Windows는 object 태그내에제공한대체텍스트만을읽어줌 적용기술 4) 이미지맵에대한대체텍스트제공 이미지맵 (image map) 은이미지를여러개의선택가능한영역으로구분하고각영역을링크로연결한콘텐츠이다. 이경우, 선택가능한영역은 area 태그로구현한다. 이때 area 태그별로 alt 속성을이용하여해당영역의용도나목적을대체텍스트로제공한다. 다음의예는이미지를두개의영역으로나누고, 각영역에각각 "ENGLISH" 와 "KOREAN" 이라는대체텍스트를제공하도록구현한경우다. 여기에서전체이미 지 (language.gif) 에대해서도대체텍스트 ("language") 를제공하고있다. <language.gif> <img src="languge.gif" alt="language" usemap="#language"> <map name="language"> <area alt="english" shape="rect" coords="10,5,66,19" href="/en/"> <area alt="korean" shape="rect" coords="10,17,66,32" href="/ko/"> </map> 적용기술 5) 텍스트이미지, 그래픽문자등에대한대체텍스트제공 한글이나영문자를형상화한로고등과같은텍스트이미지는해당이미지에 포함된단어또는문장을대체텍스트로제공한다. 텍스트이미지에대한대체텍

37 스트는이미지에표시된텍스트에서불필요한기호를제거하거나문장을가다듬 어제공하는것을허용한다. ACSII 심벌기호를이용하여얼굴형상을표현하거나한글자음또는모 음을나열하여감정을표현하는문자이모티콘 (emoticon) 은다음세가지 방법중에서선택하여사용한다. 1) 이모티콘텍스트를병기 (^(oo)^) ( 웃는돼지 ) 2) 이미지로표현하고대체텍스트를제공 <img src="smile_pig.gif" alt=" 웃는돼지 "/> 3) abbr 태그의사용 <abbr title=" 웃는돼지 ">(^(oo)^)</abbr> < 참고 > 1) 우리나라에서통용중인화면낭독프로그램인센스리더는 ' 툴팁읽기 ' 를설정해야 abbr 태그의 title 속성을읽어줌 2) 웹브라우저나보조기술에따라서 abbr 태그에대한지원이불가능한경우도있다. 따라서위의예에서 1) 과 2) 의사용을권장함 한 / 영문자모를이용하여구성한 ASCII 아트의경우이를건너뛸수있는링 크를제공한다. < 참고 > ASCII 아트 (art) 란문자또는특수기호등의글자체나글자간격을조합하여작성한그림으로 SMS 와같은문자통신시에주로이용됨 ASCII 아트예 : ASCII art of Merry Christmas <a href="#skipmerrychristmas"> 이모티콘건너뛰기 </a> <pre> MERRY CHRISTMAS _Π / / \ 田田 門 Merry Christmas and a Happy New Year </pre> <div id="skipmerrychristmas"></div>

38 적용기술 6) 플래시콘텐츠의대체텍스트제공 플래시 (Flash) 를이용한콘텐츠구현시콘텐츠에대한대체텍스트는액세스가능성 (Accessibility) 패널의 ' 객체를액세스가능하게만들기 (Make object accessible)' 항목을체크하고, ' 이름 (N)' 항목에대체텍스트를제공한다. 설명 (D) 항목은보다자세한설명문을제공하는경우에사용한다. 다음의예는달이지구를공전하는플래시애니메이션으로액세스가능성 패널의이름항목을이용하여대체텍스트를제공하고있다. 플래시는스크립트언어를이용한코딩시대체텍스트를제공할수있다. 예를들어, ActionScript 2.0를이용하여프로그램을개발하는경우무비클립 (MovieClip) 에대한 _accprops 객체의속성을설정해야한다. // ActionScript 2.0 Example // Let 'samplemovieclip' is a MovieClip instance placed on the movie's main timeline _root.samplemovieclip._accprops = new Object(); _root.samplemovieclip._accprops.name = " 지구를공전하는달 "; 마찬가지로, ActionScript 3.0 을이용하여프로그램을개발하는경우무비클 립에대한 accessibilityproperties 객체의속성을설정한다. // ActionScript 3.0 Example // Let 'samplemovieclip' is a MovieClip instance placed on the movie's main timeline samplemovieclip.accessibilityproperties = new AccessibilityProperties(); samplemovieclip.accessibilityproperties.name = " 지구를공전하는달 ";

39 < 참고 > 플래시, 실버라이트콘텐츠의대체텍스트평가방법 플래시, 실버라이트등의웹애플리케이션을구성하고있는사용자인터페이스자동화요소들 의대체텍스트는 UIA Verify 와같은평가도구를이용하여확인할수있다. 이들평가도구는웹애플리케이션뿐만아니라웹콘텐츠를구성하는사용자인터페이스요소 에대한레이블, 단축키니모닉, 도움말, 해당요소에할당된값등을알려준다. 적용기술 7) 실버라이트콘텐츠의대체텍스트제공 실버라이트 (Silverlight) 에서텍스트아닌콘텐츠에대한대체텍스트는 AutomationProperties.Name 속성또는 AutomationProperties.LabeledBy 속성을이용하여제공한다. 콘텐츠또는컨트롤에대한설명문이나도움말은 AutomationProperties.HelpText 속성을이용하여제공한다. AutomationProperties.Name 속성이용방법 AutomationProperties.Name 속성은주로사용자인터페이스자동화클라이언 트에서선택할수있는자동화속성으로대체텍스트를제공하는데사용된다. 다음예는상품이미지 (smt_case_12.png) 에대한대체텍스트를제공하는코 드이다. <Image Source="smt_case_12.png"

40 AutomationProperties.Name=" 스마트폰케이스 "/> AutomationProperties.LabeledBy 속성이용방법 AutomationProperties.LabeledBy 속성은다른사용자인터페이스요소에서 정의된텍스트를바인딩을통하여대체텍스트로제공할경우에사용하며그역 할은 AutomationProperties.Name 과동일하다. 다음예는텍스트입력상자의대체텍스트 ( 레이블 ) 를 " 실버라이트설명 " 이라고 제공하는코드이다. <TextBlock x:name="silverlightlabels"> 실버라이트설명 </TextBlock> <TextBox x:name="silverlightone" Width="25" AutomationProperties.LabeledBy="{Binding ElementName=SilverlightLabels}"/> 적용기술 8) 그래프등에대한설명문제공 그래프나사진과같이그의미하는바를간단한대체텍스트로충분한설명이 불가능할경우추가적인설명을제공해야한다. 자세한설명을제공하는텍스트 아닌콘텐츠의경우도대체텍스트를제공해야한다. 설명을제공하는방법은다음과같은네가지방법이있다. longdesc 속성제공 텍스트아닌콘텐츠 (chart.gif) 에대한자세한설명을 longdesc 속성을이용하 여제공할수있다. 다음의예는 longdesc 속성을이용하여복잡한그래프에대 한설명을제공하는웹페이지 (dest_chart.html) 로이동하도록구현한경우다. <p><img src="chart.gif" alt=" 중앙기관웹접근성조사결과 " longdesc="dest_chart.html"/> </p> 설명문제공 텍스트아닌콘텐츠의내용에관한자세한설명을해당콘텐츠의전후에제공

41 함으로써콘텐츠에대한추가적인설명을제공하는것이다. 이방법은 longdesc 속성의경우와같이설명페이지로이동하는불편함을해결할수있다. 다음의예는이미지 (chart.gif) 에이어서이미지에대한자세한설명을함께제 공하는구현방법이다. <p><img src="chart.gif" alt=" 중앙기관웹접근성조사결과 "/></p> <P>2008년도중앙기관의웹접근성조사결과에따르면 <p> 이미지링크제공 텍스트아닌콘텐츠또는그주변에설명문으로이동하는링크를제공하는방 법이다. 이방법은설명문으로이동하는링크의위치와모양을다양하게제공할 수있는장점이있다. 다음의예는이미지에링크를걸어설명문으로이동하도록구현한것이다. <p> <a href="chartdesc.html"> <img src="chart.gif" alt=" 중앙기관웹접근성조사결과 "/> </a> </p> 링크버튼제공 이미지옆에링크버튼을제공하고, 이버튼을클릭하면같은페이지의해당이미지에대한추가적인설명을제공하는영역으로이동하도록구현할수있다. 이경우버튼레이블은 ' 그래프설명문 ' 또는 ' 그래프설명문으로이동 ' 등이가능하다. 여기에링크버튼제공예시제시필요!!! 적용기술 9) 생방송콘텐츠에대한대체텍스트제공

42 실시간오디오와실시간동영상콘텐츠에대한대체텍스트는콘텐츠의내용이시시각각으로변화한다. 이경우, 대체텍스트를콘텐츠의내용변화에따라동적으로제공하는것은매우어려운일이다. 따라서실시간오디오또는동영상콘텐츠의대체텍스트로는해당콘텐츠의용도를알려주는것으로도충분하다. 다음은그일례이다. 한국도로공사가제공하는경부고속도로서울방향서초나들목에설치된 CCTV 실시간영상의링크에대한대체텍스트를 " 경부선서울방향서초나들목실시간영상 " 이라고제공한다. 인터넷을통하여중계되는생방송 KBS FM 라디오콘텐츠로이동하는이미지링크의대체텍스트를 "KBS FM 라디오생방송 " 이라고제공한다. 적용기술 10) CAPTCHA 에대한대체텍스트제공 < 참고 > CAPTCHA 예를들어, 다음그림과같이의도적으로글자모양을비틀어만든이미지에대하여컴퓨터는그내용의정확한판단이불가능하나인간은그내용을파악할수있다. 이러한방법으로사용자가컴퓨터인지인간인지를구별하기위해사용하는방법을 CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart) 라고한다. CAPTCHA에는다음그림과같은시각적인방법이일반적이나오디오로제공되는청각적인방법도있다. CAPTCHA는사용목적상그내용을대체텍스트로제공한다면 CAPTCHA가의도하는본래목적을달성할수없다. 따라서 CAPTCHA에대한대체텍스트는그용도를알려주는것으로충분하다. 다음은 CAPTCHA에대한대체텍스트의예다. 텍스트로제공되는 CAPTCHA 에대한대체텍스트로는 " 숫자이미지용 CAPTCHA" 가적절하다. 오디오로제공되는 CAPTCHA 에대한대체텍스트로는 " 오디오

43 CAPTCHA" 등이적절하다. CAPTCHA를제공하는웹콘텐츠는반드시대체수단을제공해야한다. CAPTCHA에대한대체수단을제공하는방법은다음과같다. < 참고 > CAPTCHA의대체수단 1) 두가지이상의감각, 예를들어시각적 CAPTCHA와청각적 CAPTCHA를동시에제공 2) 사용자에게문제를텍스트콘텐츠로제시하고문제에대한답을입력하도록하는문제풀이방식의 CAPTCHA 제공 3) 상담원을이용하여 CAPTCHA가제공하는역할을대신할수있는서비스제공 4) 기타 CAPTCHA의이용을우회할수있는방법제공 보다다양한방법은 W3C WAI에서제공하는 Inaccessibility of CAPTCHA ( 을참고하기바람 적용기술 11) 온라인시험등에대한대체텍스트제공 검사 ( 색맹검사, 청각검사, 시력검사등 ) 또는시험 ( 듣기평가예문, 단어받아쓰기등 ) 을위하여제공되는텍스트아닌콘텐츠는검사의결과또는시험의정답을유추할수있는내용을대체텍스트로제공할수없다. 따라서이들콘텐츠에대한대체텍스트는콘텐츠의간략한용도를알려주는대체텍스트를제공해야한다. 다음은올바른사례들이다. 색맹검사용콘텐츠에대하여 " 색맹검사용이미지 1" 등과같이대체텍스트를제공한다. 토플 (TOEFL) 듣기평가용예제의오디오콘텐츠에대하여 " 토플문항 5번용오디오 " 등과같이대체텍스트를제공한다. 시력검사용이미지에대하여 " 시력검사용이미지 " 등과같이대체텍스트를제공한다. 적용기술 12) 대체텍스트를빈공간 (alt="") 이나생략해서제공해야하 는경우

44 이미지에는반드시대체텍스트를제공해야한다. 다만, 이미지에대체텍스트 를제공함으로써사용자에게혼란을주는경우대체텍스트를빈공간 (alt="") 으 로제공해야한다. 대체텍스트를빈공간으로제공하는경우는다음과같다. 장식용으로사용하는이미지등 텍스트설명이함께제공되는이미지또는의미가없는글머리표등과같은이미지에는대체텍스트를빈공간으로제공해야한다. 이미지에대한대체텍스트의 alt 속성을빈문자열 (alt="") 로설정한다. 여기서 alt 속성을빈문자열로제공한다는것은 alt 속성을제공하되그값을 null로제공한다는의미이다. 다음의예는이미지글머리표의대체텍스트를빈문자열로제공하는경우다.... <p><img src="blit.gif" alt=""/> 화면낭독프로그램 </p> <p><img src="blit.gif" alt=""/> 화면확대프로그램 </p>... < 참고 > title 속성과 alt 속성을모두제공하면일부화면낭독프로그램은두속성을모두읽어주어혼란을줄수있다. 따라서대체텍스트는반드시 alt 속성으로제공하며, alt 속성을제공하지않는태그의경우에만 title 속성으로제공한다. 배경이미지 배경이미지는정보제공의목적보다는시각적인장식효과를내기위하여사 용되는이미지이다. 따라서배경이미지에대한대체텍스트는보조기술이무시하 도록제공되어야한다. CSS 를이용하여배경이미지를제공하면대체텍스트를보조기술로전달하지 않는다. 다음 CSS 코드는웹페이지의배경이미지를지정하는예다.... <style type="text/css"> body { background: #ffe url('/images/home-bg.jpg') repeat; } </style>

45 </head> <body>... 플래시콘텐츠 플래시콘텐츠를구성하는무비클립또는버튼등에대체텍스트를제공함으로써사용자에게혼란을주게될경우대체텍스트를제공하지않아야한다. 장식용으로사용되는무비클립또는텍스트설명이함께제공되는무비클립등이여기에해당된다. 어떤무비클립에대한대체텍스트를제공하지않기위해서는액세스가능성 (Accessibility) 패널을열고, 무비클립을선택한후에액세스가능성패널의 ' 객체를액세스가능하게만들기 (Make object accessible)' 항목을체크해제 (uncheck) 한다. 이항목을체크해제하면이무비클립의이름 (N) 항목이나설명 (D) 항목에대체텍스트나설명문을제공하더라도보조기술은이무비클립에대한대체텍스트를무시하게된다. 플래시콘텐츠를 ActionScript 2.0으로개발하는경우무비클립 (movieclip) 에대한 _accprops 객체의 silent 속성을 true 로설정해야한다. // ActionScript 2.0 Example // 'decorative_mc' is an instance placed on the movie's main timeline _root.decorative_mc._accprops = new Object(); _root.decorative_mc._accprops.silent = true; ActionScript 3.0으로개발하는경우무비클립에대한 accessibilityproperties 객체의 silent 속성을 true 로설정한다. // ActionScript 3.0 Example // 'decorative_mc' is an instance placed on the movie's main timeline decorative_mc.accessibilityproperties = new AccessibilityProperties(); decorative_mc.accessibilityproperties.silent = true; 실버라이트콘텐츠 실버라이트콘텐츠를구성하는콘텐츠에대체텍스트를제공함으로써사용자에 게혼란을주게될경우대체텍스트를제공하지않아야한다. 장식용으로사용되

46 는배경이미지, 글머리표등이여기에해당된다. 대체텍스트를제공하지않아야하는실버라이트객체는 Automation Properties 클래스를이용한 Name 속성및 LabeledBy 속성등을제공하지않는다. o 잘못된사례및개선방법잘못된사례 1) 의미나기능이있는텍스트아닌콘텐츠에빈문자열을대체텍스트로제공 대체텍스트는텍스트가아닌콘텐츠가제공하는기능이나정보를동등하게전달할수있도록제공해야한다. 예를들어, 어떤이미지에대한대체텍스트로이미지파일명인 "image.jpg" 등과같이제공하거나 " 이미지 1", " 이미지 2" 등과같이이미지에대한일련번호를제공하거나그냥 " 이미지 " 라고하는것은부적절하다. 다음의예는의미를지닌세개의이미지에무의미한대체텍스트를제공 (alt="") 하여보조기술이이미지와동등한정보를인식할수없는경우다. <ol> <li><img src="text1.gif" alt=""/></li> <li><img src="text2.gif" alt=""/></li> <li><img src="text3.gif" alt=""/></li> </ol> 개선방법 이를해결하기위해서는 alt 속성을이용하여각각의이미지에적절한대체텍 스트를제공하며, ol(ordered list) 방식으로구현해야한다

47 < 개선사례 1> <ol> <li><img src="text1.gif" alt="1. 보다효율적이고편리한맞춤형 One-Stop 서비스조회 "/></li> <li><img src="text2.gif" alt="2. 대상별생애별욕구정보를통한주민서비스안내 "/></li> <li><img src="text3.gif" alt="3. 공공및민간시설 / 단체의서비스정보제공 "/></li> </ol>

48 잘못된사례 2) 복잡한정보를하나의이미지로표현하고간단한대체텍 스트만제공 다음예는기관의경영이념을표방하는정보를제목이미지와내용이미지로제작한경우다. 이예에서제목이미지는빈문자열의대체텍스트를제공하고있으며, 내용이미지는 " 이미지 " 라는부적절한대체텍스트를제공하여그의미를제대로전달하지못하고있다. 개선방법 조직도, 경영이념등과같이많은정보를하나의이미지로구성하여정보를제공하는콘텐츠는설명문을제공해야한다. 또한이미지자체에대한적절한대체텍스트도제공해야한다. <img src="vision.gif" alt="oo 행정혁신비전과목표 " longdesc="vision_goal.html"/> 더바람직한방법은내용이미지를 ' 단계별혁신목표성과 ' 부분과 ' 추진 전략로드맵 ' 의두가지이미지로구분하고각각의이미지에대하여 alt 속성과 longdesc 속성을제공하는것이다

49 잘못된사례 3) 주기적으로변하는콘텐츠의대체텍스트를변경하지않는경우 텍스트아닌콘텐츠가갱신되는경우대체텍스트도동시에갱신되어야한다. 매출자료를토대로월매출실적을제공하도록웹애플리케이션을제공하는경우달이변경되었음에도불구하고월매출실적이변경되지않는대체텍스트는잘못된구현예다. 계절에따라소개페이지 (intro page) 의사진이주기적으로변경됨에도불구하고사진에대한대체텍스트가동시에변경되지않는다면잘못구현된예다. 몇개의상품소개이미지가 2초에한번씩주기적으로변화하도록플래시로구현한콘텐츠에서이미지가바뀔때마다대체텍스트가갱신되어야함에도불구하고플래시콘텐츠전체에대한대체텍스트를 " 상품보기 " 로제공한것은잘못구현한경우다. 개선방법 위에열거한잘못을개선하기위해서는플래시콘텐츠전체에대한대체텍스트를제공하지않고, 플래시콘텐츠를구성하고있는모든이미지를무비클립으로변환하며, 각무비클립별로액세스가능성패널의 ' 객체를액세스가능하게만들기 (Make object accessible)' 항목을체크 (check) 하고, 이름 (N) 항목에각이미지별로적절한대체텍스트를제공하면된다. 잘못된사례 4) 의미있는정보를배경이미지로제공 의미있는이미지를 CSS 만으로표현함으로써이미지가표현하려는중요한의미 나정보를사용자에게제공할수없도록구현하지않아야한다. ' 연이율 5.5%!' 라는텍스트이미지 (rate.png) 를배경이미지로구현하고은 행이제공하는금리를텍스트로제공하지않아정작중요한이자율을보조 기술사용자가인식할수없다

50 CSS 코드 : p#anual_interest { padding-left: 200px; background: transparent url(./rate.png) no-repeat top left; } HTML 코드 : <p id="anual_interest"> 당은행은가장높은금리를보장합니다! </p> 개선방법 이문제를해결하기위해서는이미지를배경이미지가아닌 img 태그를사용하 여구현하고 alt 속성을제공한다. <p><img id=""src="./rate.png" alt =" 연이율 5.5%!"/> </p> 당은행은가장높은금리를보장합니다! 다음사례는온라인음반매장에서 CD 타이틀별로 ' 신규입고 ', ' 재고없음 ', ' 구입가능 ' 등으로재고를구분하여목록을보여주는콘텐츠로재고여부를배경이미지로표현한경우다. 이경우타이틀의재고여부를보조기술사용자가인식할수없다. CSS 코드 : ul#cdlist li { padding-left: 20px; } ul#cdlist li.new { background: transparent url(new.png) no-repeat top left; } ul#cdlist li.instock { background: transparent url(instock.png) no-repeat top left; } ul#cdlist li.outstock { background: transparent url(outstock.png) no-repeat top left; }

51 HTML 코드 : <ul id="booklist"> <li class="new">cd Title #1</li> <li class="instock">cd Title #2</li>... <li class="outstock">cd Title #n</li> </ul> 개선방법 이문제를해결하기위해서는 ' 신규입고 ', ' 구입가능 ', ' 재고없음 ' 을의미하는세 가지이미지 (new.png, instock.png, outstock.png) 를 img 태그로표현하고 alt 속성을이용하여대체텍스트를제공한다. <ul id="booklist"> <li><img src="new.png" alt=" 신규입고 "/> CD Title #1</li> <li><img src="instock.png"/> alt=" 구입가능 "/> CD Title #2</li>... <li><img src="outstock.png" alt=" 재고없음 "/> CD Title #n</li> </ul> 잘못된사례 5) 빈칸이미지의대체텍스트가콘텐츠의인식을방해하는경우 보조기술사용자에게혼란을줄수있는대체텍스트를제공하는것은잘못된경우다. 다음사례는콘텐츠에빈칸이미지 (spacer.gif) 를삽입하여간격을조절하고있다. 화면낭독프로그램은이콘텐츠를 " 나무종류 : ' 빈칸 ' 상수리나무 " 라고읽어주므로빈칸이미지 (spacer.gif) 에대한대체텍스트가도리어콘텐츠의인식을방해하게된다. <div> 나무종류 : <img src="spacer.gif" width="100" height="1" alt=" 빈칸 "/> 상수리 나무 </div> 개선방법 이를방지하기위하여빈칸이미지에대한대체텍스트를빈문자열 (alt="") 로 설정한다

52 <div> 나무종류 : <img src="spacer.gif" width="100" height="1" alt=""/> 상수리 나무 </div> 잘못된사례 6) 지도와같은텍스트아닌콘텐츠에대한설명이불충분한경우 텍스트아닌콘텐츠에대한대체텍스트또는설명 (longdesc) 은이콘텐츠가 가진기능이나용도를잘이해할수있도록설명해야한다. 예를들어, 다음그림과같이지하철역주변의주요건물을소개하는지도에서 설명문이건물의이름또는상호만을제공하는것은충분하지않다. <map.gif> <img src="./map.gif" alt=" 등촌역주변 " /> <p> 등촌역근처주요건물 </p> 강서생복요리전문, 미래에셋, OO주유소 ( 로드뷰제공 )... 그린월드호텔, 북두칠성. 개선방법 지도의용도가지하철출구와건물들과의상관관계를나타내고있으므로이지 도에대한설명 (longdesc) 은지하철역의출구번호별로각건물까지의도달거 리, 접근방법등에대한내용을포함해야한다. <img src="./map.gif" alt=" 등촌역주변 " /> <p> 등촌역주변주요건물 </p> 1번출구 : 강서생복요리전문, 우측 30m 전방 ; 2번출구 : 미래에셋, 좌측 10m 전방 ; 북두칠성, 좌측 100m 전방 ; OO주유소 ( 로드뷰제공 ), 150m 전방... 8번출구 : 그린월드호텔, 정면 50m 전방. 잘못된사례 7) 중요한정보를색으로만제공하는경우 대체텍스트에는색, 위치, 모양등을묘사하는단어를사용하지않고그차이

53 를직접문장으로표시해야한다. 다음예는영업직원별연간매출액을표시한막대그래프이다. 이그래프에대해다음대체텍스트와같이문장중에색을표시하는경우색을인식할수없는사용자에게충분한정보를제공하지못한다. 즉, 다음그림에보인바와같이... 그래프에서빨간색막대는... 의문장에서시각장애인은그림중의빨간색막대와관련한정보를알수없다. 매출 달성미달액 매출 ( 억 ) 홍길동이철수최상규문성남 직원명 <img src="char.png" alt=" 영업직원의연간매출액그래프로, 홍길동매출 3.5억 ; 이철수매출 4.2억 ; 최상규매출 3.7억 ; 문성남매출 2.6억. 그래프에서빨간색막대는연간매출예정액과의차이를나타냄."/> <char.png> 개선방법 대체텍스트가색으로인한차이를구체적으로설명하도록수정할필요가있다. 매출 달성미달액 매출 ( 억 ) 홍길동이철수최상규문성남 직원명 <img src="char.png" alt=" 영업직원의연간매출액그래프로, 홍길동매출 3.5억 ; 이철수매출 4.2억 ; 최상규매출 3.7억 ; 문성남매출 2.6억. 문성남씨는연간매출예정액 (3억) 에서 0.4억이미달함."/> <char.png> 잘못된사례 8) alt 속성이아닌 title 속성을이용하여대체텍스트제공 이미지에대한대체텍스트를 alt 속성으로반드시제공해야한다. 다음예는 alt 속성대신 title 속성을이용하여대체텍스트를제공하고있다

54 <img src="logo.gif" title=" 한국정보화진흥원로고 "/> 개선방법 이미지에대한대체텍스트는반드시 alt 속성을이용하여제공해야한다. <img src="logo.gif" alt=" 한국정보화진흥원 " /> 잘못된사례 9) QR 코드에서 URL 을대체텍스트로알려주지않는경우 웹페이지의일부콘텐츠에편리하게접속할수있도록하기위하여제공되는 QR 코드, 바코드등의이미지에는 QR코드나바코드의용도를대체텍스트로제공해야한다. 예를들어, 어떤웹사이트로이동하기위한 QR코드의대체텍스트는접속할수있는웹사이트주소를대체텍스트로제공해야한다. 다음예는 QR 코드이미지에대한대체텍스트를제공하나접속할주소를알려 주지않은경우다. <QR_code.jpg> <h2>ddos 공격우수대응사례 </h2> <p>ddos 공격우수대응사례에대하여... <p> <img src="qr_code.jpg" alt="ddos 공격우수대응사례 QR 코드 "/> 개선방법 QR 코드이미지에저장된주소정보등을대체텍스트또는설명으로제공하거 나링크를제공하여 QR 코드가알려주는웹페이지로직접이동이가능하도록 한다. <h2>ddos 공격우수대응사례 </h2> <p>ddos 공격우수대응사례에대하여... <p> <img src="qr_code.jpg" alt="ddos 공격우수대응사례 QR 코드 "

55 longdesc="ddos_ html/>

56 검사항목 ( 자막제공 ) 멀티미디어콘텐츠에는자막, 원 고또는수화를제공해야한다. o 개요 멀티미디어콘텐츠를동등하게인식할수있도록제작하기위해서는자막, 원고 또는수화를제공해야한다. 대체수단에서가장중요한요소는멀티미디어콘텐 츠와동등한내용을제공하는것이다. 가장바람직한방법은닫힌자막 (Closed caption) 을오디오와동기화시켜 (Synchronized) 제공하는것이다. 대사없이영상 (Video) 만제공하는경우화면해설 ( 텍스트, 오디오, 원고 ) 을제공하고, 음성만제공하는경우자막, 원고또는수화를제공해야한다. 생방송콘텐츠의경우자막또는수화의제공을이검사항목의예외로인정한 다. 그러나생방송콘텐츠의경우에도자막또는수화를제공하는것이바람직하 다. 생방송콘텐츠의경우에도검사항목 1.1.1, 적용기술 9) 에의거한콘텐츠에대 한대체텍스트를반드시제공해야한다. o 적용기술 적용기술 13) 열린자막제공 청각장애인은시청각콘텐츠에포함된대화를청취할수없으므로이를시각정보로제공해야한다. 열린자막 (Open caption) 이란동영상의오디오트랙에포함된대화및중요한음향정보를텍스트자막으로표시하도록비디오트랙에포함시켜만드는것을말한다. 따라서열린자막을제공하는동영상은자막이항상화면에표시되므로특별한동영상플레이어를사용할필요가없다

57 적용기술 14) 닫힌자막제공 닫힌자막은사용자가필요에따라자막을화면에표시하지않거나표시하도록 제작하는방법이다. 닫힌자막의내용은동영상의대화와중요한음향정보를포 함해야한다. 닫힌자막은동영상과동기화되어야하며, 이를위해서는닫힌자막을제공할 수있는동영상플레이어를사용해야한다. 대화나음향효과가제공되지않는동영상은 ' 이동영상은음성을제공하지않음 ' 이라는메시지를닫힌자막방식을이용하여수시로제공할필요가있다. < 참고 > 자막제공방법 SMIL 1.0: SMIL 2.0: 플래시 : 실버라이트 : 적용기술 15) 대본또는원고제공 오디오를제공하는콘텐츠는포함하고있는대화또는음향정보를사용자가 접근할수있도록텍스트대본을제공한다. 대본은오디오내용과일치해야한다. 대본의양이많아상하스크롤이필요한경우동영상또는오디오와동기화되 어스크롤되는것이바람직하다. 대본을제공하는방법은다음중한가지방법을적용한다. < 참고 > 대본제공방법 l l 동영상콘텐츠바로옆에대본을텍스트로제공 동영상콘텐츠또는동영상콘텐츠주위에대본으로이동하는링크제공

58 적용기술 16) 수화제공 빠르게변화하는자막을인식하기어려운청각장애인을위하여동영상의자막을수화로통역하는영상을함께제공한다. 함께제공되는수화동영상과원래의동영상은서로다른영역에표시될수있다. < 참고 > 수화동영상의제공방법 SMIL 1.0: SMIL 2.0: 수화동영상을원래의동영상과같은비디오트랙에포함시켜제공하는경우 동영상의해상도가낮을경우수화를알아보기어려운문제가있으므로동영상의 해상도를적절히유지해야한다. 수화와함께자막을제공하는경우자막으로인하여수화가가리지않도록닫 힌자막으로구현하여사용자가자막을화면에서삭제할수있어야한다. 적용기술 17) 음성이없는동영상의대체수단제공 대화나독백, 설명등과같은음향정보가없는동영상은애니메이션, 동영상을통한텍스트나그래픽정보제공, 사람이나동물들의행동을묘사하는경우많이사용된다. 따라서이러한동영상은콘텐츠가이야기하고자하는바를시각장애인이인지하기위해서는동영상의내용을충실히묘사할수있는대체수단을제공해야한다. 1) 대체텍스트또는설명으로제공 동영상의내용을텍스트문서로작성하고이를대체텍스트또는설명문으로 제공한다. 여기에서중요한점은대체텍스트또는설명만으로도동영상이의도하 는바를사용자가충분히이해할수있도록정보를제공해야한다는점이다. 대체텍스트또는설명을제공하는방법은다음과같다. < 참고 > 대체텍스트또는설명제공방법

59 w w w w alt 속성으로제공 longdesc 속성으로제공동영상콘텐츠주위에설명문제공동영상콘텐츠또는동영상콘텐츠주위에설명문으로이동하는링크제공 2) 오디오해설제공 동영상의내용을설명해주는해설을오디오파일로제공하는방법이다. 이방 법은첫번째방법에서작성한텍스트문서를읽어주는경우로간주할수있다. 예를들어, 종이접기동영상에대한오디오해설은 " 첫째, 정사각형의종이를 준비한다. 두번째, 종이를반으로접어이등변삼각형을만든다. 세번째는이등 변삼각형의... ' 와같이단계별로접는방법을설명해야한다. 오디오해설은동영상의오디오트랙을이용하여제공한다. 만일동영상장면에대한오디오해설이장면의지속시간보다길어오디오해설이종료되기전에동영상의장면이바뀌는경우동영상의해당장면이바뀌기직전에동영상을일시정지시키고오디오해설이완료된다음동영상이계속이어지도록하는것이바람직하다. o 잘못된사례및개선방법 잘못된사례 10) 자막, 원고, 수화중어느한가지도제공하지않는경우 1) 대화나음향정보를제공하는다음멀티미디어콘텐츠는청각장애인이접근 할수없다

60 개선방법 이콘텐츠에는청각장애인이인식할수있도록자막, 원고또는수화중하나를 제공해야한다. 2) 다음예와같이우리나라자연의사계절아름다움을표현한동영상에서잔 잔한배경음악을함께제공하는콘텐츠는시각장애인이인식할수없다. 개선방법 시각장애인이접근할수있도록영상의변화를화면해설방식으로제공할필 요가있다. 만일화면에텍스트를제공한다면화면해설과함께텍스트를읽어주 어야한다. 잘못된사례 11) 동영상의내용을요약하여제공하는자막또는원고의경우 자막, 대본등을제공하는동영상콘텐츠의경우자막또는대본이동영상의 모든내용을포함해야한다. 다음과같은동영상콘텐츠는잘못된사례에속한다. 동영상의대화를요약하여제공 내용이해에필수적인음향정보누락 동영상의일부대화에대한대본생략 다음은요약정보를제공하는경우이므로잘못된사례이다

61 개선방법 멀티미디어콘텐츠의자막, 대본또는수화는요약정보를제공하지않고동영 상의대화, 중요한음향정보를충실히제공해야한다. 잘못된사례 12) 대체수단에대한또다른대체수단임을알려주지않는경우 사용자는멀티미디어콘텐츠가제공되는경우항상대본등의대체수단을함께제공할것으로예측한다. 그런데멀티미디어콘텐츠가텍스트콘텐츠또는여타의콘텐츠에대한대체수단으로제공되는경우대본을중복해서제공할필요가없다. 이경우, 멀티미디어콘텐츠가대체수단임을명시해야한다. 예를들어, 종이접기절차를텍스트로제공하는웹페이지의한부분에종이접기절차를시연하는동영상또는오디오콘텐츠를제공하는경우이콘텐츠에대본이나긴설명문등을제공하기보다는 " 종이접기에대한대체수단 " 이라는대체텍스트를제공하는것으로충분하다. 멀티미디어콘텐츠주변에종이접기본문으로이동하는링크를함께제공하는 것도바람직하다

62 잘못된사례 13) 열린자막이수화를가리는동영상 수화와자막을제공하는동영상콘텐츠에서자막으로인하여수화를가리는콘 텐츠는수화를인식할수없게하므로바람직하지않다. 개선방법 이를개선하기위해서는수화와자막을동시에제공할때다음과같이대체수 단을제공해야한다. 수화와자막중에서최소한한가지대체수단을닫힌방법으로제공하여 사용자가대체수단을선택할수있도록함 수화와자막을동시에제공하는경우수화를전면에나타나게함 잘못된사례 14) 동영상의해상도가낮아수화를볼수없는경우 웹페이지를통하여제공하는동영상콘텐츠에수화를제공하는경우동영상을 확대하지않으면수화를인지하기어렵다. 1) 동영상의해상도가낮으면화면을확대하더라도수화를인식하기어렵다. 개선방법 이를개선하기위해서는수화를제공하는동영상은확대를하더라도수화를인 식할수있도록충분한해상도의동영상을제공해야한다. 2) 수화통역사와배경간의명도대비가작은콘텐츠는청각장애인이인식하기 어렵다. 개선방법 수화통역사의손과얼굴과배경간의명도대비는 3:1 이상이어야한다. 수화동 영상의명도대비에관한검사는검사항목 1.3.3( 텍스트콘텐츠의명도대비 ) 을 만족해야한다

63 검사항목 ( 색에무관한콘텐츠인식 ) 콘텐츠는색에관 계없이인식될수있어야한다. o 개요 콘텐츠에서제공하는모든정보는색을배제하여도특정한색을구별할수없 는사용자나흑백디스플레이사용자, 흑백인쇄물을보는사용자가해당콘텐츠 를인식할수있도록제공해야한다. o 적용기술 적용기술 18) 색을보완하는텍스트제공 색을이용하여서식의용도를나타내는경우와같이정보를제공하는수단으로 색을사용한다면보완방법을함께제공하여색의의미를전달할수있어야한다. 가장쉬운방법은색의의미를텍스트로제공하는것이다. 다음예와같이예약이마감되었음을 ' 완 ' 이라는글자를병기하고색으로표 시한다

64 입력서식에서필수입력항목임을알려주기위하여해당항목의레이블에 '*' 표시를추가하고색으로강조하는것도좋은방법이다. <label for="name" class="required"> * 이름 : </label> <input id="name" type="text" size="25" value=""/> <style type="text/css">.required { color=red; } </style> 입력서식에서필수입력항목임을알려주기위하여해당항목의레이블에 ' ( 필수 )' 표시를추가하고색으로강조할수도있다. <label for="name" class="required"> 이름 ( 필수 ): </label> <input id="name" type="text" size="25" value=""/> <style type="text/css">.required { color=red; } </style> 이미지와대체텍스트를사용하는것도가능하다. 예를들어, 온라인쇼핑몰에서새로입고된상품임을알려주기위하여상품주위에신규상품임을알려주는이미지를함께제공한다. 물론이이미지에대해서는 new 라는대체텍스트를제공해야한다. 적용기술 19) 색을보완하기위하여글자모양을이용하는방법

65 색을구분할수없거나약시사용자를위하여텍스트의표시방법을달리하는방법을사용할수있다. 글자모양을이용한방법으로는다른글꼴의사용, 밑줄 (underline) 표시, 굵은글씨체또는이탤릭체, 글자크기의변경, 명도대비차이를이용한방법등이있다. 대표적인방법은다음과같다. 링크텍스트를색을이용할뿐만아니라밑줄표시를하거나이탤릭체로표시온라인쇼핑몰에서새로입고된상품임을알려주기위하여색과함께상품명을크고굵은글씨체로표시텍스트콘텐츠의일부를링크텍스트로이용하는경우링크텍스트의색을밝은파란색 (#3366CC) 으로표시하고나머지텍스트를검정색 (#000000) 으로표시하면색을구분하지못하는경우도링크텍스트와나머지텍스트간의명도대비를이용하여링크임을알려줄수있음 적용기술 20) 색을보완하기위하여무늬또는모양을이용하는방법 색을구분할수없거나약시사용자를위하여무늬또는모양을이용하여콘텐 츠를표시한다. 1) 무늬사용 지역별아파트매매가변동률을막대그래프로표시할때주별막대를무늬를 이용하여표시할경우범례도무늬를이용하여표시한다

66 2) 형상이용어떤지역의전세값과매매값변동추이를꺾은선그래프로나타낼때전세값과매매값의월별변동추이를각각다른모양 ( 다이아몬드, 네모 ) 으로표시하여그래프를구분할수있도록한다. 3) 점선과실선사용어떤프로세스를완성하기위하여반복적인단계를알려주는플로차트에서조건에따른처리과정을빨간점선의화살표와파란실선의화살표로구분하여표시한다. 점선과실선을이용한사례예시제시할것!!! o 잘못된사례및개선방법 잘못된사례 15) CSS 로인하여링크임이구분되지않는경우 다음예와같이 CSS를이용하여링크텍스트의밑줄을사라지게하는경우는잘못된것이다. <head> <style type="text/css"> p a:link {text-decoration: none} p a:visited {text-decoration: none} p a:active {text-decoration: none} p a:hover {text-decoration: underline; color: red;}

67 </style> </head> <body>... <p> 웹접근성에서 <a href="./criteria.html/#criteria_1_3_1"> 색에관한검사항목 </a> 에관한잘못된사례및개선방법은다음과같다. </p>... </body> 개선방법 이를해결하려면위 CSS 코드에서 link 의표시방법을다음과같이수정해야 한다. 이때링크텍스트는파란색으로표시되며, 밑줄이표시된다. p a:link {text-decoration: underline; color: blue;} 잘못된사례 16) 색으로만필수입력항목을표시한경우 사용자서식의필수항목을색과함께시각적인추가수단을제공해야한다. 예 를들어, 다음의회원가입서식에서필수항목을꽃분홍색으로표시하고필수항 목임을알려주는것은잘못된경우다

68 개선방법 색을배제하고서라도구분할수있도록, 다음그림과같이 '*' 등을색과함께 제공하여색이외의방법으로도구분할수있도록제공해야한다. 잘못된사례 17) 오류메시지를색으로만구분하도록한경우 오류가발생한서식부위를색으로만표시하면시각장애인이나색을구분할수 없는사용자는오류가발생한서식의위치를인식할수없다. 예를들어, 온라인서식을작성하여제출할때어떤항목을채우지않아오류가 발생하였을경우오류가발생한서식의레이블을빨간색으로만표시하는것은잘 못된것이다. 개선방법 이를개선하기위해서는오류가발생한서식의레이블을빨간색굵은글꼴로표현하거나밑줄을이용하여표시하는등색이외의추가적인인지수단을제공해야한다. 이외에도다음그림과같이오류메시지에테두리를제공하는것도좋은방법이다

69 잘못된사례 18) 그래프를색으로만인식하도록하는경우 년도에따른통신서비스별가입자수추이를나타낸왼쪽의잘못된사례에해 당하는색을이용하여통신서비스를구분하고있어색을구분할수없는사용자 는인식할수없다. 개선방법 이를개선하려면색이외에추가적인인지수단을제공해야한다. 다음그림에서 오른쪽의개선사례는통신서비스별로가입자수의변화와범례를다른형상으로 표시한것이다. < 잘못된사례 > < 개선사례 >

70 잘못된사례 19) 일정구분을색으로만구분하도록한경우 다음그림의왼쪽에보인잘못된사례는월별예약현황을분홍색과하늘색으로 표시한경우다. 색을구분할수없는사용자는예약가능또는예약마감여부를 알수없다. 개선방법 이를개선하려면색을배제하고서라도내용을구분할수있도록무늬를이용하여구분할수있도록한다. 오른쪽그림의개선사례는예약가능과예약마감을무늬를이용하여구분한경우로, 색을구분하지못하는사용자도예약현황을구분할수있다. < 잘못된사례 > < 개선사례 >

71 검사항목 ( 명확한지시사항제공 ) 지시사항은모양, 크기, 위치, 방향, 색, 소리등에관계없이인식될수있어야한다. o 개요 본검사항목은특정요소를가리키거나지시사항을전달하는콘텐츠에한정해적용하는것으로, 시각이나청각등과같은특정감각에만의존하여제공해서는안된다는것이다. 즉, 다른감각을통해서도지시사항을인식하는데문제가없도록제공해야한다. 본검사항목은화면에표시되는텍스트콘텐츠와대체텍스트가제공된텍스트아닌콘텐츠의경우보조기술을통해다른감각으로의전환이가능하기때문에화면에표시되는텍스트를음성으로다시출력해주는것을의미하지는않는다. o 적용기술 적용기술 21) 시각정보를이용한지시문의보완 시각적인지시나위치를사용하면시각장애인이나화면의일부를확대하여사용하는약시자는지시하는콘텐츠를찾아내기어렵다. 또한페이지레이아웃은폰트나브라우저의크기변경등으로달라질수있어콘텐츠의상대적인위치도변경될수있으므로주의해야한다. 색, 크기, 모양또는위치를이용하여어떤컨트롤이나콘텐츠를지시하는경우 시각장애인이인식할수있도록대체수단을제공해야한다. 다음경우는그일례 이다. 웹페이지에둥근모양의빨간색버튼과초록색버튼을제공하고각버튼의레이블을각각 ' 확인 ' 과 ' 취소 ' 로구성한콘텐츠에서 " 작성한서식을제출하려면빨간색확인버튼을누르시오." 라는지시문이지정하는버튼을시각장애인도사용할수있다. 웹페이지에두개의크기가다른둥근모양버튼을제공하고각버튼의레이블을 ' 확인 ' 과 ' 취소 ' 로제공하는콘텐츠에서 " 작성한서식을제출하려면

72 큰확인버튼을누르시오." 라는지시문이지정하는버튼을시각장애인도사 용할수있다. 웹페이지에둥근모양, 네모모양및오각형모양의버튼을제공할경우버튼별로텍스트레이블을제공하면모양과텍스트레이블을이용하여지시하는버튼을인식할수있다. 예를들어, " 작성한서식을제출하려면둥근색의확인버튼을누르시오." 라고하면시각장애인도지시하는버튼을확인하여사용할수있다. 웹페이지에서방향을이용하여콘텐츠를지시하는경우도방향과함께콘텐츠의레이블을함께제시하면지시하는콘텐츠를쉽게인식할수있다. 예를들어, " 오른쪽상단의 ' 요약보기 ' 를클릭하시오." 라는지시문이지시하는콘텐츠를시각장애인도사용할수있다. 더좋은방법은그냥 "' 요약보기 ' 를클릭하시오." 라고하는것이다. 적용기술 22) 청각정보를이용한지시문의보완 청각정보를이용하여지시문을제공하는웹콘텐츠는청각정보를인식할수 없는사용자를위한대체수단을제공해야한다. 예를들어, 온라인시험을제공하는웹페이지에서제한시간이종료되기 1분전임을알려주기위한방법으로 ' 시험종료 1분전 ' 이라는음성을들려주는콘텐츠는 ' 시험종료 1분전 ' 이라는메시지를화면에출력하도록하면청각장애인도그내용을보고상황을인식할수있게된다. 더좋은방법은 ' 시험종료 1분전 ' 이라는메시지를화면에출력함과동시에화면을몇차례깜빡이도록하는 ' 소리탐지 (Sound Alert)' 기능을활성화시키면청각장애인도경고음을시각적으로인지할수있다. < 참고 > 소리탐지 (Sound Alert) 컴퓨터가주의또는경고를위한음향효과를제공하는대신화면을깜빡임으로시각적으로주의또는경고할수있는방법을소리탐지 (Sound Alert) 라고하며, 대부분의운영체제가이기능을제공함

73 o 잘못된사례및개선방법 잘못된사례 20) 방향, 위치정보만을이용하여사용법을알려주도록구현한경우 시각적인위치나방향을이용하도록지시하는내용이포함된콘텐츠는페이지 레이아웃의변화가예상되는경우또는화면의레이아웃을시각적으로인식하기 어려운사용자가사용하기어렵다. 따라서다음사례는잘못된경우들이다. 1) 웹페이지의내비게이션방법을다음페이지로이동하려면오른쪽버튼, 이 전페이지로이동하려면왼쪽버튼을누르시오 " 와같이제공하는것은시각 장애인이사용할수없으므로잘못된콘텐츠이다. 개선방법 이를개선하기위하여지시문을 " 다음페이지로이동하려면 ' 다음 ' 버튼, 이전페이지로이동하려면 ' 이전 ' 버튼을누르시오 " 와같이수정해야한다. < 참고 > 컨트롤이나입력서식등을웹페이지내의상대적인위치를이용하여지시하는경우실제웹콘텐츠의위치와웹페이지표현위치가다르면혼란을줄수있으므로주의해야함 2) 다음코드는 ' 미리보기 ' 버튼이화면상의오른쪽하단에표시하고위치와버튼레이블을이용하여버튼을선택하도록지시하는콘텐츠이다. 이경우, 시각장애인은콘텐츠를선형화하여읽을수있으므로 ' 오른쪽하단 ' 의의미가불분명하다. 따라서위치에대한정보를이용하기보다그냥해당버튼의레이블을이용하여지시하는것이좋다. 개선전 : <table> <tbody> <tr> <td colspan="2"> 오른쪽하단의 [ 미리보기 ] 버튼을누르시오.</td> <td> <span style="background: ButtonFace; color: ButtonText; border: medium outset ButtonShadow;

74 width: 5em; display: block; font-weight: bold; text-align: center;"> 인쇄 </span> </td> </tr> <tr> <td> <span style="background: ButtonFace; color: ButtonText; border: medium outset ButtonShadow; width: 5em; display: block; font-weight: bold; text-align: center;"> 취소 </span> </td> <td> <span style="background: ButtonFace; color: ButtonText; border: medium outset ButtonShadow; width: 5em; display: block; font-weight: bold; text-align: center;"> 확인 </span> </td> <td> <span style="background: ButtonFace; color: ButtonText; border: medium outset ButtonShadow; width: 5em; display: block; font-weight: bold; text-align: center;"> 미리보기 </span> </td> </tr> </tbody> </table> 개선방법 고령자나약시자의경우브라우저의글자체를확대시켜콘텐츠를표시하면콘 텐츠의표시위치가지시하는위치와달라져혼란을줄수있다. 따라서가급적 위치정보를이용하여지시하지않도록콘텐츠를구현하는것이좋다. 즉, 다음과같이위치정보를제공하지않고버튼레이블을이용하여지시하도록 수정한다. 개선후 : <table> <tbody> <tr> <td colspan="2"> [ 미리보기 ] 버튼을누르시오.</td>

CSS Design Korea( ) 웹콘텐츠접근성지침 2.0 개요 한국정보화진흥원 정보접근지원부현준호책임 현준호

CSS Design Korea( ) 웹콘텐츠접근성지침 2.0 개요 한국정보화진흥원 정보접근지원부현준호책임 현준호 CSS Design Korea(2010. 5.29) 웹콘텐츠접근성지침 2.0 개요 한국정보화진흥원 정보접근지원부책임 1. 들어가기 전세계인구의 10% (6 억 5 천만명 ) ( 출처 : UN ENABLE W ebsites, http://www.un.org/disabilities/default.asp?id=18 ) 1 1. 들어가기 80% 는개발도상국에!! (

More information

1. 들어가기 축구 웹 축구를잘하려면, 기본은? 체력이좋아야지요!! 1

1. 들어가기 축구 웹 축구를잘하려면, 기본은? 체력이좋아야지요!! 1 HTML 5 오픈컨퍼런스 (2010. 7. 2) 웹콘텐츠접근성지침 2.0 개요 한국정보화진흥원책임 (jhyun22@nia.or.kr, Twitter : @jhyun22 http://jhyun.wordpress.com/) 1. 들어가기 축구 웹 축구를잘하려면, 기본은? 체력이좋아야지요!! 1 1. 들어가기 축구 웹 좋은웹이될려면, 기본은? 표준과접근성을지켜야지요!!

More information

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width

More information

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것

More information

C스토어 사용자 매뉴얼

C스토어 사용자 매뉴얼 쪽지 APP 디자인적용가이드 I. 쪽지 APP 소개 2 I. 쪽지 APP 소개 쪽지 APP 을통해쇼핑몰의특정회원또는특정등급의회원그룹에게 알림메시지나마케팅을위한쪽지를발송하실수있습니다. 쪽지 APP의주요기능 1. 전체회원, 특정ID, 특정회원그룹별로쪽지발송가능 2. 발송예약기능 3. 발송한쪽지에대해수신및열람내역조회가능 4. 쇼핑몰페이지에서쪽지함과쪽지알림창제공 3

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 7. HTML 와 CSS 로웹사이트만들 기 웹사이트작성 웹사이트구축과정 내비게이션구조도 홈페이지레이아웃 헤더 web Shop 내비게이션메뉴

More information

슬라이드 1

슬라이드 1 모바일애플리케이션 접근성지침소개 2013 1. 들어가기 모바일접근성에대한관심을갖게된계기 시각장애인들도터치방식의스마트폰을이용할수있는가??? 2 1. 들어가기 모바일접근성에혜택 3 1. 들어가기 TTS(Text To Speech) 시각장애인들을위한음성합성기술 < VoiceOver > < Talkback > 4 1. 들어가기 영상통화 청각장애인들에게소통의폭을넓히다

More information

Windows 8에서 BioStar 1 설치하기

Windows 8에서 BioStar 1 설치하기 / 콘텐츠 테이블... PC에 BioStar 1 설치 방법... Microsoft SQL Server 2012 Express 설치하기... Running SQL 2012 Express Studio... DBSetup.exe 설정하기... BioStar 서버와 클라이언트 시작하기... 1 1 2 2 6 7 1/11 BioStar 1, Windows 8 BioStar

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 05 장 CSS3 선택자 1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자 CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다. 1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style

More information

src.hwp

src.hwp TTAS.OT-10.0003 제정일: 2004년 12월 23일 개정일: 2009년 12월 22일 T T A S t a n d a r d 한국형웹콘텐츠접근성지침 2.0 Korean Web Content Accessibility Guidelines 2.0 TTAS.OT-10.0003 제정일: 2004년 12월 23일 개정일: 2009년 12월 22일 한국형웹콘텐츠접근성지침

More information

한국정보통신표준 KICS.OT /R1 제정일 : 2010 년 12 월 31 일 한국형웹콘텐츠접근성지침 2.0 Korean Web Content Accessibility Guidelines 2.0 방송통신위원회

한국정보통신표준 KICS.OT /R1 제정일 : 2010 년 12 월 31 일 한국형웹콘텐츠접근성지침 2.0 Korean Web Content Accessibility Guidelines 2.0 방송통신위원회 제정일 : 2010 년 12 월 31 일 한국형웹콘텐츠접근성지침 2.0 Korean Web Content Accessibility Guidelines 2.0 방송통신위원회 서 문 1. 표준의목적 본표준은장애인이비장애인과동등하게웹콘텐츠에접근할수있는웹콘텐츠를제작하는방법에관하여기술하고있다. 이표준에포함된지침들은웹콘텐츠저자, 웹사이트설계자및웹콘텐츠개발자들이관련된지침을준수하여접근성

More information

Javascript

Javascript 1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 < 태그속성 = 변수 > 내용

More information

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법

More information

PowerPoint Presentation

PowerPoint Presentation 웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 1 04. CSS3 스타일속성 04. CSS3 Style Properties - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 2 CSS3 단위 1 CSS 는각각의스타일속성에다양한값을입력

More information

접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, the inventor

접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, the inventor 웹 접근성 : 최근 동향 신정식 jshin@i18nl10n.com 2006-06-29 웹 접근성 : 최근 동향 2 / 30 신정식 접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee,

More information

View Licenses and Services (customer)

View Licenses and Services (customer) 빠른 빠른 시작: 시작: 라이선스, 라이선스, 서비스 서비스 및 주문 주문 이력 이력 보기 보기 고객 가이드 Microsoft 비즈니스 센터의 라이선스, 서비스 및 혜택 섹션을 통해 라이선스, 온라인 서비스, 구매 기록 (주문 기록)을 볼 수 있습니다. 시작하려면, 비즈니스 센터에 로그인하여 상단 메뉴에서 재고를 선택한 후 내 재고 관리를 선택하십시오. 목차

More information

1

1 1 2 3 4 5 6 b b t P A S M T U s 7 m P P 8 t P A S M T U s 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Chapter 1 29 1 2 3 4 18 17 16 15 5 6 7 8 9 14 13 12 11 10 1 2 3 4 5 9 10 11 12 13 14 15

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.

More information

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher( 실행할페이지.jsp); 다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp"); dispatcher.forward(request, response); - 위의예에서와같이 RequestDispatcher

More information

미쓰리 파워포인트

미쓰리 파워포인트 computer & internet 07. FRAME TAG FRAME? 프레임이란? : 웹페이지를수직이나수평으로여러개영역으로나누어다른웹문서가들어갈수있도록구성할수있음. 이때나누어진각각의창을프레임이라고함. 2 FRAME 문서의구조 HTML 문서에서 태그기능을 프레임문서구조에서는 이대신함 일반웹페이지구조 ..

More information

Studuino소프트웨어 설치

Studuino소프트웨어 설치 Studuino 프로그래밍환경 Studuino 소프트웨어설치 본자료는 Studuino 프로그래밍환경설치안내서입니다. Studuino 프로그래밍 환경의갱신에따라추가 / 수정될수있습니다. 목차 1. 소개... 1 2. Windows... 2 2.1. 프로그래밍환경설치... 2 2.1.1. 웹설치버전설치방법... 2 2.2. Studuino 프로그래밍환경실행...

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 5 장. 고급표현을위한 CSS3 활용 1 목차 5.1 박스모델설정하기 5.2 레이아웃설정하기 5.3 다양한효과설정하기 5.4 움직임설정하기 2 5.1 박스모델설정하기 5.1.1 영역설정을위한박스모델 5.1.2 박스모델유형의지정 3 영역설정을위한박스모델 배경영역 , , : 해당하는줄만큼배경 ,

More information

02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자.

02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자. 02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자. 이장에서다룰내용 1 2 3 4 5 글꼴꾸밈관련스타일시트텍스트관련스타일시트배경관련스타일시트목록관련스타일시트하이퍼링크관련스타일시트 2 01. 글꼴꾸밈관련스타일시트 v 글자에관련된스타일시트는크기, 스타일, 모양등에관련된 font 속성이가장많이사용 속성값설명 color

More information

PowerPoint Presentation

PowerPoint Presentation WordPress 를이용한웹사이트만들기 2015 년 한지웅 WordPress 를이용한웹사이트만들기 Day 1 Day 2 Day 3 Day 4 Day 5 1. 웹사이트제작기초 HTLM 기본 CSS 기본 WordPress 개론 ( 웹사이트구축툴 ) 2. 웹호스팅 / 웹사이트구축 웹호스팅업체선택 cpanel 설정 WordPress 설치 3. WordPress 기초활용

More information

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx #include int main(void) { int num; printf( Please enter an integer "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); return 0; } 1 학습목표 을 작성하면서 C 프로그램의

More information

Korea Communications Standard 방송통신표준 개정일 : 2015 년 3 월 31 일 한국형웹콘텐츠접근성지침 2.1 Korean Web Content Accessibility Guidelines 2.1 미래창조과학부국립전파연구원 개정일 : 2015 년 3 월 31 일 한국형웹콘텐츠접근성지침 2.1 Korean Web Content Accessibility

More information

e-비즈니스 전략 수립

e-비즈니스 전략 수립 CSS3 속성 HTML5 웹프로그래밍입문 ( 개정판 ) Contents 학습목표 CSS3가지원하는스타일속성과스타일값을활용할수있습니다. CSS3를사용해레이아웃을잡을수있습니다. 내용 CSS3 단위 박스속성 display 속성 배경속성 글자속성 위치속성 float 속성 그림자속성 그레이디언트 2/85 1. CSS3 단위 키워드단위 W3C에서미리정의한단어 키워드를입력하면키워드에해당하는스타일이자동으로적용

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다. ONE page 웹사이트사례

More information

MF3010 MF Driver Installation Guide

MF3010 MF Driver Installation Guide 한국어 MF 드라이버설치설명서 사용자소프트웨어 CD-ROM................................................ 1.................................................................... 1..............................................................................

More information

SIGIL 완벽입문

SIGIL 완벽입문 누구나 만드는 전자책 SIGIL 을 이용해 전자책을 만들기 EPUB 전자책이 가지는 단점 EPUB이라는 포맷과 제일 많이 비교되는 포맷은 PDF라는 포맷 입니다. EPUB이 나오기 전까지 전 세계에서 가장 많이 사용되던 전자책 포맷이고, 아직도 많이 사 용되기 때문이기도 한며, 또한 PDF는 종이책 출력을 위해서도 사용되기 때문에 종이책 VS

More information

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc NTAS and FRAME BUILDER Install Guide NTAS and FRAME BUILDER Version 2.5 Copyright 2003 Ari System, Inc. All Rights reserved. NTAS and FRAME BUILDER are trademarks or registered trademarks of Ari System,

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 How to produce ChemML and MathML 조윤상 ( 과편협기획운영위원 ) 1 Applications of XML Applications of XML RDF (Resource Description Framework) : 자원의정보를표현하기위한규격, 구문및구조에대한공통적인규칙을지원. RSS (Rich Site Summary) : 뉴스나블로그사이트에서주로사용하는콘텐츠표현방식.

More information

Microsoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드]

Microsoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드] Google Map View 구현 학습목표 교육목표 Google Map View 구현 Google Map 지원 Emulator 생성 Google Map API Key 위도 / 경도구하기 위도 / 경도에따른 Google Map View 구현 Zoom Controller 구현 Google Map View (1) () Google g Map View 기능 Google

More information

Microsoft PowerPoint - 권장 사양

Microsoft PowerPoint - 권장 사양 Autodesk 제품컴퓨터사양 PRONETSOFT.CO 박경현 1 AutoCAD 시스템사양 시스템요구사양 32 비트 AutoCAD 2009 를위한시스템요구사항 Intel Pentium 4 프로세서 2.2GHz 이상, 또는 Intel 또는 AMD 듀얼 코어프로세서 16GH 1.6GHz 이상 Microsoft Windows Vista, Windows XP Home

More information

PathEye 공식 블로그 다운로드 받으세요!! 지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다.

PathEye 공식 블로그 다운로드 받으세요!!   지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다. PathEye Mobile Ver. 0.71b 2009. 3. 17 By PathEye 공식 블로그 다운로드 받으세요!! http://blog.patheye.com 지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다. PathEye 설치 1/3 최종 배포 버전을 다 운로드 받습니다. 다운로드된 파일은 CAB 파일입니다. CAB 파일에는

More information

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 (   ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각 JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( http://java.sun.com/javase/6/docs/api ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각선의길이를계산하는메소드들을작성하라. 직사각형의가로와세로의길이는주어진다. 대각선의길이는 Math클래스의적절한메소드를이용하여구하라.

More information

Overall Process

Overall Process CSS ( ) Overall Process Overall Process (Contents : Story Board or Design Source) (Structure : extensible HyperText Markup Language) (Style : Cascade Style Sheet) (Script : Document Object Model) (Contents

More information

PG 605 워크숍 [ ) 모바일접근성 (Mobile Accessibility] 한국정보화진흥원현준호책임 Twitter 현준호

PG 605 워크숍 [ ) 모바일접근성 (Mobile Accessibility] 한국정보화진흥원현준호책임 Twitter   현준호 PG 605 워크숍 [2010. 8. 26) 모바일접근성 (Mobile Accessibility] 한국정보화진흥원책임 (jhyun22@nia.or.kr, Twitter : @jhyun22 http://jhyun.wordpress.com/) 1. 들어가기 전세계인구의 10% (6 억 5 천만명 ) ( 출처 : UN ENABLE Websites, http://www.un.org/disabilities/default.asp?id=18

More information

Microsoft PowerPoint Android-SDK설치.HelloAndroid(1.0h).pptx

Microsoft PowerPoint Android-SDK설치.HelloAndroid(1.0h).pptx To be an Android Expert 문양세강원대학교 IT 대학컴퓨터학부 Eclipse (IDE) JDK Android SDK with ADT IDE: Integrated Development Environment JDK: Java Development Kit (Java SDK) ADT: Android Development Tools 2 JDK 설치 Eclipse

More information

SBR-100S User Manual

SBR-100S User Manual ( 1 / 13 ) SBR-100S 모델에 대한 사용자 펌웨어 업그레이드 방법을 안내해 드립니다. SBR-100S 는 신규 펌웨어가 있을시 FOTA(자동업데이트) 기능을 통하여 자동 업그레이드가 되며, 필요시 사용자가 신규 펌웨어를 다운받아 수동으로 업그레이드 할 수 있습니다. 1. 준비하기 1.1 연결 장치 준비 펌웨어 업그레이드를 위해서는 SBR-100S

More information

성균관대학교시스템경영공학과 (6.2) 웹접근성이해및지침소개 한국정보화진흥원 웹접근성지원부현준호

성균관대학교시스템경영공학과 (6.2) 웹접근성이해및지침소개 한국정보화진흥원 웹접근성지원부현준호 성균관대학교시스템경영공학과 (6.2) 웹접근성이해및지침소개 2009. 6 한국정보화진흥원 웹접근성지원부 Jhyun22@kado.or.kr 1. 들어가기 -1 기술이사람을도와준다!! 기술이사람을 바보로만든다!! - 리모트콘트롤, 휴대폰, 웹사이트를 부모님이, 아이들이, 선생님이어떻게이용하십니까? 1 1. 들어가기 -2 맹자 牛山之木 ( 우산지목 ) 성선설 우산의나무들은일찍이아름다웠다.

More information

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기 소규모 비즈니스를 위한 YouTube 플레이북 YouTube에서 호소력 있는 동영상으로 고객과 소통하기 소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

More information

장애인건강관리사업

장애인건강관리사업 장애인건강관리사업 2013. 2013 : : ( ) : ( ) ( ) ( ) : ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) 1.. 2.. 제1장. 연구개요 1 제2장. 1세부과제 : 장애인건강상태평가와모니터링 10 - i - 제3장. 2세부과제 : 장애인만성질환위험요인조사연구 117 - ii - 4장.

More information

HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 :

HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 : HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 : ios 3.0 이상 - 콘텐츠형식 : MP4 (H264,AAC ), MP3 * 디바이스별해상도,

More information

Xcrypt 내장형 X211SCI 수신기 KBS World 채널 설정법

Xcrypt 내장형 X211SCI 수신기 KBS World 채널 설정법 [ X211S CI 위성방송수신기 - KBS World 채널 설정법 ] 세기위성 T: 82-2-2231-7989, F: 82-2-2232-6373 http://www.sekisat.com webmaster@sekisat.com 주의사항 구매 전에, 위의 X211S CI 수신기의 재고가 당사에 충분히 있는지, 미리 확인바랍니다. 본 제품은 Xcrypt

More information

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks XSS s XSS, s, May 25, 2010 XSS s 1 2 s 3 XSS s MySpace 사건. Samy (JS.Spacehero) 프로필 페이지에 자바스크립트 삽입. 스크립트 동작방식 방문자를 친구로 추가. 방문자의 프로필에 자바스크립트를 복사. 1시간 만에 백만 명이 친구등록. s XSS s 위험도가 낮은 xss 취약점을 다른 취약점과 연계하여

More information

열거형 교차형 전개형 상승형 외주형 회전형 도해패턴 계층형 구분형 확산형 합류형 대비형 상관형 (C) 2010, BENESO All Rights Reserved 2

열거형 교차형 전개형 상승형 외주형 회전형 도해패턴 계층형 구분형 확산형 합류형 대비형 상관형 (C) 2010, BENESO All Rights Reserved 2 c 2010, BENESO All rights reserved 1 열거형 교차형 전개형 상승형 외주형 회전형 도해패턴 계층형 구분형 확산형 합류형 대비형 상관형 (C) 2010, BENESO All Rights Reserved 2 u 열거형 : 대소, 위치등의관계에대해설명 u 교차형 : 중복, 합동, 복합, 공동등의관계에대해설명 설명도, 대소관계도, 제휴관계도,

More information

PowerPoint Template

PowerPoint Template 설치및실행방법 Jaewoo Shim Jun. 4. 2018 Contents SQL 인젝션이란 WebGoat 설치방법 실습 과제 2 SQL 인젝션이란 데이터베이스와연동된웹서버에입력값을전달시악의적동작을수행하는쿼리문을삽입하여공격을수행 SELECT * FROM users WHERE id= $_POST[ id ] AND pw= $_POST[ pw ] Internet

More information

목차 1. 시스템요구사항 암호및힌트설정 ( 윈도우 ) JetFlash Vault 시작하기 ( 윈도우 ) JetFlash Vault 옵션 ( 윈도우 )... 9 JetFlash Vault 설정... 9 JetFlash Vault

목차 1. 시스템요구사항 암호및힌트설정 ( 윈도우 ) JetFlash Vault 시작하기 ( 윈도우 ) JetFlash Vault 옵션 ( 윈도우 )... 9 JetFlash Vault 설정... 9 JetFlash Vault 사용자매뉴얼 JetFlash Vault 100 ( 버전 1.0) 1 목차 1. 시스템요구사항... 3 2. 암호및힌트설정 ( 윈도우 )... 3 3. JetFlash Vault 시작하기 ( 윈도우 )... 7 4. JetFlash Vault 옵션 ( 윈도우 )... 9 JetFlash Vault 설정... 9 JetFlash Vault 찾아보기... 10 JetFlash

More information

NTD36HD Manual

NTD36HD Manual Upnp 사용 D7 은 UPNP 를지원하여 D7 의네크워크에연결된 UPNP 기기에별다른설정없이연결하여, 유무선으로네트워크상의연결된 UPNP 기기의콘텐츠를재생할수있습니다. TV 화면의 브라우저, UPNP 를선택하면연결가능한 UPNP 기기가표시됩니다. 주의 - UPNP 기능사용시연결된 UPNP 기기의성능에따라서재생되지않는콘텐츠가있을수있습니다. NFS 사용 D7

More information

Visual Basic 반복문

Visual Basic 반복문 학습목표 반복문 For Next문, For Each Next문 Do Loop문, While End While문 구구단작성기로익히는반복문 2 5.1 반복문 5.2 구구단작성기로익히는반복문 3 반복문 주어진조건이만족하는동안또는주어진조건이만족할때까지일정구간의실행문을반복하기위해사용 For Next For Each Next Do Loop While Wend 4 For

More information

PHP & ASP

PHP & ASP 단어장프로젝트 프로젝트2 단어장 select * from address where address like '% 경기도 %' td,li,input{font-size:9pt}

More information

SQL Developer Connect to TimesTen 유니원아이앤씨 DB 기술지원팀 2010 년 07 월 28 일 문서정보 프로젝트명 SQL Developer Connect to TimesTen 서브시스템명 버전 1.0 문서명 작성일 작성자

SQL Developer Connect to TimesTen 유니원아이앤씨 DB 기술지원팀 2010 년 07 월 28 일 문서정보 프로젝트명 SQL Developer Connect to TimesTen 서브시스템명 버전 1.0 문서명 작성일 작성자 SQL Developer Connect to TimesTen 유니원아이앤씨 DB 팀 2010 년 07 월 28 일 문서정보 프로젝트명 SQL Developer Connect to TimesTen 서브시스템명 버전 1.0 문서명 작성일 2010-07-28 작성자 김학준 최종수정일 2010-07-28 문서번호 20100728_01_khj 재개정이력 일자내용수정인버전

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var

More information

Microsoft PowerPoint - CSharp-10-예외처리

Microsoft PowerPoint - CSharp-10-예외처리 10 장. 예외처리 예외처리개념 예외처리구문 사용자정의예외클래스와예외전파 순천향대학교컴퓨터학부이상정 1 예외처리개념 순천향대학교컴퓨터학부이상정 2 예외처리 오류 컴파일타임오류 (Compile-Time Error) 구문오류이기때문에컴파일러의구문오류메시지에의해쉽게교정 런타임오류 (Run-Time Error) 디버깅의절차를거치지않으면잡기어려운심각한오류 시스템에심각한문제를줄수도있다.

More information

Microsoft Word - src.doc

Microsoft Word - src.doc IPTV 서비스탐색및콘텐츠가이드 RI 시스템운용매뉴얼 목차 1. 서버설정방법... 5 1.1. 서비스탐색서버설정... 5 1.2. 컨텐츠가이드서버설정... 6 2. 서버운용방법... 7 2.1. 서비스탐색서버운용... 7 2.1.1. 서비스가이드서버실행... 7 2.1.2. 서비스가이드정보확인... 8 2.1.3. 서비스가이드정보추가... 9 2.1.4. 서비스가이드정보삭제...

More information

Web Scraper in 30 Minutes 강철

Web Scraper in 30 Minutes 강철 Web Scraper in 30 Minutes 강철 발표자 소개 KAIST 전산학과 2015년부터 G사에서 일합니다. 에서 대한민국 정치의 모든 것을 개발하고 있습니다. 목표 웹 스크래퍼를 프레임웍 없이 처음부터 작성해 본다. 목표 웹 스크래퍼를 프레임웍 없이 처음부터 작성해 본다. 스크래퍼/크롤러의 작동 원리를 이해한다. 목표

More information

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상 Android 용 Brother Image Viewer 설명서 버전 0 KOR 아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상표입니다. Android는

More information

MVVM 패턴의 이해

MVVM 패턴의 이해 Seo Hero 요약 joshua227.tistory. 2014 년 5 월 13 일 이문서는 WPF 어플리케이션개발에필요한 MVVM 패턴에대한내용을담고있다. 1. Model-View-ViewModel 1.1 기본개념 MVVM 모델은 MVC(Model-View-Contorl) 패턴에서출발했다. MVC 패턴은전체 project 를 model, view 로나누어

More information

Microsoft Word - ijungbo1_13_02

Microsoft Word - ijungbo1_13_02 [ 인터넷정보관리사필기 ] 기출문제 (11) 1 1. 지금부터인터넷정보관리사필기기출문제 (11) 를풀어보겠습니다. 2. 홈페이지제작할때유의할점으로가장거리가먼것은무엇일까요? 3. 정답은 ( 라 ) 입니다. 홈페이지제작시유의할점으로는로딩속도를고려하며, 사용자중심의인터페이스로제작하고, 이미지의크기는적당하게조절하여야한다. [ 인터넷정보관리사필기 ] 기출문제 (11)

More information

Microsoft PowerPoint 웹 연동 기술.pptx

Microsoft PowerPoint 웹 연동 기술.pptx 웹프로그래밍및실습 ( g & Practice) 문양세강원대학교 IT 대학컴퓨터과학전공 URL 분석 (1/2) URL (Uniform Resource Locator) 프로토콜, 호스트, 포트, 경로, 비밀번호, User 등의정보를포함 예. http://kim:3759@www.hostname.com:80/doc/index.html URL 을속성별로분리하고자할경우

More information

소프트웨어공학 Tutorial #2: StarUML Eun Man Choi

소프트웨어공학 Tutorial #2: StarUML Eun Man Choi 소프트웨어공학 Tutorial #2: StarUML Eun Man Choi emchoi@dgu.ac.kr Contents l StarUML 개요 l StarUML 소개및특징 l 주요기능 l StarUML 화면소개 l StarUML 설치 l StarUML 다운 & 설치하기 l 연습 l 사용사례다이어그램그리기 l 클래스다이어그램그리기 l 순서다이어그램그리기 2

More information

Week8-Extra

Week8-Extra Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab. HTML CSS HTML, HTML 5 1. HTML HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4

More information

ISP and CodeVisionAVR C Compiler.hwp

ISP and CodeVisionAVR C Compiler.hwp USBISP V3.0 & P-AVRISP V1.0 with CodeVisionAVR C Compiler http://www.avrmall.com/ November 12, 2007 Copyright (c) 2003-2008 All Rights Reserved. USBISP V3.0 & P-AVRISP V1.0 with CodeVisionAVR C Compiler

More information

[Brochure] KOR_TunA

[Brochure] KOR_TunA LG CNS LG CNS APM (TunA) LG CNS APM (TunA) 어플리케이션의 성능 개선을 위한 직관적이고 심플한 APM 솔루션 APM 이란? Application Performance Management 란? 사용자 관점 그리고 비즈니스 관점에서 실제 서비스되고 있는 어플리케이션의 성능 관리 체계입니다. 이를 위해서는 신속한 장애 지점 파악 /

More information

Microsoft PowerPoint - Java7.pptx

Microsoft PowerPoint - Java7.pptx HPC & OT Lab. 1 HPC & OT Lab. 2 실습 7 주차 Jin-Ho, Jang M.S. Hanyang Univ. HPC&OT Lab. jinhoyo@nate.com HPC & OT Lab. 3 Component Structure 객체 (object) 생성개념을이해한다. 외부클래스에대한접근방법을이해한다. 접근제어자 (public & private)

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Html 은웹에서 text, images, movie 등다양한정보의요소를 담을수있는문서형식이다. 정보 (txt, imges) 전송 = 동일한어플리케이션 = 정보 (txt, imges) 정보 (txt, imges Movie, 동작 ) 정보 (txt, imges movie) 어플리케이션 웹브라우저 HTML5 는기존 HTML 에차별화된특징을가진 최신버전의웹표준언어.

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Autodesk Software 개인용 ( 학생, 교사 ) 다운로드가이드 진동환 (donghwan.jin@autodesk.com) Manager Autodesk Education Program - Korea Autodesk Education Expert 프로그램 www.autodesk.com/educationexperts 교육전문가프로그램 글로벌한네트워크 /

More information

3. 다음은카르노맵의표이다. 논리식을간략화한것은? < 나 > 4. 다음카르노맵을간략화시킨결과는? < >

3. 다음은카르노맵의표이다. 논리식을간략화한것은? < 나 > 4. 다음카르노맵을간략화시킨결과는? < > . 변수의수 ( 數 ) 가 3 이라면카르노맵에서몇개의칸이요구되는가? 2칸 나 4칸 다 6칸 8칸 < > 2. 다음진리표의카르노맵을작성한것중옳은것은? < 나 > 다 나 입력출력 Y - 2 - 3. 다음은카르노맵의표이다. 논리식을간략화한것은? < 나 > 4. 다음카르노맵을간략화시킨결과는? < > 2 2 2 2 2 2 2-3 - 5. 다음진리표를간략히한결과

More information

UI TASK & KEY EVENT

UI TASK & KEY EVENT 2007. 2. 5 PLATFORM TEAM 정용학 차례 CONTAINER & WIDGET SPECIAL WIDGET 질의응답및토의 2 Container LCD에보여지는화면한개 1개이상의 Widget을가짐 3 Container 초기화과정 ui_init UMP_F_CONTAINERMGR_Initialize UMP_H_CONTAINERMGR_Initialize

More information

System Recovery 사용자 매뉴얼

System Recovery 사용자 매뉴얼 Samsung OS Recovery Solution 을이용하여간편하게 MagicInfo 의네트워크를설정하고시스템을백업및복원할수있습니다. 시스템시작시리모컨의 - 버튼이나키보드의 F3 키를연속해서누르면복구모드로진입한후 Samsung OS Recovery Solution 이실행됩니다. Samsung OS Recovery Solution 은키보드와리모컨을사용하여조작할수있습니다.

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 육아상식 STYLE GUIDE Design Style Guide 0 Navigation 메뉴검색알람슈퍼맘맘스맘쇼핑맘이벤트 Icon 출석체크내프로필내포인트참여한이벤트 : 문의로그아웃 뒤로가기공유하기더보기글쓰기유튜브좋아요 _on 좋아요 _off 알리기공지사항 FAQ 설정 댓글공유하기이동하기뒤로가기닫기내프로필사진수정 카테고리프로필 _ 포인트내포인트자녀 Q A N

More information

Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와 디바이스에 관계 없이 언제, 어디서나 문서를 확인하고 편집

Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와 디바이스에 관계 없이 언제, 어디서나 문서를 확인하고 편집 Modern Modern www.office.com ( ) 892 5 : 1577-9700 : http://www.microsoft.com/korea Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와

More information

지도상 유의점 m 학생들이 어려워하는 낱말이 있으므로 자세히 설명해주도록 한다. m 버튼을 무리하게 조작하면 고장이 날 위험이 있으므로 수업 시작 부분에서 주의를 준다. m 활동지를 보고 어려워하는 학생에게는 영상자료를 접속하도록 안내한다. 평가 평가 유형 자기 평가

지도상 유의점 m 학생들이 어려워하는 낱말이 있으므로 자세히 설명해주도록 한다. m 버튼을 무리하게 조작하면 고장이 날 위험이 있으므로 수업 시작 부분에서 주의를 준다. m 활동지를 보고 어려워하는 학생에게는 영상자료를 접속하도록 안내한다. 평가 평가 유형 자기 평가 수업주제 경찰 출동! (버튼, LED, 버저 사용하기) 9 / 12 차시 수업의 주제와 목표 본 수업에서는 이전 차시에 배웠던 블록들의 기능을 복합적으로 활용한다. 스위치 기능을 가진 버튼을 활용하여 LED와 버저를 동시에 작동시키도록 한다. 각 블록들을 함께 사용하는 프로젝트를 통해 각각의 기능을 익히고 보다 다양한 활용 방법을 구상할 수 있다. 교수 학습

More information

슬라이드 1

슬라이드 1 전자정부사업관리직무역량교육 웹호환성및웹접근성의이해 2015.5.19 류영일수석 개념정리 개념정리 3 웹표준 웹접근성 < 상황 1> 제안회의 류과장 : 김대리 ~ 이번프로젝트웹접근성프로젝트니까핵심잘맞춰서제안서쓰세요김대리 : 네그럼 3종브라우저맞추고, Active-X는사용하지않도록하겠습니다. 개념정리 4 목적 웹접근성 웹호환성 수단 웹표준 WWW 관련표준스펙 CSS,

More information

PowerPoint Presentation

PowerPoint Presentation Class - Property Jo, Heeseung 목차 section 1 클래스의일반구조 section 2 클래스선언 section 3 객체의생성 section 4 멤버변수 4-1 객체변수 4-2 클래스변수 4-3 종단 (final) 변수 4-4 멤버변수접근방법 section 5 멤버변수접근한정자 5-1 public 5-2 private 5-3 한정자없음

More information

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt 변수와상수 1 변수란무엇인가? 변수 : 정보 (data) 를저장하는컴퓨터내의특정위치 ( 임시저장공간 ) 메모리, register 메모리주소 101 번지 102 번지 변수의크기에따라 주로 byte 단위 메모리 2 기본적인변수형및변수의크기 변수의크기 해당컴퓨터에서는항상일정 컴퓨터마다다를수있음 short

More information

SK Telecom Platform NATE

SK Telecom Platform NATE SK Telecom Platform NATE SK TELECOM NATE Browser VER 2.6 This Document is copyrighted by SK Telecom and may not be reproduced without permission SK Building, SeRinDong-99, JoongRoGu, 110-110, Seoul, Korea

More information

슬라이드 1

슬라이드 1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 3 장고급 HTML 작성 목차 제 3 장고급 HTML 작성 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 3 장고급 HTML 작성 멀티미디어파일다루기 스타일시트 레이어 3 3.1 멀티미디어 최근인터넷사용자가급증하면서기업 / 개인용홈페이지가급증하였고다양한홈페이지를만들기위해많은기술들이생겨나고있음

More information

Install stm32cubemx and st-link utility

Install stm32cubemx and st-link utility STM32CubeMX and ST-LINK Utility for STM32 Development 본문서는 ST Microelectronics 의 ARM Cortex-M 시리즈 Microcontroller 개발을위해제공되는 STM32CubeMX 와 STM32 ST-LINK Utility 프로그램의설치과정을설명합니다. 본문서는 Microsoft Windows 7

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 실습 1 배효철 th1g@nate.com 1 목차 조건문 반복문 System.out 구구단 모양만들기 Up & Down 2 조건문 조건문의종류 If, switch If 문 조건식결과따라중괄호 { 블록을실행할지여부결정할때사용 조건식 true 또는 false값을산출할수있는연산식 boolean 변수 조건식이 true이면블록실행하고 false 이면블록실행하지않음 3

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 How to produce table XHTML 임정희 M2community 1 Table of Contents 1. XHTML - XHTML 과 HTML 2. Table XHTML - Table의이해 - Table 링크연결 - Table 작성 2 15 th KCSE Editor s Workshop, Seoul 2015 XHTML XHTML 기존에사용되던 HTML

More information

mobile_guide_SA

mobile_guide_SA 네이버 모바일배너 모바일 네트워트 GUIDE AD GUIDE Version 1.0 03. 적용위치 04. Appendix 목차 네이버 모바일배너 개요 1. 텍스트형 광고 2. 이미지형 광고 3. 롤링형 광고 네이버 모바일배너 개요 1. 텍스트형 광고 2. 이미지형 광고 3. 롤링형 광고 01/03 네이버 모바일배너 개요 네이버 모바일배너는 네이버 모바일 서비스

More information

<B3EDB9AEC0DBBCBAB9FD2E687770>

<B3EDB9AEC0DBBCBAB9FD2E687770> (1) 주제 의식의 원칙 논문은 주제 의식이 잘 드러나야 한다. 주제 의식은 논문을 쓰는 사람의 의도나 글의 목적 과 밀접한 관련이 있다. (2) 협력의 원칙 독자는 필자를 이해하려고 마음먹은 사람이다. 따라서 필자는 독자가 이해할 수 있는 말이 나 표현을 사용하여 독자의 노력에 협력해야 한다는 것이다. (3) 논리적 엄격성의 원칙 감정이나 독단적인 선언이

More information

4S 1차년도 평가 발표자료

4S 1차년도 평가 발표자료 모바일 S/W 프로그래밍 안드로이드개발환경설치 2012.09.05. 오병우 모바일공학과 JDK (Java Development Kit) SE (Standard Edition) 설치순서 Eclipse ADT (Android Development Tool) Plug-in Android SDK (Software Development Kit) SDK Components

More information

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch15. 문서객체조작 2014년 1학기 Professor Seung-Hoon Choi 15 문서객체조작 문서객체조작 자바스크립트만으로문서객체모델을다루려면복잡함 jquery를이용하면쉽게다룰수있다. 이책에서가장중요한부분 15.1 문서객체의클래스속성추가

More information

사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사

사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사 IDIS Mobile Android 사용설명서 Powered by 사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사양 및 버전에 따라 일부

More information

Lab1

Lab1 Lab 1: HTML CSS 2015 Fall human-computer interaction + design lab. Joonhwan Lee HTML Web Server (World Wide Web: WWW)? (., FTP ). web 3 웹 구조의 이해 웹페이지 웹페이지는 HTML 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상,

More information

CR2006-41.hwp

CR2006-41.hwp 연구책임자 가나다 순 머 리 말 2006년 12월 한국교육학술정보원 원장 - i - - ii - - iii - 평가 영역 1. 교육계획 2. 수업 3. 인적자원 4. 물적자원 5. 경영과 행정 6. 교육성과 평가 부문 부문 배점 비율(%) 점수(점) 영역 배점 1.1 교육목표 3 15 45점 1.2 교육과정 6 30 (9%) 2.1 수업설계 6 30 2.2

More information

<4D F736F F F696E74202D203137C0E55FBFACBDC0B9AEC1A6BCD6B7E7BCC72E707074>

<4D F736F F F696E74202D203137C0E55FBFACBDC0B9AEC1A6BCD6B7E7BCC72E707074> SIMATIC S7 Siemens AG 2004. All rights reserved. Date: 22.03.2006 File: PRO1_17E.1 차례... 2 심벌리스트... 3 Ch3 Ex2: 프로젝트생성...... 4 Ch3 Ex3: S7 프로그램삽입... 5 Ch3 Ex4: 표준라이브러리에서블록복사... 6 Ch4 Ex1: 실제구성을 PG 로업로드하고이름변경......

More information

PowerPoint Template

PowerPoint Template SOFTWARE ENGINEERING Team Practice #3 (UTP) 201114188 김종연 201114191 정재욱 201114192 정재철 201114195 홍호탁 www.themegallery.com 1 / 19 Contents - Test items - Features to be tested - Features not to be tested

More information

BY-FDP-4-70.hwp

BY-FDP-4-70.hwp RS-232, RS485 FND Display Module BY-FDP-4-70-XX (Rev 1.0) - 1 - 1. 개요. 본 Display Module은 RS-232, RS-485 겸용입니다. Power : DC24V, DC12V( 주문사양). Max Current : 0.6A 숫자크기 : 58mm(FND Size : 70x47mm 4 개) RS-232,

More information

Javascript

Javascript 1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.

More information

<322EBCF8C8AF28BFACBDC0B9AEC1A6292E687770>

<322EBCF8C8AF28BFACBDC0B9AEC1A6292E687770> 연습문제해답 5 4 3 2 1 0 함수의반환값 =15 5 4 3 2 1 0 함수의반환값 =95 10 7 4 1-2 함수의반환값 =3 1 2 3 4 5 연습문제해답 1. C 언어에서의배열에대하여다음중맞는것은? (1) 3차원이상의배열은불가능하다. (2) 배열의이름은포인터와같은역할을한다. (3) 배열의인덱스는 1에서부터시작한다. (4) 선언한다음, 실행도중에배열의크기를변경하는것이가능하다.

More information

<4D F736F F F696E74202D20B5A5C0CCC5CDBAA3C0CCBDBA5F3130C1D6C2F75F32C2F7BDC32E >

<4D F736F F F696E74202D20B5A5C0CCC5CDBAA3C0CCBDBA5F3130C1D6C2F75F32C2F7BDC32E > 6. ASP.NET ASP.NET 소개 ASP.NET 페이지및응용프로그램구조 Server Controls 데이터베이스와연동 8 장. 데이터베이스응용개발 (Page 20) 6.1 ASP.NET 소개 ASP.NET 동적웹응용프로그램을개발하기위한 MS 의웹기술 현재 ASP.NET 4.5까지출시.Net Framework 4.5 에포함 Visual Studio 2012

More information

UI VoC Process 안

UI VoC Process 안 Android Honeycomb UI design guide Bryan Woo (pyramos@gmail.com) Bryan Woo (pyramos@gmail.com) Table of Contents Announcement Basic Screen Portrait Screen Action Bar System Bar Main Menu Options Menu Small

More information

게임 기획서 표준양식 연구보고서

게임 기획서 표준양식 연구보고서 ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ

More information

사용설명서를 읽기 전에 ios용 아이디스 모바일은 네트워크 연결을 통해 ios 플랫폼 기반의 모바일 기기(iOS 버전 6.0 이상의 ipod Touch, iphone 또는 ipad)에서 장치(DVR, 네트워크 비디오 서버 및 네트워크 카메라)에 접속하여 원격으로 영상을

사용설명서를 읽기 전에 ios용 아이디스 모바일은 네트워크 연결을 통해 ios 플랫폼 기반의 모바일 기기(iOS 버전 6.0 이상의 ipod Touch, iphone 또는 ipad)에서 장치(DVR, 네트워크 비디오 서버 및 네트워크 카메라)에 접속하여 원격으로 영상을 IDIS Mobile ios 사용설명서 Powered by 사용설명서를 읽기 전에 ios용 아이디스 모바일은 네트워크 연결을 통해 ios 플랫폼 기반의 모바일 기기(iOS 버전 6.0 이상의 ipod Touch, iphone 또는 ipad)에서 장치(DVR, 네트워크 비디오 서버 및 네트워크 카메라)에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다.

More information

메뉴얼41페이지-2

메뉴얼41페이지-2 데이터 기반 맞춤형 성장관리 솔루션 스마트빌 플러스 은행계좌등록 은행계좌를 조회하여 등록합니다. 신용카드등록 신용카드를 조회하여 등록합니다. 금융정보 자동수집을 위하여 인증서이름, 아이디, 비밀번호를 등록합니다. 통합 자동 수집 금융정보 통합 자동수집을 실행합니다 은행계좌등록 은행계좌를 조회하여 등록합니다. 신용카드등록 신용카드를 조회하여

More information

Microsoft PowerPoint Predicates and Quantifiers.ppt

Microsoft PowerPoint Predicates and Quantifiers.ppt 이산수학 () 1.3 술어와한정기호 (Predicates and Quantifiers) 2006 년봄학기 문양세강원대학교컴퓨터과학과 술어 (Predicate), 명제함수 (Propositional Function) x is greater than 3. 변수 (variable) = x 술어 (predicate) = P 명제함수 (propositional function)

More information