반응형 웹 [Responsive Web] "무엇에 반응하는 웹인가?"
반응형 웹(Responsive Web) 이란?
반응형 웹이란 HTML5의 “미디어 쿼리”를 이용하여 하나의 소스로 제작된 컨텐츠가 데스크탑에만 국한되지 않고 타블렛 PC, 모바일 폰 등 다양한 크기의 디바이스 환경에 맞추어 해상도나 화면이 동적으로 변환되는 기법을 말한다.
대표적인 예로 The Boston Globe 사이트를 보면 가로 길이에 따라 다음과 같이 레이아웃이 변화된다. 모바일 웹을 별도로 제작할 필요 없이 하나의 반응형 웹사이트로 사이즈에 맞춰 이미지나, 폰트, 사이즈 및 UI가 자동으로 변환되어 모든 디바이스에서 사이트를 이용할 수 있는 것이다.
반응형 웹이란 이야기가 심심치않게 나오고 있다. 이 이야기는 웹 접근성 이슈, 그리고 모바일 퍼스트(mobile first)라는 개발/비즈니스 이슈까지 한 데 물려 이야기되고 있다. 이에 대한 내용은 글의 처음 도입부에 인용한 Allje의 "진화하는 웹사이트: 반응형 웹"의 글에서 충분히 설명되고 있으므로 따로 설명은 생략하도록 하겠다. 여기서 살펴볼 것은 "무엇에 반응하는 웹인가?" 라는 문제 제기이다.
- 반응형 웹 적용 사례: 삼성증권 http://m.samsungpop.com/homepage/main.do
위 링크의 삼성 증권의 홈페이지를 들어가보면 모바일일 때의 웹 디자인과 PC 상태일 때의 웹 디자인이 다르다는 것을 알 수 있다. 꼭 굳이 멀리서 예를 찾을 필요는 없다. 국내 포털 사이트 중 최대 규모를 자랑하는 네이버 역시 웹과 모바일 두 가지 다른 디자인을 제공하고 있다. 좀 더 자세하게 나눈 곳은 스마트폰을 위한 디자인과 타블렛을 위한 디자인, 그리고 일반 PC 디자인이 서로 다른 경우도 있을 정도이다.
이렇듯 소비자들도 모르는 사이에 웹 환경은 "사용자가 어떤 기기를 통해 웹 사이트를 이용하는가?"에 맞춰 반응하는(Resonsive) 형태로 바뀌어 나가기 시작했다. 15인치 노트북에서 보는 화면과 4~5인치 스마트폰에서 보는 화면이 같다는 건 마치 브리타니아 백과사전의 모든 텍스트들을 명함에 밖아넣는 것과 같다. 따라서 양장본으로 만들어진 책에 쓰여질 내용의 디자인과, 명함에 쓰여질 내용의 디자인은 달라야만 한다. 언뜻 생각해보면 맞는말인 것 같지만, 조금만 달리 생각해보면 석연찮은 구석이 없잖아 있다.
명함에 백과사전이 쓰여질 이유가 있는가? 만약 그런 이유가 있다고 하더라도, 명함에 새겨질 내용이 백과사전의 그것과 같거나, 그 내용 비슷한 형태로 쓰여져야 하는가?
...(전략) 데스크탑용 디자인과 모바일용 디자인 사이에 어떠한 일관성이 있다면 그것은 데스크탑용 디자인이 모바일용 디자인에서 파생되거나 모바일용 디자인이 데스크탑용 디자인에서 파생되었기 때문이 아니라, 아래와 같이 동일한 디자인 가이드라인을 따랐기 때문이어야 한다. (후략)...
여기, 반응형 웹과 관련된 또다른 글을 통해 인용된 내용에 주목하자. 가만보면 반응형 웹이란 것이 대부분 기존의 PC를 위한 웹에서 출발해서 모바일 웹을 만들어 내거나, 또는 반대로 모바일 웹에서 출발하여 그 형태를 기반으로 PC 웹 디자인으로 확장된 경우가 많다. 위의 글은 이러한 방식에 대해 재고하고, 컨텐츠에서 기인한 디자인을 이야기하고 있다. 즉, 다시말해 위에서 이야기한 "사용자가 어떤 기기를 통해 웹 사이트를 이용하는가?"가 중요한 것이 아니라 "사용자가 어떤 기기를 통해 어떤 정보들에 접근하는가?"가 중요하다는 말이다.
다소 말장난같아 보일수도 있는 이 질문들은 사실 생각보다 중요한 의미를 가진다. 사용자가 어떤 기기를 통해 웹 사이트를 이용하는 것에 중점을 둔다면 현재와 같은 형식의 개발이 주를 이룰것이다. "모바일 이용자가 많으므로 모바일 웹부터 개발하고 이를 바탕으로 PC 웹 디자인을 만들자. 그리고 내용은 모바일이나 PC나 같게 제공하자."
반대로 사용자가 어떤 기기를 통해 어떤 정보들에 접근하는가를 살피면 다른 방식의 개발이 이루어진다. "사용자들이 모바일 웹에서는 주로 사진이나 짤막한 기사들을 자주 읽더라. 이를 바탕으로 모바일 웹에서는 기사 및 사진들을 피드 형식으로 제공하자. 반면에 PC를 통해서는 사용자들이 보다 다양한 정보들을 한 번에 비교해가며 확인한다, 사진을 보는 동시에 여러 블로그 들의 글을 번갈아가며 비교하는 등. PC에서는 그럼 좀 더 정보 구조 표현의 다양성이나 개인화에 대한 부분을 신경쓰자." 확연한 차이가 느껴지지 않는가?
"무엇에 반응하는 웹인가?"
지금까지 해 온 이야기를 종합하면 이 글의 맨 처음에 했던 질문에 다다를 수 있다. 무엇에 반응하는 웹인가? 단순히 화면 크기나 플랫폼에 반응하는 웹으로만 그칠 것인가, 맥락과 상황에 따른 사용자들의 컨텐츠 활용의 유동성을 파악하고, 그에 반응하는 웹이 될 것인가? 반응형 웹의 개념은 개발 이슈만으로 국한되기에는 너무나도 큰 함의를 지니고 있고, 거시적 시각에서의 접근이 동반되어야 한다. 이에 대한 보다 전문적이고 구체적인 논의를 인용하며 마치도록 하겠다.
...(전략) 따라서 올바른 접근은 "범용적인 디자인"을 먼저 한 후 시장 점유율이 높은 기기에 맞는(정확히 말하자면 시장 점유율이 높은 기기들이 가지고 있는 특성(features)에 맞는) 디자인을 추가하는 것이다.
즉, RWD를 통해 모든 기기에서 그럭저럭 작동하는 범용적 웹사이트를 "깔아놓은 후에", 시장 점유율이 높은 몇몇 기기에 대해 추가적인 지원을 고려하는 순서로 접근하는 것이다. 이 접근에서 RWD는 그 자체로 끝이 아니라, 기기별/상황별로 최적화된 사용자 경험을 제공하기 전에 선행되어야하는 안전망 혹은 출발점 같은 개념으로 보아야 한다. (후략)...
