Grids help designers create cohesive layouts, allowing end users to easily scan and use interfaces. A good grid adapts to various screen sizes and orientations, ensuring consistency across platforms.
그리드를 사용하면 설계자가 응집력 있는 레이아웃을 만들 수 있으므로 최종 사용자가 인터페이스를 쉽게 스캔하고 사용할 수 있습니다. 양호한 그리드는 다양한 화면 크기와 방향에 적응하여 플랫폼 간의 일관성을 보장합니다.
요약 :)
그리드는 디자이너가 응집력 있는 레이아웃을 만드는 데 도움이 되므로 최종 사용자가 인터페이스를 쉽게 스캔하고 사용할 수 있습니다.
뉴욕시에 가본 적이 있고 거리를 걸어본 적이 있다면 도시가 구축된 그리드 시스템 때문에 한 장소에서 다른 장소로 이동하는 방법을 쉽게 알아낼 수 있습니다. 도시 그리드의 예측 가능성이 현지인과 관광객이 쉽게 이동할 수 있도록 도와주는 것처럼 웹 페이지 그리드도 사용자와 디자이너를 모두 안내하는 구조를 제공합니다. 일관된 기준점으로 인해 그리드는 페이지 가독성과 스캔 가능성을 개선하고 사람들이 원하는 곳으로 빠르게 이동할 수 있도록 합니다.
정의: 그리드 는 페이지의 요소 레이아웃에 대한 구조를 제공하는 열, 여백 및 여백으로 구성됩니다.
웹 사이트 및 인터페이스에 사용되는 세 가지 일반적인 그리드 유형은 기둥 그리드, 모듈식 그리드 및 계층적 그리드입니다.
웹사이트 및 인터페이스의 공통 그리드 구조
열, 모듈식 및 계층적 그리드는 일반적으로 인터페이스에 사용됩니다.
열 그리드 에는 페이지를 세로 열로 나누는 작업이 포함됩니다. 그런 다음 UI 요소와 콘텐츠가 이러한 열에 정렬됩니다.
모듈식 그리드 는 행을 추가하여 기둥 그리드를 더 확장합니다. 이 열과 행의 교차는 요소와 콘텐츠가 정렬되는 모듈을 구성합니다. 모듈식 그리드는 검색을 수용할 수 있도록 행을 반복할 수 있으므로 전자 상거래 및 목록 페이지에 적합합니다.
계층적 그리드: 콘텐츠는 열, 행 및 모듈을 사용하여 중요도별로 구성됩니다. 가장 중요한 요소와 콘텐츠가 그리드의 가장 큰 부분을 차지합니다.
그리드 분해
사용 중인 그리드 유형에 관계없이 그리드는 열, 거터 및 여백의 세 가지 요소로 구성됩니다.
기둥: 기둥은 그리드에서 대부분의 공간을 차지합니다. 요소와 콘텐츠는 열에 배치됩니다. 모든 화면 크기에 적응하기 위해 열 너비는 일반적으로 고정 값이 아닌 백분율로 정의되며 열 수는 다양합니다. 예를 들어 모바일 장치의 그리드에는 4개의 열이 있고 데스크톱의 그리드에는 12개의 열이 있을 수 있습니다.
거터: 거터는 다른 열의 요소와 콘텐츠를 구분하는 열 사이의 공간입니다. 거터 너비는 고정된 값이지만 다른 중단점에 따라 변경될 수 있습니다. 예를 들어, 더 넓은 거터는 더 큰 화면에 적합하고 작은 거터는 모바일과 같은 작은 화면에 적합합니다.
여백: 화면의 왼쪽 및 오른쪽 가장 바깥쪽 영역을 나타냅니다. 콘텐츠는 그리드의 여백에 있지 않습니다. 이 공간은 고정되거나 화면 너비의 백분율로 표시될 수 있으며 다른 중단점에서 변경될 수 있습니다.
기둥 그리드의 주석이 달린 그림
그리드는 (1) 열, (2) 거터, (3) 여백의 세 가지 요소로 구성됩니다.
사용 중인 그리드의 예
예 1: 계층적 그리드
우리의 첫 번째 예는 The New York Times 에서 가져온 것 입니다. 이 화면은 계층적 그리드를 활용하여 신문과 같은 독서 경험을 제공합니다. 데스크탑 화면 크기에서 두 개의 기본 열이 계층적 그리드를 구성합니다. 가장 중요한 뉴스 기사는 그리드에서 가장 많은 공간을 차지하는 왼쪽 열, 그 다음으로 더 작은 열과 오른쪽의 모듈을 차지하는 2차 및 3차 기사가 뒤따릅니다.
New York Times는 계층적 그리드로 주석을 달았습니다.
New York Times는 계층적 그리드를 사용하여 신문과 같은 독서 경험을 제공합니다. (열은 노란색으로, 거터는 파란색으로, 여백은 보라색으로 강조 표시했습니다.)
예 2: 기둥 그리드
우리의 두 번째 예는 비타민 회사인 Ritual.com 의 것입니다. 이 디자인은 기둥 그리드를 사용하여 매력적인 시각적 경험을 만듭니다. 이 화면 크기에서 일관된 크기의 4개의 열이 그리드 구조를 구성하고 요소가 이러한 열에 정렬됩니다. 기둥 사이의 공간인 홈통도 크기가 일정하며 사용자가 다양한 제품을 시각적으로 구분하는 데 도움이 됩니다. 여백은 독립적으로 크기가 지정되며 왼쪽과 오른쪽이 동일합니다.
4열 그리드로 주석이 달린 의식 화면
Ritual의 4열 그리드를 사용하면 제품을 쉽게 스캔할 수 있습니다. (열은 노란색으로, 거터는 파란색으로, 여백은 보라색으로 강조 표시했습니다.)
예 3: 모듈식 그리드
세 번째 예제는 디자인 라이브러리인 Behance 에서 가져온 것입니다. 사이트 디자인은 모듈식 그리드를 사용하여 즐거운 브라우징 경험을 제공합니다. 데스크탑 크기에서 행은 일관된 크기의 4개의 모듈로 구성됩니다. 수평 거터는 수직 거터보다 약간 두껍고 여백은 디자인의 왼쪽과 오른쪽에서 일관되게 크기가 조정됩니다. 이전 예에서와 같이 거터는 각 요소를 시각적으로 구분합니다.
모듈식 그리드로 주석이 달린 Behance 화면.
Behance의 디자인은 사용자가 쉽게 탐색할 수 있는 모듈식 그리드를 사용합니다. (열은 노란색으로, 거터는 파란색으로, 여백은 보라색으로 강조 표시했습니다.)
예 4: 그리드 깨기
마지막 예는 Google의 Material Studies의 Shrine입니다 . 이 디자인은 너비가 2열인 왼쪽 탐색을 기반으로 볼 수 있듯이 기둥 그리드를 사용합니다. 자세히 보면 일부 제품 이미지는 여백에 정착하는 반면 다른 이미지는 그렇지 않다는 것을 알 수 있습니다. 이와 같이 그리드를 깨면 제품 이미지에 초점을 맞추거나 빠르게 스캔하는 것이 어려워지고 일부 제품에 다른 제품보다 더 많은 관심을 불러일으킵니다. 타당한 이유가 있는 한 그리드를 자주 끊는 것은 괜찮습니다.
기둥 그리드로 주석이 달린 신전 화면
그리드를 깨는 것은 사용자에게 혼란스러운 브라우징 경험을 제공합니다. (열은 노란색으로, 거터는 파란색으로, 여백은 보라색으로 강조 표시했습니다.)
그리드의 이점
그리드를 사용하면 최종 사용자와 설계자 모두에게 다음과 같은 이점이 있습니다.
설계자는 잘 정렬된 인터페이스를 신속하게 조합할 수 있습니다.
사용자는 예측 가능한 그리드 기반 인터페이스를 쉽게 스캔할 수 있습니다.
좋은 그리드는 다양한 화면 크기와 방향에 쉽게 적응할 수 있습니다. 사실 그리드 레이아웃은 반응형 웹 디자인 의 필수 구성 요소입니다 . 반응형 디자인은 중단점을 사용하여 레이아웃이 변경되어야 하는 화면 크기 임계값을 결정합니다. 예를 들어, 데스크탑 화면에는 12개의 그리드 열이 있을 수 있으며, 모바일에서는 결과 레이아웃에 4개의 열만 포함되도록 스택될 수 있습니다.
Behance 모바일 및 웹 화면
모바일 크기에서 Behance의 1열 그리드(왼쪽)는 4열 그리드 구조(오른쪽)로 리플로우되었습니다.
더욱 중요한 것은 그리드가 폐기 개념이 아니라는 것입니다. 디자이너와 개발자 모두가 사용합니다. 개발자가 디자인을 생성할 때 사용하는 그리드 구조와 통신하여 그에 따라 구현할 수 있도록 하십시오.
그리드 선택 및 설정
그리드를 사용하고 설정하는 방법은 사용자를 위해 잘 고안된 레이아웃과 경험을 만드는 데 기본입니다.
필요에 맞는 그리드를 선택하십시오. 시간을 내어 기둥, 모듈식 또는 계층적 그리드 중 어떤 유형의 그리드가 귀하의 요구 사항에 가장 적합한지 생각해 보십시오. 페이지의 한 항목이 주변 요소보다 항상 더 중요하다면 계층적 격자가 가장 적합할 수 있습니다. 예를 들어, 계층적 그리드는 온라인 뉴스 플랫폼에 적합합니다. 표시해야 하는 콘텐츠가 매우 가변적인 경우 기본 기둥 또는 모듈식 그리드를 사용하는 것이 좋습니다. 이러한 그리드는 설계 시 많은 유연성을 제공하기 때문입니다. 예를 들어, 요소와 콘텐츠는 디자인 요구 사항에 맞게 여러 열이나 모듈에 걸쳐 있거나 하나만 있을 수 있습니다.
그리드를 설정하는 데 시간을 할애하십시오. 어떤 유형의 그리드가 귀하의 요구에 잘 맞는지 파악했으면 설정을 시작하십시오. 화면 크기를 기준으로 열 수와 여백 및 여백 크기를 결정합니다. 모바일, 태블릿 및 데스크톱 화면을 준비하고 싶을 것입니다. 랩톱 또는 데스크톱 크기의 12열 그리드는 일반적으로 대부분의 디자인 요구 사항에 충분히 유연합니다. 기기 크기가 줄어들면 열 수가 줄어듭니다. Sketch 및 Figma와 같은 와이어프레임 도구를 사용하면 설계를 시작한 후에도 그리드를 빠르고 쉽게 설정하고 편집할 수 있습니다.
Figma에서 그리드 구조 설정하기
Figma에서 열 수, 여백 크기, 여백 크기를 쉽게 설정할 수 있습니다.
항상 여백이 아닌 열 안에 콘텐츠를 배치합니다. 콘텐츠와 요소를 명확하게 분리하고 정렬하기 위해 그리드에 요소를 배치할 때 여백은 비어 있어야 합니다.
콘텐츠 또는 요소는 여백이 아닌 열 내부 및 가로질러 배치되어야 합니다.
8px 그리드 시스템 사용을 고려하십시오. 가장 일반적인 장치의 경우 픽셀 단위의 화면 크기는 8의 배수입니다. 그리드 구성 요소 값을 8의 배수로 유지하면 일반적으로 그리드를 확장하고 구현하기가 더 쉽습니다.
결론
그리드는 설계자에게 레이아웃의 기반이 되는 구조를 제공할 뿐만 아니라 최종 사용자의 가독성과 가독성을 향상시킵니다. 다양한 화면 크기에 쉽게 적응할 수 있는 좋은 그리드 시스템을 사용하십시오.
