웹디자인을 직관적으로 구성하는 5 가지 방법

[프리랜서 가이드/ 디자인 TIP]

사람들이 인터넷 서핑을 할 때, 해당 페이지에 계속 머물 것 인지, ‘뒤로’버튼을 누를 것인지를 결정하는 데 걸리는 시간은 10초에서 20초 사이에 불과하다고 합니다. 사람의 감각기관 중에서 시각이 가장 강력한 통로이기 때문에 사람들은 전체적인 웹디자인을 통해 이야기의 전부를 읽어냅니다. 따라서 웹디자이너는 최대한 빠르고 효과적으로 설득하기 위해 시각을 공략하지요. 직관적인 디자인으로 무장한 웹 페이지의 첫인상으로 사람들의 시선을 사로잡고 모든 핵심적인 내용을 전달하는 것이 중요합니다.

좋은 디자인이 무엇인지 익히려면 먼저 디자인의 역사를 살펴봐야 합니다. 역사적으로 디자인은 간단하고 근본적인 원리를 추구해왔습니다. 세월이 지나며 변형과 수정은 있었으나, 결국 가장 중요한 것은 기초였습니다. 또한, 세계적인 웹디자이너 Speider Schneider는"시각 디자인의 원칙을 준수한다면 당신의 웹사이트는 전보다 더 편리하고 직관적으로 바뀔 것이다"라고 말했습니다.

따라서 오늘 프리랜서 가이드는 시각 디자인의 기본 원리을 바탕으로 직관적인 웹디자인 구성하는 5 가지 방법을 준비했습니다.

직관적인 웹디자인, 시작하기 전에

Keep in Mind

본격적인 디자인을 시작하기 전에, 가장 먼저 타겟이 되는 독자들을 파악해야 합니다. 만약 해외 독자가 주 타겟이라면, 해당 문화권에서 글을 읽을 때 왼쪽에서 오른쪽으로 읽는지, 반대로 읽는지, 좋아하거나 금기시되는 색은 무엇인지 등을 파악하세요. 이와 같은 사회문화적 배경을 근거로 효과적인 이미지 배치, 인터페이스, 색 등이 좌우되기 때문입니다.

또한 사람의 신체적 원리를 알아두는 것도 필요합니다. 사람이 보는 방식과 시각정보가 두뇌에서 어떻게 처리되는지 그 방식을 이해하는 것이 디자인에 큰 도움이 되기 때문입니다. 다음 단계부터 이 부분에 대해 집중적으로 조명할 것이니, 직관적인 디자인에 무엇이 왜 필요한 것인지 염두에 두시기 바랍니다.

1. 두뇌를 이해하는 디자인하기

Design for the Brain

연구에 따르면, 두뇌는 시각정보를 일련의 체계에 따라 처리한다고 합니다. 또한 우리의 눈은 색채가 강하거나, 글씨가 굵거나, 배치가 대조적일 때 더욱 민감하게 반응한다고 합니다. 만약 여러분의 클라이언트가 지금보다 좀 더 눈에 띄는 것을 바란다면, 크고 굵은 글씨나 강한 색체로 포인트를 주어야 합니다. 또한 덜 중요한 내용이나 빈 공간에 시선을 뺏기지 않으려면 공간을 잘 활용해야 하지요.

독자는 웹 디자이너의 기대만큼 꼼꼼히 읽지 않기 때문에 콘텐츠의 도입부는 매우 중요합니다. 따라서 첫 두 문장에 독자의 흥미를 유발하는 내용과 전반적인 내용의 핵심을 담아야 하지요.

(출처: Nielsen Norman Group)

위 사진은 독자들이 웹페이지를 볼 때의 시선이동을 열을 이용한 ‘시표추적검사’를 통해 알아본 결과입니다. 독자들의 집중력은 첫 문장을 읽을 때 가장 강하며 글이 아래쪽으로 진행될수록 집중력은 급감하는 것을 볼 수 있습니다. 반면 가운데 사진을 보면 텍스트의 양이 같아도 중간에 시각자료를 첨부함으로써 글의 끝까지 집중력이 높은 것을 알 수 있지요.

