Size: px
Start display at page:

Download ""

Transcription

1 연구보고 웹 접근성을 고려한 신기술 콘텐츠 제작기법 - JavaScript, Flex, Flash를 중심으로 연구책임자 : 공동연구원 : 김석일(충북대학교 전기전자컴퓨터공학부 교수) 신인철(한국정보문화진흥원 디지털접근지원단장) 신덕식(한국정보문화진흥원 웹접근성TF팀장) 김요한(Ascent Networks Korea R&D센터 연구원) 도금호(디앤샵 기술본부 과장) 문준기(한국정보문화진흥원 웹접근성TF팀 과장) 박재표(한국정보문화진흥원 웹접근성TF팀 과장) 신현석(오페라 소프트웨어 코리아 과장) 조훈(케익소프트 실장) 최재영(아이Enter 책임연구원) 홍성원(한국어도비시스템즈 부장)

2

3 - 목 차 목차 i 그림목차 ix Ⅰ. 리치 인터넷 애플리케이션의 접근성 1 1. 연구목적 1 2. RIA 콘텐츠와 웹 접근성 RIA 콘텐츠 장애와 보조 기술 웹 콘텐츠 및 웹 애플리케이션 콘텐츠 접근성 WAI-ARIA 동향 RIA 기술로 인한 접근성 문제 WAI-ARIA 주요 내용 HTML 5.0 동향 RIA 콘텐츠 접근성 평가방법 보조 기술을 이용한 개발 단계 평가 자동평가 도구의 사용 전문가 및 사용자 평가 29

4 - i 5. 웹 접근성 관련 사이트 웹 표준 관련 웹 사이트 JavaScript 관련 웹 사이트 Flex 관련 웹 사이트 Flash 관련 웹 사이트 MSAA 관련 웹 사이트 DFXP 자막 생성 소프트웨어 관련 웹 사이트 화면 낭독 프로그램 관련 웹 사이트 36

5 - ii Ⅱ. 접근성 있는 JavaScript 제작기법 JavaScript 개요 DOM과 DOM 스크립트 JavaScript 프로그램의 확장 웹 접근성과 JavaScript JavaScript에 관한 오해 접근성 있는 JavaScript 코딩 방법 JavaScript 접근성 지원 프로그래밍 지침 대체 텍스트 제공 키보드의 이용 반응시간의 조절 온라인 서식 구성 신기술의 사용 표준의 준수 JavaScript 프로그램의 접근성 평가방법 대체 텍스트 제공 키보드의 이용 반응시간의 조절 온라인 서식 구성 신기술의 사용 표준의 준수 86

6 - v 5. JavaScript 애플리케이션 콘텐츠 구현 예 내비게이션 제작기법 접근성을 고려한 입력서식 제작기법 효과적인 UI 제작기법 JavaScript 대체 기법 142

7 - Ⅲ. 접근성 있는 Flex 제작기법 Flex 개요 웹 접근성과 Flex 콘텐츠 Flex 버전 접근성 있는 Flex 콘텐츠 제작 Flex 콘텐츠 접근성 기술 지침 대체 텍스트 제공 자막 제공 방법 색상과 접근성 키보드의 이용 읽는 순서의 설정 플러그인 정보 제공 접근성 지원 컴포넌트의 사용 Flex 콘텐츠의 접근성 평가방법 대체 텍스트 제공 자막 제공 방법 색상과 접근성 키보드의 이용 읽는 순서의 설정 플러그인 정보 제공 202

8 - i 5. 접근성 지원 Flex 컴포넌트 Flex 애플리케이션 콘텐츠 구현 예 접근성을 고려한 입력서식 제작기법 접근성을 고려한 차트 제작기법 사용자 UI를 고려한 제작기법 222

9 - ii Ⅳ. 접근성 있는 Flash 제작기법 Flash 개요 웹 접근성과 Flash 콘텐츠 접근성 있는 Flash 콘텐츠 제작 Flash 콘텐츠의 임베딩 Flash 접근성 지원 프로그래밍 지침 대체 텍스트 제공 자막 제공 방법 색상과 접근성 깜빡거리는 객체 사용 제한 키보드의 이용 접근성 지원 애니메이션 비디오/오디오 컨트롤 읽는 순서의 결정 구조의 제공 대체 페이지 제공 플러그인 정보 제공 접근성 지원 컴포넌트의 사용 Flash 콘텐츠의 접근성 평가방법 대체 텍스트 제공 280

10 - iii 4.2 자막 제공 방법 색상과 접근성 깜빡거리는 객체 사용 제한 키보드의 이용 접근성 지원 애니메이션 비디오/오디오 컨트롤 읽는 순서의 결정 구조의 제공 대체 페이지 제공 플러그인 정보 제공 Flash 콘텐츠 구현 예 내비게이션 메뉴 사용자 UI를 고려한 콘텐츠 301

11 - x 그 림 목 차 <그림 I - 1> 트리 컨트롤 예제 16 <그림 I - 2> Firefox의 에러 및 소스 보기 창을 연 화면 25 <그림 I - 3> Internet Explorer Developer Toolbar를 설치한 화면 27 <그림 I - 4> Inspect32의 실행화면 28 <그림 II - 1> Internet Explorer에서의 웹 콘텐츠 DOM구조 41 <그림 II - 2> 스크립트가 작동할 때(좌)와 작동하지 않을 때(우) 45 <그림 II - 3> 웃는 얼굴(좌)을 클릭하면 우는 얼굴(우)로 변경되는 예제 53 <그림 II - 4> 두 개의 링크 탭과 전체리스트로 이동할 수 있는 버튼으 로 구성된 예제 62 <그림 II - 5> <그림 II - 4>에서 CSS를 제거한 경우 63 <그림 II - 6> 로그인 예제 65 <그림 II - 7> 게시판 기능 예제 68 <그림 II - 8> 레이블과 입력 창의 연결 순서 84 <그림 II - 9> 가로 1단 메뉴 예제 87 <그림 II - 10> 가로 2단 메뉴 예제 92 <그림 II - 11> 드롭다운 메뉴 예제 99 <그림 II - 12> Enter키에 의해 동작하는 가로 탭 메뉴 예제 106 <그림 II - 13> 롤오버 기능에 의해 동작하는 가로 탭 메뉴 예제 113 <그림 II - 14> 로그인 화면 예제 118 <그림 II - 15> 회원가입 예제 122 <그림 II - 16> 우편 번호 검색 예제 127 <그림 II - 17> 게시판 예제 130

12 - <그림 II - 18> 롤링 배너 예제 131 <그림 II - 19> 스크롤 배너 예제 138 <그림 II - 20> 배경 이미지를 변경하여 롤오버 버튼을 구성한 예제 142 <그림 II - 21> 스타일을 변경하여 롤오버 버튼을 구성한 예제 145 <그림 II - 22> JavaScript 기능이 동작하는 환경에서 탭 메뉴의 화면 150 <그림 II - 23> JavaScript 기능이 동작하지 않는 환경에서의 탭 메뉴의 화면 152 <그림 II - 24> noscript 기능을 이용한 드롭다운메뉴 158 <그림 III - 1> Flex Builder 3을 이용한 접근성 지원방법 167 <그림 III - 2> tooltip 속성 사용 예제 171 <그림 III - 3> 트리 컨트롤(Tree control), 데이터 그리드(Data grid), 텍 스트 영역(Text area)으로 구성된 Flex 콘텐츠 예제 182 <그림 III - 4> Tab 키에 의한 이동순서 예제 183 <그림 III - 5> 자막파일을 제공한 예제 194 <그림 III - 6> 가독성이 좋은 폰트로 변경한 모습 195 <그림 III - 7> 색상으로만 표시된 버튼 196 <그림 III - 8> 색상으로만 표시된 버튼 197 <그림 III - 9> Tab 키에 의한 초점 이동순서 201 <그림 III - 10> 로그인 창의 예제 210 <그림 III - 11> 회원가입 예제 212 <그림 III - 12> 게시판 예제 216 <그림 III - 13> 차트 예제 220 <그림 III - 14> 상하 스크롤 바 예제 223

13 - i <그림 III - 15> 이미지 롤링 배너 예제 224 <그림 III - 16> 콘텐츠의 축소/확대 예제 230 <그림 IV - 1> 액세스 가능성 패널 240 <그림 IV - 2> 스테이지(stage)에 정적 텍스트와 이미지를 추가한 예제 244 <그림 IV - 3> 이름 필드에 대체 텍스트를 제공하는 예제 245 <그림 IV - 4> 무비의 예제(한국 Adobe 제공) 247 <그림 IV - 5> 전체 무비에 하나의 대체 텍스트를 제공하는 방법 247 <그림 IV - 6> 자막파일을 지정하는 방법 250 <그림 IV - 7> 자막파일을 제공한 예제 250 <그림 IV - 8> 가독성이 좋은 폰트로 변경한 모습 251 <그림 IV - 9> 콘텐츠의 초점 이동 순서에 관한 예제(한국 Adobe 제 공) 266 <그림 IV - 10> 자막파일을 제공한 예제 282 <그림 IV - 11> 색상으로만 표시된 버튼 283 <그림 IV - 12> 색상으로만 표시된 버튼 284 <그림 IV - 13> 콘텐츠의 초점 이동 순서에 관한 예제(한국 Adobe 제 공) 290 <그림 IV - 14> 가로 1단 메뉴 예제 294 <그림 IV - 15> 접근성을 제공하기 위한 액세스 가능성 패널 화면 296 <그림 IV - 16> 메뉴 전체를 접근성 있게 하는 방법 297 <그림 IV - 17> 가로 2단 롤오버 메뉴 예제 298 <그림 IV - 18> 6장의 배너로 구성된 자동 스크롤 배너 예제 302 <그림 IV - 19> 4개 버튼과 배너창으로 구성된 스크롤 배너 예제 305 <그림 IV - 20> 스크롤 버튼을 이용한 배너의 예제 307

14 - ii

15 - Ⅰ. 리치 인터넷 애플리케이션의 접근성 1. 연구목적 HTML(Hyper Text Markup Language)과 CSS(Cascade Style Sheet) 위 주로 작성한 웹 콘텐츠는 클라이언트와 서버간의 정보교환이 페이지 단위 로 이루어진다. 웹 페이지의 일부 정보를 갱신할 때에도 전체 페이지를 로딩해야 한다. 따라서 복잡한 기능을 수행하기 위해서는 많은 웹 페이지 의 로딩과 전환이 필요하다. 이러한 HTML 환경은 사용자와 콘텐츠의 상 호작용이 정적이어서 동적 콘텐츠나 데스크톱 프로그램과 같이 복잡한 기 능을 구현하기 어렵다. 이러한 문제점을 해결하기 위하여 리치 인터넷 애플리케이션(RIA: Rich

16 - Internet Application, 이하 RIA라 한다) 기술이 개발되었다. RIA 기술의 핵심은 첫째, 화면에 표시되는 웹 페이지의 일부분을 새로운 값으로 교체 할 수 있다는 점과 둘째, 클라이언트와 웹 서버간의 정보 교환이 비동기 방식으로 이루어진다는 점이다. RIA 기술을 활용하면 서버가 사용자의 반 응에 대응하여 화면의 정보를 변경할 수 있으므로 웹 상에서도 데스크톱 애플리케이션의 기능과 특징을 구현할 수 있다. 예를 들면 전체 화면을 데스크톱 프로그램처럼 구성하기, 그래픽 삽화와 상호작용이 수반되는 벡 터 기반의 애니메이션 만들기, 프레젠테이션 기능, 드래그 앤 드롭(Drag and Drop) 1) 기능, 컬럼 정렬, 차트 만들기 등과 같은 동적 콘텐츠가 그것 이다. 이러한 RIA의 가능성이 알려지면서 RIA를 이용한 웹 콘텐츠 시장이 크 게 확대되고 있다. 이에 따라 RIA 콘텐츠를 개발하기 위한 여러 가지 환 경이 출시되었다. <표 I - 1>은 국내외에서 사용되고 있는 RIA 콘텐츠 개 발 환경이다. 표 I - 1. RIA 개발 환경 명 칭 개발사 특징 비 고 Ajax ASP.NET 웹 페이지 갱신 없이 고속으로 화면 전환 가능. 웹 페이지의 일부분을 갱신하는데 필요한 데이터만을 수신할 수 있음. 서버와의 비동기적 통신 지원함. Macro- 애니메이션, 비디오 등의 저작도구로 개발 Flash 되었으며, 웹 페이지를 동적으로 꾸미는데도 media 사용될 수 있음. Flash Platform 상에서 동작하는 본격적인 RIA 도구임. Flex Adobe 이클립스 기반의 IDE를 지원함. Flash와 호환되는 ActionScript 기반의 프 로그래밍 환경을 지원함. Silver- Visual Studio 2008 플랫폼임. MS light 닷넷프레임워크의 개발언어를 지원함. 1) 아이콘을 다른 아이콘 위에 포개어 놓음으로써 처리 내용을 지정하는 조작 개념

17 - 웹 콘텐츠 저작 기법이 전통적인 HTML 기반의 코딩방법으로부터 RIA 방식으로 진화함에 따라, HTML을 기반으로 하는 콘텐츠의 접근성 표준 은 RIA 기술을 이용하여 구축한 동적 콘텐츠에 대한 접근성 표준으로 적 용될 수 없게 되었다. 이에 따라 World Wide Web Consortium(W3C) 산 하 WAI(Web Accessibility Initiative)에서는 웹 콘텐츠에 대한 접근성 표 준을 개정하는 한편, RIA에 관한 접근성 가이드라인(Accessible Rich Internet Applications : WAI-ARIA 1.0, W3C Working Draft 6 August 2008) 2) 을 제안하였다. W3C의 웹 접근성 표준 개정판(WCAG Technical Guidelines 2.0) 3) 은 오 랜 보완작업을 거쳐 2008년 12월 11일자로 채택되었다. 기존의 WCAG 1.0 4) 은 HTML 기반의 웹 콘텐츠에 대한 접근성 제공 방법을 제시하고 있 는데 반해 WCAG 2.0은 특정한 언어나 개발도구를 지정하지 않고 포괄적 인 웹 콘텐츠에 대한 접근성 개념을 제시하고 이를 준수하는 방법을 설명 하고 있다. 따라서 WCAG 2.0은 기존의 HTML 환경 뿐 아니라 RIA 기술 을 이용한 웹 애플리케이션 콘텐츠의 경우에도 그대로 적용될 수 있다. RIA에 관한 접근성 가이드라인(WAI-ARIA) 1.0에서는 접근 가능한 RIA 콘텐츠를 개발하기 위하여 고려해야 하는 규정과, HTML, CSS, JavaScript 및 Ajax 등의 기술을 이용하여 동적 콘텐츠를 개발하는 예를 제시하고 있 다. 따라서 WAI-ARIA에서 제시하는 규정에 따라 RIA 콘텐츠를 구현한다 면 접근 가능한 RIA 콘텐츠의 개발이 가능하다. 우리나라의 경우에 2008년 4월부터 시행된 장애인 차별금지 및 권리 구제 등에 관한 법률 (이하 장차법)에 따라 2009년 4월부터 정부기관, 2) 3) 4)

18 - 지자체 및 공공기관을 시작으로 기관별 성격에 따라 단계적으로 이들 기 관에서 제공하는 모든 웹 콘텐츠는 웹 접근성을 준수하여야만 한다. 뿐만 아니라 동적 콘텐츠에 대한 수요가 증가하면서 일부 웹 에이전시를 중심 으로 Ajax, Flash, Flex, Silverlight 등과 같은 RIA 기술을 이용한 웹 콘텐 츠가 개발되고 있다. 그러나 우리나라의 현실은 개발자가 참고할 수 있는 접근 가능한 RIA 콘텐츠의 개발방법이나 실무사례에 대한 자료가 매우 부족한 상태이다. 이러한 문제점을 해결하기 위한 방안으로 이 문서에서는 웹 개발자들이 처하게 될 어려움을 해소하는 데 필요한 사례들을 모아 RIA 콘텐츠 접근 성 실무 지침을 개발하였다. 제 Ⅰ장 2절에서는 RIA 콘텐츠의 특징을 개괄하고, W3C의 동향을 조 사하였다. 3절에서는 W3C에서 개발한 WAI-ARIA 적용사례를 요약하여 수록하였다. 4절에서는 RIA 접근성 평가방법을 기술하였으며, 5절에서는 RIA 콘텐츠 개발도구인 Flash, Flex, Ajax 등과 관련한 웹 사이트를 조사 하여 수록하였다. 제 II장에서는 RIA의 대표적인 개발 기법인 Ajax, Javascript를 이용한 RIA콘텐츠의 접근성 준수방법을 기술하였다. 또한 웹 접근성을 제공하기 위한 개발 방법 및 실무사례를 수록하였다. 제 III장에서는 RIA 개발도구인 Adobe 사의 Flex 등 주요 웹 관련 신기 술을 이용하여 웹 콘텐츠나 웹 애플리케이션을 제작하는 경우에 웹 접근 성을 제공하기 위한 개발 방법 및 실무사례를 수록하였다. 제 IV장에서는 RIA 개발도구이자 멀티미디어 저작도구로 많이 사용되 는 Flash 콘텐츠의 접근성을 제공하는 방법과 Flash 콘텐츠를 접근 가능

