2012년 6월 구글에서 사용자 친화적인 반응형 웹사이트에 대한 선호를 발표했을 때 나는 반응형 디자인과 검색엔진 최적화를 동일시하는 글들이 순식간에 몰려 포스팅되는 상황을 목격했다. 그들의 말대로 반응형 웹사이트가 검색엔진 최적화에 친화적일 수 있지만, 개중에는 그렇지 않은 웹사이트도 있어 안타까운 심정이 들었다.

올해 초 서치 엔진 랜드^{Search Engine Land}에 기고한 글에서 나는 반응형 웹사이트가 검색 결과에서 문제를 일으키는 흔한 오류에 대해 상세히 다루었다. 그렇기에 스매싱 매거진에서 반응형 웹사이트에 관한 SEO 평가를 좀 더 면밀히 할 수 있어 좋다.

사람마다 SEO에 관한 정의가 다르다는 것을 다들 알고 있다. 그래도 내가 무슨 일을 하는지 이해하지 못하는 분들을 위해 SEO의 중요성을 이렇게 강조하겠다. SEO와 관련한 문제를 바로잡으면 사용자 경험이 전반적으로 향상된다고. 오늘날 대다수의 신뢰받는 SEO 전문가처럼 나는 단기간의 순위 혜택을 위해 검색엔진 알고리즘을 조작하는 걸 좋게 보지 않는다.

오늘 내가 평가하려는 웹사이트는 디즈니 주니어의 미국 버전^[1]이다. 내가 이 웹사이트를 선택한 데는 3가지 이유가 있다. 첫째, 내 고객이나 파트너가 이 사이트를 운영하지 않는다. 둘째, 다수의 반응형 웹사이트에 존재하는 SEO 문제가 여기에도 많이 보인다. 마지막으로 나의 4살된 두 아이가 이 브랜드를 정말 좋아하고, 그 웹사이트를 보려고 내 스마트폰이나 가족용 아이패드를 사용한다. 내 아이들과 그들처럼 검색하는 아이들을 위해 디즈니가 이 무료 조언을 활용해 웹사이트를 더 업그레이드하길 바란다.

물론 디즈니 주니어는 내 고객이나 파트너가 아니므로 내가 모르는 비즈니스 요구사항에 관한 정보가 내용 중에 있을 수 있다. 이 경우 나의 조언이 디즈니 주니어에 도움이 못되겠지만, 적어도 반응형 웹사이트에 관한 한 가장 좋은 SEO 사례로서 가치가 있을 것이다.

아름답지만 때로 좌절감을 주는 디즈니 웹사이트와 관련해 이번 평가에서는 웹사이트를 반응형으로 제작해도 모바일 SEO가 끝난 게 아님을 보여주고, 웹사이트가 검색엔진을 통해 좀 더 유용하게 검색될 수 있도록 디즈니에 일종의 틀을 제공하고자 한다.
 

검색엔진에 색인된 웹사이트인가?

구글에서 디즈니 주니어 페이지 대다수를 색인^[2]하고 있으므로 디즈니 주니어는 색인에 관한 문제는 없는 듯하다. 직접 구글 검색 사이트에서 site:domain.com을 입력해 검색 결과를 보거나 구글 웹마스터 도구를 사용할 수 있다면 거기서 확인해보라.

구글은 디즈니 주니어 웹사이트에서 약 1,630페이지 정도 색인을 생성했다. 그러나 페이지 내용 요약에서 콘텐츠 패리티^{content parity[3]} 문제를 보여준다.

검색엔진에 색인되지 않은 웹사이트는 사람들이 그 웹사이트를 검색할 때 당연히 검색결과에 나타나지 않는다. 이는 동적 게재^[4]나 모바일 전용 URL을 사용하는 웹사이트뿐만 아니라 반응형 웹사이트에서도 마찬가지다. 하지만 이 문제는 모바일 URL 문제로 좀 더 기울어지는 경향이 있다. 그 이유는 외부에서 들어오는 링크^{link equity [5]}로 인해 모바일 페이지가 원본^canonical 페이지와 검색 순위에서 경쟁하지 않도록 robots.txt 파일에서 의도적으로 모바일 웹사이트의  링크를 추적하지 않게 nofollow 하는 흔한 관행 때문이다. 그런데 이 관행은 잘못된 것이다. 왜냐하면 양방향 설정^{bidirectional annotation [6]}(이나 스위치보드 태그^{switchboard tags [7]})에 링크를 이용할 수 있고 모바일 URL을 검색 결과에 가져올 수 있기 때문이다. 하지만 반응형 웹사이트는 데스크톱과 모바일 모두에 쓰이므로 이에 관한 한 이도 저도 아니게 된다.

디즈니 주니어는 색인되었지만 Idis와 같은 일부 반응형 웹사이트는 그만큼 운이 좋지 않다. Idis 웹사이트는 반응형이면서 혁신적이어도 구글에 색인된 것은 하나뿐이다. 이 웹사이트는 동적이고 _escaped_fragment_를 사용하지 않았기 때문에 사용자가 웹사이트의 다른 요소(예: 내부 링크)를 클릭할 때 색인된 URL은 변하지 않는다. 그 결과 검색엔진은 색인들이 포함된 딥 링크^{deep links [8]}를 받지 못하게 된다. 만일 누군가 색인되지 않은 페이지에 있는 텍스트를 검색할 경우 그 사람은 인터랙티브하고 상까지 받은 이 웹사이트를 검색 결과에서 찾을 수 없다.

물론 정적인 URL이 없는 웹사이트에서 이런 일이 벌어진다. 하지만 개발자가 웹사이트를 반응형으로 할 것인지 동적 게재를 사용할 것인지 또는 모바일 전용 URL을 사용할 것인지를 정한다고 해서 모바일 SEO가 완료되는 건 아니다.
 

크롤링된 웹사이트인가?

반응형이든 아니든 웹사이트가 색인되기 위해선 구글에서 반드시 그 웹사이트를 크롤링해야 한다. 크롤링이란 검색용 로봇(크롤러)이 특정 콘텐츠로 이어진 링크를 따라가 새 URL을 저장하는 작업을 말한다.

이를 확인하고 싶으면 지누^Xenu나 스크리밍 프로그^{Screaming Frog}와 같은 웹사이트 크롤러를 사용해보라. 나는 모바일 SEO 평가용으로 롭 해몬드^{Rob Hammond}의 SEO 크롤러를 좋아하는데 스마트폰 구글봇^Googlebot을 선호 크롤러로 설정해주기 때문이다. 물론 크롤링하는 URL 개수가 한정적이지만, 크롤링 이슈에 대해 좋은 아이디어를 얻을 만큼은 된다. 만약 당신에게 웹사이트가 있다면 구글과 빙^Bing에서 그 웹사이트를 반드시 검증해봐야 한다. 그리고 이 2개의 검색엔진에는 개발자용 도구가 있다. 이 도구에서 개발자가 맞닥뜨린 크롤링 오류를 명시하고 있으며, 심지어 구글에서는 문제를 발생시킬 수 있는 특정 매개 변수를 개발자가 무시하도록 허용해준다. 만일 당신이 소유한 웹사이트가 없거나 그것을 검증할 수 없다고 해도 위에 설명한 대로 웹사이트를 크롤링하면 대다수의 문제를 밝혀낼 수 있다.

내가 디즈니 주니어 웹사이트를 크롤링했을 때, 다수의 URL(DisneyJunior.com, DisneyJunior.Disney.com, WatchDisneyJunior.Go.com, Disney.Go.com/DisneyJunior)에서 콘텐츠를 중복해서 관리한다는 점이 점점 명확해졌다. 이는 검색엔진이 페이지 권위^{page authority [9]}를 부여하는 데 걸림돌이 된다. 왜냐하면 웹사이트의 페이지 순위에 따라 검색엔진 스파이더가 한정된 크롤링 예산을 배정받기 때문이다. 고로 위의 URL 4개와 도메인 3개를 페이지 순위로 나눠보면 아마도 좋지 않은 웹사이트 구조를 구글에게 보여줄 것이다. 이 부분은 나중에 중복 콘텐츠에 대한 부분에서 더 많이 다루고자 한다.

검색엔진은 정적인 URL과 잘 어울리며, 디즈니 URL은 주로 정적이기 때문에 그 자체에 중요한 크롤링 문제는 없는 듯하다. 반면 사이트맵은 확실히 개선되어야 한다. 몇 년 전에 검색엔진들은 사이트맵을 ‘색인하려는 웹사이트의 콘텐츠를 찾기 위한 협약’이라고 발표했다. DisneyJunior.Disney.com에 사이트맵이 있지만 문제가 있다. 그중 가장 큰 문제는 비디오 외에 콘텐츠가 더 들어 있는 비디오 사이트맵이다.

사이트맵은 웹사이트 소유자가 검색엔진과 직접 소통하는 방법이다. 그러므로 정보는 가능한 한 정확하게 검색엔진이 혼동하지 않도록 만들어야 한다. 구글에는 디즈니 주니어에 있는 콘텐츠를 포함해 여러 유형의 콘텐츠 관련 사이트맵이 있다. 고로 이미지, 비디오, HTML 문서 등에 관한 사이트맵을 분리해서 보여주는 게 가장 좋다.

크롤링은 모바일에 국한된 문제가 아니지만, 무언가 잘못 틀어지면 모바일 사용자를 위한 웹사이트뿐만 아니라 전통적인 데스크톱 웹사이트에도 좋지 않은 영향을 줄 수 있다. 그러므로 어떻게 해서든지 크롤링은 올바로 되어야 한다.

권장 사항

검색엔진이 활성화된 이미지, 플래시나 자바스크립트 없이 웹사이트를 이해할 수 있는가?

검색엔진은 자신이 페이지의 전반적인 검색 관련성을 파악할 수 없다는 것을 알지 못한다. 구글 글래스^{Google Glass}, 구글 드라이브, 구글 고글^{Google Goggles}에서 광학 문자인식^[10]으로 이미지에 있는 글자를 일반 텍스트로 바꾸는 놀라운 일을 할 수 있지만, 구글 검색에서는 아직까지 텍스트만 읽는다. ‘웹마스터 가이드라인’에서는 다음과 같이 얘기한다.

검색어를 이미지나 플래시에 넣은 웹사이트와 달리, 여기에는 검색엔진이 의미 있는 콘텐츠를 보는 것을 차단하지 않는다. 단지 의미 있는 콘텐츠가 많지 않을 뿐이다. 읽을 단어가 없기 때문에 이 경우에 크롤러는 그 웹사이트를 알아보지 못한다.

만일 계층구조상 아래 페이지를 본다면 우리는 검색엔진이 진행하는 데 곤란한 텍스트 이미지를 볼 것이다.

“Watch Sam Sandwich”로 시작하는 텍스트는 검색엔진이 접근 가능하지만, 로고 안에 있는 “The Bite-Sized Adventures of Sam Sandwich”와 같은 단어들은 이미지 텍스트이기 때문에 접근할 수 없다.

권장 사항

링크하고 공유하기 쉬운 웹사이트인가?

반응형이든 아니든 인간의 소비를 겨냥하지 않은 듯한 URL을 적용한 웹사이트가 많이 있다. 기억하고 공유하기 어려운 URL이기 때문에 당연히 SEO에서 불리한 평가를 받는다. 페이지 순위를 매길 때 검색엔진이 공유와 링크를 얼마나 중요하게 보는지를 고려한다면, 링크와 공유를 더 많이 할수록 그 페이지는 검색 결과에서 순위가 더 높아질 것이다.

