지난 글에서는 웹접근성 개발의 Flow에 대해 살펴보았다. 이번에는 웹접근성 개발의 핵심 축인 웹퍼블리셔의 입장에서 해야 할 일과 주요 기술을 정리해보고자 한다.

1.   웹퍼블리셔는 웹접근성 전문가?

 구인, 구직 사이트를 살펴보면 이와 같은 인식이 깔려 있는 것을 볼 수 있다. 우리 나라의 경우는 웹퍼블리셔라는 직책 자체가 웹표준과 웹접근성이 이슈로 떠오르면서 생겼기 때문이다. 그리고 이는 현장에서 웹퍼블리셔라는 타이틀을 달고 있는 분들 또한 가지고 있는 인식이다. 아직까지는 웹퍼블리셔의 역할에 대해서 명확하게 정의가 안된 상황이라, 웹퍼블리셔의 위치와 역할에 대해서도 명확한 정의가 없다. 굳이 정의를 해보자면, 웹퍼블리셔는 코더보다는 향상된 기술과 안목을 가진 상태에서, 웹개발 프로젝트에서 웹표준을 준수하고 웹접근성을 유지하도록 만들어야 할 책임이 있는 사람이라고 할 수 있다.

 그러나 사실 웹표준 준수나 웹접근성 유지에 대한 책임은 웹퍼블리셔만의 몫이 아니다. 웹개발에 참가하는 전 팀원에게 있으며, 이에 따라 웹접근성 가이드, 웹표준 가이드는 각 파트별로 각각 제작되어 현장에 배포되어야 한다. 그리고 당연히 이 역할은 웹퍼블리셔의 몫이 아니다. 프로젝트를 총괄하는 PM의 몫이다.

 우리 나라에서는 웹을 애플리케이션으로 보고 ‘개발’로써 접근을 하지만 실제로 웹은 문서다. 따라서 웹사이트를 제작하는 것은 책을 만들듯이 출판(퍼블리싱)하는 것으로 봐야 한다. 단지 출판물이 배포되는 장소가 서점이 아닌 웹인 것 뿐이다.

 웹퍼블리셔라는 직책은 그렇기 때문에 출판사에서 편집자의 역할이다. 출판사에서 작가들이 써온 원고와 삽화가들이 그려온 그림 등을 모아서 책으로 펴내는 역할을 편집자들이 하는 것처럼, 웹퍼블리셔는 기획자들이 만들어낸 콘텐츠와 개발자들이 만든 애플리케이션, 그리고 디자이너가 만든 디자인들을 조합하여 한 편의 완성된 문서로 만들어내는 것이다.

 웹표준과 웹접근성이 이슈가 된 것은 이 문서를 읽는 기기들이 한 가지가 아니라는 데 있다. 이런 점에서 다양한 기기와 환경에서 읽을 수 있는 문서를 만들어낼 책임이 웹퍼블리셔에게 있지만, 애초에 그것이 퍼블리셔만의 책임은 아니다.

 잘 만든 책이란 무엇일까? 우선은 책의 내용(콘텐츠) 자체가 좋아야 하고, 그 다음에는 그 내용을 잘 편집하여 효과적으로 독자에게 전달할 수 있어야 한다. 웹퍼블리셔에게 어찌보면 더 중요한 것은 그렇기 때문에 웹표준을 준수했느냐, 웹접근성을 유지했느냐보다는 웹이라는 특성을 잘 이해하여 콘텐츠를 얼마나 효과적으로 전달시켰느냐에 있다. 웹퍼블리셔가 한 편으로는 UI개발자로 불리어지는 것은 이 때문이다. 전통적으로 이는 디자인의 영역이었다. UI, UX 모두 디자이너들이 다루어야 할 문제라고 본 것이다. 그러나 웹의 경우, 이를 위해서는 디자이너가 CSS를 이해하여야 한다는 전제가 따르게 된다. 그러나 이는 현실적으로 무리한 요구이다. 또한 디자이너들에게 코드 작성까지 요구할 경우, 자칫 창의성을 상실할 가능성이 크다. 따라서 디자이너에게는 순수한 디자인을 맡기고 이를 CSS를 사용하여 웹상에서 구현하는 것이 웹퍼블리셔의 역할이 되어야 한다. 그러나 이 과정에서 웹퍼블리셔가 UI, UX에 대한 개념이 없다면 디자인을 제대로 살리지 못하게 될 것이다. 더 나아가 비현실적인 디자인을 해왔다며 오히려 디자이너를 구박할 수도 있다. 사실 이 부분은 웹퍼블리셔의 스킬에 전적으로 달려있다. 여기서 말하는 스킬은 단순히 CSS를 얼마나 잘 알고 있느냐가 아니다. 포토샵을 잘 다룬다고 훌륭한 디자이너가 아닌 것처럼, CSS는 단지 디자인을 구현하는 tool일 뿐이다. 웹문서의 다양한 레이아웃과 편집 방식에 대한 이해가 있어야 한다. 그리고 이를 바탕으로 사전에 웹디자이너와 앞으로 만들 웹사이트의 UI와 레이아웃에 대해서 얘기를 해야 한다.

