[UX/UI디자인] UI 디자인 시의 그리드 사용 방법 8가지

규칙1. 8pt

 

8포인트 그리드는 일관성을 주고, 비주얼적으로 정돈되어 보이는데에 도움을 주는 강력한 방법입니다.

8pt 그리드는 각종 컴포넌트 부터, 가로 세로 정렬에 이르기 까지 다양하게 적용 가능합니다.

 

규칙2. 컬럼의 수(Column count)

 

컬럼의 갯수는 12,8,4 등 짝수로 만드는 것이 좋습니다.

개발자의 관점에서 봤을때, 어떤 스크린으로 적용하더라도 컨텐츠가 이상없이 안정적으로 나올수 있습니다.

 

규칙3. 거터 폭(Gutter width)

 

제본 용 여백 폭은 화면 크기에 맞게 유연한 열 너비로 고정되어 있습니다. 일반적으로 30px는 라이브러리 전체의 거터 폭이지만 8pt 시스템을 유지하려면 32px를 사용하는 것이 좋습니다. 그것은 각 거터마다 16px입니다.

 

규칙 4. 기준선(Baseline)

 

가로의 여백 뿐아니라 세로의 정렬과 여백도 UI에서 중요합니다.

모든 텍스트에 4pt 베이스라인을 적용 하면 정돈된 결과를 확인 할수 있습니다. 버튼안에 있는 텍스트는 베이스라인을 적용 하지 않아도 됩니다. 

 

규칙 5. 키 라인(Keyline)

 

그리드와 레이아웃은 물론 경험 전반에 걸쳐 키 라인을 구축하는 데 도움이됩니다. 이것은 열 중첩의 대안이며 신속하게 확장하기가 쉽습니다.

 

규칙 6. 패딩(Padding)

 

패딩은 구성 요소를 그리드 전체에 편안하게 배치하는 데 중요합니다. 패딩은 요소 사이의 공간이므로 그리드와 함께 8pt 패딩을 고수하는 것이 가장 좋습니다.

 

규칙 7. 수직선(Vertical)

 

여백은 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽에 적용됩니다. 그러나 수직 정렬은 UI에 쌓인 구성 요소의 높이입니다. 이 구성 요소의 높이는 8pt 시스템을 따라야합니다.

 

규칙 8. 증가(Increment)

 

이는 특정 구성 요소에 적용되며 8pt 그리드를 사용하여 일관성을 다시 만듭니다. 카드를 만들려면 16 단위 넓이로 증분 횟수를 곱하십시오. 이 예에서는 카드 크기가 384px (24x16px)