overfloweblog

are you driving me crazy?

Archive for the ‘web-development’ Category

Monday
May 12,2008

ActionScript 3.0 이행 스텝 가이드
R Blank
Adobe Flex 2와 Flash CS3 Professional에서 생성된SWF 파일을 실행하는 Adobe Flash Player 9는 Flash 플랫폼의 새로운 파워업을 구현한다고 할 수 있습니다. Flash Player 9를 이용하면 Flash 7이나 8로 제작한 프로젝트에 비해 최고30배 고속으로 실행되는 프로젝트를 제작할 수 있습니다.

Flash Player 9의 퍼포먼스가 큰 폭으로 향상한 이유는 Flash나 Flex 의 디벨로퍼가 기술한 코드를 해독하는 ActionScript Virtual Machine (AVM )을 새롭게 개발하고 있는 것을 들 수 있습니다. 또 ActionScript 3.0은 테크놀로지의 좋은  파트너라고도 할 수 있습니다 ActionScript의 최신 버전 ActionScript 3.0 에도 대폭적인 개량이 이루어지고 있습니다. ActionScript 3.0은 구버전보다 훨씬 파워풀함과 동시에 ActionScript 언어를 ECMAScript 국제 규격에 완전하게 준거시킨 버전이기도 합니다. 그 때문에 ActionScript 3.0은 종래의 Flash 디벨로퍼가 익숙했던 것 이상의 엄밀함이 요구됩니다.


알파치는 0에서 1의 범위에서 지정한다
기존의 ActionScript에서는 무비 클립의 알파 프롭퍼티를 0부터 100사이의 값으로 지정하고 있었지만 ActionScript 3.0에서는 0 부터 1 까지가 알파값의 범위가 됩니다. 이러한 변경은 그 자체가 별 것은 아니지만 ActionScript 3.0을 시작하는데 있어서 충분히 주의해 둘 필요가 있는 것이라고 할 수 있습니다. 디벨로퍼가 디버그 작업에 몇 시간을 낭비하거나 의지를 잃는 사태에 빠질 수도 있는 변경사항입니다.

이것과 같이 단순한 변경사항이 많이 있습니다. 예를 들어 지금까지 MovieClip 프롭퍼티로 사용되고 있었던 언더 스코아가 모두 삭제되어 있거나( 「_x 」는 「x 」, 「_width 」는 「width 」가 됩니다), Video 클래스의 attachVideo() 메소드가 보다 적절한 이름의attachNetStream() 으로 변경되어 있거나 합니다. ActionScript 3.0의 습득을 원한다면 ActionScript 테크놀러지 센터에 액세스 하는 것을 추천합니다.

무비 클립의 변경 사항

다음의 코드가 작동한다면 멋지지 않습니까?.

var mc:MovieClip = new MovieClip();

그렇습니다, ActionScript 3.0에서는 이 코드가 올바르게 기능합니다. 이것은 기존의 Flash 디벨로퍼에 있어서 가장 큰 개념상의 변경 사항이라고 할 수 있을지도 모릅니다. ActionScript 3.0 에는 새로운 표시 리스트가 있어서 이것이 Flash Player 위에 있으면서 여러분의 SWF 파일의 실질적인 물리 아키텍처를 구성합니다.

기존의 Flash에 있어서의 최대의 무거운 짐이라고 한다면 무비 클립이 SWF 파일상의 모든 물리 오브젝트의 친타입으로서 다루어지고 있던 것입니다. 이것은 모든 요소가 무비 클립이거나 모든 요소에 타임라인이 필요한 것이 아닌데도 말입니다. ActionScript 3.0에는 DisplayObject라는 이름의 새로운 클래스가 있어서 MovieClip은 단지 표시 오브젝트의 한 종류로서 존재합니다. 또 하나의 표시 오브젝트는 스프라이트입니다. 이러한 DisplayObject의 각 종류에는 다른 능력이 갖춰져 있습니다(각각 다른 자원을 이용합니다). 즉, 무비 클립에 대해서 할 수 있는 것과 스프라이트에서 할 수 있는 것이 각각 다릅니다.

