시각적 균형을 이루기 위한 웹디자인 방법 3가지

2015.11.13

|

1723

20151113_wishket_FG_f

안녕하세요, 위시켓입니다!
웹사이트를 디자인할 때 사용자의 편의성보다 많은 정보를 담는 것에 치중하다 보면 균형이 깨지기 마련입니다. 따라서 균형을 아는 디자이너들은 정보의 양에 집중하기보다 핵심을 찌르는 방법을 모색하곤 합니다. 너무 적거나 많지 않은 적당한 양의 정보를 난잡하거나 극단적으로 단순하지 않은 인터페이스에 녹여내는 것이 핵심이지요.
전체적인 조화를 이룬 디자인은 사용자가 모든 정보에 접근하기 쉽도록 만들어줍니다. 즉, 균형은 웹 디자인뿐만 아니라 다른 모든 디자인 작업에서 적용되어야 하는 필수요소입니다. 오늘 프리랜서 가이드시각적 균형을 이루기 위한 웹사이트 디자인하는 방법 3가지를 준비했습니다.

균형잡힌 웹사이트 디자인 하는 방법 3가지

1. 대칭

Symmetrical Balance
웹사이트의 균형을 위해 사용되는 사장 일반적인 디자인 방법은 바로 대칭입니다. 이미 많은 웹사이트들이 대칭을 사용한 디자인으로 만들어졌지만, 이를 눈치채기란 쉽지 않습니다. 대칭을 이루는 디자인은 자연적으로 원래 당연한 것처럼 보이기 때문이지요. 이렇듯 대칭은 우리의 눈이 가장 편안하게 느끼는 디자인 원리입니다. 심미적으로도 가장 잘 정돈되고 또 조화로워 보이는 것이지요.
대칭 디자인은 웹 페이지의 중심에 가상의 가로축이나 세로축을 두고 양편에 골고루 정보를 입력하는 것이 핵심입니다. 보이지 않는 중심선을 중심으로 양 쪽을 마치 데칼코마니처럼 똑같이 배치하는 것이지요. 비평가들은 이러한 대칭을 ‘너무 단순하고 지루하다’고 평하기도 합니다. 하지만 대칭은 매우 오랜 시간 동안 사용된 고전적인 디자인 원리이며, 아직까지도 그 효과를 증명하고 있습니다.
몇 가지 예시를 통해 살펴보도록 하지요.
 

1) Cisco

cisco

Cisco의 웹사이트는 대칭으로 이루어져 있습니다. 웹사이트가 가운데 수직선을 중심으로 정확히 균형 잡혀있는 것을 한 눈에 확인할 수 를 나누면 다있지요. 가상의 선을 그어 홈페이지음과 같은 사실을 발견할 수 있습니다:

  • 검색 창을 포함한 같은 개수의 탐색 아이콘이 양쪽에 있다
  • 제목과 소제목이 가운데를 중심으로 똑 같은 길이로 배치되어 있다
  • 콜투액션 배너가 정확하게 가운데에 위치해 있다
  • “Quick Task” 아래로 양쪽으로 같은 수의 정보들이 배열되어 있다

물론 대칭을 이용한 디자인이 눈길을 끌거나 독특한 매력을 어필하지는 못합니다. 하지만 Cisco는 네트워크 도구를 파는 사업체이기 때문에 디자인이 흥미로울 필요는 없습니다. 오히려 유용하고 기능적인 대칭 디자인이 Cisco를 어필하기에 더욱 적합하지요.
다음의 두 예시도 수직선을 중심으로 대칭 디자인을 적용한 경우입니다.

2. 비대칭

Asymmetrical Balance
대칭과 반대로 비대칭적인 균형도 존재합니다. 모순적으로 들리지만 비대칭이어도 균등하게 나눠질 수 있습니다. 비대칭은 웹 페이지상에 다양한 방법으로 표현할 수 있습니다. 수평이든 수직이든 가상의 선을 그어 반으로 나눠진 한 편에 더 강렬하고 무거운 컨텐츠를 배치하고 다른 한 편에는 상대적으로 가벼운 컨텐츠를 배치하는 것입니다. 이처럼 배치한 컨텐츠의 개수나 흥미로운 정도가 완전히 불균형을 이뤄도 모순되는 요소들이 병렬적으로 이어지기 때문에 오히려 균형이 잡히게 됩니다.
이런 방식의 비대칭은 단순한 대칭보다 더 강렬하고 아름다울 수 있습니다. 균형을 이루기 위해 대비의 원리를 이용하기 때문이지요. 예상 가능한 대칭적 균형보다 모순적인 비대칭적 균형이 더 흥미롭고 더 현대적이며 더 창의적입니다. 하지만 효과가 만큼 훨씬 많은 노력이 필요하지요. 더 복잡한 디자인 요소들간의 유기성을 제시해야 합니다.
여러 가지 비대칭적 디자인의 사례들을 살펴보도록 하겠습니다.

1) honda

honda

