웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Web Standard
HOME WEBDESK Web Standard
웹 퍼블리셔(웹 표준 및 웹 접근성 전문가)의 세 가지 기술
Posted by kimdirector | 2008.09.12 | Hit : 1515
퍼블리셔
목록보기이전보기

구조기술(structure technique)
Semantic Markup 과 Valid Markup 을 모두 구사하는 기술.

문법적으로 유효한 XHTML 을 구사하는 기술은 습득하기 쉽습니다. HTML 4 와의 차이점만 익히면 되고 W3C Markup Validation Service 를 이용하거나 Dreamweaver 와 같은 저작도구를 사용하는 경우 Dreamweaver 에 내장된 Markup Validation 검사도구를 이용하게 되면 자신이 잘못된 문법의 코드를 작성하였는지 쉽게 검증할 수 있기 때문에 이를 빠르게 교정할 수 있습니다. 하지만 Semantic Markup 기술은 기계가 이것을 검증해 주지 못하기 때문에 잘못된 마크업을 했더라도 교정받기가 쉽지 않습니다. 극단적인 예를 들어 h1 태그를 한번도 사용하지 않았더라도 기계가 실시하는 Validation 검사쯤은 쉽게 통과할 수 있습니다. 하지만 문서에 제목이 없다는 것은 분명 잘못된 마크업 입니다. 또는 ol, ul, dl 태그를 목록에 적절하게 사용하지 않는것도 역시 마찬가지로 잘못된 문법입니다. 기계는 Semantic Markup 까지 검증해 내는 능력이 없기 때문에 각종 Validation 도구들은 반쪽짜리 검사결과만 보여줄 뿐이라는 것을 명심하여야 합니다.

Semantic Markup 기술을 익히려면 HTML 4 element 에 대한 표준 스펙을 다시 공부하여야 합니다. XHTML 1 element 는 HTML 4 element 와 같기 때문이며 XHTML 1 명세에는 element 에 대한 별도의 스펙을 따로 제공하지 않습니다. 웹 표준에 입문하고 Validation 검사를 통과하였지만 이것이 왠지 너무 쉽게 느껴졌다면 Semantic Markup 기술을 추가로 습득하시기 바랍니다. 대부분의 경우 이미 element 본래의 사용 목적을 알고 있으면서도 실무에 이것을 적용하지 못하는 경우가 많습니다. Semantic Markup 역시 그다지 어려운것은 아닙니다. 제목 요소에 대하여 h1~h6 태그를 순차적으로 사용하고 순차·비순차목록(네비게이션 포함)에 ol, ul 태그를 사용하며 정의목록은 dl 태그로 마크업 합니다. 더 나아가 그동안 잘 사용하지 않던 form 관련 label, fieldset, legend 등의 태그들도 적절하게 활용할 줄 알아야 합니다.

그 밖에 이곳에서 일일이 모든것을 열거할 수 없으므로 결국 다시한번 HTML 4 element 에 대한 표준 스펙을 공부하여야 한다는 말씀밖에 드리지 못합니다. 우선 내가 코딩할 페이지의 요소들 가운데 (X)HTML element 로 마크업 할 수 있는 것들이 무엇이 있는지 판단해 내고 가장 적절한 Markup element 를 찾아내어 그것으로 Markup 하는 습관을 들이는 것이 필요합니다.

가장 중요한 것은 의미가 있는 요소에 대하여만 적절한 element 를 이용하여 Markup 하라는 충고이며 표현과 관계된 것은 CSS 에서 처리하므로 표현 때문에 의미가 없는 요소에 대하여 Markup 을 입히는 방법은 피해야 합니다. 모르는 것을 새로 배우는 것보다 이미 알고 있는것을 바르게 교정하는 일 또한 쉽지많은 않을것이라는 충고를 곁들이고 싶습니다.

표현기술(rendering technique).
CSS 만을 이용하여 표현에 관계된 요소를 처리하고 이를 최적화 하는 기술.
CSS 기술 또한 이미 여러분은 어느정도의 경지에 올라있을 줄로 믿습니다. 하지만 그것이 완전한 것인지에 대하여는 다시한번 검증되어야 합니다. 만약 아직도 디자인 표현을 위하여 의미 없는 (X)HTML 마크업을 페이지에 넣었다면 그것은 아직 (X)HTML 과 CSS 라는 언어의 목적을 완벽하게 이해하지 못한 것입니다. (X)HTML 은 문서의 구조를 정의하기 위한 용도로만 Markup 되어야 하며, 표현을 위한 요소는 모두 CSS 로 처리되어야 합니다.

‘(X)HTML=구조언어’ 이고 ‘CSS=표현언어’ 라는 것을 머리속에 확실하게 집어넣은 상태라면 어떤 요소를 ‘마크업’ 하거나 ‘표현’ 하고자 할 때 ‘의미가 있고 없고’ 에 따라서 적절한 언어를 선택하게 될 것입니다. 그렇습니다. 모든 Markup 은 의미를 갖습니다. 의미가 없는 것은 ‘표현’ 이며 이러한 표현요소는 모두 CSS 로 처리되어야 합니다. 한 가지 구체적인 예를 들어보겠습니다. 웹표준 방식으로 제작된 웹사이트를 뜯어보면 의미를 포함하고 있는 콘텐트는 모두 적절한 element 로 마크업 되어 있고 의미가 없는 단순한 표현요소는 CSS 코드에 의하여 layout 이 결정되거나 background 로 처리되어 있습니다. 이것은 Markup 이 기계 또는 사람에게 어떤 의미를 전달하고 문서의 구조를 결정하는 언어라는 것을 완벽하게 이해한 상태에서 처리된 코드 입니다.