위에서 보았던 코드가 무비 클립을 생성한다고 하여 이 무비 클립이 자동적으로 표시되는 것은 아닙니다. 무비 클립을 표시하려면 해당 DisplayObject 클래스를 스테이지 또는 다른 표시 오브젝트에 첨부할 필요가 있습니다. 무비클립(또는 모든 표시 오브젝트)을 어디에 배치할까는 addChild() 또는 addChildAt() 메소드를 이용해 Flash에 명시적으로 지시할 필요가 있습니다.

이것은 다양한 가능성이 있습니다. 예를 들어 지금까지의 Flash의 경우 무비클립은 특정의 타임 라인에 관련지을 수 있었기 때문에 무비클립을 다른 타임라인상으로 이동할 수 없었지만 앞으로는 removeChild()나 addChild()를 이용하여 표시 리스트내의 표시 오브젝트의 위치를 동적으로 변경할 수 있습니다(예를 들어, 프로젝트가 있는 부분의 타임 라인으로부터 무비 클립을 삭제하고 이것을 프로젝트내의 완전히 개별적인 무비 클립으로 이동 것이 가능합니다). 복잡하게 얽히는 타임라인의 문제점은 회피할 수 있을 것입니다.

_root 는 어디에?
위에서 설명한 변경사항을 바탕으로ActionScript 3.0에서는 _root의 개념도 없어졌습니다. 즉, SWF 파일의 메인 타임라인의 참조가 없어졌습니다(AS3에서는 메인의 타임라인을 유지할 필요성이 없어졌습니다). 또,  만능적으로 액세스 가능했던 Stage 클래스도 없어졌습니다.

그럼 ActionScript 3.0에서 이러한 개념이 어떻게 되냐하면 스테이지 또는 스테이지의 자식이 관련지을 수 있었던 표시 오브젝트는 각자, Stage로 불리는 해당 스테이지에 의해서 참조를 가지게 됩니다. 예전에 _root 로서 파악해 온 것은 향후 Stage 프롭퍼티로 참조할 수 있습니다.

새로워진 패키지
패키지로서 중요한 것은 허용량의 대소가 아니라 몇 개의 클래스를 포함할 수 있는가 하는 것입니다. 패키지와 일련의 클래스는 디벨로퍼가 코드를 정리하는 목적으로 이용할 수 있는 툴입니다. ActionScript 2.0의 패키지는 클래스 파일을 수용하기 위한 컴퓨터상의 폴더이며 코드를 정리하기 위한 편리한 툴 정도 였습니다. 그리고 각 파일에는 오로지 1개의 클래스 밖에 포함할 수 없습니다. 또한 클래스명과 파일명을 완전하게 일치시키지 않으면 안 된다고 하는 제약이 있었습니다.

그러나 AS3는 package 스테이트먼트를 이용해 ActionScript (.as ) 파일 내에서 정의 가능한, 진정한 의미의 패키지를 취급할 수 있게 됩니다. AS 파일에 패키지(또는 네스트화 된 복수의 패키지)를 수록하여 이 안에 1개 또는 복수의 클래스를 포함하는 것이 가능합니다.

이 변경이 프로그래머를 더 혼란스럽게 하는 것으로 보일지도 모르지만 실제로 이 새로운 코드 구조를 시험해 보면 그 유연성이 마음에 들 것입니다. 필자 자신도 이 기능이 코딩 체재에 얼마나의 영향을 미칠까에 대해서 회의적이었지만 작업을 진행하면서 클래스(특히, 순수한 데이터 클래스등)가 매우 간단하게 작성할 수 있게 된 것을 실감하고 있습니다. 패키지에 관한 이번 변경은 ActionScript 프로그래머에 의해 좋은 객체 지향프로그래밍 수법을 제시하는 것이라고 할 수 있겠습니다.

7 개의 주요 패키지/클래스
ActionScript 3.0의 클래스 파일을 사용하기 전에 알아야할 것은 지금까지 ActionScript에 내포되고 있던 일련의 Flash Player 클래스를 ActionScript 3.0에서는 명시적으로 import하지 않으면 안 된다는 것입니다. 만일 텍스트 필드를 작성하고 싶은 경우에는 다음의 예와 같이 텍스트 필드 클래스를 명시적으로 읽어들일 필요가 있습니다.

import flash.text.TextField;

또 텍스트 패키지의 모든 클래스를 읽어 들이고 싶은 경우에는 다음과 같이 기술합니다.

import flash.text.*;

