지난 포스트 웹 퍼블리셔는 무슨 일을 하는가? Part 1에 이어 두 번째로 "표현적 언어의 확립"에 대한 이야기를 해본다.

웹 퍼블리셔는 표현(presentation)을 위한 언어"도" 다룬다.

이전 포스트에서 HTML은 문서의 구조화와 콘텐츠의 정보 전달에 그 목적을 두고 있다고 이야기 했다.
하지만, HTML만으로 웹 페이지를 만들게 되면 texture 콘텐츠와 non-texture 콘텐츠가 쭉 나열이 될 뿐, 콘텐츠의 배치나 가로/너비 설정 등은 불가하다.

때문에, 유저 에이전트에서 문서를 보는 독자에게 어떻게 표현되도록 할 것인가를 결정하는 언어가 추가적으로 필요하게 되고, 이것이 CSS라는 언어이다.

CSS를 중간의 Style 이라는 단어 때문에 "시각적" 언어로 오인하는 경우가 종종 발생하는데 CSS는 시각에만 국한되지 않는다. 시각(visual)과 표현(presentation)은 동일한 의미가 아님을 기억하도록하자. (나 역시도 이전에는 CSS를 시각적 언어로만 생각했었다.) 표현에 시각이 포함되기는 하지만 시각이 표현의 전부가 아닌 것처럼 CSS 역시 마찬가지로 시각적인 부분이 포함되기는 하지만 그것이 전부가 아니다. (실제로 CSS3에는 청각을 위한 프로퍼티도 존재한다.)

웹 퍼블리셔는 유저 에이전트를 통해 문서를 소비하는 독자들을 위해 문서의 구조와 의미를 전달하기 위해 HTML 언어를 사용하는 것 뿐 아니라, 올바르게 표현되어지도록 CSS를 다루어야 하는 것이다.

단순히 Styling이 아니라, 표현적 언어의 규격 — 스타일 규격을 세우는 것이다.

CSS는 단순히 콘텐츠를 배치하고 가로/너비 등을 설정하는 언어가 아니다. CSS는 표현을 위한 요소들의 집합을 정의하고, 이 정의된 요소들을 HTML의 정해진 곳에 표현되도록 해야 하는 것이다.

다시 말해, CSS는 문서를 구성하는 요소 단위들 — 컴포넌트들이 어떻게 보여야 하는지를 정의하고, 이를 HTML이 자신이 가지고 있는 연관된 컴포넌트들에 표현을 할당하도록 하는 것이 CSS가 하는 일이다.

따라서, 웹 퍼블리셔는 그냥 되는대로 웹 브라우저를 띄워놓고 받은 디자인 시안대로 "그려내는" 것이 아니라, 웹 사이트 전반에 대한 스타일 규격을 만들어 내는 작업을 해야 한다.

이것이 웹 표준에서 이야기 하는 구조와 표현의 분리다.
단순히 물리적으로 파일을 분리시키는 것이 구조와 표현의 분리가 아니라, 관심사 자체가 분리되어야 하는 것이다. SMACSS, BEM, OOCSS 등이 괜시리 나오는 것이 아니다.

스타일 규격을 세운 다는 것. 넘나 어려운 것.

물론, 웹 사이트 전반에 대한 스타일 규격을 세우는 것은 쉬운 일이 아니다. 다시 말하지만, 웹 퍼블리셔는 진입 장벽이 낮은 것이지 그 업무가 쉬운 것이 아니다.

특히나 스타일 규격을 세우려면 UI 기획이 잘 나와야 하고, 디자인 자체가 규격화 되어 나와야 가능한 것도 사실이다. 솔직히 이야기 해서, 디자인 규격을 만들지 않고 있는 UI 기획자나 웹 디자이너는 자신의 업무를 제대로 하지 못하고 있다라 해야 하지 않을까 싶다. (물론, 그럴만한 시간을 주지 않는 상위 계층분들(?)이 근본적인 문제가 되는 것이 더 일반적인 상황이기는 할 것이다.)
드라마 계에 "쪽 대본"이 있다면, 웹 계에는 쪽 기획과 쪽 디자인이 있달까… = _=a