19 - 하게 만들기 위한 프로그래밍 기법 및 실무사례를 수집하여 수록하였다. 이 문서에서 상용 패키지인 Flash와 Flex에 관한 접근성 실무지침을 개발 한 이유는 Flash 콘텐츠와 Flex 콘텐츠가 모두 Flash Player를 기반으로 접근성을 제공하기 때문이다. Flash 콘텐츠와 Flex 콘텐츠는 아직까지 장애인들이 쉽게 접근하기 어 렵다. 웹 개발자에게 이들 Flash 또는 Flex 콘텐츠의 사용을 자제하도록 요청한다고 해서 접근성 문제가 해결될 수 있는 것도 아니다. 오히려 향 후 우리나라의 보조 기술 수준이 향상되었을 경우를 대비하여 지금부터 Flash 또는 Flex 콘텐츠를 접근 가능하게 구현하도록 유도하는 것이 바람 직할 것이다. 이러한 판단에 따라 이 문서에서는 Flash와 Flex 환경에서 접근 가능한 웹 콘텐츠를 제작하는 방법을 제시하였다. 따라서 이 문서에 서 설명한 바에 따라 웹 콘텐츠 또는 웹 애플리케이션 콘텐츠를 개발한다 면 향후 보조 기술이 이들 콘텐츠를 지원하는 경우에 접근성 문제가 자동 적으로 해결될 수 있을 것이다. 참고로 이 문서에서 사용하는 신기술 이라는 용어의 의미는 우리나라 보조 기술이 지원하지 못하는 새로운 기술이라는 의미이다. 현재의 보조 기술 수준에서 본다면 RIA 기술은 신기술에 포함된다고 할 수 있다. 향후 우리나라의 보조 기술이 발전하여 Flash 또는 Flex 등의 웹 콘텐츠를 지 원할 수 있게 되면, Flash 콘텐츠 또는 Flex 콘텐츠 개발기술은 더 이상 신기술로 분류되지 않을 것이다.

20 - 2. RIA 콘텐츠와 웹 접근성 2.1 RIA 콘텐츠 웹은 그동안 여러 과정을 거쳐 진화를 거듭해왔다. 처음에는 단순한 문 자 정보를 제공하는데서 출발하였으나 점차 이미지, 사운드, 동영상 등의 멀티미디어 데이터를 제공하게 되었다. 2000년대에 들어와서는 웹 콘텐츠 의 사용자 인터페이스 개선과 상호작용의 필요성이 요구되었고, 이에 따 라 새로운 리치 인터넷 애플리케이션 콘텐츠(Rich Internet Application: RIA) 패러다임이 출현하게 되었다. RIA 기술이란 웹에서 마치 윈도우용 데스크톱 프로그램을 사용하는 것 과 같이 풍부한 사용자 인터페이스를 제공하는 웹 클라이언트 기술이다. 따라서 RIA 기술을 이용하면 클라이언트-서버 시스템의 특징과 웹의 특 징을 모두 살린 웹 애플리케이션 콘텐츠의 개발이 가능하다. 다음 <표 I - 2>는 기존의 웹 콘텐츠와 데스크톱 프로그램, 그리고 RIA 콘텐츠를 상호 비교한 것이다.

21 - 표 I - 2. 웹 콘텐츠, 데스크톱, RIA 콘텐츠 비교 항 목 웹콘텐츠 데스크톱 프로그램 RIA 콘텐츠 빠른 설치와 정보 제공 크로스 플랫폼 특성 점진적인 다운로드 잡지형태의 표현 멀티미디어의 수용 표준 기반 (XML, SOAP, J2EE 등) 사용자 상호작용성 빠른 응답(페이지 갱신속도) 드래그 앤 드롭기능 확장성 온라인 및 오프라인 기능 전통적인 N-tier 개발 모델 통신기능의 간편한 추가 위 표에서 알 수 있듯이 기존의 웹 콘텐츠에서는 데스크톱 프로그램과 같은 풍부한 사용자 인터페이스를 표현하는 일은 거의 불가능에 가깝다. 또한 데스크톱 프로그램은 다양한 플랫폼에서 동작하도록 구현하는 것이 불가능하다. 그리고 잡지와 같은 사용자 인터페이스를 제공하기 위해서는 매우 많은 비용을 지불해야 한다. 그러나 위 표에서 알 수 있듯이 RIA 콘 텐츠는 웹상에서 데스크톱 프로그램 수준의 기능을 구현할 수 있다. 일부 에서는 RIA 기술로 말미암아 데스크톱 소프트웨어 시장이 몰락할 것이라 는 성급한 예측을 내어 놓기도 한다. RIA 콘텐츠는 기존의 웹 콘텐츠의 사용자 인터페이스와는 다른 새로운 사용자 인터페이스를 사용하고 있다. 예를 들면 정보의 계층적인 형태를

22 - 표현하는 트리 컨트롤(Tree Control)이나 지도를 표시하는 맵 컨트롤(Map Control) 등으로, 이는 기존의 HTML 환경에서는 사용하지 않았던 새로운 컨트롤들이다. 이러한 컨트롤들은 장애인, 특히 시각장애인에게는 더욱 생 소하기 때문에 사용방법 조차 알기 힘들다. 이렇듯 RIA 콘텐츠는 장애인 접근성에 관한 새로운 패러다임을 제시하 고 있다. 이러한 변화에 따라 W3C에서는 RIA 콘텐츠의 접근성에 관한 연구를 수행하고 있으며, WAI-ARIA(WAI-Accessibility Rich Internet Application)를 제안하고 있다. WAI-ARIA는 앞으로 보완을 거쳐 W3C 표 준으로 채택될 전망이다. 2.2 장애와 보조 기술 컴퓨터를 다루는데 있어서 가장 많이 사용되는 감각 기관은 시각과 손, 그리고 청각이다. 컴퓨터 화면은 시각 정보를 제공하는 주요 수단으로 이 용되며, 마우스와 키보드는 손을 사용하도록 형상화 되어 있다. 또한 멀티 미디어는 시각과 청각을 사용하도록 구성된 콘텐츠이다. 어떤 웹 콘텐츠이던지 간에 콘텐츠를 사용하기 위해서는 시각과 청각 또는 손을 사용하는 일이 빈번하게 일어난다. 웹 콘텐츠의 내용을 인지하 거나 이해하기 위해서는 컴퓨터 화면을 시각적으로 접근하여야 하며, 웹 콘텐츠를 탐색하거나 기능을 이용하기 위해서는 마우스와 키보드라는 보 조적 입력 장치를 사용하게 된다. 또한 웹 콘텐츠에 포함된 사운드나 음 향효과는 청각을 통하여 이용할 수 있다. 그런데 장애인들은 자신의 장애 로 인하여 컴퓨터의 활용에 제약을 받는다. 시각장애인은 시각을 통하여 화면을 인지하는 능력이 떨어지거나 아예 없으므로 다른 감각기관을 이용하여 화면의 내용을 인지할 수 있도록 대

23 - 체 수단이 필요하다. 마찬가지로 청각장애인에게 제공되는 웹 콘텐츠의 음향정보는 다른 감각기관을 이용하여 인지할 수 있도록 대체 수단을 제 공하여야 한다. 또한 마우스를 사용할 수 없는 장애인들에게는 키보드와 같은 보조 수단이 필요하다. 웹 콘텐츠를 다루는데 있어서 고려해야 할 장애 유형과 이들 장애를 극 복하기 위하여 사용될 수 있는 수단은 다음과 같다. l l l l 청각장애 : 청각장애인은 마우스 또는 키보드의 사용에는 어려움 이 없으나 사운드나 음향효과 등의 청각정보를 인지할 수 없으므 로 청각정보를 시각정보 등과 같은 대체 방법으로 제공해 주어야 한다. 음성인식 기능을 이용하여 음성 정보를 텍스트로 변환하는 장치는 청각장애인을 위한 일종의 대체 수단이다. 전맹 : 전맹은 시각을 전혀 이용할 수 없기 때문에 마우스의 사용 이 불가능하므로 키보드를 사용하여 모든 기능을 수행할 수 있어 야 한다. 또한 시각적으로 제공되는 정보를 인지할 수 없으므로 시각으로 인지해야 하는 정보에 대한 텍스트를 제공하여 이를 인 지할 수 있도록 도와야 한다. 즉 시각 정보의 대체 수단으로 텍스 트 정보를 점자로 변환하거나 TTS(Text-to-Speech) 프로그램을 이 용하여 음성으로 읽어줄 수 있다. 화면 낭독 프로그램은 TTS를 이 용하여 음성으로 읽어주는 보조 기술의 하나이다. 저시력자 : 저시력자의 경우에는 마우스와 키보드를 병행하여 사 용할 수 있다. 시각정보는 화면 확대 프로그램을 이용하여 판독할 수 있으며, 전맹의 경우와 같이 화면 낭독 프로그램을 병행하여 사용하면 문제를 해결할 수 있다. 지체장애 : 지체장애인 중 상지 장애인은 마우스의 사용이 불가능 하며 키보드를 주로 사용한다. 필요시에는 자판이 큰 키보드를 사 용하여 장애를 극복할 수 있다. 지체장애인이 사용하기 편리한 웹

24 - 0 l l 콘텐츠는 가능한 한 키보드를 누르는 횟수를 줄일 수 있도록 단축 키, 매크로 등의 기능이 제공되어야 하며 작업을 완수하는데 필요 한 시간도 충분히 허용하여야 한다. 지적장애 : 지적장애자는 평이한 콘텐츠를 이해할 수 있다. 따라서 웹 콘텐츠에 사용하는 용어는 가능한 한 전문용어의 사용을 피하 여야 한다. 어려운 용어는 풀어서 설명한다. 웹 콘텐츠를 전맹의 경우와 같이 화면 낭독 프로그램을 이용하여 읽어주는 것도 필요 하다. 색각이상 : 색각이상자는 마우스 또는 키보드를 사용할 수 있으며, 청각의 사용이 가능하다. 웹 콘텐츠를 인지하는 과정에서 특정 색 상을 구별하지 못하므로 웹 콘텐츠를 개발할 때에 색상의 차이가 확실히 구분되도록 하거나, 색상을 배제하더라도 판독이 가능하도 록 웹 콘텐츠를 개발하여야 한다. 이상에서 살펴본 바와 같이 장애인이 웹 콘텐츠를 인지하고 이해하기 위해서는 키보드만으로 콘텐츠를 다룰 수 있어야 하며, 필요한 콘텐츠를 인지할 수 있는 보조 기술(Assistive Technology)이 제공되어야 한다. 또 한 콘텐츠 자체의 구성 시 세심한 주의를 기울임으로써 그 내용을 충분히 인지할 수 있도록 해야 한다. 화면 낭독 프로그램이나 특수 키보드, 특수 마우스 등과 같이 장애유형 별로 접근성을 향상시키는 많은 보조 기술들이 개발되어 있다. 보조 기술 에 관련한 사항은 한국정보문화진흥원 정보통신 보조기기 체험관 5) 을 참 고하라. 모든 웹 콘텐츠를 개발할 때에 접근 가능하도록 설계하는 일은 장애인 뿐 아니라 비장애인에게도 도움을 준다. 예를 들어 소음이 심한 지역에서 5) 한국정보문화진흥원 정보통신 보조기기 체험관 사이트 :

25 - 1 웹사이트에 접근하거나 웹 문서상의 음성정보를 이용하는 경우에 캡션이 제공된다면 제한적인 환경에도 불구하고 그 내용을 인지할 수 있다. 마찬 가지로 영화에 자막이 제공된다면 검색 엔진을 활용하여 이 영화에 나오 는 유명한 대사를 쉽게 찾을 수도 있다. 2.3 웹 콘텐츠 및 웹 애플리케이션 콘텐츠 접근성 장애인이 웹 콘텐츠에 접근하여 사용할 수 있으려면 2.2절에서 살펴본 바와 같이 적절한 보조 기술을 이용하여 해당 웹 콘텐츠에 접근할 수 있 어야 하며, 웹 콘텐츠 자체도 장애인이 접근할 수 있도록 준비되어야 한 다. 이를 위하여 우리나라를 비롯하여 많은 나라들이 접근 가능한 웹 콘 텐츠를 제작하는 방법에 관한 기준이나 표준을 개발하여 준수하고 있다. 그리고 이들 표준이 적용되는 웹 콘텐츠의 유형도 기존의 HTML이나 CSS (Cascading Style Sheet)로 구성된 콘텐츠 뿐 아니라 JavaScript 코드 가 포함된 대화형 웹 콘텐츠나 Flash 및 Flex 등의 RIA 콘텐츠도 포함된 다. 우리나라의 웹 콘텐츠에 적용되는 접근성 지침은 2005년 12월 제정된 인터넷 웹 콘텐츠 접근성 지침 (Internet Web Contents Accessibility Guideline; KICS.OT ; )이다. 이 표준은 한국정보통신국 가표준으로 제정되어 현재에 이르고 있다. 인터넷 웹 콘텐츠 접근성 지침 (이하 국가표준 이라고 한다)은 인터넷을 통하여 제공되는 웹 콘텐츠를 누구나 차별 없이 그 내용을 인지할 수 있고 운용할 수 있으며 이해할 수 있게 하기 위해서 필요한 사항을 규정하고 있다. 국가표준은 주로 HTML 및 CSS로 작성된 웹 콘텐츠의 접근성에 관한 사항을 주로 다루고 있다. JavaScript, Visual Basic 등과 같은 스크립트

26 - 2 코드가 포함된 웹 콘텐츠에 대해서는 스크립트를 사용하지 않아도 웹 콘 텐츠 본래의 기능을 구현할 수 있도록 규정하였을 뿐, 스크립트 코드에 의하여 추가되는 기능이나 스크립트 코드 자체에 대한 접근성 제공 방법 에 대해서는 아무런 규정이 없다. 마찬가지로 Ajax, Flash, Flex 또는 Silverlight를 이용하여 개발하는 RIA 콘텐츠에 대해서도 플러그인 (plug-in)에 대한 링크를 제공해야 한다는 규정 외에 RIA 콘텐츠 자체의 접근성 문제는 다루고 있지 않다. 이것은 국제적으로 통용되는 웹 접근성 표준의 경우에도 마찬가지이다. 2008년도 12월 이전까지 국제적으로 통용되어왔던 W3C(World Wide Web Consortium) 산하 WAI(Web Accessibility Initiative)에서 개발한 표 준은 Web Content Accessibility Guidelines (WCAG) 1.0 6) 으로 우리나라 국가표준과 같이 RIA 콘텐츠의 접근성에 관한 사항을 다루고 있지 않다. WAI에서는 웹 환경의 새로운 진화에 따라 기존의 정적 콘텐츠뿐만 아 니라 RIA를 포함한 동적 콘텐츠에도 적용이 가능한 새로운 웹 접근성 지 침을 개발하여 왔다. 그 결과로 2008년 12월 11일 WCAG 2.0을 W3C 표 준으로 최종 확정하였다. WCAG 2.0은 4개 카테고리, 12개 지침 및 61개 의 체크리스트로 구성되어 있다. 자세한 사항은 W3C 웹 사이트 7) 를 참고 하라. 미국은 웹 접근성과 관련한 지침을 미국 장애인 복지법의 수정 조항인 508조에 규정하고 있다. 508조는 총 16개의 지침을 포함하고 있다. 508조 에서도 우리나라 국가 표준과 마찬가지로 RIA에 대한 접근성을 규정하고 있지 않다. 이에 대한 자세한 내용은 미국 연방정부 508조 사이트 8) 를 참 고하라. 미국도 웹 환경의 변화에 따라 508조의 개정 작업을 서두르고 있 6) 7) 8)

27 - 3 다. 그 개정방향은 W3C의 경우와 마찬가지로 기존의 HTML과 CSS에 국 한된 웹 콘텐츠 개발 방법을 탈피하여 스크립트 언어의 사용 추세와 RIA 콘텐츠로의 발전 추세를 감안할 것으로 알려지고 있다. 이러한 국내외적인 웹 관련 표준의 개정 작업에 발맞추어 우리나라에서 도 국가표준의 개정과 함께 RIA 콘텐츠에 대한 접근성 제공 방법에 대한 연구가 필요한 상황이다. 이미 W3C 산하 WAI에서는 HTML, CSS, DOM 뿐 아니라 JavaScript, Ajax 등 신기술을 이용하여 개발하는 RIA 콘텐츠에 대한 장애인의 접근성 문제를 연구하고 있고, WAI-ARIA Suite를 그 결과 물로 제출한 바 있다. WAI에서 제공하고 있는 문서인 WAI-ARIA Best Practices는 WAI-ARIA 기술규격에 입각하여 접근성 있는 RIA 콘텐츠를 만드는 방법 에 대하여 기술하고 있다. 3절에서는 WAI-ARIA의 동향에 대하여 보다 상세히 알아보기로 한다. 3. WAI-ARIA 동향 WAI에서는 리치 인터넷 애플리케이션(RIA: Rich Internet Application) 콘텐츠를 접근성 있게 개발하는데 따른 규정과 개발 사례 등을 모아 ARIA(Accessible Rich Internet Application) Suite로 묶어 제시하고 있다. WAI-ARIA Suite는 ARIA와 관련하여 WAI가 발간한 4가지 기술 자료 묶 음으로, 최신판은 2008년 2월에 발간된 자료이다. WAI-ARIA Suite에 포 함된 4가지 기술 자료는 다음과 같다. l WAI-ARIA 9) : WAI-ARIA는 Ajax, HTML, JavaScript 및 관련 기 술을 이용하여 동적 콘텐츠를 만들거나 고도의 사용자 인터페이스 9)