import 스테이트먼트는 변경사항이 없기 때문에 ActionScript 2.0와 같은 방법으로 이용할 수 있습니다. 앞으로 import 스테이트먼트가 예전보다 자주 필요할 뿐입니다. 소정의 클래스를 명시적으로 읽어들이지 않으면 클래스 파일로 완성되는 것은 큰 폭으로 제한되게 됩니다.

ActionScript 3.0의 패키지와 클래스 파일이 익숙하지 않거나 어느 클래스가 필요하게 되는지를 고민하고 싶지 않은 경우는 다음의 7 개의 패키지를 기억해두면 좋을 것입니다. 이 7개의 패키지에는 Flash 어플리케이션 또는 FLA 에 필요한 클래스의 대부분이 포함되어 있습니다(보다 프로패셔널적인 개발 방법으로서는 필요한 클래스만을 읽어들이도록 해 주세요).

import flash.net.*;
import flash.events.*;
import flash.display.*;
import flash.geom.*;
import flash.ui.*; 
import flash.utils.*;
import flash.text.*;

document 클래스를 활용한다

document 클래스는 모든 디벨로퍼에 있어서 유익한 것이지만 특히 메인 타임라인에 1 프레임만을 배치하는 것과 같은 디벨로퍼에 있어서 가장 유용한 것입니다. Flash 어플리케이션을 코딩 할 때 디벨로퍼의 상당수는 FLA 의 단일 프레임에 모든 요소를 배치하여 불과 1행의 ActionScript를 이용하고 제작한 외부 클래스 파일을 호출하고 있습니다. 앞으로는 이 1행의 코드마저 불필요하게 되어 퍼블리시 설정의 다이알로그 박스에서나 스테이지가 선택 되고 있을 때의 프롭퍼티 패널상에서 직접 FLA 에 document 클래스(제작중의 FLA 에 대한 단일의 클래스 파일)을 할당할 수 있습니다.

이 클래스는 반드시 Sprite 또는 MovieClip을 계승하는 것이 필요합니다.(document 클래스이기 위해). 이 클래스의 constructor함수는 해당 SWF 파일의 읽기와 함께 자동적으로 불려 갑니다. 

비트 맵 및 무비의 읽기 방법
loadMovie() 메소드(혹은 예전의 ActionScript로 말하면 MovieClipLoader() 클래스)는 대부분의 Flash 디벨로퍼에 있어서 빠뜨릴 수 없는 존재라고 할 수 있겠습니다. 여기에서는 Flash 9 컨텐츠에 Flash 무비 또는 비트 맵(JPEG ,PNG ,GIF)을 읽어들이기 위한 중요한 7행의 코드를 소개하기로 하겠습니다. 이하에 나타내는 코드는 스프라이트를 사용한 간단한 예지만 이 밖에도 다양한 변이를 생각할 수 있습니다.

var bgToLoad:String = “05092007.gif“;
var bgLoader:Loader = new Loader();
var bgURL:URLRequest = new URLRequest(bgToLoad);
bgLoader.load(bgURL);

var bg:Sprite = new Sprite();
bg.addChild(bgLoader);
addChild(bg);

이 코드에서는 우선 Loader 오브젝트를 작성하고 미디어 파일에 포인트 한 URLRequest 오브젝트를 사용해서 외부 미디어의 읽기를 지시하고 있습니다. 이 때 미디어를 읽어들이게 하는 앞의 표시 오브젝트(bg)가 확실히 존재하는 것을 확인하고 이 코드는 메인의 타임 라인에 존재하게 되므로 맨 마지막 줄의 addChild에 의해서 bg 스프라이트를 스테이지상에 배치하고 있습니다.

XML의 읽기 방법
Flash 유저의 대부분이 외부 SWF 파일 또는 비트맵 읽기에 익숙한 것과 같이 무비에 XML을 사용하고 데이터를 읽어들이는  케이스도 빈번히 볼 수 있습니다. XML의 이용에 관해서는 ActionScript 3.0에서 비약적으로 편리한 기능이 많이 준비되어 있습니다. 이러한 편리한 기능에 접하기 전에 우선 XML 파일을 읽어들이기 위한 기본적인 코드를 소개해 둡니다.

var xmlSrc:String = “myData.xml“;
var ur:URLRequest = new URLRequest(xmlSrc);
var ul:URLLoader = new URLLoader();

ul.addEventListener(Event.COMPLETE,dataLoaded);
ul.load(ur);