하지만 이것들은 차치하고, 근본적인 이야기만 해 보자면, 웹 퍼블리셔는 단순히 PSD를 웹 브라우저에 옮겨 그리는 것이 아니라 웹 스타일 규격을 만들어내고, 이를 기반으로 디자이너와 협력하여 웹 사이트의 일관성 있는 UI를 유지시키고 업무 효율성을 증대시켜야 한다.

CSS는 정말 쉬울까?

너무 자주 끄집어 내는 말인것 같아서 좀 그렇지만, 웹 퍼블리셔는 진입장벽이 낮다라는 것의 일부로 CSS는 (상대적으로) 배우기 쉬운 언어다 라는 것인데, 과연 정말 쉬울까는 생각을 해봐야 할 문제이다.

나는 다음의 이유로 CSS는 다루기 쉬운 언어가 아니라는데 한 표를 던진다.

• 모든 유저 에이전트가 완전히 똑같은 렌더링을 가지지 않는다.
• 유저 에이전트마다 발생하는 렌더링 오류 이슈가 다르다.
• 유저 에이전트마다 지원하는 CSS 범위가 차이가 있다.
• 적용한 스타일의 우선 순위가 단순하지 않다. 셀렉터를 어떻게 조합하느냐, 작성 순서가 어떻게 되느냐에 따라 적용되는 결과가 달라질 수 있다.
• CSS가 미치는 영향은 visual에 그치지 않고 웹 접근성, 검색엔진최적화에까지도 영향을 준다.
• CSS animation을 사용할 경우에는 퍼포먼스에도 영향이 있다.

자, 다시 생각해보자. CSS는 정말 쉬운가?
아, 물론 그냥 시안을 브라우저에 그려내는 작업을 웹 퍼블리셔의 업무로 인식하는 사람에게는 여전히 쉬운 일일거라는 것에는 동의한다.

CSS를 마구잡이로 쓰지 말자.

다시 말하지만, CSS는 "스타일 규격"을 만드는데 사용하는 언어다.
되는 대로 그냥 코드를 나열하여 PSD를 웹 브라우저로 옮기는 것은 "웹 퍼블리싱"을 하는 것이 아니라, 그냥 "그림을 그려내고 있는 일"을 하고 있는 것이다. 그리고 그것이 그렇게도 듣기 싫어하는 "코더"가 아닐까 생각한다.

물론, 앞서서 UI 기획자와 디자이너가 각자의 산출물을 잘 만들어 놓아야 가능하다는 것에 동의한다. 하지만 앞서서 잘 만들어 놓지 않는다고 하여서 나도 엉망으로 만들면 똑같은 놈(?)이 되는 것 아닌가…
앞에서 못하면 우리라도 잘하자 ㅠㅠ

CSS를 다룬 다와 ".css" 파일을 작성한다는 다르다

CSS를 다룬다는 것은 css 파일을 직접 작성한다가 아니라, 최종 렌더링 된 결과 CSS — 즉 어떤 과정을 거쳐 최종적으로 사용자의 브라우저에 노출되는 CSS를 책임진다는 것이고, 이 어떤 처리를 거치기 전의 파일 확장자가 CSS라는 보장은 어디에도 없다.

최근에야 그나마 퍼블리셔를 채용하는 회사들이 전처리기(SASS 등)에 대한 요구사항이 많아져서 전처리 언어를 사용하는 퍼블리셔들이 늘어나기는 했지만 따지고 들어가보면 이것이 자신이 다루어야 하는 것이라서라는 인식에서라기 보다는 취업을 위해서 불가피하게 채용 조건에 있으니까 하는 경우가 더 많고 그마저도 에디터의 live compiler에 의존하여 에디터에 해당 기능이 없으면 손도 못대는 경우도 어렵지 않게 발견된다.

학원이나 웹 퍼블리셔 관련 기초 강의가 CSS 파일을 작성하는 법으로 강의를 해서 그것만 아는 것인지는 모르겠으나, 앞서 HTML에 대해서 이야기 한 것과 동일하게 웹 퍼블리셔가 CSS를 다룬다는 것은 SA©SS·LESS·Stylus 등 전처리 뿐 아니라 Autoprefixer·CSSnano 등 후처리도 다룰 줄 알아야 하고 당연히 그에 따라 이를 위한 환경 구축, 설정 등도 할 수 있어야 한다.

Hero image from Freepik by sentavio