디자인의 기초원리 중 하나인 F와 Z패턴은 우리의 눈이 웹사이트를 읽는 흐름을 반영한 것입니다. 좋은 사례들은 대부분 이러한 패턴을 가진 것을 알 수 있죠. 같은 이유에서 기인한 서로 다른 두 패턴에 대해서 살펴보겠습니다.

F패턴

글을 왼쪽에서 오른쪽으로 읽는 대부분의 문화권에서 격자무늬를 사용해 가장 읽기 쉽고 편한 배열로 꼽히는 패턴입니다. 주로 제목 아래 간단한 설명을 붙인 사진을 넣고, 그 밑으로 컨텐츠를 소개하는 형식이지요. 지금 여러분이 읽고 있는 위시켓 블로그가 바로 이 'F 패턴'이라고 할 수 있습니다.

F 패턴은 다양하고 많은 정보를 전달하기보다는, 광고를 포함하거나 유저들의 참여를 필요로 하는 웹페이지에 매우 유용합니다. 또한 사이드바 영역을 잘 활용하면 유저들이 더 많이 컨텐츠에 상호작용하도록 만들 수도 있지요. 하지만 다른 모든 패턴들과 마찬가지로, F 패턴은 가이드라인일 뿐, 원칙이 아닙니다. F 패턴을 참고하여 적절히 활용하는 것은 필요하지만, 이 패턴은 쉽게 지루하게 느껴진다는 단점이 있다는 것을 기억하세요.

Z 패턴

Z패턴은 우리나라에선 흔히 ‘갈지(之)자 구도’라고 불리는 패턴입니다. 중요한 요소를 Z모양으로 배열하는 방법인데요. F 패턴과 마찬가지로 Z 패턴은 눈이 페이지를 스캔할 때 왼쪽에서 오른쪽으로의 흐름을 따르도록 유도합니다.

(출처: MailChimp)

이 패턴은 텍스트가 적고 독자가 어떤 반응을 할 지 명확히 예상이 가능할 때 적합합니다. 한 눈에 들어오기 때문에 유저가 페이지의 핵심에 빠르게 반응하도록 만들어준다는 장점이 있지요. 웹페이지에서 빠르게 반응을 이끌어내는 것은 생명이라는 것을 잊지 마시기 바랍니다.

3. 황금비율의 법칙 활용하기

Understand Golden Ratio

황금비율, 황금비, 혹은 황금사각형의 법칙이라고 불리는 이 디자인 원칙은 수세기 동안 사용된 디자인 기술입니다. 1:1.618이라는 비율이 핵심인 이 기술은, 가장 눈길을 끄는 부분을 찾는데 도움을 주며, 시선을 원하는 위치로 유도하는 방법을 알려주지요.

이 원칙을 이미지에 적용하는 방법은 매우 간단합니다. 웹페이지에 황금사각형을 겹쳐 놓고, 중요한 텍스트나 UI, 배너 등을 배치할 때 참고하세요. 황금사각형은 뒤집히거나 회전 될 수 있다는 점을 기억하시면 더욱 폭 넓은 적용이 가능합니다.

(출처: New York Times)

방대한 컨텐츠를 다루는 뉴욕타임즈와 같은 뉴스 웹사이트는 이러한 황금 사각형의 법칙을 잘 활용하고 있습니다. 독자의 시선을 가장 중요한 기사에서 시작해 스크롤 윗부분까지 유도하는 매우 훌륭한 예시지요. 이 경우, 황금사각형 법칙을 기초로 하여 기사의 중요도에 따라 적절하게 배열하는 것이 중요합니다.

황금사각형을 가장 효과적으로 이용하는 방법은 위의 그림과 같이 대각선을 긋고 나머지 두 꼭지점으로 수직이 되는 선을 그려, 파란색으로 표시된 지점에 집중적으로 디자인 하는 것입니다.

4. 삼등분의 법칙 활용하기