function dataLoaded(evt:Event):void
{
trace(evt.target.data);
}

이 코드에서는 우선 사용하고 싶은 XML 파일에 포인트 하는 URLRequest 오브젝트를 작성하고 그 다음에 URLRequest를 읽어들이는 URLLoader를 작성합니다. 그리고 COMPLETE 이벤트(XML 의 읽기 완료)의 청취자로서 dataLoaded() 메소드를 추가하고 있습니다. dataLoaded() 메소드 안에서는 이벤트 자체의 target 프롭퍼티의 data 프롭퍼티에 포인트 하는 것으로 XML을 trace 하고 있습니다.

비약적으로 편리하게 된 XML의 해석
이것으로 ActionScript 3.0의 훌륭한 XML 기능인 ECMAScript for XML (E4X ) 을 이용할 준비가 갖추어졌습니다(ActionScript 3.0은 국제적인 오픈 표준 규격의 ECMAScript 262에 완전 준거하고 있습니다). E4X의 자세한 해설은 다른 기회로 미룹니다만 데이터의 취급이 중요하게 대두되고 있고 ActionScript 3.0에서는 이 부분이 큰 폭으로 개선되고 있는 것을 고려하여 하이라이트를 소개하기로 하겠습니다.

ActionScript 2.0에서 디벨로퍼의 대부분이 XML의 읽기와 동시에 Flash 데이터에의 해석•변환을 실시하여 처리 시간으로서 프로세서에 큰 부담이 되었습니다. 그러나 ActionScript 3.0과 E4X를 이용하면 노드를 직접적으로 참조할 수 있어서 XML의 트리 구조를 파일 시스템과 같이 손쉽게 취급하는 것이 가능합니다. 

Flash Player 9에서 주목하는 신기능
지금까지 소개한 내용을 참고로 하여 ActionScript 3.0에의 대한 우려가 어느 정도 해소되었다고 생각합니다. 다음은 컨텐츠 제작의 폭을 한층 더 넓힐 가능성을 숨긴 Flash Player 9의 몇 개의 신기능에 대해서 다루기로 하겠습니다.

우선 첫 번째는 풀 스크린 모드 입니다. 본래 이 모드는 비디오 컨텐츠 체험을 JavaScript에 손대는 일 없이 확충하는 목적으로 개발된 것이지만 비디오 이외의 모든 어플리케이션에서도 이용할 수 있습니다(다만, 키보드로부터의 입력은 무효화됩니다).

Flash CS3의 새로워진 비디오 재생 컴퍼넌트에 이 기능이 포함되어 있습니다. 지금부터는 ActionScript에 접하는 일 없이 간단하게 풀 스크린 대응의 비디오 어플리케이션을 개발하는 것도 가능합니다(이 경우 HTML 안의 embed/object 나 SWFObject 코드의 allowFullScreen 파라미터를 잊지 않고 true로 설정하는 것에 주의해 주세요).이 기능에 대해 자세한 것은 Tracy Stampfli 씨가 집필한 Flash Player 디벨로퍼 센터 기사 「Flash Player 9 의 풀 스크린 모드에 대해 」를 참조해 주세요.

또 하나의 주목 할만한 기능은 뮤직 투시기을 작성할 때 사용할 수 있는 오디오 스펙트럼 해석 기능 입니다. 새롭게 정비된 SoundMixer 클래스에는 computeSpectrum()라고 하는 이름의 메소드가 포함되어 있어서 이 메소드를 이용하는 것으로 음악을 수치화할 수 있습니다. 그리고 수치화된 데이터를 바탕으로 쿨한 오디오 애니메이션이나 뮤직 투시기를 작성할 수 있습니다. 이 기능을 소개하는 매우 효과적인 튜토리얼에 대해서는 Peter deHaan 씨의 블로그의 엔트리 를 참조해 주세요.

그리고 마지막으로…
이 기사를 마치기 전에 참고 정보를 수집하기 위한 가이드를 소개하고 싶지만 그 전에 우선 이번 완전히 새로운 언어가 도입되었음에도 불구하고 매우 포괄적인 Flash CS3 Professional 헬프 파일을 제작한 Flash 서포트 팀에 대해서 칭찬을 보내고 싶습니다.

