레이아웃

화면을 그리는 일이 요소를 하나씩 보기 좋은 자리에 끌어다 놓는 일이던 시절이 있었습니다. 제목을 위쪽에 두고 본문을 그 아래에 두고 버튼을 눈에 띄는 자리에 두면 한 장은 완성됐습니다. 화면 하나만 놓고 보면 이 방식에 문제가 없습니다. 그런데 화면이 스무 장이 되면 같은 자리라는 말이 흔들리기 시작합니다.

페이지덱의 디자이너 민서가 설정 화면 여섯 장을 그려 넘긴 적이 있습니다. 개발자 태오가 구현하려고 값을 재 보니 제목과 본문 사이 여백이 화면마다 28, 32, 30, 32, 24, 30 이었습니다. 민서가 여섯 번 다르게 그리려던 것은 아닙니다. 매번 화면을 열고 눈으로 보기 좋은 자리에 끌어다 놓았을 뿐입니다. 태오가 어느 값이 맞느냐고 물었을 때 민서는 답하지 못했습니다. 정한 적이 없는 값이었기 때문입니다. 태오는 결국 가장 자주 나온 30을 골라 여섯 화면에 똑같이 넣었고, 그 판단은 어디에도 기록되지 않았습니다. 석 달 뒤 새로 합류한 사람이 같은 화면에 일곱 번째 값을 넣었습니다.

이런 일은 한 사람의 부주의에서 나오지 않습니다. 기준이 없으면 매번 새로 판단해야 하고, 사람의 눈은 그때그때 조금씩 다르게 판단합니다. 화면이 늘어날수록 어긋난 값이 쌓이고, 쌓인 뒤에는 어느 것이 원래 의도였는지 아무도 모릅니다.

종이는 이 문제를 오래전에 풀어 두었습니다. 신문과 잡지는 지면을 세로로 여러 칸 나눠 두고 글과 사진을 그 칸에 맞춰 앉혔습니다. 칸이 미리 정해져 있으니 편집자가 바뀌어도 지면의 인상이 유지됩니다. 다만 그 방식은 종이 크기가 하나로 고정돼 있다는 전제 위에서만 성립했습니다. A4 한 장의 가로 폭은 누가 보든 같습니다.

화면에는 그 전제가 없습니다. 같은 페이지를 누구는 27인치 모니터 가득 펼쳐 보고 누구는 손바닥만 한 화면으로 봅니다. 가로로 돌리기도 하고 창을 반으로 줄여 다른 창과 나란히 놓기도 합니다. 그래서 제목을 왼쪽에서 320 떨어진 곳에 둔다고 못 박아 두면 그 값은 어느 한 화면에서만 맞고 나머지에서는 전부 어긋납니다. 넓은 화면에서는 왼쪽에 빈 띠가 생기고 좁은 화면에서는 제목이 화면 밖으로 밀려납니다.

레이아웃이 위치가 아니라 규칙을 다루는 이유가 여기에 있습니다. 적어 두는 것은 제목이 왼쪽에서 320 떨어진 자리에 있다는 사실이 아니라, 본문 영역은 열두 칸 중 여덟 칸을 쓰고 칸 사이는 24를 띄우며 화면이 좁아지면 여덟 칸을 네 칸으로 접는다는 규칙입니다. 규칙은 화면 크기를 가리지 않고 적용되고, 한 번 정해 두면 민서가 여섯 번 다르게 그릴 일도 태오가 어느 값이 맞는지 물을 일도 없습니다.

레이아웃 아래 용어는 두 갈래로 나뉩니다. 하나는 한 화면 안에서 자리를 어떻게 나누는지를 다루는 구조 갈래이고, 다른 하나는 화면 크기가 바뀔 때 그 구조가 어떻게 달라지는지를 다루는 반응형 갈래입니다. 앞엣것이 정지된 한 장의 문법이라면 뒤엣것은 그 문법이 여러 크기를 건너가는 방법입니다. 구조만 알면 화면 한 장은 반듯하게 그리지만 창을 줄이는 순간 무너지고, 반응형만 알면 무엇을 어떻게 접어야 하는지 정할 근거가 없습니다.

구조 갈래는 화면을 나누는 자와 눈금에 해당합니다. 다섯 자리가 있고, 앞의 셋은 서로 맞물려 하나의 틀을 이룹니다.