디즈니 주니어를 위한 프린트와 비디오 URL들이 위의 부류에 해당되는데, 이는 임의의 문자를 다른 기억할 만한 경로(http://disneyjunior.com/print/stethoscope-4e4e43e2e8368d71cf2086da)에 추가하는 식으로 URL을 만들었기 때문이다. 그래도 대부분의 경우 URL에서 검색어를 포함하며 사용자와 검색엔진이 그것을 쉽게 이해한다.

한 단계 더 나아가 그 웹사이트에는 사용자가 소셜 네트워크에서 콘텐츠를 공유하도록 브라우저의 북마크를 응용하는 기술인 소셜 북마클릿^[11]이 있다. 디즈니 주니어는 페이스북, 트위터, 유튜브에서 활발히 활동하고 있으므로 이 아이디어를 낸 사람은 소셜 미디어의 가치를 이해하고 있음이 틀림없다. 하지만 그들은 어쩌면 소셜 미디어를 강화하는 게 자연 검색^{organic search [12]}에서 점점 중요해진다는 사실을 모를 수도 있다. 페이스북 사용자 중에 78%가 모바일 사용자고, PC 사용자보다 모바일 사용자가 소셜 네트워크에서 보내는 시간이 더 많다는 사실을 고려할 때, 모바일 검색자가 원할 때 콘텐츠를 공유하게 해주는 건 당연하다. 물론 어린이 온라인 사생활 보호법^{Children’s Online Privacy Protection Act(COPPA)} 때문에 어린이용 웹사이트에서 콘텐츠 공유를 못하지만, 어른용 디즈니 주니어에서 공유하면 된다.

이 글은 반응형 웹사이트에서 소셜 버튼을 실행하는 방법에 관한 사용 지침은 아니지만, 페이스북의 모바일 ’좋아요’ 버튼은 반응형 웹사이트에서 잘 작동한다. 웹사이트 성능을 고려할 때, 클릭 시 실제 소셜 스크립트를 로딩하는 지연 로딩^{lazy loading}을 적용한 소셜카운트^SocialCount나 소셜 공유 버튼을 사용하는 건 좋은 생각이다. 만일 애드디스^AddThis와 같은 서드파티 플러그인을 사용할 거라면 반응형 웹사이트와 호환되게 하는 방법도 있다.

권장 사항

소셜 네트워크에서 추천수를 늘리고 콘텐츠 발견^[13]을 활용하게 하려면 어른용 디즈니 주니어에서는 반응형에 총체적인 경험을 추가하고, 페이지 로딩 시간을 크게 증가시키지 않는 소셜 공유 버튼을 넣어야 한다.
 

기기와 상관없이 웹사이트에서 사용자에게 필요한 콘텐츠를 보여주는가?

‘콘텐츠 패리티’를 옹호하는 사람에게는 기기와 상관없이 모든 이들이 접근할 수 있는 웹사이트를 제작하는 게 가치 있는 일이다. 하지만 안타깝게도 이 문제는 풀기가 더 어렵다. 모든 플랫폼에서 이용할 수 있는 콘텐츠를 제작하는 것이 대체적으로 사용자에게는 좋다. 물론 그렇지 않을 때도 있지만.

디즈니 주니어는 꽤 판에 박혀 있다. 사용자에게 의미 있는 콘텐츠를 허용치 않고, 의미 있는 콘텐츠와 그것을 원하는 사용자를 서로 연결해주지도 못한다. 그보다 사용자가 그동안 단 한 번도 사용해본 적 없는 콘텐츠를 제공할 뿐이다. 안타깝게도 내 경험상 대다수의 일반적인 반응형 웹사이트들은 기기와 별도로 모든 콘텐츠에 충분히 접근하지 못하게 하며, 모바일 기기에서 사용할 수 없는 콘텐츠를 제공한다.

구글은 모바일 웹사이트들에서 지나치게 자주 발견되는 한 가지 취약점이 스마트폰 검색 결과에서 불리하게 작용할 것이라 판단했다. 그 취약점은 바로 재생되지 않는 동영상이다. 2013년 구글은 다음과 같이 말했다.

우리는 HTML5 표준 태그를 사용해 동영상을 넣는 것이 좋고, 모든 모바일 기기에서 지원되지 않는 플래시 같은 형식의 콘텐츠는 사용하지 말라고 권한다. 그럼에도 가능한 한 많은 기기에서 재생할 수 있는 동영상을 넣어 스마트폰 사용자가 가장 좋은 경험을 할 수 있도록 최선을 다하라.

디즈니 주니어 동영상을 재생하려고 할 때 아래와 같은 화면을 보면 더 염려가 된다.

모바일 사용자를 위한 콘텐츠를 지원하지 않으면 스마트폰 검색에서 순위는 낮아진다.

몇 가지 경우에 디즈니 주니어는 콘텐츠 패리티를 지나치게 넘어섰다. 이 웹사이트의 4가지 핵심 부분은 게임, 동영상, 프린트, 라이브 피드다. 문제는 사용자가 구글 클라우드 프린트^{Google Cloud Print}를 알고 있고, 그것을 기기에 설치하지 않는 한 색칠 페이지나 다른 인쇄 가능한 페이지를 프린트할 방법이 없다는 것이다.

얼마나 많은 사람이 모바일 기기에서 실제로 이 PDF 파일을 인쇄하는지 모르겠지만, 이 콘텐츠에 접속하려고 애쓴 대다수의 사람들은 아마도 불만이 쌓였을 것이다. 물론 구글이 재생할 수 없는 동영상 때문에 검색 결과에서 웹사이트를 불리하게 했는지에 대한 증거가 나에겐 없다. 다만 그 내용이 4개월 전에 발표됐고 언제든지 적용될 수 있다는 점이다. 순위에 미치는 영향과는 별개로 이 문제를 해결하면 이 웹사이트를 방문하는 누구에게나 도움이 될 것이다.

모바일 기기에서 디즈니 주니어에 있는 콘텐츠의 1/4은 접속할 수 없다.

의심할 바 없이 인쇄 가능한 페이지와 색칠 페이지는 데스크톱과 노트북에서 인기 있는 기능이며 사용자는 적극적으로 그런 콘텐츠를 찾는다. 하지만 모바일 기기라면 완전히 다른 얘기가 된다.

기기별 검색량을 보게 해주는 빙 애드 인텔리전스^{Bing Ads Intelligence}에 따르면, ‘색칠 페이지’에 관한 전체 검색량 중 5% 미만이 모바일 기기에서 온다고 한다. 이는 대다수의 모바일 기기가 프린터와 연결되어 있지 않아 그런 콘텐츠를 보여주는 게 유용하지 않기 때문이다.

2013년 4월 내가 이 문제를 다룬 이후 Disney.com 반응형 웹사이트에서 커다란 진전이 있었다. 거의 모든 게임을 HTML5로 호환해 스마트폰 사용자는 플래시 게임에 접근할 수 없게 된 것이다. 고로 반응형, 모바일 전용 웹사이트 둘 다 괴롭힌 이런 문제들을 고칠 수 있으므로 다신 이런 일이 생기지 않을 것이다.

모든 사용자가 이용할 수 있는 콘텐츠를 제작하는 것은 좋다. 하지만 만일 디즈니가 그렇게 한다면 모바일 기기에서 인쇄하기 전에 사용자는 구글 크롬이나 구글 클라우드 프린트 앱을 다운로드하고, 그 기기를 프린터에 연결해야 한다고 미리 설명해줘야 한다. 디즈니에서 그렇게 하지 않으면, 아이들은 실망하고 기분이 상한 채 모바일에서 PDF를 바라보며 인쇄를 어떻게 해야 할지 궁금해할 것이다. 모바일 사용자를 위해 디즈니는 홈페이지에서 기능을 축소하는 것도 고려해볼 수 있다.

마지막으로 디즈니 주니어의 반응형 웹사이트에서는 사용할 수 있는 모바일 콘텐츠에 관한 것이 빠져 있다. 사용자 행동에 대한 추정은 늘 까다롭지만, 이 경우 모바일 사용자는 인쇄 가능한 자료보다는 앱과 모바일 게임을 더 많이 찾는다고 보는 게 거의 맞다. 하지만 모바일 기기에는 플래시가 설치되어 있지 않아 구글에서 ‘디즈니 주니어 앱’으로 찾은 첫 번째 검색 결과는 오류 메시지를 표시하기도 전에 사용자를 반응형이 아닌 다른 페이지로 데려간다.

4살된 아들이 내 스마트폰으로 디즈니 주니어에 접속했는데 플래시를 다운로드하는 페이지로 리디렉트(redirect)되자 “아빠, 이게 뭐예요?”라고 물었다.

더군다나 사람들이 한 달에 12,000번 이상 검색하는 용어인 ‘모바일 게임’으로 검색하면 그 결과에 디즈니가 안 보인다. 스마트폰에서 호환되는 디즈니 게임들은 그 검색어와 관련 있지만, 디즈니 웹사이트에 그 단어가 없기 때문에 검색 결과에 보이지 않은 것이다. 참 유감스러운 일이다. 검색 결과에 나타나지 않으니 이는 검색엔진 최적화라고 할 수 없다.

디즈니와 관련된 플랫폼별 검색어 검색량에 관한 이 수치들은 데스크톱과 노트북 사용자보다 모바일 사용자가 다양한 검색어를 다른 빈도로 검색하고 있음을 보여준다.

권장 사항

반응형 웹사이트의 접근성과 검색 능력 향상을 위한 3가지 기회가 디즈니 주니어에 있다.

웹사이트가 빨리 로딩되는가?

내가 아카마이^Akamai의 에반젤리스트인 가이 포자니^{Guy Podjarny}의 주장 그대로 서치 엔진 랜드에서 ‘반응형 웹사이트는 흔히 부풀려지며 느리다’고 했을 때 반대 지적을 많이 받았다. 그들 대다수는 내 말을 ‘반응형 웹사이트는 빨라질 수 없다’라고 받아들였다. 물론 빨라질 수 있다. 하지만 아쉽게도 대다수 웹사이트는 아니다.

반응형은 성능에 좋지 않을 뿐만 아니라 SEO에도 해가 될 수 있다. 구글에서 검색 결과 순위에서 불리해지는 잦은 실수에 대해 지적했을 때, 그 대상 목록^{hit list}에 로딩 속도가 느린 페이지를 넣었다. 다행히도 구글은 개발자들에게 페이지스피드 인사이트^{PageSpeed Insights} 도구를 포함해 웹사이트 속도를 높일 수 있는 많은 리소스를 주고 있다. 이 도구에 있는 권고 사항들을 따라 하면 당신의 웹사이트를 1초 이하로 뜨게 할 수 있다. 이는 구글에서 최적의 모바일 성능으로 보는 시간이다.

디즈니 주니어는 로딩하는 데 평균 7초 이상 걸리며, 페이지 속도와 관련해 구글은 100점 만점에 71점을 준다.

아카마이(Akamai)의 모비테스트(Mobitest) 도구는 모바일 기기에서 페이지가 뜨는 데 걸리는 시간을 매우 잘 보여준다.

구글의 페이지스피드 인사이트(PageSpeed Insights)는 그들이 제안하는 우선순위를 표시하고자 정지 신호의 컬러 코딩을 따른다.

디자인 커뮤니티에서 반응형 웹사이트 성능에 관한 글을 많이 쓰고 있다. 그럼에도 최소한 반응형 웹사이트는 1초 안에 웹 페이지가 떠야 한다는 구글의 가이드라인을 따라야 한다.

권장 사항

디즈니 주니어는 구글의 페이지스피드 인사이트의 충고에 따라 무엇보다도 콘텐츠에서 이미지를 최적화하고, 렌더링을 막는 자바스크립트와 CSS를 제거하며, 페이지 로딩 시간을 1초 이하로 줄여야 한다.
 

웹사이트에서 요청하는 정보가 아니라 앱을 다운로드하라고 하는가?

WTF 모바일 웹사이트는 사용자에게 콘텐츠를 보여주지 않고 앱을 다운로드하라고 하는 많은 웹사이트를 목록으로 만들었다. 이는 도어 슬램^{door slam [14]}이라고 하는 처리 기법으로 로튼 토마토^{Rotten tomatoes}가 대표적인 사례다.

로튼 토마토 웹사이트에 접속한 스마트폰 사용자에게 보이는 앱 틈새 확인창(An app interstitial)

2013년 6월까지 사용자들은 도어 슬램 때문에 짜증이 날 수밖에 없었다. 바로 그 시점에 구글은 검색 결과에서 불이익을 줄 목록에 그런 웹사이트를 추가했다. 이젠 모든 웹사이트 소유자들까지도 언짢게 된 것이다.

웹사이트의 사용자 에이전트^[15]가 모바일 기기인 것을 감지했을 때 이런 도어 슬램이 흔히 일어난다. 내 경험상 반응형 웹사이트에서는 이런 일이 보기 드물게 일어난다. 왜냐하면 대다수의 반응형 웹사이트 소유자들은 앱으로 전환하라고 사용자를 설득하는 게 아니라 그들의 콘텐츠를 자유롭게 접하도록 허용하기 때문이다.

디즈니 주니어는 그 규칙에서 예외다. 만약 당신이 모바일 기기에서 동영상을 보려고 한다면, 그 페이지는 앱으로 리디렉트되고, 특히 모바일 기기가 안드로이드라면 존재하지도 않는 앱으로 리디렉트될 것이다.

안드로이드 사용자가 홈 페이지에서 ’디즈니 주니어 보기’ 링크를 클릭하면 이 메시지 로그와 마주치게 된다.

만일 당신의 반응형 웹사이트에 앱 틈새 페이지^{app interstitials}가 있다면, 스마트폰의 구글 검색 결과에서 자주 나타나지 않게 될 거라는 예상보다 그들의 사업 가치가 더 큰지를 고려할 때다. 내가 말할 수 있는 건 구글에서 이 페이지에 대해 아직 불이익을 주지 않고 있다는 사실이다. 하지만 재생할 수 없는 동영상의 경우처럼 되는 건 시간 문제일 뿐이다.

권장 사항

디즈니 주니어는 앱 틈새 페이지를 없애거나 적어도 사용자를 방해하지 않도록 그것을 배너로 바꾸어야 한다. 앱 틈새 페이지 대용으로 안드로이드와 iOS에서 스마트 배너를 사용할 수 있다.

iOS에서 스마트 배너를 삽입하는 것은 아래의 메타 태그를 페이지 head에 넣는 것처럼 간단하다. 메타 태그에는 앱 스토어 상세 정보가 들어 있다.

안드로이드에서 스마트 배너를 추가하는 게 그리 쉬운 건 아니지만, 애드몹^AdMob을 통해 할 수 있다. 일부 개발자들은 jQuery를 사용해 안드로이드에서 iOS 배너를 모의 테스트한다.
 

웹사이트에 중복된 콘텐츠가 있는가?

스마트폰이 나오기 오래 전 중복 콘텐츠는 해당 페이지가 지정된 검색어에 관련해 검색 순위를 차지하는 걸 방해했다. 하지만 이젠 중복 콘텐츠로 인해 상황이 점점 복잡해지고 있다. 이 용어의 뜻을 모르는 이를 위해 설명하자면, 중복 콘텐츠는 1개 이상의 URL에 존재하는 단일 콘텐츠다. 이것은 페이지순위^PageRank 지표를 분산하기 때문에 페이지 경쟁력을 낮춘다.

내 사례 연구가 입증하듯이 대개 모바일 서브도메인들이 중복 콘텐츠의 장본인이다. 그러나 웹사이트가 반응형이라는 이유로 중복 콘텐츠가 될 가능성이 없다는 얘기는 아니다. 솔직히 모바일에 친화적이든 아니든 모든 웹사이트에서 중복 콘텐츠를 확인하는 게 중요하다. 이를 무시한다면 구글 자체에서 주어진 콘텐츠에 대해 원본 페이지를 찾으려 할 것이다. 이것은 웹사이트 소유자에게 늘 좋지 않은 결과를 준다.

이를 운에 맡겨서는 안 된다. 그 대신 사용자를 위한 페이지가 무엇이고 그저 원본을 복사한 페이지가 무엇인지 검색엔진이 이해하게 해야 한다. 우리는 검색엔진이 원본을 알 수 있도록(예를 들어 canonical 태그를 넣고, 웹마스터 도구에서 매개 변수 제어를 조정하는 등) 가능한 한 신호를 많이 보낼 수 있다.

앞에서 말했듯이 디즈니 주니어에는 중복 콘텐츠가 꽤 많다. 하지만 소스 코드 안에 canonical 태그가 있어 구글과 빙^Bing에서 순위를 차지할 페이지가 무엇인지 알려준다. 따라서 이와 관련해 디즈니에 권할 사항은 없다. canonical 태그를 잘 모른다면 아래의 태그를 중복 페이지의 head에 추가하는 것만큼 간단하다고 보면 된다.

이 태그에서 참조된 URL은 특정 콘텐츠의 원본 URL이어야 한다. 일부 디즈니 주니어속성에 중복 콘텐츠 문제가 조금 있다. 예를 들면
Chuggington.com과 DisneyJunior.com/Chuggington에 동일한 콘텐츠가 있다. 디즈니에서 Chuggington.com을 원본 URL로 설정하고자 했다면 그냥 DisneyJunior.com/Chuggington에서 아래 태그를 추가하면 된다.

웹사이트에서 추가적인 콘텐츠를 전달하는 데 모바일 기기를 이용하는가?

디즈니 주니어에는 모바일에서만 보여주는 콘텐츠가 없다. 이는 의도한 것일 수도 있고 아닐 수도 있다. 그러나 이는 모바일 기기에만 특화된 콘텐츠로 소비자를 기쁘게 할 기회를 외면한 것이다.

2008년 어떤 분석가는 이동성^mobility이 완전히 새로운 인터넷을 창조할 거라고 예측했다. 음성 인식^{voice-recognition} 앱, GPS와 스캔할 수 있는 콘텐츠^{scannable content}로 가득 차고 .mobi 도메인으로 호스팅되는 그런 인터넷 말이다. 그는 이것을 모바일넷^mobilenet이라 불렀고 우리가 아는 인터넷과는 다를 것이라 생각했다.

하늘을 나는 자동차와 호버보드^hoverboards를 타고 빠르게 돌아다니는 은색 마일라를 입은^mylar-clad 사람들 얘기가 나오는 공상 과학 이야기처럼 보이지만, 저자는 예측에 뛰어났다. 그는 무엇보다도 현재 택시 산업을 분열시키고 있는 모바일 차량 공유 앱인 우버^Uber를 예측했다. 그리고 그의 글에서 2012년 4월 모바일용 사진 앱인 인스타그램을 페이스북이 1조원에 매입할 것을 예시했다. 스마트폰과 태블릿에는 PC와 다른 속성이 있으며 PC를 사용할 수 없는 상황에 자주 쓰인다. 그러기에 스마트폰과 태블릿은 이전 인터넷에는 없었던 동작과 패턴들을 사람들에게 주입하고 있다.

GPS는 사용자가 구글과 빙^Bing을 이용해 주변 것들을 찾게 해주며, 검색 데이터는 사용자가 기본적으로 스마트폰과 태블릿에서 ’~로 가는 길 찾기^{navigate to},’ ‘가장 가까운^closest’, ’내 주변^{near me}’ 같은 단어를 입력해 GPS를 이용한다는 것을 보여준다. 지금 쇼핑과 관련한 검색은 매장 안에서 2배 이상 일어날 가능성이 높고, 모바일 검색자의 70%는 검색 결과를 통해 PC에서 할 수 없는 일을 직접 전화해서 진행한다. 다수의 사람들은 데스크톱 컴퓨터에서 하듯 모바일 기기에서도 똑같은 것을 검색하고, 한가할 때 자주 검색한다고 한다. 반면 그들 가운데 17%는 바쁠 때 데스크톱과 노트북에서는 불가능한 GPS, 카메라, 가속도계, 전화와 같은 기능에 접속한다.

오늘날, 이러한 모바일을 기준으로 하는 경험이 웹(즉 독립된 모바일 웹이 아닌)에 구축되며, 앱에서는 더 자주 구축된다. SEO 관점에서 보면 웹이 가장 이치에 맞다. ‘웹마스터 가이드라인’에서 구글은 “무엇이 당신의 웹사이트를 독특하고 유용하며 매력적으로 만드는지 생각하라. 당신의 분야에서 다른 웹사이트들보다 당신의 웹사이트가 도드라지게 하라”고 말한다. 그리고 이 문장을 ‘검색 엔진 최적화 기본 가이드’에서 되풀이하며 이렇게 말한다. “설득력 있고 유용한 콘텐츠를 제작하는 게 필시 여기서 논의하는 다른 어떤 요소들보다 당신의 웹사이트에 더 많은 영향력을 미칠 것이다.”

요약하자면 사람들에게 유용한 훌륭한 콘텐츠는 링크되고 공유된다. 이는 구글에 그 품질을 알려준다. 하지만 어떤 앱이든 사용자가 ‘다운로드’나 ‘앱’ 혹은 앱 이름을 검색어로 입력하지 않는 한 검색 결과에 나타나지 않을 것이다. 그리고 구글은 앱 안에 들어 있는 딥 링크들을 처리하거나 색인을 생성하지 못한다. 가능한 한 모바일 사용자가 접근할 수 있는 콘텐츠를 제작하는 방법은 그 콘텐츠를 앱이 아닌 웹에 넣는 것이다.

문제는 구글에서 설명했듯이 반응형 웹 디자인으로 이를 실행하는 것이 어렵다는 점이다. 많은 반응형 웹사이트에서 지오로케이션을 마구 사용한다(예: 스타벅스). 대다수가 이를 실행하기 위해 자바스크립트나 서버 측 요소를 이용하는데, 이렇게 하면 구글의 범위 밖으로 넘어가게 된다.

반면 일부 웹사이트는 스마트폰이나 태블릿에서 누군가에게 매우 유용한 콘텐츠를 제공한다. 이는 어쩌면 구글이 그 웹사이트를 다른 경쟁 사이트보다 순위를 높게 매길 정도로 차별화하는 것일지도 모른다. 내가 가장 좋아하는 사례 중 하나는 시어스^Sears다. 시어스는 모바일 웹사이트에서 동적 게재를 사용해 스마트폰 사용자들이 경쟁사의 가격을 시어스 온라인 가격과 비교할 수 있도록 스캐너 기능을 제공한다. 이는 사람들이 시어스에서 최상의 가격을 쉽게 찾을 수 있게 함으로써 ‘쇼루밍^{showrooming [16]}’ 관행을 없애려고 노력하는 동시에 소비자가 가장 합리적인 가격을 찾도록 자율권을 준다.

시어스의 모바일 웹사이트는 스마트폰 사용자가 시어스의 가격과 대조할 아이템을 살필 수 있게한다.

또 다른 사례는 로우스^Lowe’s다. 로우스는 모바일 웹사이트의 매장 위치와 관련한 페이지에서 매장 내 지도를 제공한다. 작게 추가됐지만 일단 사용자들이 매장에 도착하면 이를 이용해 찾고자 하는 것을 더 빨리 찾을 수 있다. 더불어 이 지도는 경쟁 브랜드와이 브랜드를 구별해준다.

로우스의 모바일 웹사이트에서는 매장 위치와 관련한 매장 내 지도를 제공한다.

권장 사항

디즈니 주니어는 자신의 콘텐츠를 경쟁사의 콘텐츠와 차별화하고 사용자에게 가치를 부여하도록 모바일에 특화된 기회를 생각해야 한다.
 

결론

반응형 웹사이트만 만든다고 해서 검색 결과에 최적화되기에는 충분치 않다. 당신이 점수를 매긴다면 디즈니 주니어의 반응형 웹사이트에서 강조하는 콘텐츠의 절반 이상이 스마트폰에서는 유용하지 않다. 물론 웹사이트가 예쁘고, 기기와 상관없이 사용자가 콘텐츠에 접근할 수 있도록 한 것은 칭찬 받을 만하다. 하지만 이 같은 웹사이트를 진정한 의미에서 ‘반응형’이라고 말할 수 있을까? 반응형 디자인에 들어갈 재료들은 모두 있다. 하지만 반응형이라 함은 ‘빠르고 긍정적으로 반응하는 것’을 의미하는데, 바로 이 점에서부터 이 웹사이트는 여러모로 잘못되어 있다.

구글은 사용자 친화적인 반응형 웹 디자인을 선호한다. 또한 구글은 (의도적으로) 사용자가 불만족스러워하는 웹사이트, 사람들이 검색하는 단어를 검색어로 갖고 있지 않는 웹사이트, 경쟁 웹사이트보다 흥미롭지 않은 콘텐츠가 있는 웹사이트에 트래픽을 보내지 않는다. 모바일 SEO와 싸울 때 이 평가가 당신을 모바일 설정에 대한 생각을 좀 더 깊이 할 수 있도록 하길 바란다. 더불어 검색 결과에서 경쟁력을 갖춘 당신만의 반응형 웹사이트를 만들 수 있는 능력을 갖추길 바란다.

다수의 반응형 웹사이트에서 따르지 않는 다음의 기본 SEO 정보로 시작하라.

[1] 디즈니 주니어는 나라별로 버전이 있다.

[2] 색인: 인덱싱이라고도 부르며, 검색엔진이 웹페이지의 간략한 정보를 목록화하여 저장해 놓은 것을 말한다.

[3] 콘텐츠 패리티^{content parity}: 하나의 웹^{One Web} 철학을 적용하여 어떤 종류의 기기에서든지 동일한 콘텐츠를 보여주는 것이다. http://bradfrost.com/blog/mobile/content-parity/

[4] 동적 게재^{dynamic serving}: 페이지를 요청하는 user-agent에 따라 동일한 URL에서 서버가 다른 HTML(및 CSS)로 응답하는 설정이다. https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/dynamic-serving?hl=ko

[5] 링크^{Link equity 혹은 Link juice}: 하나의 페이지에서 다른 페이지로 값을 전달하는 링크. 이는 외부 링크와 내부 링크로 나눌 수 있는데, 특히 외부 사이트에서 들어와 내부 링크에 영향을 주는 링크를 의미한다.

[6] 양방향 설정^{bidirectional annotation}: 구글 개발자 사이트에서는 이를 ‘별도의 URL’로 표현하고 있다(https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls?hl=ko). 개개의 데스크톱 URL에 대해 모바일에 최적화된 콘텐츠를 게재하는 관련 URL을 따로 두도록 설정하는 것을 의미한다.

[7] 스위치보드 태그^{switchboard tags}: 모바일과 데스크톱 페이지 사이를 연결하기 위해 넣는 태그(tag)로 구글에서 제공하고 있다. 즉 에이전트 기반^agent-based의 리디렉션으로 접속한 기기를 감지하고 그에 맞게 자동으로 사용자를 올바른 페이지로 보내는 역할을 한다.

[8] 딥 링크^{deep link}: 연결되거나 검색해 들어간 사이트의 최상위 페이지(홈페이지)를 제외한 나머지 웹 페이지로 연결된 하이퍼링크다. 딥^deep이란 한 사이트에 있는 웹 페이지의 계층구조에 있는 페이지 깊이를 가리키는 말로 계층 구조 내의 최상위 페이지, 즉 홈페이지 아래에 있는 페이지라면 모두 딥이라고 할 수 있다.

[9] 페이지 권위^{page authority}: 어떤 페이지가 검색엔진에서 얼마나 높은 순위로 매겨질지 예측하는, 100점 만점으로 평가한 점수.

[10] 광학 문자인식^OCR: 사람이 아닌 스캐너가 매거진이나 신문 등 인쇄된 도서를 이미지 형태로 읽고 그 내용을 분석하는데, 그림 영역과 글자 영역으로 구분한 다음 글자 영역의 문자를 일반 문서 편집기에서 수정, 편집이 가능한 텍스트 형태로 변환해주는 자동입력 시스템을 말한다.

[11] 북마클릿^bookmarklets: 북마크(즐겨찾기)와 애플릿(applet)의 합성어로 웹 브라우저의 북마크를 활용한 작은 애플리케이션이다.

[12] 자연 검색^{organic search}: 검색 결과 페이지에서 스폰서 광고 위주의 유료 검색을 제외한 나머지 검색 결과를 말한다.

[13] 콘텐츠 발견^{content discovery}:콘텐츠를 적절한 채널에서 적절한 시점에 적절한 사용자에게 노출하는 것이다.

[14] 도어 슬램^{door slam}: 사용자 흐름을 깨고 앱을 다운로드하라고 요청하는 모달 메시지 창이다. http://www.creativebloq.com/mobile/web-needs-fewer-doorslams-and-more-personality-5135640

[15] 사용자 에이전트^{user agent}: 쉽게 말해 신분증과 같은 기능으로 웹사이트에 접속해서 브라우저, OS, 기종 등의 기기 정보를 제공한다.

[16] 쇼루밍^showrooming: 제품을 오프라인 매장에서 자세히 살펴본 뒤, 구매는 가격이 보다 저렴한 온라인 쇼핑몰을 이용하는 현상이다.

[17] 영구적인 리다이렉션: 이 코드는 검색엔진에게 사이트나 페이지가 영구적으로 옮겨졌다고 말해주고 옮겨진 새로운 사이트나 페이지에 대해 색인을 생성하도록 한다.

반응형 웹디자인

국내 최초 반응형 웹디자인의 모든것 출간!

책 미리보기책 상세설명

우리에게 반응형 이미지가 필요한 이유

반응형 이미지는 영원처럼 길게 느껴지는 시간 동안 웹 개발자들이 뜨겁게 논쟁해 온 주제 중의 하나였다. 내 기억으로는 제이슨 그리스비(Jason Grisby)가 아마도 너비의 퍼센티지를 줄이는 것이 충분하지 않고, 이미지를 리사이즈해야 한다는 것을 공개적으로 지적한 첫 번째 사람이었던 것 같다. 그는 원본 반응형 데모 사이트에서 적절하게 사이즈된 이미지들을 제공하면, 작은 스크린 상에서 이미지들의 용량을 78% (대략 162kB) 줄일 수 있다는 사실을 보여주었다.

그 이후로 논의는 우리가 어떤 종류의 솔루션(서버 측, 클라이언트 측)과, 새로운 마크업(srcset vs picture)을 필요로 하는지, 그리고 심지어 어떤 경우에는, 거기에 대해 정말 걱정할 필요가 있는지에 대한 논쟁으로 번졌다.

물론 골치 아픈 문제임에는 틀림없다. 반응형 이미지에 대한 현존하는 솔루션들은 확실히 고유의 복잡성과 간접비용을 수반한다. 당신이 클라이언트 측의 솔루션을 사용하면서 이미지를 한 번 이상 요청하게 되기를 원하지 않는다면, 프리로더(Preloader)를 사용하는 상황에 직면하게 된다. 스티브 소더스(Steve Souders)가 잘 설명했듯이, 이 방식은 방문자들에게 이미지가 보여지는 데에 걸리는 시간에 안좋은 영향을 준다.

얻는 것이 있으면 잃는 것도 있는 법이다. 어떤 솔루션을 사용할지 결정할 때는 솔루션의 복잡성, 프리로더 대 파일 크기 등 모든 요소를 고려해야 한다. 결국 우리는 프리로더 문제를 해결하는 기본적인 솔루션을 갖게 되겠지만, 브라우저들은 정말이지 상당히 꾸물거리고 있는 것 같다. 그 와중에 나는 반응형 이미지 솔루션이 적용되었을 때 페이지 용량을 정확히 얼마나 절약할 수 있는지가 궁금해졌다. 나는 내가 지금까지 작업했던 프로젝트에서 절약한 용량이 상당했다는 것을 알고는 있었지만, 나는 나의 경험이 웹 전체와 비교했을 때 얼마나 일관성이 있는지를 알고 싶었다.

실험 시간이다!

요아브 바이스(Yoav Weiss)는 사이저-소즈(Sizer-Soze)라는 배시 스크립트bash script를 만들었다. 이미지 매직(ImageMagick)과 팬톰(JSPhantomJS)을 이와 함께 사용하면, 최적화와 리사이즈가 된 이미지들을 제공함으로써 당신이 파일 사이즈를 얼마나 절약할 수 있는지를 알아낼 수 있다. 스크립트는 한 번에 한 개의 URL에 맞춰 구축된다. 그래서 나는 471개의 URL을 가진 목록 사이로 이동할 수 있도록 그것을 조금 고쳤다(가이 포쟈니Guy Podjarny가 반응형 성능에 대한 분석에 사용한 것과 같은 목록이다). 내 배시 스크립트 기술은 아주 작다(고 쓰고 거의 없다고 읽는다). 하지만 감사하게도 요아브는 배시 스크립트에 대해서 매우 숙련된 기술을 가지고 있어 기꺼이 나를 도와주고 모든 것이 더 효율적으로 작동하도록 해 주었다.

스크립트는 471개의 URL을 분석해서 결과물을 CSV로 정리해주었다. 각각의 사이트는 360px, 760px, 그리고 1260px의 너비에서 테스트 되었다. 원본 이미지의 전체 크기, 리사이즈 되지 않았지만 최적화된 이미지들의 크기, 그리고 보여지는 크기에 맞게 리사이즈와 최적화가 된 이미지의 크기에 대한 통계가 모아졌다(예를 들어 1200px 이미지가 280px 너비에서 보여지는 경우, 스크립트가 이미지를 280px로 리사이즈 하고 두 개의 크기를 비교했다).

사이저-소즈가 ‘display:none’으로 설정된 이미지를 발견하게 되면, 크기를 0.5초마다(최대 25초까지) 다시 체크하면서 변한 것이 없는지 확인했다. 이 작업은 처음에는 이미지가 숨겨져 있지만 나중에 드러날 수 있는 이미지 기반의 카루셀(carousels)을 감안해서 이루어졌다. 그 시간 동안 이미지가 나타나면, 크기들을 사용해서 파일 저장을 정상적으로 처리했다. 이미지가 전혀 나타나지 않는다면, 이미지의 전체 용량은 낭비된 것으로 기록된다.

그러한 수정사항에도 불구하고, 사이저-소즈에 대한 몇 가지 주의사항이 있다:

실험을 마치자 목록은 402개의 각기 다른 반응형 사이트로 줄어들었다. 원래의 471개 중에 몇 군데는 새로운 URL로 옮기거나 사이트가 폐쇄되어서 사이저-소즈가 찾아낼 수 없었다. 다른 사이트들은 소스 코드에 이미지가 없었다. 일부러 천천히 로딩하는 메커니즘이거나 디자인 자체의 결과물이었다. 하지만, 402개의 사이트는 훑어보기에 좋은 기반이다.

결과 : 총 절약

그럼 결과를 확인해보자! 먼저 전체 통계를 보자.

원본 크기(지금 제공되는 것)가 스크린 크기마다 상당히 일관성이 있다는 것은 크게 놀랄 일은 아니다. 가이Guy의 조사결과와 많은 다른 조사가 이미 이 점을 상당히 잘 입증했다. 놀라운 점은 이런 사이트들이 적절하게 사이즈된 이미지를 제공했을 때 절약량이 얼마나 거대할 수 있는가 하는 점이다. 너비 360px에서 402개의 사이트는 도합 171.62메가의 불필요한 용량을 방문자들에게 제공한다. 반응형 이미지 기법을 사용해서 줄일 수 있는 72.2%의 엄청나게 큰 이미지 용량이다. 작은 스크린만이 혜택을 보는 것은 아니다. 760px과 1260px 크기의 스크린에서는 각각 52.9%, 41.7%의 이미지 용량이 불필요하다.

결과: 평균 절약 용량

사이트 당 평균값을 기준으로 절약량을 확인해보자.

개별 사이트의 관점에서 바라보면, 수치는 더 대단하게 느껴진다. 무손실 최적화를 진행하는 것만으로도, 사이트들은 각각의 스크린 사이즈에 따라 이미지 용량(32-34kb)을 평균 5%줄일 수 있다. 구축 과정에서 쉽게 자동화 되거나 수동으로 하더라도 ImageOptim같은 도구를 사용하면 어려움 없이 할 수 있다는 것을 감안하면, 5%의 성능향상은 쉽게 얻을 수 있는 것이다.

여기에 추가로 이미지들을 적정한 크기로 리사이즈 하면 더 많은 이득이 있다는 점은 놀랍지 않다. 360px 너비에서 사이트들은 평균적으로 436.08kb를 줄일 수 있다. 한번 생각해보자. 하나의 최적화(이미지 리사이즈)가 그렇게 많은 용량을 줄였다는 사실을. 그것만으로도 페이지의 이미지 용량을 603.89kb에서 167.81kB로 줄여준다. 무시해서는 안되는 커다란 차이다.

더 큰 스크린 크기에서는 성능 개선이 미미하긴 하지만(당신이 예상했던 대로), 어떤 방식이든 반응형 이미지 기법을 사용하면 760px 너비로 보여지는 사이트에서는 320kb를 절약할 수 있고, 1260px 사이트에서는 265kB를 절약할 수 있다.

결론

접근방식에 대해 논쟁하고, 새로운 솔루션을 시험하며 우리는 온라인 상에서의 반응형 이미지에 대해 오랫동안 이야기를 나누었다. 때로는 아직도 이 문제를 원활하게 해결하지 못했다는 사실이 실망스러울 수도 있다(적어도 나는 자주 그렇게 느낀다). 하지만 웹이 더 잘 돌아가려면 우리가 더 부지런해져야 한다. 간단해 보이지만 정작 성능을 희생하는 솔루션에 안주해서는 안된다. 하나의 최적화가 페이지 용량의 상당부분을 덜어낼 수 있도록 해주는 사례는 굉장히 드물지만, 지금 우리는 그런 하나의 기법을 정면으로 바라보고 있다.

72% 적은 이미지 용량.

이것이야말로 우리에게 반응형 이미지 솔루션이 필요한 이유이다.

이미지 Images

성능 Performance

반응형 Responsive

이 글은 Code Poet에서 나온 ebook을 번역한 것으로, 웹액츄얼리 북스팀이 Code Poet 으로 부터 허가를 받고 올린 자료입니다. 크리에이티브 커먼즈 저작자표시-비영리-변경금지 3.0 Unported 라이선스에 따라 아래와 같이 이용할 수 있습니다. 원본은 http://timkadlec.com/2013/06/why-we-need-responsive-images/에서 확인 할 수 있습니다.
크리에이티브 커먼즈 저작자표시-비영리-변경금지
※ 내용중에 오번역, 오탈자를 발견하신 경우에는 알려주세요.

※ 웹액츄얼리 북스팀에서 웹디자인 관련 영문번역이나 윤문을 해주실 분을 찾습니다. 관심있으신 분은 메일 보내주세요. books@webactually.com

[편집자주]

팀 카들렉 Tim Kadlec

트위터 @tkadlec
사이트 http://timkadlec.com/

팀 카들렉은 웹 개발자이며 손에 꼽는 웹계의 강연자이다. 위스콘신에 세 딸과 함께 살고있다. 웹에 굉장한 열정을 가지고 있으며 Implementing Responsive Design: Building sites for an anywhere, everywhere web (New Riders, 2012)의 저자이다.

차례

원하는 섹션으로 빠르게 이동하고 싶다면 아래 링크를 이용하기 바랍니다.

서문

지금 이 순간 당신의 사이트는 어떤 스크린에서 마치 ‘죽음’처럼 끔직한 모습으로 보일지도 모릅니다. 또한 당신의 그 처참한 사이트가 방문자들을 쫓아내고 있는 동안 새로운 기기들은 이름도 채 외우기 전에 마구잡이로 쏟아져 나와 이미 처참한 당신의 사이트를 더욱 비참하게 만들고 있지요.

상상 속의 비좁은 CRT에 맞춰진 고정 레이아웃의 시대는 이제 끝났습니다. 그리고 스마트폰, 태블릿, 다양한 크기의 노트북 그리고 엄청난 크기와 해상도를 지닌 모니터를 통해 사이트를 접하는 오늘, 유동 레이아웃도 부족하기만 합니다.
 

그래서 반응형 웹디자인(Responsive Web Design, RWD)이 등장한 것입니다.

지난 2010년 이단 마콧(Ethan Marcotte)에 의해 ‘반응형 웹디자인’이란 신조어가 탄생된 이후 사이트를 반응형으로 만드는 디자이너 및 개발자들의 수가 점점 늘어나기 시작했습니다. 즉 뷰포트에 따른 경험의 차이를 실험한 후 만족도를 극대화하기 시작한 것이죠.
 

그렇다면 이것이 워드프레스 기반의 디자이너와 개발자인 당신에게 무엇을 의미할까요?

코드 포잇(Code Poet)이 이러한 궁금증을 가장 잘 해결해 줄 수 있는 사람들에게 물어보았습니다. 이 소책자를 통해 워드프레스를 반응형으로 디자인하기 위한 크리스 코이어(Chris Coyier), 이안 스튜어트(Ian Stewart) 그리고 새라 캐논(Sarah Canon)의 전략과 실제 사용법을 소개하고자 합니다.

1. 크리스 코이어 Chris Coyier

크리스 코이어는 CSS-Tricks.com의 운영자다. CSS-Tricks는 웹디자인과 개발에 대한 영감과 관련된 모든 것을 배울 수 있는 사이트다. 그는 ‘Digging into WordPress(워드프레스 제대로 파기)’의 공동 저자로, 디자인에 대한 좋은 글귀(quote)들을 모은 QuotesOnDesign.com을 운영한다.

도대체 반응형 웹디자인이 무엇이길래 이렇게 난리인가?

저는 ‘반응형 웹디자인’이란 단어를 처음 사용하고 그 의미를 구체적으로 정립해야 한다고 한 이단 마콧의 말에 동의합니다. 그래야 논의가 쉬워지기 때문이죠. 반응형 웹디자인이란 구체적으로 다음 세가지를 뜻합니다.

사람들은 우리가 만든 웹사이트를 다양한 크기의 브라우저 창을 통해 보기 시작했고, 이러한 경향은 가속화되고 있습니다. 그래서 우리는 사람들이 정확히 어떤 방식으로 우리가 만든 웹사이트를 보는지 알 수 없다는 것을 인정하고 그 변화에 빨리 대처해야 합니다. 왜냐하면 그 미래가 바로 현재이기 때문입니다.

왜 반응형으로 디자인 하는가?

한 가지 큰 이유는 너무 재미있기 때문입니다. 물론 (희망하기는) 사용하고 있는 브라우저나 기기에 상관없이 더 나은 경험을 제공한다는 이유도 있지만 그것은 첫 번째에 따라오는 부수 이익일 뿐입니다.

고객에게 반응형 웹디자인의 중요성을 어떻게 설명하는가?

저는 고객을 직접 상대하지는 않지만 쉽게 설득할 수 있을 것 같습니다. 주머니에 있는 최고급 휴대폰을 꺼내서 자신의 웹사이트를 확인해 보라고 하면 아마도 얼마나 후져보이는지 직접 느끼게 될 것입니다.

저는 웹 애플리케이션 디자인 세계에 살고 있습니다. 대부분의 사람들은 최대한 가장 많은 기기들을 수용하는 것이 이상적이라고 생각하고 있지요. 중요한 것은 개발 스케줄에 잘 맞추고, 적합한 재능을 찾고, 무엇이 가장 중요한 것인지를 결정하는 것 등입니다. 대부분의 ‘앱’ 경우 반응형 웹디자인이 정답은 아닙니다. 처음부터 작은 스크린에 초점을 둔 개발이 중요합니다.

고객의 디자인과 개발을 위해 반응형 디자인을 얼마나 자주 사용하는가? 디자이너 및 개발자로서 당신이 얻는 혜택은 무엇인가?

저는 100% 반응형 디자인 기술을 사용합니다. 프로젝트를 처음부터 새로 시작할 경우 다시는 고정된 사이트로 만들지 않을 것입니다. 혜택이라면 더 많은 사람들이 콘텐츠를 볼 수 있다는 점과 사이트의 미래가 보증된다는 점입니다.

반응형 웹디자인은 고정 디자인보다 쉽지 않습니다. 더 어렵습니다. 하지만 아주 약간 더 어려울 뿐입니다. 디자인의 어려운 점은 바로 디자인입니다. 얼마 전 @Canarymason의 트위터에서 기막힌 글을 읽었습니다.

물론 반응형 웹디자인은 어렵죠. 이건 디자인이니까요.

@canarymason

Of course responsive web design is hard. It’s design. #rwd

— Mason Wendell (@codingdesigner) March 20, 2012

반응형 웹디자인이 알맞지 않은 접근이라고 생각한 사례가 있는가? 있다면 그 이유는?

데이브 루퍼트(Dave Rupert)와 저는 최근 주간 팟캐스트인 ‘Shoptalk‘에서 이단 마콧을 인터뷰한 적이 있는데 바로 이 질문에 대한 그의 답이 마음에 들었습니다.

그는 아주 확고히 자리를 잡은 데스크톱 크기 버전의 사이트가 이미 있다면, 반응형 접근은 적합하지 않을 수 있다고 했습니다. 이런 경우 굳이 사이트를 ‘반응화’하려고 하지 말고 아예 ‘모바일 우선주의’로 새로 시작해서 기존의 사이트를 보완하고 나중에 데스크톱 사이트의 미래를 위한 토대로 사용하라는 것입니다.

제가 한 가지 더하자면 웹앱이 반응형 디자인과 항상 궁합이 잘 맞는 것은 아니라는 것입니다. 모바일 기기마다 상호작용이 너무 달라서 앱 사용시 전혀 다른 접근방식이 필요할 때가 많습니다. 예를 들어 워드프레스만 봐도 모바일 앱과 웹앱이 얼마나 다른지 알 수 있습니다.

반응형 웹디자인을 통해 고객은 물론 당신의 시간과 비용을 더 아낄 수 있었던 사례가 있는가?

제 생각에 반응형 웹디자인은 제대로 만들기 위해 보다 많은 시간이 드는 만큼 처음에 들어가는 비용은 꽤 많을 것이라고 생각됩니다. 하지만 보다 많은 고객들을 확보하게 되는 만큼 결국에는 더 큰 돈을 벌 것이라고 생각합니다. 제가 직접 고객과 상대한다면 바로 이 논리로 반응형 접근을 판매할 것입니다.

반응형 워드프레스 디자인 중 가장 맘에 드는 사이트는 무엇이며 그 이유는 무엇인가?

‘Webdesignerwall.com’과 ‘smashingmagazine.com’의 현재 버전은 둘 다 워드프레스로 만들어졌으며 매우 훌륭합니다. 스매싱매거진의 반응형 디자인 중 놀라운 점 하나는 바로 넓은 폭입니다.

제가 계산할 때 다섯 개의 큰 분기점이 있는데 모두 매우 자연스러운 너비로 설정되어 있습니다. 디자인도 작은 핸드폰 크기의 스크린이나 거대한 규모의 스크린에서도 훌륭합니다. 물론 그 점이 반응형 디자인의 포인트이기는 하지만 320px부터 2000px 이상까지 모든 너비에 맞추어 완벽하게 만들었다는 것은 참으로 놀랍습니다.

‘Webdesignerwall.com’과 ‘smashingmagazine.com’의 현재 버전은 둘 다 워드프레스로 만들어졌으며 매우 훌륭합니다. 스매싱매거진의 반응형 디자인 중 놀라운 점 하나는 바로 다양한 폭입니다.

반응형 웹디자인을 시작할 때 아무 것도 없이 맨 처음부터 시작하는가 아니면 부모 테마(parent theme)나 테마 프레임워크(theme framework)를 사용하는가?

당연히 맨 처음부터 시작합니다. ‘프레임워크(framework)’를 장난 삼아 만들어 본 적은 있습니다만 제가 작업하고 있는 일들은 너무 다양해서 ‘진짜’ 프레임워크의 필요성을 찾지는 못했습니다. 프레임워크의 포인트는 여러 비슷한 프로젝트들을 할 때 시간을 아껴주는 것이라고 생각합니다.

당신의 반응형 웹디자인 작업 과정은 어떠한가?

말씀 드리기에 좀 그렇지만 저는 아직도 데스크톱 레이아웃으로 시작합니다. 요즘 대세는 ‘모바일 우선주의’이고 저 또한 동의하지만 아직까지는 데스크톱/노트북 크기 위주로 디자인한 후 작은 스크린을 위해 필요에 따라 미디어 쿼리로 조절하는 것이 저와는 잘 맞습니다. 데스크톱 레이아웃은 주로 너비가 상대값(%)으로 지정된 크고 float 속성을 가진 요소들로 만듭니다.

이 작업은 다양한 크기의 브라우저에 자동으로 맞춰지는 유동적인 환경을 만들어 줍니다. 그런 다음 모바일을 셔플하기 위해 간단한 미디어 쿼리 몇 개를 씁니다. 요즘의 ^{셔플링(shuffling, 기기해상도의 다양화를 말함)}은 기기의 기본 너비보다 넓지 않은 여러 단(column)을 하나의 단으로 뭉치는 단순한 것이지만 앞으로는 더 복잡해 질 것입니다. 그리고 기본 모바일 레이아웃은 단이 무조건 하나여야 한다는 생각을 버리고 x축(x-axis)을 보다 창조적으로 활용해야 할 것입니다.

그리드와 영역(region)과 같은 CSS 기능들이 발달할수록 브라우저 창이 작아지거나 커짐에 따라 보다 구체적인 콘텐츠 배치가 가능해질 것입니다. 저는 디자이너로서 무엇이 디자인에 있어 중요한지 알만큼 충분한 경험이 있다고 생각합니다. 따라서 저의 최종 디자인은 아마도 모바일 우선주의로 디자인했을 때와도 매우 비슷할 것이라고 생각합니다.

당신이 만든 반응형 웹사이트들은 어떤 것이 있는가?

올해 저는 우푸(Wufoo)와 함께 바캠프투어(Barcamp Tour)를 다시 할 예정입니다. 이미 했던 작업이고 반응형으로 만들었죠. 우푸는 최근에 반응형 요소를 더해서 새로 디자인했습니다. 프런트 엔드 웹디자인에 대한 나의 블로그(css-tricks.com)도 반응형 웹입니다. 그 변천사를 보면 1) 백지 상태에서 2) 모바일 전용 사이트를 거쳐 3) 현재의 반응형 사이트로 거듭나게 되었습니다.

