{3줄 요약}

화면에는 보이지 않는 정렬 기준이 있습니다. 그 기준이 요소를 맞추고 질서를 만듭니다.
그리드 없이 만들면 처음엔 괜찮아 보여도 화면이 늘어날수록 배치가 제각각이 됩니다.
신문·잡지·앱·웹처럼 안정적으로 보이는 레이아웃은 대부분 그리드 위에서 설계됩니다.

그리드가 없으면 어떻게 되나요

인터페이스를 처음 만들 때는 눈대중으로도 깔끔해 보여요.
하지만 화면이 10개, 20개가 되면 문제가 생겨요.

어떤 화면의 좌측 여백은 16px인데, 다른 화면은 20px예요.
카드 간격이 어떤 곳은 12px, 어떤 곳은 16px이에요.
제목 위치가 조금씩 달라요.

각각 봤을 때는 괜찮아 보여도, 여러 화면을 나란히 놓으면 뭔가 어수선해요.
통일된 시스템이 없기 때문이에요.

그리드는 이 문제를 해결해요.
모든 화면이 같은 기준선을 공유하면, 화면마다 따로 만들어도 전체가 하나의 제품처럼 보여요.

그리드의 세 가지 요소

컬럼 (Column) - 화면을 세로로 나누는 단위예요.
웹에서는 12컬럼이 가장 많이 쓰여요.
12는 2, 3, 4, 6으로 나눌 수 있어서 다양한 레이아웃이 가능해요.

거터 (Gutter) - 컬럼 사이의 간격이에요.
이 간격이 일정해야 요소들 사이에 규칙적인 리듬이 생겨요.

마진 (Margin) - 화면 가장자리와 콘텐츠 사이의 여백이에요.
모바일에서는 보통 16~20px, 태블릿과 데스크탑에서는 더 커요.

실제 서비스에서 보는 그리드

네이버 메인 페이지 - 데스크탑에서 12컬럼 그리드 기반이에요.
뉴스, 광고, 검색 영역이 서로 다른 컬럼 수를 차지하면서 레이아웃을 구성해요.

쿠팡 상품 목록 - 모바일에서는 2컬럼, 태블릿에서는 3컬럼, 데스크탑에서는 4~5컬럼으로 자동으로 바뀌어요.
같은 그리드 기반이라 화면 크기가 달라져도 일관된 구조가 유지돼요.

토스 앱 - 모바일 단일 컬럼 기반이에요.
여백과 카드 간격이 일정해서 스크롤하면서 콘텐츠가 예측 가능하게 이어져요.

8pt 그리드 시스템

실무에서 많이 쓰는 방식이에요.
모든 간격과 크기를 8의 배수로 정의해요.

8, 16, 24, 32, 40, 48, 64..
.
이 숫자들로 여백, 패딩, 컴포넌트 크기를 맞추면 화면이 자연스럽게 정렬돼요.
디자이너와 개발자가 같은 수치를 쓰니 구현할 때 오차도 줄어요.

8을 쓰는 이유는 대부분의 화면 해상도가 8로 나눠지고, 8pt 기반 요소가 선명하게 렌더링되기 때문이에요.

그리드를 벗어나는 경우

그리드는 규칙이지만 항상 따라야 하는 건 아니에요.

영웅(Hero) 이미지, 전면 배경 사진, 특별한 강조가 필요한 요소는 의도적으로 그리드를 벗어나기도 해요.
이걸 "그리드 깨기"라고 해요.

다만 효과는 그리드가 잘 잡혀 있을 때만 나와요.
그리드가 없는 상태에서 벗어나봤자 그냥 어수선한 거예요.

레이아웃 구조와 그리드가 어떻게 연결되는지는 레이아웃 구조 이해를 먼저 보세요. 카드 UI에서 그리드가 어떻게 활용되는지는 Card UI 구조에서 볼 수 있어요.

관련 아티클

참고 문헌

  • Josef Müller-Brockmann, 《Grid Systems in Graphic Design》(1981) - 그리드 시스템의 이론과 실무를 정립한 고전이에요.
  • AIGA, Resources - https://www.aiga.org/resources