게슈탈트 원리: 근접을 이기는 두 가지

디자이너: “이 목록이 세 덩어리로 안 읽힌대. 간격을 더 벌려볼게.”

개발자: “지난주에도 벌렸잖아. 32에서 48로.”

디자이너: “이번엔 64로 가자.”

이 다음에 무슨 일이 벌어지는지 다들 안다. 64로도 안 된다. 그러다 카드마다 아주 옅은 배경을 하나 깔면 그 자리에서 해결된다. 5퍼센트짜리 회색 하나가 32픽셀을 이긴다.

나는 이게 취향 문제도, 운도 아니라고 본다. 배경이 간격을 이기는 건 실험실에서 확인된 사실이고, 그 실험은 1992년에 나왔다. 문제는 그 원리가 우리가 외우는 게슈탈트 목록에 안 들어 있다는 것이다. 이 글이 파는 게 그 빠진 원리들이다. 앞 글에서 게슈탈트를 한 층 위라고 부르고 넘어갔는데, 이번엔 그 위층으로 올라간다. 그리고 그 원리들이 어디서 왔는지까지 따라가면, 화면에 그대로 옮겨도 되는지가 마지막 문제로 남는다.

묶으면 요소에 없던 성질이 생긴다

점 세 개를 찍어보자. 점 하나에는 방향이 없고, 안과 밖도 없고, 꼭짓점이라는 개념도 없다. 그런데 세 점을 적당히 배치하면 삼각형이 보인다. 삼각형에는 방향이 있고 안팎이 있다. 이 성질은 점을 더해서 나온 게 아니다. 점에는 처음부터 없던 것이다.

화면에서도 같다. 아이콘 열두 개를 4×3으로 깔면 격자가 생긴다. 격자에는 행과 열이 있고 정렬이 있다. 아이콘 한 개에는 행도 열도 없다. 우리가 레이아웃이라고 부르는 것 대부분이 이렇게 요소에는 없던 성질이다.

여기서 가장 유명한 문장을 하나 고쳐두자. 게슈탈트를 소개하는 글은 거의 예외 없이 전체는 부분의 합보다 크다로 시작하는데, Kurt Koffka가 실제로 쓴 문장은 그게 아니었다. 그가 쓴 건 이렇다. 흔히 전체는 합보다 크다고 하지만, 더 정확히는 전체가 합과 다른 무엇이라고 해야 한다. 이유도 붙였다. 더한다는 절차 자체가 무의미하고, 뜻이 있는 건 전체와 부분의 관계라는 것이다.Koffka, K. (1935), Principles of Gestalt Psychology, p.176. 원문은 이렇다. It has been said: The whole is more than the sum of its parts. It is more correct to say that the whole is something else than the sum of its parts, because summing is a meaningless procedure, whereas the whole-part relationship is meaningful. 그가 고쳐 쓴 대상은 more than이고 대신 내놓은 표현은 something else than이다. 널리 도는 greater than은 여기서 한 번 더 어긋난 판본이다. Koffka가 greater라고 바꿔 말하는 학생을 바로잡곤 했다는 회고도 있다(Heider, 1977).

한 글자 차이 같지만 뜻이 완전히 다르다. 크다는 덧셈의 연장이다. 부분을 다 더한 다음 보너스가 조금 붙는다는 말이다. 다르다는 아예 종류가 바뀐다는 말이다. 삼각형은 점 세 개보다 조금 더한 무엇이 아니라 점에 없던 것이다.

그 성질은 보는 사람이 만든다

게슈탈트 심리학의 출발점은 더 단순한 현상이었다. 1912년에 Max Wertheimer가 다룬 파이 현상이다. 불빛 두 개를 적당한 간격으로 번갈아 켜면 사람은 불빛 하나가 움직인다고 본다. 그런데 움직임은 어느 불빛에도 없다. 첫 번째 불빛에도 없고 두 번째 불빛에도 없고, 둘을 더해도 안 나온다. 그건 보는 쪽이 만들어낸 것이다.Wertheimer, M. (1912), “Experimentelle Studien über das Sehen von Bewegung,” Zeitschrift für Psychologie 61. 게슈탈트 학파의 출발점으로 꼽히는 연구다.