모바일 전용 사이트의 장점은 매우 가볍다는 것(super light-weight)인데, 다시 말하면 낮은 대역폭의 모바일 기기에서 빠르게 작동한다는 것입니다. 저는 결국 코드 포크(code-fork)를 감당할 수 없었습니다.

콘텐츠가 같은 두 개의 사이트를 혼자 운영하는 것은 정말 못할 짓이었죠. 저는 반응형 웹디자인이 다양한 크기의 스크린을 하나의 코드로 디자인할 수 있도록 만든다는 점이 참 좋습니다. 하지만 현재 반응형 웹디자인은 예전의 모바일 사이트 디자인보다는 꽤 무거운 편입니다. 그런 의미에서 우리는 반응형 디자인의 진화과정 중 아직 애매한 곳에 놓여있다고 할 수 있습니다.

반응형 웹디자인의 진화과정에서 이 애매한 곳을 벗어나려면 무엇이 필요하다고 생각하는가?

지금 이 시기를 벗어나기 위해서 필요한 것은 웹페이지가 열리는 (각 기기의) 환경에 맞게 크기를 조절해 줄 수 있는 툴입니다. 예를 들면 브라우저 스크린이 아주 작고 네트워크 연결이 느릴 경우 스크린이 크고 네트워크 연결이 빠를 때 보다는 낮은 해상도의 이미지를 선호할 것입니다. 아쉽게도 이런 툴들은 아직 존재하지 않습니다. 있다 해도 제대로 된 것들이 아니죠. 지금으로선 언제 자료를 불러오고 불러오지 않는지에 대한 정확한 명시, 또는 새로운 이미지 포맷이나 문법(syntax)이 도움될 수 있을 것입니다. 여러 요소들이 복잡하게 얽혀있는 만큼 쉽지는 않겠지만 이에 대한 필요가 너무도 절실하기 때문에 곧 해결책이 나올 것입니다.

