[[Mobile-First-and-RWD]]

모바일 퍼스트/반응형 웹 디자인 이해

모바일 퍼스트란?

웹 디자인을 할때, 모바일을 먼저 생각해서 디자인/프로그래밍을 한다는 개념으로, Luke Wroblewski (이하 LukeW) 에 의해서 주장되었습니다. 아래의 내용은, 공개된 pdf 화일가 출처입니다.

  • 모바일의 엄청난 성장 = 기회 ( GROWTH = OPPORTUNITY )
  • 모바일 기기의 제약 = 집중 ( CONSTRAINTS = FOCUS )
  • 모바일 기기의 기능 = 혁신 ( CAPABILITIES = INNOVATION )

LukeW는 모바일 퍼스트가 가능한 그리고 필요한 이유에 대해서, 위의 세가지 조건과 가능성을 제시했습니다. 모바일의 성장과 모바일 기기가 가지고 있는 기능들에 대해서는 우리가 일상생활에서 지켜보고 또 사용하고 있으니 다시 얘기할 필요가 없겠지만, 모바일의 제약을 집중의 기회로 보는 것이야 말로, 모바일 퍼스트의 핵심이라고 생각합니다.

그가 들은 제약은 세가지로, 1) 스크린의 크기, 2) 네트워크 속도/품질, 3) 사용하는 모드, 등이며, 이들 제약들이 모두 모바일 사이트를 보다 컨텐츠 중심으로 불필요한 기능/형식/꾸미기/이동 등을 강제로 최소화시키는 집중된 사이트를 만들게 하는 요인이라는 것입니다. 사실 몇몇 이들은, 모바일 퍼스트를 원칙으로 사이트를 만들면서, 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 깨닫게 되었다고들 합니다. 사용자들 또한, 데스크탑 사이트보다 모바일 사이트가 훨씬 사용하기 편하고, 자신이 원하는 작업을 빠르게 처리한다고 이야기 합니다.

그밖에, Geolocation, 자이로스코프 등 모바일 기기가 가진 센서들 때문에, 모바일 퍼스트 또는 모바일'만' 개발하는 사이트/서비스들이 늘어가는 경향을 설명하기도 합니다. 또한 (네트워크 전송 속도를 줄이기 위해서라도) html5의 여러 빌트인 폼 태그들을 사용하는 등, 최신 기술/표준을 빨리 받아들이거나 주도하기도 합니다.

모바일 퍼스트 구현

그렇다면 어떻게 해야 모바일 퍼스트가 될까요? 대표적인 방법으로 CSS3 media query를 사용할때, media query가 적용되지 않는 경우를 모바일 브라우져로 가정하는 것이 해당됩니다.

정찬명님의 Mobile first strategy for CSS designer 글에서 이런 원칙을 적용한 예를 들었습니다. (출처 정찬명님 블로그)

  • 모바일 퍼스트를 고려하지 않은 코드

@media (max-width:799px) { ... CSS for Mobile ... }  /* 이 코드는 799px 이하의 해상도에서 해석 됩니다 */ 
@media (min-width:800px) { ... CSS for Desktop ... } /* 이 코드는 800px 이상의 해상도에서 해석 됩니다 */

  • 모바일 퍼스트를 고려한 코드

... CSS for Mobile ...
@media (min-width:800px) { ... CSS for Desktop ... }
즉, @media 가 작동하지 않는 모바일 브라우져도 아무런 문제없이 의도된대로 모바일에 해당하는 CSS가 적용됩니다.

그 이외에도, 모바일 스크린을 위해서, 콘텐츠를 다시 정렬하고 조직하는 일도 필요합니다.

LukeW는 대표적인 사례로, '콘텐츠를 네비게이션 보다 우선' (Content over navigation) 하라고 주장합니다. 일반적으로 웹사이트 디자인 시 따로 따로 떨어져 있는 페이지들을 어떻게 잘 연결하느냐가 중요한 문제이기에, 페이지 상단과 좌측 또는 하단의 많은 영역을 네비게이션으로 할당합니다. 하지만 스크린이 작은 모바일의 경우, 특히 상단이나 좌측의 네비게이션을 화면에 먼저 보여주느라, 실제로 중요한 콘텐츠는 스크롤을 한참 해야 보이는 문제가 발생하기도 합니다. 이런 문제점은, youtube 등의 모바일 버전에서도 알 수 있듯이, 메뉴/네비게이션은 상단의 한 버튼으로 축소시켜놓고, 첫 화면부터 콘텐츠를 보여주는 것으로 해결합니다.