이 얘기를 굳이 하는 이유가 있다. 화면의 모든 애니메이션이 이 현상 위에 서 있다. 멈춰 있는 그림 여러 장을 빠르게 이어 붙였을 때 움직임이 보이는 건 화면이 움직여서가 아니라 우리가 움직임을 만들어서다. 게슈탈트는 화면을 예쁘게 묶는 요령이 아니라, 보는 사람이 무엇을 만들어내는지를 설명하는 이론이다.

게슈탈트 원리를 이름으로 외우면 놓치는 두 가지

Wertheimer가 1923년에 정리한 것이 우리가 아는 그 목록이다. 근접, 유사, 폐쇄, 좋은 연속, 그리고 이 모두를 아우른다는 프레그난츠.Wertheimer, M. (1923), “Untersuchungen zur Lehre von der Gestalt II,” Psychologische Forschung 4. 영어권에는 “Laws of organization in perceptual forms"로 알려져 있고, 이 글은 그 영역본 원문을 확인해 적었다. 그가 이름 붙인 요인은 근접, 유사, 방향, 폐쇄, 좋은 게슈탈트, 객관적 태세(Einstellung), 균일한 운명(공통 운명), 그리고 과거 경험이다. 지금 좋은 연속이라 부르는 것을 그는 방향이라 불렀다. 디자인 교재에 실린 것도 대체로 여기서 왔다. 100년 넘게 살아남았으니 그 자체로 훌륭한데, 이름을 하나씩 외우는 식으로 배우면 두 가지를 놓친다.

첫째, 하나씩 외우면 하나씩 적용하게 된다. 여기는 근접으로 묶고, 저기는 유사로 묶고, 그다음은 폐쇄로 묶는 식이다. 그런데 화면에서 이 셋은 차례로 꺼내 쓰는 도구가 아니다. 같은 요소를 놓고 서로 자기 쪽으로 당기는 힘이라 한 화면에 동시에 걸린다. 하나가 이기면 다른 하나는 진다.

Wertheimer 본인이 그렇게 썼다. 그는 점을 한 줄로 늘어놓아 근접으로 묶은 다음, 그중 몇 개를 위로 올린다. 그러면 함께 올라간 점들이 새로 한 무리가 되면서, 그때까지 이기고 있던 근접을 뒤집을 때가 있다. 원문의 표현으로는 반란이 일어난다. 폐쇄도 마찬가지다. 닫힌 도형으로 묶일 조건을 다 갖췄는데도 좋은 연속이 이기는 그림을 그가 직접 예로 든다.원문 IV절과 VII절. 반란(Sometimes a revolt against the originally dominant Factor of Proximity will occur and the shifted dots themselves thereupon constitute a new grouping whose common fate it has been to be shifted above the original row)과 폐쇄의 한계(It is not true, however, that closure is necessarily the dominant Factor in all cases which satisfy these conditions) 모두 영역본 원문에서 확인했다. 교재로 넘어오면서 이 다툼이 빠졌다.

교재가 지운 건 다툼만이 아니다. 요인 하나는 통째로 빠졌다. Wertheimer의 원문은 과거 경험도 여덟 번째 요인으로 다뤘다. 무엇을 이미 알고 있느냐가 묶는 방식을 바꾼다는 것이다. 그는 이 요인이 실재한다는 것 자체는 인정했다. 다만 이걸로 지각 전체를 설명하려는 시도에는 강하게 반대했고, 과거 경험이라는 말이 진짜 문제를 너무 쉽게 치워버린다고 썼다. 나머지 요인과 성격이 다르다는 점도 짚었다. 다른 요인은 요소가 놓인 배치에서 나오는데, 과거 경험을 끌어들이는 설명은 배치와 상관없이 묶임이 정해진다고 본다는 것이다.원문 VIII절. 실재는 인정하되(There can be no doubt that some of our apprehensions are determined in this way) 그것으로 전부를 설명하려는 입장은 반박한다(the doctrine of past experience brushes aside the real problems of apprehension much too easily). 이 글 마지막에서 과거 경험이 다시 문제가 된다.

