반응형 웹, 정말 효과적일까?

제가 웹 개발을 시작하고 느낀 점 중의 하나가 세상에 이렇게 많은 모바일 기기가 있었나 하는 것인데요. 아무래도 사용자들이 휴대전화나 태블릿을 PC보다 많이 사용하다 보니 다양한 환경에서 웹페이지가 잘 돌아가는지 테스트하고 오류에 대응하는 일이 큰일이 되었습니다.

이때 빼놓을 수 없는 개념이 ‘반응형 웹(Responsive Web)’입니다. 해상도의 변화, 즉 화면 크기에 따라 레이아웃이 조절되는 웹페이지를 말합니다. 사용자의 입장에서는 어느 기기에서든 같은 콘텐츠를 적절한 화면으로 볼 수 있고, 개발자 입장에서는 기기마다 따로 웹페이지를 개발하지 않아도 되므로 비용을 절감할 수 있습니다. 이런 이유로 반응형 웹은 2010년  ‘A List Apart’라는 웹디자이너 매거진에 처음 소개된 이래로 큰 인기를 얻고 있습니다. (‘2016 꼭 알아야 할 웹 디자인 트렌드’에 나온 반응형 웹 보러가기)

하루가 멀다 하고 모바일 기기들이 쏟아져 나오는 상황에서 반응형 웹은 분명히 많은 어려움을 해결해 줍니다. 하지만 반응형 웹이 인기만큼 큰 효과를 가져다줄 수 있는지는 좀 더 생각해봐야 합니다. 왜 그럴까요? 반응형 웹이면 모바일 대응 끝, 아닌가요?

반응형 웹의 약점

로딩 시간이 길어진다

웹 페이지의 스타일을 결정하는 CSS는 표현의 한계를 가졌던 이전 버전과는 달리 CSS3가 되면서 다양한 표현이 가능해졌습니다. 특히 미디어와 화면 해상도의 정확한 구분이 가능해지면서 기기 각각의 조건에 맞는 스타일을 적용할 수 있게 되었습니다. '@media'라는 CSS문법을 사용해서 '미디어 쿼리'라고 하는데 이것이 반응형의 기본이 됩니다.

하지만 여기서 문제가 발생합니다. 기본적으로 반응형 웹은 처음 페이지가 로딩될 때 미디어 쿼리를 불러오게 되는데, 이때 모든 해상도 대응을 위한 CSS와 이미지 등을 전부 불러오게 됩니다. 사용자가 페이지를 보고 있는 화면 해상도와는 상관없는 다른 해상도의 데이터를 미리 불러오게 되므로 자연스럽게 웹 페이지의 로딩 속도가 지연되고 사용자들은 불편함을 느끼게 됩니다.

복잡한 콘텐츠에는 맞지 않는다

우리나라의 대표 포털 사이트인 네이버나 다음이 반응형 웹을 적용하지 않는 이유는 무엇일까요? 다양한 이유가 있겠지만 주요한 이유 중 하나는 바로 콘텐츠의 복잡성 때문입니다.

네이버(www.naver.com) 다음(www.daum.net)의 웹사이트 메인 화면

 반응형 웹은 해상도를 기준으로 웹페이지의 레이아웃을 변형하는 방법입니다. 이때 레이아웃과 콘텐츠가 복잡하지 않아야 최대 해상도 화면부터 최소 해상도의 화면까지 일관된 사용자 경험을 제공할 수 있습니다.

단순한 레이아웃과 콘텐츠로 구성된 스타벅스(www.starbucks.com)의 반응형 웹

우리나라는 사이트를 구성할 때 상대적으로 많은 정보를 담는 편입니다. 한 페이지에 담는 정보의 양도 많습니다. 물론 이것이 나쁘다거나 트렌드에 뒤처진다는 의미는 아닙니다. 문화적인 특성이죠. 하지만 반응형 웹을 무조건 적용하기에는 우리나라 사용자의 편의성 측면에서 적합하지 않을 수 있습니다. 따라서 콘텐츠의 양에 따라 반응형의 적용 여부를 결정해야 합니다.

콘텐츠의 유형에 따라서도 반응형 웹에 적합한지 구분이 됩니다. 표를 이용한 텍스트가 많은 경우 레이아웃이 변하면서 표의 기능이 약해지며 가독성이 떨어집니다. 글자가 많이 들어간 이미지가 많은 경우에도 이미지 자체가 축소되기 때문에 가독성이 떨어지게 됩니다. 물론 이러한 문제를 해결하는 방법은 있습니다. 텍스트가 들어간 이미지의 경우, 해상도와 레이아웃에 맞게 다른 사이즈의 이미지를 불러올 수 있습니다. 하지만 그 노력에 비해 반응형 웹이 과연 얼마나 효과적인지 생각해봐야 합니다. 추가 콘텐츠를 생성하거나 유지 보수를 하는데 똑같이 많은 노력이 들게 될 테니까 말이죠.

