루크 로블레스키(Luke Wroblewski)는 모바일 우선 전략(Mobile First)으로도 잘 알려져있고 모바일 분야에서 좋은 정보나 데이터를 많이 공유해주는 영향력 있는 사람입니다. 이번에 그가 소개한 RESS(Responsive Design + Server Side Components)는 완전히 새로운 개념은 아니지만 바탕에 깔려 있는 좋은 고민거리들이 있습니다.

URL 파편화

일반적으로 많이 사용되는 모바일 환경 대응 방법은 모바일용 페이지를 별도로 만드는 것입니다. 대부분의 포털업체나 서비스 사이트들이 이러한 전략을 사용하고 있고, 타겟이 명확하기 때문에 상당히 디테일 한 부분까지 제어할 수 있는 방법입니다. 다만 지원해야할 환경을 넓힐 수록 구축과 운영비용이 많이 들어가는 방법입니다.

이렇게 단말별로 별도의 페이지를 제공할 경우 동일한 콘텐츠가 여러개의 URL로 제공되는 문제가 있습니다. 예를 들어서 사용자가 RSS 링크를 접속할 때 사용하는 단말기에 따라서 'http://mydomain.com/article/132' 또는 'http://m.mydomain.com/articls/132' 등으로 연결 될 수 있습니다. 만약 아이패드와 같은 타블렛용 버젼이나 TV 용 템플릿을 추가적으로 제공하고 있다면 이렇게 파편화된 URL은 더 많아질게됩니다.

이렇게 콘텐츠별로 생성된 URL이 한번 사용되고 버려진다면 큰 문제가 없겠지만 실상은 그렇지 않습니다. 트위터같은 SNS나 커뮤니티들에 '모바일 환경'에서 사용된 링크들이 공유되는 것을 심심치않게 볼 수 있습니다. 이러한 링크를 사용하는 사용자는 자신의 사용 환경과는 다른 페이지 레이아웃을 사용하게 됩니다. 그렇다고 모든 템플릿 페이지에서 사용자 단말기를 체크해서 서로 리다이렉션 시켜주는 방법은 적절한 해결책이 아닐 것입니다.

URL이 파편화되면 SEO 측면에서도 불이익을 받게 됩니다. 물론 검색엔진이 중복 콘텐츠를 검증하기는 하지만 단일 URL로 제공될 때 보다는 유입경로가 나눠져서 높은 랭크를 획득하는데 방해가 될 것입니다. 검색엔진을 위해서 일일이 중복 URL을 기술해야 할 수도 있습니다.

반응형 웹디자인(responsive web design)을 적용하게되면 클라이언트 측에서 최적화된 레이아웃을 만들기 때문에 이렇게 단말기별로 페이지가 나눠지는 현상을 피할 수 있습니다.

전송량 제어

반응형 웹디자인을 더 넓게 정의하려는 경향도 있지만, 일반적으로 얘기되는 반응형 웹디자인은 CSS3 미디어쿼리 등을 이용해서 사용자 단말기의 크기에 최적화된 레이아웃을 만드는 기법을 말합니다. 사용자 단말기에 직접 반응하니 구현의 복잡도도 낮아지고 다양한 단말기를 호환시킬 수 있지만 여러벌의 디자인 레이아웃을 가지고 있다보니 사용되지 않는 이미지나 CSS 코드들 때문에 전송량에 불이익이 생길 수 있습니다.

또한 다양한 단말기에 대응한다는 것이 레이아웃에만 국한된 문제가 아니기 때문에 콘텐츠 자체를 생각하면 더 고민할 점들이 많아집니다. 이미지의 경우에도 단말기 폭에 맞게 조절해서 사용하는 기법이 이미 나와있지만 사용자 단말기에서 필요한 크기보다는 약간이라도 더 큰 이미지를 사용하게 되기 때문에 불필요한 트래픽이 발생하게 됩니다. 동영상 콘텐츠의 경우에는 더 복잡해집니다. 단말기 별로 최적 해상도, 설치되어 있는 동영상 코덱, 네트웍 상황이 천차만별이기 때문에 이를 효과적으로 제어하기 위해서 단말 정보 저장소를 갖추는 것도 고려해볼 만 합니다.

반응형 웹디자인이 훌륭한 개념인 것은 사실이지만 서버측의 기술과 잘 어우러져야 그 효과가 극대화 될 수 있을 것입니다.

콘텐츠 컴포넌트