둘째, 이게 더 중요한데, 교재가 가르치는 원리는 1923년에서 멈춰 있다. 그 뒤로 원리가 더 나왔는데, 하필 나중에 나온 원리가 우리가 화면에서 매일 쓰는 것이다.

1923년 목록에 없는 원리들

공통 영역: 배경 하나가 간격을 이긴다

1992년에 Stephen Palmer가 새 원리를 하나 제안했다. 같은 영역 안에 들어 있으면 묶인다는 것이다. 이름은 공통 영역(common region).

중요한 건 제안 자체가 아니라 그가 무엇을 보였느냐다. 그는 Wertheimer의 시연을 본떠 그림을 만들었다. 그 그림에서 공통 영역은 근접이나 유사처럼 세다고 알려진 원리를 눌러버린다.Palmer, S. E. (1992), “Common region: A new principle of perceptual grouping,” Cognitive Psychology 24(3), 436-441. 원문 초록 확인. 근접·유사 같은 강력한 그룹 요인의 효과를 눌러버릴 수 있다는 것, 그 작동이 깊이 지각 이후에 일어난다는 것, 근접이나 폐쇄로 환원되지 않는 진짜 새 원리라는 것이 요지다. 덧붙여 Palmer는 이 논문에서 Wertheimer의 근접을 상대적 가까움이라 부르는데, 아래 비율 이야기와 이어진다.

그림으로 보면 한 번에 이해된다.

도입의 5퍼센트 회색이 한 일이 이거다. 그 회색은 장식이 아니라 공통 영역이다. 그리고 공통 영역은 간격보다 세다. 그래서 32픽셀이 졌다.

화면에서 공통 영역을 쓰는 자리는 생각보다 많다. 세 개만 나란히 놓아보자.

카드 배경은 카드 하나 안의 정보를 묶고, 설정 화면의 섹션 배경은 성격이 비슷한 항목 몇 개를 묶고, 표의 얼룩말 줄무늬는 한 줄에 든 칸을 묶는다. 셋 다 같은 원리를 다른 크기로 쓴 것이다. 채팅 말풍선과 드롭다운 메뉴의 그룹 배경도 마찬가지다.

배경을 깔면 층이 하나 생긴다

배경은 묶기만 하지 않는다. 배경을 깔면 그 자리에서 무엇이 도형이고 무엇이 바탕인지가 정해진다. 도형과 바탕을 가르는 건 Edgar Rubin이 1915년에 정리한 더 오래된 주제다. 카드가 하는 일이 바로 이것이다. 카드 자체를 뒤로 밀어 배경으로 세우고, 그 위의 글자와 아이콘을 도형으로 띄운다. 그래서 카드는 정보를 묶으면서 층도 하나 만든다.Rubin, E. (1915)의 도형-바탕 연구. 어느 쪽이 도형이 되느냐는 이미지 단서만이 아니라 보는 사람이 이미 아는 형태에도 영향을 받는데, 이건 Mary Peterson 계열 연구의 주제다. 이 글 마지막의 학습된 관습 이야기와 이어지는 대목이다.

층을 만드는 게 주 역할인 컴포넌트도 따로 있다.

모달과 드롭다운과 토스트는 무언가를 묶으려고 쓰는 게 아니다. 원래 화면을 바탕으로 밀어내고 새 층을 도형으로 세우려고 쓴다. 그래서 이 셋을 만들 때 조절해야 하는 건 간격이 아니라 층이다. 모달 뒤에 까는 어두운 막(딤)이 충분히 어둡지 않으면 모달이 안 뜬 것처럼 보이는 이유가 이거다.

균일 연결성: 이어져 있으면 한 덩어리다

1994년에 Palmer가 Irvin Rock과 함께 하나 더 내놓았다. 밝기나 색이나 질감이 균일하게 이어진 영역은 하나의 단위로 먼저 읽힌다는 것이다. 이름은 균일 연결성(uniform connectedness).

