반응형 디자인:큼직하고 스크롤 위주vs작고 종합적

다양한 크기의 화면을 지원하는 반응형(Responsive) 디자인이 많이 보인다.

그런데 이 디자인이 사용될 때는 보통 두 말단을 가진 방향성을 가진다. 양극의 예시를 살펴보자.

큼직하고 스크롤 위주인 예

작고 종합적인 예(네이버는 모바일 사이트를 운영하므로 관계없음.)

전자의 경우 웹페이지 구성요소들을 큼직하게 만들어서 전달하는 바가 화면에 꽉 차며, 줌인줌아웃을 할 필요가 없어 일관되고 편하게 이용할 수 있다.

후자의 경우 PC 화면의 축소판에 가깝고, 많은 콘텐츠를 제공하며, 전체화면의 맥락으로 콘텐츠를 해석할 수 있고 줌인줌아웃을 통해 부분에 집중할 수 있다.

반대로 말하면 전자의 경우 많은 컨텐츠를 제공하기에 공간이 굉장히 제한적이고, 사용자가 전체화면을 보며 웹페이지의 구성을 한 눈에 보는 것이 어렵다. 후자는 자칫 산만한 느낌을 줄 수 있고 줌인줌아웃을 하면서 사용자가 불편을 호소할 수 있다.

따라서 이런 장단점을 고려하는 것이 필요한데, 네이버 모바일 사이트가 좋은 예다.

위의 레이아웃에서는 줌인줌아웃을 제한하되 폰트의 크기와 사진을 적당히 작게 하고 미니멀리즘적으로 페이지를 정돈하여 많은 콘텐츠가 들어갈 수 있게 했다. 또한 메뉴를 나열하거나 아이콘 모음을 제공하는 등 웹사이트 전체 구조를 쉽게 파악하고 서핑할 수 있도록 했다.

사용자 편의를 위해 만든 집약적 기능인 Me 아이콘은 클릭하기 쉽게 크기를 키우고 웹페이지 화면 위에 떠다니도록 하였다.(사실 필자는 이 방식이 좀 불편하다. 모바일 브라우저의 주소창이 내려오면 Me 아이콘도 아래로 내려가버리는 데다가 필자는 한 손으로 스마트폰을 조작할 때 오른손을 주로 쓰기 때문이다. 네이버 전용 브라우저에서 쓰면 좀 편하려나.)

이와 달리 필자가 바람직하지 못하다고 느끼는 디자인은 다음과 같다.

-페이지 구성요소의 크기가 들쑥날쑥한 경우. 일부는 커다랗고 일부는 또 작고. 큰 레이아웃에서 작은 레이아웃으로 넘어가면 줌을 해야 하고, 다시 큰 레이아웃으로 돌아갈 땐 줌아웃을 해야 한다. 사용자를 혼란스럽게 하고 주의를 산만하게 한다. 일부만 크게 만들어서 사용자의 편의를 도모하고자 한다면 차라리 다 크게 만들거나 다 작게 만들어서 일관성을 유지하는 것이 더 낫다.

-너무 구성요소가 크면 페이지 전체 흐름을 파악하기 어렵다. 마치 책을 보는데 글자 하나하나에 지나치게 집중하며 보는 느낌이다.

-반대로 구성요소가 너무 작으면 안된다. 크기를 잘 조절할 자신이 없다면 웬만하면 줌인줌아웃은 가능하게 풀어두는 것이 사용자에게 도움이 될 것이다.