in 웹 디자인

웹디자인 이슈 : Liquid vs. Fixed

국내의 많은 웹페이지들은 고정된 넓이값을 가지고 있다. 아무래도 웹디자인의 편리성이 이유일 것이다.

이러한 고정된 넓이값의 웹페이지들은 1024×768의 모니터 해상도가 90%를 육박하는 국내 웹 현실에서는 그다지 문제되지 않을 수 있다. 하지만, 올해초 W3CShool 통계에 의하면, 아직도 800×600의 해상도가 29%를 차지하는 미국에서는 꽤 큰 문제가 발생할 것이다.

단적으로 나는 노트북과 데스크탑에서 1280×1024 해상도를 사용한다. 대부분의 국내 웹사이트들이 1024×768의 해상도를 기준으로 제작되었기에 그다지 웹서핑에 문제가 없지만, 한쪽엔 내용들이 잔뜩 모여있고 다른 한쪽엔 여백들만 횡하게 있는, 800×600 해상도를 기준으로 제작된 해외 사이트를 방문하다보면 여간 불편한 게 아니다.

사실, 기존에 사용하던 내 블로그 테마를 수정하게 된 이유 중에 하나가 바로 800×600을 기준으로 레이아웃을 짠 블릭스 테마가 너무 횡한 느낌이었기 때문이다.

솔직히 고정된 넓이값에 비해 유동적인 넓이값으로 웹페이지를 제작하다보면, 웹디자인 측면에서 여러가지 제약이 생길 수 밖에 없다. 특히 1픽셀의 아름다움(?)을 강조하는 국내 웹사이트들에게서 유동적 size는 먼나라 이야기일 수도 있다.

물론 아직 모든 수정을 완료하진 못했지만, 이번에 고정된 넓이값의 CSS를 유동적 넓이값으로 수정하면서 많은 것을 느꼈다. 특히, 디자인적인 문제들은 기존의 테이블 기반의 레이아웃과 정반대로 사고함으로써 어느정도 해결할 수 있다는 것을 알게 됐다.

웹시안 작업을 하면서 사용하는 포토샵과 일러스트레이터과 애니메이션이나 네비게이션을 제작할 때 사용하는 플래시의 공통점은 무엇인가? 바로, 레이어 개념이다.

퍼즐 맞추기와 같은 테이블 기반 레이아웃의 사고를 탈피해서 포토샵, 일러스트레이터, 플래시에서 작업할 때처럼 CSS를 기반으로 레이어로 웹페이지의 레이아웃을 짜는 것이다. (말이 조금 복잡하넹)

유동형 레이아웃을 처음으로 시도해본 나이지만, 웹페이지는 사용자 측면에서의 디자인되어야 한다고 생각한다. 이미 RSS를 통하여 웹사이트를 굳이 방문하지 않아도 컨텐츠들을 구독할 수 있다. 또한 파이어폭스에서는 사용자 정의 CSS를 통하여 기존의 웹사이트를 전혀 다른 모습으로 볼 수 있다. 조만간 웹페이지의 디자인에 대한 개념이 바껴질 때(Web2)가 올 것이다.

더 많은 유동적인, 고정된 웹페이지 레이아웃에 대한 논의들은 Fixed Fashion by Jeremy Keith, Liquid vs. Fixed by Garrett Dimon, More on Fixed Widths by Richard Rutter, Arguments For Flexible Webpage Layouts by Mike Davies를 통해서 확인할 수 있다.

댓글 남기기

  1. 절대 맞습니다. 물론 말도 안되는 적은 숫자의 NONE IE 유저들이지만 그래도 그분들 마져 고려한 사이트라면 더할나위 없겠네요 많은 분들께서 바라고 계시는 일일겁니다.

  2. 크크..
    제가 항상 느끼는 점이예요..
    저희 회사가 언론사라서.. 컨펌라인이 굉장히 까다롭거든요..
    디자인 컨펌할때도 어찌나 섬세하신지;
    유동적이진 않더라도 IE와 FF, NN등에서 적당하게 보이면 좋을텐데 IE에서만 완전 고정된 형태로 서비스 되고 있거든요
    예를 들어 블럭간의 간격등은 조금은 유동적이어도 될텐데..
    어찌나 1px에 민감하신지..흑..

  3. 일몰님/ 웹브라우저의 독과점이 해소되는 그날이 언젠가 오겠죠~ 그날를 기다리기 보단, 앞당기는데 노력하렵니다. ㅎㅎ

    쿠키님/ 웹디자이너들이 자신이 만든 레이아웃의 1px만큼, 웹페이지를 방문하는 사용자들의 각각 다른 해상도 1%를 이해할 필요가 있겠죠~

    결국, 웹페이지는 사용자 입장에서 어떻게 보이느냐가 중요할 것 같습니다. 웹브라우저나, 모니터 해상도에 신경써야 겠죠.

  4. 김중태문화원 블로그에 남기신 코멘트를 보고 찾아왔습니다. 마침 최근 며칠 동안 제 웹사이트의 너비를 % 기준으로 바꾸고 있습니다. Google Maps에서 감동을 받고 바꾸기 시작했죠.