여기서도 결과는 같다. 근접이나 유사가 반대로 당겨도 연결의 효과가 살아남는다. 그런데 Palmer와 Rock은 한 걸음 더 나갔다. 균일 연결성은 다른 원리들과 나란히 놓인 또 하나의 묶기 원리가 아니라, 애초에 묶기가 아니라는 것이다. 시야를 일단 덩어리로 쪼개는 1차 조직화가 균일 연결성이고, 근접이나 유사는 그렇게 쪼개진 덩어리를 다시 묶는 2차 작업이라는 주장이다.Palmer, S. E. & Rock, I. (1994), “Rethinking perceptual organization: The role of uniform connectedness,” Psychonomic Bulletin & Review 1(1). 원문 초록 확인. 근접·유사가 맞서도 효과가 나타난다는 것(even when opposed by powerful grouping principles such as proximity and similarity)과, 균일 연결성은 묶기 원리로 환원되지 않는다는 것(it is not a form of grouping at all)을 함께 주장한다. 같은 저널에서 Peterson, M. A. (1994), “The proper placement of uniform connectedness"가 곧바로 반박했다. 이렇게 순서를 매기는 건 도형-바탕·양안 입체시·물체 인식 쪽 증거와 안 맞고, Koffka도 이미 비슷한 단위 형성 원리의 필요를 알고 있었다는 지적이다. 이후 실증도 갈렸다. 모양이 비슷해서 묶이는 건 균일 연결성보다 느리지만, 가까워서 묶이는 건 균일 연결성만큼 빠르고 효율적일 수 있다는 결과가 있다(Han & Humphreys 계열).

두 주장의 근거 무게는 다르다. 근접·유사가 맞서도 효과가 남는다는 것은 두 논문이 시연으로 보인 것이고, 균일 연결성이 다른 원리보다 먼저 온다는 순서 주장은 지금도 논쟁 중이다. 디자이너 입장에서 실무 결론은 어느 쪽이든 같다. 연결은 세다.

균일 연결성도 화면에 널려 있다.

세 화면의 공통점은 묶는 일을 간격이 아니라 이어짐이 한다는 것이다. 세그먼티드 컨트롤에서 버튼 사이를 벌리는 순간 그건 그냥 버튼 셋이 된다. 단계 표시에서 선을 지우면 동그라미 셋이 된다. 툴바에서 아이콘 몇 개를 한 캡슐에 담는 것도, 표의 구분선도 이어짐으로 묶는다.

목록에 있던 원리도 화면 기준으로 다시 본다

목록에 없던 원리를 봤으니 원래 있던 쪽도 보자. 유사와 근접이다. 교재는 둘을 한 줄로 정리하고 말지만, 화면에서 둘이 하는 일은 그보다 많다.

유사는 떨어져 있는 것끼리 묶는다

화면에서 유사가 쓰이는 자리 셋을 나란히 놓아보자.

그래서 유사는 근접이 못 하는 일을 한다. 떨어져 있는 것끼리 묶는 일이다.

간격은 절대값이 아니라 비율

근접은 목록에서 가장 먼저 나오는 원리인데, 오래도록 정량화가 안 됐다. 가까우면 묶인다는 건 참이지만, 얼마나 가까우면 얼마나 묶이는지는 알려주지 않는다. 이 공백에 실무에서는 매일 걸린다. 우리는 8이냐 16이냐를 정해야 하는데, 원리에 적힌 것은 가깝게가 전부다.

1995년에 Michael Kubovy와 Johan Wagemans가 이 공백을 메웠다. 이들이 보여준 그림은 점을 규칙적으로 깔아놓은 점격자다. 격자를 잘 만들면 가로줄로도 보이고 세로줄로도 보이는데, 사람들이 어느 쪽으로 보는지를 확률로 재면 근접의 세기를 숫자로 잡을 수 있다. 이들은 격자 여섯 종류로 이 측정을 했다.