RESS는 이런 다양한 서버측 기법들 중에서 HTML 구문을 선택적으로 전송하는데 초점이 맞춰진 기법입니다. 전체 페이지를 모바일 버전으로 만드는 것이 아니라 네비게이션이나 푸터와 같은 개별 콘텐츠 모듈의 모바일 버전을 만들고 이를 단말기 상황에 따라 적절하게 제공하는 방법을 말합니다. 전체 페이지를 모바일 페이지로 리다이렉트 시키는 것 처럼 URL 파편화를 초래하지도 않고 이미지나 동영상과 같은 콘텐츠에도 적용할 수 있기 때문에 어느정도 전송량을 제어하는 효과도 예측해볼 수 있습니다.

사실 이 개념은 과거에 우리가 이미 사용해오던 >abbr title="user agent string">UAS로 모바일 단말기별 콘텐츠를 제어하던 방식을 좀 더 확장해서 콘텐츠 컴포넌트라고 불리우는 기본 단위를 만들고 이를 제어하는 것으로 이해할 수 있습니다. 복잡하고 다양한 단말기 최적화 방법들 중에서 가장 쉬우면서도 효과가 큰 방법이라고 할 수 있습니다.

실제로 본인의 사이트인 백첵(Bagcheck) 사이트 블로그에 적용해서 어느정도 효과를 봤다고 하는 것, 트위터에 인수된 후에도 잘 사용했다고 하는 것으로 봐서 어느정도 검증된 방법이라고 봐도 크게 무리는 없을 것 같습니다.

콘텐츠 전략

모바일 전용 페이지와 기존 웹사이트와의 간극을 줄이려고하는 이러한 시도들에서 가장 큰 논란 거리는 바로 콘텐츠 전략입니다. 어느 콘텐츠는 모바일 페이지에서 생략해도 좋고 어느 콘텐츠는 그렇지 않은 것인지를 가리는 것이 쉬운 일은 아닙니다. 그렇다고 저사양 단말기에 기존 웹사이트의 모든 콘텐츠를 다 보여줄 수는 없는 일입니다.

웹의 경우 모바일 컨텍스트를 규정짓는 일은 매우 힘든 일이기 때문에 현재와 같이 모바일 페이지와 데스크탑 페이지를 분리하는 정책은 다시 고민해볼 필요가 있습니다. 모바일 웹에서 보여줄 필요가 없다고 생각된다면 데스크탑 페이지에서도 과감하게 없애는 것을 고민을 해볼 필요가 있습니다. 이렇게 콘텐츠 전략이 어느정도 정리되어야 RESS를 활용해서 단일한 콘텐츠를 사용자 환경에 맞게 보여주는 구현이 가능할 것으로 생각됩니다.

콘텐츠 전략을 수립하는데에는 어떻게 하면 서로 다른 환경에서 동일한 콘텐츠를 전달할 수 있을지 디자인적인 고민이 많이 필요합니다. 역으로 효과적인 디자인 전략이 수립된다면 콘텐츠 전략을 수립하는데에 도움이 될 수도 있을 것 같습니다. 반응형 웹디자인을 적용하는데 있어 가장 어려운 부분이라고 생각됩니다.

UAS 판별 방법

반응형 웹디자인이 주목을 받은 이유가 사이트가 사용자를 판단하지 않고 디자인 전략이 사용자의 환경에 반응한다는 개념때문이었는데 아이러니하게도 RESS에는 이렇게 사용자를 판단하는 것을 다시 반응형 웹디자인에 결합시키려고 하고 있습니다. UAS로 사용자를 판단하는 방법이 불완전하기는 하지만 그만큼 효용이 있기 때문이라고 생각할 수 있습니다.

과거에는 UAS로 사용자를 판단할 때 사용자에게 적절한 콘텐츠를 찾아주려는 목적보다는 사용자의 콘텐츠를 제약하는 목적으로 많이 사용되어 왔는데 RESS를 고민하면서 앞으로는 사용자에게 최적의 환경을 찾아주는 방향으로 고민을 해야 할 것 같습니다. 사용자를 다른 페이지로 이동시키기 보다는 기본적으로 최소환경을 제공하고 점진적 향상 기법으로 보다 나은 콘텐츠를 제공하는 방법을 고민해야 합니다.

결론

특정환경을 타겟팅하여 적절한 방법을 찾아주려는 노력은 지금까지도 굉장히 잘해왔다고 생각됩니다. 앞으로 단말기나 사용자 환경이 점점 더 다양해질 것인데 지금까지 쌓인 노하우와 점진적 향상 기법을 잘 활용한다면 보다 더 많은 사용자들이 고려된 서비스를 제공하는데 도움이 많이 될 것이라고 생각됩니다. 그 시작점으로 RESS를 도입해보는 것도 충분히 의미가 있다고 생각됩니다.

이 글은 파란 개발자 블로그에 실린 글입니다.