Responsive Web Design

Blog

JUN03

Responsive Web Design

Responsive Web Design(RWD) – 반응형 웹 디자인의 시작

영화 트랜스포머를 보셨다면 로봇이 원하는 물체로 멋지게 변신하는 장면을 쉽게 떠올리실 수 있을 겁니다. 다양한 사이즈의 디바이스들이 앞으로 계속해서 등장하게 될 것임을 감안할때, 기업에서 제공되는 웹 페이지들이 트랜스포머처럼, 모바일 페이지를 뛰어넘어 오리지널 디자인을 제공하며, 사용자 디바이스에 최적화는 물론이고, 사용자 행동에 따른 가로, 세로 보기에서도 최적화되어 연출 될 수 있다면 얼마나 좋을까요? – 그것을 가능하게 해 주는 Responsive Web Design, 즉 반응형 웹 디자인(이하 RWD)은 디바이스의 스크린 사이즈에 따른 최적화된 페이지 화면 요소를 출력하는 최신 웹 기술로 볼 수 있을 것입니다.

재미있고 흥미로운 RWD 데모 살펴 보기

현재 보시고 계신 메타브레인 사이트를 어디서 보고 계십니까? 만약 데스크탑에서 보시고 계시다면 브라우저 사이즈를 줄이고 늘려 보시면 다음과 같은 뷰의 페이지 요소들이 변화하여 배치 되는 것을 확인 하실 수 있을 겁니다.

아이패드와 아이폰을 갖고 계시다면 한번 접속해 보십시오. 그리고 가로, 세로로 돌리면서 사이트를 살펴 보십시오. 실제로 해 보시면 기존의 모바일 페이지에서는 속도 및 경량화의 명분으로 데스크탑 디자인과 다른 디자인이 화면에 제시되거나, 아이패드에서는 화면 사이즈의 특성에 맞지 않게 가로로 길게 퍼진 버튼들을 보는 것과 달리, 화면 사이즈 및 디바이스 뷰에 따른 동일한 비주얼 아이덴티티가 제공됨을 살펴 보실 수 있습니다. 이것은 Web Toy 차원의 단순 재미일까요? 아니면 어떤 다른 가치가 정말 있는 것일까요?

– Illy Issimo

http://us.illyissimo.com/

– My Opera

http://my.opera.com/community/

– 1 Picture a Day

http://1pictureaday.com/

– 더 많은 RWD 데모 보기 http://mediaqueri.es/

기업에서 반응형 웹 디자인을 왜 고려해야 할까요?

메타브레인에서 기업 블로그 구축을 2004년부터 시작한 후 지금까지의 주요 변화를 살펴보면, 기업들은 포탈에서 제공하는 배너만 다를 뿐, 동일한 포맷의 블로그 운영에서, 원하는 소셜 서비스를 연동 및 자사의 홈페이지를 믹스한 기업 고유의 아이덴티티를 제공하는 기업 플랫폼으로 변화 되었음을 경험하였습니다. 이러한 변화의 가치에는 여러 요인들을 생각 할 수 있는데, 그 중 하나는 기업에서 의도한 가치화된 ‘사용자 경험’의 제공 일 것입니다. 설명서만 보면 다 비슷한 MP3 플레이어와 핸드폰인듯 보였지만, 애플의 아이팟이나 아이폰이 흥행한 이유가 바로 그것입니다.

같은 맥락에서 RWD 를 살펴 보면, RWD 는 아직 완성된 기술도 아니고, 이제 시작하여 발전하고 있는 기술 중의 하나일 뿐입니다. 그러나 고정된 웹 페이지에서 UI 나 UX 를 논하는 차원을 뛰어넘어, 디바이스에서 주는 ‘맞춤화된 사용자 경험’을 제공한다는 점에서는, 아이패드가 세상에 나왔을 때의 놀라움처럼, 어떤 사이즈의 놀라운 디바이스가 등장할 지 모르는 오늘날, 스크린 사이즈 별로 일일이 기업에서 페이지 제작의 비용을 절감 할 수 있는 포인트를 이야기 하지 않더라도 확실히 새로운 사용자 경험을 제공하고 있다고 말할 수 있을 것입니다.

모바일 테마의 경우 워드프레스와 같은 플랫폼 위에 별도의 모바일 테마를 만들어 모바일로 접속할 경우 해당 테마로 보여지게 합니다. 이 경우 테마에 따른 디자인 요소를 별도로 제작해야합니다. 그러나 RWD의 경우 모든 디자인 요소를 그대로 사용가면서 모바일 뿐만이 아니라 모든 디바이스 별 사이즈에 따른 최적화를 해주는 것이기 때문에 보다 범용적이라고 이야기 할 수 있습니다. 이제는 플랫폼 뿐만이 아니라 프론트엔드에서도 동일한 자원을 가지고 보다 유연하게 구현하는 것에 대해 기업들은 고민해야 할것입니다.

현재 많은 국내 유수의 사이트들이 모바일웹을 고려하고 있지만 다양한 디바이스를 사용하는 측면에서, 모바일 브라우저를 포함한 크로스 브라우징 측면에서 많이 부족한 것이 현실입니다.