28 - 4 를 개발하는 과정에서 접근성을 제공하는 방법을 다룬다. 이 자료 는 W3C의 웹 표준 권고안으로 채택될 예정이며, 웹 브라우저 개 발자, 보조 기술 개발자, 사용자 도구나 툴킷 개발자, 접근성 평가 도구 개발자 등을 우선 고려 대상으로 삼는다. l WAI-ARIA 프리미어(WAI-ARIA Primer) 10) : WAI-ARIA 프리미어 는 RIA 콘텐츠와 관련하여 해결하여야 할 접근성 문제, 접근성의 기본 개념 및 기술적 접근방법 등을 소개하는 문서이다. 이 문서 는 W3C 워킹 그룹 규정으로 등재될 예정이다. l WAI-ARIA 적용 기법(WAI-ARIA Best Practices) 11) : WAI-ARIA Best Practices는 웹 콘텐츠 개발자들이 WAI-ARIA를 이용하여 접 근 가능한 RIA 콘텐츠를 개발하는 방법을 수록하고 있다. 이 문서 는 웹 애플리케이션 개발자들을 대상으로 작성되었으나, 사용자 도구 개발자나 보조 기술 개발자들에게도 유용한 내용을 포함하고 있다. 이 문서는 W3C 워킹 그룹 규정으로 등재될 예정이다. l WAI-ARIA 로드맵(WAI-ARIA Roadmap) 12) : 이 문서는 RIA 콘텐 츠를 접근 가능하게 만들기 위한 앞으로의 과정을 소개하고 있다. 뿐만 아니라 그동안 수행하여 온 내용, 앞으로 해결해야 하는 과 제, 일정 등에 관한 사항도 기술하고 있다. 로드맵에 수록되었던 내용 중에서 해결된 사항들은 WAI-ARIA 프리미어 자료로 이관되 어 수록된다. WAI-ARIA에는 새로운 기술적 진화에 대응하는 접근성 향상 방법을 꾸 준히 개발해 나갈 것으로 보인다. 이것을 위하여 WAI에서는 신기술에 대 10) 11) 12)

29 - 5 한 접근성 향상 방법을 제안할 수 있는 기회를 모든 사람들에게 개방하고 있다. 3.1 RIA 기술로 인한 접근성 문제 웹 사이트들이 점점 다양한 신기술과 고도의 사용자 인터페이스 컨트롤 을 제공하고 있다. 그 중 하나가 웹 사이트를 탐험하는데 사용되는 새로 운 컨트롤인 트리 컨트롤(Tree Control)이다. 트리 컨트롤이란 문서의 구 조를 <그림 I - 1>과 같이 계층 구조로 표시하는 방법이다. <그림 I - 1> 은 공룡(Dinosauria) 메뉴의 모습으로 공룡의 이름 앞에 있는 또는 표시는 해당 공룡에 속한 종류를 표시하지 않거나 표시함을 의미한다. 따 라서 Theropods는 상위계층인 Saurischians에 속한 공룡으로 그 하위계층 이 Megalosaurs, Spinosaurs,..., Maniraptors임을 보여주고 있다. 여기서 Maniraptors는 또다시 Oviraptors, Deinonychosaurs, Aves로 구분됨을 보 여준다. 마찬가지로 Deinonychosaurs는 Velociraptors와 Dromeosaurs로 구분됨을 보여주고 있다. 그러나 Oviraptors와 Aves는 하위계층을 보여주 지 않고 있다.

30 - 6 그림 I - 1. 트리 컨트롤 예제 이상과 같이 트리 컨트롤은 문서의 구조를 시각적으로 보여줄 뿐 아니 라 해당 아이템을 클릭하면 해당 아이템의 하위 구조를 보여주거나 하위 문서를 열어 열람할 수 있도록 해준다. 그러나 문서를 계층구조로 표시하 는 것은 새로운 방법이므로 이러한 계층 구조에 익숙하지 않은 사용자, 특히 시각장애인은 처음 사용하는 경우에 매우 당황스럽게 느낄 수 있다. 따라서 보조 기술들이 이러한 컨트롤에 반응할 수 있도록 개발되어야 하 나, 아직까지 이러한 신기술을 따라가지 못하고 있다. 이러한 현상은 앞으 로도 꾸준히 계속될 것이다. 마우스를 이용한 드래그 앤 드롭(drag-and-drop) 기능은 원래 마우스를 대상으로 개발된 기술이므로 이 기능을 키보드로 구현하는 것은 거의 불 가능하다. 만일 드래그 앤 드롭 기능을 키보드만으로 구현한다고 하면, 아

31 - 7 무리 간단한 웹 사이트라고 할지라도 키보드를 누르는 횟수가 엄청나게 늘어날 것이다. Ajax 또는 DHTML 등의 다양한 기술을 웹 콘텐츠 구현에 적용하는 것 도 접근성을 저하시키는 원인이 된다. 예를 들어 웹 페이지가 사용자와의 상호작용을 하거나 시간에 따라 정보가 변화하는 경우에 일부 장애인들은 갱신된 콘텐츠에 대한 정보를 인지할 수 없다. WAI에서는 이상에 열거한 경우와 같이 RIA 기술을 웹 콘텐츠에 적용 함에 있어서 접근성을 제공하기 위하여 보조 기술에 어떤 정보를 어떻게 제공해야 하는 가에 대한 연구 결과를 지속적으로 제시하고 있다. WAI-ARIA는 HTML5.0 임시판 13) 에 일부 반영되어 있다. 3.2 WAI-ARIA 주요 내용 WAI-ARIA는 사용자의 상호작용(예를 들면 상호간의 관계와 현재 상태 등과 같은 속성)을 추가하기 위한 프레임워크를 제공하고 있다. WAI-ARIA가 제시하는 방법을 적용하여 웹 페이지를 구성한다면 몇 개의 Tab 키를 누르는 것만으로도 지정된 영역으로 쉽게 이동할 수 있다. WAI-ARIA 기술규격에서는 웹 콘텐츠 개발자에게 제공하는 6가지 사항 을 규정하고 있다. 1) 메뉴, 트리아이템(treeitem), 슬라이더(slider), 프로그레시브메터 (progressivemeter) 등과 같은 위젯의 용법 2) 헤딩(heading), 영역(region) 및 도표(table) 또는 그리드(grid) 와 같 은 웹 페이지의 구조 표현 방법 13) Editor's Draft, 2009년 1월 14일

32 - 8 3) 위젯의 상태, 예를 들면 체크박스의 체크여부, 메뉴의 팝업여부 (haspopup) 등의 프로퍼티 4) 증권 시세와 같이 갱신된 정보를 얻을 수 있는 페이지의 실시간 영 역을 정의하는 프로퍼티. 또한 정보 갱신에 개입하여 매우 중요한 변화가 있을 경우에는 경고 대화 상자(alert dialog box)를 이용하여 표시하는 등에 관한 사항 5) 드래그 소스(drag source)와 드롭 타겟(drop target) 등과 같은 드래 그 앤 드롭에 관한 프로퍼티 6) 웹 콘텐츠 상의 객체, 이벤트 간을 키보드만으로 이동하는 방법 이상의 6가지 규정에 대한 적용사례를 WAI-ARIA Best Practices에서 기술하고 있다. WAI-ARIA Best Practices에 기술한 적용 사례는 다음의 8 가지이다. 1) 접근 가능한 RIA의 개발 방법 2) 키보드를 이용한 탐색방법 3) 읽는 순서와 레이블 제공방법 4) 문서 관리(Document Management)방법 5) 폼 프로퍼티 (Form Property)관련 기술 6) 드래그 앤 드롭(Drag-and-Drop) 지원 방법 7) 경고(Alert) 및 대화상자(Dialog) 사용방법 8) 접근 가능한 위젯(widget) 구현방법 3.3 HTML 5.0 동향 HTML은 당초 과학 문서를 웹에서 표현하는 언어로 시작되었으나 그 범용성으로 인하여 여러 가지 유형의 문서들을 표현하는데 사용되어 왔 다. HTML 표준으로는 그동안 HTML ) 이 국제 표준으로 사용되어

33 - 9 왔으나 HTML 4.01이 웹 애플리케이션 콘텐츠를 표현하는데 미흡하다는 점 때문에 HTML 5.0의 제정 필요성이 제기되었다. HTML 5.0에 관한 표준 작업은 XForms 1.0의 기능을 HTML 4.01에 추 가하기 위하여 2003년부터 시작되었다. 표준 작업 시작 당시에는 Opera만 이 참여하였다. 2004년 초에는 Mozilla가 참여하였고, 이어서 Apple이 참 여하여 본격적인 표준 개정작업이 진행되었다. 2007년에는 W3C가 표준화 의 필요성을 인지하고 워킹 그룹을 구성하여 표준화 작업을 주도하였다. 그 결과 2008년 1월 22일에 W3C가 저작권을 소유한 첫 번째 초안이 발 표되었다. 현재 HTML 5.0의 최신판 15) 은 2009년 1월 14일자 임시판 (Editor's Draft)이다. HTML 5.0 표준에는 정적인 웹 문서 뿐 아니라 동적 애플리케이션 콘 텐츠를 개발하는 데 필요한 마크업 언어와 관련 스크립트용 API를 정의 하는 내용이 담겨 있다. 애플리케이션 콘텐츠의 종류는 온라인 쇼핑몰, 검 색 시스템, 게임, 온라인 전화번호부, 이메일이나 메신저와 같은 통신 프 로그램, 인터넷 편집 프로그램 등과 같은 콘텐츠로 CPU 성능이 떨어지는 여건에서도 다양한 애플리케이션 콘텐츠를 접하게 되는 경우를 고려하고 있다. RIA 개발 도구와 관련한 특정 제품(예를 들면 Mozilla의 XUL, Adobe 의 Flash 및 Microsoft의 Silverlight)에 대해서는 언급하지 않고 있다. 이 것은 특정 업체의 소프트웨어나 플랫폼을 지지하지 않는다는 W3C의 정 책에 따른 것이다. HTML 5.0에서도 이러한 전략을 고수하고 있다. 브라우저와 관련해서도 HTML 5.0은 특정한 브라우저의 기능을 소개하 14) 년 12월 24일 W3C 표준 15) Editor's Draft, 2009년 1월 14일

34 - 0 기 보다는 브라우저가 가져야 하는 최소한의 기능에 대해서만 기술하고 있다. 특히 접근성을 저해할 수 있는 기능은 HTML 5.0에 포함시키지 않 았다. 예를 들어 일부 브라우저가 blink 태그를 지원하고 있지만, HTML 5.0에서는 blink 태그를 표준으로 포함시키지 않는다. 그 대신 blink 기능 을 웹 콘텐츠에 추가하려면 CSS를 사용하도록 함으로써 접근성 문제를 해결하고 있다. 4. RIA 콘텐츠 접근성 평가방법 이 문서는 접근성 있는 RIA 콘텐츠를 개발하는데 있어서 매우 일반적 인 방법을 제공할 뿐이다. 따라서 이 문서에서 언급하는 사항들이 매우 개념적일 수 있다. 그러나 무엇보다도 중요한 것은 보조 기술 사용자의 관점에서 웹 콘텐츠를 평가해야 한다는 점이다. 웹 콘텐츠 접근성 개념과 비슷하지만 다르게 쓰이는 용어로 웹 콘텐 츠 사용성 이 있다. 웹 콘텐츠 사용성이란 사용자들이 웹 사이트가 제공하 는 웹 콘텐츠의 주요 목적을 얼마나 편리하게 이용할 수 있는가를 의미한 다. 예를 들면 웹 콘텐츠 사용성이 좋은 온라인 뱅킹 사이트는 온라인 뱅 킹 업무를 빠르고 쉽게 처리할 수 있게 만들어져야 한다. 이 문서의 궁극 적인 목표는 접근성도 좋고 사용성도 우수한 웹 사이트를 개발하는 방법 을 제시하는 것이다. 여기서 접근성을 조금 떨어뜨리면 사용성이 크게 개 선될 수 있는 경우와 사용성을 조금 떨어뜨리면 접근성이 크게 향상되는 경우 중에서 한 가지를 택해야 한다면 후자를 선택하여야 한다. 보조 기술이 충분한 기능을 제공하지 못하는 경우에도 웹 콘텐츠의 접 근성이 떨어진다. 예를 들어 신기술이 계속 개발됨에도 불구하고 이들 신 기술에 대한 접근성 지원 방법이 강구되지 않는다면, 이들 신기술을 적용 한 웹 콘텐츠가 웹을 통하여 제공되는 경우에 기능이 떨어지는 보조 기술

35 - 1 을 사용해야 하는 장애인들은 이 웹 콘텐츠에 접근하기가 어렵다. 실제로 이 문서가 제시되는 현 시점에서 볼 때 우리나라에서 사용되는 화면 낭독 프로그램들이 Flash나 Flex, Silverlight와 같은 도구를 사용하여 개발한 RIA 콘텐츠에 대하여 충분한 접근성 기능을 지원하지 못하고 있 는 점은 매우 아쉽다. 그러나 이 문서에서는 장애인들에게 필요한 보조 기술들이 RIA 콘텐츠에 접근하는데 필요한 기능이 충분하다고 가정하고 기술하고 있다. 또한 이 문서는 화면 낭독 프로그램의 기능이나 성능을 평가하는 것이 주목적이 아니므로, 화면 낭독 프로그램의 기능은 키보드 내비게이션에 따른 초점 이동문제와 초점이 제공된 객체에 대한 내용 읽 기 기능을 위주로 기술하였다. 화면 낭독 프로그램의 고유 기능에 관해서 는 이 문서에서 다루지 않았다. 웹 접근성을 평가하는 과정에서 항상 시각장애인의 접근성이 크게 부각 된다. 그 이유는 시각장애인들이 화면을 볼 수 없기 때문에 화면에 표시 되는 웹 콘텐츠를 음성으로 읽어주어야 한다는 점 때문이며, 또한 화면에 나타나는 내용을 읽어주는 과정에서 화면 낭독 프로그램이 웹 콘텐츠 개 발자의 의도를 파악하여 읽어줄 수 있어야 하기 때문이다. 즉 어떤 그림 을 감상할 때에 시각을 사용할 수 있는 사람들은 스스로 그림을 감상하면 서 다양한 감정을 느낄 수 있지만 시각장애인들은 다른 사람의 해설을 통 해서 그림을 감상할 수밖에 없으므로 그 해설이 그림을 정확하게 표현하 고 있는가에 대한 논란을 피할 수 없다. 이러한 이유로 시각장애인의 웹 접근성이 중요하게 부각되고 있다. 동시에 다른 장애에 대한 고려도 필수 적임을 잊지 말아야 한다. 웹 콘텐츠의 접근성을 평가하는 가장 기본이 되는 내용은 다음과 같다. 첫째 텍스트가 아닌 콘텐츠의 대체 텍스트가 제공되는가, 만일 제공되고 있다면 그 내용은 정확한가, 둘째 키보드만으로도 웹 콘텐츠가 제공하는

36 - 2 기능을 모두 사용할 수 있는가, 셋째 초점이 제공된 객체의 내용을 그대 로 읽어주는가 하는 세 가지이다. 물론 이외에도 여러 가지 요구조건이 있지만 이들 세 가지만 정확하다면 웹 콘텐츠의 접근성이 크게 개선될 수 있다. 이는 RIA 콘텐츠의 경우에도 동일하다. 기본적으로 RIA 콘텐츠의 접근성을 평가하는 방법은 다음과 같이 세 가지( )가 있다. 4.1 보조 기술을 이용한 개발 단계 평가 개발자는 RIA 콘텐츠를 지원하는 보조 기술을 사용하여 자신이 개발한 콘텐츠를 직접 테스트해 보아야 한다. 예를 들면 개발자가 화면 낭독 프 로그램을 사용하여 개발한 콘텐츠를 테스트하는 과정을 통하여, 시각장애 인이 웹 콘텐츠를 어떻게 사용하는지를 이해할 수 있기 때문이다. 참고로 보조 기술, 특히 화면 낭독 프로그램을 실행시키면 브라우저의 키보드의 조작방법이 달라지는 경우가 있다. 따라서 개발자는 화면 낭독 프로그램 을 중지시키고 웹 콘텐츠를 테스트해야 할 뿐 아니라, 화면 낭독 프로그 램을 실행시킨 상태에서도 테스트해 보아야 한다. 경우에 따라서는 동일 한 기능을 수행하기 위하여 사용해야 하는 키보드 단축키가 달라질 수도 있다. 개발자는 웹사이트를 평가할 때에 키보드만으로 해당 웹 사이트가 제공 하는 모든 기능을 사용할 수 있는가를 평가해보아야 한다. Tab 키와 Shift + Tab 키를 이용하여 객체 간을 이동하는 과정에서 초점이 이동하는 순 서가 개발자의 의도대로 이동하는지, 그리고 초점이 주어진 객체의 모습 이 화면상에서 구별 가능하도록 변화하는지를 확인한다. 일부 화면 낭독 프로그램의 경우에는 키보드 탐색 시 초점이 화면에서 사라진다. 이 문제 가 화면 낭독 프로그램의 에러인지를 확인하려면, 화면 낭독 프로그램을

37 - 3 중지시키고 웹 콘텐츠를 키보드로 내비게이션하면서 초점이 표시되는지를 확인한다. 만일 화면 낭독 프로그램이 실행될 때에만 초점이 없어지는 현 상이 발생한다면 이는 화면 낭독 프로그램의 에러로 간주할 수 있다. 화 면 낭독 프로그램의 에러가 발견되면 해당 화면 낭독 프로그램 개발자에 게 통보하여 버그를 수정할 수 있도록 한다. 다음으로 초점이 주어진 객체를 개발자가 의도한대로 읽어주는지를 확 인하는 것이 중요하다. 예를 들어 Flash 콘텐츠에서는 텍스트 버튼의 레 이블을 읽어주지만, 액세스 가능성 패널의 name 필드와 description 필드 를 설정하면 레이블을 읽는 대신 name 필드와 description 필드를 읽어 주기 때문이다. 웹 콘텐츠를 탐색하는 과정에서 마우스와 키보드를 병행하여 사용하는 경우에 마우스를 이용하여 객체를 선택하고, 이후에 키보드로 탐색을 계 속하려고 하면, 키보드에 의한 탐색 시작 위치가 마우스로 선택한 객체로 부터 시작되어야 한다. 그런데 이 과정에서 종종 임의의 객체에 초점이 주어지는 경우가 발생하는 것은 화면 낭독 프로그램의 에러이다. 따라서 웹 콘텐츠 개발자는 이러한 화면 낭독 프로그램의 문제점을 사전에 파악 하고 웹 콘텐츠를 테스트해야 한다. 이러한 현상이 발견되면 그 내용을 해당 화면 낭독 프로그램 개발자에게 통보하여 버그를 수정하도록 한다. 우리나라에서 구입이 가능한 화면 낭독 프로그램은 엑스비젼테크놀로지 사의 센스리더(Sense Reader), 실로암시각장애인복지관에서 무료로 배포 하는 드림보이스(Dream Voice) 6.0 및 미국 Freedom Scientific사의 Jaws for Windows 10 한국어 버전 등이다. 이 문서의 신기술을 이용한 웹 콘 텐츠의 구현 예에서는, 이들 세 가지 화면 낭독 프로그램을 설치하여 사 용할 때 키보드 내비게이션에 의한 초점 이동시 문제가 발생하는지 여부 를 확인하였으며, 초점이동시 레이블 및 대체 텍스트를 읽어주는지 여부

38 - 4 를 확인하였다. 이 문서의 주목적은 이들 세 가지 화면 낭독 프로그램의 기능이나 성능 을 평가하는 것이 아니다. 그럼에도 불구하고 이 문서에서 화면 낭독 프 로그램에 대한 시험 결과를 제시하는 것은, 개발자들이 자체평가 단계에 서 어떤 문제점에 봉착했을 때에 이것이 웹 콘텐츠 자체의 문제인지, 아 니면 화면 낭독 프로그램으로 인해 발생한 문제인지를 구별할 수 있는 기 준을 제시하기 위함이다. 앞서 제시한 세 가지 화면 낭독 프로그램은 초 점이 주어진 요소를 읽어주는 것 외에도 매우 많은 기능을 가지고 있다. 그러나 이 문서에서는 여타의 기능에 대해서는 실험하지 않았다. 이들 화 면 낭독 프로그램에 대한 자세한 기능과 웹 콘텐츠의 내비게이션에 관한 기능 등은 각각의 화면 낭독 프로그램과 함께 제공되는 기술 자료나 웹 사이트를 참고하라. 4.2 자동평가도구의 사용 웹 콘텐츠를 평가하는 가장 간단한 방법은 자동평가도구, 즉 기계적으 로 접근성 준수 여부를 평가하여 그 결과를 제시해 주는 방법이다. 국내 에서는 KADO-WAH라는 자동평가 도구를 무료로 다운받아 사용할 수 있 으며 이 평가도구를 이용하면 국내외 웹 접근성 지침에 따라 웹 페이지를 자동으로 점검한 후에 그 문제점을 보고서로 확인할 수 있다. 요즈음 브라우저는 웹 콘텐츠를 읽어 들여 표시하는 과정에서 웹 콘텐 츠의 문법 에러를 알려준다. 그중에서도 Firefox가 디버깅에 있어서 많이 사용되고 있다. Firefox는 다른 브라우저와는 달리 코드의 에러가 있는 곳 을 지적할 뿐 아니라 코드 상의 잘못이 무엇인지도 정확히 설명한다. 특 히 Firefox는 디버깅 콘솔을 제공하여 웹 콘텐츠의 디버깅을 편리하게 도 와준다. 아래 그림은 Firefox의 에러 및 소스 보기 창을 연 상태이다.

39 - 5 그림 I - 2. Firefox의 에러 및 소스 보기 창을 연 화면 Firefox가 디버깅 능력이 탁월하다고 하더라도 웹 콘텐츠의 논리적 에러 를 찾아내는 것까지 도와주지는 않는다. 이 부분은 전적으로 개발자의 몫 이다. 뿐만 아니라 자동평가도구는 대체 텍스트의 정확성과 같은 정성적 인 평가는 불가능하므로 자동평가도구를 이용하여 평가한 결과가 완벽하 다고 해서 접근성을 완전히 지원하는 것은 아니라는 점을 잊지 말아야 한 다. Microsoft사에서는 Internet Explorer와 함께 사용할 수 있는 HTML 태 그를 정확하게 사용했는지를 평가할 수 있는 툴바(tool bar)인 Internet

40 - 6 Explorer Developer Toolbar 16) 를 제공한다. 이 툴바를 사용하면, 브라우저 에 웹 콘텐츠의 DOM(Document Object Model) 17) 에 따른 문서 구조를 표 시해준다. DOM이란 프로그램이나 스크립트가 문서 내용, 구조 및 스타일 에 동적으로 접근하거나 갱신하기 위한 인터페이스이다. 뿐만 아니라 툴바는 Internet Explorer를 디버깅과 평가도구로 사용할 수 있도록 도와준다. 툴바를 이용하면 CSS를 보여주거나 이미지의 대체 텍스트를 표시할 수 있으며, HTML 태그의 이름을 찾거나 속성, CSS 프 로퍼티를 검사하는데도 사용할 수 있다. Internet Explorer Developer Toolbar는 Microsoft 사이트로부터 다운받을 수 있다. 아래 <그림 I - 3> 은 Internet Explorer Developer Toolbar를 설치한 화면으로 브라우저의 하단에 디버깅에 필요한 3개의 창이 설치되어 있다. 16) -2d5e1db91038&DisplayLang=en 17)

