[청주 홈페이지] 웹사이트 제작, 쇼핑몰 제작 이제 웹표준화도 생각하세요.

TOGETHER 2011. 2. 6. 05:51

 

1. 웹표준화 작업 이란

W3C(World Wide Web Consortium)라는, 국제 웹제작 표준화기구를 창궐하여 공식표준이나 다른 기술 규격을 가리키는 용어이다.

-       HTML, XHTML, SVG, XForms와 같은 마크업 언어의 W3C권고

-       스타일시트, 특히 CSS의 W3C권고

-       흔히 자바스크립트라고 불리는 ECMA스크립트라는 Ecma 인터내셔널 표준

-       문서 객체 모델의 W3C 권고

웹표준화는 CROSS BROWSING은 물론이고, OS의 특성을 타지 않게 개발되어야 하며, 웹 뿐만 아니라 모바일, 기타 웹에 접속을 가능케 하는 장치를 포함하여, 개발물이 노출되도록 하여야하며, 디스플레이에 있어서 부가적인 플러그인이나 인스톨 모듈을 갖지 않게 하여야한다. 궁극적으로 엑박이 나타나지 않아 모든 사용자들의 보편적 접근성을 갖춰야 하겠다.

 

그럼 표준규격에 의해 사이트가 제작되면 어떤점이 좋을까요?

- 페이지 로딩속도가 비표준 사이트 보다 빨라집니다.(구조적이기 때문에 브라우져 인식시간이 줄어듭니다.)

- xml 을 지원하는 다양한 정보기기에서 별도의 제작비용없이 서비스 할 수 있습니다.

- 다양한 운용체제(리눅스, 윈도우XP, 윈도우Vista, 맥켄토시) 에서 사이트를 이용하는데 불편함이 없습니다.

- 다양한 웹브라우져(ie계열, 파이어폭스, 오페라, 구글크롬, 사파리) 에서 사이트를 이용하는데 불편함이 없으며, 거의 동일한 형태로 브라우져에 보여지게 됩니다.

- 구조와 표현 및 동작을 완벽히 분리해서 마크업을 하기 때문에 차후에 유지보수나 개편시 작업시간을 줄일 수 있습니다.(다만, 최초 개발단계에서는 다소 시간이 걸릴수있습니다.)

- 장애인 및 비장애인, 어린이, 노인, 취약계층 등에서 웹사이트를 이용하는데 불편함이 없습니다.

 

2. 인터넷 웹 콘텐츠 접근성 지침

웹표준화 작업의 예제를 보기 이전에 웹표준화 작업을 하기위한 지침을 알고 넘어가는 것이 중요합니다.

아래의 지침은 현재 우리나라에서 시행하고 있는 "웹접근성 품질마크 인증" 에 사용되는 지침이며, 한국정보문화 진흥원에서 시행하고 있습니다.

구분

항목(13개)

지표(18개)

준수

기준

1. 인식의

용이성

(3개)

1-1. 텍스트 아닌 콘텐츠의 인식

(1) 이미지의 의미나 목적을 이해할 수 있도록 적절한 대체 텍스트를 제공해야 한다.

※ 의미가 있는 이미지의 경우 대체 텍스트를 의미나 기능이 동일하게 제공

※ 의미가 없는 이미지(글머리기호, 테두리, 장식용 이미지, 공백 이미지 등)의 경우 대체 텍스트를 blank(alt="")로 제공

90%

(2) 배경 이미지가 의미를 갖는 경우, 배경 이미지의 의미를 이해할 수 있도록 대체 콘텐츠를 제공해야 한다.

※ 의미가 있는 이미지는 배경 이미지로 사용하지 않는 것이 바람직함

90%

1-2. 멀티미디어 매체의 인식

(3) 동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단(자막, 원고 또는 수화)를 제공해야 한다.

※ 실시간 방송이라도 대체 수단을 제공하여야 하나, 예외로 인정할 수 있음

90%

1-3. 콘텐츠의 시각적 명료성

(4) 색상을 배제하여도 원하는 내용을 전달할 수 있도록, 색상 이외에도 명암이나 패턴 등으로 콘텐츠 구분이 가능해야 한다.

90%

2. 운용의 용이성

(6개)

2-1. 이미지 맵 기법 사용 제한

(5)·서버측 이미지 맵을 제공할 경우, 해당 내용 및 기능을 사용할 수 있는 대체 콘텐츠를 제공해야 한다.

※ 지리정보의 경우에는 예외로 인정할 수 있음

90%

2-2. 프레임의

사용 제한

(6) 프레임을 제공할 경우, 해당 내용을 이해할 수 있도록 적절한 제목(title 속성)을 제공해야 한다.

90%

2-3. 깜빡거리는 객체 사용 제한

(7) 깜빡이는 콘텐츠를 제공할 경우, 사전에 경고하고 깜빡임을 회피할 수 있는 수단을 제공해야 한다.

※ 깜박임 기준: 초당 3~49번을 깜박이는 콘텐츠

90%

2-4. 키보드로만 운용 가능

(8) 모든 기능을 키보드로 이용할 수 있어야 한다.

90%

2-5. 반복 내비게이션 링크

(9) 반복되는 링크를 건너뛸 수 있도록 건너뛰기 링크(skip navigation)를 제공해야 한다.

50%

2-6. 반응시간의 조절기능

(10) 시간 제한이 있는 콘텐츠를 제공할 경우, 시간 제어 기능을 제공해야 한다.

