CSS Layout

"CSS가 나오기 전에 사람들이 <table>을 사용해서 레이아웃을 만들기 시작한 것은 비극이다."

아마도 전체 웹사이트의 90% 이상이 화면 레이아웃에 <table>을 사용하고 있을 것이다. "가장 많이 사용되는 것이 맞는 것 아니겠느냐. 언어도 많이 사용하면 바뀌게 되는데..." 라고 생각한다면 여기서 말하려고 하는 것이 무엇인지를 한번쯤 고민해 주었으면 좋겠다.

레이아웃에 <table>을 사용하는 이유는 아마도 쉽기 때문일 것이다. 쉽다는 것 보다는 "익숙해서" 가 더 맞는 이유일지도 모른다. 대다수의 사람들은 처음부터 아주 당연하게 <table>을 사용해 왔고 그렇게 되어 있는 사이트를 더 많이 봤을 것이다. 속도나 성능을 중요시 하는 포털 사이트 조차도 <table>을 사용하고 있으니까. 나도 처음 html을 접했을때 <table>을 사용해서 레이아웃을 잡으면서 <table>을 사용하면 불가능한 layout이 없다는 것을 느끼고 굉장히 기뻐 했던 적이 있다. 마음대로 화면을 조정 하는 방법을 깨닳았을때 그 기쁨은 굉장한 것이었다. 하지만 CSS를 사용해도 그것이 가능하고 그것이 더 의미에 맞고 효율적이라는 것을 안 지금은 <table>을 이용한 레이아웃은 사용하지 않는다.

테이블 레이아웃을 사용하면

• 의미에 맞지 않다. <table>은 레이아웃을 만드는데 사용하는 태그가 아니라 표를 나타내는 태그이다.
• 코드의 길이가 길어진다. 이것은 상대적인 의미로 CSS 레이아웃에 비해서 길다는 말이다.
• <table>을 브라우져에서 표현을 할때에는 상당히 복잡한 너비와 높이 계산 알고리즘을 거치게 된다. 따라서 화면이 랜더링 되는데 시간이 많이 걸리게 된다.

의미에 맞지 않다는 것은 어떻게 보면 별로 중요하지 않게 느껴질 수도 있다. 하지만 웹표준에서 이것은 굉장히 중요한 것이고 의미에 맞는 마크업을 사용한다는 것은 그 문서가 오랜 시간이 지나도 생명력을 가질 수 있다는 의미이다.

코드의 길이가 길어진다는 것은 불필요한 <tr>이나 <td>가 많이 들어간다는 것이다 CSS를 사용하게 되면 의미 없는 행이나 열을 표기해 주지 않아도 되기 때문에 코드의 길이가 줄어들게 된다. 코드의 길이가 줄어들면 구축이나 운영에 들어가는 비용을 절감할 수 있고, 네트웍을 통해서 전송되어야 하는 양이 줄어들기 때문에 보다 적은 서버부하, 빠른 페이지 전송을 할 수 있다.

랜더링 시간은 컴퓨터가 고사양이 되면 의미가 약해 질 수는 있지만 이것도 익숙함의 문제이다. 이제까지는 대부분의 사이트가 table이어서 느리다는 것을 느끼지 못했겠지만 CSS 레이아웃을 사용하면 몸으로 체험 할 수 있을 정도로 화면 랜더링 속도가 개선 된다. <table>을 사용 한다고 하더라도 랜더링 속도를 개선 할 수는 있는데 바로 너비나 높이 계산 알고리즘을 간소화 하는 것이다. 이것은 CSS의 table-layout 속성을 이용하는 것이고 이것만 잘 사용해도 랜더링 속도는 비약적으로 향상된다.

그럼 CSS 레이아웃을 사용하려면 어떻게 해야 하는가? 이것 역시 단점이 있다.

• <table>을 이용해서 레이아웃을 만드는 것을 배운 만큼 CSS 레이아웃 만드는 것을 공부해야 한다.
• 전세계적으로 가장 많이 사용되는 IE6가 아직 CSS를 완전히 지원하지 않는다. 그래서 어떠한 레이아웃은 <table>을 이용하는 것이 더 제작이 쉽다.

이미 웹사이트를 만들 능력이 있는 사람이 새로운 기술을 위해서 교육을 받아야 한다는 것이 어떻게 보면 손실일 수도 있다. 이미 잘하고 있는데 방법을 바꾸는 것이라고 생각이 들 수도 있다. 이것은 개인적인 태도의 문제라고 본다. "보다 좋은 방법을 위해서 투자를 할 것이냐", 아니면 "다른 것에 투자를 할 것이냐" 의 문제이다. 회사도 마찬가지라고 본다. 회사에서 CSS 레이아웃을 사용하기로 하면 그에 따른 교육이 필요할 것이다.

CSS 레이아웃을 사용하기 위해서는 CSS가 제대로 지원이 되어야 한다. 너무나 당연한 말이다. 초기 브라우져들도 <table>을 나타내는 방법들이 달라서 이부분이 이슈였던 적이 있다. 지금은 거의 <table>을 비슷한 수준으로 지원하고 있어서 대다수의 사람들이 느끼지 못하는 것일 뿐이다. 웹 표준이나 CSS 레이아웃은 브라우져 이슈와 밀접한 관계가 있다. CSS가 지원이 안되면 CSS 레이아웃을 사용 못하고 그러면 어쩔 수 없이 기존의 table 레이아웃을 사용해야 한다. 이 때문에 많은 수의 웹표준에 관심을 가지고 있는 사람들이 이를 연구하고 문서들을 만들어 내고 있다. 아직은 IE가 가장 많이 사용되는 브라우져이기 때문에 마치 이 사람들은 anti-IE 같이 보이는 경향이 있다. 하지만 이 사람들은 Opera가 시장 점유율 98%였다면 anti-Opera가 되었을 것이다. 다시 말해서 이사람들은 anti-MS, anti-IE가 아니라 웹표준을 제대로 적용하지 못하는 주요 브라우저에 대한 불만을 토로하고 있는 것일 뿐이다. 이 archive 페이지들에서 나는 이러한 것들은 최대한 정리하고자 할 것이다.