41 - 7 그림 I - 3. Internet Explorer Developer Toolbar를 설치한 화면 자동평가도구는 아니지만 웹 콘텐츠의 MSAA(Microsoft Active Accessibility) 지원 여부를 평가하는 도구로 Microsoft사에서 개발한 도구 인 Inspect32 18) 를 사용할 수 있다. 아래 그림은 Inspect32의 실행화면이다. 18)

42 - 8 그림 I - 4. Inspect32의 실행화면 Inspect32는 웹 콘텐츠의 개발시 보조 기술을 이용하지 않고 접근성의 지원 여부를 평가할 수 있는 도구이다. Inspect32는 GUI 컴포넌트의 프로 퍼티인 컴포넌트의 이름(name), 설명(description), 용도(role), 상태(state) 등을 파악하여 알려준다. 또한 Microsoft사의 AccEvent와 AccExplore를 Inspect32와 함께 사용하 면, GUI나 문서 구성요소와 관련한 이벤트가 발생하였을 경우에 이를 모 니터링하거나 보조 기술에 의하여 접근가능한 객체간의 계층구조를 탐색 할 수 있다. Inspect32, AccEvent 및 AccExplore를 다운받을 수 있는 사이 트는 관련 Microsoft 사이트를 참조하라. Inspect32와 유사한 기능을 가지고 있는 MSAA 평가도구인 Parasoft사 의 WebKing 19) 은 웹 애플리케이션 콘텐츠 개발자들이 웹 페이지를 수집 19)

43 - 9 하여 각 페이지 별로 접근성을 분석한 후 그 결과를 보고해준다. WebKing은 적용할 접근성 표준에 적합한 보고서를 만들어 제공함으로써 다양한 접근성 표준을 적용할 수 있는 장점이 있다. WebKing에 관한 사 용법 및 프로그램은 Parasoft사 웹사이트로부터 다운받을 수 있다. 4.3 전문가 및 사용자 평가 자동평가 결과는 기계적으로 접근성 준수여부를 평가하여 그 결과를 제 시해주므로 참고용으로만 사용해야 한다. 가장 확실하고 최종적인 평가방 법은 전문가 또는 장애인 사용자에 의한 평가이다. 이것은 개발된 콘텐츠 의 수준과 질을 실제 사용자 관점에서 평가받을 수 있는 가장 확실한 방 법이다. 이 방법을 통해서 자동평가도구를 이용한 평가에서 하지 못했던 대체 텍스트의 정확성과 웹 콘텐츠 사용상의 기능 오류 등도 찾아낼 수 있다. 그러나 전문가 평가는 비용이 수반되기 때문에 여러 차례 수행할 수 있 는 방법은 아니다. 대개의 경우 사용자 평가는 웹사이트를 공개하기 직전 에 한번 수행하게 된다. 5. 웹 접근성 관련 웹 사이트 5.1 웹 표준 관련 웹 사이트 정보통신 접근성 향상 표준화 포럼 : 한국 웹 접근성 연구소 : 미국 연방정부 508조 사이트 :

44 - 0 W3C Web Content Accessibility Guidelines (WCAG) 소개: / intro/wcag.php W3C WAI-ARIA : W3C Document Object Model (DOM) : 영국 인권 위원회(The Web: Access and Inclusion for Disabled P eople) : dresources/pages/webaccess.aspx 캐나다 Common Look and Feel Standards for Internet 2.0 : http: // Japanese Industrial Standard X : dex.html 5.2 JavaScript 관련 웹사이트 W3C DOM(Document Object Model) : JavaScript Tutorial : JavaScript Objects Introduction : s_obj_intro.asp JavaScript Advanced : JavaScript Examples : JavaScript Reference : HTML DOM Window Object : dom/dom_obj_window.asp HTML DOM Examples : dom_examples.asp HTML DOM Window Object : dom/dom_obj_window.asp JavaScript Tutorial for Programmers :

45 - 1 thoring/javascript/tutorial/ JavaScript:세상에서 가장 오해가 많은 프로그래밍 언어 : ome.postech.ac.kr/~skyul/javascript.html JAVASCRIPT KIT: Mozilla JavaScript : Mozilla DOM : Mozilla AJAX : MicroSoft JScript : c2t98(vs.85).aspx JScript Fundamentals (Windows Scripting - JScript) : n.microsoft.com/en-us/library/6974wx4d(vs.85).aspx Advanced JScript (Windows Scripting - JScript) : crosoft.com/en-us/library/b9w25k6f(vs.85).aspx Introduction to Regular Expressions (Scripting) : crosoft.com/en-us/library/6wzad2b2(vs.85).aspx Microsoft JScript Features - ECMA (Windows Scripting - JScript) : Microsoft JScript Features - Non-ECMA (Windows Scripting - JScri pt) : JScript Errors (Windows Scripting - JScript) : oft.com/en-us/library/7th8s2xk(vs.85).aspx JScript Functions (Windows Scripting - JScript) : crosoft.com/en-us/library/6fw3zxcx(vs.85).aspx JScript Methods (Windows Scripting - JScript) : rosoft.com/en-us/library/c6hac83s(vs.85).aspx JScript Objects (Windows Scripting - JScript) : soft.com/en-us/library/htbw4ywd(vs.85).aspx JScript Operators (Windows Scripting - JScript) :

46 - 2 crosoft.com/en-us/library/ce57k8d5(vs.85).aspx JScript Properties (Windows Scripting - JScript) : crosoft.com/en-us/library/xyad316h(vs.85).aspx JScript Statements (Windows Scripting - JScript) : icrosoft.com/en-us/library/3xcfcb93(vs.85).aspx JScript Blog : Prototype(JavaScript framework) : jquery : Flex 관련 웹 사이트 Adobe 접근성 사이트 : ducts/flex Adobe Accessibility Overview : lity/products/flex/overview.html Using Adobe Flex Application with JAWS : e.com/accessibility/products/flex/jaws.html Adobe Accessibility Best Practice for Flex : m/accessibility/products/flex/best_practices.html Adobe Accessibility Examples : s/accessibility/examples.html Adobe White Papers : ssibility/whitepapers/ Adobe Accessibility Validate : dia/accessibility/gettingstarted/validate.html Adobe Accessibility Blogs : Yahoo Flash와 Flex의 접근성 : 008/07/22/accessible-trueflash-and-flex-accessibility-docs/

47 - 3 Flex 접근성 개요 : Flex 접근성에 대한 best practice : com/2008/02/accessibility-best-practices-for-flex.html RIA Accessibility with Flex : nity/node/1746 Adobe Flex에서의 접근성 : y-in-adobe-flex.html Flex and Accessibility by Giorgio Natil : /ted/2008/09/360flex-sj-2008-flex-and-accessibility.php Accessibility with Files FLEX : Flex Documentation : essible_5.html Flex 2.0 Keyboard Documentation : ex/3/html/accessible_5.html Controls : /ch08c.asp Guidelines for Keyboard User Interface Design : icrosoft.com/en-us/library/ms aspx 5.4 Flash 관련 웹 사이트 Adobe 접근성 사이트 : Adobe Accessibility Overview : lity/products/flash/author.html Adobe Flash Accessibility Design Guideline : com/accessibility/products/flash/best_practices.html Adobe Flash White Papers : /whitepapers/

48 - 4 Flash 자습서 페이지 : Flash 접근성 웹 사이트 : sibility_kr/ Flash 샘플 페이지 : 멀티미디어 접근성 지침 사이트 : /papers/arch with_celic_/paper.html 접근 가능한 Flash 콘텐츠 제작 사이트 : /techniques/flash/ Flash의 접근성 문제 : essibilityintrouble1flash Flash와 접근성 : Flash 접근 : HP.com에서의 Flash 사용 : en/flash_info.html Flash MX 접근성 문제 : flash_info.html Macromedia Flash : 장애인의 Flash 접근성과 사용성 : orts/accessibility/flash/ Detecting Assistive Technologies : /blog/?p=61 Information and news about accessibility for people with disabilit ies in Adobe products : MSAA 관련 사이트 Active Accessibility 2.0 Documentation : m/library/default.asp?url=/library/en-us/msaa/msaastart_9w2t.asp