Understand the Rule of Thirds

삼등분의 법칙 역시 가장 많이 사용되는 패턴 중 하나입니다. 수평과 수직방향으로 화면을 삼등분 하면 상-중-하, 좌-중-우 로 나뉘게 됩니다. 이 분할을 통해 중요한 부분이 좀 더 명확해지는 효과를 얻을 수 있습니다.

(출처: 맥도날드 홈페이지)

위의 예시는 맥도날드의 웹사이트입니다. 자연스레 가장 중앙에 시선이 가장 많이 향하는 동시에, 단순한 형태이기 때문에 주변 정보와 서로 충돌하지 않습니다. 상단의 가격정보도 시선이 가게 되지요. 우측 상단의 일그러진 표정의 점원은 잘 눈에 띄지 않습니다. 하단에 위치한 맛있어 보이는 음식과 식재료에 대한 정보, 그리고 기업의 사회적 공헌이 한눈에 들어옵니다. 좌측 상단의 메뉴를 통해 세부적인 음식 종류들과 지점들의 위치 등의 정보 역시 쉽게 확인할 수 있습니다.

(출처: http://www.awwwards.com/)

위 이미지는 삼등분의 법칙을 통해 이목을 끌 때 가장 효과적인 부분을 효과적으로 알 수 있는 예시입니다. 공통적으로 이미지 정 중앙에 중요한 정보를 위치 시키고 가장 오른쪽 상단에는 별다른 정보나 메시지가 없다는 것을 알 수 있습니다.

5. 그리드 마스터하기

Master the Grids

디자인에 있어 그리드는 매우 중요합니다. 그리드(Grid)란, 컨텐츠를 구성할 때 가이드 라인으로 사용되는 다양한 분할선을 말합니다. 그리드는 매력적이고 합리적으로 그래픽 요소를 정리하고 배열하는데 사용되는 가이드라인이 되지요.

1972년에 마시모 비넬리(Massimo Vignelli)는 그 전까지 지도의 측면으로만 접근하던 지하철노선도를 디자인 측면으로 접근해 큰 파장을 일으켰습니다. 아래의 예시는 그가 디자인한 뉴욕시의 지하철 노선도입니다. 바로 그리드를 활용한 디자인이지요. 40년이 지난 지금의 지하철 노선도와 비교해도 큰 차이가 없다는 것을 알 수 있습니다.

그리드 레이아웃을 구글링하면 수많은 이미지와 관련 자료를 찾을 수 있으니 참고하시기 바랍니다.

UI 디자인에 그리드를 활용하기 위해 기억해야 할 TIP

- 그리드는 디자인을 위한 가이드라인이지, 족쇄가 아닙니다.

- 위에서 살펴본 다른 디자인 원칙들과 마찬가지로, 여러분이 가장 효율적이고 멋지게 디자인을 하기 위해 활용할 수 있는 대표 원칙 중에 하나입니다.

- 그리드는 여러분이 구성 요소를 배치하는 방법을 도와주는 첫 번째 레이어 단계입니다.

- 그리드는 여러 층으로 겹쳐지거나 정확하게 들어맞지 않을 수 있습니다. 하지만 여전히 시선의 흐름과 뇌의 반응을 고려하는 합리적인 도구임을 기억하세요.

웹 디자이너 여러분은 작업을 진행하면서 본인의 디자인을 의심하기 마련입니다. ‘이게 여기에 위치하는 것이 올바른가?’ 혹은 ‘뭔가 부족한 것이 아닐까?’와 같은 의심 말이지요. 오늘 살펴본 레이아웃 패턴을 정확하게 다루는 것은 단순히 시각적인 조화를 이루는 것이 아니라 웹 디자이너로서의 만족을 이끌어내기도 합니다. 이 모든 전략을 사용한 아름다운 디자인은 자연스레 사용자 친화적인 디자인이 될 것입니다.

*본문 내용은(http://www.creativebloq.com/web-design/5-ways-make-your-web-designs-more-intuitive-91516938)를 각색한 자료입니다.