반응형 웹을 디자인하고 개발하는 데에 있어 가장 힘든 점들은 무엇인가?

놀랍게도 창의력이 그 중 하나입니다. 반응형으로 디자인하기 위해서는 페이지의 모든 요소들이 다양한 기기에서 어떻게 반응할 것인지 머리 속에 그릴 수 있어야 하는데 이것을 어려워하는 사람들이 있더군요. 물론 숙련되면 극복할 수 있지만 말입니다. 반응형 디자인이란, 모든 것을 ‘상호작용적 디자인’으로 만든다는 것을 뜻합니다. 이것은 고정된 디자인 작업에 익숙한 디자이너에게는 새로운 개념일 것입니다.
 

어떻게 이 힘든 점들을 극복했는가? 어떤 것들이 도움이 되었는가?

저는 이 일을 타고난 사람은 아니지만, 반응형 웹디자인에 충분히 숙련되어 있어서 새로운 디자인을 할 때면 이미 머리 속에 반응형 접근이 자동으로 시작됩니다. HTML과 CSS를 처음 배울 때와 비슷합니다. 나중에 포토샵과 같은 그래픽 레이아웃 툴로 디자인할 때 머리 속에서는 이미 어떤 요소들이 어디서, 어떻게 코드와 어우러져 작동할까 생각되는 것처럼 말입니다.

