포스터·브로슈어의 텍스트와 이미지를 규칙적인 칸(모듈)에 맞춰 배치해, 편집이 달라도 일관된 짜임새를 유지하는 격자.
디자인 아틀라스<div class="poster">
<div class="grid"></div>
<div class="blk b1"></div>
<div class="blk b2"></div>
<div class="blk b3"></div>
<div class="blk b4"></div>
</div>.poster{--u:16.6667%;position:relative;width:min(44%,140px);aspect-ratio:3/4;background:var(--surface);border:1px solid var(--line)}
.grid{position:absolute;inset:0;opacity:.45;
background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px var(--u)),
repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px var(--u))}
.blk{position:absolute;opacity:0;transform:scale(.88);animation:pop 4.8s ease infinite}
.b1{left:0;top:0;width:calc(var(--u) * 6);height:calc(var(--u) * 2);background:var(--fg)}
.b2{left:0;top:calc(var(--u) * 2.4);width:calc(var(--u) * 4);height:calc(var(--u) * .8);background:var(--accent);animation-delay:.3s}
.b3{left:0;top:calc(var(--u) * 3.6);width:calc(var(--u) * 3.5);height:calc(var(--u) * 2.2);background:var(--muted);animation-delay:.6s}
.b4{left:calc(var(--u) * 4);top:calc(var(--u) * 3.6);width:calc(var(--u) * 2);height:calc(var(--u) * 2.2);background:var(--accent-2);animation-delay:.9s}
@keyframes pop{0%,6%{opacity:0;transform:scale(.85)}16%,86%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.85)}}인쇄용 그리드 시스템은 포스터나 브로슈어의 지면을 일정한 칸(모듈)으로 나누고, 사진과 텍스트를 그 칸에 맞춰 배치하는 체계입니다. 내용이 매호·매판 바뀌어도 밑바탕의 격자는 그대로라, 다른 디자이너가 다음 판을 만들어도 같은 시리즈처럼 보입니다.
스위스 타이포그래피(국제 타이포그래피 양식)에서 정립된 방법으로, 지면을 가로·세로로 일정하게 나눈 뒤 여백(마진)과 칸 사이 간격(거터)까지 함께 고정합니다. 요소를 배치할 때는 "이 칸의 몇 개를 차지하는가"로 크기를 정하지, 눈대중으로 좌표를 잡지 않습니다.
이 격자는 완성된 인쇄물에서는 보이지 않지만, 여러 페이지·여러 캠페인에 걸쳐 사진 크기와 여백이 은연중에 반복되면서 "같은 브랜드가 만들었다"는 인상을 만듭니다. 디지털 제품의 12분할 그리드도 이 개념을 화면으로 옮겨온 것입니다.
여러 판·여러 페이지에 걸쳐 사진과 텍스트 배치를 일관되게 유지해야 하는 포스터 시리즈, 브로슈어, 잡지 레이아웃에 씁니다.