반응형 웹디자인 시도방법

October 06, 2011 06:31 AM

방탄웹 등으로 잘 알려진 덴 씨더홈이 자신의 블로그에 자원이 부족한 상황에서 반응형 웹디자인을 어떻게 적용할 수 있었는지에 대해 소개하였습니다.

모바일 우선 전략(mobile first)이나 반응형 웹디자인(responsive web design) 모두 매력적인 것은 분명하지만 이를 막상 적용하려면 어디서부터 시작해야 할지, 궁극적으로 어떠한 이점을 취할 수 있을지 난감한 것이 사실입니다. 콘텐츠 전략도 수립해야하고 서버측 구현도 신경써야하고 테스트 할 다양한 단말도 선정해야 하고 할일이 많습니다. 이 모든 문제를 해결하기위해서는 많은 자윈이 필요하게되고 시간도 많이 소요되게 됩니다. 결국 시작도 못하고 지치게 될 수도 있습니다.

그렇다고 모바일 버전을 따로 만드는 것은 일을 덜기보다는 일을 더 힘들게 만들 수 있습니다. 모든 페이지를 한벌씩 더 만들어야 하고 유지운영을 할 때에도 두배씩 노력이 들어갈 것입니다. 반응형 웹디자인 개념을 최대한 살려서 새롭게 디자인 하는 것이 가장 확실하겠지만 제한된 자원을 가지고는 하기가 힘든 일입니다.

그래서 덴 씨더홈이 선택한 방법은 동일한 콘텐츠, 다시 말해서 같은 HTML을 유지하면서 CSS 미디어쿼리만을 이용해서 미디어쿼리가 지원되는 단말기에서만 유동적인 레이아웃을 보여주게끔 한 것입니다. 사실 반응형 웹디자인이 갑자기 확장되어서 복잡해진 것이지 덴 씨더홈이 선택한 방법은 처음 반응형 웹디자인 개념이 나올때의 바로 그 방법입니다. 역시 기본이 중요하다(back to the basic)는 말이 실감이 됩니다.

그렇다고 반쪽짜리 결과물이 나온 것이냐 하면 그렇지도 않습니다. 동일한 콘텐츠라고 하니 그냥 두면 될 것 같지만 실제로 콘텐츠를 그냥 두기는 쉽지 않습니다. 콘텐츠들간의 우선순위, 광고영역, 생략할 필요가 있는 콘텐츠, 페이지 나눔, 콘텐츠 포맷 변경 등 레이아웃 말고도 고민해야 할 것이 아주 많습니다. 그리고 이런 시도로 이러한 고민들을 테스트 해볼 수 있겠지요.

웹표준 처음 적용해 볼 때에도 헤딩이나 큼직한 레이아웃에만 CSS를 적용해 봤던 것이 생각이 납니다. 반응형 웹디자인도 점진적(progressive)인 적용을 고민해 봐야 겠습니다.

Comments

  • 황규연 2011-10-06 11:10

    마지막에 말씀하신 점진적(?)인 적용을 수행하고 있는 프로젝트에서 해보는중이지만 만만치 않은 작업인것 같습니다.
    규모가 있는 경우 사전에 일어날 수 있는 이슈에 대해서 대비를 해보았지만 막상 진행중에 여러 이슈사항이 생겨서 덕분에 많이 배울 수 있었습니다.
    현실적으로 어렵지만 반응형 웹디자인의 가능성을 가늠할 수 있는 프로젝트였습니다.

  • 이상승 2011-10-15 21:10

    안녕하세요. 웹표준과 반응형 웹디자인에 관한 글 잘 읽고 있습니다. 반응형 웹디자인에 대해 궁금한 점이 있어요. 물론 다양한 레퍼런스들을 추리고 정리하고 있지만, 간질맛나기만 했어요. 머리아프다가 마이어의 책을 읽고 적용해보니 참... 간단하네요. ㅡ.ㅡ;;
    업무 관련 홈페이지를 반응형으로 커스터마이징 하려고 하는데, 이미지와 폰트, 기타 여러가지 CSS를 수정해야 해야하지요? ... wordpress 기반이라 작업이 만만치 않네요. 스크린에 보여지는 플러그인의 css도 하나하나 찾아가면서 다 바꿔야 하는데... 이런 거 한방에 변환시켜주는 css가 스크립트는 없을까요? 이를테면 px 값은 적절한 값의 em이나 %로 바꿔주는 모 이런거요. ^^; 답변 부탁드립니다. :)

  • 신현석 2011-10-15 23:10

    값을 자동으로 변환해 주는 스크립트는 아직 본적이 없습니다. 제가 워드프레스를 안써봐서 어떤 환경인지 잘 모르겠네요.

  • 이상승 2011-10-17 18:10

    네 ^^; 노가다를 강행해야 겠네요 ㅎㅎ;;

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.