게슈탈트 원리

화면 배치를 두고 오가던 말은 오래도록 감상이었습니다. 답답해 보인다, 정리가 안 된 것 같다, 이건 붙어 있어야 할 것 같다. 듣는 쪽은 무엇을 몇 픽셀 옮겨야 하는지 알 수 없었고, 말한 쪽도 왜 그렇게 느꼈는지 설명하지 못했습니다. 같은 화면을 놓고 셋이 각자 다른 손질을 제안하면 결정은 직급이 높은 쪽으로 기울었습니다.

실제 회의는 이런 모양이었습니다. 입력칸 여섯 개가 늘어선 화면을 보고 한 사람이 정신없다고 말합니다. 다른 사람이 간격을 넓히자고 답하고 모든 간격을 똑같이 넓힙니다. 화면은 길어졌는데 여전히 정신없습니다. 무엇과 무엇이 한 묶음인지가 그대로이기 때문인데, 그 말을 할 어휘가 없었습니다.

게슈탈트 원리는 이 자리에 쓸 어휘를 심리학에서 가져온 것입니다. 1910년대 독일의 심리학자들이 지각을 실험하며 정리한 내용인데, 사람이 낱개를 먼저 보고 나중에 합치는 것이 아니라 처음부터 덩어리로 본다는 것이 요지입니다. 점 여섯 개를 두 개씩 붙여 놓으면 사람은 점이 아니라 짝 세 개를 봅니다.

이 정리가 화면 설계로 넘어오면서 대화가 달라졌습니다. 정신없다는 말이 이 라벨이 아래 칸과 묶여 보인다는 말로 바뀌고, 그러면 고칠 곳이 라벨과 칸 사이의 간격 한 군데로 좁혀집니다. 취향의 문제였던 것이 확인할 수 있는 문제가 됐습니다.

사람은 화면을 볼 때 몇 가지 단서를 써서 무엇과 무엇이 한 묶음인지를 먼저 정합니다. 그 단서가 원리의 이름들입니다. 화면 설계에서 자주 쓰이는 것은 여섯 개입니다.

1. 근접 — 가까이 놓인 것을 한 묶음으로 봅니다. 가장 강한 단서라서 실무에서 가장 많이 씁니다. 라벨과 입력칸 사이를 4픽셀, 입력칸 묶음 사이를 24픽셀로 두면 어느 라벨이 어느 칸의 것인지 설명 없이 읽힙니다. 반대로 둘 다 12픽셀로 맞추면 라벨이 위 칸에 붙는지 아래 칸에 붙는지 알 수 없게 됩니다.
2. 유사 — 생김새가 닮은 것을 같은 종류로 봅니다. 파란 글자가 전부 눌리는 것이던 화면에 파란 강조 문구를 넣으면, 사람들은 그것도 눌러 보고 반응이 없으면 고장이라고 여깁니다.
3. 공통 영역 — 테두리나 배경색으로 둘러싸인 것을 한 묶음으로 봅니다. 근접보다 셉니다. 카드 안에 든 항목은 멀리 떨어져 있어도 같은 묶음으로 읽히고, 카드 밖의 항목은 아무리 가까이 있어도 딴 묶음입니다.
4. 연속 — 한 줄로 늘어선 것을 이어진 흐름으로 봅니다. 왼쪽 끝을 맞춰 놓은 항목들이 세로로 읽히는 이유입니다. 하나만 들여쓰면 그 항목은 흐름에서 떨어져 다른 위계로 보입니다.
5. 폐쇄 — 끊긴 선도 닫힌 도형으로 채워서 봅니다. 테두리를 다 그리지 않고 모서리만 표시해도 영역으로 읽히는 것이 이 덕분입니다.
6. 전경과 배경 — 앞에 놓인 것과 뒤에 깔린 것을 나눠 봅니다. 화면을 어둡게 덮고 상자를 띄우면 상자만 살아 있는 것으로, 뒤쪽은 지금 건드릴 수 없는 영역으로 읽힙니다.