CSS 를 잘 다루려면 일단 (X)HTML 을 이용한 Semantic Markup 과 Valid Markup 을 적절하게 다루는 기술이 선행되어야 함을 의미합니다. 진정한 CSS 전문가는 CSS 보다 (X)HTML 전문가라고 말할 수 있으며 검증된 (X)HTML 코드를 이용하여 이것을 자유자재로 표현할 줄 아는 사람입니다. 또한, CSS 전문가는 해당 문서가 어떤 환경에서도 동일한 Content 와 View 를 제공할 수 있도록 Vendor(브라우저)의 특징(버그)에 대하여도 경험적으로 체득한 사람이라고 말할 수 있습니다. CSS 의 스펙을 모두 터득하였다고 할지라도 (X)HTML 의 표준 스펙(Semantic Markup + Valid Markup)을 적절하게 구사하지 못한다면 이 역시 반쪽짜리 표준 입니다.

호환기술(compatibility technique).
다양한 Vendor, Platform, Device 에 대하여 동일한 Content 또는 동일한 View 를 제공하는 기술
앞서 설명드린 구조기술과 표현기술은 W3C의 표준스펙이 담긴 문서를 학습하고 실무에 이를 적용한 뒤 주변의 고수들로부터 feedback 을 받아보면 얼추 감을 잡을 수 있게 됩니다. 물론 그 과정조차 쉽지 않을 수 있습니다. 하지만 지금부터 설명하려고 하는 호환기술은 조금 더 어렵습니다. 구조기술과 표현기술을 학습한 그대로 실무에 적용하면 그 댓가는 정직하게 돌려받을 수 있습니다. 하지만 호환기술은 예측 불가능 합니다. 저는 위에서 호환기술을 정의 할 때 ‘다양한 Vendor, Platform, Device 에 대하여 동일한 Content 또는 View 를 제공하는 기술’ 이라고 설명하였는데 이 가운데 현실적으로 가장 자주 만나게 되는 문제는 바로 Vendor 간 호환성 문제(’Cross Browsing’ 또는 ‘브라우저 호환성’ 이라고 부르는 것들..)입니다. CSS 렌더링 표준을 잘 지원하고 있는 Safari2 나 Opera9 에서 완벽하게 렌더링 되더라도 그 밖의 대중적인 브라우저(IE 6~7, FF 2)에서는 버그 때문에 이것을 동일하게 렌더링 시켜주지 않고 있으며 개발자들은 Vendor 간 호환성 유지 기법을 따로 익혀야 하는 것입니다. 실제로 어떤 웹 브라우저에 어떤 버그가 있다는 것을 뻔히 알고 있음에도 불구하고 그 해결 방법은 항상 동일하지 않고 상황에 따라 다릅니다. 때문에 이것은 예측 불가능한 문제인 동시에 경험적으로 대응할 수 밖에 없는 ‘기술’ 이라고 설명할 수 있을것 같습니다.

또한 Opera Mini 와 같은 Mobile 전용 웹 브라우저에서도 PC에서 제공받을 수 있는 Content 를 동일하게 제공할 수 있는 장치(Device)독립성 보장 역시 마찬가지 이유로 ‘기술’ 이라고 정의 합니다. Platform 독립성에 대한 문제는 보통 Vendor 호환성과 Device 독립성 문제를 해결하면 자동으로 해결된다고 생각합니다. FF의 호환성을 보장하면 Linux 에서도 볼 수 있게 되고 Mobile Device 에 대응하도록 코딩하면 이 역시 Mobile 장치의 Platform 에 독립적인 페이지가 되기 때문입니다. 이러한 호환기술은 각각의 주요 웹 브라우저(IE/FF/OP)에 대한 표준지원현황 표를 참조할 수도 있지만 누구도 이것을 감히 외우려고 하지는 않을 것입니다. 개인마다 경험치의 차이는 있겠지만 적절한 수준의 호환기술을 익히는 데에는 적지않은 시간이 필요할 것이며 이것을 익히기 위하여 별도의 시간투자는 필요치 않습니다. 다른사람보다 얼마나 더 많은 시행착오를 격었는지 그것이 중요합니다. 시행착오.

결론
‘웹 표준-웹 접근성’ 의 관계는 ‘하위목표-상위목표’ 관계이며, 웹 표준 및 접근성 전문가는 ‘구조기술, 표현기술, 호환기술’ 에 대한 이론적인 지식과 실무적용 그리고 시행착오를 통하여 탄생하게 됩니다. 그리고 지금까지는 그 누구도 (X)HTML 코딩을 기술이라고 표현하는데 주저하였지만 (X)HTML 코딩은 Art 맞습니다. 스스로를 웹 퍼블리셔(Client Side 언어를 다루는 모든 직군으로서 UI개발자, 디자이너, 코더, 프로그래머…) 라고 생각하신다면 웹 1.0 시대에 학교와 학원에서 배운 것들을 과감하게 갈아 엎으시기 바랍니다. 지금 자신의 모습에 적당히 만족하신다면 꼭 그러지 않으셔도 됩니다. 절대로 강요하고 싶은 생각은 없거든요.

Posted by kimdirector | 2008.09.12 | Hit : 1515
Origin http://naradesign.net/wp/2007/01/02/99/
Tags 퍼블리셔
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=26

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
엑셀 안드로이드 트렌드 윈도폰8 Android 고객지원센터 로고 무료 힐링캠프 이벤트 한국웹접근성인증위원회 반응형 웹사이트 타이포그래피 마케팅 디자인 웹기획자 로고디자인 일러스트 HTML5 프로젝트 네비게이션 폰트 로고 배경이미지 iPhone UI 디자인 플랫폼 스티브 잡스 웹디자인 CIP NHN 소통 웹사이트 클라우드 웹 2.0 한화 이글스 폰트 IT