2013

10월

18

반응형 웹과 콘텐츠 접근 방식.

블로그를 2010년 10월 말 경에 시작했으니 벌써 3년이 되었습니다. 3년 기념으로 테마를 바꿔본 것은 아니고 개인적인 일과 겹치면서 테스트 겸(?) 새로운 테마로 리뉴얼을 해봤습니다.

어차피 제 글을 RSS로 구독하는 분들은 블로그가 어떻게 생겼는지도 기억나지 않으실테고, 구독자를 제외한 거의 모든 방문자들은 재방문을 하지 않는 분들이 대부분일거라 생각해서.. 뭐 이따위 글을 적고 있나 라는 생각도 키보드를 두드리는 지금도 듭니다만.. 반응형 웹에 대한 내용으로 리뉴얼 흔적을 남겨봅니다.

반응형 웹 (Responsive Web).

요즘 반응형 웹에 대해 웹 사이트나 서비스 관련 종사자들이 많은 관심을 보이고 있습니다. AJAX처럼 이전에 있던 기능들과 새로운 기술이나 규약들을 조합하여 더 나은 구성과 기능을 만들어내는 것이라고 할 수 있습니다(물론 그것도 결국 새로운 것이 긴합니다. “해 아래 새 것이 없나니” 라는 성경말씀 처럼 완벽하게 새로운 것은 세상 어디에도 없긴합니다).

아이폰, 아이패드를 중심으로 모바일이 활성화 되면서 모바일용 페이지를 따로 만들고, 접속하는 기기가 어떤 기기인지 확인하여 서버단에서 해당 기기에 맞는 사이트로 연결을 해주는 방식으로 사이트를 구성하였습니다.

responsive_01_131018

반응형 웹은 CSS3의 미디어 쿼리(Media Query)를 이용하여 다양한 해상도의 화면에 하나의 사이트가 유동적으로 반응하도록 구성된 웹을 말합니다. 특정 해상도의 사이트를 따로 만들 필요가 없이 하나의 사이트로 일관성을 유지하고 콘텐츠를 제공할 수 있는 것입니다.

반응형 웹을 구성하기위해 가장 중요한 속성은 크게 3가지가 있습니다.

  1. 가변적인 그리드 레이아웃.
  2. 가변적인 이미지(와 미디어).
  3. 미디어 쿼리.

이 중에서 1과 2는 기존에 있던 퍼블리싱 방식이고 3이 W3C의 새로운 CSS3 명세입니다. 가변형 방식은 거의 사용되지 않던 기능이지만 모바일 시대가 열리고 새로운 기능과 결합하면서 새로운 방식이 되었습니다. 모바일이 활성화 되지 않았거나 미디어 쿼리가 나오지 않았다면 사장되었을 기술들입니다.

가장 큰 장점 – 집중.

반응형 웹은 한마디로 요약하자면 집중이라고 생각합니다. 방문자는 콘텐츠를 집중해서 볼 수 있고 하나의 웹사이트만 있으면 되고 하나의 도메인으로 검색엔진 최적화와 마케팅 등 여러 방면에서 유리하다고 볼 수 있습니다.

가끔 스마트폰에서 트위터나 페이스북으로 올린 링크를 눌러보면 화면 한 가득 글이 넘치게 되는 경우가 있는데, 브라우저를 줄여서 보거나 맨 하단의 PC버전 버튼을 눌러서 봐야합니다. 심지어 어떤 경우는 PC버전을 누르면 PC버전의 콘텐츠 페이지가 나오는 것이 아니라 PC버전 사이트 메인이 나오는 곳들도 자주 봅니다. 개발자의 얼굴을 안다면 인터넷에 공개하고 싶은 심정이 들게 됩니다.

이런 페이지들은 주소가 대부분 http://m.xx로 시작하거나 http://mobil.xx로 시작하는 모바일 전용 페이지 입니다. 위에서 말한대로 접속하는 기기가 무엇인지 파악하고 서버단에서 모바일용 페이지로 이동시켜 버리는 것입니다.