이 외에도 반응형 웹은 HTML5와 CSS3를 기반으로 하므로 추가 개발 없이는 Internet Explorer 8과 같은 하위 브라우저 대응이 어렵습니다. 또한, 상위 버전 브라우저라고 할지라도 각 브라우저별로 적용되는 기준이 달라 크로스 브라우징(웹 표준 기술을 사용하여 브라우저 종류에 구애받지 않고 웹을 이용할 수 있도록 하는 개발을 말합니다.)이 어려운 점도 아쉬운 부분입니다.

대안으로써의 적응형 웹?!

반응형 웹의 이러한 문제점들을 대안으로 ‘적응형 웹’이 떠오르고 있습니다. 반응형 웹과 적응형 웹은 모두 웹 사이트가 다양한 해상도의 화면에서 원활한 정보와 더 나은 UX를 제공하고자 하지만 구현하는 방법은 다릅니다.

반응형 웹과 적응형 웹의 구성 방식 비교

해상도가 변하면 유동적으로 레이아웃이 변하는 반응형 웹과는 달리 적응형 웹은 특정 디바이스, 또는 해상도를 정해두고 그 비율에 맞춰 웹페이지를 구성하는 방식입니다. 적응형 웹은 2011년 Aaron Gustofson의 책 ‘Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement’를 통해 처음 알려졌습니다. 반응형 웹 개념을 포함하는 포괄적인 개념으로 설명했으나 국내에서는 기술적인 부분에 초점이 맞춰져 통용되고 있습니다.

모든 디바이스에 적용할 CSS를 초기에 로드하는 반응형 웹과는 다르게 적응형 웹은 사용자의 기기가 데스크톱인지, 스마트폰 또는 태블릿인지를 서버나 클라이언트에서 체크하여 그에 최적화된 HTML/CSS을 불러옵니다. 필요한 정보만을 노출하게 되므로 사용자는 접속한 기기에서 좀 더 빠른 속도로 웹사이트를 이용할 수 있습니다.

네이버(www.naver.com)의 적응형 웹(왼쪽부터 차례로 휴대폰/태블릿/PC)

모든 해상도에 레이아웃을 대응하는 반응형 웹과는 달리 적응형 웹은 정교함이 떨어지지만, 정해진 해상도에서는 빠른 속도로 적절한 레이아웃을 제공할 수 있습니다.

 하지만 적응형 웹 역시 여러 단점을 가지고 있습니다. 기기에 맞게 HTML/CSS이나 URL을 분리 개발하는 비용 문제가 발생합니다. 또 새로운 모바일 기기가 시장에 나오면 이에 대한 대응과 개발이 필요한지 고려해야 하는 부분이 생깁니다. 그렇다면 반응형 웹에 대한 완벽한 대안은 없을까요?

기술보다는 사용자 경험

여기서 한 가지 의문이 듭니다. 과연 사용자들은 이 사이트가 반응형 웹인지 아닌지 얼마나 알고 있을까요? 반응형 웹으로 만들어졌기 때문에 들어오고 반응형 웹으로 만들어지지 않았으면 사이트를 박차고 나갈까요?  

모바일 환경에서 뉴스를 읽는 사용자를 고려한 뉴욕타임즈(www.nytimes.com)의 적응형 웹 

반응형 웹이든 적응형 웹이든 사용자는 모바일 기기에서의 웹 접근이 편해졌고, 이에 따라 만족스러운 경험을 하게 되었기 때문에 사이트를 이용합니다. 따라서 기술이 아니라 사용자를 먼저 생각해야 합니다. 제공하는 콘텐츠의 유형과 양을 생각해보고, 모바일 사이트에서 사용자가 어떤 행동을 하기를 원하는지 생각해보아야 합니다. 그리고나서 그 방향이 반응형 웹에 적합한지, 적응형 웹에 적합한지, 아니면 앱을 만들거나 새로운 기술을 도입해야 하는지를 결정해야 합니다.

 반응형 웹은 모바일 시대에 많은 이점을 가져다주는 기술입니다. 세상에 나온 지 얼마 안 된 만큼 앞으로 점점 발전할 것입니다. 이미 반응형 웹의 문제를 극복하려는 방법들이 공유되고 있습니다. (반응형 웹사이트를 빠르게 만드는 7가지 방법 보러가기) 하지만 반응형 웹 기술이 발전하거나 완벽한 대안이 나온다고 하더라도, 반응형 웹이라는 작은 우물에 갇혀 중요한 ‘사용자’를 놓치지 않도록 주의해야 합니다.

출처 : Despreneur, ITDAILY, SMASHING