ActionScript 3.0과 Flash CS3는 아직 신출내기 단계입니다. 따라서 아직 관련 자료가 그만큼 많지는 않습니다. 향후 자료가 증가해 갈 것은 틀림없습니다. 현시점에서의 퍼스트 스텝으로서는 ActionScript 3.0과 Flash에 관한 최신 또는 갱신판의 기사, 샘플, 퀵 스타트 튜토리얼 등이 다수 게재된 Flash 디벨로퍼 센터를 북마크하는 것을 추천합니다. 또 Adobe.com에서 공개중의Flash CS3 LiveDoc 및Flex 2 LiveDoc도 참조하도록 해 주세요.(이 기사에서도 반복하여 참조한 것처럼) 이것들은 계속적으로 갱신되는 헬프 파일을 포함한 유용한 자원이며 각 항목에 대해서는 아도브의 서포트 스탭이나 다른 디벨로퍼가 코멘트를 쓰는 곳도 준비되어 있습니다.

아울러 2006년 중순부터 ActionScript 3.0과 Flex 2에 관한 복수의 서적과 DVD 를 출판하여 Flash 커뮤니티에 공헌해 주셨던 Joey Lott 씨에 대해서 이 자리를 빌려 Flash 커뮤니티의 일원으로서 개인적인 사의를 표하고 싶습니다. 이러한 서적•DVD는 매우 알기 쉬운 참고 자료입니다. 그리고 Colin Mook 씨에 의한 「Essential ActionScript 3.0 」가 출판되는 것을 기다릴 뿐입니다.

어땠습니까.이 기사를 읽는 것으로 ActionScript 3.0의 개념 이해가 깊어지면 다행입니다. 여러분도 꼭 이 훌륭한 최신 테크놀러지를 경험해 보세요.

출처 : 영문 포스트 http://jasu.tistory.com/298

Friday
Apr 25,2008

정리하기 전에

매우 유익한 정보들이 가득한 웹접근성 (Web-Accessibility) 세미나가 4월 23일 코엑스 그랜드볼룸에서 있었습니다.

주요한 내용들을 요약하면서, 개발자의 입장에서의 생각을 곁들여 정리해 보았습니다.

저처럼 웹표준도 이제 겨우 적응하려 하는데 웹접근성란건 또 왜 튀어나와서 피곤하게 하지? 라고 생각했던 분도 계실거라 생각합니다.

하지만 조금더 생각해 보면 접근성이라는것은 반드시 지키고 고려해야 할 정말 중요한 이슈라는걸 느낄 수 있습니다.

 

“장애인에게 필요한 것은 줄기세포가 아니라 현실적인 정보기술(IT)”

전동휠체어에 앉아 입김작동 마우스 등 여러가지 AT(Assist Technologies) 를 통해 PC 와 인터넷을 이용하는 모습을 세미나에서 직접 보여준 서울대 이상묵 교수님 뿐만 아니라,

루게릭병으로 신체의 대부분이 마비되어 눈동자와 턱관절만을 가지고 AT 를 이용해서 PC 와 웹사이트를 이용하는 프랑스의 한 할머니의 모습이 담긴 동영상도 볼 수 있었습니다.

물론 이런 분들이 사용하는 AT 들은 접근성이 고려되서 디자인된 웹사이트가 아니라면 제대로 사용할 수 없습니다.

접근성이라는게 꼭 장애인들만을 고려하는건 아니지만 이러한 사례를 직접 보면 그 중요성에 대해 새삼 실감하게 됩니다.

우리나라에서도 올해 4.11 부터 시행된 “장애인 차별금지 및 권리구제 등에 관한 법률” 로써 그 당위성은 충분합니다.

 

My Web My Way

영국 bbc 웹사이트에서 서비스하고 있는 “My Web My Way” 는 웹사이트를 누구나 쉽게 접근하고 사용할 수 있는 방법을 잘 설명해 주고 있으며, 웹접근성을 가장 잘 표현해주는 키워드 이기도 합니다.

가끔 잘 만들어진 시설이나 공원에서 길을 가다보면 누구나 쉽게 지나갈 수 있도록 계단도 있지만 그 옆에 경사로도 있는걸 볼 수 있죠.

이런것처럼 웹사이트에도 모든 사용자(어르신,어린이,장애인,왼손잡이 등) 혹은 모든 환경(핸드폰,PDA 등의 모바일기기, 마우스등 보조장치가 없을때, 어둡거나 시끄러울때, 흑백)에게도 정보에 접근할 수 있는 길을 선택할 수 있도록 여러갈래의 길을 열어두는 겁니다.