단서끼리 부딪히면 센 쪽이 이깁니다. 같은 색으로 칠한 항목을 서로 멀리 떨어뜨리면 색이 아니라 거리가 이깁니다. 색으로 묶었다고 안심하고 간격을 아무렇게나 두면 의도한 묶음이 깨집니다.

가장 자주 쓰이는 자리는 입력 화면입니다. 항목이 여덟 개를 넘어가면 어디까지가 한 묶음인지가 화면의 난이도를 정하고, 이때 손대는 값은 대개 간격 하나입니다. 배송지와 결제 정보가 뒤섞여 보이는 화면은 두 묶음 사이 간격을 32픽셀로 벌려서 풀립니다.

간격을 매번 감으로 정하지 않으려고 값을 미리 정해 두는 곳이 디자인 시스템입니다. 4, 8, 16, 24, 32처럼 몇 단계만 두고 그 안에서만 고르게 하면 화면마다 묶음이 다르게 읽히는 일이 줄어듭니다. 열과 여백을 정해 둔 그리드 시스템도 같은 일을 가로 방향에서 합니다.

이 원리는 무엇을 먼저 보게 할지를 다루는 시각적 위계와 짝으로 움직입니다. 위계가 크기와 대비로 순서를 정한다면, 게슈탈트 원리는 그 순서 안에서 무엇이 한 덩이인지를 정합니다. 둘 중 하나만 맞으면 화면은 여전히 읽히지 않습니다.

디자인 리뷰에서는 근거를 대는 말로 쓰입니다. 같은 자리에서 함께 불리는 이름이 피츠의 법칙, 힉의 법칙, 밀러의 법칙입니다. 목표가 크고 가까울수록 빨리 누른다는 것, 선택지가 많을수록 고르는 데 오래 걸린다는 것, 한 번에 붙잡을 수 있는 항목이 일곱 개 안팎이라는 것입니다.

"여기 간격이 똑같아서 라벨이 어느 칸 건지 안 읽혀요. 게슈탈트 기준으로 위아래를 다르게 줍시다."

간격 하나로 묶음을 다시 만들자는 구체적인 요청입니다.

"색은 묶어 놨는데 거리가 멀어서 안 묶여 보여요."

근접이 유사를 이긴 상황이라 배치를 손봐야 한다는 뜻입니다.

"이건 카드 안에 넣으면 한 덩이로 읽힐 거예요."

테두리로 영역을 만들어 묶겠다는 제안입니다.

페이지덱의 설정 화면을 민서가 다시 짠 적이 있습니다. 항목이 열네 개였고 사이 간격이 모두 16픽셀로 같았습니다. 알림 설정을 찾지 못하겠다는 문의가 반복해서 들어왔는데, 알림 항목은 화면 한가운데에 멀쩡히 있었습니다. 눈에 띄지 않은 것이 아니라 어디에 속한 항목인지 읽히지 않아 지나친 것이었습니다.

민서는 글자와 순서를 그대로 두고 간격만 바꿨습니다. 같은 주제의 항목 사이는 8픽셀, 주제가 바뀌는 자리는 32픽셀로 벌리고 주제마다 작은 제목을 달았습니다. 열네 개가 네 묶음이 됐고 같은 문의가 그다음 달에 줄었습니다.

원리를 알면 화면이 예뻐진다고 읽는 경우가 많습니다. 이름이 미술 쪽에서 온 것처럼 들려서 생기는 인상입니다. 하지만 이 원리가 판정하는 것은 보기 좋은지가 아니라, 사람이 실제로 묶어 읽는 덩어리가 설계자의 의도와 같은지입니다. 아름다움의 문제로 읽으면 리뷰는 다시 취향 싸움으로 돌아갑니다.

여백을 남는 공간으로 여기는 것도 흔합니다. 화면에 항목을 하나라도 더 넣으려고 간격을 전부 좁히는 판단인데, 여백은 비어 있는 것이 아니라 묶음을 알려 주는 정보를 싣고 있습니다. 간격을 균일하게 좁히면 항목은 더 들어가지만 묶음 정보가 사라져서, 사람은 화면을 위에서 아래로 한 줄씩 읽게 됩니다. 한눈에 훑고 원하는 곳으로 뛰던 동작이 사라지는 것입니다.