웹을 모르는 웹 퍼블리셔

모두까기의 대미(?) 이젠 내부자들이다.

이번에도 본격적인 포스팅에 앞서 언급해 둘 것은, 아래의 내용이 모든 웹 퍼블리셔가 그렇다고 이야기 하는 것은 아니다. 당연히 그렇지 않은 웹 퍼블리셔들도 있고, 그러한 웹 퍼블리셔들도 있다.

다만, 내가 지켜 본 웹 퍼블리셔들의 대다수가 (특히 네이버의 H카페의..) 앞으로 이야기 해 나갈 문제들을 가지고 있기에 거침없이 이야기 해 보고자 한다.

웹 퍼블리셔는 무슨 일을 하는가?

앞선 포스트에서 이미 많은(?) 부분 이야기를 했던 주제다. 자세한 이야기들은 앞에서 이미 언급 되었기 때문에 요약해서 이야기 해보면, 문서의 구조 확립, 표현적 언어의 확립, 상호작용을 위한 기능 부여 정도로 요약해 볼 수 있을 듯 하다.

이를 위해서 HTML, CSS, JavaScript라는 언어를 다루게 되고, 이를 토대로 각종 라이브러리나 프레임워크를 추가로 다루게 된다.

웹 퍼블리셔가 본인이 무슨 일을 해야 하는지 모른다.

자신들이 웹 퍼블리셔라고 하면서 자신들이 실질적으로 무엇을 해야 하는지 모르는 경우가 너무 많다.

대표적으로, 대다수의 웹 퍼블리셔들이 문서의 구조를 구축하는 것이 아니라, 웹 브라우저를 캔버스로 두고 HTML, CSS를 연필과 물감 삼아 그림을 그리고 있는 행위다.

HTML의 각 요소(element)들은 고유의 의미를 가지고 있고 그 의미를 통해서 문서의 구조를 나타내게 된다. 하지만 많은 웹 퍼블리셔들이 각 요소(element)의 의미와는 상관 없이 PSD(PhotoShop Document)에 그려진 그림을 다시 그 그림 그대로 HTML을 가지고 표현하고 있는 경우가 너무 많다는 거다.

예를 들어, PSD 상에 두 줄 이상의 줄바꿈을 가지고 있으니 <br>을 여러 개 사용한다거나, 버튼이 한 라인에 표현되도록 요구되니 블럭 요소(block element, 이 표현이 과연 적절한지는 물음표이나 딱히 다른 표현할 것이 없어 이 표현을 사용한다.)로 표현하기 위해 아무 생각 없이 <p>로 묶거나 <div>로 묶어서 작성하는 경우를 많이 볼 수 있다.

HTML을 나열한다고 해서 HTML을 사용할 줄 아는 것이 아니다. 의미를 담아야 할 문서에 의미 없이 HTML 태그들을 나열 하는 것은 단순히 웹 브라우저에 나타나게 할 줄 아는 것 뿐이지, HTML을 사용할 줄 아는 것과는 매우 다른 이야기이다.

심지어는 태그(tag)와 속성(attribute)을 구분하지 못하는 경우도 많다. 커뮤니티 등에 올라오는 질문을 보다보면 "alt 태그 질문인데요" 와 같이 어떤 콘텐트 속성(Content Attribute)이든 전부 태그라고 지칭하는 경우도 쉽게 볼 수 있다.

이는 비단 HTML에만 국한되는 것이 아니라, CSS에도 마찬가지다.

width: 100%를 부여하고 padding 값을 추가로 부여함으로 인해 나타난 문제의 원인을 전혀 파악하지 못한다거나, position: absolute를 사용하면서 위치의 기준점을 이해하지 못해 위치를 올바르게 잡지 못하고 있는 상황들을 쉽게 볼 수 있다.

웹 사이트를 만드는데 웹 기술을 모른다.

굉장히 흥미로운(?) 것 중 하나는, 결국 웹 퍼블리셔는 웹 사이트를 만드는 일을 하는데 웹에 관련된 기술에 대해서는 모르는 부분이 너무 많다는 것이다. HTML, CSS를 나열하여 브라우저 상에서 어떻게 표현은 되게 하지만, 사실 상 앞서 언급한 바와 마찬가지로 HTML 자체를 제대로 아는 경우가 많지 않고, 콘텐츠의 배치, 사이즈 설정 등의 가장 기본이 되는 box-modeling도 모른 채, 그저 눈에 보이는 결과에 의존하여 CSS를 작성하는 경우가 허다하다.

