가변폭 레이아웃 전략

최근 liquid 또는 elastic design 에 대한 관심들이 많아지고 있는데요,
개인적으로 liquid나 elastic design의 유용함을 인정하면서도 실제 현장에서 쓰기에는 힘들지 않나.. 하는 생각을 하고 있었습니다.

여러가지 이유가 있겠으나, 하나의 디자인으로 여러 종류의 디바이스 혹은 브라우저 크기에 맞춰 유동적으로 변하는게 그리 쉽지많은 않거든요. 아무리 빗겨흘리고 늘렸다 줄였다 해도 고정된 디자인의 한계를 벗어나기는 어렵더군요.

그런 생각을 하면서 요즘의 liquid, elastic 유행(?)에 한발 물러서 있던 차에…

오래간만에 ALA에 괜찮은 기법이 하나 소개되었습니다. liquid 또는 elastic 의 한계를 뛰어넘은, 가변폭에 맞춘 디자인 변경입니다.

간단하게 js 파일을 하나 추가함으로써 어떠한 환경에서도 보기 좋은 웹페이지를 만들어낼 수 있겠더군요. 물론 주의깊게 작성을 하긴 해야겠습니다만.

그동안 어떻게 CSS를 조작해서 가변폭 레이아웃을 만족스럽게 표현할까 고민했었는데 좋은 참고가 될 듯 해서 소개합니다.

샘플 1, 샘플 2 (모든 링크는 Shift+Click 으로 새창에서 뜹니다.)

liquid 디자인과 zoom 디자인을 넘어서 adaptive 레이아웃이라는 선언도 곱씹어볼만 한데다, 샘플 2에 Tab 디자인은 영감을 팍팍주는 인터페이스네요. 그동안 ALA에 올라오는 글들이 영양가가 좀 떨어지지 않나 싶었는데 이번엔 아주 Two Thumbs Up!입니다.