기고 | 왜 반응형 웹 디자인인가

여러 웹 디자인 기법들이 등장해 유행하곤 했다. 비동기형 자바스크립트(Asynchronous Javascript)와 XML을 기억하는가? 2006년과 2007년, 수 개월 동안에는 에이잭스(Ajax)가 크게 유행했었다. 최근에는 또 하나의 웹 개발 패러다임이 등장했고 이번에는 좀 더 강력하다. 바로 반응형(Responsive) 웹 디자인이다.

반응형 웹 디자인과 개발 원리 덕분에 화면 크기에 상관 없이 모든 기기에서 웹 사이트를 확인할 수 있게 됐으며 사용 경험도 한층 개선됐다.

중요한 것은 사용자들이 이제 4인치 모바일 스마트폰 화면, 7인치 미니 태블릿 화면, 풀 사이즈의 10인치 태블릿 기기, 노트북 화면, 심지어 대화면 4H HDTV에서도 웹 사이트 경험을 소비하고 싶어한다는 사실이다. 반응형이라는 명칭의 이유는 콘텐츠를 소비하는 기기와 브라우저의 특성을 지속적으로 고려하기 때문이다.

반응형 웹 디자인은 그리드(Grid)를 유연하게 사용한다. 따라서 개발자들은 경험을 어떻게 확장할지 뿐만이 아니라 유연한 이미지, 포맷, 콘테이너(Container)를 정의할 수 있다. 또한 개발자가 페이지 엘리먼트(Element)를 배치하고 크기를 결정할 때, 202픽셀 등의 확정적인 구체적 치수 대신에 2.5단위 폭 등의 상대적인 크기를 규정하게 된다. 이는 개발자 마음가짐의 변화를 의미하기도 한다.

페이지 상의 엘리먼트와 그 콘테이너에 대해 상대적인 치수를 사용함으로써 페이지의 기본 디자인과 사용성을 유지하면서 브라우저 크기에 따라 확장 및 축소가 가능하다. 즉, 사이트가 이런 변화에 반응적일 수 있게 되는 것이다. 페이지는 작은 창에 맞지 않는 엘리먼트들을 세련되게 제거할 수도 있고 추후에 브라우저를 확대되거나 축소할 때 이것들을 다시 되살릴 수 있다.

아직 반응형 웹 디자인에 관해 관심이 없더라도 결국 이에 노출될 수 가능성이 크다. 심지어 웹 업계의 게이트키퍼(Gatekeeper)라 할 수 있는 구글도 반응형 웹 디자인을 수용하게 되었다.

구글 웹마스터 가이드에는 다음과 같이 기술돼 있다. "구글은 웹마스터(Webmaster)들에게 모든 기기에 대하여 동일한 HTML을 적용하고 각 기기에서의 표시를 결정하기 위해 오직 CSS 미디어 쿼리만 사용하는 등 반응형 웹 디자인의 업계 내 모범사례를 따르도록 권고하고 있다."

오늘은 반응형 웹 디자인에 관해 알아야 할 것 그리고 이것이 현재의 환경과 어떻게 합쳐지는지에 관해 알아본다.

사용자들은 우수한 모바일 브라우징 경험을 요구하고 있다
PC의 인기가 식어가고 있다. 점차 많은 광고 소비자들이 전통적인 폭 해상도를 지원하지 않는 기기를 사용하고 있다. 그들은 우선 자신의 휴대폰에서 최고의 경험을 원하고 있으며, 데스크톱은 2순위로 밀려났다.

반응형 웹 디자인과 이에 수반되는 개발은 비공식적으로 "모바일 우선주의"라고도 불리고 있다. 이는 오늘날 다수의 웹 사이트 트래픽이 모바일 기기에서 발생하고 있음을 나타낸다. 개발자들은 이제 더 이상 자신의 사이트가 풀 스크린 데스크톱 PC에서 사용되고 있다고 가정해도 되는 상황이 아니다.

그러나 냉정히 말해서, 모바일 웹 사이트 분야의 현재는 꽤 우울하다. 예를 들어, 휴대폰으로 항공사 웹 사이트를 방문한 적이 있는가? 분명 꽤나 불만스러운 경험이었을 것이다. 기능이 대폭 축소된 사이트에서 비행편의 상태와 자신의 항공편 정도를 확인하는 등 1~2가지 정도는 가능하다. 그러나 티켓을 예약하거나 단골 고객 마일리지 잔액을 확인하는 등은 본래의 사이트를 방문했어야 할 것이다. 본래의 사이트를 불러오려면 수십 초 이상이 소요된다.

