Rev. 2.73

Codrops에 실린 Developing Balance in Web Design을 의역한 것입니다. 요소들을 수평 또는 수직으로 배치하고 대칭 또는 비대칭으로 구성하여 웹디자인의 시각적 균형을 이루기위한 5가지 유형과 요인들에 대하여 다루고 있습니다. 당신의 웹사이트 디자인에 시각적 균형이 잡혀있지 않다면 방문객은 혼란에 빠져들고 말 것입니다. 심지어 기분이 나빠지는 방문객도 있다고 합니다. 이러한 문제를 해결하는 가장 좋은 방법은 시각적 균형을 유지하는 것입니다.

일반적으로 웹디자인에서 균형을 이룬다라는 것은 물체의 물리적인 무게를 수평으로 유지하는 것과 흡사합니다. 아주 작은 디자인 요소라도 매우 중요한 질량 포인트가 될 수 있습니다. 실제 물체가 가지는 물리적 무게와 디자인 요소가 가지는 무게는 동등한 시각적 흥미를 이끌어내기 때문입니다. "어떻게 요소간의 균형을 잡아낼 수 있을까?", "요소들에는 어떠한 균형 속성들이 있는가?" 이 두가지를 생각하는 것만으로 조화로운 균형을 당신의 웹디자인에 녹여낼 수 있습니다.

균형의 5가지 유형

균형에는 여러가지 종류가 있습니다. 웹페이지에서 시각적 균형을 이루는 유형은 디자인 요소들이 서로 어떻게 상호작용을 하는지에 따라서 구분됩니다. 아래와 같은 5가지 유형을 이용하여 각 요소들이 가진 중력을 조직화하고 사용자가 편안하게 느낄수 있도록 합시다.

  • 수평 균형
  • 수직 균형
  • 방사형 균형
  • 대칭 균형
  • 비대칭 균형

수평과 수직 균형

시각적으로 관심사를 관리하는 좋은 방법중 하나는 수평 또는 수직으로 균형을 잡는 것입니다. 수평 균형은 왼쪽과 오른쪽으로 요소들을 배치하여 균형을 잡고 수직 균형은 요소를 중앙축에서 위와 아래로 균형을 잡습니다.

Ness_horizontal_exp-585x376.png
Daniel_Martín_vertical_exp.jpg

방사형 균형

방사형 균형은 중앙을 중심으로 요소를 배치하여 균형을 잡는 것입니다. 기본적으로 중앙에 핵심 요소들 두고 그 주위에 다른 요소들을 배치합니다. 마치 해살 같은 느낌입니다.
Polecat_radial_exp.jpg

대칭과 비대칭 균형

수평과 수직 그리고 방사형 균형과 결합하여 나타날수 있는 균형이 대칭 또는 비대칭 균형입니다 대칭 균형은 구도에서 양측이 거울을 보는듯이 서로 대칭되어 있는 것입니다. 종이를 절반으로 접는것 처럼요. 대칭 균형은 그리드 레이아웃이나 건축 등 다방면에서 일반적으로 사용되어 온 매우 공식적인 균형입니다. 그래서 사용자에게 편안함을 제공합니다. 또한 응답형 웹 디자인(responsive web design)처럼 레이아웃이 다양한 크기로 변경되는 경우에도 균형을 잡기 용이하기 때문에 인기가 높아지고 있습니다.

FRONTEND_symmetrical_exp.jpg

비대칭 균형이 아마도 가장 일반적인 형태일 것입니다. 본질적으로 요소들에 의해 균형을 이루고있지만 정확하게는 서로 얽매이지 않습니다. 비대칭 레아아웃은 수준높은 시각적 계층 구조를 가지기때문에 대칭구조에 비해 더욱 흥미롭습니다. 비대칭 유형은 구도에 균형이 없다는 것이 아니라, 요소가 서로 영향을 받지 않도록 배치되는 것을 의미하는 것입니다.

Team-Viget_asymmetrical_exp.jpg

균형의 5가시 속성

구도에서 각 객체는 다른 개체와의 관련성과 동시에 자신만의 속성들을 가지고 있습니다. 균형의 주요 속성은 크기, 색상, 모양, 가치, 위치로 총 5개입니다 이러한 속성들은 개별적으로 대칭 균형을 만들기 위해 사용될 수 있습니다. 또한 이들을 결합하여 비대칭 균형을 만들어냅니다. 이것은 하나가 변화하면 다른 곳에도 영향을 미친다는 의미입니다.

크기

큰 빈 객체는 가벼운 시각적 비중을 가지고있어 보다 작고 뭔가 채워진 고밀도 개체들을 이용하여 균형을 유지할 수 있습니다. 예를 들어 컨텐츠 영역과 사이드바를 가진 블로그에서 객체는 두개의 뚜렷한 크기를 가지고 있습니다. 컨텐츠 영역이 사이드바 보다는 보통 큽니다. 균형을 이루기 위해서는 컨텐츠영역에 공백을 추가하여 시각적 중량감으로 균형을 이루어야합니다. 디자인만으로 대칭 균형을 잡고 싶을 때에는 요소의 시각적 무게에 상관없이 동일한 크기임을 확인할 수 있어야합니다.

Atlason_size_exp.jpg

색상

구도에서 객체의 색상은 개체를 더 가볍게 하거나 무겁게 할 수 있습니다. 어두운 색상은 무겁고 밝은 색상은 가벼워집니다. 예를 들면 사용자의 관심을 필요로하는 개체는 노란색 보다는 빨간색이 더 무겁습니다. 만약 어두운 색상을 가진 요소와 다수의 밝은 색상을 가진 요소들의 균형을 유지하고자한다면 균형의 다른 속성을 조정하는 것 보다 요소들이 위치한 배경 색상을 조정하는것이 효율적일 수 있습니다.

Touchtech_color_exp.jpg

모양

모양은 개체의 형태로, 도구의 균형을 극적으로 바꿀 수 있는 특성입니다. 구불 구불한 모양, 숫돌 형태 등 깨끗한 직선은 시각적으로 매우 재미있습니다. 하지만 너무 복잡한 모양은 오히려 균형을 잡기 곤란하고, 더 혼란스러워집니다. 과감하면서도 깨끗한 복잡도를 가진 개체는 균형을 유지합니다.

InfinVision_shape_exp.jpg

가치

대비 구도에서 균형을 맞추기위한 강한 요소가 될 수 있습니다. 개체의 대비가 높은것만으로 무게감을 실을 수 있습니다. 대비가 낮으면 그만큼 시각적으로 가벼워집니다. 대비는 개체 사이의 균형을 잡는 좋은 방법중 하나입니다. 대비가 전혀 없는 요소에 배경색을 낮은 명암의 질감으로 테두리에 배치하는 것입니다. 그리고 그라데이션이나 그림자는 대비를 낮추기 위해 사용될 수 있습니다.

Galph_value_exp.jpg

위치

위치는 가장 큰 균형 요인입니다. 색상, 크기, 모양, 가치와 다른 점은 요소에서 떨어져 균형을 유지하는 속성이라는 것입니다. 큰 개체가 작은 것보다 무겁지만 중앙 축에 가까운 것은 더 무겁습니다. 즉 중앙축에 가까운 개체는 더 먼 것에 비해 무게가 실린다는 것입니다.

Girl_With_A_Camera_position_exp.jpg

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar