컬럼

너비를 픽셀로 적으면 화면 크기가 바뀔 때마다 계산을 다시 해야 합니다. 카드 너비를 320으로 적어 두면 좁은 화면에서는 넘치고 넓은 화면에서는 오른쪽이 텅 빕니다.

시안은 대개 한 가지 너비를 기준으로 그려지고, 실제 사용자 화면은 1280과 1920이 섞여 있습니다. 그 사이의 크기에서 카드를 몇 개 놓는지는 시안에 없어서 만드는 쪽이 짐작하게 됩니다. 한 사람은 세 개를 놓고 다른 사람은 네 개를 놓습니다.

컬럼은 이 문제를 단위를 바꿔 푸는 방법입니다. 화면을 정해진 개수의 칸으로 먼저 나누고, 요소의 너비를 그 칸 몇 개인지로 말합니다.

화면 안쪽 폭을 정해진 개수로 나눈 세로 칸 하나가 컬럼입니다. 웹에서는 열두 칸으로 나누는 경우가 가장 흔합니다. 열둘은 2와 3과 4와 6으로 나누어떨어져서 2단 구성도 3단 구성도 같은 틀 위에 올릴 수 있기 때문입니다.

중요한 성질은 칸의 너비가 고정값이 아니라는 점입니다. 화면이 넓어지면 칸 하나하나가 함께 넓어지고 칸 수는 그대로입니다. 그래서 카드를 3칸이라고 적어 두면 어느 화면에서든 한 줄에 네 개가 들어가고, 너비를 다시 계산할 일이 없습니다.

적는 방식은 합이 맞는지로 확인합니다. 본문을 8칸, 사이드바를 4칸으로 두면 합이 12가 되어 한 줄이 꽉 찹니다. 칸 사이를 띄우는 값은 컬럼이 아니라 거터가 맡아서, 카드 3칸이라는 말에 그 간격은 포함되지 않습니다.

화면이 좁아지면 칸 수 자체를 줄입니다. 열두 칸을 여덟으로, 휴대폰에서는 네 칸으로 두고, 어느 너비에서 바꿀지는 브레이크포인트가 정합니다. 네 칸에서는 3칸 카드가 한 줄에 하나만 들어가니 같은 카드가 위아래로 쌓입니다.

칸 수와 간격과 화면 양옆 여백을 한 벌로 정해 둔 것이 그리드 시스템입니다. 컬럼은 그 틀을 이루는 한 칸이라 혼자 쓰이지 않습니다.

"이 카드는 3칸으로 갑시다. 한 줄에 네 개 들어갑니다."

너비를 픽셀이 아니라 칸 수로 정하고 있다는 뜻입니다.

"너비를 픽셀로 주지 말고 몇 칸인지로 주세요."

화면 크기가 바뀔 때 짐작하지 않게 단위를 맞추자는 요청입니다.

"모바일에서는 4칸이라 이 배치가 안 들어갑니다."

좁은 화면에서는 칸 수가 줄어 같은 배치를 유지할 수 없다는 지적입니다.

페이지덱에서 민서는 문서 목록 카드를 3칸으로 잡았습니다. 넓은 화면에서 한 줄에 네 개, 여덟 칸에서 두 개, 네 칸인 휴대폰에서 하나가 됩니다. 세 경우를 따로 그리지 않고 한 값으로 적은 것입니다.

태오는 카드 안의 제목이 두 줄로 늘어나는 경우를 더 확인했습니다. 칸 수는 같아도 카드 높이가 달라져서 한 줄에 놓인 네 개의 아래쪽 선이 어긋나기 때문입니다.