모듈러그리드 (Modular Grid)
쉽게 풀면
세로줄과 가로줄이 겹쳐 만든 작은 칸들을 기준으로 이미지와 글을 배치하는 방법이다.
왜 중요한가
모듈러 그리드는 세로 칼럼에 가로 흐름선을 더해 지면을 일정한 크기의 모듈(칸)로 나눈 그리드로, 텍스트와 이미지를 모듈 단위로 배치해 복잡한 콘텐츠도 질서 있게 정리합니다. 잡지, 카탈로그, 대시보드, 카드 기반 UI처럼 종류가 다른 요소를 한 화면에 여러 개 놓아야 할 때 칼럼 그리드만으로는 수직 정렬이 흔들리는 문제를 해결합니다. 모듈 크기는 보통 베이스라인 그리드의 정수 배수로 설정해 텍스트 블록과 이미지 블록이 같은 수직 리듬을 공유하게 하며, 이 정합성이 깨지면 그리드가 있어도 시각적으로 어긋나 보인다. 모듈 크기를 화면 폭에 맞춰 자동으로 재계산하는 CSS Grid의 fr 단위 같은 기법은 인쇄에서는 존재하지 않던 유동적 모듈 개념을 웹 레이아웃에 새롭게 도입한 사례로 볼 수 있다.
논문에서는 이렇게 쓰입니다
복잡한 편집물에서 다양한 크기의 콘텐츠 블록을 정렬하기 위한 모듈러그리드 적용 사례이다.
이는 모듈러그리드가 격자 단위를 조합해 복합적인 레이아웃을 구성할 수 있게 하는 유연한 디자인 도구임을 보여주는 서술이다.
조금 더 깊게 보면
모듈러 그리드는 스위스 스타일에서 Karl Gerstner와 Josef Müller-Brockmann이 체계화했고, 후자의 『그래픽 디자인의 그리드 시스템』(1981)이 교과서가 되었습니다. 모듈 크기는 베이스라인의 배수로 정해야 텍스트가 모듈 경계에 맞물리며, 이 계산이 어긋나면 그리드가 있어도 정렬이 깨집니다. 모든 요소를 모듈에 맞추면 단조로워지므로 의도적 이탈이 리듬을 만들고, 웹에서는 CSS Grid가 이 개념을 직접 구현하지만 화면 폭에 따라 모듈 수가 바뀌므로 인쇄와 달리 고정된 모듈 체계가 아닌 규칙 체계가 됩니다. 모듈은 보통 정사각형에 가까운 비율로 설계되며, 여러 모듈을 이어 붙여 다양한 크기의 이미지·텍스트 블록을 만들되 항상 모듈 경계에 맞춰 배치하는 것이 칼럼 그리드만 쓸 때보다 훨씬 복잡한 콘텐츠 조합을 가능하게 한다.
주의할 점
모듈러그리드는 컬럼그리드보다 복잡하여 설계와 유지에 더 많은 계획이 필요하다.