반응형 웹 디자인

반응형 웹 디자인이라는 용어는 2010년 Ethan Marcotte에 의해 이야기되기 시작했으며, 사용자 환경에 상관없이 최적의 사용자 환경을 제공하기 위해 사용자 기기에 응답하는 웹사이트를 디자인하는 프로세스를 말합니다.반응형 웹디자인을 시작하기 위해서는 유연한 그리드(Fluid Grid), 유연한 미디어(Responsive Media), 미디어 쿼리(Mediq Queries), 뷰포트(Viewport) 메타 등 핵심 원리에 대해 이해해야 합니다.

1. 유연한 그리드(Fluid Grid)

유연한 그리드는 고정 그리드와 유사하게 작동합니다. 그리드를 사용하면 페이지에 요소를 효율적으로 배치(Layout) 할 수 있습니다. 하지만 고정 그리드와 달리 유연한 그리드는 사용자 기기의 화면 크기에 따라 최적화(변경) 되며, 픽셀(px)이 아닌, 퍼센트(%) 또는 em, rem 같은 상대 측정 단위가 사용됩니다.

2. 유연한 미디어(Responsive Media)

오늘날 많은 웹사이트는 많은 이미지와 비디오를 포함하는 미디어 파일을 사용 하므로 이러한 유형의 콘텐츠가 다른 화면 크기에 최적화되어 제공되어야 합니다. 일반적으로 CSS 스타일시트에 이미지 크기를 픽셀로 디자인(설계) 합니다. 하지만 픽셀 단위를 사용하는 것은 반응형 디자인에 적합하지 않습니다. 보다 적합한 디자인을 위해 반응형 웹 디자인에서는 미디어 유형에 max-width 속성을 적용해야 합니다. 미디어 파일이 컨테이너를 넘쳐나는 것을 막기위해 max-width 속성을 100%로 설정해야 합니다.

3. 미디어 쿼리(Media Queries)

CSS3 Media Queries를 사용하면 반응형 디자인을 보다 구체적으로 세분화하고 특정 화면 크기에 따라 적절하게 조정할 수 있습니다. 미디어 쿼리를 사용하여 화면 크기를 결정하고 CSS 스타일을 반영합니다.

4. 뷰포트(Viewport) 메타 요소

모바일/데스크탑 기기 자체에서 웹사이트 초기 너비(width)를 결정할 수 없기에 미디어 쿼리의 조건이 맞지 않을 경우 기본적으로 뷰포트 메타 요소에 적용된 코드가 작동하게 됩니다. 뷰포트 메타 요소에 설정한 기기 너비(width), 초기 배율(initial-scale) 등을 설정해 기기의 화면에 최적화 할 수 있습니다.

<meta name="viewport" content="width=device-width; initial-scale=1">

반응형 웹 디자인이 반영된 사례

반응형 웹 디자인을 구성하는 핵심 원리에 대해 살펴 봤으니, 반응형 웹 디자인 사례를 살펴 보겠습니다.

1. 포카리 스웨트

포카리 스웨트의 청량감과 시원함을 대변하는 브랜드 컬러인 딥블루(Deep Blue) 컬러가 돋보이는 비주얼에 모션감이 톡톡 튀는 웹사이트 디자인입니다. 공간이 협소한 모바일 기기에서는 과한 모션을 절제하여 모바일 기기에 최적화한 모습이 돋보입니다.

2. 포스코 50주년

포스코 50주년 기념 사이트 페이지는 과거와 현재 그리고 미래 세션을 통해 포스코가 걸어온 길과 나아갈 길에 대해 타임라인을 토대로 보여주고 있습니다. 하지만 전면에 햄버거 메뉴를 내세워 모바일 퍼스트 디자인을 표방한 듯 했으나, 모바일에 최적화되었다고 말하기에는 다소 부족한 듯해 아쉬움이 남는 디자인입니다.

3. Material Design

머터리얼 디자인은 크로스 플랫폼 개발을 위한 오픈 소스 코드, 문서 및 자습서를 비롯해 서비스를 구축하는데 필요한 디자인, 개발, 도구 리소스를 제공합니다. 시스템(체계)을 토대로 디자인 하는 프로세스를 제대로 제시하는 정보를 곳곳에서 제공하고 있습니다. 지연된 이미지 로드 방식을 취하는 등 모바일 최적화에 힘쓴 모습이 곳곳에서 보입니다.

4. BMW

BMW의 웹 사이트는 반응 형 웹 디자인에서 가장 어려운 부분 일 수 있는 많은 이미지와 배경 비디오를 사용합니다. 그러나 BMW는 모든 이미지와 비디오가 모바일 기기에 따라 반응 하는 성능이 매우 뛰어납니다.