이것은 분명 모바일 우선적 경험이 아니다. 항공사 웹 사이트야 말로 모바일 우선 디자인에 가장 적합한 사이트임에도 그렇다. 공항에서는 전원이 켜지고 로그인 된 노트북을 들고 다니는 것은 아니다. 기본적으로 모바일 사이트에서 보딩 패스(Boarding Pass)를 받고, 항공편을 다시 예약하며 대기목록 또는 업그레이드 목록을 확인하면 안 되는 이유라도 있을까? 그럼에도 항공사 웹 사이트는 집에 있는 사람을 위해 개발되어 있는 경우가 많다. 반응형 웹 디자인 패러다임 하에서는 이런 상황이 바뀔 것이다.

사용자들은 제대로 된 콘텐츠를 원한다
더 많은 웹 사이트들이 셀룰러 연결을 통해 이동 중에도 접속할 수 있도록 바뀌고 있다. 이에 따라 더 느리거나 더 느린 레이턴시(Latency) 상황의 연결을 통할 때도 빨리 이용할 수 있도록 하는 것이 중요해지고 있다. 심지어 페이지가 완전히 로드(Load)되지 않은 상황에서도 그렇다.

이를 위해서는 서버 측 구성요소 구축이 필요하기도 한다. 사용자가 어떤 기기를 통해 콘텐츠를 소비하고 있는지 파악하고 포괄적인 기기 정보 데이터베이스에 접속해 적절한 콘텐츠와 클라리언트측의 제어기능(자바스크립트(JavaScript) 등)을 제공해야 하기 때문이다.

반응형 웹 디자인의 경우, 미디어 쿼리가 브라우저의 폭 등 사용자가 사용하고 있는 기기의 특성을 전송하기 위해 사용되고 있다. 서버는 다양한 CSS 스타일 규칙을 제공해 가능한 최고의 사이트 경험을 얻을 수 있도록 지원한다.

하지만 이는 머지 않아 대가가 따르는 상황으로 확대될 가능성이 크다. 우선, 기기 데이터베이스는 항상 바뀔 것이다. A라는 휴대폰에서 이 코드 버전을 불러오고 이 CSS 버전을 전송하지만 B라는 태블릿에서는 특정 버전의 코드를 전송하라는 등 이상한 점들이 한 두 가지가 아닐 것이다. 이런 데이터베이스의 구축과 유지에는 시간이 소요될 것이며 많은 전문가들이 필요할 것이다.

이러한 반응형 웹 디자인 컨셉트 부분은 중소기업들이 접근하기에는 무리가 있을 것이다. 대신에 이런 기업들은 기기를 쿼리 처리하고 어떤 HTML과 CSS 기능이 동작하는지에 관한 지능적인 기능을 구성할 수 있는 j쿼리 모바일(jQuery Mobile) 같은 프레임워크(Framework)를 활용할 수 있을 것이다. 이는 아마도 반응형 웹 디자인 패러다임의 혁신 중에서 가장 활발한 영역일 것이다.

웹 광고 기술에는 아직 반응형 웹 디자인이 적용되지 않고 있다
광고를 배치하는 웹 사이트의 개발자들이 갖고 있는 가장 보편적인 과제는 광고를 어떻게 확대하느냐이다. 일반적으로 배너(Banner) 광고는 폭이 결정되어 있으며 축소 또는 품질 저하가 어렵다. 이런 광고는 단순히 특정 폭으로 동작하며 폭이 감소하면 기능을 멈춘다.

이는 분명 사이트 운영자의 수익에 영향을 끼친다. 소중한 페이지뷰와 클릭으로 수익을 창출할 수 없는데, 어떻게 모바일 우선 경험을 위한 디자인을 강화할 수 있을까? 즉 이로 인해 광고 기업들은 광고가 반응형 웹 디자인 기법에 호환되도록 하는 기술을 개발하고 제공하게 될 것이다.

디자이너 팀을 이끌고 있거나 자신이 웹 개발자라면 반응형 웹 디자인이 중요하다는 것을 알아야 한다. 여기에 익숙해지고 그 기법을 배워야 한다. 업계가 반응형 웹 디자인으로 이동하고 있다는 명백한 사실을 간과해서 안된다.

* Jonathan Hassell은 컨설팅 기업 82벤처의 대표다.