전주의적 처리: 아이콘 그리드가 리스트보다 느린 이유

설정 화면에 아이콘 버튼을 열여섯 개쯤 격자로 깔았다. 계정, 알림, 결제, 보안, 언어, 테마, 접근성… 각 칸에 예쁜 라인 아이콘 하나씩. 정갈해 보인다. 그런데 사용성 테스트에서 사용자가 결제 설정을 찾는 데 5초가 걸린다. 아이콘을 왼쪽 위부터 오른쪽 아래로 한 칸씩 눈으로 훑는 게 화면에 그대로 잡힌다. 옆 팀은 같은 항목을 그냥 텍스트 라벨 리스트로 세로로 세웠는데, 거기선 다들 1초 안에 결제로 손이 간다.

디자이너 입장에서 이건 좀 억울하다. 격자 쪽이 공을 더 들였고, 시각적으로 더 정돈됐고, 공간도 덜 먹는다. 그런데 느리다. 왜 느린가. 답은 미감이나 정보 구조가 아니라 그 아래, 눈이 화면을 처리하는 방식에 있다. 게슈탈트(Gestalt)보다 한 층 더 아래에 있는 전주의적 처리(preattentive processing) 이야기다.

게슈탈트보다 한 층 아래

디자이너에게 익숙한 지각 법칙은 대개 게슈탈트다. 가까이 있으면 한 덩어리로 묶이고(근접), 닮았으면 같은 종류로 읽히고(유사), 끊긴 선도 이어서 본다(연속). 게슈탈트는 눈에 들어온 요소들을 어떻게 묶고 나누느냐, 즉 구조화의 법칙이다. 카드 사이 간격을 조절해 그룹을 만드는 것도, 정렬로 위계를 세우는 것도 다 이 층에서 노는 일이다.

전주의적 처리는 그보다 한 단계 앞이다. 요소들을 묶기도 전에, 눈이 화면 전체를 한 번 쓸면서 자동으로 뽑아내는 원초적인 속성들이 있다. 색, 방향, 크기, 명도, 운동 같은 것들. 이 처리는 의식적인 주의(attention)가 개입하기 전에, 대략 200밀리초 안에 끝난다. 200밀리초는 눈이 한 지점에서 다른 지점으로 시선을 옮기려고 안구 운동을 시작하는 데 걸리는 시간과 엇비슷하다. 그래서 이 상한선이 의미가 있다. 우리가 어디를 볼지 정해 눈을 굴리기도 전에, 시야 전체에 대한 이 처리가 이미 끝나 있다는 뜻이다. (200밀리초는 전주의적 처리를 논할 때 관습적으로 인용되는 상한선이고, 흔히 200~250밀리초로 잡으며 자극과 과제에 따라 실제 값은 달라진다.)

핵심은 순서다. 게슈탈트가 요소를 어떻게 묶을지 다룬다면, 전주의적 처리는 무엇이 즉시 눈에 걸리는지를 다룬다. 격자 아이콘 문제는 게슈탈트 층이 아니라 이 아래층에서 터진 문제다. 그래서 간격을 다듬고 정렬을 맞춰도 안 풀린다. 무엇이 전주의적으로 튀는지를 먼저 알아야 한다.

튀어나옴: 단일 특징은 세는 게 아니라 보인다

파란 점 백 개 사이에 빨간 점 하나를 찍어보자. 빨간 점을 찾는 데 걸리는 시간은 사실상 0이다. 점이 백 개든 오백 개든 상관없다. 세어서 찾는 게 아니라 그냥 거기 있는 게 보인다. 이걸 튀어나옴(pop-out)이라고 부른다.

이게 왜 개수와 무관하냐면, 이런 속성은 눈이 화면 전체를 한꺼번에 훑기 때문이다. 점을 하나씩 검사하는 게 아니라 시야 전체에서 빨강이 있는지 없는지가 단번에 올라온다. 그래서 나머지 점이 몇 개든 찾는 시간이 늘지 않는다. 실무로 옮기면, 회색 텍스트 문단 한가운데 파란 링크 하나는 아무리 문단이 길어도 즉시 눈에 걸린다. 알림 배지의 빨간 동그라미가 아이콘 스무 개 사이에서도 바로 보이는 것도 같은 원리다.

어떤 속성이 이렇게 병렬로 처리될까. 콜린 웨어(Colin Ware)는 전주의적 속성을 크게 네 갈래로 정리한다. 형태(길이, 너비, 방향, 크기, 곡률, 둘러쌈), 색(색상, 명도), 공간적 위치, 그리고 운동(깜빡임, 이동 방향)이다. 목록을 다 외울 필요는 없고, 감만 잡으면 된다. 색 하나 다르게, 크게, 기울여서, 깜빡이게 만든 것은 개수와 무관하게 즉시 튄다. 반대로 이 목록에 없는 것, 예를 들어 형태가 무슨 뜻인지는 튀지 않는다. 별 모양과 하트 모양을 의미로 구별하는 건 전주의적이지 않다. 이 구분이 아이콘 문제의 핵심으로 이어진다.

