그리드 컬럼과 거터 계산법
웹·앱 디자인에서 그리드 시스템은 화면을 일정한 컬럼으로 나누어 요소를 정렬하는 기준입니다. 컬럼 너비는 (컨테이너 너비 − 좌우 마진 − 거터 총합) ÷ 컬럼 수로 계산합니다. 거터는 컬럼 사이의 간격으로 컬럼 수보다 1개 적게 들어가며, 마진은 컨테이너 좌우 바깥쪽에 각각 하나씩 적용됩니다.
예를 들어 1200px 컨테이너에 12컬럼, 거터 24px, 마진 24px을 적용하면 콘텐츠 영역은 1200 − 48 = 1152px이 되고, 거터 총합은 24 × 11 = 264px이므로 컬럼 너비는 (1152 − 264) ÷ 12 = 74px이 됩니다. 데스크톱은 12컬럼, 태블릿은 8컬럼, 모바일은 4~6컬럼 그리드가 일반적입니다.
계산된 컬럼 너비는 CSS Grid의 grid-template-columns, Flexbox의 % 값, 또는 fr 단위로 바로 적용할 수 있습니다. Figma나 Sketch 같은 디자인 툴에서도 동일한 값으로 레이아웃 그리드를 설정하면 디자인-개발 간 정합성을 유지할 수 있습니다.
자주 묻는 질문
거터와 마진의 차이는 무엇인가요?
거터는 컬럼 사이 간격, 마진은 컨테이너 좌우 바깥쪽 여백입니다.
컬럼 수는 몇 개가 적당한가요?
데스크톱은 12컬럼, 태블릿은 8컬럼, 모바일은 4~6컬럼이 일반적입니다.
컬럼 너비가 소수점으로 나오면 어떻게 하나요?
CSS Grid의 fr 단위나 % 값으로 변환하면 반응형에서도 자연스럽게 처리됩니다.