장애인의 경우 청각장애,지체장애,시력장애,지적장애 등 그 다양한 종류 때문에 고려해야할 부분이 많다는 점이 우리에게 조금은 어려움으로 다가 올 수도 있습니다. (하지만 해내야죠:))

 

Accessibility + Usability + Universal Design

장애인,노인 등 모든사람이 이용할 수 있고 (웹접근성에 준수하고), 손쉽고 편리하게 이용하며, 원하는 정보를 빨리 얻어낼 수 있는 웹사이트 를 만들어야 합니다.

한가지 주의해야 할점은 보여지는 디자인이나 다이내믹하고 화려한 효과의 UI 등에 치중한 나머지 정작 중요한 요소가 묻혀질 수 도 있다는 것입니다.

같은 웹사이트에서 일반사용자는 아름다운 이미지을 보고 있지만, 시각장애자는 스크린리더가 읽어주는 image098.jpg 를 듣게 됩니다.

인터넷은 정보의 바다입니다. 모습보다는 컨텐츠에 더 우선을 두어야 합니다. 여기에 미려한 디자인까지 곁들여진다면 “보기 좋은 떡” 이 되는 것이죠.

 

ARIA (Accessibility Rich Internet Applications)

새로운 어플리케이션 플랫폼으로 각광 받고 있는 RIA 제품군도 접근성에 대한 노력이 활발합니다.

Microsoft Silverlight 2.0 Beta 부터는 UIA (User Interface Automation) 등을 통해 접근성에 대한 기술적인 지원이 가능해 집니다.

Adobe Flex 3 는 접근성 컴퍼넌트들을 지원하고, Adobe Flash CS3 역시 접근 가능성 패널을 두어서 마우스 없이 키보드만으로도 이용할 수 있도록(tab & reading order) 제작이 가능합니다.

 

웹접근성 구축 성공사례를 통해 본 구축 방안

환경부 웹사이트, 경상남도 의성군 웹사이트 가 웹접근성 구축 성공사례로 소개가 되었습니다.

두곳 모두 W3C 의 Markup Language 권고안(HTML 4.01 Transitional/XHTML-1.0-Strict DTD) 과 Style 권고안(CSS2), 그리고 웹접근성 지침(IWCAG/KWCAG) 에 정확히 준수하였습니다.

W3C 의 Markup ValidatorCSS Validator 로 유효성을 체크하면서 웹표준 작업을 통해 다양한 OS,브라우저로부터의 접근성을 확보하여 어떤 환경에서도 동일하게 사용 가능한 기능을 갖추고 있습니다.

