웹 퍼블리셔는 어떤 직종인가?
아마도 웹 퍼블리싱 일을 하지 않는 사람이나 퍼블리셔 업무를 겉만 하고 있는 이들은 단순히 시안으로 나온 PSD를 HTML과 CSS로 작성하는 정도로만 생각할지 모르겠다. 그러니 마냥 쉬운 줄로만 알고 누구나 금방 할 수 있는 직종이라고 생각을 하겠지.
Why can’t we find Front End developers?라는 글에서는 프론트엔드 개발자에 대해 ‘디자이너와 엔지니어 간의 시각적 언어 확립’을 하는 일을 한다라고 기재하였지만 필자는 조금 다르게 생각한다. 시각적 언어의 확립은 사실상 CSS에 적용되는 부분이다.
기본적으로 웹 퍼블리셔가 다루는 언어는 HTML, CSS, JavaScript다. (JavaScript가 왜 기본이냐 라고 반론을 드는 이들도 있겠지만 이 부분에 대해서는 잠시 미뤄놓도록 하겠다.) 웹 퍼블리셔가 다루는 이 언어들을 가지고 웹 퍼블리셔가 어떤 일을 해야 하는지 알아보고자 한다.
구조적 언어의 확립
첫째로는 구조적 언어의 확립이다.
W3C에서는 HTML의 목적에 대해 웹 페이지의 구조를 기술하는 언어로 규정하고 있다. [1] HTML에서 각 요소(element)들은 HTML 명세에 정의된 특정한 의미를 가지며, User-Agent 혹은 AT등에 그 의미를 전달(represent)한다. [2] .
<h1>웹 퍼블리셔는 어떤 직종인가?</h1>라는 마크업은
"웹 퍼블리셔는 어떤 직종인가?"를 해당 문서의 첫 번째 수준의 제목으로 규정한다. 또한
<p>blah blah~</p>는 "blah blah~"를 문단·단락(Paragraph)으로 규정한다.
문서를 구조화시키는데 있어 이는 매우 중요한 요소다. 어떤 요소(element)를 사용하느냐 어떤
속성(attribute)을 사용하느냐는 곧 그 문서가 가지는 구조, 골격을 만들게 된다.
구조화가 잘 되어 있을 수록 user-agent가 해석하기 좋고 문서가 전달하고자 하는 의미를
정확하게 인지할 수 있으며 이는 곧 접근성이나 SEO
[3]
를 향상시키는 효과 역시 가져다 주게
된다.
그러나 단지 PSD를 web browser에서 표현시키는 수준에서 tag를 나열하면 되는 줄 아는 이들이 너무 많다. HTML의 가장 기본은 구조적 언어라는 것인데, 이는 철저히 무시한채 그저 시각적으로만 잘 표현되면 장땡이라는 식인지 그냥 되는 대로 마크업을 하고, 심지어 일례로 inline 요소를 block-level 요소처럼 보여지도록 하기 위해서 Paragraph 요소로 wrapping하는 일들을 매우 빈번하게 보게 된다.
웹 퍼블리셔의 마크업은 문서의 해석 능력에서부터 시작된다.
기획서를 보고, 디자인을 보고 그 문서가 전체적으로 무엇을 전달하고자 하는 문서이고 각 문서의
구성 요소들이 어떤 의미를 가지고 어떤 맥락에서 쓰인 것인지를 해석하고 판단하여 그에 맞도록
문서를 구조화하여 HTML로 markup을 하는 것이 마크업의 기초다라고 하고 싶다.
HTML은 대강 눈에 잘 보이게만 만들면 장땡인 그런 언어가 아니다.
표현(presentation) 언어의 확립
둘째로는 표현(presentation) 언어의 확립이다.
Web browser들에는 기본적으로 HTML 요소(element)들에 대한 기본 스타일이 존재한다.
하지만 이는 어디까지나 default인 것이고 이는 심미적인 표현을 가미해주지 못한다. 그렇기
때문에 좀 더 아름답게 보일 수 있도록 시각적 효과를 주어야 할 필요가 있고 이를 위해 CSS라는
언어를 사용하게 된다.
웹 표준에서 문서의 구조와 표현은 분리되어질 것을 권고한다.
앞서 말했던 inline 요소를 block-level처럼 보여지도록 하는 방법은 사실 CSS로 해야 옳다.
시각적 표현은 분명히 표현(presentation) 언어로 수립해 주어야 한다.
CSS를 이용하는 것만으로 충분히 inline 요소를 block-level 요소처럼 렌더링 되게 할 수 있고,
block-level 요소를 inline요소처럼 렌더링 시킬 수 있다.
제발 CSS로 처리해야 할 것들을 <div>이나 <p>요소 같은 것들로 wrapping해서 불필요한
markup을 만들어내지 말자.
기능 부여를 위한 언어의 확립
적절히 쓸 용어가 없어 그냥 기능 부여를 위한 언어라고 썼다. (기능적 언어라 하면 프로그래밍언어 영역에서 함수 언어라는 용어와 혼동이
올까봐 ;;)
어쨌든, 셋째로는 기능 부여를 위한 언어의 확립이다.
웹 문서에서 markup과 CSS만으로는 User Interaction을 구현하기에는 부족하다. 때문에
사용자와의 interaction을 부여해 줄 수 있는 언어가 필요하고 이것이 보통 JavaScript를
통해 이루어진다.
앞서 이야기 했던 바와 같이 이것이 왜 웹 퍼블리셔가 해야할 기본이냐라고 반론을 펼치는 이도
있을 거다. 하지만 웹 문서를 놓고 볼 때 HTML, CSS, JavaScript 는 서로 떼 놓고 할 수가
없다. 더구나 현재와 같이 진보된 UI가 요구되는 시점에서 JavaScript는 뗄레야 뗄 수가 없는
부분이다.
웹 퍼블리셔는 사용자와 맞닿는 Front-End를 개발하는 사람이다. 결국 Front-End에 관한
부분들은 모두 이들의 업무 영역에 속한다고 봐야 한다. (이에 대해 Front-End 개발자와 웹
퍼블리셔는 다르다 라고 하는 이들도 있으나 이 부분에 대해서는 차후에 따로 포스팅을 할
예정이다.)
JavaScript로 기능을 부여하는 것 역시 단순하지 않다.
web browser라는 표준화되지 않는 플랫폼 위에서 동작해야 하는 언어이다보니 지원되는 범위가
다른 web browser들 (혹은 다른 버전들) 사이에서의 호환성을 고려해야 하고, 언어 특성상
memory leaks도 고려가 되어야 한다. 자칫 최적화를 시켜놓지 않게 되면 종종 사용자에게 엄청
버벅대는 화면을 보여줄 수 있게 되기도 하다.
마냥 쉬운 직종이 아니다.
많은 학원들이 그렇고 많은 업계 사람들이 그렇고 많은 현재 종사하는 이들도 그렇고 이 분야를
진입장벽이 낮고 쉬운 직종으로 치부하는 경향이 많다.
물론 다른 프로그래밍 언어들에 비해 HTML, CSS, JavaScript가 배우기 쉬운 언어임에는 틀림이
없다. 그러나 그것은 언어가 배우기 쉽다는 것이지 이를 활용해서 웹을 만드는 것 자체가 쉽다는
말은 아니다.
언어가 쉽다고 전문성이 필요하지 않다라는 얘기 역시 아니다. 안타깝게도 쉬운 언어를 다루니 전문성은 높지않다라는 평가를 내리는 이들도 너무 많고 이 언어들을 다루는 이들 조차도(특히나 HTML, CSS) 눈에 보이는 결과만을 가지고 쉽다고 여기는 것인지 모르겠으나 금방 배울 수 있고 금방 할 수 있는 것으로 여기는 경향이 크다고 느껴진다.
하지만, 개인적으로 그것은 웹 퍼블리셔의 업무 자체를 제대로 알지 못하고 "결과"만 나오면
된다는 식의 관행으로 인함이 아닌가 싶다.
웹 퍼블리셔의 업무는 사뭇 어렵다. 물론 그렇다고 앞서 이야기 한 것들을 다 갖추어야만 웹
퍼블리싱을 할 수 있다는 이야기는 아니다. 이는 웹 퍼블리셔가 어떤 방향성을 가지고 있어야
하는지에 대한 이야기를 풀어 놓은 것이다. (그리고 물론 위에 나열한 것이 다가 아니다.)
다만, 마냥 쉽게 접근해도 괜찮은 그런 분야가 아니라는 거다.
웹 퍼블리셔 스스로가 자기 직군에 대한 전문성을 가져야 한다. 스스로가 우리는 그냥 HTML,
CSS로 시안과 똑같이 화면을 구현하는 일이다로 그쳐버린다면 누구도 그 직군에 대해서 전문성을
인정해 줄리가 만무하다.
스스로 전문성을 가지려고도, 인정하지도 않는 직군을 누가 전문성이 있다고 인정해 주겠느냐는
말이다.
이제 막 웹 퍼블리셔로 취업하려는 분들에게…
위 글로 인해 지레 겁부터 먹지 않았으면 좋겠습니다. 앞서 말한 바와 같이 이는 방향성을 말한
것이지 미리 갖추어야 하는 것이 아닙니다.
당장에는 부족할 수 있습니다. 하지만 방향성을 가지고 꾸준히 노력해가며 전문성을 갖추어 가면
되는 일입니다.
다만 이 분야로 오려고 하는 이유가 단순히 남들이 쉽다고 해서, 조금 배우면 금방 취업이 된다고 해서라면 생각을 다시 하시는 것이 좋습니다. 그런 생각을 가진 이들이 많으면 많을 수록 떨어지는 것은 몸 값입니다. 취업이야 금방 되겠죠. 대신 싼 값으로. 가치가 하락되면 값은 당연히 떨어지기 마련인게 자본주의 시장입니다. 안타깝게도 이미 그런 시장이 되어지고 있기도 합니다.
적어도 이 분야에서 일하기로 마음을 먹고 몸을 담았다면, 이 분야에서의 전문성을 인지하고 전문가적 소양을 키우기 위한 노력을 해 주시기를…
위 3가지 타이틀을 주제로 좀 더 자세한 글을 게시해두었습니다. 아래 내용들도 참고해서 읽어주세요~
각주
HTML is the language for describing the structure of Web pages. What is HTML?
HTML에서 요소(element), 속성(attribute), 속성 값(attribute value)은 정의 된 (이 명세에 의해) 특정한 의미(semantic)을 가집니다. 예를 들어, ol 요소(element)는 순서가 있는 목록을 나타내고, lang 속성(attribute)은 콘텐트의 언어를 나타냅니다. HTML 5.1 명세 - 3.2.1 의미론(semantic)
댓글