49 - 5 MS Active Accessibility 2.0 SDK Tools (Inspect32, AccExplore32, AccEvent32) : FamilyId= A-A A-BF E13F0&displaylang=en Microsoft Active Accessibility: Architecture : oft.com/library/default.asp?url=/library/en-us/dnacc/html/actvac cess.asp 5.6 DFXP(Distribution Format Exchange Profile) 자막 생 성 소프트웨어 관련 웹 사이트 MAGpie : Media Access Generator ( ccess/magpie/) Captionate : Manitu Group ( Caption Wrap : Mark Hall Sales Associates ( s/flashcap.html) Hi-Caption Studio : Hi-Software( Softel Swift : Subtitle-horse : 화면 낭독 프로그램 관련 웹 사이트 센스리더 엑스비젼테크놀로지 센스리더 : /xvision_eng/ 드림보이스 실로암시각장애인복지관 드림보이스 : wel.or.kr/ Jaws for Window : /jaws-downloads.asp

50 - 6 Jaws for Window 한국어 음성파일 : /downloads/realspeak-solo-direct-voices/realspeak-solo-direct- Downloads.asp

51 - 7 II. 접근성 있는 JavaScript 제작기법 1. JavaScript 개요 JavaScript는 HTML, CSS(Cascade Style Sheet)와 함께 현대적인 웹 페 이지를 구축하기 위한 세 가지 요소 중 하나이다. HTML은 웹 페이지의 구조를 제공하며, CSS는 웹 페이지의 표현 스타일을 제공하고, JavaScript 는 웹 페이지에서 특정 기능을 수행하는 역할을 담당한다. 이 과정에서 프로그램이나 스크립트는 웹 문서의 내용, 구조 및 스타일에 관한 정보에 접근하거나 갱신하기 위하여 DOM(Document Object Model)이라는 인터 페이스를 이용한다. 웹 콘텐츠는 HTML과 CSS를 가지고도 어느 정도의 기능을 수행할 수

52 - 8 있으나 실제로는 그 기능이 매우 제한적이다. 이와는 달리 JavaScript는 사용자가 버튼을 클릭하거나 브라우저 창의 크기를 조정하기도 하고 텍스 트 필드에 데이터를 입력하는 등과 같이 웹 페이지 내부에서 일어나는 이 벤트를 감지하고 이에 따른 조치를 취할 수 있다. 또한 JavaScript는 일종 의 프로그래밍 언어이므로 계산을 수행하거나 웹 페이지의 구성요소를 동 적으로 변경할 수 있다. 특히 입력한 데이터의 유효성을 검증하는 것과 같은 상호작용도 가능하다. JavaScript의 이러한 기능을 이용하면 웹 페이 지의 일부 정보를 교체하더라도 웹 페이지 전체를 리로드(reload)할 필요 가 없어서 웹 페이지를 역동적으로 만들 수 있다. 제 II장에서는 JavaScript를 이용하여 웹 콘텐츠를 제작하는 과정에서 접근성을 제공하기 위하여 고려해야 하는 사항을 기술한다. 따라서 이 문 서에서 제시한 절차에 따라 개발된 웹 콘텐츠는 보조 기술을 사용하는 장 애인들에게 접근 가능한 웹 콘텐츠가 될 것이다. 그러나 이 문서에서는 JavaScript 코드를 작성하는 데 필요한 전반적인 내용을 기술하지는 않는 다. 단지 JavaScript 코드를 개발하는 과정에서 접근성을 지원하기 위하여 지켜야 하는 최소한의 지침에 대하여 설명하고 필요한 예를 제공할 뿐이 다. JavaScript, HTML, CSS 및 DOM에 관한 자세한 사항은 관련 자료나 W3C 사이트를 참고하도록 하라. 1.1 DOM과 DOM 스크립트 DOM(Document Object Model)은 프로그램이나 스크립트를 사용하여 문서의 내용, 구조 및 스타일에 접근하거나 갱신할 수 있도록 인터페이스 를 정의한 것이다. DOM은 HTML이나 XML과 같은 마크업 언어의 문서 구조와 이들 문서의 일부분을 변경할 수 있는 수단에 관한 표준이라고 할 수 있다. 여기서 DOM을 다루는 프로그래밍 기법을 DOM 스크립트라고 한다. 일반적으로 DOM 스크립트는 JavaScript를 의미한다.

53 - 9 DOM 표준은 W3C에서 제정하였다. W3C는 1998년에 DOM Level 1을 발표하였다. DOM Level 1은 HTML이나 XML 문서를 완벽하게 지원할 뿐 아니라 문서의 어떤 부분도 변경할 수 있는 수단도 제공하였다 년 하반기에 발표한 DOM Level 2는 처음으로 getelementbyid 함수와 이벤트, 그리고 XML 네임 스페이스와 CSS를 지원하기 시작하였다 년 4월 발표한 DOM Level 3는 XPath와 키보드 이벤트 핸들링을 지원할 뿐 아니라 XML과 같이 문서를 시리얼라이징(serializing) 할 수 있는 인터 페이스를 제공하였다. 2005년에는 JavaScript 20) 를 지원하는 브라우저인 Internet Explorer 6.0, Mozilla, Firefox, Opera, Safari 등이 W3C DOM의 많은 부분을 지원하게 되었다. 이로써 DOM을 지원하는 브라우저들 간에는 문서의 호환성이 존 재하게 되었다. 뿐만 아니라 DOM은 플랫폼, 운영체제 및 사용하는 스크 립트 언어와는 독립적인 구조로 되어 있다. JavaScript는 HTML과 CSS로 구성된 문서에 동적인 효과를 줄 수 있다 는 점에서 많은 인기를 누리고 있다. 그동안 정적이었던 웹 페이지에 동 적인 변화를 추가한 결과는 매우 충격적이어서 JavaScript를 이용하여 개 발한 웹 콘텐츠를 DHTML(Dynamic HTML)이라고 부르기도 하였다. JavaScript는 초기에 주로 마우스에 반응하는 메뉴나 간단한 애니메이션 효과를 구현하는데 사용되었다. 예를 들어 마우스를 따라다니는 이미지를 만들어 넣는다거나 화면에 눈을 내리게 하는 효과 등이 그것이다. DHTML과 DOM 스크립팅을 명확히 구분하는 것은 쉬운 일이 아니다. DOM 스크립팅은 DHTML에 뿌리를 두고 있다. 그러나 DOM 스크립팅 20) JavaScript는 Netscape가 ECMA-262를 기준으로 구현한 스크립트 언어임. 때론 ECMAScript 라고도 함.

54 - 0 이 보다 구조적이라고 할 수 있다. DOM 개념과 DOM 메쏘드를 이용하 기 이전의 스크립트 코딩 방법을 DHTML이라고도 하며, 그 이후의 스크 립팅을 DOM 스크립팅이라고 구분하기도 한다. DHTML이 DOM에 비하 여 시기적으로 먼저 제시되었으므로 크로스 브라우징의 개념이 상대적으 로 약하다. DHTML에서는 브라우저별로 서로 다른 객체 참조 구문을 사 용하기 때문에 서로 다른 브라우저에서는 잘 작동하지 않는 경우가 많았 다. 이에 비하여 최신의 브라우저들은 모두 DOM을 지원하고 있으므로 DOM인터페이스를 사용하여 스크립트를 코딩할 경우에는 대부분의 브라 우저에서 동일한 효과와 기능을 제공할 수 있다. 따라서 DOM 스크립팅 에 의하여 크로스 브라우징이 가능한 웹 콘텐츠를 훨씬 편리하게 개발할 수 있게 되었다. DOM 스크립트는 여러 가지 프로그램 언어로 구현이 가능하지만 이 문 서에서는 JavaScript를 이용하는 것으로 간주한다. 그 이유는 모든 브라우 저가 지원하는 스크립트 언어가 JavaScript이기 때문이다.

55 - 1 그림 II - 1. Internet Explorer에서의 웹 콘텐츠 DOM구조 1.2 JavaScript 프로그램의 확장 JavaScript가 보편화되고 적용 기법들이 계속 발전함에 따라서 JavaScript를 이용하는 새로운 개념들이 등장하게 되었다. 그 중에서 가장 대표적인 경우가 바로 Ajax(Asynchronous JavaScript and XML)이다. 이 는 비동기 JavaScript와 XML을 의미하며, JavaScript가 웹 서버와의 비동 기 통신을 통하여 필요한 데이터를 얻어서 이를 화면에 반영하므로 화면 제어를 보다 세밀하게 할 수 있고, 동시에 웹 콘텐츠와 사용자간의 상호 작용을 계속할 수 있는 특징이 있다.

56 - 2 Ajax 기술의 핵심은 클라이언트와 웹 서버간의 비동기 통신 (XMLHttpRequest) 방법 21) 이다. 또한 통신 방식의 표준을 제정할 필요성 이 대두됨에 따라 W3C에서는 XMLHttpRequest에 관한 초안(2008년도 4 월)을 제안한 바 있다. Ajax 기술이 발전함에 따라 데스크 톱 소프트웨어(Desktop Software)를 웹에서도 제공할 수 있게 되었다. 웹에서 제공하는 애플리케이션 콘텐츠 를 리치 인터넷 애플리케이션 콘텐츠(RIA: Rich Internet Application Content)라고 하며, 그 중심에 JavaScript와 비동기 통신 기법인 XMLHttpRequest가 위치하고 있다. 웹 콘텐츠를 개발함에 있어서 새로운 개념의 도입은 접근성 측면에서 새로운 부담이 될 수 있다. 그러나 이러한 우려는 접근성에 대한 잘못된 이해로부터 출발한다. 접근성을 준수하여 웹 콘텐츠 또는 웹 애플리케이 션 콘텐츠를 개발하는 것은 다양한 사용자를 존중하고 다양한 환경에서도 무리 없이 작동하는 고품질의 콘텐츠를 만들기 위함이다. 따라서 좋은 웹 콘텐츠 또는 좋은 웹 애플리케이션 콘텐츠는 반드시 웹 접근성을 준수하 여야 한다. 접근성을 준수하는 과정에서 부분적인 비용의 증가가 예상된다. 그러나 이 비용은 웹 콘텐츠의 완성도를 높이는 비용으로 보아야지 단순히 접근 성을 제공하기 위한 비용으로 간주하는 것은 옳지 않다. 이를 반영하듯이 W3C에서는 Ajax나 RIA와 같이 JavaScript와 관련한 새로운 패러다임에 대응하는 접근성 표준을 계속 제안하고 이를 준수하도록 권고하고 있다. 21)

57 웹 접근성과 JavaScript 2.1 JavaScript에 관한 오해 JavaScript는 잘 사용하면 사용자에게 좋은 경험을 제공할 수 있지만 잘 못 사용할 경우에는 오히려 사용자에게 좋지 못한 경험을 제공하거나 접 근성을 떨어뜨리는 요인이 된다. 접근성이 떨어지는 대부분의 이유는 JavaScript를 잘못 사용하거나 호환성이 없는 코팅 방법에 기인한다. JavaScript는 다른 웹 개발 언어와는 달리 사용자 환경인 브라우저에서 작동하게 된다. 그런데 브라우저는 종류도 매우 다양하고 브라우저 별로 기능도 서로 다르다. 따라서 JavaScript의 접근성을 다룰 때에는 흔히 JavaScript가 없는 상황 을 전제로 하는데 이는 JavaScript를 사용하지 않 는 경우라기보다는 문제를 일으키지 않는 이상적인 환경을 의미하는 것으 로 보아야 한다. 실제로 이상적인 환경을 가정하여 개발한 웹 콘텐츠는 접근성을 제공할 뿐 아니라 구조적인 견고함으로 인하여 모바일 환경과 같은 다양한 환경에서도 높은 호환성을 제공한다. 우리나라에서는 보안을 강화한다는 이유로 JavaScript를 이용하여 불필 요한 처리를 하는 경우가 많다. 예를 들면 URL을 보이지 않게 한다든가, 링크를 JavaScript로 처리한다든가, 서식의 전송 기능을 JavaScript로 처리 하는 등이 바로 그것이다. 결론적으로 말하자면 이러한 JavaScript 코딩 방법들은 콘텐츠의 보안에는 전혀 도움이 되지 않을 뿐 아니라 접근성과 사용성을 크게 저하시킨다. URL을 보이지 않게 하는 일은 사용자가 피싱 에 노출되었을 때 스스로 방어할 수 없게 되는 문제를 야기하기도 한다. 이러한 잘못된 인식으로 인하여 정작 서버 측의 보안을 등한히 하는 경우 도 종종 발생하고 있다.

58 접근성 있는 JavaScript 코딩 방법 접근 가능한 웹 콘텐츠를 개발하는 과정에서 JavaScript를 적용하는 방 법에는 세 가지가 있다. 첫째는 JavaScript 코딩시에 접근성을 크게 고려 하지 않고 우선 웹 콘텐츠를 개발하고, 이후에 접근성을 떨어뜨리는 부분 을 하나씩 해결해 나가는 방법이다. 둘째는 HTML과 CSS를 사용하여 우 선 웹 콘텐츠를 구현하고, 상호작용이 필요한 부분을 JavaScript로 코딩하 는 방법이다. 세 번째 방법은 두 번째 방법에서 JavaScript로 코딩하는 부 분을 스크립트를 제거하더라도 웹 콘텐츠의 이용에 문제가 없는 수준까지 로 제한하는 방법이다. 이상의 세 가지 방법을 자세히 살펴보기로 하자 적절한 낮춤(Graceful Degradation) JavaScript를 이용하여 접근성을 지원하는 웹 콘텐츠를 개발하는 과정 에서 HTML, CSS 및 JavaScript를 이용하여 코딩하고, 접근성이 떨어지는 부분의 JavaScript 부분을 대체기법을 이용하여 보완하는 방법이다. 이 방 법은 고도의 JavaScript 코딩방법을 우선 적용한 후에 접근성을 제공할 수 없는 스크립트 부분을 HTML이나 CSS로 재작업을 하게 된다. 따라서 높 은 기술 수준의 스크립트를 낮은 수준의 HTML이나 CSS 코딩으로 대체 해 나가므로 이를 적절한 낮춤 이라고 한다. 일반적으로 접근성을 지원하는 코딩방법이 어렵거나 보조 기술의 한계 가 있는 개발방법을 높은 수준의 기술이라고 하고, 반대로 HTML 기술을 가장 낮은 단계의 기술이라고 할 수 있다. 예를 들어 Flash, Flex, JavaScript 등을 이용한 코딩 기술이 높은 수준의 기술이라고 할 수 있으 며, 그 다음은 CSS, 그리고 HTML 기술의 순서로 기술수준이 낮다고 할 수 있다.

59 - 5 아래 보인 코드는 JavaScript로 구현한 프로그램으로 문서의 일부 영역 에 도움말 링크를 동적으로 제공하는 코드이다. 이 부분은 JavaScript를 지원하지 않는 상황에서도 접근성을 보장하기 위해서 <noscript> 요소를 이용해서 대체 콘텐츠를 제공하고 있다. 따라서 기술 수준의 적절한 낮춤 을 통해 접근성을 향상시키고 있다. <그림 II- 2>는 스크립트를 지원할 때 와 지원하지 않을 때의 브라우저 모습을 보여준다. O (Good) <script type= text/javascript > var width = 600; document.write( <div id= sublayer style= width: + width + > ); document.write( <p><a href= help.html >도움말</a></p> ); document.write( </div> ); </script> <noscript> <p><a href= help.html >도움말</a></p> </noscript> 그림 II - 2. 스크립트가 작동할 때(좌)와 작동하지 않을 때(우) 적절한 낮춤 방법을 적용하면 신기술을 사용할 때, 신기술을 지원하지 않는 환경에 대한 접근성을 보장할 수 있다. 특히 신기술이 제공하는 기

60 - 6 능이 매우 많고 복잡한 경우에 핵심기능만을 간추려서 대체 콘텐츠를 제 공할 수 있기 때문에 효과적으로 접근성을 보장할 수 있다. 여기서 신기 술이라 함은 우리나라의 보조 기술이 지원하지 못하는 기술을 의미한다. 예를 들어 우리나라의 화면 낭독 프로그램이 JavaScript를 충분히 지원하 지 못하고 있으므로, JavaScript를 이용한 웹 콘텐츠 구현 기술은 신기술 로 분류될 수 있다. 만일 우리나라에서 구입 가능한 화면 낭독 프로그램 이 JavaScript를 충분히 지원하게 된다면 JavaScript는 더 이상 신기술로 분류되지 않을 것이다 점진적 향상(Progressive Enhancement) 코딩 기술의 점진적 향상은 적절한 낮춤과는 반대 개념으로 접근성을 낮은 수준에서부터 제공하도록 하는 것이다. 접근 가능한 웹 콘텐츠나 웹 애플리케이션 콘텐츠를 구현하고자 할 경우에 핵심 기능과 부가 기능을 분리하여 핵심 기능은 낮은 수준의 기술로 구현하고, 부가 기능은 높은 수준의 기술로 구현하는 것이다. 예를 들면 웹 콘텐츠의 내용은 HTML로 구성하고, 웹 페이지의 디자인은 CSS를 이용하여 구현하며, 마지막으로 동적인 기능은 JavaScript를 이용하여 구현하는 것이다. 아래의 프로그램은 도움말 링크를 클릭했을 때 해당 페이지로 이동하 는 코드의 예를 보여준다. 이 예에서 보듯이 핵심 부분인 내용과 링크는 HTML로 구성하고, 나머지 기능은 JavaScript로 구현하였다.

61 - 7 O (Good) <div id= sublayer > </div> <p><a href= >도움말</a></p> <script type= text/javascript > var width = 600; document.getelementbyid( sublayer ).style.width = width + px ; </script> 점진적 향상 방법을 적용하기 위해서는 먼저 콘텐츠나 기능의 핵심을 파악하는 것이 중요하다. 핵심 기능과 부가적인 기능을 어떻게 판단할 것 인가가 점진적 향상 방법의 핵심이라고 할 수 있다. 요즘과 같이 대화형 웹 애플리케이션 콘텐츠를 선호하는 상황에서는 자칫 효과와 관련한 기능 을 필수 기능으로 오해하기 쉬우나, HTML 수준에서 제공할 수 있는 아 주 기본적인 기능들이 필수 기능임을 명심해야 한다 겸손한 구현(Unobtrusive) 점진적 향상 방법은 결국 웹 콘텐츠를 내용, 표현, 기능의 세 가지로 분리하여 내용과 표현을 먼저 구현하고, 여기에 구현 기능을 추가하게 된 다. 극단적으로는 이들 세 가지 웹 콘텐츠 구성요소를 완전히 분리하여 접근성을 높이려는 시도가 바로 겸손한 구현 방법이다. 따라서 2.2.2절에 서 설명한 점진적 향상 기법을 기술적인 관점, 특히 JavaScript의 관점에 서 해석한 것이 겸손한 구현방법이라고 볼 수 있다. JavaScript는 DOM 메쏘드를 사용해서 동적으로 HTML이나 CSS 코드 를 수정, 추가 또는 삭제할 수 있다. HTML 코드에 들어있는 이벤트 핸들 러를 모두 JavaScript로 옮기는 것도 가능하다. 이렇게 기능과 관련한 JavaScript 이벤트 핸들러나 HTML 문서 내에 삽입된 JavaScript를 모두