아래는 두사이트에서 소개한 내용들을 정리해 보았습니다. 

  • 모든 비 text 컨텐츠(이미지,멀티미디어,사운드,표,프레임,스크립트,애플릿,색상 등)에 “alt” 속성을 사용하여 대체텍스트를 제공한다. (기술적으로 ALT 속성만으로도 웹접근성에 상당부분 기여한다고 합니다)
    <img src=”…” alt=”의성군민의 노래 다운로드”>
  • 대체텍스트의 내용이 길거나 복잡한 경우 longdesc 속성으로 추가정보를 제공한다.
    <img src=”…” longdesc=”info.aspx”>
  • 불필요한 팝업창은 쓰지 않는다.
  • 정보가 있는 컨텐츠는 대체텍스트가 없는 이미지나 배경에 해당하는 레이아웃에 속하지 않게 한다.
  • 동영상 등 모든 시청각 자료는 자막을 제공한다. (여기서 자막이라는건 영상에 삽입되도 좋지만 옆에 텍스트로 따로 보여주는 방법도 좋은 방법이겠죠)
  • 색상을 표현하는 컨텐츠는 색상을 배제해도 명암이나 패턴등으로도 원하는 정보를 전달한다.
  • TEXT 는 읽기 쉽게 충분한 크기로 제공한다.
  • 키보드만으로 웹사이트의 모든 메뉴와 컨텐츠의 제어와 접근이 가능하다.
    - 예를들면 onclick 과 onkeypress 이벤트를 동시에 사용하는 방법
  • 반복적인 링크가 많은 페이지는 본문,대메뉴,서브메뉴등으로 바로 이동할 수 있는 스킵 네비게이션을 제공한다.
  • 돌아가는 배너 등 이용에 시간제한이 있는 컨텐츠는 시간설정을 사용자가 선택할수 있는 기능을 제공한다.
  • 테이블에 대한 요약과 설명을 제공한다.
    <table summary=”자유게시판 게시물. 총1429건, 96 페이지중 1페이지 15건입니다. 본데이터표는 6행, 15열로 구성되었습니다. 각열은 일련번호,제목,작성자,작성일,첨부파일,조회수 로 구성되어있습니다.”>
    <caption>자유게시판. 전체1429건 페이지(1/96)</caption>
    ….
    </table>
  • 시맨틱 웹, RDF 등 브라우저 이외의 기계(검색엔진 등) 접근에 친화적이며, 의미에 맞는 적절한 html element(tag)를 사용한다.
    예를 들어 주소의 정보를 나타내고자 하는 컨텐츠는 이미지나 다른 엘리먼트를 쓰지말고 주소를 담당하는 <address> 엘리먼트를 사용한다.
    <address>769-700 경상북도 의성군 의성읍 후죽리… </address>
  • 양식(form)의 각 서식에 <label> 엘리먼트를 사용해서 id 속성과 for 속성으로 입력 제어를 편리하게 제공한다.
    <label for=”name”>이름</label><input type=”text” name=”name” id=”name”>
  • <noscript> 를 사용해서 스크립트 사용이 불가능한 경우에도 접근가능하게 한다.
  • 이미지맵(imagemap), 프레임(frame) 등은 사용을 자제한다.
  • 페이지를 일반적인 상식에 맞게 논리적으로 구성한다.

 

Accessible User Interface

onmouseover, onclick 등 마우스 이벤트만 고려된 UI 는 Accessible 하지 않습니다.

시각장애자들의 AT 인 Jaws 라는 스크린 리더를 직접 사용해 본다면 우리의 웹사이트들이 얼마나 심각한 수준으로 이기적인지 알 수 있습니다.

네비게이션의 역할하는 부분이나 양식을 입력받는 Form 등에서는 최소한 키보드 이벤트를 기본으로 디자인 해야 합니다.

웹접근성의 기술적인 부분은 약간의 시간과 노력을 투자한다면 어렵지 않게 구현할 수 있지만, 웹사이트의 기획단계에서 접근성에 대한 인식과 고려가 얼마나 잘되었는지가 더더욱 중요합니다.

 

우리는

Jobkorea.co.kr 의 경우 웹표준 작업을 통해서 장비의 비용 절감 효과를 크게 거두었다고 합니다. 이렇듯 웹표준은 비지니스적인 측면에서도 상당한 설득력이 있습니다.

웹접근성 준수에 있어서 기술적인 부분은 웹표준을 통해 상당부분 해결 된다고 봤을때, 장차법이라는 법적인 규제까지 그 의미를 더한다면 “must” 의 동기부여는 충분하다고 생각합니다.

다르게 생각하면 이런 접근성 때문에 Ajax 등의 신기술을 제대로 써먹지 못하고 방해가 된다고 생각할 수도 있겠지만, 

신기술의 화려한 효과를 적절히 사용하면서 접근성과 잘 어우러지게 만드는것도 충분히 할 수 있습니다.

웹접근성 구축에 있어서 손발의 역할을 하는 개발자들도 중요하지만, 웹사이트의 정보를 보다 쉽게 전달해 주고자 하는 UI 등의 기획적인 부분을 담당하고 있는 분들이 더 중요합니다.

기획자들은 웹접근성을 고려해서 누구나 쉽게 정보를 전달받을 수 있도록 UI 를 설계해야하고, 웹퍼블리싱 등을 담당하는 개발자들은 이러한 기획안을 감수한 후에 기술적으로 웹접근성을 고려해서 제작하는 것이죠.

웹표준과 시맨틱 웹에 준수하면서 웹접근성까지 고려한 UI 의 디자인이라면 더할 나위 없이 좋은 웹사이트가 되겠죠.

단순히 저런게 있구나 가 아니라 반드시 실행에 옮겨야 한다는 전제로, 앞으로 우리가 준비해야 할 웹사이트 모습의 청사진을 그릴 수 있는 계기가 되었으면 합니다.

 

참고 자료