[보기 좋은 프로덕트의 비밀] 레이아웃

• 특정 영역 안에 요소를 배치하는 방식, 레이아웃 기초에 대해 배워 봅니다.
• 다양한 스크린과 환경에서 표시되는 디자인 요소를 균형있고 구조적으로 잘 표현할 수 있도록 도와주는 레이아웃에 대해 알아봅시다.

---

Lay something out

 

레이아웃 만들 때 신경써야 하는 점

1. 위계 Hierarchy

2. 정렬 Alignment

3. 여백 White space

4. 흐름 Flow

 

 

위계 Hierarchy

: 중요도에 따라 정보 구분하기

 

최근 들은 음악을 상단에 크게 표시한다.

 

 

정렬

: 비슷한 정보끼리 정렬하기

주식 이름, 주가를 좌/우 정렬하여 한 눈에 볼 수 있음

 

 

흐름

: 눈의 흐름대로 배치하기

정렬에 따라 글의 흐름을 읽고, 풍부한 정보를 얻고 싶을 때 이미지를 확인한다.

 

 

여백

: 숨 쉴 수 있는 공간 주기

 

 

게슈탈트 심리학

: 전체는 부분의 합이 아니다.

 

유사성

비슷한 요소는 비슷한 모양으로 나타낸다.

 

 

 

근접성

연관된 것은 가깝게 나타낸다.

 

 

연속성

그룹은 선으로 묶는다. 같은 성격을 가진 상품 리스트라는 것을 알 수 있다.

 

 

폐쇄성

여백, 정렬만으로도 충분하다. 굳이 선으로 나누지 않아도 인지할 수 있다.

 

 

공동 운명

같은 그룹은 같이 움직이게 나타낸다. ex) 스와이핑 기능

 

 

 

디자인 현황

거의 모든 서비스들이 모바일을 기준으로 디자인을 하고 있다.

유닛 단위 : 8px(dp)

 

 

 

그리드