두 가지를 겹치면 눈이 하나씩 훑기 시작한다

튀어나옴은 특징이 하나일 때만 작동한다. 여기서 결정적인 전환이 일어난다. 두 가지를 동시에 만족하는 걸 찾으라고 하면, 눈은 갑자기 하나씩 훑기 시작한다.

이걸 밝힌 게 앤 트라이스먼(Anne Treisman)과 동료가 1980년에 내놓은 특징 통합 이론(Feature Integration Theory)이다. 이름은 거창하지만 실험은 단순하다. 여러 색과 방향의 선을 늘어놓고 특정한 선을 찾게 한 뒤, 두 경우의 속도를 잰다.

첫째, 한 가지만 다른 걸 찾는 경우다. 파란 선들 사이에서 초록 선 하나. 색 하나만 보면 되니 앞에서 본 튀어나옴이다. 선이 몇 개든 찾는 시간이 거의 그대로다.

둘째, 두 가지를 동시에 만족하는 걸 찾는 경우다. 초록 세로선과 파란 가로선이 섞인 판에서 초록이면서 세로인 선을 찾는다. 색만 봐도 안 되고 방향만 봐도 안 된다. 한 선이 초록인 동시에 세로인지를 확인해야 한다. 그런데 눈은 색과 방향을 저절로 합쳐주지 않는다. 그래서 선을 하나씩 붙잡고 이건 초록인데 가로네, 다음, 하며 검사한다. 당연히 선이 늘수록 시간이 비례해 늘어난다.

두 경우의 차이를 그림으로 그리면 이렇다.

한 가지만 다른 걸 찾기:  항목 4개 → 빠름,  16개 → 거의 그대로  (평평한 선)
두 가지를 겹쳐 찾기:     항목 4개 → 빠름,  16개 → 훨씬 느림    (우상향 직선)

위 숫자는 실제 측정값이 아니라 두 경우의 모양을 보여주려는 그림이다. 요점은 기울기다. 한 가지만 다르면 개수가 늘어도 선이 평평하고, 두 가지를 겹치면 개수에 비례해 올라간다. 항목이 많아질수록 느려지는 정도, 그게 이 이론의 핵심 증거다.

이론이 말하는 바를 한 줄로 줄이면 이렇다. 색이나 방향 같은 낱낱의 특징은 눈이 화면 전체에서 한꺼번에 자동으로 알아챈다. 하지만 그 둘을 한 대상에서 합쳐 이건 초록이면서 세로라고 판단하려면, 그 대상에 눈길을 하나씩 줘야 한다. 튀어나옴과 훑어봄을 가르는 선이 정확히 여기다.

아이콘 그리드가 리스트보다 느린 이유

이제 처음의 설정 화면으로 돌아가자. 격자에서 결제 아이콘을 찾는 일은 어떤 종류의 탐색인가.

아이콘은 형태로 구별된다. 그리고 형태의 의미를 구별하는 일, 즉 이 실루엣이 카드인지 자물쇠인지 지구본인지 알아보는 일은 전주의적 속성이 아니다. 아이콘 열여섯 개가 다 비슷한 크기, 비슷한 선 두께, 비슷한 회색이면 전주의적 층위에서는 전부 똑같다. 튈 만한 단서가 없다. 그래서 눈은 도리 없이 아이콘을 하나씩 붙잡고, 이게 결제인지 확인하고 아니면 다음으로 넘어가며 순차로 검사한다. 결합 탐색과 같은 구조다. 항목이 늘수록 느려진다.

라벨 리스트는 왜 빠른가. 두 가지가 겹친다. 하나, 텍스트는 아이콘보다 의미를 훨씬 빨리 확정해준다. 결제라는 글자는 자물쇠 실루엣보다 덜 헷갈린다. 둘, 그리고 이쪽이 더 중요한데, 정렬된 리스트는 위치를 예측하게 해준다. 알파벳 순이든 논리적 그룹 순이든 순서가 있으면, 눈이 전체를 훑지 않고 대략 어디쯤 있을지 짐작해 그 지점으로 점프한다. 격자에는 이 예측 가능한 순서가 없다. 2차원으로 흩어진 아이콘에는 결제가 대충 아래쪽이라고 기댈 순서가 없어서, 매번 처음부터 훑게 된다.

그래서 실무 판단이 나온다. 자주 쓰고 항목 수가 많은 목록이라면, 아이콘 격자보다 라벨 리스트가 빠를 수 있다. 격자가 유리한 건 항목이 적고 형태가 확연히 다를 때다. 재생, 정지, 앞으로 감기처럼 대여섯 개 이하에 실루엣이 서로 뚜렷하게 다른 미디어 컨트롤은 아이콘이 낫다. 반대로 서로 비슷비슷한 설정 항목이 열댓 개 넘게 늘어선 화면은 라벨이 낫다.