※ 예외사항 : 경매, 실시간 게임 등과 같이 시간제한이 필수적인 콘텐츠

70%

(11) 새 창(팝업창 포함)을 제공할 경우, 사용자에게 사전에 알려야 한다.

70%

 

3. 이해의 용이성

(3개)

3-1. 데이터 테이블 구성

(12) 데이터 테이블을 제공할 경우, 테이블의 내용을 이해할 수 있는 정보(제목, 요약정보 등)를 제공해야 한다.

70%

(13) 데이터 테이블을 제공할 경우, 제목 셀과 내용 셀을 구분할 수 있어야 한다.

70%

3-2. 페이지의 논리적 구성

(14) 해당 페이지를 잘 이해할 수 있도록 페이지 제목(<title>)을 제공해야 한다.

70%

(15) 콘텐츠는 논리적인 순서로 구성되어야 한다.

90%

3-3. 온라인 서식 구성

(16) 온라인 서식을 제공할 경우, 레이블(<label>)을 제공해야 한다.

90%

4. 기술적 진보성

(1개)

4-1. 신기술의 사용

(17) 애플릿, 플러그인(ActiveX, 플래시) 등 부가 애플리케이션을 제공하는 경우, 해당 애플리케이션이 자체적인 접근성을 준수하거나 사용자가 대체 콘텐츠를 선택하여 이용할 수 있어야 한다.

70%

(18) 마크업 언어로 구현할 수 있는 기능(링크, 서식, 버튼, 페이지 제목)을 자바스크립트로만 구현하지 말아야 한다.

90%

 

3. 웹표준화 작업의 조금 세부적인 설명

웹표준화 작업은 위에서 잠시 언급한바 있습니다만,

구조, 표현, 동작 의 3 가지 요소로 구분하여 제작하고 있습니다.

 

3-1 구조란?

구조란 html 페이지 내부의 태그를 말하는 것이며 건축물로 비유하자면 기둥, 지붕, 보, 골조 등과 같이 기본골격을 형성하는 것이라고 생각 하시면 되겠습니다.

 

3-2 표현이란?

표현은 css 페이지 내부의 태그를 말하는 것이며 건축물로 비유하자면 외장재의 모양이나 색상, 창문의 모양, 등과 같이 건물이 표현하고자 하는 미적인 아름다움을 추구하는 것이라고 생각 하시면 되겠습니다.

 

3-3 동작이란?

동작은 javascript 나 active-x, applet 과 같이 실제로 움직임이 있는 요소를 말합니다. 건축물로 비유하자면 에스컬레이터나 엘리베이터 혹은 자동문 정도로 생각하면 될거같습니다.

 

작업 단계별로 구조를 먼저 세우고 표현을 위한 css 를 제작하며 마지막 단계에 제대로 동작할 수 있게 작업을 하는 것이 바로 웹표준화 작업의 절차라고 생각하시면 되겠습니다.

 

4. 웹표준화 작업 예제

주로 공공기관 사이트에서 웹표준화 작업이 활발하게 이루어지고 있습니다.

다음은 "웹 접근성 품질마크" 를 획득한 사이트 들입니다.

한번씩 들러보셔서 키보드 탭키를 이용해서 전체 사이트의 경로이동이 가능한지 확인해보시고, 비표준으로 만들어진 사이트에서도 키보드 탭키를 이용해서 사이트 이용이 가능한지 우선 확인해보세요. 확실히 차이점을 느끼실 수 있을 것입니다.

 

서대문구(서울) http://www.sdm.go.kr
노동부 http://www.molab.go.kr
행정안전부 http://www.mopas.go.kr
구미시(경북) http://www.gumi.go.kr
청와대 http://www.president.go.kr

저작자표시

'TOGETHER' 카테고리의 다른 글

[노이즈마케팅 사례] 한예슬도 노이즈마케팅  (0) 2011.05.06
충북, 청주 기창아! 드뎌 개시! 창업교육전문 - 기술창업아카데미 교육안내 [충북대학교 주관]  (0) 2011.04.25
[충북, 청주] 2011 대한민국 실전 창업리그 - 창업아이디어 및 창업아이템 보유한 개인 또는 단체 신청 가능  (0) 2011.04.25
[청주 홈페이지/쇼핑몰] 웹(web) & 앱(apps) 개발 전문회사 "홈커뮤니케이션"  (0) 2011.04.07
[어린이 알파벳공부] 길에듀월드 회사에서 새롭게 출시된 알파벳 자석 맥퍼즐  (0) 2011.02.27
google 검색 이냐? 네이버 검색이냐?  (0) 2010.07.25
자동차 업체들의 온라인 바이럴마케팅 사례  (0) 2010.07.06
국민참여당 충북지역 창당대회 알림(청주 유시민 특별 강연회)  (0) 2010.01.17
장사 잘되는 쇼핑몰은 이유가 있다  (4) 2009.11.12
[펌] 꼭읽어보세요~신종플루 예방백신이 더 위험하다! - 신종플루 예방만이 살길이고, 소독만이 해결책이군요!  (0) 2009.11.09
블로그 이미지

금태양 金太陽

금태양의 세상읽기,통찰력큰사람,지식위지혜실천,과학이종교,무소유가행복,영물인김범,자유정의사랑,파워블로거,풍류선비,올마운틴MTB라이더,대금태양,웹제작 웹디자인 웹마케팅 웹기획 전문가

,

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

최근에 받은 트랙백

글 보관함

05-02 18:45

티스토리툴바