결과는 두 가지다. 하나, 묶일 확률은 거리에 따라 지수적으로 뚝 떨어진다. 조금 멀어지면 조금 약해지는 게 아니라 확 약해진다. 둘, 그리고 이쪽이 실무에 훨씬 중요한데, 작동하는 건 절대 거리가 아니라 상대 거리다. 가장 짧은 간격에 견줘 얼마나 먼가로 결정된다. 게다가 격자의 각도나 대칭 같은 다른 성질은 영향을 주지 않았다. 정말로 비율만 남는다.지수 감쇠와 여섯 종류의 격자는 Kubovy, M. & Wagemans, J. (1995), “Grouping by Proximity and Multistability in Dot Lattices: A Quantitative Gestalt Theory,” Psychological Science 6(4). 상대 거리만 남는다는 결과와 순수 거리 법칙이라는 이름은 후속 연구에서 나왔다. Kubovy, M., Holcombe, A. O. & Wagemans, J. (1998), “On the Lawfulness of Grouping by Proximity,” Cognitive Psychology 35(1). 뒤 논문이 각도 차이나 대칭 같은 전체 성질은 영향이 없다고 보고했다. 둘 다 초록 기준으로 적었다.

말로만 들으면 안 와닿으니 직접 만져보자. 아래 격자에서 가로 간격과 세로 간격의 비율만 바꿔보면, 어느 순간 격자가 행에서 열로 뒤집힌다.

점격자 말고 실제 화면에서 근접이 하는 일도 보자.

그래서 이런 화면은 여백 값을 손대는 순간 의미가 바뀐다. 라벨과 입력칸 사이가 입력칸과 다음 라벨 사이보다 넓어지면, 라벨은 위가 아니라 아래 입력칸에 붙어 읽힌다.

상대 거리라는 말이 실무에서 무슨 뜻인지 풀어보자. 목록 항목 사이를 16으로 두고 그룹 사이를 32로 두면 비율이 2배다. 이때 전체를 1.5배로 키워 24와 48로 만들어도 묶여 보이는 정도는 그대로다. 비율이 안 변했기 때문이다. 반대로 그룹 사이는 32로 둔 채 항목 사이만 16에서 24로 올리면, 비율이 1.33으로 떨어져서 그룹이 흐려진다. 벌린 건 항목 쪽인데 흐려지는 건 그룹이다.

디자인 시스템의 간격 사다리를 4·8·16처럼 배수로 짜는 관행이 그래서 말이 된다. 사다리 전체를 키우거나 줄여도 칸과 칸 사이의 비율은 그대로라, 화면 크기가 바뀌어도 그룹 구조가 안 무너진다. 다만 이건 내 해석이다. Kubovy의 실험은 점격자에서 나왔고, 카드와 텍스트가 섞인 화면에 그대로 옮겨도 되는지를 검증한 연구를 나는 찾지 못했다.

한 가지가 더 따라온다. 8픽셀만 더 벌려보자는 말은 그 자체로 의미가 없다. 주변 간격이 얼마인지에 따라 8픽셀은 결정적일 수도 있고 아무것도 아닐 수도 있다. 간격 리뷰는 숫자가 아니라 비율로 해야 한다.

그래서 손대는 순서가 바뀐다

그래서 그룹이 안 읽힐 때 간격부터 만지지 마라. 영역과 연결이 더 세게 듣는다. 간격은 그 둘로 안 될 때 쓰는 것이지, 먼저 잡을 수단이 아니다.

실제 화면으로 옮기면 이렇게 생겼다. 목록 여섯 줄을 두 줄씩 세 그룹으로 묶는 일을 세 가지 방식으로 해본 것이다.

셋 다 그룹이 보인다. 차이는 만드는 방식이다. 왼쪽은 항목을 옮겨서 만들었고, 가운데와 오른쪽은 항목을 그대로 둔 채 위에 얹기만 해서 만들었다.

그림은 여기까지다. 나머지는 직접 만져보는 편이 빠르다. 아래에서 세 원리를 하나씩 켜고 꺼보자. 아무것도 안 켰을 때 여섯 줄이 어떻게 읽히는지, 하나만 켰을 때 어떻게 바뀌는지 볼 수 있다. 간격과 배경을 서로 다른 개수로 켜서 둘이 다른 답을 내게 만들면, 눈이 어느 쪽을 따르는지도 보인다.

