최근에, 진행하고 있는 업무는 사이트가 어디라고 공개하기는 X팔리지만, 지역 정보를 다루는 일종의 소규모 포털 사이트를 기획하고 준비해서 오픈하는 일입니다. 뭐 예전에도 이런 식의 일은 해 본 적도 없거니와 제가 생각하는 ‘이상’과 ‘업계의 현실’이 극명하게 맞서는 부분도 있고 해서 좀 힘든 점이 많았습니다. 진행과정에 있어서 이런 저런 이야기를 꺼내는 것은 결국 제 얼굴에 침뱉기일 뿐이니 자세히 언급하지는 않겠습니다만, 사이트 내의 한 페이지에 담고 있는 정보가 다양하고 그 양이 많다보니 웹 퍼블리셔를 별도로 아웃소싱해서 작업을 진행했습니다. 작업을 해 주신 분은 나름 실력있다고 입소문이 나 있으셔서 어떻게 어떻게 연락이 닿아 일을 진행했습니다. 테스트 오픈을 한 번 했던 사이트를 완전히 갈아 엎고 리뉴얼을 하면서, 프로젝트 내부에서 나왔던 이야기는 ‘테이블 레이아웃이 아닌 웹표준을 준수하는 페이지로 진행해야하지 않겠느냐’는 것이었습니다. 나름대로 그런 쪽에 대해서는 오히려 디자인팀보다 잘 알고 있다고 생각하는 저로서는 퍼블리셔마저도 자신있다고 이야기하는 통에 (심지어는 IE7, IE6에다가 파이어폭스까지 맞춰줄 수 있다고 호언하시더군요…) 뭐 그럼 그렇게 가는 걸로 결정하고 일은 진행되었습니다.
제 나름으로는 완성된 HTML 코드를 전달 받아 두개 브라우저에서 제대로 표시되는지만 확인해 보았을뿐 그렇게 꼼꼼히 체크하지 않고, 소스를 확인해보지 않은 부분도 있어서 놓친 부분입니다만, 역시나 마크업은 어떻게 구성되어 있는지 CSS 구조는 어떤지를 확인하지 않은 것이 큰 실수였습니다.
먼저 마크업 측면에서 완성된 HTML은 엉망 진창이었습니다. 거의 모든 엘레멘트를 P태그로 감싼 다음, div 태그로 레이아웃을 잡더군요. 당연한 이야기지만 P태그는 레이아웃 태그가 아닌 ‘paragraph’를 의미하는 태그입니다. P태그 안에 IMG 태그가 달랑 하나만 들어가 있다면 이미지 위치를 원하는대로 옮기기가 쉽지는 않습니다. 그리고 거의 모든 엘레멘트에 CSS를 적용하는 방법은 class로 지정하고 이를 공통으로 쓰고 있었습니다. 당연히 Depth 별로 다른 글자색을 지정할 수 있도록 하는 장치 같은게 정상적으로 되고 있을리가 없었지요. 그야말로 웹사이트를 위한 코딩이 아니라 시안을 위해 PSD 파일을 HTML 파일로 옮겨놓은 것에 불과했습니다. (엘레멘트에 텍스트가 너무 적거나 많은 상황에 대해서도 전혀 고려가 되어 있지 않더군요.)
어쨌든 그런 와중에 고객은 화면 레이아웃에 대한 약간의 수정을 요구했으며, 이것이 반영되려 하자 ‘모양만 2.0인 웹사이트’는 한계를 맞이했습니다. 결국 코딩을 처음부터 새로하기에는 너무 부담이 컸기 때문에 거의 모든 템플릿소스를 헤집고 들어가 일일이 인라인 스타일을 넣어서 모양을 만들었고, 이제 오픈은 앞둔 시점에서 웹사이트는 (심지어는 FF에서도 정상적으로 보입니다만) 누더기에 다름아닌 꼴을 하고 말았습니다.
제가 하고 싶은 이야기는 그것입니다. 웹표준이 뭐냐는 것이지요. 그저 테이블로 레이아웃을 잡지 않고 css로 디자인을 적용할 수 있게 하면 되는 것이냐. 음 당연히 그건 절대 아닐 겁니다. 차라리 어찌 보면 테이블로 레이아웃을 잡는 방법이 거의 모든 브라우저에서 깨지지 않는 레이아웃을 만드는 가장 간편한 일일 수도 있기는 합니다. 하지만 css로 레이아웃을 잡고 디자인을 적용한 다는 것은 단순히 ‘최신 트렌드르를 따랐다’로 끝날 문제가 아니라 ‘유지/보수가 용이하다’라는 점을 웹사이트를 제작하고 운영하는 입장에서는 무엇보다 중요한 점입니다. 그렇다면 css보다 더 중요한 것은 마크업을 어떻게 만드느냐는 것이 관건입니다. 물론 작업을 해주신 분은 확실히 고수는 고수였습니다. css 핵도 거의 사용하지 않고 IE6,IE7에서 거의 동일한 외관을 보여주더군요. 하지만, 그런 외관의 호환성을 유지하기 위해 마크업을 해 놓은 것을 보니 도대체 개념을 어디다가 두고 작업하셨는지, 저는 멍 때리며 창밖을 30초간 내다 볼 수 밖에 없었습니다.
아무튼 이래저래 이번 일로 고생은 많이 하고 있습니다만, 반대 급부로 배우는 것은 참 많네요. 이걸 좋다고 해야할지 나쁘다고 해야할지는 저도 잘 모르겠습니다.