그리드 디자인을 통한 더 나은 UI 디자인

디자인은 화면을 아름답게 만들 뿐 아니라 다양한 정보를 사용자에게 효율적으로 전달해야 합니다. 이를 위해 그리드 시스템을 이용해 보세요. 그리드 시스템을 이용한 레이아웃은 쉽고 명료할 뿐만 아니라 아름답습니다. 본문을 통해 그리드 디자인을 알아보고, 당신의 UI 디자인을 한 단계 발전시켜 보세요. 

Pixso의 UI 디자인 기능으로 카드와 텍스트를 배치할 때도 먼저 정렬 기준을 정해 두면, 같은 화면을 여러 사람이 수정해도 간격을 설명하고 비교하기 쉽습니다.

Part 1: 그리드 디자인이란?

그리드 시스템은 화면이나 지면을 일정한 기준으로 나누고, 그 기준에 맞춰 글과 이미지를 배치하는 방법입니다. 편집 디자인뿐 아니라 웹과 앱에서도 사용하며, 정보의 양과 화면 너비에 맞춰 열, 행, 여백을 정합니다.

Part 2: 그리드 시스템이 디자인에 중요한 이유

1. 많은 양의 정보를 다룰 수 있으며 정돈된 느낌을 줍니다.

디자이너는 심미성뿐만 아니라 정보 전달의 효율성을 추구합니다. 그리드 디자인은 명확한 가이드를 제공하므로, 이를 준수한다면 다양한 디자인 요소를 포함하더라도 산만한 느낌을 주지 않습니다.

2. 격자 형식을 가이드라인으로 이용하므로, 쉽고 빠르게 디자인을 할 수 있습니다.

대부분의 디자인 프로그램은 스냅과 정렬 기능을 제공하고 있습니다. 그리드 시스템을 잘 이용한다면, 디자인 요소의 배치를 고민하는 시간을 줄일 수 있습니다.

3. 다양한 정보를 일관성 있게 배치하여 아름다운 화면 구성이 가능합니다.

여러 개의 화면으로 구성된 프로젝트를 작업할 때는 각 페이지 간의 통일감을 추구하는 것이 중요합니다. 그리드 시스템을 이용한다면 다른 내용이 포함된 페이지 간에도 일관된 느낌을 줄 수 있습니다.

Part 3: 그리드 디자인의 여러 가지 유형

그리드 디자인은 편집 디자인에서 발전된 방법론입니다. 따라서, 편집 디자인 중심의 그리드 디자인 대표 유형을 몇 가지 소개하고 웹 및 UI에서 그리드 시스템이 가지는 이점을 알아보겠습니다.

블록 그리드

블록 그리드는 그리드 시스템 중 가장 간단하며 기본이 되는 구성입니다. 아트보드 사방의 여백을 지정하면 한 개의 블록이 생깁니다. 여러 장의 화면을 구성할 때 여백을 일정하게 유지하는 것만으로도 일관된 느낌을 줄 수 있습니다.

컬럼 그리드

컬럼 그리드는 아트보드에 2개 이상의 블록, 즉 컬럼을 배치하는 그리드 시스템입니다. 출판물의 다단 형식과 비슷합니다. 서로 비교할 2개 이상의 정보를 나란히 배치할 때 유용한 방식입니다. 또한 넓은 아트보드에서 작업할 때 블록 그리드의 가독성을 높이는 방법이기도 합니다.

모듈 그리드

모듈 그리드는 컬럼 그리드와 다소 유사한 형태를 띠고 있습니다. 각 컬럼에 행과 여백을 추가해 여러 개의 모듈 블록이 정렬되어 있는 그리드 시스템이기 때문입니다. 아트보드가 크고 배치할 정보가 많을 때 유용합니다.

계층 그리드

모듈 그리드에서 정보의 양과 중요도에 따라 한 개의 시각 정보가 2개, 혹은 그 이상의 모듈을 차지한다고 생각해보세요. 아트보드 상의 위치도 달라질 수 있을 것입니다. 이러한 방식으로 디자인 요소를 조직화하며 시각 정보의 위계에 집중한 그리드 시스템이 계층 그리드입니다.

UI 그리드 시스템

반응형 화면에서는 너비에 따라 열의 수, 여백, 카드가 차지하는 영역을 함께 바꿉니다. 넓은 화면의 요소를 단순히 이동하거나 축소하는 것만으로는 긴 제목과 버튼이 겹칠 수 있습니다. 화면이 좁아져도 정보의 읽는 순서와 조작할 수 있는 공간이 유지되어야 합니다.

상품 카드로 계산해 보는 열 너비

상품 사진, 두 줄 제목, 가격, 구매 버튼이 들어가는 목록을 예로 들어 보겠습니다. 다음 숫자는 시작점을 정하기 위한 설계 예시입니다. 12개의 열 사이에는 간격이 11개 있으므로, 간격의 총너비를 먼저 뺀 뒤 열 수로 나눕니다.

바깥 여백은 화면과 내용 사이의 공간이고, 거터는 열 사이의 공간입니다. 카드 안에서 사진과 제목 사이를 띄우는 값은 별도로 관리합니다. 이 세 값을 모두 같은 숫자로 맞추기보다는, 어떤 관계를 보여 주는 간격인지 구분해야 합니다.

좁은 화면에서는 상품명과 가격의 순서를 유지하면서 한 줄에 한 카드를 놓습니다. 제목을 세 줄로 늘려 보고 가격이나 버튼이 밀려 겹치지 않는지 확인하세요. 시각적으로 위치를 바꾸더라도 실제 읽는 순서와 키보드 이동 순서는 개발자와 함께 확인해야 합니다.

Pixso에서 내용이 늘어나는 경우까지 비교하기

너비가 다른 두 프레임에 같은 상품 카드를 배치하고, 긴 상품명과 할인 표시를 넣습니다. 카드 바깥의 정렬 기준과 카드 내부의 오토 레이아웃 간격을 나누어 조절하세요. 카드가 차지하는 열 수를 바꿀 때 무엇이 고정되고 무엇이 늘어나는지 댓글로 남기면, 구현할 때도 같은 규칙을 적용하기 쉽습니다.

Part 4: 결론

그리드 시스템은 디자인 요소의 배치에 있어 가장 기본적인 방법론입니다. 그리드 디자인을 잘 이용한다면, 복잡하고 방대한 양의 정보를 다루는 능력을 발전시킬 수 있습니다. 보다 나은 사용자 경험을 제공하는 UI 디자이너로 도약하기 위해 그리드 시스템을 적극적으로 이용해 보세요.