세 방식의 차이는 화면 폭이 바뀔 때 드러난다. 왼쪽은 간격으로 묶은 것이라, 앞에서 본 대로 주변 간격에 따라 세기가 달라진다. 화면이 좁아져 여백 스케일을 한 단계 줄이면 그룹 사이 간격도 같이 줄어서 그룹이 흐려진다. 가운데와 오른쪽은 배경과 테두리로 묶은 것이라, 화면이 좁아져도 배경은 배경이고 테두리는 테두리다. 다만 이건 두 원리의 성질에서 내가 끌어낸 추론이고, 반응형 화면에서 셋을 직접 비교한 실험을 본 건 아니다.

세게 묶는 만큼 잘못 묶기도 쉽다

세게 듣는 수단은 실수도 크게 만든다. 카드 배경 하나 안에 성격이 다른 정보 둘을 담으면 사용자는 그걸 한 덩어리로 읽는다. 그 안에서 간격을 아무리 벌려도 안 떨어진다. 배경이 이미 묶어버렸기 때문이다. 배경 하나를 잘못 그으면 간격으로는 되돌릴 수 없다는 뜻이다.

프레그난츠라는 빈칸, 그래서 법칙이 아니다

Kubovy가 근접을 숫자로 잡은 게 1995년이다. 원리 하나를 정량화하는 데 70년이 걸렸다는 뜻이기도 하다. 그 70년 동안 게슈탈트가 왜 심리학의 주류에서 밀려나 있었는지를 알면, 나머지 원리들을 다루는 태도가 달라진다.

문제는 프레그난츠였다. 게슈탈트 학파는 개별 원리 위에 프레그난츠 하나를 얹어 전체를 설명하려 했다. 지각은 주어진 조건에서 가능한 가장 좋은 형태로 묶인다는 것이다. 그럴듯하게 들리는데, 좋은 형태가 무엇이냐고 물으면 답이 안 나온다. 단순한 것, 규칙적인 것, 대칭적인 것이라고 하면 다시 그게 뭐냐는 물음이 돌아온다. 결국 사람이 그렇게 보니까 좋은 형태라는 순환에 빠진다.

이 문제를 가장 잘 안 건 게슈탈트 학파 자신이었다. Wolfgang Köhler는 프레그난츠가 순환에 빠진다는 걸 알고 있었고, 더 나은 정의가 나오기를 끝까지 바랐다고 전해진다.프레그난츠가 명확한 정의에 이르지 못했고 Köhler가 그 순환성을 의식하고 있었다는 서술은 게슈탈트 비판사에서 반복해 등장한다. 이 문단은 원문 대신 2차 정리를 기준으로 적었다. 종합 평가는 Wagemans, J. et al. (2012), “A century of Gestalt psychology in visual perception,” Psychological Bulletin 138(6) 2부작을 참고했다.

정리하면 게슈탈트는 무엇이 일어나는지를 정확하게 기술했지만, 왜 일어나는지를 설명하지 못했다. 뇌에서 어떤 처리를 거쳐 그렇게 되는지를 설명할 모형이 없었다. 그래서 원리 목록은 살아남았고 이론은 밀려났다.

디자이너에게 이건 그냥 역사 얘기가 아니다. 우리가 근접의 법칙이라고 부르는 순간 그게 물리 법칙처럼 들린다. 중력처럼 언제나 같은 세기로 작동한다는 뜻이 된다. 아니다. 이건 대체로 이렇게 보이더라는 관찰이고, 세기는 맥락에 따라 달라지며, 방금 본 것처럼 다른 원리에 눌리기도 한다. 법칙이라는 번역어에 속으면 안 된다.

뒤늦게 찾은 근거, 그리고 반전

설명의 빈칸을 메우려는 답은 두 갈래였고, 공교롭게도 둘 다 1953년에 나왔다.