만약 반응형 웹디자인이 되어있는 사이트라면 모바일이든 데스크탑이든 해상도에 최적화된 하나의 사이트가 보여지게 됩니다. PC버전 버튼을 찾거나 브라우저를 줄일 필요가 없어집니다. 어떤 기기에서든 사용자가 콘텐츠를 소화하기에 적합하다는 것은 좋은 점입니다.

반응형 웹이 꼭 답은 아니다.

하나의 사이트를 모든 해상도, 좀 더 정확하게는 다양한 해상도의 화면에 맞춰 깨지지 않도록 작업을 하는 것은 손이 매우 많이 가는 일입니다. 처음에 문제 없도록 구성을 했더라도 운영하면서 추가되는 콘텐츠나 기능변화로 인해 반응형웹이 장점이라고 말하는 모든 해상도에 대응은 물 건너 가는 수도 있습니다.

예를 들어 리뉴얼한 제 블로그의 테마는 아이폰으로 확인 해보니 인덱스 페이지가 틀어지는 문제가 있었습니다. 확인 해보니 페이지 네비게이션 플러그인의 문제때문에 테마를 새로 수정을 하게 되었는데, 이런 CMS의 특징상 플러그인을 쉽게 추가하고 뺄 수 있다는 장점이 결국 단점이 되기도 하고, 일반 사용자라면 사용하고 싶은 플러그인을 포기해야 하는 상황이 될 수도 있습니다.

물론 기업에서 직접 제작하고 운영하고 유지관리 하는 경우는 다르겠지만 불특정 다수가 사용할 수 있는 모듈화 된 것들은 그것을 사용하는 사람의 능력에 따라 폐품이 될 수도 있습니다.

또한 대부분의 반응형 웹은 대부분 레이아웃의 위치와 주메뉴를 스크립트로 처리하는 수준에서 끝나는 경우가 많은데 이것은 모바일 사용자에게 콘텐츠를 보는데 수월한 점 외에는 꼭 좋은 점만은 아니라는 생각입니다. 보통 메뉴와 콘텐츠는 상단에, 우측에 있던 서브콘텐츠들은 모바일화면의 하단으로 내려가게 되는데 사용성 측면에서 보자면 서브 콘텐츠에서 뭔가를 찾아야 한다면 늘 화면의 맨 아래로 스마트폰을 끌어내려야 하고 글 내용이 길다면 불편한 부분이기도 합니다(기술적으로 처리할 수 있는 부분이지만 일단 논 외로).

반응형 웹이 꼭 답이 아닙니다. 요즘은 ‘반응형 웹이 되는 것’ 자체에 감탄을 하는 경우가 많은데 그 것은 이런 기능을 보여줄 수 있어 라고 기능적인 자랑을 하는 개발위주 생각입니다.

필요할 땐 모바일 페이지가 필요하기도 하고 또 어떤 땐 디바이스 자체의 Zooming만으로 충분하기도 합니다. 어떤 서비스는 앱을 만드는 것이 정답일 수도 있습니다. 따라서 기능적 방식이나 요즘 트랜드가 어떤 것인지에 대한 중요성 보다 어떤 것을 선택하고 집중할 것인지 판단하고 진행하는 것이 더 중요합니다.

아이패드 2 정도의 해상도 (768px)라면 굳이 거기에 대응하여 가변적으로 보여질 필요가 없습니다. 톡톡 두 번만 두드리면 충분히 글 읽기에 충분하고 두 손가락 오무리기와 펴기로 데스크 탑의 사용성 그대로 서브항목들에 바로 바로 접근하고 탭 할수 있는데 꼭 반응형으로 만들어야 할 이유가 없습니다. 잘못하면 오히려 과잉친절이 될 수도 있고 서브항목이 아래로 모두 내려가 버려 오히려 사용성을 헤치는 경우도 있으니까요. 실제로 이정도 해상도에서 이렇식으로 작동하도록 만든 반응형 웹 사이트들도 있습니다. 추세가 사용성을 헤쳐서는 안됩니다. 또한 기능이나 기술이 아무리 추세라고 하더라도 우선시 되어서는 안됩니다.

또한 예산 운운하며 반응형 웹 사이트를 가져가야 한다는 경우가 있는데 반응형도 제대로 하려면 돈 꽤 들어갑니다. 그리고 오히려 모바일 사이트와 데스크탑 사이트를 각각 만드는 것보다 시간과 비용이 더 들어갈 수도 있습니다.

