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

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

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

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

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

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