이에 관해서는, 이후에 반응형 레이아웃 이나 반응형 네비게이션 항목에서 별도로 다루겠습니다.

반응형 웹 (디자인) 이란?

반응형 웹 디자인이라는 단어는 Ethan Marcotte(이하 EM)가 A List A Part의 글 Responsive Web Design 으로 처음 사용했습니다. 그는 그의 글에서 CSS3 media query를 이용하여, 페이지의 레이아웃, 이미지와 타이틀의 크기등을 해당 스크린(크기)에 적절하게 바꾸는 것을 보여주었습니다. 그는 그 이전에도 Fluid Grids라는 글에서, 고정된 px 대신 em 또는 %를 사용하여 기존 그리드 시스템을 '반응형'으로 바꾸는 것을 보여주었고, 이후에는 Fluid Images라는 글에서, 비슷한 접근 방법을 이미지/비디오에도 적용하는 사례를 보여주었습니다.

그렇다면 반응형 웹 디자인 이란 무엇일까요?

(문제는 많겠지만) 위키피디아의 정의에 따르면, CSS3 media query를 이용하여 유동형 그리드, 유동형/가변형 이미지들, 그리고 적응형 레이아웃 등을 구현하여 한 사이트에서 여러 보는 환경에 맞게 적절하게 조정되도록 디자인 하는 것입니다.

결과로만 본다면, '반응형 웹 디자인'이란 어떤 기기/브라우져 환경하에서도 사이트의 원래 의도/콘텐츠를 잘 보여주도록 하는 모든 개념/접근방법/기술 등을 포함한다고 볼 수 있습니다. 이런 반응형 웹을 가능하게 하는 요소 기술은 다음과 같습니다.

유동형 그리드 (Fluid Grids)

그리드 시스템은, 반응형 이전에도, 보다 일관적이고 손쉬운 웹사이트 디자인을 위해서 많이 제안되었습니다. 기존 그리드 시스템과는 달리, EM등이 제안하는 유동형 그리드는, 고정된 px이 아닌 em이나 %를 사용하는 것을 제안하고 있습니다. 사실 이러한 유동형 그리드는, 이미 제공하는 템플릿/프레임워크/보일러템플릿 등이 워낙 많아서, 자신에게 맞는 것을 가져다 쓰면 될것 같습니다. 또한, 일부 반응형 유동형 그리드라고 제안되는 경우, media query와 연동되어, 특정 스크린에 따라서 그리드 시스템을 바꿀 수 있습니다.

하지만, 이러한 그리드 위에 구성하는 콘텐츠/네비게이션/메뉴 등을 어떻게 배치하느냐는, 아직까지는 대부분 (특정 스크린에서 위치와 보이기 여부를 결정하는) 수동의 방법을 사용하는 것 같습니다. 이에 관련해서는 반응형 레이아웃에서 보다 깊게 다룹니다.

유동형 이미지 (Fluid Images)

유동형 그리드와 마찬가지로, 고정된 px이 아닌 em과 %를 이용하는 접근방법으로, 특히 이 경우, max-width를 사용하고, 이를 처리하지 못하는 IE7-의 경우 적절한 javascript를 사용하는 것을 의미합니다. ( EM의 유동형 이미지 )

(RESS 기반) 반응형 이미지

RESS는 Responsive Design + Server Side Components의 약자로 LukeW가 (단어와 개념을) 제안했으며, 서버쪽에 (스크린 크기등의) 정보를 저장하고 그 정보를 이용하여 적절한 내용을 브라우져로 보내는, 반응형 웹의 접근방법입니다. 특히 이미지의 경우, 실제 전송량의 대부분을 차지하기에, 모바일 기기에는 작은 크기의 이미지를 보내지 않도록 서버쪽에서 처리하는 일이 필요하고, 이런 일련의 기술을 RESS 기반 반응형 이미지라고 일컫습니다.

반응형/가변형 레이아웃/네이게이션

아직 통용되는 단어는 아니지만, 결국 반응형 웹을 완성하기 위해서는 반응형 또는 가변형 레이아웃을 구현해야 합니다. 그렇지 않다면, 수많은 if-and-else로 각 경우를 나누어서 브라우져에 보내줘야 하는 일이 발생합니다. 1)

특히 이러한 반응형 레이아웃을 보다 자동화하기 위해서는, HTML5의 시멘틱 마크업이나 적어도 구조화된 id/class 체계를 유지해야 가능합니다.

반응형 레이아웃을 그 패턴별로 나눈 LukeW의 글: 다중기기 레이아웃 패턴들에서 보면, 그 패턴을 크게 다섯가지로 나누고 있습니다. (블로그 정리글 참조)