임계 개수를 딱 잘라 몇 개라고 말하고 싶지만, 그건 실루엣이 얼마나 다른지, 사용자가 얼마나 익숙한지, 격자가 몇 열인지에 다 걸려 있어서 고정된 숫자로 못 박기 어렵다. 대략 십수 개를 넘어가고 아이콘끼리 형태가 엇비슷해지면 리스트를 의심해보라는 정도가, 이 글이 제안하는 감각의 눈금이다. 항목이 늘수록 격자가 리스트보다 불리해진다는 방향만은 이론이 뒷받침한다.

/* 아이콘 격자: 형태만 다르고 색·크기가 같으면 전주의 단서가 없다.
   결국 눈이 하나씩 훑는 순차 탐색이 된다. */
.icon-grid .icon { color: #555; width: 24px; }

/* 리스트 항목 하나에 색을 부여하면(단일 특징) 그 항목만 튄다.
   개수와 무관하게 즉시 눈에 걸린다. */
.list .item--active { color: #1a4fff; }

하나만 다르게: 위계를 세우는 처방

여기서 처방이 나온다. 어떤 항목 하나를 화면에서 튀게 하고 싶으면, 전주의적 속성을 딱 하나만 다르게 한다. 색 하나면 색 하나. 회색 텍스트 링크들 사이에서 지금 선택된 항목만 파랗게. 그러면 그 항목은 개수와 무관하게 튀어나온다.

반대로 하면 안 되는 게 있다. 강조하려고 색도 바꾸고, 크기도 키우고, 굵게도 만들고, 배경까지 칠하는 것. 속성을 여러 개 동시에 바꾸면 오히려 위계가 무너진다. 이유는 방금 본 원리에 있다. 여러 속성이 겹치면, 눈은 빨강이면서 큰 것을 한 대상에서 합쳐 읽어야 한다. 그 순간 한꺼번에 튀던 신호가 하나씩 훑는 검사로 내려앉는다. 강조를 세게 하려고 속성을 더 얹었는데, 그 행위 자체가 튀어나옴을 꺼버리는 셈이다.

몇 가지 구체적인 처방으로 옮기면 이렇다.

상태 표시, 예를 들어 알림 배지는 색과 위치의 조합이 잘 듣는다. 빨간 점을 아이콘의 오른쪽 위 모서리에 고정한다. 색상 하나로 존재를 튀게 하고, 일관된 위치로 어디를 볼지 학습시킨다. 위치는 전주의적 속성이면서 동시에 예측 가능성을 주는 이중 이득이 있다.

데이터 테이블에서 이상값 하나를 강조할 때는 명도나 색 한 가지면 충분하다. 숫자 수백 개가 깔린 표에서 임계치를 넘은 셀 하나를 찾게 하려면, 그 셀만 배경 명도를 낮추거나 글자색을 바꾼다. 그러면 스캔 없이 튄다. 반대로 열 개 셀을 제각각 다른 색으로 칠하면, 그 순간부터 사용자는 색을 하나씩 해석하며 훑어야 한다.

폼에서 에러 필드를 짚어줄 때도 마찬가지다. 빨간 테두리 하나면 병렬로 잡힌다. 거기에 아이콘, 굵은 라벨, 배경색, 흔들림 애니메이션까지 다 얹으면 강조는 오히려 둔해지고, 에러가 여러 개일 때는 어느 것도 먼저 튀지 않는다.

다 강조하면 아무것도 안 튄다

튀어나옴에는 잔인한 전제가 하나 있다. 그건 하나일 때만 작동한다는 것이다. 파란 점 백 개 사이의 빨간 점 하나는 튄다. 그런데 빨간 점을 쉰 개 찍으면, 이제 빨강은 배경이 되고 아무것도 튀지 않는다. 튀어나옴은 대비의 산물이지 색 자체의 힘이 아니다.

이게 실무에서 강조가 인플레이션을 겪는 이유다. 중요한 버튼을 파랗게 칠했더니 잘 눌린다. 그래서 다음 버튼도 파랗게, 그다음 배너도 파랗게, 프로모션 태그도 파랗게. 어느새 화면의 절반이 파랗다. 그 순간 처음의 파란 버튼은 더 이상 튀지 않는다. 강조를 늘릴수록 강조가 사라지는 역설이다.

이건 이 블로그가 지키는 규칙, 인터랙션 강조색은 하나로 둔다는 원칙과 정확히 같은 뿌리다. 파랑을 상호작용 전용으로 아껴두는 건 취향 문제가 아니라 전주의 예산을 지키는 일이다. 튀어나옴이라는 자원은 화면에서 극히 희소하게 써야 값이 나온다. 모두를 강조하겠다는 건 아무도 강조하지 않겠다는 말과 같다.

정리하면 이렇다. 화면을 훑는 속도는 미감이 아니라 눈의 처리 방식이 정한다. 단일 특징은 세지 않아도 튀고, 특징을 겹치면 하나씩 훑어야 한다. 아이콘 격자가 리스트보다 느린 건 실루엣 구별이 순차 탐색이기 때문이고, 강조가 안 먹히는 건 대비를 여러 곳에 흩뿌렸기 때문이다. 튀게 하고 싶은 게 있으면, 속성 하나를 골라 한 곳에만 걸어라. 나머지는 조용히 두는 것이 그 하나를 살린다.