반응형 웹디자인(responsive web design)
web | 2011-02-05
XX에 최적화라는 말은 YY 또는 ZZ에서는 문제가 발생할 수도 있다는 위험을 내포하고 있다. 모바일에 최적화된 웹사이트라는 말도 크게 다르지 않다. 더군다나 모바일 최적화라는 말을 아이폰 최적화, 또는 몇몇 단말기에 탑재된 안드로이드 브라우저 최적화라는 말로 사용하는 현실에서는 이런 위험성이 더 크다.
내가 최근에 실무에서 접해본 가장 작은 화면 크기는 180픽셀이었다. 우리나라에서도 현재 화면폭이 240픽셀인 휴대폰으로 웹사이트를 사용하고 있다. 실제로 이렇게 작은 화면을 가진 휴대폰을 사용해 보면 우리가 보통 모바일에 '최적화'되었다고 얘기하는 많은 모바일 전용 페이지들이 말처럼 최적화되지 않았다는 것을 알 수 있다. 모바일이라는 환경은 우리가 생각하는 것 이상으로 다양하다. '최적화'라는 접근 방법으로는 그 다양성을 만족시킬 수 없다.
이런 문제를 해결하기위한 시도는 과거에도 계속 있었다. 그 시도들이 쌓여서 새로운 개념으로 재탄생하게 되었는데 바로 반응형 웹디자인(responsive web design)이라는 개념이다. 화면 너비에 따라 유동적으로 변하는 유동형 레이아웃(fluid layout)과 유연한 이미지(flexible image), 그리고 미디어 쿼리(media queries)가 어우러져서 특정 환경에 '최적화'된 방법이 아니라 환경에 반응하여 스스로 적응하는 방법이다.
반응형 웹디자인 개념이 나오기 이전에도 비슷한 시도들이 많이 있었다. 하지만 너무 넓은 화면이나 좁은 화면에서는 한계가 있을 수 밖에 없었고 정말로 원하는 디자인을 적용하기는 쉽지가 않았다. 하지만 미디어 쿼리의 등장으로 이런 고민이 해결되었다. 반응형 웹디자인을 적용한 웹사이트들을 살펴보면 보다 쉽게 이해할 수 있다(인터넷 익스플로러는 IE9부터 미디어 쿼리를 지원하기 때문에 오페라나 파이어폭스와 같은 브라우저를 사용해야 한다. IE에서도 적용하는 방법은 차후에 다뤄볼 예정이다.). 브라우저 창의 크기를 바꿔가면서 웹사이트가 어떻게 반응하는지를 살펴보면 된다.
'예산이 충분'하다면 아이폰용 사이트도 만들고 아이패드용 사이트도 만들고 갤럭시 탭용 사이트도 만들고 여러벌 만들 수 있는대로 만드는 것도 좋다. 하지만 이런 접근 방법은 만들어진 이후 유지 비용도 고려해야 하고 새로운 단말기가 나올 때 마다 기민하게 대응해야 하는 방법이라는 것을 유념해야 한다. 물론 할 수 있고 실제로 하는 기업도 있다. 하지만 대부분의 경우에는 이렇게 계속적인 투자를 하기가 쉽지 않을 것이다.
모바일 환경에 대응한다고 아이폰용 사이트 하나 만들고 손터는 에이전시가 많다. 단말기도 없는 상황에서 모바일 페이지를 테스트하겠다고 덤비는 사람도 있다. 그동안 방법을 몰랐다면 이 반응형 웹디자인을 살펴보는 것이 도움이 많이 될 수 있을 것이다. 지금은 핸드폰 몇종에 태블릿 두어개 나왔지만 앞으로는 정말 다양한 환경을 고려해야 한다. 실제로 이미 TV도 나왔다.
Comments
유용한 정보 잘 읽고 갑니다^^
저도 요즘에 관심이 많아지고 있는데 확실히 아직까지는 가장 이상적인 해결방법이 아닌가 싶은데요. 다만 저렇게 나오려면 디자인쪽하고는 협업이 중요할것같고, 저런 기술에 대해서도 디자인쪽에 제시를 해주고 기술부분에 대한 부분도 조언을 해주면 좋지 않을까 싶습니다.
잘읽었어요 ^^
한번 만들어 봤었는데... 말씀하신 IE 덕분에 아직은 쉽지 않은 기술이지 싶어요.
오오! 멋진 개념이군요! ^^
유동적 레이아웃에 대한 부분은 잘 알고 있었지만 반응형 웹디자인이라..정말 좋은 개념이네요. ie문제등으로 실질적인 상용시기가 언제가 되든 웹디자인으로써 궁극적으로 가야할 개념인듯 보입니다.
반응형웹디자인!! ㅎ 해외사이트에서 responsive web design을 보고 한국말로 머라고 부를지 몰랐는데 반응형웹디자인이라고 부르는군요. 감사합니다.
저도 번역된 것을 찾다가 못찾아서 고민해서 만든 말입니다. 더 좋은 표현있으면 추천해 주세요.
반응형이라는 말이 가장 적합해 보이는데요. 잘 선택 하셨네요. 트랙백 뿅! ^^
"반응형웹디자인" 강추
마이크로소프트도 브라우저 업데이트의 간격을 줄이고 자동 업데이트를 탑재한 이상 먼 이야기가 아닐 것 같습니다. 좋은글 잘 봤습니다!
이런게 있네요. http://twitter.github.com/bootstrap/
유동형 레이아웃(fluid layout)과 유연한 이미지(flexible image), 그리고 미디어 쿼리(media queries) 를 사용해야 하기에 IE9.0부터 볼 수 있다고 말씀하는데요.. 미디어쿼리 대신 자바스크립트를 사용한다면 ie6.0에서도 사용할 수 있잖아요. 1. 왜 자바스크립트로 하라는 말은 없을까요?? 2. jQuery로는 꽤 하던데 이건 또 무슨 이유 일까요?
IE9 부터 볼 수 있다는 말은 해당 사이트의 예제들이 그렇다는 말이고요. 자바스크립트로 이러한 문제를 해결하려는 시도는 매우 많은 것으로 알고 있습니다. 제가 본 것은 Respond.js(https://github.com/scottjehl/Respond)가 있습니다. 자바스크립트를 사용한 도구들을 몇가지 보면 미디어쿼리 구문을 도구에서 지원하는 구문으로 써줘야 하는 문제가 있었습니다. 그리고 아무래도 미디어쿼리 보다는 성능 문제가 있더군요. 자바스크립트 도구들을 잘 비교해보고 가장 적절한 것을 선택해서 사용해보는 것도 좋을 것 같습니다.
처음 들어본 말이었는데, 유익한 정보였습니다.
이제는 모바일을 기준으로 코딩해야 하는 시대가 됐네요.