또한 이러한 작업은, 서버쪽에서 처리해야 할 일이 많이 발생하므로 RESS를 구현해야 하고, 또한 서버쪽에서 기기의 종류나 특성을 감지해야 합니다. 이를 위해서 주로 user-agent 문자열을 이용한 Resources#user-agent 여러가지 접근방법과 라이브러리 등이 존재합니다.

반응형 네비게이션에 관련해서는, Brad Frost가 반응형 네이게이션 패턴들을 분석했습니다.

관련 논쟁

논쟁이라고 하기는 그렇지만, 당연히 나올 수 있는 반론으로, '너무 일반화를 함으로써 발생하는 문제점'들이 제기 되었습니다.

관련 흐름을 (1년이상 전이기는 하지만) 정리한 글로 Jason의 글이 있습니다. 특히 하단부의 그림도표가 인상적입니다. 기능적인 측면에서 레이아웃과 콘텐츠는 (그 시점에서) 유동형 그리드/이미지 등으로 해결되지만, 내용이나 사용자 입장에서의 해결책이 없지 않느냐는 지적인데, 현재 시점으로 보자면, 콘텐츠 퍼스트 등 그런 문제점에 일부 해결책이 제기되거나 또는 새로운 접근방법을 제안하기도 합니다.

모바일 웹이 아니라 그냥 폭 320px 짜리 웹사이트

James Pearce의 글에서 그는, 이러한 '단순한 레이아웃 조정이나 크기 조정'이 정말 모바일 웹을 위한 것인지 지적하고 있습니다. 구체적으로

  1. CSS media query는, 모든 html 내용과 이미지들을 모두 다운로드 받은 후 적용되기에, 네트워크의 속도나 가격이 중요한 모바일 웹을 실제로 고려하고 있지는 않다는 것과
  2. 데스크탑 사이트와 모바일 사이트는, 그 사용용도가 다르기에 전혀 다른 내용을 제공해야 할 때가 있다

고 그 한계를 지적하였습니다. 첫번째는, 위의 RESS기반 반응형 이미지로 어느정도 해결이 되는 반면, 두번째 내용은 상당히 시사하는 바가 크다고 봅니다. (관련 내용은 블로그 글을 참조하세요.)

최적화 vs 적응형 (Optimization vs. Adaptation)

모바일 퍼스트의 주창자이기도 한 LukeW는, 그럼에도 불구하고 특정 기기에 '최적화'된 사이트를 제공하는 것과 하나의 '반응형' 사이트를 제공하는 것에 대해서 논의하고 있습니다. 정리하면,

  1. 최적화: 대상 기기/브라우져를 정확히 안다면 당연히 대상에 특화되고 최적화된 내용을 보내주어야 한다. 그렇기에 RESS가 중요하다.
  2. 적응형: 하지만 많은 경우 대상 기기/브라우져가 정해져 있지 않고, 또한 미래에 나올 기기에 대해서는 알수 없기에, 우리가 할 수 있는 최선을 다해서 적응해야 한다.
  3. 결론: 둘다 맞다.

언제나 그렇듯이 극단적인 방법은, 해결책이 아닙니다. LukeW는 더 나아가서 왜 모바일과 데스크탑 사이트를 별도로 만들어야 하는지에 대해서도 글을 남겼습니다. 이부분은 반응형 웹과는 조금 다른 스탠스를 취하고 있는듯 합니다.

모바일 퍼스트 vs. 데스크탑 퍼스트

좀 낯간지럽지만, 제가 남긴 블로그 글에서, 모바일 퍼스트의 근본 원인 중의 하나인, '성능이 떨어지는 모바일 브라우져'를 기준으로 웹을 만들어야 한다는 것에 반대 의견을 남겼습니다.

특히 우리나라처럼, 아이폰과 고성능의 안드로이드가 모바일 웹의 대부분을 차지하고, 데스크탑은 아직도 IE6, IE7에서 헤메고 있는 환경이라면, CSS3/js를 처리하지 못하는 일부 오래된 데스크탑 브라우져들을 기준으로 웹을 만들고, 모바일은 CSS3등을 이용하여 별도의 처리를 해야 하는 것이 아니냐라는 취지였습니다.

1) 물론 media query도 if-and-else 이지만, 콘텐츠를 선별적으로 보내거나 보여주는 것과는 다른 차원이라 생각됩니다.
업데이트 : 2013-07-08 17:24 / 작성자 : 전진 / 조회 : 7,964
공헌자 : junjin