레이아웃의 세 가지 기술 | 여백, 정렬, 크기

1. 레이아웃의 첫 번째 기술: 여백

 

1) 여백: UI에서 사용되는 모든 빈 공간

-사용자로 하여금 어디에 중점을 둬야할 지 구분해줌

 

2) 여백을 주는 방법

- UI에 일관성을 주어 예측 가능하도록 만들어주는 역할을 하는 것이 여백

- 여백을 정리해 일관성을 주었다면, 의도적으로 여백에 차이를 두어 위계를 줄 수 있음(특히, 근접성의 원리)

* 근접성의 원리: 가까울수록 더 관련이 있다고 느낌

 

출처: https://toss.im/

 

 

- 특정 요소 주변에 영역이 많을 경우, 해당 요소에 집중되는 경향이 있음

 

 

대표적인 것이 애플

 

 

3) UI에 여백 적용하기

- 간격규칙, 보통 8의 배수로 간격 규칙을 정한다.

출처: 코드잇

https://www.codeit.kr/tutorials/109/spacing-systems

간격 규칙 | 코드잇

 

 

2. 레이아웃의 두 번째 기술: 정렬

1) 정렬: 모든 요소의 위치를 특정 기준선에 맞추어 배치하는 것

- 잘 정렬하면, 배치되는 요소의 위치에 일관성이 생기면서 다음 요소가 어디쯤에 나올 지 예측하기 쉬워짐

- 어디를 기준으로 배치되었는 지 잘 드러내서, 사용자가 어떤 정보가 어디에 나올 지 예측하기 쉽게 해주는 레이아웃의 핵심 기술

 

2) 요소 간의 정렬

- 가운데 정렬은 사용자의 집중을 한 곳으로 몰아주지만

- 한 번에 보여주어야 할 컨텐츠가 많을 때에는 좌측 정렬이 좋음

- 단, 아랍어와 같이 오른쪽에서 왼쪽으로 읽는 글은 우측 정렬이 좋음

- 더불어 나열할 때에는 일직선으로 나열하는 것이 좋

 

 

3) 영역에서의 정렬

- 여백과 마찬가지로 일관성과 위계의 관점에서 바라보아야 함

 

 

3. 레이아웃의 세 번째 기술: 크기

- 글자간의 크기를 통일하는 것만으로도 텍스트의 일관성 확인

 

1) 요소들의 최적의 크기

- 본문: 14~18px 사이. 보통 16px

- 약한 본문: 본문 -2px. 보통 14px

- 제목: 20~80px 사이. 

 

!! 주의 !!

- 작은 픽셀에서는 조금씩만 늘리다가 큰 픽셀에서는 크게 늘려야 함

그렇다면 제목은 20, 24, 32, 40, 48 이런 식으로 커질 것

 

- 아이콘은 보통 정방형으로 많이 쓰이고 사용되는 텍스트와 같은 크기로 쓰임

- 버튼의 텍스트는 본문 +2px정도가 쓰임. 버튼 텍스트와 버튼 사이 위아래 여백은 각각 텍스트 크기의 1/2~1배 적당함. 버튼의 높이는 버튼 텍스트가 2개 혹은 3개로 꽉찰 정도의 높이가 적당하기 때문

- 버튼텍스트와 버튼 사이 각각의 좌우 여백은 위아래 여백의 1~2

 

 

 

2) 영역의 크기

https://www.codeit.kr/tutorials/62/useful-design-resources

유용한 디자인 리소스 목록 | 코드잇