하나는 좋은 형태를 정보량으로 바꿔 재려 했다. 그해 Julian Hochberg와 Edward McAlister가 도형의 좋음을 숫자로 잡는 접근을 내놓았고, 이듬해 Fred Attneave가 정보이론을 끌어와 게슈탈트 법칙이 결국 시각 자극에 있는 중복을 이용한다는 걸 보였다. 좋은 도형은 더 짧게 적힌다는 것이다. 다만 이 답에는 구멍이 하나 있다. 같은 그림도 원 세 개라고 적으면 짧고 점 삼백 개라고 적으면 길다. 무슨 말로 적을지는 결국 사람이 정한다.Hochberg, J. & McAlister, E. (1953), “A quantitative approach to figural goodness,” Journal of Experimental Psychology 46(5). Attneave, F. (1954), “Some informational aspects of visual perception,” Psychological Review 61(3). 단순성 원리 또는 최소 원리라 부르고, 뒤에 Leeuwenberg와 van der Helm의 구조정보이론으로 이어진다.

다른 하나는 정반대를 봤다. 답이 머리가 아니라 세상 쪽에 있다는 것이다. 같은 1953년, Egon Brunswik과 Joe Kamiya의 제안이다. 게슈탈트 원리를 자연 장면의 통계와 연결해서 봐야 한다는 것이었다. 가까이 있는 두 점이 같은 물체에 속할 확률이 실제로 높다면, 가까운 것을 묶는 건 뇌의 버릇이 아니라 합리적인 추론이 된다.

이걸 실제로 재본 게 2002년 James Elder와 Richard Goldberg의 연구다. 사람들에게 자연 사진에서 윤곽선을 따라 그리게 하고, 그 데이터로 근접·좋은 연속·밝기 유사 세 단서가 각각 얼마나 쓸모 있는지를 쟀다. 세 단서는 제대로 정의하면 서로 거의 독립적이었고, 윤곽선을 알아내는 데 보태는 몫은 서로 달랐다.Elder, J. H. & Goldberg, R. M. (2002), “Ecological statistics of Gestalt laws for the perceptual organization of contours,” Journal of Vision 2(4). Brunswik, E. & Kamiya, J. (1953)의 제안을 실측으로 이어받은 연구다. 세 단서의 정확한 서열까지는 원문에 접근하지 못해 확인하지 못했고, 여기서는 독립성과 기여도 차이만 적었다.

이걸로 게슈탈트 원리가 무엇인지가 꽤 달라진다. 이건 지각의 신비한 법칙이 아니라, 세상이 어떻게 생겼는지를 두고 뇌가 하는 통계적 어림짐작이다. 가까우면 대개 한 물체더라, 그러니 가까우면 묶고 보자. 대체로 맞으니 살아남았다. 단순성과 세상의 통계, 두 답은 오래 경쟁 관계로 놓였다가 1996년에 Nick Chater가 둘이 어긋나지 않는다고 논증했다. 가장 짧게 적히는 해석과 가장 그럴듯한 해석은 결국 같은 데로 수렴한다는 것이다(“Reconciling simplicity and likelihood principles in perceptual organization,” Psychological Review 103(3)).

그런데 여기서 반전이 있다. 화면은 자연 장면이 아니다.

이 원리들이 자연 장면의 통계에 맞춰 조율된 것이라면, 자연에 없는 화면에서 그대로 작동한다는 보장이 없다. 자연에는 모서리가 8픽셀로 둥근 5퍼센트 회색 사각형이 없다. 우리가 만들었다. 그리고 사용자는 그 사각형이 무엇을 뜻하는지 수천 시간에 걸쳐 배웠다.

아까 교재가 빠뜨린 요인이 여기서 돌아온다. 과거 경험이다. Wertheimer는 다른 요인과 성격이 다르다며 밀어뒀고 교재는 아예 뺐는데, 하필 그 요인이 가장 크게 작동하는 자리가 화면이다. 자연에서라면 과거 경험은 여러 요인 중 하나겠지만, 화면의 모든 요소는 누군가 만들어 관습으로 굳힌 것이다. 화면에서 카드 배경이 그렇게 강력한 게 순수하게 공통 영역 때문인지, 아니면 배운 관습이 그 위에 얹혀서인지 나는 가려낼 방법을 모른다. 아마 둘 다일 것이다.