저는 반응형 디자인에 대한 정보가 그리 많지 않을 때부터 시작했었기 때문에 구체적으로 어떤 자료가 제게 큰 도움이 되었는지 말씀드릴 수는 없습니다. 단 반응형 웹디자인에 관심이 있다면 제가 주저 않고 추천하는 것이 바로 실험입니다. 자주 브라우저 창을 줄이고 늘려보면서 어떤 것이 제대로 작동하는지 확인하는 습관을 갖도록 하십시오.

책, 웹사이트, 테마 프레임워크나 블로그 기사 등 반응형 웹디자인에 관해 직접 도움을 받은 유용한 정보를 추천한다면?

기본에 충실 하려면 먼저 이단 마콧(Ethan Marcotte)의 책(반응형 웹디자인)으로 시작하는 것이 좋습니다. 또한 다른 사람들이 어떤 영감을 통해 사이트를 만드는지 궁금하시면 Mediaqueri.es에 가서 @rwd를 팔로우하면 됩니다. 저라면 처음 시작할 때 프레임워크는 가급적 피할 것입니다. 반응형 디자인은 요약이 필요할 정도로 복잡한 개념이 아니기 때문입니다. 만약 나중에 시간을 아끼기 위해 관심이 생기게 되면 아마도 Golden Grid System(http://goldengridsystem.com)이 유용할 것입니다.

워드프레스 반응형 웹디자인에 대해 나눠 줄 다른 생각은 없는가?

저는 ‘이것이 워드프레스에서 작동할 것인가?!(Will This Work With WordPress?!)’란 제목의 포스트를 쓴 적이 있습니다. 때로 사람들은 워드프레스가 마치 무언가 특별한 방법을 통해서만 가능한 이상한 세계로 생각할 때가 있는데 저는 바로 이 잘못된 관념을 깨기 위해 이 글을 썼습니다.

저는 기본적으로 워드프레스는 당신이 테마의 프런트 엔드에서 무엇을 하든지 큰 관심이 없다고 말씀 드렸습니다. 그 어떤 자바스크립트 프레임워크나 웹에서 찾은 CSS 소스라도 마음껏 사용할 수 있습니다. 그럼에도 워드프레스는 콘텐츠 중심의 사이트에 특히 강합니다.

따라서 이 질문에 보다 직접적으로 답하자면 당신은 분명 반응형 워드프레스 테마를 만들 수 있습니다. 만든 후 반드시 미디어를 확인하십시오. 예를 들면 유동 이미지나 유동 비디오 말입니다.

2. 이안 스튜어트 Ian Stewart

이안 스튜어트는 WordPress.com의 개발을 관리하는 오토매틱(Automattic)사(社)의 테마 전문가로서, 가장 큰 인기를 끌고 있는 워드프레스 테마 여러 개를 만들었다. 그는 아름다운 디자인과 시맨틱 HTML, 그리고 워드프레스를 통해 보다 나은 웹을 만드는 것에 대해 매우 열정적이다.

Themeshaper.com과 오토매틱사의 테마팀 홈페이지에서 그를 만나볼 수 있다. iandanielstewart.com을 개인 사이트로 운영하고 @iandstewart라는 트위터 계정을 가지고 있다.

도대체 반응형 웹디자인이 무엇이길래 이렇게 난리인가?

제게 반응형 디자인이란, 현재 브라우저 창의 크기에 따라 반응하고 조절되는 웹디자인을 뜻합니다. 단순한 아이디어지만 그것으로 인한 디자인 가능성은 엄청납니다.

디자인은 더 이상 브라우저 구석 어딘가에 고정된 이미지가 아니라 살아 숨 쉬는 것이 되어서 어떤 기기를 사용하든지 사이트를 방문할 때마다 즐거운 경험을 제공하게 됩니다. 아주 작은 스마트폰부터 27인치 모니터까지 기기의 크기에 따라 아름답게 반응하죠.

왜 반응형으로 디자인 하는가?

반응형 디자인은 매우 자연스럽습니다. 그저 나에게 이롭다는 이유만으로 무언가를 하기는 어렵죠. 그런데 반응형 웹디자인은 제가 좋아하는 작업 방식과도 잘 맞고 제가 즐겨 사용하는 것을 활용합니다. 깔끔하고, 언제든지 다른 용도로 바꿔 사용할 수 있는 유연한 CSS, 그리고 시맨틱 HTML처럼 말입니다.

그런데 반응형 디자인이 저와 저희가 만든 테마 사용자들은 물론 그들의 독자들에게 이롭기까지 하니 반응형 디자인을 거부하기가 점점 어려워질 뿐이죠.

고객에게 반응형 웹디자인의 중요성을 어떻게 설명하는가?

저는 고객에게 반응형 웹디자인을 설명하는 것이 매우 쉽습니다. 그 이유는 제 고객인 블로거들은 주로 어디서나 ‘똑같이’ 보이는 워드프레스 테마를 절실히 원하기 때문입니다. 즉 그들이 신중하게 선택한 모양 그대로 아름답게, 특히 모든 콘텐츠가 그 어떤 기기에서 보더라도 쉽게 변환되어 제대로 남아있기를 원합니다. 이것을 가능하게 하려면 테마 디자이너의 적잖은 노력이 필요하긴 합니다. 하지만 제대로만 실행된다면, 그들에게 물 흐르는 듯한 자연스러운 경험을 제공하는 것은 반응형 디자인입니다.

고객의 디자인과 개발을 위해 반응형 디자인을 얼마나 자주 사용하는가? 디자이너 및 개발자로서 당신이 얻는 혜택은 무엇인가?

저희는 반응형 워드프레스 테마를 최대한 자주 만들려고 합니다. 테마를 만들고 있지 않을 때에도 저희가 하는 일에 영향을 미치죠. 심지어 고정 너비 디자인을 유동적, 상대값(%) 기반 구조 (반응형 디자인의 토대) 위에 만들 때 나중에 기존 테마에 새로운 디자인 요소나 워드프레스 기능을 추가하기가 매우 용이합니다. 모든 것이 물 흐르듯 자연스러워야 합니다.

반응형 웹디자인이 알맞지 않은 접근이라고 생각된 사례가 있는가? 있다면 그 이유는?

전 아직도 반응형 워드프레스 테마가 불필요한 경우가 있다고 생각합니다. 때로는 다른 크기의 창으로 봤을 때 더 안좋아 보이는 경우도 있습니다. 반응형 디자인으로 ‘모바일’ 사이트를 만들 때 그 콘텐츠가 모바일에 특화된 상황에 있다면, 모바일 전용 테마가 더 좋은 선택일 수도 있습니다.

반응형 워드프레스 디자인 중 가장 맘에 드는 사이트는 무엇이며 그 이유는 무엇인가?

지금 제가 가장 좋아하는 반응형 워드프레스 테마는 독일의 엘마스튜디오(Elmastudio)에서 만든 Piha입니다. 어떤 크기라도 너무도 아름답고 부족한 것이 전혀 없어 보입니다.

책, 웹사이트, 테마 프레임워크나 블로그 기사 등 반응형 웹디자인에 관해 직접 도움을 받은 유용한 정보를 추천한다면?

제게는 이단 마콧의 책과 그의 블로그가 최고의 기준입니다. 하지만 그 무엇보다 가장 중요한 것은 바로 실험과 테스팅입니다. 다음엔 더 많은 테스팅, 그 다음에도 더 많은 테스팅이죠.

반응형 웹디자인을 시작할 때 아무것도 없이 맨 처음부터 시작하는가 아니면 부모 테마(parent theme)나 테마 프레임워크(theme framework)를 사용하는가?

둘 다 입니다. 오토매틱에서는 맨 처음부터 새로운 테마를 만들기 위해 ‘_s’라는 테마(Github에서 무료제공)를 사용하기 시작했습니다. 한편으로는 디자인 과정과 상관없이 사용할 수 있는 것이지만 새로운 반응형 워드프레스 테마를 만들기 위한 프레임워크로 볼 수 있지요. 작은 스크린의 큰 내비게이션 메뉴와 샘플 백분율 기반 레이아웃을 해결하기 위한 자바스크립트 솔루션이 제공됩니다. 반응형 테마를 빠르게 만들기 위해 더 많은 도움이 필요하다고 판단되면 (예를 들면, 미디어 쿼리 안의 스타터 분기점) 아마도 이런 것들이 추가될 것입니다.

당신의 반응형 웹디자인 작업 과정은 어떠한가?

저는 레이어로 CSS를 쓰는 것을 좋아합니다. 매 프로젝트마다 저는 여러 브라우저의 렌더링을 평준화하고 타이포그라피 기본값을 지정하는 리셋을 하고 시작합니다.

이것이 데스크톱 뷰, 즉 가장 평범한 디자인 형태의 기본적인 유동 구조입니다. 이 구조는 기본적으로 사이드바와 콘텐츠 영역의 위치를 조정하는 플로트(float)와 여백(margin)을 포함하는 모든 주요 가로 너비를 뜻합니다. 이 구조를 이렇게 분리시킬 때 레이아웃 실험은 물론 나중에 캐스케이드(Cascade Style Sheet, CSS를 말함)에서 미디어 쿼리로 디자인을 변경하기가 수월해 집니다. 마지막으로 테스팅이 있죠. 아주 많은 테스팅 말입니다.

반응형 웹을 디자인하고 개발하는 데에 있어 가장 힘든 점은 무엇인가? 어떻게 이 힘든 점들을 극복했으며 어떤 자료들이 도움이 되었나?

반응형 디자인의 기초는 유동 이미지인데 워드프레스에서는 이것이 조금 애매할 수 있습니다. 워드프레스에서 너비가 하드코딩 된 이미지는 브라우저에서 작동될 때 문제가 발생할 수 있습니다. 이 점에 대한 저희의 답은 시작 테마인 ‘_s’에서 자세히 설명하고 있습니다.

저희는 워드프레스 테마가 다뤄야 할 가능한 모든 이미지를 신중히 세 가지 선언 블록 안에 선택했습니다. 모든 이미지를 다룰 수 있는 표준 유동 이미지 CSS가 있고 워드프레스 미디어 라이브러리에 추가된 이미지들은 자동높이 조절이 됩니다. 높이와 너비 속성이 모두 하드코딩 되어 있습니다. 또한 IE8에서 매우 크게 보이는 워드프레스 이미지들을 위한 패치도 있습니다.

당신이 만든 반응형 웹사이트들은 무엇이 있는가?

저는 2011 워드프레스 기본(default) 테마인 Twenty Eleven을 만든 것이 가장 자랑스럽습니다. 제 바람은 이것이 반응형 웹디자인의 실질적인 예가 되어서 반응형 디자인 기술을 쉽게 이해할 수 있도록 돕는 것이었습니다.

수많은 개발자들이 Twenty Eleven를 통해 그들의 첫 반응형 워드프레스 테마를 만들 수 있었습니다. 제가 그들에게 도움이 될 수 있었다는 것이 매우 기뻤습니다.

수많은 개발자들이 Twenty Eleven를 통해 그들의 첫 반응형 워드프레스 테마를 만들 수 있었습니다.

3. 새라 캐논 Sara Cannon

그녀의 웃음소리는 @saracannon 트위터 계정과 개인 블로그 sara-cannon.com에서 들을 수 있다.

왜 디자인을 반응형으로 하는가?

콘텐츠가 항상 중심이 되어야 합니다. 우리는 여러 기기에서 콘텐츠가 어떻게 보여질지 조절할 수 있는 능력이 있습니다. 그리고 우리의 의무는 그 점을 숙지하고 기기와 상관없이 콘텐츠가 빛을 발할 수 있도록 하는 것입니다.

네이티브 앱들은 비쌉니다. 여러 프로그래밍 언어로 작성된 다양한 코드를 관리하게 될 것이 뻔한데 이런 모델은 유지가 불가능합니다. 네이티브 앱 모델에서 성공하기 위해 필요한 자원들이 너무도 많기 때문이죠. 반응형 디자인은 똑같이 훌륭한 콘텐츠 경험을 제공해 줄 수 있습니다. 몇 개의 네이티브 하드웨어 혜택을 제외하고는 말입니다. 하지만 이것도 브라우저들이 앞으로 해결해 나가겠죠. 구글이 어떻게 당신의 현 위치를 파악할 수 있는지, 네이티브 카메라 기능을 어떻게 사용할 수 있는지 생각해 보십시오.

브라우저 간의 상호 연결성도 장점입니다. 네이티브 앱은 웹앱과 달리 서로 상호작용을 하지 않습니다. 예를 들면 휴대폰에서 페이스북 이메일 링크를 클릭하면 네이티브 앱이 아니라 브라우저로 연결됩니다. 브라우저 사이트의 해결방안은 하나의 소스 코드 기반의 크로스 플랫폼입니다. 저는 정말로 모바일의 미래는 웹앱에 달려있다고 믿습니다.

고객들에게 반응형 웹디자인이 왜 중요한지 어떻게 설명하는가?

웹사이트의 핵심은 콘텐츠입니다. 콘텐츠가 바로 메시지고 말로 표현된 브랜딩입니다. 어떤 사람이 회사, 제품, 또는 브랜드에 대해 들었을 때 주로 무엇을 합니까? 구글로 검색해 봅니다. 온라인이 당신의 브랜드와 콘텐츠에 대한 첫 인상인 것입니다.

현재 사람들은 태블릿, 게임기, 피드 리더 등 아주 다양한 기기와 방법으로 여러분의 콘텐츠를 접하고 있습니다. 즉 접근 경로가 너무도 다양하기 때문에 기기 자체가 메시지와 브랜드의 장애물이 되어서는 안됩니다.

웹사이트는 어떠한 환경 속에서도 주어진 상황에 매끄럽게 적응할 수 있어야 합니다. 그래야 사람들이 정말 중요한 것에 집중할 수 있기 때문입니다. 모바일은 절대로 나중에 생각해서는 안 되는 것입니다.

com-Score에 따르면 스마트폰 사용자의 수가 약 10억 1,300명에 달한다고 합니다. 태블릿 사용자는 포함하지도 않고 말입니다. 따라서 디자인과 시안(mock-up)을 할 때 이 점을 반드시 유념해야만 합니다. 콘텐츠가 당신 정체성의 열쇠인 만큼 일관된 분기점을 설치하여 가독성을 높이는 것이 매우 중요하기 때문이죠. 사람들이 당신의 브랜드와 소통하는 것을 어렵게 만들어서는 안됩니다.

고객의 디자인과 개발을 위해 반응형 디자인을 얼마나 자주 사용하는가? 디자이너 및 개발자로서 당신이 얻는 혜택은 무엇인가?

저는 제가 작업하는 모든 사이트에 반응형 웹디자인을 사용합니다. 저는 정말로 모바일이 더 이상 나중에 생각해 볼거리가 아니라 이미 주어진것 이라고 믿습니다. 저는 데스크톱에서만 제대로 작동하는 시대는 지났다고 생각합니다.

오늘날의 사회는 모바일을 요구하고 있습니다. 이것은 더 이상 새로운 것이 아니며 직시해야 할 현실입니다.

반응형 웹디자인이 알맞지 않은 접근이라고 생각한 사례가 있는가?

모바일의 중요성을 언급하는 것이 부적절한 경우는 없습니다. 하지만 경우에 따라 전통적인 반응형 기술들이 사이트의 속도를 느리게 할 수 있습니다. 만약 앱처럼 빠르고 세련된 것을 원한다면, 불필요한 소셜 자바스크립트를 제거함으로써 속도를 빠르게 할 수 있습니다. 이것은 별도의 템플릿 파일의 사용을 통해 가능합니다. 이러한 특정 기술들이 꼭 ‘반응형 디자인’이 아니라고 할 수 있는지는 의문이지만 전통적인 용도에서는 분명 벗어난다고 할 수 있습니다.

반응형 웹디자인을 통해 고객은 물론 당신의 시간과 비용을 더 아낄 수 있었던 사례가 있었는가?

언젠가 좀 수상쩍은 회사가 고객에게 연락해서 ‘친-모바일’ 사이트를 만들어 주겠다며 값비싼 ‘서비스’를 제안한 적이 있었습니다. 저는 고객에게 휴대폰을 통해 사이트를 한 번 보라고 했습니다. 그들의 사이트는 이미 별도의 서비스가 필요 없을 만큼 모바일 최적화였기 때문이었습니다. 모두들 깜짝 놀라워했었죠.

반응형 워드프레스 디자인 중 가장 맘에 드는 사이트는 무엇이며 그 이유는 무엇인지요?

저는 foodsense.is와 morehazards.com이 가장 좋습니다. foodsense.is는 콘텐츠를 돋보이게 하기 위해 레이아웃 전체를 과감히 바뀌는 것을 두려워하지 않는 점이 좋습니다. morehazards.com은 모바일로 갈 때 불필요한 것들을 과감히 제거하는 것을 두려워하지 않는 점이 좋습니다.

foodsense.is는 콘텐츠를 돋보이게 하기 위해 레이아웃 전체를 과감히 바뀌는 것을 두려워하지 않는 점이 좋습니다.

morehazards.com은 모바일로 갈 때 불필요한 것들을 과감히 제거하는 것을 두려워하지 않는 점이 좋습니다.

책, 웹사이트, 테마 프레임워크나 블로그 기사 등 반응형 웹디자인에 관해 직접 도움을 받은 유용한 정보를 추천한다면?

Less Framework 4

반응형 웹디자인을 시작할 때 아무 것도 없이 맨 처음부터 시작하는가 아니면 부모 테마(parent theme)나 테마 프레임워크(theme framework)를 사용하는가?

저는 주로 Twenty Eleven 테마를 기준으로 제작합니다. 하지만 때로는 Twenty Eleven이 제공하는 것 보다 많은 것을 포함해야 할 때도 있습니다. 더 많은 미디어 쿼리, Fitvid(삽입된 비디오의 크기를 유동적으로 조절해 주는 라이브러리), 또는 좀 더 복잡한 사이트를 위한 다른 기술 말입니다.

당신의 반응형 웹디자인 작업 과정은 어떠한가?

저는 주로 디자인을 먼저 하고 그 다음 몇몇의 분기점들로 실험을 해봅니다. 큰 스크린(최대 분기점), 노트북, 아이패드 그리고 아이폰 등으로 확인합니다.

저는 콘텐츠에 가장 적합한 균형을 찾은 후에 개발을 계획합니다. 어떤 이들은 ‘모바일 우선주의’로 접근하지만 저는 개발 단계에서는 노트북을 기준으로 코딩을 한 후 조절하는 것이 잘 맞습니다.

언젠가는 분명 보다 모바일 UI 중심의 디자인으로 인해 모바일 우선 접근을 택해야 할 날이 올 것이라 믿습니다.

지금까지 제가 작업했던 사이트들은 업무나 상호작용 위주(의 서비스 사이트)가 아닌 (블로그나 뉴스사이트 같은) 콘텐츠 배포와 읽기 위주의 사이트였습니다. 제 작업 과정을 간단하게 정리하자면,

반응형 웹을 디자인하고 개발하는 데에 있어 가장 힘든 점은 무엇인가?

사이트가 런칭된 후에 기능들을 개발하는 것이 아닐까 합니다. 새로운 템플릿이나 기능을 추가할 때마다 다시 돌아가서 반응형 테스트를 해야 합니다. 이때 테스팅 과정이 보통 브라우저와 OS 테스팅보다 훨씬 오래 걸립니다.

어떻게 이 힘든 점들을 극복했습니까? 어떤 것들이 도움이 되었나요?

저는 많은 기기들을 소유하고 있고 그것들을 모두 테스팅에 사용합니다. 하지만 몇 개의 테스팅 프로토콜을 더 갖고 있는 것이 도움이 됩니다. 크롬의 개발자 도구(Chrome dev tools)는 쉽고 빠른 테스팅을 위해 사용자 에이전트를 바꿀 수 있습니다. 또한 firebug 툴도 있고 소스를 보기 위해 아이패드와 아이폰에 설치할 수 있는 bookmarklets도 있습니다. 그리고 Kindle Fire를 구입하는 것도 도움이 됐죠. 사용자 수가 빨리 늘고 있거든요.

당신이 만든 반응형 웹사이트들은 무엇인가?

저는 Twenty Eleven의 자식테마로 PandoDaily.com을 만들었습니다. 오토매틱 테마팀(Lance (Willett), Ian (Steward), 등)이 만들어 놓은 기초 위에 제작할 수 있어서 너무 좋았습니다. 그 덕분에 지속적으로 업데이트 될 것이기 때문이죠.

저는 Twenty Eleven의 자식테마로 PandoDaily.com을 만들었습니다.

RWD RESOURCES

추가 참고 읽어볼 목록 FURTHER READING

추가 참고 청취할 목록 FURTHER LISTENING

추가 참고 시도해볼 목록 FURTHER EXPERIMENTATION

TWITTER

A Code Poet Book

‘워드프레스, 반응형 디자인을 만나다’는 워드프레스를 통해 고객, 친구, 그리고 가족을 위해 사이트를 제작하는 사람들을 위해 출간된 무료 책자 시리즈의 첫 번째 책으로서 이들의 필요와 실질적인 전략을 중점적으로 다루고 있습니다.

코드 포잇(Code Poet)의 추가자료를 원하거나 가입하여 업데이트 자료를 받아 보길 원하시면 codepoet.com을 방문해 주십시오. 또한 방문하셔서 여러분의 의견을 말씀해 주시기 바랍니다. 여러분의 아이디어를 꼭 듣고 싶습니다.

이 글은 Code Poet에서 나온 ebook을 번역한 것으로, 웹액츄얼리 북스팀이 Code Poet 으로 부터 허가를 받고 올린 자료입니다. 크리에이티브 커먼즈 저작자표시-비영리-변경금지 3.0 Unported 라이선스에 따라 아래와 같이 이용할 수 있습니다. 원본은 www.codepoet.com에서 확인 할 수 있습니다.
크리에이티브 커먼즈 저작자표시-비영리-변경금지

※ 내용중에 오번역, 오탈자를 발견하신 경우에는 알려주세요.

※ 웹액츄얼리 북스팀에서 웹디자인 관련 영문번역이나 윤문을 해주실 분을 찾습니다. 관심있으신 분은 메일 보내주세요. books@webactually.com

[편집자주]

마이클 픽 

트위터 @madebypick
플릭커 http://www.flickr.com/photos/smashcut/
비메오 http://vimeo.com/smashcut
http://michaelpick.wordpress.com
마이클은 애니메이션 및 멀티미디어의 모든 것을 천재적으로 다루는 오토매틱(Automattic)의 엔지니어다.

만약에 마이클이 웹 사이트에 빠져있지 않다면 당신은 어쩌면 에스프레스를 많이 마시고 있는 그를 일본 삿포로에서 찾을 수 있을 것이다.  

이단 마콧 Ethan Marcotte

반응형 웹디자인

국내 최초 반응형 웹디자인의 모든것 출간!

책 구매하기책 미리보기책 상세설명

독자 여러분, 안녕하세요? 웹액츄얼리는 어 북 어파트A Book Apart와의 파트너십을 통해 ‘아름다운 웹사이트 만들기’ 시리즈를 발간하고 있습니다.

어 북 어파트는 웹표준 기술의 세계적인 선구자이자 글로벌 웹디자인계의 진정한 그루Guru인 제프리 젤드먼Jeffrey Zeldman이 설립했습니다. 그는 글로벌 웹디자인계에서 실력 있고 전도 유망한 최고 전문가들에게 집필을 의뢰해 웹디자인 작업에 필요한 핵심 분야의 책을 출간하고 있습니다.

이 책은 그중 네 번째로 출간된 《반응형 웹디자인》입니다. 현재 글로벌 웹디자인계는 하루가 다르게 변화하고 있습니다. 빠른 혁신을 통해 출판 고유 영역의 많은 디자인 관련 기술을 웹에 접목시키고 있습니다. 이 책에서 소개하는 ‘반응형 웹디자인’은 출판의 제약을 뛰어넘는, 웹의 가변성을 십분 활용하는 기술들을 보여줍니다.

모바일 시장은 그 어느 때보다 빠르게 성장하고 있습니다. 웹디자인 영역에서 사용자의 편의성을 위해 시장에 진입하고 있는 각기 다른 기기와 그에 따른 해상도를 따라잡는 것은 점점 어려워지고 있습니다. 이 시점에서 하나의 가능성으로 떠오르고 있는 것이 바로 ‘반응형 웹디자인’입니다.

이 책의 저자인 이단 마콧은 가변 그리드, 가변 이미지, 미디어 쿼리의 기술을 결합해 웹디자인에 대한 우리의 사고방식을 변화시켰으며, ‘모바일 우선주의’의 철학을 적용해 좀 더 책임감 있는 반응형 웹디자인을 제안하고 있습니다.

웹액츄얼리팀이 2011년 애틀란타에서 열린 ‘An Event Apart’ 컨퍼런스에 참석했을 때 이단 마콧은 ‘반응형 웹디자이너의 작업 흐름The Responsive Designer’s Workflow’이라는 강연에서 이 책의 5장에서 작업 중인 프로젝트라고 소개한 ‘보스톤 글로브’ 사이트의 프로토타입을 공개했습니다. 브라우저의 크기에 따라 레이아웃이 유연하게 바뀌는 것을 보고 관객들의 반응은 무척 뜨거웠습니다.

또한 그는 방대한 콘텐츠를 다루는 이 사이트를 반응형 웹사이트로 리뉴얼하는 과정을 소개하고, 반응형 웹사이트를 작업할 때 바뀌어야 할 우리의 웹디자인 작업 과정에 대해 자세히 설명했습니다. 반응형 웹 프로젝트를 성공적으로 이끄는 방법은, 디자이너와 개발자 두 팀이 고도로 협력하여 디자인, 개발, 검토 과정을 반복하는 방식으로 바뀌어야 한다는 것이었습니다.

지금까지 웹사이트를 만드는 방식이 철저히 분업화된 선형적 워크플로우 방식이라면, 반응형 웹디자인의 작업 방식은 서로 협력하여 이루어지는 원형 방식이라고 할 수 있습니다. ‘디자이놉먼트(디자인design+개발development)’라는 새로운 단어를 통해 디자인과 개발 과정의 반복과 협업 방식의 중요성을 강조하고 있습니다. 그만큼 디자인과 개발을 따로 떼어 독립적으로 생각할 수 없다는 말입니다. 웹액츄얼리팀도 처음 회사를 만들 때부터 이런 워크플로우를 통해 팀 조직을 꾸려 웹사이트를 제작해왔습니다. 이 책을 읽어보시면 어떻게how 그리고 왜why 이런 방법으로 웹사이트를 제작해야 하는지 분명한 이유를 알 수 있을 것입니다.

기술도 중요하지만 무엇보다 성공적인 반응형 웹디자인의 조건은 첫째, 사용자에 대해 면밀히 조사하고, 둘째, ‘모바일 우선주의’에 맞는 철학으로, 셋째, 디자인과 개발의 유기적인 협업 방식이라고 할 수 있습니다.

반응형 웹디자인은 이제 시작 단계입니다. 새로운 개발 툴과 좀 더 쉬운 접근법이 계속 소개되고 있습니다. 사이트에 접속하는 브라우저와 기기가 늘어날수록, 데스크톱 그 이상의 사이트 제작에 관심을 갖는 사용자가 많을수록 웹의 제작 방법과 웹디자인 과정, 웹디자인에 대한 질문과 적용 가능한 해결 방안 등이 수없이 검토되어야 합니다.

이 책을 통해 많은 웹디자인 관련 종사자가 멋진 ‘반응형 웹사이트’를 만들 수 있기를 기대해봅니다.

웹액츄얼리 북스팀

이단 마콧 Ethan Marcotte

반응형 웹디자인

국내 최초 반응형 웹디자인의 모든것 출간!

책 구매하기책 미리보기책 상세설명

최근 국내에도 워드프레스에 대한 관심이 점점 높아지고 있습니다. 워드프레스만을 전문으로 서비스해온 웹액츄얼리팀에 대한 관심도 함께 커지고 있습니다. ^^v

웹액츄얼리팀은 지난해 7월부터 흥미로운 웹기술을 연구해 왔는데요.
바로 ‘반응형 웹디자인(Responsive Web Design)’입니다. 테블릿PC를 비롯한 다양한 모바일 기기에서 각각의 해상도에 맞는 UI로 레이아웃을 변형하여 보여줌으로써 사용자에게 최상의 모바일 경험을 제공하는 기술을 말합니다. 미국의 이단 마콧(Ethan Marcotte)이라는 웹개발자가 처음으로 고안한 CSS3 관련 기술(new mindset)입니다.

여기에 워드프레스 기반으로 반응형 웹디자인을 적용했기 때문에 디바이스 마다 각각 콘텐츠를 만들지 않아도 됩니다. 한번의 콘텐츠 업데이트로 모든 디바이스에 최적화된 콘텐츠를 볼 수 있습니다. 이렇듯 이 기술을 사용하게 되면 브랜드의 아이덴터티의 일관성을 통해 웹과 모바일의 비즈니스 전략을 효율적으로 가져갈 수 있습니다. 아직까지는 계속 혁신중인 영역이라 완성도가 높은 것은 아닙니다. 애플 iOS나 구글 안드로이드 환경의 모바일 애플리케이션에 비해 부족한 면도 많습니다. 하지만 글로벌 웹디자인계에 있는 수많은 웹디자이너와 웹개발자들이 다양한 기능 개선팁들을 쏟아내고 있습니다.

웹액츄얼리팀은 우리의 웹사이트를 먼저 실험해보았습니다. 워드프레스 기반에 반응형 웹디자인 기술을 적용해서 제작했습니다. ‘베타’버젼이라 여기저기 부족한 부분도 많이 있습니다. 지금 웹사이트, 테블릿PC, 스마트폰에서 웹액츄얼리 사이트에 들어가 보세요. 디바이스에 따라 달라지는 UI/UX를 경험해 보실 수 있습니다. 컴퓨터 앞에 앉아 계신다면 지금 웹브라우저 창을 마우스로 줄여보세요. 브라우저의 크기에 맞춰서 알맞게 변하는 레이아웃을 확인할 수 있습니다.

2008년때 만들었던 웹액츄얼리 브랜드페이지(http://webactually.com)는 워드프레스 테마 중 가장 대표하는 일반적인 형태의 폼이었습니다. 많은 분들이 사랑해 주셨고 정이 많이 들었던 사이트였습니다. 이번에 웹액츄얼리 브랜드페이지를 ‘워드프레스 반응형 웹디자인’으로 개편한 이유는 여러가지가 있습니다.

반응형 웹디자인으로 적용한 이유

모바일 시장의 빠른 성장

전문 리서치 회사들이 예상한 것보다 훨씬 빠른 속도로 모바일 시장이 커지고 있고, 사용자들도 빠르게 스마트폰 사용 환경에 익숙해져 가고 있습니다.

스마트폰 사용자의 빠른 적응력

사용자들은 언제 어디서나 모바일로 빠르게 원하는 정보를 찾고, 글을 읽고 피드백을 주고 또는 받고 싶어 합니다. 이왕이면 다홍치마라고 기왕이면 모바일 환경에 최적화된 UI에서 정보를 보고싶어하는 사용자들이 점점 늘어가고 있습니다.

모바일 앱에서 모바일 웹으로

스마트폰 시장의 초창기에는 모바일앱이 유행하여 앞다투어 앱을 만들던 시기도 있었습니다. 하지만 점점 다양한 모바일 디바이스와 사이즈의 기기들이 출시되면서 앱개발자들의 고민이 시작되었습니다.

댄장! 도대체 몇개의 앱을 만들어야 하는 거지?

웹액츄얼리팀에서는 6월경에 이단 마콧이 직접 저술한 반응형 웹디자인(Responsive Web Design) 도서를 번역출간할 예정입니다. 모바일을 우선으로 생각하는 요즘 시대에 반응형 웹디자인은 합리적인 제작 비용과 유지보수 편이성을 제공할 뿐만 아니라 사용자에게는 편리한 UI를 통한 높은 가독성을 제공합니다.

이 책을 통해 국내 웹디자인 종사자 여러분들도 최신 글로벌 웹디자인 기술을 경험해보시기 바랍니다. 여러분들의 고객이 만족을 하실 것입니다. 그리고 바쁜 일정에도 이번 ‘웹액츄얼리 워드프레스 반응형 웹디자인 개편’ 프로젝트에 참여해준 웹액츄얼리 팀원들께 감사의 뜻을 전합니다.

이단 마콧 Ethan Marcotte

반응형 웹디자인

국내 최초 반응형 웹디자인의 모든것 출간!

책 구매하기책 미리보기책 상세설명

AEA 컨퍼런스가 시작되기 전날 밤. 준비중인 로비 모습

AEA(An Event Apart) 컨퍼런스에 참석하기 위해 18시간의 비행 끝에 도착한 아틀랜타 인터콘티넨탈 벅헤드. 작년 FOWD(Future Of Web Deisgn) 컨퍼런스에 이어 올해 두번 째 웹디자인 컨퍼런스 참가다.

AEA(An Event Apart)는 CSS의 선구자인 에릭 마이어(Eric Meyer, @meyerweb)와 제프리 젤드먼(Jeffrey Zeldman, @zeldman)이 공동 호스트로 미국 주요 도시에서 매년 개최한다. 2일 간의 컨퍼런스와 1일의 워크샵 일정으로 이루어져 있다. 하루 6개의 세션으로 이루어져 있는 컨퍼런스에서는 각 분야 스타 웹전문가들이 웹에 대한 견해와 노하우를 발표한다.

‘웹을 만드는 사람들을 위한(For People Who Make Websites)’이라는 캐치프레이즈처럼 AEA는 웹표준에 기반한 코딩, 웹디자인, 유저빌리티, 콘텐츠등의 전반적인 내용을 다룬다.

올해 웹액츄얼리는 A Book Apart에서 출간하는 제레미 키스(Jeremy Keith, @adactio)의 <웹디자이너를 위한 HTML5>의 판권 계약을 시작으로 제레미 키스와 제프리 젤드먼과의 인연을 시작했다.

이번 AEA 컨퍼런스에서 이 두 거장을 직접 만나 한국에 출간된 책에 관한 에피소드와 웹에 관한 이야기를 나눌 생각을 하니 가슴이 설레이고 뿌듯해져 온다.

컨퍼런스 첫째 날. 시작 전의 컨퍼런스홀의 모습

첫째 날 일찍 도착한 컨퍼런스홀. 잘 정돈된 자리와 빵빵한 Wi-Fi. (국내에서는 어디가나 잘 터지는 Wi-Fi 이지만, 해외에 나가면 이런 것에 감동 받는다.) 아직까지 컨퍼런스홀이 한산한 이유는 로비에서 조식을 제공하기 때문 ^^. 그럼 멋진 하루의 시작을 위해 나도 조식을 먹으러 잠시 실례~

첫째날 조식 photo from zeldman

DAY 1.

웹디자이너가 반드시 알아야 할 점(What Every Web Designer Should Know) – by 제프리 젤드먼

제프리 젤드먼의 기조 연설

제프리 젤드먼의 기조 연설로 시작된 AEA 컨퍼런스. 젤드먼은 2일간 컨퍼런스에서 다룰 주제에 관한 자신의 견해와, 오늘 날 웹디자이너들이 갖추어야 할 스킬과 기회에 대해 연설했다. 주옥과 같은 말들이 제프리의 연설에서 쏟아져 나왔다.

반응형 웹디자인(Responsive Web Design)을 강조하며, 디바이스에 맞는 웹디자인 및 그에 맞는 콘텐츠의 중요성도 언급했다.

Devoid from content you fall back on style.
스타일에 의존하는 콘텐츠를 피하라.

Websites are simply delivery systems for content.
웹사이트는 단지 콘텐츠를 전달하기 위한 배달부이다.

또 지금은 HTML5의 대두로 인해 새로운 기술들이 하나로 집중되고 있는 시점임을 설명하고, 웹디자이너가 되기에 가장 좋은 시기임을 강조했다. 새로운 기술들을 배우지 않으면 뒤쳐질 수 밖에 없다고 당부하였다.

심리학이 디자인에 미치는 영향(The Impact of Psychology on Design – by 사라 파멘터

사라 파멘터(Sarah Parmenter)

사라(@sazzy)는 심리학적 원리가 웹디자인에 대한 관점을 어떻게 재구성시켜 줄 수 있는지에 발표했다. 속도, 단순함, 놀람, 사회적행동, 감동이라는 5가지 심리학적 관점으로 살펴본 사례를 설명하고, 심리학적 요소를 웹에 추가 해 볼 것을 제안했다. ‘우리가 가장 잘 알고 있다고 생각하는 것에 대해 전혀 새로운 아이디어를 제공할 것이다.’ 라고 제안했다.

웹타이포그라피(On Web Typography) – by 제이슨 산타 마리아

제이슨 산타 마리아(Jason Santa Maria)

제이슨(@jasonsantamaria)은 현재의 웹폰트와 타이포그라피의 웹 접근방법에 대해 논했다. 2008년 18개에 불과했던 웹폰트가 오늘날 그 수가 폭발적으로 늘어나고 있다. 이러한 웹폰트의 홍수 속에서, 웹에서 효과적으로 타이포를 사용할 수 있는 모범적 사례들을 설명했다.

Bigger is better. Always err on side of making things bigger than smaller.
큰 것이 낫다. 실수를 해도 작게 만드는 것 보다 크게 만들어서 실수하라.

Contrast is the most important tenant of design.
대조는 디자인에서 가장 중요한 요소이다.

Line length: have enough space so the eye does not get lost.
라인의 길이: 충분한 공간을 두어서 시선을 잃지 않게 하라.

모바일 웹디자인의 움직임(Mobile Web Design Moves) – by 루크 로블루스키

루크 로블루스키(Luke Wroblewski) photo from ifiamblue

루크(@lukew)는 스마트폰 사용자의 증가와 함께 모바일에서 웹콘텐츠를 읽는 사용자의 시간별 이용 패턴을 통계로 설명했다. MOBILE FIRST! 모바일을 먼저 고려하여 웹을 설계하고 콘텐츠도 모바일에 맞게 설계해야 한다고 강조했다. 모바일웹에서 흔히 저지르는 UI 실수와 스마트하게 해결할 수 있는 솔루션을 다양한 사례와 함께 설명했다.

반응형 웹디자이너의 작업흐름(The Responsive Designer’s Workflow) – by 이단 마콧

이단 마콧(Ethan Marcotte) photo from ifiamblue

이단(@beep)은 현재 진행중인 보스턴 글로브Boston Globe 신문사 리뉴얼 프로젝트에서 적용하고 있는 반응형 웹 디자인(Responsive web design)의 작업원리와 작업흐름을 설명했다. 반응형 웹디자인의 근본에는 반응형 작업 프로세스가 선행되어야 한다고 말하고, 기존 인쇄 프로세스를 답습했던 현재의 웹디자인 프로세스도 변화해야 한다고 강조했다.

연기 때문에 눈물이나요(Smoke Gets In Your Eyes) – by 앤디 클락

앤디 클락(Andy Clarke)

앤디(@malarkey)는 순수 CSS3만을 사용해서 만든 에니메이션을 보여주고, 작업 방법에 대한 노하우를 공개했다. animatable.com 이라는 온라인 CSS3 에니메이션툴을 이용해 만든 무비 타이틀 제작법을 동영상으로 만나보자.

A first look at Animatable from Andy Clarke on Vimeo.

Break Time

쉬는 시간 - 애플 로고들...

쉬는 시간 잠시 뒤를 돌아보니… 애플 로고들이 눈에 많이 들어온다. 군데 군데 아이패드, 아이폰… 한 80%는 애플인듯.

DAY 2.

유동형 박스 사용하기(Using Flexible Boxes) – by 에릭 마이어스

에릭 마이어스(Eric Meyer)

공동 주최자인 에릭 마이어스(@meyerweb)는 CSS의 대가이다. An Event Apart 사이트에 적용된 유동형 박스의 다양한 사례들을 공개했다. (이런 천재들 같으니라고… 간결하고 함축적인 그의 코드를 감상(?) 하고 있자니.. 이건 코드가 아니라 한편의 시와 같다고 해야할 것 같다.)

디자인 원칙(Design Principles) – by 제레미 키스

나의 카메라 렌즈를 발견하고 멋진 포즈를 취해 준 제레미 키스

웹, HTML5, 자바스크립트의 디자인 기본 원칙에 대해 설명하고, 각각에 맞는 목적을 설정하고 그에 맞는 기본 원칙을 만들고, 패턴을 만들어 나가야 한다고 주장했다. 때로는 너무 많은 디자인 원칙들이 사용자를 혼란스럽게 한다. 목적에 맞는 최소한의 원칙을 만드는 것이 중요하다고 설명했다.

아이디어에서 인터페이스까지 (Idea to Interface) – by 아론 월터

아론 월터(Aarron Walter)

메일침프의 UX 디자인 디렉터 아론(@arron)은 자신만의 프로젝트를 실행해 볼 것을 제안한다. 아르키메데스의 그 유명한 유레카(알았다)는 그가 일을 할 때 발견한 것이 아니다. 가장 릴렉스한 시간에 아이디어가 나왔다. 트위터, 페이스북 등의 아이디어는 일을 할때 나온 아니디어가 아니다. 나만의 프로젝트를 할 때 언제나 최고/최선의 방법을 제시할 필요가 없다. 아이디어를 내고 개발. 발전시켜나가는 과정에서 많은 것을 배울 수 있다고 한다. 아론은 아이디어를 내고 만들어가는 크리에이티브 프로세스를 위한 다양한 팁을 제시했다.

링크의 일생(The Secret Lives of Links) – by 자리드 스풀

Jared Spool(자리드 스풀)

강연 전에 옆자리 친구가 스타 강사라고 먼저 귀뜸을 해주었다. 소문대로 재미있는 외모만큼이나 가장 재미 있었던 강연이었다.

자리드(@jmspool)는 웹사이트에서 링크가 가지는 중요성을 다시 설명하고 모든 사이트에는 사람들이 방문하는 목적이 있는데, 그 목적을 정확히 파악하고 링크를 제시하는 것이 중요하다고 말했다. 이어서 링크가 가져야 할 조건과 기능을 잘못된 사례를 들어 설명했다. 연설 마지막에는 갑자기 자기도 오프라가 되고 싶다며 새로 출간될 책의 PDF를 컨퍼런스에 참석한 모든 사람에게 나눠주어 사람들에게 환호를 받았다.

콘텐츠 전략 로드맵(A Content Strategy Roadmap) – by 크리스티나 할보슨

크리스티나 할보슨(Kristina Halvorson) photo from Pete Karl II

크리스티나(@halvorson)는 콘텐츠 전략을 세우는 프로세스에 관한 전반적인 과정(컨설팅부터 보고까지)과 사례를 설명했다. 아직 국내에는 웹콘텐츠 전략 전문가가 없어서 크리스티나의 강연이 많은 도움이 됐다. 콘텐츠 전략을 위한 노하우는 질문을 많이 하는 것. 이를 바탕으로 클라이언트 회사가 가지고 있는 진정한 가치를 바탕으로 콘텐츠를 구체화 할 수 있다고 한다.

실패,DNA,깊이를 알수 없는 웹(Disaster, DNA, and the Fathomless Depth of the Web) – by 제프 밴

제프리 밴(Jeffrey Veen)

웹폰트 회사 타입킷(Typekit)의 대표 제프리 밴(@veen). 이번 컨퍼런스의 스폰서이다. 타입킷이라는 벤쳐 회사를 설립하기 까지의 수많은 실패의 연속. 그것을 기쁘게 받아들이고 하나 하나 해결해 나갔던 타입킷 맴버들의 모습에서 성공한 벤쳐 회사에서 느낄 수 있는 열정과 도전 정신을 본받을 수 있었다.

Party

파티에서 자정이 될때까지 웹의 프로세스에 관해 이야기를 주고 받았던 친구들

컨퍼런스가 끝난면 바로 스폰서에서 주최하는 이브닝 파티가 열린다. 이 파티에서는 모든 참석자들과 강연자들과의 자연스러운 대화가 이루어 진다. 컨퍼런스 강연중에 궁금했던 점, 웹 프로세스에 관한 의견, 각자의 노하우나 소스 공유 등 웹에 대한 이야기를 밤새워 이야기 할 수 있는 자리이다.

with Web Stars

도로시, 제레미 키스, 나, 리카르도

한국에서 준비해온 선물을 전달했더니 기뻐하는 제레미 키스

영국에서 AEA 컨퍼런스 강연을 위해 온 제레미 키스. 우리 회사에서 그의 책 “HTML5 FOR WEBDESIGNER”를 한국어로 번역했다고 나에 대해 소개했더니 금방 친해졌다. 트위터나 웹에서 만났던 제레미 키스는 약간 차갑고 냉소적인 인상이었는데, 실제로 만나서 대화를 해보니 감성이 풍부하고 모든 사람에게 친절한 그야말로 영국 신사였다.

장난스러운 포즈를 취해 보이는 제프리 젤드먼

제프리 젤드먼은 AEA의 호스트였기 때문에 정말 분주해 보였다. 컨퍼런스의 이모저모를 챙기고 강연 내용을 트위터에 올리고 사진 찍어서 플리커에 올리고 강사들 일일이 챙기고 참석자들의 질문에 꼼꼼히 답변해주고… 최고의 위치에 오른 사람들에게서 볼 수 있는 특유의 여유와 부지런함이 몸에 자연스럽게 베어있다. 몸으로 뛰는 그의 모습에서 열정을 읽을 수 있었다.
항상 입가에 웃음을 머금고 모든 사람을 유쾌하게 만드는 재주가 있는 제프리 젤드먼. 나를 직접 찾아와서 먼저 인사를 나누고 사진 같이 찍자고 재촉하는 그의 모습에 웃음이 절로 나왔다.

마치며…

제프리가 자신의 아이폰으로 직접 찍은 내 모습.

웹컨퍼런스에 참석하면 항상 느끼는 점이 있다. 제프리가 기조 연설에서 언급했던 “웹에서는 새로운 기술들을 배우지 않으면 뒤쳐질 수 밖에 없다”는 말이다. 이번 컨퍼런스에서도 과제를 가득 안고서 한국으로 돌아가게 된다. 이 과제들을 웹액츄얼리의 브랜드페이지 서비스에 잘 적용시켜 글로벌 스탠다드에 맞는 서비스를 해야겠다는 욕심이 든다.

추가하여..

a book apart 에서 출간된 책

AEA에서 강연한 제레미 키스, 루크 로블루스키, 이단 마콧, 아론 월터의 책을 곧 한국에서도 만나실 수 있습니다. 자세한 내용은 books.webactually.com을 방문해 주세요~

AEA 컨퍼런스의 현장 사진을 더 보고 싶으세요?
웹액츄얼리 플리커를 방문해 보세요~