2.   웹퍼블리셔의 기술

(1)   구조화 (Structuring)

 여기에는 두 가지 차원의 구조화가 필요하다. 하나는 내용을 구조화 하는 것이고 다른 하나는 표현을 구조화 하는 것이다. 표현의 구조화는 바로 아래 챕터에서 다루도록 하고 여기서는 의미의 구조화에 대해서 얘기해보자.

 우리가 흔히 글을 작성할 때, 제목을 정하고 각 목차를 만들어서 장문의 글을 나누듯이 웹으로 퍼블리싱 되는 콘텐츠도 이러한 내용상의 구분에 따른 구조화를 해야 한다. 이에 대한 개념과 방법에 대해서는 ‘시만틱 웹(Semantic Web)’에 대해서 검색해보면 알 수 있을 것이다. 웹퍼블리셔는 따라서 Symantic Markup의 전문가여야 한다. 근데 문제는 이것이 현재까지 나온 검사 도구로는 체크가 불가능하다는데 있다. 당장 html 페이지를 만들어서 검사기를 돌려보자. <h1> tag가 하나도 없어도 ok 사인을 내보내 준다. 근데 상식적으로 Symantic Markup을 했다면 <h1> tag가 없을 리 없다. 현재의 검사 도구들-셰리프Sheriff 같은-은 따라서 반쪽 짜리 검사임을 알아야 한다. 워드 프로그램에 비유하면 현재의 검사 도구들은 맞춤법을 검사하는 것이다. 그것 또한 중요하다. 아무리 명문이라도 기본적인 맞춤법이 틀린다면 챙피한 일일 것이다. 마찬가지로 각종 규약에 맞게 tag를 작성하는 것은 기본이다. 그러나 웹퍼블리셔는 단순히 tag를 본래의 용도에 맞게 사용해야 할 뿐만 아니라, 이러한 tag들을 콘텐츠의 구조에 맞게 서로 의미가 전달될 수 있도록 사용해야 한다.

아래의 그림을 참조하기 바란다.

출처 : Daum IWA팀

(2)   표현 (rendering)

 앞서도 언급했지만 웹퍼블리셔는 디자이너가 가져온 디자인을 CSS등을 이용하여 웹문서로 표현하는 사람이다. 그러자면 먼저 디자이너가 가져온 디자인을 이해할 수 있어야 한다. UI, UX 등의 전문가가 될 필요는 없겠지만 최소한 그것들이 실제로 어떻게 동작해야 하는지, 어떻게 보여주어야 하는지는 알고 있어야 한다. 그 다음 이것을 기술적으로 어떻게 구현하면 좋을지 생각해야 한다.

 ‘(X)HTML=구조언어’, ‘CSS=표현언어’라는 개념을 유지하여 표현 요소를 CSS로 모두 옮겨 기록하는 것은 기본이다. 문제는 오늘날 추세인 RIA(Rich Internet Application)를 구현하기 위해서는 CSS만 잘해서는 안 된다는 것이다. Ajax, Javascript, Flash, Flex에 대해서도 다룰 수 있어야 한다. 다행스럽게도 이에 대해서는 국내에서도 가이드가 나온 것이 있으니 아래 URL을 참조하기 바란다.

(3)   호환성 (compatibility)

 웹문서는 다양한 기기에서 읽혀진다. 모든 기기에서 동일한 환경을 유지하는 것은 불가능하겠지만 최소한 기기가 바뀌었다고 해서 콘텐츠 자체를 접근 못해서는 곤란한다. 이에 대해서는 구조(xHtml)-표현(CSS)-행동(Script)을 제대로 분리 했다면 대부분 해결되지만 일부tag는 그렇지 않은 경우도 있다. 이는 결국 경험에 의존할 수 밖에 없는데, 각각의 tag가 각 브라우저에서 어떻게 해석 되어지는지를 직접 시행착오를 통해 익히는 것이다.

 다만 이러한 시행착오를 줄일 수 있는 방법이 있는데 이는 웹브라우저 표준 지원화 표를 사용하는 것이다. 코딩을 해나감에 있어 이 표를 참조한다면 이러한 시행착오를 줄일 수 있다.

웹브라우저 표준 지원화 표(http://www.webdevout.net/browser-support)

이상으로 웹접근성, 웹표준에 관한 개발에 있어 웹퍼블리셔에 대해서 알아보았다.사실 웹접근성, 웹표준은 웹퍼블리셔만의 역할이 아니다. 책을 출판하는데 있어 맞춤법을 아는 것이 편집자만의 몫이 아닌 것처럼, 웹개발에 있어서도 콘텐츠를 만드는 모든 이가 웹표준과 웹접근성을 알아야 할 필요가 있다. 그런 면에서 개발자가 아니더라도 범용으로 쓸 수 있는 검사 도구의 사용은 중요하다. 앞서 소개한 셰리프Sheriff 같은 Tool이 그 중의 하나가 될 수 있을 것이며, 그 외에도 각자의 환경에 맞게 적합한 Tool을 현장에 도입하는 것이 필요할 것이다.