2009년 2월 7일 토요일 오후 12시 30분.
CDK와 한국정보문화진흥원에서 개최한
"웹표준의 날 - 웹표준을 넘어서" 세미나에 참석했습니다.

한국정보문화진흥원은 강서구 등촌동에 있습니다.
8호선 석촌에서 천호역으로,
5호선을 타고 여의도(강바닥>_<)와 목동을 지나 화곡(야호! 처음보는 동네)에서 내려 마을버스를 타고 도착했습니다.

한국정보문화진흥원1층에 들어가니
여러 장애인을 위한 컴퓨터 보조기기들을 전시해 놓고
실제로 사용해 볼 수 있도록 한 체험관이 있었습니다.



시간이 많았다면 다 경험해 볼 수 있었을텐데-
세미나 시간에 촉박하게 도착한지라, 다음 기회로 미루고 2층으로 고고!

입구에서 이름표와 두꺼운 책-'웹 접근성 교육 커리큘럼 개발'을 받았어요.
오페라 스티커와 폰고리도 잘 챙겼습니다.^^





이름표 배부테이블 건너편엔
CDK(http://forum.standardmag.org) 에서 진행되었던
웹표준의 날 이벤트 (http://forum.standardmag.org/viewtopic.php?id=2560) 의 답변 목록이 주루룩~ 붙어있었습니다.
부끄럽지만 제 답변도 걸려 있었어요. //ㅁ// (소중한 '한표' 던져주신 분, 감사합니다ㅠㅠ)

각 타임별로 제가 느끼고 기억하고 싶은 문구만 적었습니다.
자세한 내용은 동영상이나 링크를 눌러주세요~ 발표자 분께서 직접 작성하신 글입니다.

1. 웹 표준을 넘어서 - 정찬명님

http://naradesign.net/wp/2009/02/08/604

+ 웹의 상호운용성
+ 소수를 위한 것이 아닌 모두를 위한 유니버설 디자인 (http://naradesign.net/wp/2007/01/27/111)

2. 웹 표준, 기술의 진정성 - 추지호님

http://www.pageoff.net/883

+ 웹표준의 진정성
+ 영혼을 담는 작업.
+ 소통의 중요성

3. 장차법 시대의 웹 표준 - 장성민님

http://www.jangkunblog.com/wp/2009/02/08/146

+ 장차법 : 장애인 차별금지 및 권리구제에 관한 법률
+ 웹 접근성은 기획자, 디자이너, 개발자 모두가 함께 고민해야
+ 스스로를 과대평가하라.
+ 마음을 담아라.

4. 브라우저 업그레이드 캠페인 - 조현진님

http://resistan.com/savethedeveloper

+ 누구의 탓도 아닌 바로 우리 모두의 몫.
+ 나부터 달라지자.

5. 웹 표준 경진대회 & CSS Playground  - 홍윤표님

http://mydeute.com/txp/article/134/KWSD3rd

+ http://award.standardmag.org (2회 : 2009년 5월 1일)
+ http://cssplayground.net

6. 웹 접근성 품질 마크 인증제도 - 한정기님

http://www.iabf.or.kr/Lab/Certification/Certified.asp

+ 필수 마크가 되는 그날까지.

7. 웹 접근성 평가툴에 대한 의견 - 문준기님

http://www.iabf.or.kr/Lab/Kadowah/Kadowah.asp

+ KADO-WAH는 넘사벽. 도움말을 숙지하여 빠른 시일내로 꼭+_+
+ 스크린리더를 처음 보았어요. 제 모습도 (비록 등이지만) 찍혔습니다. 으헤헷!



사진출처 : 봄눈님 블로그 - 웹 뒤에 숨은 'Web' http://www.pageoff.net/882

8. 웹 표준, 선배에게 질문하세요.

이 곳에 모인 사람들의 열정이 단연 돋보였던 시간이었습니다.
+ IR 기법의 장단점과 에디터 응용사례.
+ 웹퍼블리셔의 Position, 업무의 범위, 갖춰야 할 태도.
+ 국내 웹표준 커뮤니티의 부족함과 자료의 한계.

그리고 가장 피부에 와닿았던 질문이 있었습니다.
+ 게임과 같은 타겟층이 분명한 서비스도 장애인을 위한 웹 접근성에 신경쓸 필요가 있을까?
듀트님의 자료중 한페이지가 제 머리를 울리더군요.


출처 : 민간부문의 장애인 웹 접근성 제고 세미나 : 조직문화 조성사례
웹 접근성 재고를 위한 조직 문화 조성사례_홍윤표.pdf
http://www.iabf.or.kr/Pds/TrendView.asp?board=trend&pg=1&bseq=2813

웹으로 만들어 브라우저 안에 띄우는 것이라면.
당연한 말인 것을요. 잊고 있었나 봅니다.


이름표 뒤에 적혀있던 번호로 경품추첨을 마지막으로 (80을 속으로 그리 외쳤건만ㅠㅠ)
세번째 웹표준의 날 행사는 막을 내렸습니다.

많은 것을 배우고 깨우친 시간이었습니다.
앞으로 이런 행사 자주 있었음 좋겠습니다.^^

출처 : http://mkyoon.com/116 

무질서한 웹에 질서를 부여하다 !!!

“이제 웹표준은 기준이 되고 규정이 되고 나아가서는 법률이 되고 있다. 처음에 웹이 만들어진 목적으로 다시 돌아가서 웹은 이제 서로 가지고 있던 장벽을 깨고 좀 더 많은 사람들을 위해서 좀 더 편리하게 만들어지는 도구를 얻게 되었다. 그것이 웹표준이다.”

명실상부한 웹표준의 최고 권위자 제프리 젤드만(Jeffrey Zeldman)이 쓴 최고 베스트셀러. 웹표준으로 만들고 접근성이 높은 웹사이트만이 살아남는 Web2.0 시대를 대비하는 필수도서를 만나보자.

베스트셀러 작가이자 디자이너, 웹표준의 전도사인 제프리 젤드만이 업계를 뒤흔들었던 그의 가이드북을 새로이 펴냈다. 초판이 출시되어 표준 기반의 웹디자인을 세상에 알린 이후, 더욱 발전된 웹 디자인 방법들과 새롭게 변화된 브라우저에 대한 내용을 전부 다루고 있다. 매력적이고 재치 넘치는 방식으로 복잡한 내용을 이해하기 쉽게 다루고 있어, 많은 사람들에게 더 빠르게 다가갈 수 있으면서 만들고 유지하기 쉬운 사이트를 만드는 핵심적인 방법을 알려준다.


1부: 이미 문제는 발생해 버렸다

시작하기 전에

비용, 줄어드는 효과
구식화의 악순환 끝내기
호환성이란 무엇인가?
규정도 없고 정석도 없다
이론이 아닌 실행
꼭 이 책을 읽어야 할까?

1장 웹사이트의 99.9%는 시대에 뒤떨어진다
최신 브라우저들과 웹표준
버전 문제
이전 버전에 대한 고려
나쁜 마크업에 좋은 일이 생길 때
해결책

2장 표준에 맞춰 디자인하고 제작하기
고생담
표준화가 도입되기 이전의 디자인 비용
구시대적인 방법으로 만든 현대적인 웹사이트
비참한 왕국
웹표준의 세 가지 요소
실행
절충법의 이점
웹표준 프로젝트: 이식성
A List Apart: 하나의 페이지, 다양한 디자인
앞으로의 발전방향

3장 표준화가 어려운 이유
보기에는 좋지만 실행하기는 끔찍하다
2000년: 브라우저가 완성된 해
너무 적다? 너무 늦었다?
나쁜 브라우저가 나쁜 습관을 만든다
혼동되는 사이트와 갈피를 잡을 수 없는 명칭들
플래시
호환은 나쁜 것이다

4장 파인더빌러티(findability), 조직, 블로그, 팟캐스트(Podcast), 롱테일, Ajax(그리고 표준화가 대세가 되는 다른 여러 가지 이유들)
범용언어 (XML)
XML 애플리케이션과 웹 사이트
호환성
새로운 협력의 시대
웹표준과 저작 프로그램
CSS 레이아웃의 출현
목적 있는 유행 따라가기
웹표준의 주류

2부 디자인과 제작

5장 최신 마크업
낡은 마크업의 숨겨진 오점
재구성
주요 요약
어느 XHTML이 더 우리에게 맞을까?

6장 XHTML: 웹의 재구성
XHTML로의 전환: 간단한 규칙과 손쉬운 가이드라인
실행 요약: XHTML 규칙
비주얼 요소와 구조

7장 확실한 페이지를 더 빈틈없고 견고하게: 엄격한(Strict) 마크업에서의 구조와 메타 구조
모든 요소를 구조적으로 사용해야 할까?
혼합형 레이아웃과 간결한 마크업: 해야 할 것과 하지 말아야 할 것들
구식 방법들

8장 XHTML 예제: 혼합형 레이아웃(1부)
전환형 방법의 장점
기본 접근법(개요)
초기 마크업: 최종 마크업과 같다

9장 CSS 기본
CSS 간략하게 살펴보기
스타일 분석
외부, 내부, inline 스타일
‘최고 브라우저 테스트’ 방식

10장 CSS 활용: 혼합형 레이아웃(2부)
이미지 준비
기본 요소 설정하기
네비게이션 요소 : 첫 번째 단계
네비게이션바 CSS: 두 번째 단계의 첫 번째 시도
네비게이션바 CSS: 마지막 단계
마지막 단계: 외부 스타일과 ‘현재위치’ 나타내기

11장 브라우저 다루기 1부: DOCTYPE 전환과 표준 모드
DOCTYPE 전환의 전설
브라우저 다양성에 축배를!

12장 브라우저 다루기 2부: Box Model, 버그, 차선책
Box Model과 이에 대한 불만들
윈도용 인터넷 익스플로러의 공백 버그
윈도용 인터넷 익스플로러 ‘Float’ 버그
Flash와 QuickTime: 고객의 요구에 의한 Object?

13장 브라우저 다루기 3부: 타이포그라피
사이즈 문제
사용자 조절
구시대 사람들의 공포
드디어 등장한 표준 사이즈
em 단위의 사용: 웃음과 눈물
픽셀에 대한 열정
폰트 사이즈 키워드 방법
최고의 시기

14장 접근성의 기본
책에서의 접근
일반적인 혼란
규정과 레이아웃
접근성에 관한 소문들의 진상
요소별 접근성 팁
Cynthia Says를 애용하자
접근성 계획: 어떤 장점이 있을까

15장 DOM 기반의 스크립트로 작업하기
DOM 관련 서적
DOM이란 무엇인가?

16장 CSS로 디자인하기
조건의 정의

웹에서 가장 유명한 디자이너이면서 작가이다. 개척정신이 투철한 그의 웹사이트 zeldman.com은 1995년부터 수백만의 웹 디자이너와 개발자 그리고 컨텐츠 전문가들에게 조언을 주고 즐거움을 주었다. 1998년 자신들의 브라우저에 같은 기술을 지원하고 CSS를 안정적으로 지원하도록 마이크로소프트와 넷스케이프를 설득한 웹표준화 프로젝트(The Web Standards Project)를 공동 설립했다. 그는 웹에 대한 사람들의 생각을 깨우쳐주고, 권위 있는 웹 제작자들을 위한 온라인 공간인 A List Apart(alistapart.com)의 발행자이면서 크리에이티브 디렉터이고, 표준기반 디자인 컨퍼런스 An Event Apart(aneventapart.com)를 에릭 마이어(Eric Meyer)와 함께 공동으로 만들었다. 또 Taking Your Talent to the web의 저자이기도 하다.

웹 접근성 동향 보고서(4월7일)

드디어 내일이면 4월11일, 장차법 적용이 1단계 적용이 되는 일자이다.
많은 뉴스와 홍보활동이 이루어지고 있는 중에, 아직은 완벽한 대처가 부족한 상태에서 조마조마한 심정이 들기까지 하고 있다.

지난 4월7일 카도에서 주관하고 행정안전부에서 주최한 "웹 접근성 기술동향 및 향상방안 세미나"에 참석하였다.
연일 제안서와 PT등으로 바쁜 일상중에 다녀왔지만, 나름 웹 접근성 분야의 분위기를 느끼고 현재 우리나라의 웹 접근성 수준을 파악할 수 있는 의미있는 자리였다.

10:00~10:40 기조강연 (LG CNS 고현진 부사장)
웹의 창시자 팀버너스-리의 "The power of the web is in its universality. Access by everyone regardless of disability is
an essential aspect."말을 시작으로 한, 고현진 부사장의 기조연설은 웹 접근성과 웹표준으로 인한 기대효과를 전파하였다.

10:40~10:45 개회사(한국정보문화진흥원 손연기 원장)

10:45~10:50 축 사(행정안전부 박성일 정보화기획관)

10:50~11:10 웹 접근성 현황 및 정책방향(행정안전부 홍영우 사무관)
장애인의 인터넷 이용률은 52%에 달하며, 전체 국민 77%와는 많은 격차가 발생하고 있고, 이러한 차이를 감소시키고자 노력하고 있으며, 공공기관의 경우, 개선이 매년 향상 중앙행정기관은 90%, 입법사법기관은 89%, 광역지자체91%이나 기초지방자치단체와 전자정부의 경우에는 각각 83%, 80로 다소 미흡한 실정이며, 1단계인 올해는 정부기관과 종합병원이 의무 발효가 된다.
 

                                                                      (단계별 적용 범위)

11:10~11:50 웹2.0시대와 웹 접근성(IT문화원 김중태 원장)
김중태 IT문화원 원장은 장차법의 과도한 강조가 역차별이라는 일부의 반대 시선에 대해, 누구에게나 생길 수 있는 일이라며,
필요성과 당연성을 강조하였으며, 현재 논의되는 웹 접근성은 비용의 문제가 아닌 철학의 관점에서 접근하여야 한다라고 주장하였다.
아울러, 액티브엑스와 플래시의 차이는 다음과 같다.
거부권: 플래시는 거부권이 있으나 액티브엑스는 거부권이 없다.(이 문제는 도구의 문제가 아닌 철학의 문제)
사용권: 플래시는 다른 운영체제에서도 설치할 수 있지만 액티브엑스는 설치할 수 없다.

11:50~12:20 웹 접근성 표준 동향(한국정보문화진흥원 현준호 부팀장)
한국정보문화진흥원의 현부팀장은 금번 제시된 WCAG2.0의 변경배경을 유연성 및 검증가능성 제고에 있다고 W3C의 근거를 바탕으로 제기하였으며, 크게 4 영역에 관한 주요 강조사항을 아래와 같이 필역하였다.


우리나라의 웹 접근성 표준화 현황은 웹 콘텐츠 접근성, 접근성을 고려한 웹 저작도구, 또 사용자 에이전트로 크게 나뉘어서
해당 부분으로 발전되고 있으며, 웹 접근성 기반 조성을 위해 표준, 교육, 실태조사, 품질마트 등에 중점을 두고 있다.

12:20~12:40 웹 접근성 구축 성공사례(경상남도 고성군)
고성군은 웹 접근성 품질마크 인증을 높은 점수로 획득하였으며, 자세한 결과치는 다음과 같다.
해당 개선 프로젝트에서 특히, 인식의 용이성 부문에서는 영상매체인식을 위해 동영상 콘텐츠에 음성내용과 동일한 대본을 제공하였으며, 페이지의 논리적 구성을 위해, CSS제거시에도 콘텐츠의 구성순서가 논리적으로 배치되도록 선형화 하였으며,
페이지의 효율적인 이동을 위해 스킵 내비게이션 링크를 제공하여, 이해의 용이성을 확보하였고, 노스크립트 태그로 전체열기/닫기 기능을 차선책을 선택하여 제공하였음.
플렉스는 아직 접근성과 관련하여 제한적인 면이 많이 발생하며, 플래시는 논리 적용에만 신경쓰며, 자유로이 구현가능하다.
플렉스의 경우, 화면 낭독 프로그램의 지원이 미흡하나, 자바스크립트와 플래시는 부분적으로 사용할 수 있는 상황이다.

13:50~14:25 접근성 있는 RIA 제작기법(충북대학교 김석일 교수)
RIA(Rich Internet Application)란 전통적인 테스크톱 애플리케이션의 기능과 특징을 웹 애플리케이션으로 웹콘텐츠와 S/W와 중간적인 형태로 볼 수 있으며, 웹 프로토콜을 통하여 제공되는 콘텐츠 사용자 에이전트 소프트웨어임.
RIA의 웹 접근성은 보조기술이 서비스하지 못하는 사항에 많은 영향을 받고 있으며, 대체 기능 차선책 마련에 노력하여야 함.

14:25~15:00 접근성을 해치지 않는 자바스크립트 활용(오페라소프트웨어코리아 신현석 과장)
자바스크립트를 둘러싼 오해가 상당부분 존재하고 있는데, 자바스크립트를 사용하지 말라는 극단적인 이야기도 있다
적절한 자바스크립트의 활용이요구되어지며, GET이 POST 비해 보완이 약한 것이 아니며, 용도에 맞게 사용하는 것이 필요하고, URL 변수명이 나오게 하면 보안에 문제가 있다라는 것은 너무 초보적인 질문임. 최신 보안지침을 지속적으로 적용하는 것이 필요함.
접근성 개발 방법론 사상 중, 적절한 저하 (Graceful Degradation), 점진적 향상(Progressive Enhancement), 겸손한 구현(Unobtrusive Javascript)이며, 적절한 HTML이 우선시 되며 올바른 자바스크립트 활용이 뒤따라야 된다.

15:15~15:50 웹 기획자가 알아야할 웹 접근성(오픈컴 나인환 과장)

15:50~16:25 웹 디자이너가 알아야할 웹 접근성(잡코리아 장성민 대리)
소통이라는 개념으로 시작되는 웹접근성은 웹, 콘텐츠와 이용자(장애인에 대한)에게 해당 내용을 소통시키여야 한다.
디자이너는 이러한 관점에서 마크업과 웹퍼블리셔이라 불리우는 직군을 났게 되었다.
과거 5년전만해도 작은 기업의 경우, 웹디자이너군에서 비주얼디자인, 플래시, 코딩까지 모두 수행하는 경우가 많았으며,
그 후, 코더라는 직군이 조용히 생겨났고, 표준화라는 수행과정이 퍼블리셔를 등장하게 하는 기폭점이 되었고,
단순 코딩이라는 수준을 넘어 UI 범위를 책임지는 개념으로 변환되고 있으며, 접근성이라는 흐름에 들어서는 전문가 수준으로
여기지고 있다. 다만 아래에도 제기되는 사항이지만, 표준화와 접근성은 기본적으로 누구나 체득하는 기본기술이 되어져야
보다 인터넷이 보편성을 가질 수 있게 될 것이다.

16:25~17:00 웹 개발자가 알아야할 웹 접근성(티맥스소프트 추지호 전임연구원)
웹 접근성을 위한 웹 개발자 3가지 수칙 해당 섹션은 이곳이 잘 정리되어져 있으니 참고하기 바람.

관련자료는
웹 개발자가 알아야할 웹 접근성 :
웹 디자이너가 알아야할 웹 접근성
웹 기획자가 알아야할 웹 접근성
자바스크립트 활용
접근성있는 RIA 제작기법
웹 접근성 구축사례
웹 접근성 표준동향
웹2.0시대와 웹 접근성
웹 접근성 현황 및 정책방향
기조강연
타이트한 느낌이지만 모든 연사분들이 열심히 준비하여 내실성을 기했다.
특히, 스킬적인 부분에 관해서보다는 개념등 사상을 전달하고자 모든 분들이 노력하시는 모습이 역력했다.
스킬이야 온라인상의 자료로 충분하다는 판단에서 사상을 전파하고자 이해시키려는 의도였으며,
실제로, 이러한 방향은 늦었지만 매우 유효한 세미나라는 평가를 할 수 있었다.

다만, 아쉬움으로 계속 남는 것은 부단한 노력으로 최후에는 그러한 산출물이 나올 것으로 기대합니다만,

-웹 접근성 수행 전략(웹 접근성 방법론 정립)
 
-웹 접근성 기반 기술화 방안
  웹표준화와 마찬가지로 웹 접근성도 웹개발자(웹디자이너 포함)이라면 기본 소양 기술이 되어져 기반기술화가 되어져야
  한다. HTML이나 CSS처럼 기본 기술이 되어져 별도로 작업을 하지 않아도 되는 토양이 되어져야 이중 낭비가 되어지지 않게
  되어진다.
  * 민간개발자 웹 접근성 전문교육 과정
    1.대상 : 웹기획자, 웹디자이너, 웹프로그래머 등
    2.기간 : 2009년 4월 27일 - 7월 31일 등 총12차 운영
    3.시간 : 3일21시간 / 10:00-18:00 (7시간)
    4.장소 : 서울/광주/대전/부산
    5.신청방법 : 온라인 http://www.kpit.or.kr
    6.문의 : 한국생산성본부 02-724-1224

-보다 원활한 신기술 적용 및 세부 기술 습득을 위한 집단지성시스템(예, 위키피디아) 마련

-기타 (대응책 수립 절실)
 웹 접근성 평가툴의 난립
 다수 품질마크 인증기관 등장

01 . 국내외 베스트 디자인 사례 및 인사이트 / 다음커뮤니케이션 민헤영 팀장 02 . 크리에이티브 디렉터로 성장하기 위한 7가지 습관 / 연세대학교 인지공학연구소 송숙영 03 . 실전 사례 중심으로 살펴 본 크리에이티브 컨셉 도출 / 펜타브리드 황진원 실장 04 . 실전 사례 중심으로 살펴 본 전략적, 설득적 웹디자인 전략 / 인터메이저 문지환 실장 05 . 실전 사례 중심으로 살펴 본 웹 그리드 및 타이포 전략 / 바이널 금윤정 실장 06 . 실전 사례 중심으로 살펴 본 웹 컬러 색상 및 배합 전략 / 아이파트너즈 이상신 실장 07 . 실전 사례 중심으로 살펴 본 UX 전략 / 메가존 조영국 센터장 08 . 실전 사례 중심으로 살펴 본 감각적 CSS 활용 전략 / 나우온플레이 정유한 이사 09 . 실전 사례 중심으로 살펴 본 인터랙션 디자인 전략 / 前 ACG 손성일 이사 10 . 실전 사례 중심으로 살펴 본 웹에서의 영상 활용 전략 인터렉션한 웹사이트를 위한 영상의 가치       / 디지털오아시스 조민 실장

일정		내용	강사
1	3월 31일(화) 10:00~13:00	국내외 베스트 디자인 사례 및 인사이트 사용자의 마음을 사로잡는 베스트 디자인 베스트 오브 베스트? 사용자 중심의 인터렉션 디자인 사례 어플리케이션에서 배우는 디자인 팁 고객을 감동시키는 크리에이티브 마케팅 사례 New Trend 디자인 디자인 트랜드를 읽는 방법 새로운 방식의 정보의 시각화 사례 미래를 예측하는 디지털 컨버전스 사례 새로운 기술과 인터페이스 디자인의 접목 주목받는 디자이너가 되는 길 수많은 웹디자이너의 분류와 성장 활발한 커뮤니케이션 나만의 노하우와 강점 살리기	민혜영 팀장 다음 커뮤니케이션
2	3월31일(화) 14:00~17:00	크리에이티브 디렉터로 성장하기 위한 7가지 습관 CONTEXT : 맥락을 이해하기 CATCH CORE : 핵심을 잡아내기 SIMULATION : 시뮬레이션하기 SKETCH : 스케치하기 BALANCE : 균형잡기 SELF-TRAINING : 스스로 훈련하기 SELF-CONFIDENCE : 자기자신을 믿기	송숙영 연세대학교 인지공학연구소
3	4월 2일(목) 10:00~13:00	실전 사례 중심으로 살펴 본 '크리에이티브 컨셉 도출' 전략 프롤로그 눈으로만 사는 디자이너 Creative의 바늘! 허리에 메어 쓸 수 없다 누구에게 줄 것인가? 무엇을 만들 것인가? 무엇을 담을 것인가? 어떻게 만들 것인가? 맛있는 요리 ??? 주세요! 김치찌개요? 된장찌개요? Creative의 냉장고를 채워라. 디자이너여~ Creative의 스무고개를 넘어라! 나는 오케스트라의 지휘자다. Creative의 큰 북을 울려라 Creative의 “운명 교향곡”을 연주하라 사례를 통한 Creative 전략 들여다 보기 아모레 퍼시픽 라네즈 브랜드 웹사이트 크리에이티브 전략 OOOOO 웹 사이트 크리에이티브 전략 에필로그 : 디자이너 들이여~ 미쳐야 산다.	황진원 실장 펜타브리드
4	4월 2일(목) 14:00~17:00	실전 사례 중심으로 살펴 본 '전략적, 설득적 웹디자인' 전략 시작하며 우리가 하는 일 정의하기 eBrand Design Branded Interface 그들은 무엇을 원하는가? 보랏빛 소가 온다 미학 오디세이 싫증 그들을 설득하기 위한 평소의 습관 감성으로 소통하기 언어와 이미지 선택 사례를 통해보는 디자인 전략 OO게임 제안사례를 통해 보는 전략적 UI 접근 KTF.com 리뉴얼 제안에서 제작까지 마치며	문지환 실장 인터메이저
5	4월 7일(화) 10:00~13:00	실전 사례 중심으로 살펴 본 '웹 그리드 및 타이포' 전략 Website Grid&Layout 웹사이트 그리드 시스템 그리드 시스템의 적용 사례 분석 그리드 시스템을 통한 레이아웃 과정 살펴보기 Website Typopgraphy 웹사이트 타이포 그래피 타이포 그래피 적용 사례 분석 웹사이트 타이포 그래피 제작 과정 살펴보기 Rule 최적 그리드를 위한 법칙 좋은 웹 타이포 그래피를 위한 조건	금윤정 실장 바이널
6	4월 7일(화) 14:00~17:00	실전 사례 중심으로 살펴 본 '웹 컬러 색상 및 배합' 전략 색의 이해 색을 지각하는 기본원리 색의 분류 및 속성 색의 의미 색 활용을 위한 20색 상환 각각의 색이 가지고 있는 개성 색의 응용 다양한 배색의 기본 원칙 예시를 통해 알아보는 배색의 느낌 이런 사이트에는 이런 색 색의 진화 4.1 색 선택의 폭을 넓혀주는 사이트 2009 색 트랜드	이상신 실장 아이파트너즈
7	4월 9일(목) 10:00~13:00	실전 사례 중심으로 살펴 본 'UX' 전략 RIA/UX? RIA란 무엇인가? UX란 무엇인가? 현 시장의 RIA/UX 기술들 사례를 통한 UX 전략 국내, 해외 사례 분석(Website) Application Design 사례 분석(OS, 설치형 Application) UX 디자이너로 성공하기 UX 디자이너는 그림만을 그리지 않는다 화려함을 추구하는 디자인? 정리된 디자인? UX 디자이너로서 살기	조영국 센터장 메가존
8	4월 9일(목) 14:00~17:00	실전 사례 중심으로 살펴 본 '감각적 CSS 활용' 전략 의미있는 디자인 “웹”에서의 디자인 CSS를 사용함으로써 의미가 생기는 디자인 정보단위 기반 사고 웹 환경에 적합한 디자인 변화하는 웹 환경 사용자 환경을 고려한 디자인 웹 환경을 고려한 사이트 구성 기법 CSS기반 사고 작업을 도와주는 도구들 정보단위 기반 디자인 선택자 우선순위 CSS 계층적 사고 자유로운 CSS 활용 가변 이미지 영역 (inline background-image) 효율적인 이미지 활용 (CSS Sprite) 레이아웃이 바뀌는 디자인 (extreme floats)	정유한 이사 나우온플레이
9	4월 13일(월) 10:00~13:00	실전 사례 중심으로 살펴 본 '인터랙션 디자인' 전략 컨셉을 만들어가는 디자이너의 힘 디자이너에게 컨셉이란?     - 컨셉의 정의 실무를 통해 보는 컨셉을 만들어가는 다양한 방법들    - 시각적 모티브    - 전략적 모티브    - 철학적 모티브    - Insight 성공적인 프로젝트를 중심으로 보는 인터랙티브 디자인 인터랙티브 디자인 이야기 성공적인 프로젝트로 살펴보는 인터랙티브 디자인     - 기업 PR의 새로운 장을 연 삼성에버랜드     - 잠수함으로 이어지는 이노션 시리즈     - 공간의 영역을 확장해가는 기아 ceed     - 참 다른 카드회사, 참 다른 금융 웹사이트, 현대카드     - 인터랙티브의 근 미래를 보여주는 SK Telecom T-um 평범한 디자이너에서 크리에이티브 디렉터로 성장하기 디자이너의 길을 선택하다 계단 오르기 갖춰야 할 무기들 지금부터 10년 후는? 도움이 되는 것과 되지 않는 것들 디자이너 진화론 파랑새는 없다 마지막으로 너무나 중요한 이야기들	손성일 이사 前 ACG
10	4월 13일(월) 14:00~17:00	실전 사례 중심으로 살펴 본 '웹에서의 영상 활용' 전략 : 인터렉션한 웹사이트를 위한 영상의 가치 프롤로그 웹영상이란 인터렉션한 영상비주얼의 활용 웹영상 활용 사례 웹영상 제작의 이해 영상의 이해 Chroma-key 촬영 영상제작 프로세스 웹영상 포맷의 종류와 특장점 실버라이트 Case Study 영상이 활용된 실제 웹사이트 제작 과정 사례 웹실무 제작에 있어 벤치마킹과 컨셉 도출 TIP Q&A	조민 실장 디지털오아시스

CSS작성과 유효성 검사

이번 호는 의미를 살려 마크업한 [http://ko.www.mozilla.com/ko/firefox/about] 의 HTML 엘리먼트에 CSS(Cascading Style Sheet)을 적용하여 파이어폭스, IE6, IE7에도 동일하게 디스플레이 되도록 적용시키고 CSS Validator를 테스트 하는 방법에 대해서 배워보기로 하자. CSS 적용의 기준은 W3C의 권고안을 많이 반영하여 만든 파이어폭스 브라우저를 기준으로 작업하고 IE6, IE7, 오페라, 사파리 등과 같은 브라우저에서 다르게 디스플레이되는 부분은 별도의 CSS 핵(Hack)을 작성하여 주는 방식으로 진행한다.

글. 차영신.
웹표준 제작자.
Tag & Brace 대표.
아카데미정글 웹표준 강의.
www.tagnbrace.com/blog

• 드림위버 CS3에서 웹 표준 문서를 제작하기 [1] - 웹표준과 웹접근성의 이해와 테스트 방법
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [2] - 의미를 살린 마크업과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [3] - CSS의 작성과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [4] - 블록레벨 엘리먼트와 인라인레벨 엘리먼트
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [5] - DIV 엘리먼트와 레이아웃 만들기
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [6] - UL, OL, DL 엘리먼트 사용하기

기존의 테이블로 레이아웃을 만들던 방식에서는 link스타일, body 엘리먼트 정도를 CSS로 제어하였지만, 웹 표준 방식에서는 웹 문서의 모든 디자인적 용도(엘리먼트의 배열, 텍스트 색상, 크기 등, 디자인을 위한 배경이미지 위치, 네비게이션 구현 등)를 위한 작업은 CSS를 이용하여 작업하게 된다. 앞의 호에서 의미를 살린 마크업으로 [http://ko.www.mozilla.com/ko/firefox/about/] 와 같이 HTML을 작성한 것을 CSS를 이용하여 디자인을 입혀보기로 하자. 작성하지 않은 분은 파이어폭스 브라우저에서 [보기>소스]하여 나온 소스를 [전체선택]하여 드림위버에서 Script와 CSS를 제거하고 사용해도 된다.

CSS1은 1996년에 소개되었는데, 현재 사용하고 있는 CSS의 기본구조, Selector(선택자), Property(프로퍼티)등 대부분을 갖추고 있었으며, 1997년에 만들어진 CSS2은 CSS1을 대부분 사용하면서 Media Types을 추가하여 브라우저, 음성장치, 프린터, 점자장치, 핸드장치(handheld device) 등 각기 다른 장치들에 맞도록 CSS를 적용할 수 있도록 하였으며, 컨텐츠의 위치지정, 다운로드할 수 있는 글꼴, 테이블 레이아웃, 국제화 지원 기능, 자동 카운터와 번호 붙이기, 사용자 인터페이스와 관계된 일부 Property(속성)을 지원하게 된다. 현재 표준으로 인정된 CSS2.1은 2와는 많은 차이는 없다. 현재 CSS3이 만들어지고 있는 중이며, 여러 개의 Background 이미지를 사용하고 위치도 조절할 수 있으며, background-size, border-style, border-image, border-radius, box-shadow Property(속성)등이 추가된다고 한다. 현재 웹표준 사이트를 제작한다면 많은 브라우저들이 지원하는 CSS2.1을 기준으로 작업하고 유효성 검사를 하게 된다. [ http://www.w3.org/TR/CSS21/ ]에서 CSS2.1에 관한 정보를 제공하고 있다.

[그림1. http://www.w3.org/TR/CSS21/ 화면]

현재 논의되고 있는 CSS3에 관한 정보는 아래의 주소에 링크되어 있는 정보를 잘 살펴보기 바란다.

[그림2. http://www.w3.org/Style/CSS/current-work 화면]

02. CSS를 웹문서에 적용하는 방법

CSS를 웹문서에 적용하는 방법에 따른 분류이다.

1.External Style Sheet (외부 스타일시트)

외부 스타일시트를 적용하는 방식에는 두 가지가 있다. 위의 방식은 일반적으로 많이 사용하는 방식으로 브라우저의 버전에 관계없이 CSS를 적용시킬 수 있다. XHTML로 웹문서를 작성하는 경우 단독 엘리먼트이지만 끝에 / 를 넣어 닫아준다.

<head>
<link rel="stylesheet" type="text/css" href="style.css" /> </head>

@import 방식은 CSS 파일이 다른 CSS 파일을 불러올 수 있도록 한다. 복잡한 구조의 사이트인 경우 웹문서에 적용되는 최종 style.css가 각각인 base.css, layout.css를 불러와 포함할 수 있다. 이렇게 다른 CSS를 포함하는 style.css는 위의 link 방식으로 웹문서에 적용할 수도 있고, 아래와 같이 @import 방식으로 적용될 수도 있다.

style.css가 CSS를 포함하는 방법

@import url(base.css);
@import url(layout.css);

@import로 웹문서에 적용되는 경우 낮은 브라우저에서는 인식하지 못하는 경우가 있기 때문에 최신 버전의 브라우저에 적용시킬 CSS를 별도로 불러오는 경우 사용하기도 한다.

<head>
<style type="text/css">
@import url(style.css);
</style>
</head>

‘정보통신 접근성 향상 표준화 포럼’ 사이트인 [http://iabf.or.kr/]가 케이스이다.

[그림3. http://iabf.or.kr/ 화면]

2. Internal Style Sheet (내부 스타일시트)

웹 문서 내부에 CSS를 작성하여 사용한다.

<head>
<style type="text/css">
h1 { margin: 0; }
</style>
</head>

3. Inline Styles (필요할 때마다 엘리먼트에 적용하는 스타일)

<p style="color: gray; margin-top: 10px"> 이것은 웹표준 방식에서는 권장하지 않는다. 수정, 관리가 어렵고, 컨텐츠와 디자인의 분리를 위해서도 좋은 방법이 아니다. </p>

03. Selector(선택자)

CSS를 작성하는 방법은 먼저 Selector(선택자)를 작성하고 {(시작 중괄호)로 시작하여, }(닫기 중괄호)로 선언 구간을 만든다. 선언 구간 안에 Property(프로퍼티) 선언, :(콜론), Value(값), ;(세미콜론) 순으로 작성한다. :(콜론)은 Property(프로퍼티)와 Value(값)을 구분하기 위한 것이고 ;(세미콜론)은 마침표의 역할을 한다. ;(세미콜론) 뒤에 다시 Property(프로퍼티)를 추가하고 동일한 방식으로 계속 작성해 나간다.

h1 { font-size: 12px;}

많은 선택자가 있지만 기본적으로 많이 사용하는 선택자를 중심으로 알아보자. 파이어폭스에 [Web Developer]를 플러그인 하고 [http://ko.www.mozilla.com/ko/firefox/about/]사이트의 CSS에서 사용된 선택자를 확인해 보자.

[그림4. 파이어폭스에서 [Web Developer>View CSS]를 선택하는 화면]

1.Type selectors (태그 선택자)

아래에서 body, form, img 가 태그 선택자이다. 주로 기본적으로 엘리먼트에 적용할 CSS를 작성할 때 사용하는 방식이다. 다음, 네이버 같은 사이트의 CSS를 보면 처음부분에 엘리먼트에 대한 Property를 쭉 정의해 놓았다. 웹 문서 마크업에서 사용하는 엘리먼트는 많지 않고 디스플레이 되어야 하는 상태가 예측되기 때문에 기본적인 CSS 적용이 가능하며, 이렇게 해 두는 것이 효율적이다.

[그림5. 태그 선택자 화면]

2.Class selectors (클래스 선택자)

클래스 선택자는 앞에 .을 붙이고 영문으로 시작하도록 작성하면 된다. 아래에서 .product-firefox 와 .product-thunderbird 이 클래스 선택자이다. 원하는 엘리먼트를 정밀하게 제어할 수 있으며, .product-firefox 은 마크업 된 서로 다른 엘리먼트에 여러 번 적용해서 사용할 수도 있다. 아래와 같이 엘리먼트에 class="" 를 쓰고 적용한다. 이때 .은 빼주어야 한다.

[그림6. 클래스 선택자 화면]

<body> <div class="product-firefox">클래스선택자를 엘리먼트에 적용하는 방법 </div> </body>

3.ID selectors (아이디 선택자)

아이디 선택자는 앞에 #을 붙이고 영문으로 시작하는 네임을 준다. 아이디 선택자는 같은 페이지 내에 한 번만 적용하는 것이 원칙이다. 같은 ID를 한 번 이상 사용하여도 작동은 하지만 HTML Validator를 통과하지 못한다. 주로 레이아웃 구조를 위해 사용되거나 웹브라우저에서 아이디 선택자가 클래스 선택자 보다 우선권이 주어지는 것을 이용하여, 스타일의 충돌을 피하기 위해서도 사용한다.

[그림7. 아이디 선택자 화면]

4.Descendant selectors (하위 선택자)

#header 아이디 밑의 자식으로 있는 h1 엘리먼트의 스타일을 적용하고 싶다면 그림과 같이 작성한다. 부모와 부모에 포함된 자식의 관계는 스페이스로 구분한다.

[그림8. 하위 선택자 화면]

#header의 자식인 h1 엘리먼트의 자식인 img 엘리먼트를 선택하여 CSS를 적용하였다.

[그림9. 하위 선택자 화면]

하위 선택자를 이해하기 위해서는 HTML의 가계도를 이해하는 것이 필요하다.

5. Grouping (그룹 선택자)

동일한 값을 사용하는 엘리먼트나 ID, Class 선택자를 그룹으로 묶어서 다음과 같이 적용할 수 있다. 선택자의 구분은 ,(콤마)로 한다.

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

위의 CSS를 그룹핑하면 다음과 같다.

h1, h2, h3 { font-family: sans-serif }

[그림10. 엘리먼트만을 그룹핑한 화면]

[그림11. 각각의 ID선택자 밑의 자식엘리먼트의 값을 지정하기위해 그룹핑한 화면]

6. Universal selector (전체 선택자)

*(애스터리스크)는 웹 문서에 있는 모든 엘리먼트를 선택하기 위해 간략히 표현하고 싶을 때 사용할 수 있다. 아래와 같이 작성하면 혅재 웹 문서에 있는 모든 엘리먼트의 글자크기를 12픽셀로 지정할 수 있다.

* {font-size:12px;}

전체 선택자는 하위 선택자의 역할로도 사용된다. 다음과 같이 작성하면 #content 밑의 모든 엘리먼트의 배경색상은 흰색으로 설정된다.

#content * {background: #fff;}

7. 그 밖의 선택자들

• Child selectors (자식 선택자)
• Adjacent sibling selectors (인접한 형제 선택자)
• Attribute selectors (애트리뷰트 선택자)
• Pseudo-classes (가상 클래스)
  • :first-child
  • The link pseudo-classes: :link and :visited
  • The dynamic pseudo-classes: :hover, :active, and :focus
  • The language pseudo-class: :lang
• Pseudo-elements (가상 엘리먼트)
  • The :first-line pseudo-element
  • The :first-letter pseudo-element
  • The :before and :after pseudo-elements

04. CSS 작성하기

CSS는 마크업된 엘리먼트를 원하는 형태로 브라우저에서 보여지도록 하는 용도로 사용하기 때문에 먼저 작성된 엘리먼트의 구조를 파악하는 것이 중요하다. 그림은 드림위버의 디자인뷰에서 보여지는 화면위에 구조를 위해 사용된 DIV 엘리먼트의 ID, Class 명을 표기한 것인데, 여기서는 Class 선택자만 사용되어 있다.

[그림12. http://ko.www.mozilla.com/ko/firefox/about/의 구조]

1. 원하는 대로 구조가 잡히는지 확인하면서 작업하는 것이 중요하다. 구조는 블록레벨 엘리먼트를 그룹핑하는 div 엘리먼트를 사용하게 되기 때문에, 필자의 경우 처음 구조를 확인하면서 마크업을 하는 경우 다음과 같이 작성하여 div 엘리먼트의 테두리를 1픽셀 빨강색으로 설정하여 확인한다. 작업이 어느 정도 마무리 되면 삭제하고 부분적으로 엘리먼트에 배경색상을 넣어 넓이와 높이를 확인하면서 작업하는 것이 편리하다.

[그림13. div에 테두리 적용한 파이어폭스 브라우저 화면]

2. 웹문서에 사용된 기본적인 엘리먼트에 대한 스타일 정의가 먼저 되어야한다. 현재의 웹문서에는 사용되지 않은 엘리먼트이지만 CSS는 공통으로 사용되는 경우가 많기 때문에 엘리먼트의 그룹핑 선택자가 작성되고 동일한 값을 주는 경우가 일반적이다. 소스에 작성된 규칙은 ‘Nice to Opera’ 규칙이라고도 하는데, IE5만 닫힌 중괄호를 인식하여 스타일 선언이 끝난 것으로 생각하게 한다. 나머지 모든 웹브라우저는 앞서 지정된 x-small 값을 small로 덮어써 다시 적용하게 된다. 그 결과 글씨 크기가 모두 일관된 배율이 유지되게 할 수 있다.

voice-family: inherit;
font-size: small; /*일반 웹브라우저에 적용된다*/ }

body, td, th, input { /* redundant rules for bad browsers */
font-family: verdana, sans-serif;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small; }

[그림14. body 엘리먼트에 글자크기를 적용한 파이어폭스 브라우저 화면]

3. :link와 :visited와 :hover :visited: 는 가상클래스 선택자이며, 작성 순서를 지켜야 원하는 결과를 얻을 수 있다.

/* Navigation */
:link { color: #039; }
:visited { color: #636; }
:link:hover, :visited:hover { color: #333; }

[그림15. link 스타일을적용한 파이어폭스 브라우저 화면]

05. CSS Validator

[http://jigsaw.w3.org/css-validator/ ]에서 CSS 유효성 검사를 할 수 있다. 서버상에 CSS가 없기 때문에 [By direct Input ] 안에 직접 작성한 CSS를 입력하여 테스트 해 볼 수 있다.

[그림16. http://jigsaw.w3.org/css-validator/#validate_by_input 화면]

[그림17. http://jigsaw.w3.org/css-validator/validator 화면]

웹표준과 웹접근성의 이해와 테스트 방법

이번 호는 웹표준과 웹접근성에 대한 이해와 테스트 방법에 대해서 설명하려고 한다. 테크닉 북의 다른 강좌들은 그 프로그램의 기능을 충분히 알아야만 작업이 이루어지지만, 드림위버의 경우 웹 문서를 쉽게 구현하기 위해 만든 에디터이기 때문에, 앞서 드림위버 강좌에서 배운 정도의 기능만으로도 충분히 드림위버를 이용하여 웹 문서를 제작할 수 있다. 얼마나 월드 와이드 웹(World Wide Web : WWW)을 이해하고 있는 가에 따라 여러분은 의미를 살린 HTML Markup과 CSS로 디자인을 제대로 분리한 웹접근성이 좋은 웹문서를 만들 수 있게 된다.

글. 차영신.
웹표준 제작자.
Tag & Brace 대표.
아카데미정글 웹표준 강의.
www.tagnbrace.com/blog

• 드림위버 CS3에서 웹 표준 문서를 제작하기 [1] - 웹표준과 웹접근성의 이해와 테스트 방법
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [2] - 의미를 살린 마크업과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [3] - CSS의 작성과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [4] - 블록레벨 엘리먼트와 인라인레벨 엘리먼트
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [5] - DIV 엘리먼트와 레이아웃 만들기
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [6] - UL, OL, DL 엘리먼트 사용하기

웹표준을 지켜서 웹접근성이 좋은 웹페이지를 만들기 위해서는 웹이 생겨나게 된 배경과 웹의 정신을 이해하고 지키려고 노력하면 많은 부분은 기본적으로 해결된다. 현재 웹 제작자 중 많은 사람들이 웹의 정신을 생각하지 않고, 비주얼적인 구현에만 치중하여 제작을 하고 있기 때문에 웹 표준과 웹 접근성이 생소하고 어렵게 느껴지는 것이라고 생각된다. 나 자신도 처음 웹 표준과 웹 접근성이라는 단어를 접했을 때 생소하고 어려운 느낌을 가졌고, 이것을 이해하기 위해서 많은 정보들을 접하면서 결국은 월드 와이드 웹(World Wide Web : WWW) 의 창시자인 팀 버너스 리(Tim Berners-Lee)의 생각에서 그 의미를 이해할 수 있었다. 물론 한국어로 잘 번역되어 있는 많은 정보들이 있지만 우리에게 제공되는 많은 웹 제작에 관한 정보들이 어디서 만들어지고 제공되고 있는지 알고 지속적으로 공부해 나간다면 다른 나라에 비해 유독 웹 표준과 멀어진 우리나라의 웹 환경이 빠른 시일 내에 다시 제자리로 돌아갈 수 있으리라 생각한다.

01. 웹의 역사

간략하게는 다들 알고 계실테지만, 웹의 역사를 좀 더 자세히 알아보기 위해 [ http://www.w3.org/Consortium/]를 방문해 보자. 사진의 분이 월드 와이드 웹(World Wide Web : WWW)을 만드신 팀 버너스 리(Tim Berners-Lee)이다. 오른쪽 메뉴에 보면 [History]도 있고, 사진 바로 위에서 언어선택을 할 수 있는데, 한국어도 있다.

그www.w3.org/Consortium/ 화면

그 화면에서 한국어를 클릭하면 반가운 한국어로 되어 있는 웹 페이지에서 간략하게 번역된 역사를 읽을 수 있다.

[www.w3.org/Consortium/에서 한국어 링크 화면]

02. 웹의 목표

그럼, 웹의 목표는 무엇일까요? 오른쪽 메뉴에서 [Goals]를 클릭하면 Web for Everyone, Web on Everything, Knowledge Base, Trust and Confidence 4개의 제목 아래 설명들이 되어 있다. 제목만 보더라도 요즘 이야기되고 있는 모든 이슈들이 담겨져 있는 것을 알 수 있다. 100%　완벽한 독해는 어려워도 원문을 접하는데 큰 의의를 가지며, 번역기를 사용하고 사전을 찾으면서 꼭 읽어 보기를 권한다. 인터넷에서 웹에 대한 내용들은 모두 이 곳에 있는 내용들을 토대로 작성된 것들이기 때문에 직접 원천적인 정보들을 접하고 정리하는 습관은 어떤 분야에 대한 전문성을 확보하고 발전을 위해 매우 중요하다고 생각된다.

[www.w3.org/Consortium/에서 Goals 링크 화면]

“웹은 세상의 모든 사람들이 다양한 환경에서 장애없이 쉽게 정보를 공유하고 이용할 수 있도록 하는 것” 이 창시자 팀 버너스 리의 정신이며, 곧 웹의 정신이기도 하며, 요즘 우리들이 이야기하고 있는 웹접근성, 웹2.0 서비스, 크로스 브라우징 등의 근원이다.

03. World Wide Web Consortium (W3C)

W3C는 웹을 위한 표준을 개발하고 장려하는 조직으로 회원기구, 정직원, 공공기관이 협력하여 웹 표준을 개발하는 국제 컨소시엄으로 [ http://www.w3.org/ ]에서 정보들을 찾을 수 있다. 다양한 표준에 관한 정보를 제공하며, 우리가 알아야할 HTML, XHTML, HTML5, HTML Validator, CSS, CSS2, CSS3, CSS Validator, DOM에 관한 규격과 정보들이 있는 곳이다. 처음 보면 CSS 로 디자인을 화려하게 입히지 않아서 굉장히 복잡스럽고 딱딱하게만 느껴지지만 방대한 정보를 웹표준을 지켜 잘 만들어져 있다는 것을 곧 알 수 있을 것이다.

[www.w3.org/ 화면]

[그림5. www.w3.org/ 왼쪽 메뉴에서 원하는 정보를 선택한다. ]

04. 웹표준

2007년 이맘 때 보다는 제법 많이 우리에게 익숙해진 단어인 웹 표준은 어떤 의미를 가지고 있을까요? W3C에서 XHTML(eXtensible HyperText Markup Language)과 CSS(Cascading Style Sheet)를 웹의 표준으로 삼고 있고 이것을 사용하기를 권고하고 있다. XHTML로 컨텐츠 내용을 작성하고 CSS 로 디자인을 적용하게 되면 웹표준을 지킨 것이 되지만, 제대로인 웹표준이 되려면 XHTML 작성시 의미를 살린 마크업( Semantic Markup)이 지켜져야 하고 웹접근성을 위한 크로스브라우징을 구현하기 위해서는 인터넷 익스플로러( Internet Explorer)의 각 버전별, 파이어 폭스( Fire Fox), 오페라(Opera), 맥용 브라우저인 사파리(Safari) 등에서 동일하게 디자인이 구현되도록 CSS를 작성해야 하는 정성이 필요하다.

XML(eXtensible Markup Language)이라는 확장성이 뛰어난 언어를 만들었지만 기존에 HTML로 작성된 수많은 웹 페이지를 대체하는 것이 어렵고 작성하기 쉬운 HTML을 계속 사용하기 위해, HTML4.0에 확장성이 뛰어난 XML1.0의 속성을 결합한 XHTML1.0을 만들어, 기존에 만들어진 수 많은 웹페이지를 XML의 몇 가지의 속성에 맞도록 변환하면 향후 다양한 환경의 디바이스에서도 정보를 제대로 전달할 수 있도록 한 것이다. 물론 처음 제작하는 웹 페이지는 XHTML로 바로 만들면 된다.

* XML의 속성을 따라가는 XHTML에서 꼭 지켜야할 문법은 아래와 같다.

- 모든 태그와 속성은 반드시 소문자로 작성해야 한다.
- Attribute Value(속성값)은 큰 따옴표 안에 써야만 한다.<br/> - 모든 태그를 올바로 닫아줘야 한다. End Tag가 없는 태그도 다음과 같이 닫아준다.
<img src="sample.jpg" />, <hr/>, <br/>,

05. 의미를 살린 마크업과 디자인의 분리

그럼, 의미를 살린 마크업이(Semantic Markup) 무엇인지를 살펴 볼 차례이다. 본래 HTML을 만들 때 표현하고 싶은 것에 맞게 엘리먼트(Element)를 쓰라고 권고한 것에 맞추어 작성하면 된다. 지금 우리가 만든 웹 페이지 대부분은 이것은 무시하고 무조건 이미지로 처리하거나 플래시로 작업하여 브라우저가 엘리먼트를 읽어서 컨텐츠의 중요도와 의미를 인식하지 못하도록 해 놓았다. 다음의 그림은 [ www.w3.org ] 의 첫 페이지의 HTML 소스이다. <body> 태그 바로 밑에 <h1> ~ </h1>태그가 마크업 되어 있다. W3C에서는 “Using h1-h6 to identify headings”(제목을 구분해 주고 싶을 때는 h1-h6을 사용하라)이라고 권고한다. 그러나 우리의 대부분의 웹 페이지에서 이러한 의미를 살려 마크업을 하지 않았기 때문에 h1 엘리먼트(Element)를 찾아보기는 매우 어렵다. cite 엘리먼트(Element)는 “Contains a citation or a reference to other sources” (다른 소스를 참조하거나 인용이 있는 경우 사용)를 표현하는 경우 사용하라고 권고한다.

[http://www.w3.org 의 첫 페이지의 소스 화면]

이러한 설명을 직접 접하고 싶다면 [ www.w3.org ] 왼쪽메뉴에서 [HTML]을 클릭하여 HTML 내용 페이지로 이동하여 찾으면 된다.

[http://www.w3.org/html/ 화면]

오른쪽에 [Work]라는 메뉴 밑에서 HTML4.01을 클릭하면 HTML4.01의 설명페이지가 나온다. 우리가 알고 있는 HTML에 관하여 가장 정확하고 방대한 정보를 제공하는 웹 페이지이다.

[http://www.w3.org/TR/html401/ 스크롤하여 본 아래쪽 화면]

그 중에서 [ 9. Text - Paragraphs, Lines, and Phrases ]를 클릭하면 Text에 관련된 엘리먼트(Element)에 관한 내용이 나온다.

[http://www.w3.org/TR/html401/struct/text.html 화면]

CITE: Contains a citation or a reference to other sources. 에 대한 설명을 볼 수 있다.

[http://www.w3.org/TR/html401/struct/text.html 화면]

이런 식으로 W3C에서 만든 엘리먼트의 용도에 맞게 마크업을 하고 몇 가자의 유의사항을 지키면 의미를 살린 마크업( Semantic Markup)이 된다. 자주 사용하게 되는 엘리먼트는 많지 않기 때문에 한 번만 엘리먼트를 정리해 두면 의미를 살린 마크업의 두려움에서 벗어날 수 있다.

* 의미를 살린 마크업을 할 때 몇 가지 유의사항

-h1 엘리먼트는 한 페이지 내에서 제일 중요한 제목에 한 번만 사용한다.
-h1 다음으로 중요한 제목의 표시는 h2 엘리먼트로 작성하고, h2 엘리먼트 없이 h3이나 h4로 건너 뛰게 되면 검색엔진이 웹페이지를 검색할 때 이 페이지는 더 이상 중요한 내용이 없으니 검색하지 않아도 된다고 생각하게 되어, 결국 검색에 덜 노출되게 된다. -인라인레벨 엘리먼트( Inline-level elements )는 블록레벨 엘리먼트( Block-level elements ) 안에 작성되어야 한다. p 태그는 블록레벨 엘리먼트이고 em 태그는 인라인레벨 엘리먼트이다. 예) <P>Some <EM>emphasized</em> text</P>

의미를 살린 마크업( Semantic Markup)이 정확하게 작성되었다면, 이제 디자인을 위해 여러분은 CSS(Cascading Style Sheet)를 작성하여 컨텐츠와 디자인을 분리하게 된다.

06. DOCTYPE

웹표준에서는 DOCTYPE이 중요하다. 브라우저는 HTML 상단에 작성된 DOCTYPE에 따라서 HTML을 해석하여 디스플레이하는 방식이 달라진다. 다음은 [ www.w3.org ] 의 DOCTYPE이다. 현재의 웹 문서는 XHTML 1.0의 권고를 엄격하게 지켜서 작성하였다고 나타내고 있고 브라우저도 그것에 맞게 해석한다. 여기서 엄격(Strict)하게 지킨다는 의미는 앞에서 살펴본 의미를 살린 마크업, XHTML 1.0의 작성법, 앞으로 없어질 엘리먼트를 사용하지 않는 것을 정확하게 지켜서 마크업을 했다는 것을 의미한다.

다양한 DOCTYPE의 종류와 사용하는 경우를 알고 싶다면 [ http://www.w3.org/QA/2002/04/valid-dtd-list.html ]에서 확인해보기 바란다.

[http://www.w3.org/QA/2002/04/valid-dtd-list.html 화면]

07. HTML Validator

W3C에서는 DOCTYPE에 맞게 제대로 마크업이 되었는지 직접 확인할 수 있는 기능을 제공하고 있다. [ www.w3.org ] 왼쪽 메뉴 중간쯤 [ HTML Validator ]를 클릭하면, [http://validator.w3.org/ ] 사이트가 연결되어 있다. 많이 들어 본 HTML 유효성 검사를 할 수 있는 사이트이다. 기본적으로 입력한 URL의 유효성 검사를 할 수 있게 되어 있다. 검사를 해 보고 싶은 URL을 입력하고 [Check] 버튼을 클릭 한다. 나는 [http://www.w3.org]를 입력하였다.

[http://www.w3.org/ 왼쪽메뉴 화면]

[http://validator.w3.org/ 화면]

결과 페이지에서 유효성 검사 결과를 상세하게 볼 수 있다. 지금 화면은 마크업의 유효성 검사가 통과되었을 경우 [Jump To: Congratulations · Icons] 문구가 나타난다. 통과되지 못한 경우 하단에 에러에 대한 정보들이 나타나고 HTML에서 에러부분을 수정하면서 통과될 때까지 계속 체크해야 한다.

[http://validator.w3.org/ Check결과 화면]

[Jump To: Congratulations · Icons]을 클릭하면 Congratulations 페이지에서 HTML 유효성 테스트를 통과한 웹 페이지에 붙일 수 있는 "valid" Icon(s)을 붙이는 방법을 설명하고 있다. CSS의 유효성 검사는 별도로 해야 한다.

[Jump To: Congratulations·Icons 연결 화면]

08. 웹접근성

웹표준을 지켜 마크업을 하면 기본적으로 웹접근성도 좋아진다. 세부적으로는 다양한 환경(컴퓨터 운영체제, 디바이스, 브라우저)에서 모두 동일하게 컨텐츠의 제공이 이루어지게 하려면 추가적인 작업들이 약간은 필요하다. 다양한 디바이스에서 동일하게 컨텐츠를 제공하기 위한 구조적인 설계가 필요할 것이고, 시각 장애인들이 사용하는 음성브라우저 환경까지 고려한다면 실제 음성브라우저에서 테스트를 통해 이론적인 마크업이 아닌 실제 접근하기 좋은 마크업을 만들어야 할 것이다. 다음 그림은 http://validator.w3.org/을 브라우저 크기를 조절할 때 변화되는 모습을 관찰한 화면이다. 아무런 감동이 없다면 웹 접근성의 의미를 조금 더 생각해 보기 바란다.

[http://validator.w3.org/을 브라우저 크기를 조절하여 본 화면]

09. 마치며

드림위버 CS3에서 웹표준 문서를 제작하기위해서의 첫 번째인 이번 호에서는 직접 웹의 규격을 만들고 관리하는 W3C를 살펴보면서 웹표준과 웹접근성의 이해와 테스트 방법을 살펴보았다. 혹시 드림위버를 미리 실행시키고 잔뜩 기대했던 분들은 다음 호부터 실습의 기회가 많을 것이니 기다려 주기 바란다. 이 외에 웹표준에 관한 정보들은 제 블로그인 www.tagnbrace.com/blog 에 앞으로 추가될 예정이다.

출처 : tagnbrace.com/blog