HTML, CSS를 다루어야하는 웹 퍼블리셔가 HTML과 CSS를 올바르게 알지 못한다는 것은 문제가 있다. 물론 처음에는 아는 바가 적을 수도 있겠으나, 해가 지나고 경력이 계속 해서 쌓임에도 불구하고 HTML, CSS에 대해 아는 바가 여전히 겉핥기에 지나지 않는다면 이것은 명확하게 문제로 인식을 해야 한다.

나는 HTML 충분히 알고 있는데? 라고 한다면 다음 질문들에 대해 답변해보면 좋을 것 같다. 관련 정보는 포스트 하단에 있다.

• HTML의 콘텐트 모델(Content model)이란 무엇이고, HTML 5에는 어떤 콘텐트 모델들이 있는가? ¹
• hr 요소(element)는 어떤 의미로 사용되는가? ²
• em 요소(element)와 strong 요소(element)는 어떤 차이가 있는가? ³
• th 요소(element)의 scope 속성(attribute)에 사용되는 col / colgroup / row / rowgroup은 각각 어떻게 적용되는가? ⁴

뿐만 아니라, 몇 개월을 현업에서 업무를 진행해도 서버 — 클라이언트에 대한 개념적 이해도 없고, 동기/비동기 호출에 대한 개념 이해도 없는 경우가 많다. HTML, CSS 외의 것에는 그다지 관심을 가지지 않는 듯한 느낌이 드는 건 착각일까?

HTML에는 정답이 없다는 착각

흔히 웹 퍼블리셔를 준비하는 이들에게 자주 언급되는 이야기 중 하나는 "웹 퍼블리셔는 진입 장벽이 낮다"라는 말과 "HTML에는 정답이 없다"는 말이다.

HTML을 단순히 웹 브라우저를 캔버스 삼아 그림을 그리는 줄로 알고 있지 않고 서야 이 말이 가하기나 할까?

HTML에는 정해진 정답이 없다는 것은 일부는 맞고 일부는 틀린 말이라고 봐야 한다. HTML에 정해진 답이 없다는 것은 HTML로 잡아야할 문서 구조는 해당 문서를 해석하는 사람에게 달려있기 때문에 가한 말이다.

동일한 콘텐츠를 본다 하더라도 이 콘텐츠를 보는 사람마다 혹은 앞뒤 컨텍스트에 따라 달리 해석 될 수 있고 이는 당연히 다른 요소(element)의 사용을 불러 온다. 누군가는 특정 콘텐츠를 섹션으로 해석하여 section 요소(element)를 사용할 수도 있지만 누군가는 하위 호환성의 환경으로 <div>으로 마크업 할 수도 있다. 누군가는 의미있는 강조로 해석하여 <strong>으로 마크업 할 수도 있고 누군가는 단순히 가시적 강조로 해석하여 <b>로 마크업 할 수도 있다.

하지만, 순서가 없는 목록을 여러 개의 div 요소(element)로 나열하는 것은 너무나 당연하게도 잘못된 마크업이다. 단순히 사용자가 누를 수 있게 하기 위해 페이지 이동이 없음에도 불구하고 a 요소(element)를 사용하는 것 역시 마찬가지로 명백히 잘못된 마크업이다.

그럼에도 불구하고 HTML에는 정답이 없다는 말로 모든 것이 허용되는 것 마냥 언급되는 것은 당연히 문제가 아닐까?

웹 퍼블리셔가 알아야 할 것은 생각보다 많다

웹 퍼블리셔가 알아야 할 것은 단순히 HTML, CSS 코드가 아니다. 언어 자체를 아는 것은 기본 중의 기본일 뿐이고, 이 언어를 통해서 무엇을 해야 하고 이 언어가 사용되는 곳에 어떻게 사용되어야 하는 가를 아는 가는 기본적으로 가져가야할 부분이다.

이러한 것들을 무시한 채, 단순히 브라우저에 잘 보여지는 것에만 만족한다면 분명히 방향이 잘못 되었다고 생각해야 할 것이다.