메뉴 건너뛰기

신승식의 다른 생각 (보관)

 

테이블을 사용하지 않고 CSS를 위주로 화면 요소를 배치하면 많은 장점이 있습니다. 무엇보다 눈이 핑핑 돌아가는 테이블 안의 테이블과 같은 복잡한 소스가 한결 간결해져서 편집하기가 무척 쉬워집니다. 테이블을 사용하는 경우 대부분 공간을 정교하게 배치하기 위해 쓸데없는 중복 테이블, 공간을 확보하기 위한 보이지 않는 이미지, 보이지 않는 흰색의 글자 등을 쓰게 되고, 이것은 HTML 코드를 아주 어지럽힐 뿐만 아니라 소스의 유지보수를 어렵게 만드는 주범이 되기도 합니다. 또 테이블을 남용한 홈페이지는 모든 테이블 셀(cell)의 내용을 읽어들일 때까지 이미 읽어드린 내용을 먼저 표시하지 못하기 때문에 웹 페이지 로딩(loading) 속도를 떨어뜨리는 원인도 됩니다.

이제 점점 더 많은 사이트들이 테이블을 사용하지 않고 CSS의 배치(layout) 기능을 이용하여 홈페이지를 재설계하고 있습니다. W3C, Web Standards Project, Mozilla, WebAIM와 같이 비영리 사이트나 개인 사이트가 아닌 상업적인 홈페이지도 얼마든지 CSS를 이용해 디자인을 바꿀 수 있다는 실제적인 증거가 곳곳에서 늘어나는 것 같습니다. 얼마 전에 미국 야후한국 야후, ABC News, Novell: Suse Linux, Chevrolet, Disney Store UK가 그 대열에 동참했고, ESPN, SitePoint, Max Design, RedHat, Wired News, Opera 등은 오래 전부터 테이블을 사용하지 않고 설계되어 있었습니다. 언제부터인지 모르겠지만 오늘 확인해보니 Flash홈페이지 저작 도구인 Dreamweaver 등으로 유명한 Macromedia사의 홈페이지가 테이블을 쓰지 않고 설계가 되어있군요. 매크로미디어사에서 나온 최근 제품들은 대부분 접근성을 고려한 기능이 상당히 정교하게 들어가 있습니다. 이미지 편집 도구인 Photoshop, PDF 문서를 만드는 Acrobat, 웹 에디터인 GoLive 등으로 알려진 Adobe사의 홈페이지도 오늘 확인해보니 완벽하진 않지만 테이블을 배제하고 CSS의 레이아웃 기능을 활용하여 디자인되어 있습니다.

개인적으로는 HTML이나 CSS 문법을 공부하는 것보다 웹 에디터의 메뉴와 기능을 익히는 것이 더 어렵게 느껴지더군요. 그래서 나모 웹 에디터는 정품을 사놓고 쓸 줄을 몰라 거의 쓰지 않고 있고, 드림위버는 아주 옛날에 회사에서 조금 써 본 것이 전부입니다. 그런데 웹 에디터를 만드는 회사의 홈페이지가 이제 테이블 없이 비교적 적법한 코드로 제작되었다는 것은 아주 반가운 소식입니다. 그 에디터를 사용해서 비슷하게 다른 사용자들도 테이블이 없는 페이지를 만들 수 있다는 것을 암시하기 때문입니다. 매크로미디어사의 홈페이지 (주)세중 나모 인터랙티브의 홈페이지 소스를 보니 정말 비교가 됩니다. 하나는 군더더기 없이 깔끔하게 그리고 구조적으로 디자인되어 있고, (그러나 100% 문법에 맞게 되지는 않았군요.), 다른 하나는 DTD 지정도 안 되어 있고, 무슨 유형인지도 모를 스크립트가 나와있고, 대체 텍스트도 없는 이미지와 복잡한 테이블로 채워져 있으니 말입니다. 아주 많은 사람들이 사용하는 웹 에디터 제품이 바뀌지 않으면, 우리 나라 홈페이지들은 계속 잘못된 관행에 따라 제작이 될 것입니다. 저작 도구의 접근성 문제가 정말 중요하다고 느껴집니다. 나모 웹 에디터도 다음 버전의 제품에서는 웹 표준과 웹 접근성에 대해 더 확실한 지원을 해줄 수 있기를 기대해봅니다.


참고로 나모 웹 에디터에도 브라우저 호환성과 HTML 문법 검사기가 있긴 하지만 그림에 꼭 넣어야 하는 대체 텍스트(alt 속성값)가 없는 것, DOCTYPE을 지정하지 않은 것 등도 모두 문법에 맞다고 나오는 등 이상하게 되어있습니다. 기본적으로 생성되는 코드도 문법에 맞는 HTML(Valid HTML)과는 상당히 거리가 있는 것이구요. 시각적인 방식, 흔히 WYSIWYG 방식의 웹 에디터를 사용해서 디자인을 하다보면 코드는 불필요한 표현 마크업들(예를 들면 font, br, table, b 등)로 가득차게 되고, 문법에 맞고, 접근성이 높은 사이트와는 멀어지기 쉽상입니다. 그러나 많은 사람들이 이런 직관적으로, 시각적으로 결과를 보면서 디자인할 수 있는 웹 에디터를 사용하고 있기 때문에, 이런 웹 에디터가 적법하고 접근성이 높은 코드를 생성하도록 지원해주는 것이 무척 중요합니다. 그러나 근본적으로 시각적인 것과 홈페이지의 논리적인 구조를 분리해서 생각하는 사고를 들이지 않으면, 시각적인 웹 에디터를 이용해 두 개를 한꺼번에 혼합해서 (주로 시각적인 표현 위주로, 먼저 테이블을 이용해 구역부터 나누어) 디자인하는 습관을 들여온 사람들에게는 테이블 없이, CSS 위주로 웹을 제작하는 것이 상당히 어색하고 어려울 수도 있을 것입니다. 따라서 구조를 먼저 HTML로 설계하고 나중에 그것의 시각적인 표현은 모두 CSS를 통해서 하도록 웹 디자인의 과정이 바뀌어야 할 것 같습니다. 이런 과정을 기존의 웹 에디터가 잘 지원해주려면 웹 에디터도 상당히 많이 바뀌어야겠지요.