1. 그리드 시스템 — 화면을 세로로 몇 칸으로 나눌지, 칸 사이를 얼마나 띄울지, 화면 양옆 여백을 얼마로 둘지를 미리 정해 둔 배치 틀입니다. 웹에서는 열두 칸을 쓰는 경우가 가장 흔한데, 열두 칸은 2·3·4·6으로 나누어떨어져서 2단 구성도 3단 구성도 같은 틀 위에 올릴 수 있기 때문입니다. 틀이 정해지면 어디에 놓을지를 고민하는 일이 몇 칸을 쓸지를 고르는 일로 바뀝니다.
2. 컬럼 — 그리드를 이루는 세로 칸 하나를 말합니다. 요소의 너비는 픽셀이 아니라 컬럼 수로 적습니다. 카드가 네 칸이라고 적어 두면 화면이 넓어질 때 네 칸이 함께 넓어지므로 너비를 다시 계산할 일이 없습니다.
3. 거터 — 컬럼과 컬럼 사이의 간격입니다. 이 값이 좁으면 옆 칸 내용과 붙어 보이고 넓으면 한 덩어리로 묶여야 할 것들이 흩어져 보입니다. 화면 안쪽에서 요소들을 갈라 주는 값이라, 화면 바깥쪽 여백과는 다른 값으로 두는 경우가 많습니다.
4. 간격 스케일 — 여백에 쓸 수 있는 값을 미리 정해 둔 단계표입니다. 4·8·12·16·24·32·48 처럼 정해 두고 그 밖의 값은 쓰지 않습니다. 앞의 설정 화면 사례에서 28과 30이 섞여 나온 것은 이 표가 없었기 때문입니다. 표가 있으면 24냐 32냐만 고르면 되고, 고른 결과는 화면이 몇 장이든 같은 눈금 위에 놓입니다.
5. 어보브 더 폴드 — 스크롤하지 않은 상태에서 처음 보이는 영역입니다. 신문을 반으로 접어 가판대에 놓았을 때 위로 드러나는 면에서 온 말입니다. 배치를 정할 때 무엇을 이 영역 안에 넣을지가 결정 하나로 취급되는데, 아래로 내려간 요소는 상당수 사람에게 없는 것과 같기 때문입니다.

반응형 갈래는 화면 크기가 달라질 때의 규칙입니다. 역시 다섯 자리가 있고, 가운데 셋은 같은 문제에 대한 서로 다른 답입니다.

1. 브레이크포인트 — 화면 너비가 어느 값을 넘거나 밑돌 때 배치를 바꿀지 정한 기준점입니다. 768과 1024 같은 값을 잡아 두고, 768 아래에서는 한 단, 그 위에서는 두 단, 1024 위에서는 세 단으로 둔다고 적습니다. 기준점이 없으면 어느 크기에서 무엇이 바뀌어야 하는지 말로 설명할 방법이 없습니다.
2. 반응형 디자인 — 화면 너비에 따라 요소가 연속적으로 늘어나고 줄어들도록 만드는 설계입니다. 카드 너비를 400으로 적지 않고 전체의 3분의 1로 적어 두면 창을 조금씩 줄일 때 카드도 조금씩 줄어듭니다. 브레이크포인트에서 단 수만 바뀌고 그 사이 구간은 물처럼 흐릅니다.
3. 적응형 디자인 — 정해진 몇 개의 화면 크기마다 별도의 배치를 따로 만들어 두고 그중 하나를 골라 보여 주는 설계입니다. 360·768·1280 세 벌을 만들어 두는 식입니다. 각 크기에서 의도한 그대로 보인다는 장점이 있지만 관리해야 할 벌이 늘고, 세 벌 사이의 어중간한 크기에서는 빈 공간이 생깁니다.
4. 모바일 퍼스트 — 작은 화면을 기준으로 먼저 설계하고 넓은 화면으로 확장해 가는 방식입니다. 순서를 뒤집은 것이 전부처럼 보이지만 결과가 달라집니다. 넓은 화면을 먼저 그리면 좁은 화면으로 줄일 때 무엇을 뺄지 고르게 되고, 그때 빠지는 것은 대개 정작 중요한 것입니다. 좁은 화면부터 그리면 처음부터 꼭 필요한 것만 남기게 됩니다.
5. 세이프 에어리어 — 노치나 둥근 모서리, 화면 아래 홈 바에 가리지 않는 안전 영역입니다. 기기가 화면 전체를 쓰게 되면서 생긴 개념으로, 이 영역을 무시하면 화면 맨 아래 버튼이 홈 바에 겹쳐 눌리지 않는 일이 벌어집니다.

