4장 화면 구성요소의 레이아웃 - 사용자를 끌어들이는 UX/UI의 비밀

2022 우아한스터디 - UX 패턴파인더 스터디

 

레이아웃

'레이아웃'이란, 정보, 기능, 장식 등을 배치하는 방법과 그 결과를 말한다. 

사용자는 레이아웃을 보면서 어떤 행동을 취할지 유추한다. 따라서 적절한 레이아웃은 사용자가 각 정보와 기능의 우선순위를 직관적으로 파악하는 것을 돕는다.

레이아웃 디자인에는 보통 다음과 같은 사용자 인터페이스 영역이 포함된다.

• 헤더/창 제목
• 메뉴/내비게이션
• 주요 콘텐츠 영역
• 푸터
• 패털

 

시각적 계층구조 활용하기

시각적 계층구조(Visual Hierarchy)는 콘텐츠들이 시각적으로 어떤 계층 구조를 갖도록 보여지는지에 관한 것이다.

중요도에 따라 각 구성요소를 정렬하고 크기와 비율을 조정하여 가장 집중해야 할 대상으로 시선을 끌어당겨야 한다. 중요도가 높은 계층은  눈에 잘 들어오도록, 중요도가 낮은 계층은 눈에 띄지 않게끔 해야한다.

• 크기와 시각적 무게감, 색상에 대비를 주어 극적으로 돋보이게 할 수 있다.
• 밀도는 화면을 점유하는 구성요소들 사이에 공간이 얼마나 많은지를 나타내는 지표이다. 밀도가 낮을수록 시원하고 열린 느낌을 주지만. 구성요소간 연관성을 알아차리기 어렵다.
• 크기와 밀도가 동일해도 색상 대비를 통해 시선을 끌어올 수 있다.

좋은 시각적 계층구조는 중심점을 잘 이용해 시선이 올바른 순서에 맞춰 적절한 장소로 이동하도록 한다. 곡선이나 직선으로 암묵적인 선을 만들어서 시각적 내러티브를 만드는 방법이 그 예시이다. 인터랙티브 툴을 디자인하는 경우, 페이지 전체에 컨트롤을 분산시키는 것은 좋지 않다. 이는 사용자가 원하는 컨트롤을 찾는 것을 더 고생스럽게 할 뿐이다.

이렇게 사용자가 자연스럽게 페이지를 훑어볼 때 움직이는 시선의 동선을 시각적 흐름(Visual Flow)라고도 한다.

 

 

게슈탈트 법칙

게슈탈트 법칙은 사람이 시각적 형태를 인식하는 방법을 설명하는 규칙이다. (게슈탈트는 독일어로 '형식'이나 '모양'을 뜻한다.)

• 근접성의 법칙    요소를 서로 가깝게 배치하면 서로 연관되어 보인다.
• 유사성의 법칙    서로 같은 유형(모양, 크기, 색상)이면 서로 연관되어 보인다.
• 연속성의 법칙    시선은 정렬된 요소들이 만든 선을 따라간다.
• 폐쇄성의 법칙    선이 뚜렷하게 그려져 있지 않아도 우리의 뇌는 자연스럽게 선을 닫는다.

위 법칙은 서로 결합해서 사용하는 것이 좋다. 콘텐츠를 정렬했을 때 특정한 형태가 보일 정도의 규칙이 있거나, 주변 여백으로 형태를 만들 수 있다면 폐쇄성의 법칙에도 작용돼 효과가 극대화 된다.

 

 

 

 

내용출처: 사용자를 끌어들이는 UX/UI의 비밀(제니퍼 티드웰, 찰스 브루어, 아인 발렌시아 저)