단점에 대해서 정리를 하자면

모바일 화면에서 보여진다는 것이지 모바일에 최적화된 것은 아니라는 것입니다.
데스크탑에서 보여지는 모든 구성을 그대로 담게 되므로 트래픽이나 성능등의 문제가 있고 모바일에 맞는 UI처럼 반응형으로 구성을 하려면 오히려 더 손이 갈 수 있습니다. 더군다나 복잡한 사이트라면 모바일과 데스크탑 전체를 아우르는 구성이 그렇게 만만한 작업이 아닙니다.

그래도 반응형 웹이 필요한 경우.

웹사이트와 각종 서비스가 존재하는 이유는 단 하나입니다. 바로 콘텐츠 입니다. 콘텐츠는 생산자 입장에서는 언제나 우선되어 보여져야 하고 소비자에게는 쉽게 소비될 수 있는 형태여야 합니다. 따라서 모바일이 생활의 중심이 되어가는 상황에서 사용성의 문제가 발생하더라도 콘텐츠를 소비할 수 있는 기본구성을 갖춰주는 것이 좋습니다. 가급적이면 스마트폰에 콘텐츠만이라도 반응형으로 보여주도록 가는 것이 좋습니다.

하지만 그것이 사용성이 중요하지 않으니 반응형 웹을 꼭 가져가라는 것은 아닙니다. 앞에서 말씀드렸듯이 모바일 기기들은 줌도 가능하고 핀치도 가능하고 아이폰의 경우 콘텐츠의 구성 방식에 따라 읽기도구를 통해 쉽게 내용을 볼 수 있는 기능도 있기 때문입니다.

반응형 웹은 만능이 아닙니다. 만능처럼 보일수는 있습니다. 반응형 사이트가 더 나을지 아닐지 고민을 해야 하는 것은 당연한 것입니다.

responsive_02_131018

미국 신문사 중 타임(TIME)은 반응형 웹으로 구성되어있습니다. 하지만 저는 차라리 모바일 페이지를 따로 만든 시사인이 더 낫다고 생각합니다.

도메인은 동일한데 모바일에서 접속할 때와 데스크탑에서 접속할 때 구성이 다른 사이트들도 보입니다. 미국 신문사인 USA TODAY 의 경우 데스크탑 화면에서는 980픽셀 정도까지만 반응형 웹으로 구성되어있습니다. 더 이상 화면을 줄여도 기존의 사이트 처럼 고정되어있고 반응형도 아닙니다. 하지만 모바일에서 접속을 하면 동일한 도메인에 사이트 구성은 모바일에 최적화 되어서 나옵니다.

구글 또한 마찬가지 입니다. 서비스에 따라서 가변형 서비스를 제공하기도 하고 그렇지 않기도 합니다. USA TODAY 처럼 동일한 도메인인데도 모바일에 최적화된 페이지로 접속되기도 합니다. 기업정보 같은 페이지는 가변형으로 구성되어있습니다. 어떤 서비스는 최대 넓이에 상관 없는 서비스도 보입니다.

중요한 것은 추세를 따라하는 것이 아닙니다. 필요한 곳에 선택적으로 사용할 줄 아는 능력입니다. 꼭 반응형으로 해야할지, 모바일 사이트를 따로 만들지, 앱을 만들지 고민할 줄 알고 자신에 맞는 것을 선택할 줄 아는 것이 능력이지 가변형이 대세라고 가변형으로 바꾸는 것이 능력이 아닙니다. 그것은 시간과 인력이 있으면 가능한 것입니다.

가변형 웹은 기술이 아닙니다. 고민하고 선택해야 할 접근방식입니다. 따라서 ‘(사용성과 기기에 무리가 가지 않는 상태에서) 기본적으로 제공하면 좋은’ 선택사항에 가깝다고 생각합니다. 기기가 다양해지는 상황에서 사용자에게 콘텐츠를 어떻게 제공할 것인지를 의논하고 질문하는 웹디자인에 대한 고민이 없다면 기술자랑과 시간낭비만으로 끝날 수 있습니다.

