noimage

Table 대신 div?

웹표준에 맞춘다는 것은 무조건 tabless를 주장하는 것이 아닙니다.
table을 써야 할 곳엔 table을 사용해야죠!

웹표준에 가까워 진다는 것은 table을 왕따시키고 div만 예뻐라 해주는 것이 아닙니다.
div만으로 코딩하는 것이 웹표준 인 것도 아니고요.

여느 디자이너와 마찬가지로 저도 table을 그냥 table로 쓰면 안되냐~? 라는 귀차니즘이 있었습니다.
caption이나 summary는 왜 달아야 하며 thead, tbody 같은 쓸데없는 태그들을 도대체 왜 쓰는 거냐~? 라는 의문을 항상 가지고 있었죠.
처음부터 제대로 된 교육을 받았거나 w3c를 제대로 보기만 했어도 이런 의문은 없었을 겁니다.

웹시장의 급성장으로 인해, 디자이너에겐 코드의 안쪽이 아닌 겉으로 보여지는 모습만이 중요시 여겨졌었고, 여전히 대부분은 그렇습니다. 급성장시기였던 90년대 말 웹디자인의 화두는 Grid system이었으며, 그것은 처음부터 완벽한 grid를 지닐 수 밖에 없는 table이 디자이너들의 위에 군림하게 되었죠.
정돈된 디자인을 위해선 Grid system이 빠질 수 없습니다.
다만 코딩에서의 grid가 아니라 디자인 개념에서 가상의 grid system이 적용되어야 하며, 그것이 코딩으로 넘어가는 시점에서는 float system으로 적용되어야 하겠죠.

제대로 된 디자이너라면, 자신이 하고 있는 작업에선 완벽함을 추구할 것 입니다. 여기서의 완벽함이란 디자인 퀄리티의 완벽함이라기 보다는 작업의 완성도에 대한 것입니다. 퀄리티의 완벽함에 도달 한다면 스타디자이너가 되겠지요^^.
완성도에 대한 완벽함이란, 네모를 네모나게 그리고 동그라미를 동그랗게 그리는 문제입니다.
네모를 의도 했는데 결과물엔 오각형이 그려져 있는 걸 용납하는 디자이너는 없겠죠?
검은색 네모를 의도 했는데 중간쯤에 LCD 데드픽셀처럼 빨간점이 띡 찍혀 있다거나 하는 걸 허용하는 디자이너도 없을테고요.
같은 관점으로 코딩을 봤을때, 깔끔하게 완료된 결과물과 줄맞춤 조차 되어 있지 않고 알수없는 인라인 스타일로 도배되어 있는 결과물을 비교하게 될 일이 생긴다면 자신의 능력에 대해 한탄하게 될지도 모릅니다.
게다가 일주일 전에 작업한 html의 td의 td의 td의 td안에 들어 있는 table의 rowspan을 고쳐야 할일이 생긴다면, 1년 쯤 전에 벽장안에 넣어둔 물건을 단 한번에 집어내는 것 만큼 어려울지도 몰라요.
물론 올바르게 data를 구성한 table을 그런식으로 고쳐야 할 일이 생긴다면 할말이 없겠지만, data table이 겹겹의 table로 구성될 일은 그리 많지 않을거예요.

웹표준에 관심을 갖는 사람들이 늘어나고 있으며 많진 않지만 적지 않은 국내 디자이너들 또한 조금씩 관심의 중심을 옮겨가고 있는 것 같습니다.
모든 디자이너 또는 개발자 혹은 기획자가 웹표준의 꼭대기에 자리잡고 앉기엔 아직 많은 시간이 필요합니다.
물론 그 시간의 중간엔 많은 시행착오들을 조금이라도 덜 겪어보고자, 혹은 이미 다른 사람이 겪은 결과물들을 대리체험하고자 수 많은 검색을 하고 인터넷의 글이나 책들을 읽겠지요.
별볼일 없지만 이 글도 그런 글 그룹의 끄트머리쯤에 위치한 글이 되길 바랍니다.
무작정 “div로 코딩하려면 어떻게 해야 하나요?” 라고 질문을 하는 분들에게 다시 한번 말하고 싶습니다.
table을 div로 대치하는 것이 웹표준에 가까워지는 작업의 시작은 될 수 있어도 절대 끝은 아니라는 사실을.