62 - 8 분리해 낼 수 있다. HTML과 JavaScript가 완전히 분리된 상태에서는 HTML 문서가 독립적으로 의미를 갖고 기능을 할 수 있다. 이 상태에서 JavaScript는 HTML 문서 안에 포함되어 있지도 않고 지나친 개입도 하지 않는다. 자신의 역할이 필요할 때에만 HTML 문서와 기능적으로 교류하 게 된다. 따라서 JavaScript가 지나치게 개입하지 아니하므로 이를 겸손한 구현방법이라고 부른다. 아래의 코드는 마우스를 이미지 위에 올렸을 때 이미지가 바뀌는 기능 을 JavaScript로 구현한 것이다. 스크립트에서 먼저 함수를 선언하고 이를 HTML의 onmouseover 이벤트 핸들러를 이용하여 연결하였다. 여기서 이벤트는 JavaScript가 제공하는 기능이고 링크는 HTML이 제공하는 기능 이다. HTML 속성 내에서 이벤트를 부여하였기 때문에 JavaScript 코드가 HTML내에 포함되어 있다. X (Bad) <script type="text/javascript"> function changeimage(img) { </script> <p> img.src = img.src.replace(".gif", "_on.gif"); <a href="about.html"> </p> <img src="introduction.gif" onmouseover="changeimage(this)" alt="소개"></a> 위의 예제를 겸손한 구현 방법을 이용하여 구현하려면, 우선 HTML 부 분과 JavaScript 부분으로 구분한다. 다음은 HTML 코딩 부분으로 스크립 트를 완전히 분리해 내었음을 알 수 있다. HTML 코딩 부분에서는 연결 자(about-image)와 스크립트를 불러오는 구문만을 넣고 나머지 모든 기능

63 - 9 은 아래와 같이 JavaScript 파일인 changeimage.js로 분리하여 구현하였 다. O (Good) <script type="text/javascript" src="changeimage.js"></script> <p><a href="about.html"><img src="introduction.gif" id="about-image" alt="소개"></a></p> changeimage.js는 다음과 같다. JavaScript 부분에는 아무런 HTML 코 드가 포함되어 있지 않음을 알 수 있다. O (Good) window.onload = function () { document.getelementbyid("about-image").onmouseover= function changeimage() { this.src = this.src.replace(".gif", "_on.gif"); JavaScript 코딩시에 간단한 기능을 수행하는 스크립트를 위의 예와 같 이 분리하는 작업이 오히려 번거로울 수 있지만, 기능이 많아지고 복잡할 수록 점차 장점이 늘어난다. 기능을 구별함으로써 각각의 코드들이 간단 해지고 웹 콘텐츠의 크기도 줄어들게 된다. 그리고 HTML 자체적으로 모 든 기능을 할 수 있기 때문에 자연히 접근성도 향상된다.

64 JavaScript 접근성 지원 프로그래밍 지침 이 지침에서는 JavaScript 프로그램을 포함하는 웹 콘텐츠가 접근성을 제공하기 위해서 JavaScript 프로그램이 지켜야할 코딩 방법을 제시한다. 제시하는 코딩 방법의 순서는 우리나라 국가 표준인 인터넷 웹 콘텐츠 접근성 지침(Internet Web Contents Accessibility Guideline; KICS.OT ; ) 의 순서에 따르기로 한다. 이 지침에서는 인터넷 웹 콘텐츠 접근성 지침을 국가표준 이라고 하며, 국가표준의 지침 순서에 의거하여 JavaScript 접근성 지원 프로그래밍 지침의 기술 순서를 정한다. 우선 접근성 준수 여부와 관계없이 웹 콘텐츠에 포함되는 JavaScript 코 드는 JavaScript 문법을 준수하여야 한다. 뿐만 아니라 코드상의 오류나 실행시에 오류가 발생하지 않아야 한다. JavaScript에 관한 문법은 관련 도서를 참고하라. 이 절에서는 웹 콘텐츠가 접근성을 제공하기 위해서 JavaScript 프로그 램이 지켜야할 코딩 방법을 제시한다. 3.1 (대체 텍스트 제공) 텍스트가 아닌 콘텐츠 에는 대체 텍스트를 제공하여야 한다. 국가표준 <항목 1.1>에 따르면, 텍스트가 아닌 콘텐츠 (예를 들어 이미 지, 멀티미디어, 애니메이션 등)는 적절한 대체 텍스트를 제공하여야 화면 낭독 프로그램을 이용하는 장애인에게 그 내용을 전달할 수 있다. 이는 중요한 내용을 포함하고 있는 배경 이미지의 경우에도 마찬가지이다. 그 러나 모든 텍스트가 아닌 콘텐츠 에 대체 텍스트를 제공해야만 하는 것

65 - 1 은 아니다 요구조건 (1) 스크립트를 이용하여 웹 콘텐츠에서 텍스트가 아닌 콘텐츠 를 스크 립트를 이용하여 교체하는 경우에는 교체하는 콘텐츠의 대체 텍스 트도 제공하여야 한다 적용방법 가) 이미지 치환 JavaScript는 웹 페이지상의 이미지를 새로운 이미지로 치환할 수 있 다. 이 과정에서 이미지만 치환한다면 이 이미지에 대한 대체 텍스트는 치환되기 이전의 대체 텍스트가 제공되므로 치환된 이미지에 적합한 대체 텍스트를 제공하지 못한다. 따라서 이미지를 치환할 경우에는 대체 텍스 트도 함께 치환하도록 한다. 아래의 JavaScript 프로그램은 화면에 나타난 웃는 얼굴의 이미지 상에 서 마우스를 클릭하면 기존의 이미지 old_image.jpg를 new_image.jpg로 치환하고, 대체 텍스트를 new_image.jpg에 적합한 내용 "우는 얼굴"로 치 환하는 코딩의 한 예제이다.

66 - 2 O (Good) <html> <head> <title>... </title> <script type="text/javascript"> var bool=0; function replaceimage() { if (bool == 0) { bool = 1; document.getelementbyid("image").src="new_image.jpg"; document.getelementbyid("image").alt = "우는 얼굴"; else { </script> </head> <body> bool = 0; document.getelementbyid("image").src="old_image.jpg"; document.getelementbyid("image").alt = "웃는 얼굴"; <div style="margin-top:100px; text-align:center"> <img id = "image" src=old_image.jpg" alt="웃는 얼굴" </div> </body> </html> style="cursor:pointer" onclick="replaceimage(bool);" />

67 - 3 그림 II - 3. 웃는 얼굴(좌)을 클릭하면 우는 얼굴(우)로 변경되는 예제 나) 올바른 대체 텍스트 텍스트가 아닌 콘텐츠 와 함께 제공되는 대체 텍스트는 화면에 표시 되는 이미지를 대신해서 보조 기술(예를 들어 화면 낭독 프로그램)에게 제공되는 정보이므로 그 내용이 적절하여야 한다. 바람직한 방법은 왜 이미지를 화면에 제공하는지를 생각하여 대체 텍스 트의 내용을 결정하는 것이 이미지의 모습을 설명하는 것보다 낫다. 예를 들어 투명한 플라스틱 병에 생수가 가득 들어있는 이미지에 대한 대체 텍 스트를 투명한 액체가 담긴 플라스틱 병 이라고 하기 보다는 생수병 이 라고 하는 것이 더 적합하다. 텍스트가 아닌 콘텐츠 요소에 대체 텍스트를 제공하는 것은 어려운 일 이 아니다. 보다 중요한 점은 언제, 어떤 내용의 대체 텍스트를 제공할 것인가 이다. 또한 대체 텍스트가 화면 낭독 프로그램 사용자에게 어떠한 영향을 주는가를 항상 고려하여야 한다.

68 (키보드의 이용) 키보드(또는 키보드 인터페이스)만으 로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있 어야 한다. 국가표준 <항목 2.4>에 따르면, 웹 콘텐츠는 키보드 또는 장애를 극복 하도록 도와주는 여러 가지 입력 장치를 사용하는 경우에도 웹 콘텐츠가 제공하는 모든 기능을 사용할 수 있어야 한다. 예를 들어 마우스를 사용 할 수 없는 장애인들도 마우스를 사용할 수 있는 사용자와 같이 키보드만 으로 웹 콘텐츠가 제공하는 모든 기능을 동일하게 수행할 수 있어야 한 다. 이 검사항목은 웹 브라우저의 이용 뿐 아니라 웹 콘텐츠가 제공하는 기능을 이용하는 경우에도 해당된다 요구조건 (1) 스크립트가 사용하는 이벤트 핸들러는 접근성을 보장하여야 한다. (2) 버튼에는 단축키를 제공하여 접근성을 높인다 적용방법 가) 접근성 지원 이벤트 핸들러 모든 컨트롤은 마우스를 통해 작동될 뿐 아니라 키보드를 통해 접근 할 수 있어야 한다. 이것은 화면 낭독 프로그램 사용자 뿐 아니라 마우스 를 사용할 수 없는 사용자도 배려하기 위함이다. JavaScript에서 접근성을 지원하는 마우스 이벤트와 이에 대응되는 키보

69 - 5 드 이벤트는 <표 II - 1>과 같다. 표 II - 1. 접근성 있는 마우스 이벤트 마우스 이벤트 대응되는 키보드 이벤트 onmouseover onfocus () onmouseout onblur () onmousedown onkeydown () onmouseup onkeyup () onclick onkeypress () <표 II - 1>에서 onmouseover와 onmouseout 이벤트는 이미지 위에 마우스포인터를 위치시키거나 빠져나갈 때 발생한다. 그러나 이미지 롤오 버(image rollover)에 키보드 이벤트 onfocus와 onblur 이벤트를 사용하 더라도 화면 낭독 프로그램으로는 아무런 도움이 되지 못한다. 또한 CSS 를 사용하여 롤오버 기능을 구현하는 경우에 CSS 이미지 치환 기술은 접 근성을 지원하지 않는다. 그러나 텍스트의 치환시에는 문제가 없다. 일부 DHTML의 경우에 onkeypress 대신에 onkeydown과 onkeyup 이 벤트를 사용할 수 있다. 예를 들어 화살표 키(arrow key)는 onkeypress 이벤트를 제대로 활성화 시키지 못한다. 그러나 onkeydown과 onkeyup 이벤트는 항상 활성화 된다. 여기서 노트북에는 화살표 키가 없으므로 화 살표 키를 꼭 사용할 것인가를 생각해 보아야 한다. 화살표 키를 사용하 기 위해서는 반드시 다른 키(기능 확장키)를 눌러야 하므로 이미 키보드 이벤트가 발생하기 때문이다. 뿐만 아니라 화면 낭독 프로그램이 이러한 형식의 인터페이스를 지원하는 것도 매우 어려운 일이다. 대부분의 브라우저는 Enter 키를 누를 때 onclick 이벤트를 활성화시킨 다. 그러나 일부 브라우저는 이를 지원하지 않는다. 따라서 Enter 키를 지

70 - 6 원하기 위해서는 onclick 이벤트 보다는 onkeypress 이벤트를 사용하는 것이 좋다. <표 II - 1>에 포함되지 않은 이벤트 핸들러를 사용할 경우에는 프로그 램의 접근성 지원 여부를 세심하게 관찰하여야 한다. 예를 들어 onchange 이벤트는 입력 데이터의 형식을 수정하는 것과 같은 소소한 경우에는 사용할 수 있으나, Form(form)을 제출(submit)하기 위한 이벤트 로는 사용하지 않는 것이 좋다. 나) 드래그 앤 드롭(Drag and Drop) 드래그 앤 드롭(drag-and-drop) 이벤트는 마우스를 사용하는 것을 전 제로 제공한다. 그런데 전맹, 일부 저시력자, 지체장애인들은 마우스의 사 용이 어렵다. 따라서 드래그 앤 드롭 기능은 키보드만으로도 사용할 수 있도록 하여야 한다. 예를 들어 온라인 쇼핑몰에서 쇼핑 카트에 상품을 드래그(drag)하는 과정을 Enter 키를 이용하도록 하는 것과 같다. 그 한 가지 방법은 링크를 이용하는 방법이다. 즉 상품 이미지에 링크 를 제공하여 해당 상품 이미지에 대한 대체 텍스트를 읽어주는 동안 Enter 키를 치면 해당 상품이 쇼핑 카트에 담기도록 하는 것이다. 이것이 가능한 이유는 링크 컴포넌트가 키보드 접근을 지원하며, 이미지를 아이 콘과 같이 표시할 수 있기 때문이다. 또한 이 링크에 추가적인 이벤트를 할당하여 이벤트가 발생하면 이 상품을 쇼핑 카트로 이동하게 한다. 본격적인 드래그 앤 드롭의 대체 수단은 이 문서의 부록에 수록한 WAI-ARIA 적용사례의 드래그 앤 드롭에 대한 설명을 참고하라.

71 - 7 다) 단축키 설정 다수의 컨트롤이 필요한 복잡한 애플리케이션 콘텐츠는 단축키를 이 용하여 사용하도록 하는 것이 좋다. 일부 사용자에게는 하나의 키를 조작 하는 것도 많은 노력을 필요로 한다. 따라서 가능한 한 이벤트를 발생시 키기 위하여 누르는 키의 수를 줄일 수 있는 단축키를 제공하는 것이 바 람직하다. 예를 들어 도움말 화면으로의 빠른 전환을 제공하기 위해 단축키로? 키를 사용할 수 있다. 이것은 사용자들이? 키를 누를 때마다 도움말 화 면으로 이동시킨다. 이러한 기능을 수행하기 위해서는 HTML 코드는 다 음과 같이 작성한다. O (Good) <input type="button" value="도움말 /> onclick="window.open( onkeypress="verifykey(this,event);" 아래의 JavaScript 코드는 단축키를? 로 정의하고, 키보드에서?'를 누 르면 도움말 버튼을 누른 것과 같은 효과를 제공한다. O (Good) // With onkeypress event, this verifies? key function verifykey(oelement,oevent){ if(oevent.keycode==63 && oelement.onclick){ //? = 63 oelement.onclick();

72 (반응시간의 조절기능) 실시간 이벤트나 정해진 시간 내에 응답이 필요한 기능은 사용자가 시간에 구애받지 않고 읽거나 상호작용을 하거나 응답할 수 있어야 한 다. 국가표준 <항목 2.6>에 따르면 자동적으로 갱신되도록 구성된 콘텐츠, 일정 시간이 경과하면 다른 페이지로 이동하도록 구성된 콘텐츠, 깜빡이 는 텍스트나 스스로 스크롤 하도록 구성된 텍스트, 짧은 기간 동안 나타 났다 일정시간 후에 사라지는 대화창, 일정시간 동안 사용하지 않으면 페 이지에 대한 접근이 강제 차단되거나 사용할 수 없게 되는 콘텐츠 등과 같이 정해진 시간 내에 응답이 필요한 콘텐츠들은 사용하지 않아야 하며, 꼭 사용해야 할 경우에는 사용자가 그 기능을 조작할 수 있도록 해야 한 다 요구조건 (1) 팝업(Pop-Up) 창을 열 때에는 사용자에게 팝업창의 열림을 공지하 여야 한다. (2) 사용자가 의도하지 않은 브라우저 창의 크기 변경, 위치 이동 등은 발생하지 않아야 한다 적용방법 가) 팝업창 열기

Microsoft PowerPoint - chap01-C언어개요.pptx

Microsoft PowerPoint - chap01-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 학습목표 프로그래밍의 기본 개념을

More information

SIGIL 완벽입문

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

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

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

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

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

2. 4. 1. 업무에 활용 가능한 플러그인 QGIS의 큰 들을 찾 아서 특징 설치 마 폰 은 스 트 그 8 하 이 업무에 필요한 기능 메뉴 TM f K 플러그인 호출 와 TM f K < 림 > TM f K 종항 그 중에서 그 설치 듯 할 수 있는 플러그인이 많이 제공된다는 것이다. < 림 > 다. 에서 어플을 다운받아 S or 8, 9 의 S or OREA

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 Template

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

More information

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

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

More information

회원번호 대표자 공동자 KR000****1 권 * 영 KR000****1 박 * 순 KR000****1 박 * 애 이 * 홍 KR000****2 김 * 근 하 * 희 KR000****2 박 * 순 KR000****3 최 * 정 KR000****4 박 * 희 조 * 제

회원번호 대표자 공동자 KR000****1 권 * 영 KR000****1 박 * 순 KR000****1 박 * 애 이 * 홍 KR000****2 김 * 근 하 * 희 KR000****2 박 * 순 KR000****3 최 * 정 KR000****4 박 * 희 조 * 제 회원번호 대표자 공동자 KR000****1 권 * 영 KR000****1 박 * 순 KR000****1 박 * 애 이 * 홍 KR000****2 김 * 근 하 * 희 KR000****2 박 * 순 KR000****3 최 * 정 KR000****4 박 * 희 조 * 제 KR000****4 설 * 환 KR000****4 송 * 애 김 * 수 KR000****4

More information

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

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

More information

Windows Live Hotmail Custom Domains Korea

Windows Live Hotmail Custom Domains Korea 매쉬업코리아2008 컨퍼런스 Microsoft Windows Live Service Open API 한국 마이크로소프트 개발자 플랫폼 사업 본부 / 차세대 웹 팀 김대우 (http://www.uxkorea.net 준서아빠 블로그) Agenda Microsoft의 매쉬업코리아2008 특전 Windows Live Service 소개 Windows Live Service

More information

Javascript

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

More information

Web Scraper in 30 Minutes 강철

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

More information

View Licenses and Services (customer)

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

More information

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일 Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 Introduce Me!!! Job Jeju National University Student Ubuntu Korean Jeju Community Owner E-Mail: ned3y2k@hanmail.net Blog: http://ned3y2k.wo.tc Facebook: http://www.facebook.com/gyeongdae

More information

서현수

서현수 Introduction to TIZEN SDK UI Builder S-Core 서현수 2015.10.28 CONTENTS TIZEN APP 이란? TIZEN SDK UI Builder 소개 TIZEN APP 개발방법 UI Builder 기능 UI Builder 사용방법 실전, TIZEN APP 개발시작하기 마침 TIZEN APP? TIZEN APP 이란? Mobile,

More information

<B1DDC0B6B1E2B0FCB0FAC0CEC5CDB3DDB0B3C0CEC1A4BAB82E687770>

<B1DDC0B6B1E2B0FCB0FAC0CEC5CDB3DDB0B3C0CEC1A4BAB82E687770> 여 48.6% 남 51.4% 40대 10.7% 50대 이 상 6.0% 10대 0.9% 20대 34.5% 30대 47.9% 초등졸 이하 대학원생 이 0.6% 중졸 이하 상 0.7% 2.7% 고졸 이하 34.2% 대졸 이하 61.9% 직장 1.9% e-mail 주소 2.8% 핸드폰 번호 8.2% 전화번호 4.5% 학교 0.9% 주소 2.0% 기타 0.4% 이름

More information

슬라이드 1

슬라이드 1 웹 2.0 분석보고서 Year 2006. Month 05. Day 20 Contents 1 Chapter 웹 2.0 이란무엇인가? 웹 2.0 의시작 / 웹 1.0 에서웹 2.0 으로 / 웹 2.0 의속성 / 웹 2.0 의영향 Chapter Chapter 2 3 웹 2.0 을가능케하는요소 AJAX / Tagging, Folksonomy / RSS / Ontology,

More information

wtu05_ÃÖÁ¾

wtu05_ÃÖÁ¾ 한 눈에 보는 이달의 주요 글로벌 IT 트렌드 IDG World Tech Update May C o n t e n t s Cover Story 아이패드, 태블릿 컴퓨팅 시대를 열다 Monthly News Brief 이달의 주요 글로벌 IT 뉴스 IDG Insight 개발자 관점에서 본 윈도우 폰 7 vs. 아이폰 클라우드 컴퓨팅, 불만 검증 단계 돌입 기업의

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

이도경, 최덕재 Dokyeong Lee, Deokjai Choi 1. 서론

이도경, 최덕재 Dokyeong Lee, Deokjai Choi 1. 서론 이도경, 최덕재 Dokyeong Lee, Deokjai Choi 1. 서론 2. 관련연구 2.1 MQTT 프로토콜 Fig. 1. Topic-based Publish/Subscribe Communication Model. Table 1. Delivery and Guarantee by MQTT QoS Level 2.1 MQTT-SN 프로토콜 Fig. 2. MQTT-SN

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

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 09 장 문서객체모델 1. 문서객체모델관련용어 2. 웹페이지생성순서 3. 문서객체선택 4. 문서객체조작 5. 이벤트 문서객체와문서객체모델의개념을이해한다. 문서객체를선택하고조작할수있다. 이벤트의종류를알아보고문서객체에이벤트를연결해본다. 1 문서객체모델관련용어 문서객체모델 (DOM) Document Object Model 웹브라우저가 HTML 파일을분석하고표시하는방법

More information

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을 동 향 제 23 권 5호 통권 504호 HTML5가 웹 환경에 미치는 영향 이 은 민 * 16) 1. 개 요 구글(Google)은 2010년 5월 구글 I/O 개발자 컨퍼런스에서 HTML5를 통해 플러 그인의 사용이 줄어들고 프로그램 다운로드 및 설치가 필요 없는 브라우저 기반 웹 플랫폼 환경이 점차 구현되고 있다고 강조했다. 그리고 애플(Apple)은 2010년

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

- 2 -

- 2 - - 1 - - 2 - - - - 4 - - 5 - - 6 - - 7 - - 8 - 4) 민원담당공무원 대상 설문조사의 결과와 함의 국민신문고가 업무와 통합된 지식경영시스템으로 실제 운영되고 있는지, 국민신문 고의 효율 알 성 제고 등 성과향상에 기여한다고 평가할 수 있는지를 치 메 국민신문고를 접해본 중앙부처 및 지방자 였 조사를 시행하 였 해 진행하 월 다.

