거터

간격은 아무것도 놓이지 않은 자리라서 결정 대상으로 보이지 않습니다. 그래서 화면이 늘어날 때 가장 먼저 흐트러지는 값이 됩니다.

페이지덱의 대시보드가 그랬습니다. 카드 사이가 16인 줄과 24인 줄이 한 화면에 섞여 있었는데, 이상하게 보인 것은 값이 달라서가 아니었습니다. 24로 벌어진 줄에서는 카드 셋이 상관없는 것처럼 읽히고 16으로 붙은 줄에서는 한 묶음처럼 읽혔습니다. 같은 성격의 내용인데 묶임이 달라 보인 것입니다. 시안을 만든 사람도 왜 어색한지 설명하지 못했습니다. 간격에 이름이 없으면 그 자리를 두고 이야기할 수 없습니다.

거터는 그 빈 자리에 이름과 값을 붙인 것입니다. 화면 위에 요소를 배치하는 규칙인 레이아웃 아래에서 구조 갈래에 속하고, 칸을 나누는 그리드 시스템이 정하는 세 값 중 하나입니다.

가르는 대상은 컬럼과 컬럼 사이, 곧 나란히 놓인 요소 사이입니다. 정할 때 보는 것은 셋입니다.

1. 묶임입니다. 사람은 가까이 놓인 것을 한 덩어리로 봅니다. 카드 사이를 24로 두고 카드 안쪽 요소 사이를 8로 두면 카드 하나하나가 덩어리로 읽힙니다. 이 관계가 뒤집혀 안쪽이 24이고 카드 사이가 8이 되면, 옆 카드의 제목과 내 카드의 본문이 한 묶음처럼 붙어 읽힙니다. 값의 크기보다 안쪽과 바깥쪽의 차이가 먼저 걸립니다.
2. 화면 크기입니다. 넓은 화면에서 24로 둔 값을 휴대폰에서 그대로 쓰면 내용이 들어갈 폭이 남지 않습니다. 열두 칸에 거터가 24면 간격이 열한 군데라 264를 간격에만 씁니다. 좁은 화면에서는 16이나 8로 줄입니다.
3. 바깥 여백과의 구분입니다. 거터는 화면 안쪽을 가르고 양옆 여백은 내용 전체를 감싸는 값이라 하는 일이 다릅니다. 둘을 같은 값으로 두면 맨 왼쪽 카드가 화면 끝에서 떨어진 정도와 카드 사이 간격이 같아져 한 줄이 어디서 시작하고 끝나는지 흐려집니다.

값은 간격 스케일에서 꺼냅니다. 4·8·16·24·32처럼 정해 둔 표에서 하나를 고르고, 20이나 22처럼 표 밖의 값을 쓰면 그 화면만 다른 눈금을 갖게 됩니다.

"카드 사이 거터가 줄마다 달라요. 24로 맞추죠."

같은 성격의 요소가 줄마다 다르게 묶여 보인다는 지적입니다.

"휴대폰에서는 거터를 16으로 줄일게요. 24면 카드 안이 너무 좁아져서요."

화면 크기에 따라 값을 다르게 두겠다는 말입니다.

"안쪽 여백이 거터보다 커서 카드가 덩어리로 안 보여요."

값 자체보다 안과 밖의 관계가 뒤집혔다는 뜻입니다.

페이지덱에서는 민서가 거터를 넓은 화면 24, 좁은 화면 16으로 적어 두고 그 두 값만 씁니다. 세 번째 값이 필요해 보이면 대개 카드 크기를 잘못 잡은 것이라 그쪽을 먼저 봅니다.