그래서 이 글의 가장 불편한 결론이 나온다. 원리들 사이의 서열도 자연 통계에서 왔다면, 화면에서 그 서열이 그대로일 이유가 없다. Palmer가 공통 영역이 근접을 이긴다고 보인 건 점과 박스로 만든 실험실 그림에서였다. 카드와 아이콘과 한국어 텍스트가 섞인 실제 화면에서도 같은 순서로 이길지는 다른 문제다. 나는 실무 경험상 대체로 이긴다고 보지만, 이건 확인된 사실이 아니라 실험실에서 화면으로 옮겨 온 기대일 뿐이다.

그래서 화면에서 뭐가 달라지나

정리하면 실무에서 바뀌는 건 네 가지다.

그룹을 만들 땐 앞에서 본 순서대로 간다. 영역과 연결이 먼저, 간격이 나중이다. 두 번 벌려도 안 되면 세 번째로 벌리지 말고 배경이나 테두리로 넘어간다.

간격은 숫자가 아니라 비율로 본다. 그룹 안 간격과 그룹 사이 간격의 비율이 실제로 작동하는 값이고, 절대값은 그 비율을 만드는 재료일 뿐이다.

원리끼리 싸우는 곳을 찾아본다. 화면이 어수선하다는 피드백은 대개 보기 싫어서가 아니라 두 원리가 다른 답을 내고 있다는 신호다. 표에서 제일 자주 터진다.

오른쪽이 흔히 어수선하다는 말을 듣는 표다. 고치는 방법은 장식을 더 얹는 게 아니라 하나를 지우는 것이다. 사용자가 한 줄을 훑어야 하는 표라면 세로 구분선을 지우고, 열끼리 비교해야 하는 표라면 줄무늬를 지운다. 어느 쪽을 이기게 할지 정하는 게 디자인이다.

그리고 앞에서 말한 대로 이걸 법칙이라고 부르지 않는다. 근접의 법칙이 아니라 근접이라는 경향이다. 100년 동안 관찰됐고 일부는 정량화됐지만, 여전히 맥락에 따라 세기가 달라지고 서로 눌린다. 게다가 화면에서는 그 위에 학습된 관습이 한 겹 더 얹힌다. 원리가 이길지 관습이 이길지는 그 화면에서 재봐야 알 수 있으니, 서열을 외워 적용하지 말고 의심하는 편이 낫다. 규칙으로 외우면 규칙이 안 맞는 화면에서 무슨 일이 벌어지는지 못 본다.이 원리들을 인터페이스 관점에서 정리해둔 책으로는 Ware, C., Information Visualization: Perception for Design과 Johnson, J., Designing with the Mind in Mind이 있다. 반면 웹에 도는 UX 법칙 모음은 내가 확인한 범위에서는 원 논문을 거치지 않은 요약이 많았다. 근거로 삼기보다 이 글이 말한 목록의 함정 사례로 보는 게 낫다.

정리

도입의 그 5퍼센트 회색으로 돌아가자. 그게 32픽셀을 이긴 건 감각이 좋아서가 아니라 더 센 원리를 건드렸기 때문이다. 공통 영역과 균일 연결성은 우리가 외운 목록에 없지만 화면에서 가장 많이 쓰는 두 수단이고, 둘 다 근접과 유사가 맞서도 효과가 남는다는 게 실험실에서 확인됐다.

간격은 결과가 아니라 재료다. 실제로 듣는 건 비율이고, 그보다 세게 듣는 건 영역이다.

게슈탈트 자체는 법칙 모음이 아니다. 100년 동안 무엇이 일어나는지는 정확히 기술했지만, 왜 그런지는 뒤늦게 바깥에서 온 설명이 채웠다. 그 설명은 세상이 어떻게 생겼느냐에 기댔다. 우리가 만드는 화면은 그 세상에 없던 물건이라, 원리를 그대로 이식하는 게 아니라 매번 다시 재봐야 한다. 목록을 외우는 것과 원리를 쓰는 건 다른 일이다.