[UI 디자인 기초]레이아웃에 대한 이해

ㅣ플러스 엑스 UI 강의 후기 08ㅣ

---

02. 3-2 레이아웃에 대한 이해

레이아웃이란, 효과적인 레이아웃을 만드는 게슈탈트 법칙.

 

 
'레이아웃이란?'

그리드를 기반으로 영역 배치, 여러 디자인을 효과적으로 정리하는 것. 


'레이아웃'
유사한 맥락으로 화면을 디자인하여 어떤환경에서도 동일한 서비스를 경험하게 하는 것. 

'균형과 구조'
[균형]
정적인 화면 균형
[구조]
추상적인 공간 구조


레이아웃의 구성 = 오브젝트의 순서, 위치에 따라 단으로 나눌 수 있음 
[1단]
가장 간단한 레이아웃. 
-  하나의 컬럼으로 이루어짐. 
- 디자인 자유도 높음. 한 페이지에서 스토리흐름에 따라 보여주기 좋음.
- 모바일확장 쉬움 

 

[2단]
- 두개의 컬럼.
- 1단 보다 확장된 콘텐츠 배열로 정보 제공 가능. 
 - 모바일로 확장 쉬움.

 

[3단]
배열 다르게 사용하여 강조 
- 세 개의 컬럼. 
-1:1:1- 많은 콘켄츠/ 무게의 균형
- 1:2:1 _ 서비스가 강조하는 스트롤이 필요할때. 

 

'레이아웃'

사용자의 시각적 경험을 형성하는데 중요한 역할

'게슈탈트'

독일어 형태, 모양 이라는 뜻.  1920년 독일 심리학파 용어.
인간이 시각적 자극을 인식하는 방법 이론. 

- 요소: 색 / 텍스트 / 이미지 
- 이론:  전체는 부분의 합이 아니다. 


'시각적 인식 방법'
[유사성]
유사하다고 인식하는 것을 그룹화 함. 
비슷한 요소는 서로 연관되어 있다고 생각함. 
ex) 크기나 형태가 같은 것을 같은 그룹으로 인식함 

UI 적용방법 -> 
- 색상: 최소한의 색상 활용 
- 크기: 같은 크기 사용
- 모양: 가장 간단한 모양 활용
- 방향: 같은 방향으로의 움직임 사용 


[근접성]
 요소들과 배치 간격과 관련됨. 
시각적 관계성이 없으면 정보와의 관계를 짓지 못함. 

UI 적용방법 -> 
- 간격이 좁으면 연관된 정보로 인식.
- 인접 배치 = 서로 관련 있음.  
- 간격이 넓으면 유사성이 없다고 인식

 

[연속성]
시각적으로 연속적인 형태를 그룹화 시키려는 심리.
비슷한 디자인 패턴이 연속적으로 이어질 경우 서로 연관성이 있다고 인지함.

UI 적용방법 -> 
- 요소를 연속적으로 배치하여 하나의 흐름으로 보이도록 만듬.
- 여러개의 요소를 연속적으로 배치하면 하나의 흐름으로 인식.
- 오브젝트 방향과 움직임을 예상. (시선 이동)
- 연속성 요소를 활용하여 끊임없는 스크롤 행동을 유도 할 수 있음. 


[공동 운명]
여러개의 개별적 요소들이 하나의 유기적 요소로 인식 됨. 
같은 방향으로 움직이는 경우 정지하거나 다르게 움직이는 요소들보다 서로 유사성이 있다고 인식. 면안 오브젝트가 많으면 관련성을 인식하기 어려움. 

UI 적용방법 ->
- 인터렉션 
- 멈춘 콘텐츠, 다르게 움직이는 콘텐츠 사이에 같은 방향으로 움직이는 요소들이 있다면 유사성을 높게 인식함 
- 세로 인터렉션에서 가로 인터렉션을 더해 콘텐츠의 간의 차이 (다른 성격)를 보여줌 
- 정보위계가 비슷한 콘텐츠는 동일한 움직임. 정보위계 상하관계가 필요한 경우 시간차를 두고 움직이는 인터렉션


[폐쇄성]
불완전한 형태를 무의식적으로 완전한 형태로 인지하려는 심리. 
객관적으로 일관성이 없는 부분을 일관성이 있는 형태로 만드는 원리. 

UI 적용방법 ->
- 여백과 간격으로 전체모양을 만듬. 
- 각 요소들이 선으로 연결 되어 있지 않더라도 눈에 흐름을 따라 전체 모습을 읽어 낼 수 있도록 함. 
- 카드 UI에서 자주 활용  
- 복잡성을 줄이고 무의식적인 참여를 이끌고 심미성을 이끈다. 
- 오브젝트 단순, 인지하기 쉬운 형태로 근접해 있을경우 효과적임. 그 반대의 경우 인식 어려움. 시각적 패턴을 찾기 어려운 경우 인터렉션 효과를 활용하여 패턴을 찾기 쉽게 도울 수 있음. 

- 아이콘에 응용 시 브랜드 컨셉이나 서비스 디자인 스타일을 직관적으로 전달 가능.

 

 

'게슈탈트'

사용자의 시지각적 심리 이해와 결과물 검증에 활용하는 도구 

 

 

---

[🥜 추가조사]

UI 디자인 게슈탈트 이론

https://yozm.wishket.com/magazine/detail/1020/

구글 레이아웃 가이드 

https://m2.material.io/design/layout/understanding-layout.html

Material Design

---

[🌞 목표]

▶  지각 심리 이론에 따른 사용성 높은 UIUX 설계를 할 수 있다. 

---