다 쓰고 보니 글이 두서가 안맞군요 =.=)
그냥 이해합시다;

  • 나이스!

  • 음… 잘모르겠어요. 맞는말같기는 해요. 지금은 먹통이지만, 사실 제가 한때(00년-02년) 취미삼아 알바삼아 웹디를 한답시고 이것저것 만들던 시기가 있었거든요. 그때 프레임과 테이블일색이던 지루한 국내홈페이지을 보며 자유스러운 풀플래쉬사이트를 추구하는 만용(?)을 부리다가 div를 적절하게 이용한 lockjaw.net 프로젝트로 Sigurd Mannsåker의 lawk.spring.2000을 보고 충격을 받은 나머지 그이후의 작업물들은 그야말로 div남발의 페이지들로 만들었었죠. 물론 캡션이나 서머리같은 개념은 희박했구요. (어쩌다가 생각나면 한두개의 주석정도?) 덕분에 div로 주로 사용해서 만들었던 사이트를 로딩속도문제로 다시 프레임과테이블로 고쳐야 할 경우가 있었는데 고치면서도 어디가 어딘인지 정말 알수가 없었죠. 즉 ‘처음부터 제대로 된 교육을 받았거나 w3c를 제대로 보기만 했어도 이런 의문은 없었을 겁니다.’과는 정반대되는 경우였는데, 요즘도 ‘처음부터 제대로 된 교육을 받지 않고 w3c의 존재조차 잘모르는 경우’는 비일비재할것 같아요. 표준준수에 의한 웹접근성 향상에 대해 긍정적인 태도를 지닌 디자이너,개발자,기획자와 클라이언트가 존재하려면 어느정도의 시간이 필요할런지…^^;

  • 저도 이제야 div를 어떻게 사용하는건지 어렴풋이 알 것 같습니다.. 앞으로 잘 활용해봐야죠..

  • jay

    좋은글입니다.
    저도 한가지 덧붙이자면 테이블을 div로 바꾼다기보단 제목적에 맞는 태그로 바꾼다는게 맞는 말이겠지요 🙂

  • 땡큐~

  • 지금 현재로선 시간에 관해서 누구도 장담할 수 없을 것 같아요
    신경 쓰는 사람이 점점 더 늘어다나 보면 언젠가는 다들 이쪽으로 들어와 있지 않을까? 라고 막연히 생각하고 있답니다.. T_T

  • 넵 ^^ 같이 공부 열심히 합시다~

  • 네~ 제 말이 그 말이예요~
    모 사이트에서 div로 코딩 어떻게 하는거예요~? 하는 질문이 꽤 자주 올라오는데 그때 마다 똑같은 답글 달다가 너무 지겨워서 이런 글까지 쓰게 됐어요 @_@ 으으~
    아직은 semantic web보다는 단순히 div로의 코딩으로 알고 있는 사람들이 너무 많은 것 같아요..

  • 내 홈페이지나 여기나 다 PDA 에서도 대게 잘보인다 🙂

    메뉴가 아래쪽으로 밀려서 나오긴 하지만… 오히려 그 덕에 내용 보는데는 훨씬 편해서!! 좋아좋아~! 꺄르르르

  • 으흐흐 신났구만 😀 이것도 PDA에서 쓴건가~?

  • 동치미

    일몰님의 글 처럼 왠지 포스가 느껴지는 글~~ ^^

  • 동치미

    일몰님의 글 처럼 왠지 포스가 느껴지는 글~~ ^^

  • 결국은, 웹표준이라는 것 자체에 얽매이기 보다는 웹접근성―장애인들을 비롯하여 모바일 기기, 프린터, 음성 브라우저 등의 다양한 장치에 이르는―을 보장하는 쪽으로 이야기를 해야 할 것입니다.

    레이아웃에 테이블을 쓰지 말자는 것도 결국은 그런 접근성 때문에 그런 것이고, 원래 목적에 맞는 태그들을 쓰자는 것도 다 그 때문이니까요. (디자인을 CSS로 분리한다는 것도 각 장치별로 다른 스타일시트를 줄 수 있도록 설계되어 있기 때문입니다. XHTML을 여러 개 만들 필요가 없는 거죠. 이미 프로그래밍 분야에서 XML이 데이터 구조를 담는 용도로 사용되고 하나의 형식을 다양한 프로그램이 제각각의 방식으로 처리·표현하고 있다는 게 그 예라고 할 수 있지요. 웹에서는 이것이 프로그래머들에게만 적용되지 않고 모든 일반인들에게 적용된다는 점이 다릅니다.)

    하지만, 저도 가끔은 테이블을 쓰고 싶은 유혹이 느껴질 때가 있군요. ㅠㅠ (특히 form 관련 작업할 때..) 테이블을 쓰더라도 최대한 본디 의미를 살릴 수 있는 방향으로 갔으면 좋겠습니다.

  • 결국은, 웹표준이라는 것 자체에 얽매이기 보다는 웹접근성―장애인들을 비롯하여 모바일 기기, 프린터, 음성 브라우저 등의 다양한 장치에 이르는―을 보장하는 쪽으로 이야기를 해야 할 것입니다.

    레이아웃에 테이블을 쓰지 말자는 것도 결국은 그런 접근성 때문에 그런 것이고, 원래 목적에 맞는 태그들을 쓰자는 것도 다 그 때문이니까요. (디자인을 CSS로 분리한다는 것도 각 장치별로 다른 스타일시트를 줄 수 있도록 설계되어 있기 때문입니다. XHTML을 여러 개 만들 필요가 없는 거죠. 이미 프로그래밍 분야에서 XML이 데이터 구조를 담는 용도로 사용되고 하나의 형식을 다양한 프로그램이 제각각의 방식으로 처리·표현하고 있다는 게 그 예라고 할 수 있지요. 웹에서는 이것이 프로그래머들에게만 적용되지 않고 모든 일반인들에게 적용된다는 점이 다릅니다.)

    하지만, 저도 가끔은 테이블을 쓰고 싶은 유혹이 느껴질 때가 있군요. ㅠㅠ (특히 form 관련 작업할 때..) 테이블을 쓰더라도 최대한 본디 의미를 살릴 수 있는 방향으로 갔으면 좋겠습니다.

  • 기분 나쁠 때 쓰면 포스가 느껴지게 되는걸까 ? ㅋㅋ

  • 기분 나쁠 때 쓰면 포스가 느껴지게 되는걸까 ? ㅋㅋ

  • 이미 웹표준에 발을 담그고 있는 사람들은 접근성에 대해서도 잘 알고 웹 표준이라는 것 자체에 대해서도 잘 이해하고 있다고 생각합니다.
    이 글을 그냥 일반인(일반인의 기준이 모호하긴 하지만)을 대상으로 적어본 것이었구요
    그리고 당장은 일반인에게 접근성에 대해서 논해봤자 “내 블로그에 장애인이 올 일이 뭐가 있어” 혹은 자기 자신이 컴퓨터에 탑재된 웹브라우저외의 device에서 접근해 보지 않았기 때문에 필요없다고 느낄 거라고 생각합니다. 원래 자기 혼자라도 잘 쓰고 있는 것들에 대해서는 문제를 잘 못 느끼잖아요.
    제가 쓴 글의 대상은 아무것도 모른채 “무조건 div다!”라고 생각하고 있는 사람들이겠습니다.
    daybreaker님 말씀대로 table로 본래의 의도대로 쓰여야 하겠고, 웹표준이란 것도 당연히 목적에 맞는 엘리먼트로구성된 문서가 되어야 하겠죠 ^^

  • 이미 웹표준에 발을 담그고 있는 사람들은 접근성에 대해서도 잘 알고 웹 표준이라는 것 자체에 대해서도 잘 이해하고 있다고 생각합니다.
    이 글을 그냥 일반인(일반인의 기준이 모호하긴 하지만)을 대상으로 적어본 것이었구요
    그리고 당장은 일반인에게 접근성에 대해서 논해봤자 “내 블로그에 장애인이 올 일이 뭐가 있어” 혹은 자기 자신이 컴퓨터에 탑재된 웹브라우저외의 device에서 접근해 보지 않았기 때문에 필요없다고 느낄 거라고 생각합니다. 원래 자기 혼자라도 잘 쓰고 있는 것들에 대해서는 문제를 잘 못 느끼잖아요.
    제가 쓴 글의 대상은 아무것도 모른채 “무조건 div다!”라고 생각하고 있는 사람들이겠습니다.
    daybreaker님 말씀대로 table로 본래의 의도대로 쓰여야 하겠고, 웹표준이란 것도 당연히 목적에 맞는 엘리먼트로구성된 문서가 되어야 하겠죠 ^^

  • 동치미

    왠지 기운이 느껴진다.

  • 동치미

    왠지 기운이 느껴진다.

  • ㅡ.ㅡ 머래~ 잘꺼야!

  • ㅡ.ㅡ 머래~ 잘꺼야!

  • CN

    한국에서 web 2.0은 유니코드와 구조적인 xhtml 문서가 대중화 되기전에는 요원해 보입니다.

  • CN

    한국에서 web 2.0은 유니코드와 구조적인 xhtml 문서가 대중화 되기전에는 요원해 보입니다.

  • 기존에 있는 것들은 새롭게 만들지 않는 이상 (기업의 경우) 힘들 것이라는 생각이고..
    새롭게 만들어 나가는 것들에 발빠르게 적용해 가야 할텐데, 아직 실무자들 조차 생각이 박혀 있지 않으니까.. 시간이 많이 필요하겠죠

  • 기존에 있는 것들은 새롭게 만들지 않는 이상 (기업의 경우) 힘들 것이라는 생각이고..
    새롭게 만들어 나가는 것들에 발빠르게 적용해 가야 할텐데, 아직 실무자들 조차 생각이 박혀 있지 않으니까.. 시간이 많이 필요하겠죠