아이패드에서 특정 쇼핑몰의 주소를 클릭 시 모바일 버전으로 출력되어 나온다거나 모바일에서 접속시 레이아웃이 깨지거나 하는것이 그 예입니다.

RWD 기반으로 웹 사이트를 실제 제작을 고려한다면?

RWD 에 관련된 문서를 찾아 보면, ‘flexible’ 이란 단어를 쉽게 발견하실 수 있을 겁니다. 사전상의 뜻은 ‘신축성(융통성)이 있는’ 혹은 ‘잘 구부러지는, 유연한’ 입니다. RWD 의 3대 요소로는 1.Fexible Grid 2.Flexible images 3.Media queries 를 꼽을 수 있는데, 기술적인 자세한 리뷰는 지면상 생략하기로 하고, RWD 를 고려하고 계신 기업을 위해 실제 제작 측면에서의 Flexible 의 양면성에 대해서 살펴 보고자 합니다.

RWD 기반의 웹 사이트에 표시되는 이미지 요소는 유연한 그리드 기반의, 예측된 화면 사이즈 내에서 레이아웃을 변경하거나, 이미지 사이즈를 유연하게 변화하는 것으로 구현합니다. 또한 가로 세로의 디바이스 회전에 따른 자연스러운 화면 연출을 합니다. 이러한 사용자 측면에서 편의성을 위하여 구현하는 입장에서 시장에 출시된 디바이스의 다양성에 따른 정밀도 구현이란 숙제가 남아 있게 됩니다. 사이즈에 근접한 일정 가이드라인 내에서 RWD 를 구현하여 상대적인 최적화를 구현하고, 표준 코딩을 위한 다양한 브라우저 테스트를 RWD 페이지에 적용을 해 본다면 실제 RWD 구현의 작업은 상당한 수고와 기술과 경험의 고도화를 요구하게 됩니다.

따라서 성공적인 RWD 기반의 웹 사이트를 서비스하기 위해서는 무엇보다도 RWD를 고려한 심플한 기획과 구상이 요구되기도 합니다.

그렇다면 RWD는 어떻게 적용하게 될까요?

1. 디바이스 수용범위 결정
가장 먼저 어떤 디바이스까지 수용가능하게 할것인지 결정합니다.모든 디바이스에서, 혹은 많이 쓰이는 모바일, 아이패드와 겔럭시탭, 데스크탑 버전까지만, 혹은 모바일과 데스크탑만 최적화 되도록 할 수 있으며, 대부분의 기업이 모바일웹에 대한 니즈가 더 많으므로 비용대비 모바일과 데스크탑의 최적화를 요구할 것으로 예상합니다.

2. 레이아웃 기획
해당 디바이스 별 가로사이즈에 대한 레이아웃 기획을 합니다. 페이지 내의 요소별로 %로 고려하여 리사이즈 할것인지, 사진의 갯수을 줄이는 것과 같이 배치를 바꿀것인지, 모바일 버전에서 요소를 없앨것인지, 그때 구현은 어떤 기술을 사용할 것인지 구체적인 플랜을 기획하게 됩니다.

3. 레이아웃 디자인
이에 따른 디자인 요소별 레이아웃을 포토샵 상태에서 시물레이션 하여 퍼블리싱이 가능한 상태로 만들게 됩니다.

4. 퍼블리싱 & 프론트엔드 개발
최소화된 CSS설계와 함께 구현 가능한 DOM Script, jQuery까지 다양한 프론트엔드 개발요소들이 적용되어 집니다. 또한 데스크탑 웹페이지의 표준코딩과 함께 RWD의 테스트까지 디바이스 3개, 브라우저 7개를 고려한다면 21개의 테스트를 거쳐서 퍼블리싱 되게 됩니다.

반드시 모든 기업이나 사이트에 RWD가 필요한 것은 아닙니다. 기업의 입장에서 모바일 테마 형태나 단순히 모바일웹 혹은 크로스 브라우징만 필요 하실 수도 있습니다.

그러나 이제 점점 디바이스는 다양화되고 있으며 브랜딩을 위해, 보다 많은 사용자들을 수용하기 위해, 축적된 정보를 제대로 전달하기 위해, 지금보다 ‘스마트’한 디자인이 요구되고 있는 것이 사실입니다.

지금 새로운 사이트를 기획하시거나 리뉴얼을 계획하고 계시는 분들이 있다면 RWD에 대해 한번 생각해 보실 수 있는 기회이길 바랍니다.

* 기술적 측면의 참고 동영상  

메타브레인에서는 그동안 많은 웹사이트들이 플랫폼 없이 리뉴얼을 반복하는 낭비를 해결하고자 워드프레스 기반의 개발 서비스인 메타프레소 서비스로 CMS 급 콘텐트 관리 및 운영이 용이하도록 구축 서비스를 제공하고 있습니다.

그와 더불어 CMS플랫폼 위에 프론트엔드 개발 구현시 고려하던 크로스 브라우징, 나아가 복잡한 디바이스를 수용할 수 있는 방법에 대한 그 간의 고민을 RWD, 즉 반응형 웹 디자인 설계 및 구축을 통해 해결함으로써 사용자 편의성을 스마트한 사이트 구축을 제공하고자 합니다.