html5를 지지하고 밀고있는 페이스북이 작년에 하이브리드앱에서 네이티브앱으로 전환했습니다. 덕분에 느린 페이스북앱이 빠르게 바꼈습니다. 이것은 어느 방식의 앱이 낫다는 문제가 아닙니다. 어떤 선택을 통해 사용자가 더 만족하는 서비스와 콘텐츠를 제공할 것인가에 대한 결과입니다.

반응형 웹은 그래서 제공자 입장에서 편의를 위해 선택되어서는 안됩니다. 사용자가 콘텐츠와 서비스에 만족할 수 있는 것을 찾는 과정과 그 결과가 아니라면 반응형 웹은 “귀찮은데 그걸 꼭 고쳐야 돼?” 라고 말하던 이전의 마음가짐과 하나 다를 바 없을 것입니다. 고민과 선택. 그 선택의 폭이 넓어진 것만으로도 사실 즐거운 일입니다.


blogtheme_04_131017제 블로그도 현재는 좀 부족하지만 반응형으로 구성한 것에 어느정도 만족을 합니다. 하지만 플러그인 설치등으로 문제가 생기거나 상황에 따라 고정형으로 바꿀 의향도 있습니다. 모바일에서 접속할 때 최적화 된 페이지로 바꿔주는 WPtouch Mobile Plugin을 사용하고 있었으니 큰 고민도 없고요.

WPtouch Mobile 플러그인은 메인 페이지로 접속하면 요약해서 글을 리스트로 보여주지만 현재 테마는 반응형 웹으로 구성되어있기 때문에 모든 글이 다 풀어져서 보이게 됩니다. 한참을 글 내용을 다 일고 스크롤 해야 다음 글이 보이게 되어있으니 글을 대하는 중압감이나 태도가 확연히 다릅니다.

한동안 지켜보고 결정해야겠습니다.

익스플로러는.. 예전 블로그도 문제가 많았지만 지금도 마찬가지네요. 기존 테마에서도 다른 브라우저에서는 다 나타나는 다음뷰(지금은 뗐습니다)가 익스플로러에서만 나타나지 않았고 기본 코맨트 대신 사용중인 Disqus는 익스플로러 8은 아예 지원하지도 않습니다. 아마 정상적으로 보이려면 최소한 익스플로러 10은 되어야 하겠네요.

