그리드브레이킹 (Breaking the Grid)

디자인학
한 줄 정의: 정해진 그리드 규칙을 의도적으로 벗어나 특정 요소를 강조하거나 시각적 긴장감을 만드는 디자인 전략이다.

쉽게 풀면

일부러 격자 규칙을 깨서 특정 부분을 더 눈에 띄게 만드는 디자인 기법이다.

왜 중요한가

그리드 파괴는 정연한 칼럼 그리드를 의도적으로 벗어나 요소를 배치해 긴장과 주목을 만드는 기법으로, 포스터나 패션 잡지, 랜딩 페이지에서 정형화된 레이아웃과 차별화하는 수단으로 쓰입니다. 규칙이 있어야 파괴가 읽히므로, 오히려 그리드가 잘 세워진 디자인에서만 효과가 납니다. 접근성 관점에서는 시각적으로 그리드를 벗어난 요소라도 스크린리더가 읽는 순서(마크업 순서)는 논리적 흐름을 유지해야 하며, 이 둘이 어긋나면 시각 사용자와 스크린리더 사용자가 전혀 다른 순서로 콘텐츠를 접하게 된다. 사진이나 일러스트 하나를 여러 칼럼에 걸쳐 크게 배치하는 것도 그리드 파괴의 흔한 형태로, 이는 나머지 요소들이 그리드를 지키기 때문에 더 두드러져 보인다.

논문에서는 이렇게 쓰입니다

이 연구는 포스터 디자인에서 그리드브레이킹 기법이 시각적 주목도에 미치는 효과를 실험하였다.

규칙적인 배치를 깨뜨린 요소가 관람자의 시선을 얼마나 끄는지 측정한 실험이다.

"레이아웃 일부 요소를 격자선 밖으로 의도적으로 벗어나게 배치해 시선을 끄는 표지 디자인이 예로 제시되었다."

정돈된 격자 체계를 기본으로 삼되 특정 요소를 일부러 어긋나게 배치해 단조로움을 깨고 긴장감을 주는 편집 기법을 가리킵니다.

조금 더 깊게 보면

그리드 파괴는 David Carson의 1990년대 잡지 작업이나 그 이전 Wolfgang Weingart의 뉴 웨이브 타이포그래피처럼 스위스 스타일의 질서에 대한 반작용으로 이해해야 맥락이 잡힙니다. 무질서와의 차이는 일부만 벗어나고 나머지는 그리드를 지킨다는 데 있습니다. 웹에서는 반응형 재배치와 접근성(읽기 순서와 시각 순서의 불일치)에서 비용이 발생하므로 콘텐츠 페이지보다 표현적 페이지에 한정하는 것이 보통입니다. 그리드를 깨는 요소는 보통 전체 구성 요소 중 소수(한두 개)에 한정하고 나머지는 철저히 그리드를 지킬 때 긴장감이 가장 크게 느껴지며, 벗어난 요소가 많아질수록 그 효과는 오히려 옅어진다는 것이 실무 경험칙이다.

주의할 점

그리드브레이킹은 그리드 자체를 없애는 것이 아니라 기준을 유지한 채 의도적으로 예외를 두는 것이다. 모바일 화면처럼 공간이 좁은 환경에서는 그리드를 벗어난 배치가 오히려 콘텐츠 순서를 예측하기 어렵게 만들어 표현적 효과보다 혼란이 커질 위험이 있다.

관련 용어