그리드 시스템

화면마다 요소 자리를 새로 정하면 값이 어긋납니다. 눈으로 맞추는 일이라 같은 제품의 두 화면에서 카드 너비가 396과 412로 나오고, 어느 쪽이 맞는지 판단할 근거가 없습니다.

페이지덱의 설정 화면이 그랬습니다. 좌우 여백이 28인 화면과 30인 화면이 섞여 있었는데, 나란히 놓으면 어긋난 것이 보이는데 따로 보면 아무도 알아차리지 못했습니다. 개발도 물어볼 데가 없어 각자 시안에서 재서 넣었고, 그 과정에서 값이 한 번 더 흩어졌습니다.

그리드 시스템은 요소를 놓기 전에 자와 눈금을 먼저 정하는 것입니다. 틀이 있으면 질문이 바뀝니다. 어디에 얼마 너비로 놓을까가 아니라 몇 칸을 쓸까가 됩니다. 화면 위에 요소를 배치하는 규칙인 레이아웃 아래에서 구조 갈래에 속합니다.

정하는 값은 셋입니다.

1. 칸 수입니다. 웹에서는 열두 칸이 가장 흔합니다. 열두 칸은 2·3·4·6으로 나누어떨어져서 2단 구성도 3단 구성도 같은 틀 위에 올라갑니다. 열 칸으로 두면 3단 구성에서 나누어떨어지지 않아 칸 하나가 남습니다. 세로 칸 하나하나를 컬럼이라 부릅니다.
2. 칸 사이 간격입니다. 거터라 부르고 24 같은 값을 잡습니다. 좁으면 옆 칸 내용과 붙어 보이고 넓으면 한 덩어리여야 할 것들이 흩어져 보입니다.
3. 화면 양옆 여백입니다. 화면 안쪽을 가르는 거터와는 하는 일이 달라서 다른 값으로 두는 경우가 많습니다.

셋이 정해지면 요소의 너비를 픽셀이 아니라 칸 수로 적습니다. 카드를 네 칸이라고 적어 두면 화면이 넓어질 때 네 칸이 함께 넓어지므로 너비를 다시 계산할 일이 없습니다. 네 칸짜리 카드 셋이 한 줄에 들어가고, 여덟 칸 본문과 네 칸 사이드바를 나란히 두는 구성도 같은 틀에서 나옵니다.

좁은 화면에서는 칸 수를 줄입니다. 휴대폰에서 네 칸이나 여섯 칸으로 두는 것이 보통이고, 어느 너비에서 바꿀지는 브레이크포인트로 정합니다. 세로 여백까지 값을 고정하려면 간격 스케일을 함께 씁니다. 그리드가 가로를, 스케일이 위아래를 맡습니다.

"이거 몇 칸으로 잡은 거예요? 열두 칸 기준으로 다시 적어 주세요."

너비를 픽셀로 넘겼으니 칸 수로 바꿔 달라는 요청입니다.

"카드가 다섯 개면 열두 칸에 안 맞아요. 넷이나 여섯으로 가죠."

틀에 맞지 않는 개수를 미리 걸러 내는 말입니다.

"그리드 밖으로 나간 요소가 있는데 의도한 건가요?"

틀을 벗어난 배치가 실수인지 결정인지 묻는 질문입니다.

페이지덱에서는 민서가 시안 위에 그리드를 켜 둔 채로 넘깁니다. 태오가 받는 것은 396이 아니라 네 칸이라는 값이라, 화면이 넓어질 때 무엇이 늘어나는지를 따로 물을 일이 없습니다.