아래에 보이는 이미지는 첫 번째가 이전 테마, 두 번째가 바뀐 현재 테마를 맥에서 봤을 때, 세 번째가 익스플로러에서 보이는 현재 테마인데.. 구글에서 코드를 제공하는 반응형 애드센스 조차도 제대로 해석 못하고 무조건 작은 가로형 배너를 뿌려주네요. 방문자에 목숨을 거는 성격이 아니라서 익스플로러 8 이하는 포기했지만.. 뭐랄까요.. 쟤네들은 도대체 왜 저러나 하는 느낌은 지울 수가 없습니다. html5를 제대로 해석한다는 IE 10도 CSS3를 제대로 랜더링 못하는 곳이니 딱히 기대하지 않습니다만.. ㅡ.ㅡa

  • Front end developer

    좀 된 글이긴 하지만.. responsive web을 만들 때는 UX적으로 생각해야 합니다. 만약 다른 디바이스에 맞게 변형된 웹이 더 불편하게 변했거나 유저를 혼란에 빠뜨린다면 그건 usability/UX 안에서 해결할 영역이지 반응형 웹이 맞지 않는다는 것은 논리적이지 않죠. 그런 상황이 나오지 않게 하기 위해 UX 디자이너들이 persona, journey 등을 작성하고 usability test 등을 행하는 거지요. 현 시대는 responsive가 아니면 살아남기 어려운 시대가 되어가고 있고, 디자인도 서서히 mobile first로 넘어가고 있는 추세입니다. 가장 최근에 참석한 FITC 컨퍼런스만 해도 ‘데스크탑이 먼저냐 모바일이 먼저냐’ 이것에 대해 뜨겁더군요. 이제 리스폰시브는 당연한 것이 되어버린 시대이지요.

    이에 관해 도움이 될만한 글들의 링크를 몇개 첨부하겠습니다.
    https://www.thinkwithgoogle.com/research-studies/the-new-multi-screen-world-study.html

    http://tangledindesign.com/deciding-what-responsive-breakpoints-to-use/

    • 페이퍼북

      좋은 링크 감사합니다. 잘 보았습니다. 프론트엔드 개발자시니 저보다 잘 아시겠지만 일단 저의 생각은 말씀하시는 부분과 거의 같습니다. 본문에서도 그런 부분들이 보이실 거구요.

      다만 반응형 웹이 UX라는 해석에 너무 매달리는 것은 좀 아니라고 봅니다. 맞습니다. 사실 반응형 웹 이라는 것 자체가 결국 하나의 UX입니다. 그리고 제 글 맨 아래에 소개한 워드프레스 플러그인인 WPtouch Mobile 역시 플러그인으로 해결한 UI입니다. 실제 존재하는 사이드바, 푸터, 전체 공개글을 모바일에 맞게 레이아웃을 변경하는 것이 아니라 자체적으로 처리해서 본문을 요약해서 출력하고, 사이드바를 숨기고, 메뉴 정렬 방식을 카테고리나 페이지 등으로 보여줍니다.

      결론적으로 반응형웹은 어떠한 기술이 아니라 N스크린에 대응하기 위한 한 가지 방법이고, 처리할 수 있는 또 다른 여러 방법이 있으며, 가장 현명한 판단은 생산자, 또는 서비스 제공자가 결정하거나 최종 사용자가 원하는 방향을 선택하는 것이라고 봅니다.

      요즘은 그래서 또 하나의 추세로 반응형 웹 이외에 적응형 웹이라는 접근 방식도 생겼습니다. 앞으로는 또 어떤 것이 나올지 모르죠.

      UX가 어떤 방식, 방법을 만들어 내는 것이 아니라 결국 더 나은 사용성이라는 측면에서 찾아가는 방법론적 형태라는 것이 우리에게는 자꾸 기술적인 방식으로 접근 되는 것은 아닌가 합니다. 두 번째 링크의 Smashing Magazine 이 그 좋은 예라고 볼 수 있겠네요.

      또한 외국 사이트들을 보면 성격에 따라 아예 반응형은 신경쓰지도 않은 사이트들이 많이 있습니다. 오래 되어서 그런 것이 아니라 모바일이 가진 화면의 한계보다는 큰 화면이나 PC 레이아웃에서 보는 것이 옳다고 판단되는 곳들이 그런 예가 될 것입니다.

      우리에게 공식 처럼 내려오는 것이 있습니다.
      바로 반응형을 위해서 CSS를 모바일에 맞추고 미디어 쿼리를 이용해서 PC화면을 처리하는 것입니다. 하지만 실제 반응형 웹사이트들이 오히려 보편적인 CSS 선언 방식에 쿼리를 이용한 모바일 대응이 아직도 많이 이루어지고 있습니다. 어느 것이 먼저냐가 아니라 어떻게 대응하느냐, 반응형이 정답이냐, 따로 가는 것이 정답이냐, 앱이냐 웹이냐는 그런 상황에 따라 정해져야 하는 것이고 UX로 처리되어 반드시 가야 하는 필수적인 부분이라 보기 어렵다는 것입니다.

      사족을 달자면 이 내용과는 상관 없지만 html5를 이용한 다양한 사이트들이 나오고 있습니다. 그런데 플래시만큼 무겁고 보기에는 좋지만 직관적이지 않으며 기술적이고 단발적인 화려한 스크립트 군무 사이트들도 많이 생겼습니다. 사실 이런 것들이 html5가 목적이 아니라는 것은 누구나 다 아는 것입니다.

      따라서 반응형이 필수가 아니라 모바일이 대세가 되는 시대에 우리가 적용하거나 적응해야 할 것들이 오히려 반응형도 나오게 된 것입니다. 엄밀히 따지면 반응형과는 다르지만 가변형 웹도 이미 있었지만 그 전에는 그렇게 필요성이 크지 않았고 오히려 손이 많이 갔기 때문에 갔던 것입니다.

      댓글 남겨주셔서 감사합니다. 평안한 주말 되세요.