Honda의 웹사이트는 확실한 비대칭적 디자인의 ‘좋은 예’ 입니다. 자사의 자동차들을 기반으로 한 디자인으로, 사진들이 다소 정돈되지 않아 보이긴 하지만 화려하고 매력적으로 다가옵니다. 앞서 살펴본 예시들과는 다르게 수직선이나 수평선을 중심으로 균형을 이루지 않고 있으며, 각 사진들의 변들 역시 각기 다른 길이를 보이고 있다는 것을 알 수 있습니다. 전체적으로 큰 비대칭을 발생시키며 사용자들로 하여금 흥미를 유도합니다. 하나의 작은 미로를 보는 것 같은 인상을 불러일으키는 것이지요.

2) typographisme

typographisme

Typographisme 역시 아주 완벽한 비대칭 디자인 사례입니다. 홈페이지를 보면 한쪽으로 치우친 두 가지 요소를 확인 할 수 있습니다. 하나는 왼쪽으로 치우친 TG로고이며, 다른 하나는 오른쪽 상단에 위치한 녹색 사각형이지요.

3) duplos

duplos

Duplos역시 비대칭 디자인으로 구성되어 있습니다. 떠다니는 ‘말 풍선 디자인’을 채택하였는데, 그 결과 수직선과 수평선 등 어떤 선을 기준으로 하든 균형적인 병렬을 찾아볼 수 없게 되었지요. 조화로운 비대칭을 통해 사용자의 눈길을 끄는 훌륭한 디자인 사례입니다.

3. 방사형

Radial Balance

우리가 태양을 그릴 때 태양의 갈기는 중심을 기점으로 같은 거리만큼 뻗어나가곤 합니다. 연못에 돌을 던지는 모습을 떠올려봐도, 파장은 중심을 기점으로 같은 거리만큼의 물결을 만들어내곤 합니다. 이러한 모습으로 요소들을 방사형으로 배치하는 디자인이 바로 방사형 디자인입니다.
방사형 디자인은 앞서 살펴본 대칭과 비대칭 디자인에 비해 매우 간단하고 쉽습니다. 웹 페이지의 모든 정보와 요소들을 중심과 일정한 거리를 두게 디자인 하는 것이지요. 따라서 중심으로부터 수직으로나 수평으로 분할했을 때 모든 요소들이 정확히 같은 거리를 두고 위치하게 됩니다. 이렇게 방사형으로 디자인을 할 경우, 주의력이 중심으로부터 각각의 요소로 이동하다가 결국 다시 중심으로 이동하게 됩니다. 따라서 방사형 디자인은 페이지의 핵심을 계속적으로 강조하기 쉬운 특징을 갖게 됩니다.

1) vlog

vlog

Vlog의 웹사이트는 방사형 디자인의 가장 좋은 예입니다. 이토록 훌륭한 전형은 찾아보기가 드물 정도입니다. 흰 폰트로 쓰여있는 “ vlog.it”을 중심으로 모든 것이 방사형으로 퍼져나가는 것을 쉽게 확인할 수 있습니다.

여러분과 함께 디자인의 다양한 균형 원리를 간단히 살펴보았습니다. 오늘 소개해드린 예시 이외에 다른 웹사이트에서도 균형의 원리는 쉽게 찾아볼 수 있습니다. 단지 보통 사용자가 웹사이트의 디자인을 볼 때 가장 먼저 보는 것이 균형이 아니기 때문에 인지하지 못했을 뿐이지요.
하지만 인지를 하지 못했다고 해서 중요하지 않은 것은 절대 아닙니다. 오히려 웹 디자인에서 균형이 갖는 중요도는 매우 큽니다. 이는 단순히 미적으로 아름답거나 편안하기 때문에 중요한 것은 아닙니다. 균형 잡힌 디자인일수록 해당 웹 페이지의 정보가 사용자에게 더 쉽게 전달되고, 이를 통해 사용자는 웹사이트의 탐색을 좀 더 손쉽게 할 수 있기 때문이지요.
오늘 살펴본 세 가지 방법을 참고하며 웹 디자인의 균형에 주의를 기울인다면 분명 더 나은 웹사이트를 제작하는 데 큰 도움이 될 것입니다. 멋지게 균형 잡힌 웹사이트를 통해 여러분의 클라이언트의 사이트 방문객들은 만족을 느끼게 될 것이며, 이는 클라이언트의 만족으로 이어질 것입니다!
위시켓은 웹 디자이너를 비롯한 위시켓의 파트너 여러분에게 다양한 팁과 가이드라인과 함께 다음 프리랜서 가이드를 통해 찾아 뵙겠습니다!

이 글과 관련된 위시켓의 인기글

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

▶  2015 워드프레스 디자인 트렌드 12가지


150120_wishket_blog_under

앱 개발 비용 궁금하세요?
위시켓이 바로 알려드릴게요!

wishketwishket.com균형잡힌 웹디자인 방법디자인 프리랜서 팁사용자 친화적 웹디자인웹디자인 가이드웹디자인 팁웹디자인 프리랜서 팁웹사이트 디자인 균형위시켓위시켓 블로그위시켓 프리랜서 가이드좋은 웹디자인 사례
다음 글

위시켓 블로그의 새로운 소식 받기