Grid 시스템 이해하기

웹사이트를 보면 콘텐츠가 일정한 기준에 맞춰 정렬되어 있습니다.
이때 디자인의 기준이 되는 것이 Grid 시스템입니다.

Grid는 디자인 요소를 정렬하고
레이아웃을 체계적으로 구성하기 위한 기준선 역할을 합니다.

주요 포인트 Top3

01. Grid 시스템이란?

Grid 시스템은 디자인 요소를 정렬하기 위한 레이아웃 구조입니다.

웹사이트에는

• 텍스트
• 이미지
• 카드 UI
• 버튼

같은 다양한 요소가 배치됩니다.

Grid 없이 디자인하면
레이아웃이 정렬되지 않고 복잡해질 수 있습니다.

그래서 Grid를 사용하여

• 콘텐츠 정렬
• 디자인 균형
• 레이아웃 일관성

을 유지하게 됩니다.

02. 디바이스별 Grid 구조

웹 디자인에서는 보통 디바이스에 따라 Grid 구조를 다르게 사용합니다.

대표적인 예시는 다음과 같습니다.

Desktop

Count - 12 Column
Margin - 보통 120px ~ 160px
Gutter - 보통 24px

Tablet

Count - 8 Column
Margin - 보통 60px ~ 80px
Gutter - 보통 24px

Mobile

Count - 4 Column
Margin - 보통 16px ~ 24px
Gutter - 보통 16px

이 값들은 절대적인 값은 아니며, 웹 또는 앱 디자인에서 가장 많이 사용하는 기준이며
프로젝트 성격 및 기획에 따라 달라질 수 있습니다.

03. Grid를 사용하는 이유

Grid 시스템을 사용하면 다음과 같은 장점이 있습니다.

• 디자인 정렬이 쉬워짐
• 레이아웃 구조가 안정적
• 반응형 디자인에 유리

특히 웹사이트에서는
Grid를 기준으로 콘텐츠를 배치하면
디자인과 퍼블리싱 작업이 훨씬 수월해집니다.

04. 피그마에서 Grid 설정하기

피그마에서는 Frame에 Layout Grid를 적용할 수 있습니다.

Frame을 선택한 후
우측 패널에서 Layout Grid를 추가하면 됩니다.

설정할 수 있는 항목

• Column Count
• Margin
• Gutter

이 값을 설정하면 디자인 작업 시
레이아웃 기준을 확인하면서 작업할 수 있습니다.

GOYO.’s Tip

Grid 설정 값은 절대적인 규칙이 아니라 디자인과 기획에 따라 변경될 수 있습니다.
중요한 것은 Grid를 기준으로 콘텐츠를 정렬하여 일관된 레이아웃을 만드는 것입니다.

마무리

이번 글에서는 웹 디자인에서 레이아웃 기준이 되는
Grid 시스템과 디바이스별 Grid 구조를 정리했습니다.

Grid를 이해하면 보다 체계적인 UI 디자인을 만들 수 있습니다.