두 갈래는 순서를 이룹니다. 구조 갈래에서 틀과 눈금을 정하고, 반응형 갈래에서 그 틀이 크기에 따라 어떻게 접히는지를 정합니다. 열두 칸과 24라는 거터를 먼저 정해 두면 좁은 화면에서 여덟 칸을 네 칸으로 접는다는 규칙을 그 위에 얹을 수 있지만, 순서를 뒤집어 크기별로 배치부터 그리면 화면마다 다른 눈금이 생기고 나중에 하나로 합칠 방법이 없습니다. 결국 처음의 문제로 돌아갑니다.

"이 카드가 옆 섹션이랑 왼쪽 선이 안 맞아요. 그리드 밖으로 나간 것 같은데 확인 부탁드려요."

값 하나가 틀렸다는 지적이 아니라 이 요소만 정해진 틀을 따르지 않고 있다는 지적입니다.

"태블릿 구간에서 3단을 2단으로 접을까요, 아니면 그 크기만 따로 그릴까요?"

반응형으로 흐르게 둘지 적응형으로 별도 배치를 만들지를 고르자는 제안입니다.

"가입 버튼이 첫 화면 밖으로 밀렸어요. 어보브 더 폴드 안으로 올려 주세요."

스크롤해야 보이는 자리에 있으면 상당수 사용자가 그 버튼을 보지 못한다는 뜻입니다.

페이지덱이 요금제 안내 화면을 손보던 때의 일입니다. 민서가 넓은 화면 기준으로 요금제 카드 세 장을 나란히 그려 왔는데, 프로덕트 매니저 지현이 접속 기록을 확인해 보니 그 화면을 보는 사람의 절반 이상이 휴대폰이었습니다. 좁은 화면에서는 카드 세 장이 세로로 쌓이면서 가장 아래 카드가 첫 화면 밖으로 완전히 밀려나 있었습니다.

셋이 모여 규칙부터 다시 잡았습니다. 어느 너비에서 세 단을 한 단으로 접을지, 접힌 뒤 카드 순서를 어떻게 둘지, 카드 사이 간격을 어느 단계 값으로 쓸지를 정하고 그 내용을 시안 옆에 적어 두었습니다. 태오는 그 규칙만 보고 구현했고 값을 묻는 대화는 한 번도 오가지 않았습니다. 규칙을 적어 두는 데 반나절이 들었지만, 그 뒤로 같은 화면을 세 번 고치는 동안 배치를 다시 논의한 적은 없습니다. 바뀐 것은 카드 안의 글과 가격뿐이었고 카드가 놓이는 자리는 처음 정한 규칙이 계속 정해 주었습니다.

배치를 잘하는 것이 감각의 문제라고 여기는 경우가 가장 많습니다. 잘 만든 화면을 보면 요소들이 자연스럽게 놓여 있어서 그린 사람이 눈이 좋았던 것처럼 보입니다. 실제로는 그 자연스러움이 대부분 정해 둔 규칙에서 나옵니다. 칸이 정해져 있고 쓸 수 있는 여백 값이 일곱 개뿐이면 어긋날 방법 자체가 줄어듭니다. 이 오해를 그대로 두면 팀은 배치를 개인의 실력 문제로 취급하게 되고, 화면마다 다른 값이 나와도 누가 잘 그렸느냐는 이야기만 오갑니다. 기준을 만들면 한 번에 끝날 일이 매번 사람을 바꿔 가며 반복됩니다.

여백을 남는 공간으로 읽는 것도 흔합니다. 화면에 아무것도 없는 자리가 넓으면 낭비처럼 보이고, 그 자리에 무언가를 더 넣고 싶어집니다. 하지만 여백은 남은 것이 아니라 배치가 만들어 내는 결과입니다. 요소 사이를 얼마나 띄우느냐가 무엇과 무엇이 한 덩어리인지를 알려 주기 때문입니다. 제목과 본문 사이를 8 띄우고 본문과 다음 제목 사이를 32 띄우면 읽는 사람은 설명 없이도 어디서 한 묶음이 끝나는지 압니다. 이 차이를 없애고 전부 16으로 맞추면 화면에 담기는 양은 늘지만 어디까지가 한 묶음인지 알 수 없게 됩니다. 정보를 더 넣으려다 있던 정보의 구조를 지우는 셈입니다. 화면에 담기는 항목 수를 늘리는 것과 사람이 읽어 내는 내용을 늘리는 것은 같은 일이 아닙니다.