More information

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

var answer = confirm( 확인이나취소를누르세요.); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write( 확인을눌렀습니다.); else { document.write( 취소를눌렀습니다.); 자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트

More information

untitled

untitled A Leader of Enterprise e-business Solution FORCS Co., LTD 1 OZ Application Getting Started (ver 5.1) 2 FORCS Co., LTD A Leader of Enterprise e-business Solution FORCS Co., LTD 3 OZ Application Getting

More information

내지(교사용) 4-6부

내지(교사용) 4-6부 Chapter5 140 141 142 143 144 145 146 147 148 01 02 03 04 05 06 07 08 149 활 / 동 / 지 2 01 즐겨 찾는 사이트와 찾는 이유는? 사이트: 이유: 02 아래는 어느 외국계 사이트의 회원가입 화면이다. 국내의 일반적인 회원가입보다 절차가 간소하거나 기입하지 않아도 되는 개인정보 항목이 있다면 무엇인지

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

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

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

More information

*074-081pb61۲õðÀÚÀ̳ʸ

*074-081pb61۲õðÀÚÀ̳ʸ 74 October 2005 현 대는 이미지의 시대다. 영국의 미술비평가 존 버거는 이미지를 새롭 게 만들어진, 또는 재생산된 시각 으로 정의한 바 있다. 이 정의에 따르 면, 이미지는 사물 그 자체가 아니라는 것이다. 이미지는 보는 사람의, 혹은 이미지를 창조하는 사람의 믿음이나 지식에 제한을 받는다. 이미지는 언어, 혹은 문자에 선행한다. 그래서 혹자는

More information

SBR-100S User Manual

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

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

노트북 IT / 모바일 데스크탑 34 올인원PC 35 PC 소프트웨어 포터블SSD / SSD / 메모리카드 36 태블릿 37 휴대폰 39 PC 솔루션 IT / 모바일 IT / 모바일 노트북 29 삼성전자는 Windows 를 권장합니다. 삼성전자만의 편리하고 다양한 소프트웨어를 통해 초보자도 보다 쉽고 빠르게 이용 가능합니다. Easy Settings 삼성 패스트

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

안 산 시 보 차 례 훈 령 안산시 훈령 제 485 호 [안산시 구 사무 전결처리 규정 일부개정 규정]------------------------------------------------- 2 안산시 훈령 제 486 호 [안산시 동 주민센터 전결사항 규정 일부개정 규

안 산 시 보 차 례 훈 령 안산시 훈령 제 485 호 [안산시 구 사무 전결처리 규정 일부개정 규정]------------------------------------------------- 2 안산시 훈령 제 486 호 [안산시 동 주민센터 전결사항 규정 일부개정 규 발행일 : 2013년 7월 25일 안 산 시 보 차 례 훈 령 안산시 훈령 제 485 호 [안산시 구 사무 전결처리 규정 일부개정 규정]------------------------------------------------- 2 안산시 훈령 제 486 호 [안산시 동 주민센터 전결사항 규정 일부개정 규정]--------------------------------------------

More information

일반인을 위한 전자책 제작 방법

일반인을 위한 전자책 제작 방법 국립중앙도서관 디지털 정보활용능력 교육 이펍(ePub) 제작 입문 2015. 6. 강사 : 최 현 이북스펍 대표 (http://ebookspub.co.kr) - 1 - - 강의 내용 - 1. epub 이란 무엇인가 1.1. 전자책 출판 프로세스 이해 1.2. 전자책의 다양한 형태와 제작방식 1.2. epub 개념 이해 및 제작툴 종류 2. epub 제작툴 소개

More information

비디오 / 그래픽 아답터 네트워크 만약에 ArcGolbe를 사용하는 경우, 추가적인 디스크 공간 필요. ArcGlobe는 캐시파일을 생성하여 사용 24 비트 그래픽 가속기 Oepn GL 2.0 이상을 지원하는 비디오카드 최소 64 MB 이고 256 MB 이상을 메모리

비디오 / 그래픽 아답터 네트워크 만약에 ArcGolbe를 사용하는 경우, 추가적인 디스크 공간 필요. ArcGlobe는 캐시파일을 생성하여 사용 24 비트 그래픽 가속기 Oepn GL 2.0 이상을 지원하는 비디오카드 최소 64 MB 이고 256 MB 이상을 메모리 ArcGIS for Desktop 10.4 Single Use 설치가이드 Software: ArcGIS for Desktop 10.4 Platforms: Windows 10, 8.1, 7, Server 2012, Server 2008 ArcGIS for Desktop 10.4 시스템 요구사항 1. 지원 플랫폼 운영체제 최소 OS 버전 최대 OS 버전 Windows

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

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

Microsoft Word - windows server 2003 수동설치_non pro support_.doc

Microsoft Word - windows server 2003 수동설치_non pro support_.doc Windows Server 2003 수동 설치 가이드 INDEX 운영체제 설치 준비과정 1 드라이버를 위한 플로피 디스크 작성 2 드라이버를 위한 USB 메모리 작성 7 운영체제 설치 과정 14 Boot Sequence 변경 14 컨트롤러 드라이버 수동 설치 15 운영체제 설치 17 운영체제 설치 준비 과정 Windows Server 2003 에는 기본적으로

More information

iOS5_1±³

iOS5_1±³ IDG Deep Dive ios 5 2 3 4 5 6 7 8 9 10 11 12 ios 5 토어 버튼이 상단 좌측에 추가되어 아이튠즈 스토 어의 적합한 영역으로 연결해 준다. 또한 블루투스의 원격제어 기능인 AVRCP(AV Remote Control Profile)가 1.3 버전으로 업데이 트되어 음악을 블루투스로 스트리밍할 때 트랙과 아티스트, 앨범 정보를

More information

C H A P T E R 2

C H A P T E R 2 C H A P T E R 2 Foundations of Ajax Chapter 2 1 32 var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Micr else if(window.xmlhttprequest) { xmlhttp =

More information

IRISCard Anywhere 5

IRISCard Anywhere 5 이 빠른 사용자 가이드는 IRISCard Anywhere 5 및 IRISCard Corporate 5 스캐너의 설치와 시작을 도와 드립니다. 이 스캐너와 함께 제공되는 소프트웨어는: - Cardiris Pro 5 및 Cardiris Corporate 5 for CRM (Windows 용) - Cardiris Pro 4 (Mac OS 용) Cardiris 의

More information

Microsoft PowerPoint UI-Event.Notification(1.5h).pptx

Microsoft PowerPoint UI-Event.Notification(1.5h).pptx To be an Android Expert 문양세강원대학교 IT 대학컴퓨터학부 UI 이벤트 Event listener Touch mode Focus handling Notification Basic toast notification Customized toast notification Status bar notification 2 사용자가인터랙션하는특정 View

More information

....5-.......hwp

....5-.......hwp 방송연구 http://www.kbc.go.kr/ 방송 콘텐츠는 TV라는 대중매체가 지닌 즉각적 파급효과에도 불구하고 다 양한 수익 창출이라는 부분에서 영화에 비해 관심을 끌지 못했던 것이 사실 이다. 그러나, 최근 드라마 이 엄청난 경제적 파급 효과를 창출해 내 면서 방송 콘텐츠의 수익 구조에도 큰 변화가 오고 있음을 예고하고 있다. 드라마 은

More information

con_using-admin

con_using-admin CONTRIBUTE 2007 Adobe Systems Incorporated. All rights reserved. Adobe Contribute CS3 - Contribute,. Adobe Systems Incorporated (,, ),..,, Adobe Systems Incorporated. Adobe Systems Incorporated..... Adobe,

More information

멀티미디어 콘텐츠 접속을 위한 사용자인증 시스템_교열(박세환, 2015. 8. 12).hwp

멀티미디어 콘텐츠 접속을 위한 사용자인증 시스템_교열(박세환, 2015. 8. 12).hwp q 첨단기술정보분석 1 멀티미디어 콘텐츠 접속을 위한 사용자인증 시스템 한국과학기술정보연구원 전 문 연 구 위 원 김 홍 기 (hgkim37@reseat.re.kr) 1. 개 요 멀티미디어 콘텐츠는 공급자로부터 지속적으로 서비스되어 최종 사용 자에게 제공되는 스트리밍(streaming) 미디어이다. 미디어의 스트리밍 은 미디어 발행자가 생방송과 녹화방송 모든

More information

U.Tu System Application DW Service AGENDA 1. 개요 4. 솔루션 모음 1.1. 제안의 배경 및 목적 4.1. 고객정의 DW구축에 필요한 메타정보 생성 1.2. 제품 개요 4.2. 사전 변경 관리 1.3. 제품 특장점 4.3. 부품화형

U.Tu System Application DW Service AGENDA 1. 개요 4. 솔루션 모음 1.1. 제안의 배경 및 목적 4.1. 고객정의 DW구축에 필요한 메타정보 생성 1.2. 제품 개요 4.2. 사전 변경 관리 1.3. 제품 특장점 4.3. 부품화형 AGENDA 1. 개요 4. 솔루션 모음 1.1. 제안의 배경 및 목적 4.1. 고객정의 DW구축에 필요한 메타정보 생성 1.2. 제품 개요 4.2. 사전 변경 관리 1.3. 제품 특장점 4.3. 부품화형 언어 변환 1.4. 기대 효과 4.4. 프로그램 Restructuring 4.5. 소스 모듈 관리 2. SeeMAGMA 적용 전략 2.1. SeeMAGMA

More information

H3250_Wi-Fi_E.book

H3250_Wi-Fi_E.book 무선 LAN 기능으로 할 수 있는 것 2 무선 LAN 기능으로 할 수 있는 것 z q l D w 3 Wi-Fi 기능 플로우차트 z q l D 4 Wi-Fi 기능 플로우차트 w 5 본 사용 설명서의 기호 설명 6 각 장별 목차 1 2 3 4 5 6 7 8 9 10 11 12 13 14 7 목차 1 2 3 4 8 목차 5 6 7 8 9 9 목차 10 11 12

More information

Red Dot Award: Communication Design 에 참 하기 결정해 주셔서 기쁩니다. "성공을 위한 안내서"는 등 절 에 대해 안내 니다. 지체 말고 언 든지 연 해 주 오. Red Dot 은 등 절 또는 등 후 절 를 기꺼 와드 겠습니다. 01 Int

Red Dot Award: Communication Design 에 참 하기 결정해 주셔서 기쁩니다. 성공을 위한 안내서는 등 절 에 대해 안내 니다. 지체 말고 언 든지 연 해 주 오. Red Dot 은 등 절 또는 등 후 절 를 기꺼 와드 겠습니다. 01 Int Your Guide to Success Interface Design Red Dot Award: Communication Design 에 참 하기 결정해 주셔서 기쁩니다. "성공을 위한 안내서"는 등 절 에 대해 안내 니다. 지체 말고 언 든지 연 해 주 오. Red Dot 은 등 절 또는 등 후 절 를 기꺼 와드 겠습니다. 01 Interface Design

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

**09콘텐츠산업백서_1 2

**09콘텐츠산업백서_1 2 2009 2 0 0 9 M I N I S T R Y O F C U L T U R E, S P O R T S A N D T O U R I S M 2009 M I N I S T R Y O F C U L T U R E, S P O R T S A N D T O U R I S M 2009 발간사 현재 우리 콘텐츠산업은 첨단 매체의 등장과 신기술의 개발, 미디어 환경의

More information

Microsoft PowerPoint SDK설치.HelloAndroid(1.5h).pptx

Microsoft PowerPoint SDK설치.HelloAndroid(1.5h).pptx To be an Android Expert 문양세강원대학교 IT 대학컴퓨터학부 개발환경구조및설치순서 JDK 설치 Eclipse 설치 안드로이드 SDK 설치 ADT(Androd Development Tools) 설치 AVD(Android Virtual Device) 생성 Hello Android! 2 Eclipse (IDE) JDK Android SDK with

More information

KPS-19MA-1.hwp

KPS-19MA-1.hwp 판서모니터 사양(모델명 KPS-19MA) 모델명 KPS-19MA 화면크기 19.0 inch 해상도 1280 (H)x1024 (v) 픽셀크기 0.294 x0.294 mm 화소 16.7M (8 bits/color) 선명도 800:1 밝기 300 cd/m2 응답속도 Tr+Tf=5 ms 시야각 +80 ~80 (H), +80 ~80 (V) Tablet Specification

More information

B2B 매뉴얼

B2B 매뉴얼 오디오북 모바일앱 사용자 매뉴얼 (안드로이드) 오디언 도서관 안드로이드용 - 오디오북 모바일앱은 안드로이드 OS 버전 2.1 이상을 지원합니다. (대표 기종 : 갤럭시 S, 갤럭시 S II, 갤럭시탭, 모토로이, 넥서스원 등) - OS 버전은 홖경설정(설정) > 휴대폰정보 > 펌웨어버전(Android 버전)에서 확인하실 수 있습니다.. - 하위 버전의 OS는

More information

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API WAC 2.0 & Hybrid Web App 권정혁 ( @xguru ) 1 HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API Mobile Web App needs Device APIs Camera Filesystem Acclerometer Web Browser Contacts Messaging

More information

목 차 1. 드라이버 설치...3 1.1 설치환경...3 1.2 드라이버 설치 시 주의사항...3 1.3 USB 드라이버 파일...3 1.4 Windows XP에서 설치...4 1.5 Windows Vista / Windows 7에서 설치...7 1.6 Windows

목 차 1. 드라이버 설치...3 1.1 설치환경...3 1.2 드라이버 설치 시 주의사항...3 1.3 USB 드라이버 파일...3 1.4 Windows XP에서 설치...4 1.5 Windows Vista / Windows 7에서 설치...7 1.6 Windows 삼성SDS 하이패스 USB 드라이버 설치 매뉴얼 삼성SDS(주) 목 차 1. 드라이버 설치...3 1.1 설치환경...3 1.2 드라이버 설치 시 주의사항...3 1.3 USB 드라이버 파일...3 1.4 Windows XP에서 설치...4 1.5 Windows Vista / Windows 7에서 설치...7 1.6 Windows 8에서 설치...9 2. 드라이버

More information

설치 순서 Windows 98 SE/Me/2000/XP 1 PC를 켜고 Windows를 시작합니다. 아직 컴퓨터에 프린터를 연결하지 마십시오. 2 PC에 P-S100 CD-ROM(프 린터 드라이버)을 삽입합니다. 3 설치 프로그램을 시작합니다. q CD-ROM의 PS1

설치 순서 Windows 98 SE/Me/2000/XP 1 PC를 켜고 Windows를 시작합니다. 아직 컴퓨터에 프린터를 연결하지 마십시오. 2 PC에 P-S100 CD-ROM(프 린터 드라이버)을 삽입합니다. 3 설치 프로그램을 시작합니다. q CD-ROM의 PS1 디지털 사진 프린터 P-S100 프린터 드라이버 설치 가이드 사용하는 컴퓨터에 따라 제공된 프린터 드라이버를 설치합니다. 설치 절차 에 대한 자세한 내용은 CD-ROM의 Readme 파일을 참조하십시오. 작동 환경 Windows 호환 모델: IBM PC/AT 및 호환품 운영 체제: Windows 98 SE/Me/2000/XP (Windows 98 SE/Me/2000/XP

More information

ThinkVantage Fingerprint Software

ThinkVantage Fingerprint Software ThinkVantage 지문 인식 소프트웨어 First Edition (August 2005) Copyright Lenovo 2005. Portions Copyright International Business Machines Corporation 2005. All rights reserved. U.S. GOVERNMENT USERS RESTRICTED RIGHTS:

More information

포인팅 장치 및 키보드

포인팅 장치 및 키보드 포인팅 장치 및 키보드 문서 부품 번호: 430227-AD1 2007년 1월 본 설명서는 포인팅 장치 및 키보드에 대해 설명합니다. 목차 1 포인팅 장치 터치패드 ( 일부 모델만 해당 )................. 1 1 터치패드 사용.......................... 1 2 포인팅 스틱 ( 일부 모델만 해당 )............... 1

More information

<B3EDB9AEC0DBBCBAB9FD2E687770>

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

More information

¾ç¼ºÄÀ-2

¾ç¼ºÄÀ-2 양성평등 캠퍼스 문화 조성을 위하여... 고려대학교 양성평등센터 는 2001년 6월에 제정된 성희롱 및 성폭력 예방과 처리에 관한 규정 에 의거하여 같은 해 7월에 설치된 성희롱및성폭력상담소 를 2006년 10월 개칭한 것입니다. 양성평등 센터 로의 개칭은 교내에서 발생하는 성피해에 대한 즉각적인 대응과 상담 제공뿐만 아니라 상호 존중을 바탕으로 한 양성평등

More information

untitled

untitled A Leader of Enterprise e-business Solution FORCS Co., LTD 1 OZ Application Getting Started 2 FORCS Co., LTD A Leader of Enterprise e-business Solution FORCS Co., LTD 3 OZ Application Getting Started 'OZ

More information

152*220

152*220 152*220 2011.2.16 5:53 PM ` 3 여는 글 교육주체들을 위한 교육 교양지 신경림 잠시 휴간했던 우리교육 을 비록 계간으로이지만 다시 내게 되었다는 소식을 들으니 우 선 반갑다. 하지만 월간으로 계속할 수 없다는 현실이 못내 아쉽다. 솔직히 나는 우리교 육 의 부지런한 독자는 못 되었다. 하지만 비록 어깨너머로 읽으면서도 이런 잡지는 우 리

More information

슬라이드 1

슬라이드 1 Visual 2008 과신속한애플리케이션 개발 웹어플리케이션 정병찬 ( 주 ) 프리엠컨설팅개발팀장 johnharu@solutionbuilder.co.kr http://www.solutionbuilder.co.kr 목차 Visual Studio 2008 웹개발홖경 ListView와 DataPager ASP.NET AJAX Silverlight 웹어플리케이션 ASP.NET

More information

Business Agility () Dynamic ebusiness, RTE (Real-Time Enterprise) IT Web Services c c WE-SDS (Web Services Enabled SDS) SDS SDS Service-riented Architecture Web Services ( ) ( ) ( ) / c IT / Service- Service-

More information

MF Driver Installation Guide

MF Driver Installation Guide Korean MF 드라이버 설치설명서 사용자 소프트웨어 CD-ROM... 드라이버 및 소프트웨어 정보...1 지원되는 운영 체제...1 MF 드라이버 및 MF Toolbox 설치... [쉬운 설치]를 사용한 설치...2 [사용자 정의 설치]를 사용한 설치...10 USB 케이블 연결(USB를 이용해 연결하는 경우만)...20 설치 결과 확인...21 온라인

More information

장애인건강관리사업

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

More information

Index 1. Intro Install Connect Scratch 1.4 (Offline Editor) Scratch 2.0 (Online Editor) Connect f

Index 1. Intro Install Connect Scratch 1.4 (Offline Editor) Scratch 2.0 (Online Editor) Connect f Scratch 호환 센서 보드 SKY SSB 설정 메뉴얼 1st of April 2016 Techdine Index 1. Intro... 03 2. Install... 04 3. Connect... 06 3-1. Scratch 1.4 (Offline Editor)... 06 3-2. Scratch 2.0 (Online Editor)... 09 3-2-1. Connect

More information

Microsoft Word - 임베디드월드_WindowsEmbeddedCompact7_rev

Microsoft Word - 임베디드월드_WindowsEmbeddedCompact7_rev 글 : 김재형팀장, MDS테크놀로지 ES사업부 SE팀 www.mdstec.com 진보된기술과화려한사용자환경, 다양한응용프로그램들로무장한 스마트폰쓰나미 가몰려오고있다. 이쓰나미의영향은단지휴대용통신기기에만미치지않고, 주저하던임베디드시스템에도막대한영향을끼치고있다. 하지만임베디드시스템개발자와사용자라면누구나이 스마트폰쓰나미 의시초가임베디드시스템이었음을인정할것이다. 수많은미래지향적아이디어들을현실화하면서새로운

More information

1

1 2/33 3/33 4/33 5/33 6/33 7/33 8/33 9/33 10/33 11/33 12/33 13/33 14/33 15/33 16/33 17/33 5) 입력을 다 했으면 확인 버튼을 클릭합니다. 6) 시작 페이지가 제대로 설정이 되었는지 살펴볼까요. 익스플로러를 종료하고 다시 실행시켜 보세요. 시작화면에 야후! 코리아 화면이 뜬다면 설정 완료..^^

More information

Microsoft PowerPoint - mobileAppAccessibilityGuidelines_Korea.pptx

Microsoft PowerPoint - mobileAppAccessibilityGuidelines_Korea.pptx Mobile Application Accessibility Compliance Guideline of Korea 2011. 10. Seongil Lee Sungkyunkwan University silee@skku.edu Stay Hungry, Stay Foolish. imemory of Steve Jobs Backgrounds What has emerged?

More information

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch20. XMLHttpRequest 2014년 1학기 Professor Seung-Hoon Choi 20 XMLHttpRequest XMLHttpRequest 객체 자바스크립트로 Ajax를이용할때사용하는객체 간단하게 xhr 이라고도부름 서버

More information

³»Áö_10-6

³»Áö_10-6 역사 속에서 찾은 청렴 이야기 이 책에서는 단순히 가난한 관리들의 이야기보다는 국가와 백성을 위하여 사심 없이 헌신한 옛 공직자들의 사례들을 발굴하여 수록하였습니다. 공과 사를 엄정히 구분하고, 외부의 압력에 흔들리지 않고 소신껏 공무를 처리한 사례, 역사 속에서 찾은 청렴 이야기 관아의 오동나무는 나라의 것이다 관아의 오동나무는 나라의 것이다 최부, 송흠

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

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

ActFax 4.31 Local Privilege Escalation Exploit

ActFax 4.31 Local Privilege Escalation Exploit NSHC 2013. 05. 23 악성코드 분석 보고서 [ Ransomware 악성코드 ] 사용자의 컴퓨터를 강제로 잠그고 돈을 요구하는 형태의 공격이 기승을 부리고 있 습니다. 이러한 형태의 공격에 이용되는 악성코드는 Ransomware로 불리는 악성코 드 입니다. 한번 감염 시 치료절차가 복잡하며, 보고서 작성 시점을 기준으로 지속 적인 피해자가 발생되고

More information

Visual Studio online Limited preview 간략하게살펴보기

Visual Studio online Limited preview 간략하게살펴보기 11월의주제 Visual Studio 2013 제대로파헤쳐보기! Visual Studio online Limited preview 간략하게살펴보기 ALM, 언제어디서나 연결된 IDE Theme와 Visual Design 편집기의강화된생산성기능들성능최적화및디버깅개선 Microsoft 계정으로 IDE에서로그인가능다양한머신사이에서개발환경유지다양한디바이스에걸쳐설정을동기화개선된

More information

TTA Journal No.157_서체변경.indd

TTA Journal No.157_서체변경.indd 표준 시험인증 기술 동향 FIDO(Fast IDentity Online) 생체 인증 기술 표준화 동향 이동기 TTA 모바일응용서비스 프로젝트그룹(PG910) 의장 SK텔레콤 NIC 담당 매니저 76 l 2015 01/02 PASSWORDLESS EXPERIENCE (UAF standards) ONLINE AUTH REQUEST LOCAL DEVICE AUTH

More information

MF3010 MF Driver Installation Guide

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

More information

<B1DDC0B6C1A4BAB8C8ADC1D6BFE4B5BFC7E228313232C8A3292E687770>

<B1DDC0B6C1A4BAB8C8ADC1D6BFE4B5BFC7E228313232C8A3292E687770> 금융정보화 주요동향 제122호 2010. 3. 30 1. 금융업계 IT동향 2. IT 동향 3. IT 용어 정보시스템본부 종 합 2010. 3월 제122호 1. 금융업계 IT동향 올해 금융IT핵심 화두는 통합, 그리고 모바일 은행, 스마트폰 뱅킹 서비스 강화 증권업계, 공동 통합보안관제 체계 구축 추진 카드업계, 스마트폰 애플리케이션 개발 확산 미래에셋생명,

More information

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드] Web Technology Stack HTML, CSS, JS Basics HTML Tutorial https://www.w3schools.com/html/default.asp CSS Tutorial https://www.w3schools.com/css/default.asp JS Tutorial 524730-1 2019 년봄학기 3/11/2019 박경신 https://www.w3schools.com/html/default.asp

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

SchoolNet튜토리얼.PDF

SchoolNet튜토리얼.PDF Interoperability :,, Reusability: : Manageability : Accessibility :, LMS Durability : (Specifications), AICC (Aviation Industry CBT Committee) : 1988, /, LMS IMS : 1997EduCom NLII,,,,, ARIADNE (Alliance

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

Microsoft Word - 문필주.doc

Microsoft Word - 문필주.doc 포커스 포커스 모바일 광고기능을 갖는 아이폰 애플리케이션 문필주* 이요섭** 최근의 모바일 광고 시장은 이동통신사 중심의 SMS 발송 형태에서 아이폰의 등장과 앱 스토어(App Store)의 성공에 의한 콘텐츠 내의 플랫폼(App-vertising) 형태로 변해 가고 있다. 본 고에서는 모바일 광 고 아이폰 애플리케이션을 활용할 수 있는 방법에 대해 논의하고자

More information

vRealize Automation용 VMware Remote Console - VMware

vRealize Automation용 VMware Remote Console - VMware vrealize Automation 용 VMware Remote Console VMware Remote Console 9.0 이문서는새버전으로교체되기전까지나열된각제품버전및모든이후버전을지원합니다. 이문서에대한최신버전을확인하려면 http://www.vmware.com/kr/support/pubs 를참조하십시오. KO-002230-00 vrealize Automation

More information

슬라이드 1

슬라이드 1 Tadpole for DB 1. 도구개요 2. 설치및실행 4. 활용예제 1. 도구개요 도구명 소개 Tadpole for DB Tools (sites.google.com/site/tadpolefordb/) 웹기반의데이터베이스를관리하는도구 Database 스키마및데이터관리 라이선스 LGPL (Lesser General Public License) 특징 주요기능

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

RHEV 2.2 인증서 만료 확인 및 갱신

RHEV 2.2 인증서 만료 확인 및 갱신 2018/09/28 03:56 1/2 목차... 1 인증서 확인... 1 인증서 종류와 확인... 4 RHEVM CA... 5 FQDN 개인 인증서... 5 레드햇 인증서 - 코드 서명 인증서... 6 호스트 인증... 7 참고사항... 8 관련링크... 8 AllThatLinux! - http://allthatlinux.com/dokuwiki/ rhev_2.2_

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

SH100_V1.4

SH100_V1.4 User Manual VLUU SH100 1 2 3 4 5 6 m m 7 8 9 10 11 12 13 15 16 17 x y 18 19 1 4 z x 20 2 o 5 o 6 3 7 10 11 21 8 12 o 9 o 22 1 m 2 3 2 1 3 23 24 o 25 1 2 o 1 2 3 26 1 2 1 2 27 1 28 2 1 3 29 2 4 30 1 m

More information

04 Çмú_±â¼ú±â»ç

04 Çмú_±â¼ú±â»ç 42 s p x f p (x) f (x) VOL. 46 NO. 12 2013. 12 43 p j (x) r j n c f max f min v max, j j c j (x) j f (x) v j (x) f (x) v(x) f d (x) f (x) f (x) v(x) v(x) r f 44 r f X(x) Y (x) (x, y) (x, y) f (x, y) VOL.

More information

untitled

untitled A Leader of Enterprise e-business Solution FORCS Co., LTD 1 OZ Application Designer Getting Started 2 FORCS Co., LTD A Leader of Enterprise e-business Solution FORCS Co., LTD 3 OZ Application Designer

More information

Microsoft PowerPoint - web-part03-ch19-node.js기본.pptx

Microsoft PowerPoint - web-part03-ch19-node.js기본.pptx 과목명: 웹프로그래밍응용 교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch19. node.js 기본 2014년 1학기 Professor Seung-Hoon Choi 19 node.js 기본 이 책에서는 서버 구현 시 node.js 를 사용함 자바스크립트로 서버를 개발 다른서버구현기술 ASP.NET, ASP.NET

More information

untitled

untitled A Leader of Enterprise e-business Solution FORCS Co., LTD 1 OZ Application Designer Getting Started 2 FORCS Co., LTD A Leader of Enterprise e-business Solution FORCS Co., LTD 3 OZ Application Designer

More information

<C3E6B3B2B1B3C0B0313832C8A32DC5BEC0E7BFEB28C0DBB0D4292D332E706466>

<C3E6B3B2B1B3C0B0313832C8A32DC5BEC0E7BFEB28C0DBB0D4292D332E706466> 11-8140242-000001-08 2013-927 2013 182 2013 182 Contents 02 16 08 10 12 18 53 25 32 63 Summer 2 0 1 3 68 40 51 57 65 72 81 90 97 103 109 94 116 123 130 140 144 148 118 154 158 163 1 2 3 4 5 8 SUMMER

More information