사용자의 눈(eye)을 고려한 프로덕트 디자인

우리는 여러가지 감각을 가졌고, 그 중에서 가장 발달한 것은 시각(vision)이다. 그리고 프로덕트 디자이너는 우리의 최종 산출물이 곧 사용자의 ‘두 눈’을 통해 처음 만나게 될 것이라는 것을 인지해야 한다. 왜냐하면 우리의 고객이 될 사용자가 프로덕트를 물리적으로 접하는 순간, 그들의 시각 체계가 먼저 반응하기 때문이다.

사용자의 시각을 연구해야하는 것은 굉장히 기초적이면서 당연하고 필수적이다. 최근 다행스럽게도 사용자 중심, 고객 경험, 사용자 경험 디자인 등 다양한 이름을 가진 분야와, 저니맵, 페르소나, 설문이나 심층 인터뷰 등 다양한 방법론으로 사용자를 더욱 이해하기 위한 노력이 한창이다. 하지만 프로덕트 제작을 위한 디자인 방법론에서 인간의 시각에 대한 고려가 부족하긴 하다.

다빈치가 주목한 시각과 뇌의 연결 / Image: Leonardo da Vinci, Brain and Human Nervous System, 1506–8, ink on parchment, 19.2 x 13.5 cm Schlossmuseum Weimar

이번 글에서는 우리가 프로덕트를 디자인 하기 위해서, 조금은 더 좋은 UI와 UX를 이끌어내기 위해서, 사용자인 인간의 눈이 대상을 바라보는 순간에 집중하고자 한다. 본 글은 비엔나의 심리학 교수인 Helmut Leder의 모델을 기반으로 작성하였다. 그의 모델은 주로 예술 감상에 초점이 맞추어져 있으나, 본 글에서는 디자인 분야 입장에서 해석하고자 한다. 우리는 이 모델로 디자인을 할 때, 프로덕트 디자인 산출물이 사용자를 위해 정말 잘 디자인 되었는지, 아름다운지, 그들이 어떻게 반응하고 평가할 지에 대한 일련의 과정을 설명할 수 있다. 실제로 Leder의 모델은 예술, 신경 미학 , 제품 디자인 및 웹 디자인 의 인지적 기초에 대한 많은 연구의 틀을 만드는 역할에 기여하고 있다.

Leder의 모델 / Image: Leder, A model of aesthetic appreciation and aesthetic judgments, 2004

인간은 “어떻게” 바라보는가?

우리는 인간이 어떻게 바라보는가에 대한 근본적인 질문부터 출발할 수 있다. Leder의 모델에 따르면, 인간은 다음과 같이 크게 5가지의 과정으로 이미지를 바라보고 감상한다고 말한다. (해당 용어의 번역은 자체 번역이며 통상적으로 사용되지 않을 수 있다.)

1. 지각적 분석 (Perceptual Analyses)
2. 암묵적 기억 통합 (Implicit Memory Integration)
3. 명시적 분류 (Explicit Classification)
4. 인지적 마스터 (Cognitive Mastering)
5. 평가 (Evaluation)

간단하게 각 프로세스는를 설명하자면, 먼저 인간은 이미지를 보고 “지각적 분석(Perceptual Analyses)”을 진행한다. 이 단계는 무언가를 보는 과정에서의 가장 기초가 되는 시각 처리 단계로, 보통 무의식적으로 이루어진다. 그리고 이 때 인간의 눈은 이미지를 복잡성(Complexity), 대조(Contrast), 대칭(Symmetry), 집단(Grouping), 질서(Order) 등으로 처리한다.

두번째 단계인 “암묵적 기억 통합(Implicit Memory Integration)” 단계도 무의식적인 반응으로 인간의 경험에 관련이 있다고 볼 수 있다. 이 이미지가 나에게 나에게 전형적인지 아닌지, 익숙한지 아닌지 판단한다.

세번째는 “명시적 분류 (Explicit Classification)”에서 곧 의식적으로 작동하며, 지각하는 사람이 가진 전문적인 지식에 영향을 받게 된다. 아무래도 목적성을 가지며 언어로도 서술가능한 사고가 가능하다.

네번째 “인지적 마스터 (Cognitive Mastering)”에서는 감상자의 만족스러운 이해와 관련이 있다. 마지막 단계인 “평가 (Evaluation)”와 상호작용하며, 성공적으로 이미지 인지를 이끌기 위해 전 단계와의 순환을 반복한다. 마지막 평가가 성공적이지 못할 경우 이미지 정보를 다시 처리하기 위해 이전 단계로 리디렉션되는 것이다.

결론적으로 이 모든 과정을 겪은 후에 인간은 마침내 이미지에 대한 인상에 대해 최종적인 판단(Judgement)을 내리고 이에 맡는 감정(Emotion)을 불러온다.

그래서 인간의 눈은 무엇을 “먼저” 보는가?

앞서 우리의 눈이라는 시각 체계가 처음부터 대상의 의미를 한번에, 그리고 한눈에 인지하는 것은 아니라는 점을 가볍게 확인했다. 그리고 여기서 흥미로운 점은 인간의 시각 처리 과정에서 이미지의 특징을 지각(Perception)하는 과정은 최초로 일어나는 반응이다. 또한, 무의식적으로 무언가를 보는 이 첫 단계는 이미지의 모양, 형태, 구성 등과 관련이 있다.

인간은 무언가를 볼 때 무의식적으로 이렇게 지각한다.

복잡성(Complexity)은 정보에 대한 유형의 갯수와 관련이 있다. 한편, 복잡성이라는 지표는 인간의 선호도에 많은 영향을 끼친다는 연구 결과가 있다. 예를 들면, 물리학의 복잡계 이론을 토대로 이미지를 분석하는 연구가 발전하고 있기도 하다. 그만큼 복잡하다(Complex)혹은 그 반대로 단순하다(Simple)라는 지표는 디자인 영역에서도 사용자를 이해하기 위해 고려해야 할 지표다. 아이콘의 종류가 복잡하다던지, 색깔이 많다던지, 컴포넌트의 종류가 많다던지 등은 논의가 활발한 것처럼, 무엇이 어떻게 복잡한지, 단순한지, 보기 어려운지, 쉬운지 등의 형용사들을 잘 정리하면 사용자가 최초로 지각할 이미지의 특성에 대해 더 심도있게 평가할 수 있는 방법론을 만들어낼 수 있다.

대조(Contrast)는 간단히 말하면 명암을 표현하는 값이라 설명할 수 있다. 주로 흑과 백을 이야기하며, 강과 약의 정도의 차이를 말하며, 어떤 사이의 경계를 설명하기도 한다. 컴퓨터로 디자인을 한다면 8bit 기준 256개의 수치로도 쉽게 설명할 수 있는 지표다. 처음 미술학원에 가면 명암을 10단계로 나눠서 뎃셍으로 그림 공부를 시작 할 것이다. 그리고 나서 명암 공부가 끝나면, 도형을 그리게 되고, 더 큰 오브젝트를 그려 나가는 것처럼, 대조는 가장 기본적인 시각적 요소다. 색을 모조리 뺀 프로덕트 프로토타입을 생성할 때도, 이 대조라는 특성이 잘 활용된다. 곧 프로덕트의 화면에서 요소들이 잘 구분되는 것, 애매모호한 것, 딱딱한 것, 부드러운 것, 분명한 것, 편안한 것, 선적인 것, 면적인 것 등으로 표현될 수 있으며, 어쩌면 이는 프로덕트의 커다란 이미지를 만들어준다. 이 점이 중요한 것이 나중에 디자인적인 포용성, 근접성 등의 논의로도 연결될 수 있다.

대칭(symmetry)은 쉽게 말해 좌우, 위아래가 유사한 양상을 띄는가와 관련이 있다. 마치 이미지가 얼마나 완성도있는지 같은 것이다. 아마 좌우 대칭이 완벽한 사람이 미남미녀로 보이는 사실도 이 때문이다. 이처럼 대부분의 관련 연구에서는 사람들이 시각적인 대칭을 비대칭보다 더 선호한다는 결론을 보여주고 있다. 한편, 예술 작품이나, 창의적인 디자인 연구 분야에서는 비대칭적인 요소가 더욱 사람의 눈길을 끌거나 선호도에 영향을 미친다는 연구도 종종 나타나고 있다.

집단(Grouping)은 마(David Marr)의 이론으로도 설명된다. 이미지라는 하나의 영상이 획득하기까지 여러가지 과정을 거치지만, 주로 우리의 눈은 여러가지 연속되는 부분을 2차원적으로 스케치하면서 하나의 덩어리로 합쳐 3D 이미지로 받아들이는 것이다. 곧 그의 이론은 인간의 시각 체계의 원리에 기반한 컴퓨터 비전으로 발전하였고, 곧 인간을 모방한 객체 감지 인공지능이 탄생하기 까지 한다. 디자인적인 관점에서도 디자이너는 사용자가 특정 화면상의 요소를 받아들일 때를 대비하여 어떤 부분을 묶거나 혹은 개별로 풀 것인지, 어떤 정보를 함께 그룹화하여 가져갈 수 있을지 염두해야 할 것이다. 어찌 보면 이는 사용자가 정보를 받아들일 때 이해를 조금 더 빠르게 할 수 있는가에 대해 해결할 수도 있겠다.

마지막 질서(Order)는 필자의 경우 굉장히 중요하다고 생각하는 편이다. 위의 항목을 모든 것을 아우르는 결론과 같은 것이다. 디자인 심리학에도 첫 파트에서도 대부분 게슈탈트(Gestalt) 원리를 설명하는데 이는 질서와도 연관이 있다. 게슈탈트 심리학자들은 다소 좋은 게슈탈트를 이끌어내는 많은 원리들을 꾸준히 설명해왔다. 주로 그 법칙으로는 대표적으로 5가지를 말한다. 1. 그룹이 지어져서 통합되어 보이는가 (Law of Closure), 2. 유사한 요소들이 뭉쳐 하나로 보이는가 (Law of Similarity), 가까운 요소들이 뭉쳐 하나로 합쳐져서 보이는가 (Law of Proximity), 단순한 쪽으로 인식하는가 (Law of Simplicity), 그리고 그 요소들이 연속적으로 보이는가 (Law of Continuity)로 설명된다.

Image: Recreated from the paper by “A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure-Ground Organization. Psychological bulletin.” by Wagemans, Johan & Elder, James & Kubovy, Michael & Palmer, Stephen & Peterson, Mary & Singh, Manish & Heydt, Rüdiger in 2021. / “Illustration of several grouping principles. Adapted from “Perceptual Organization in Vision,” by S. E. Palmer, in Stevens’ Handbook of Experimental Psychology: Vol. 1. Sensation and Perception (p. 183), ed. by H. Pashler, 2002, New York: NY, Wiley. Copyright 2002 by John Wiley and Sons. Adapted with permission.”

심리학자 루돌프 아른하임(Rudolf Arnheim)은 좋은 게슈탈트가 미적으로 선호된다고 주장했다. 미술사가 곰브릭(Ernst Gombrich)도 A Sense of Order (1979) 를 통해 질서 자체를 조사했다. 어쩌면 질서를 알아보는 것, 이것은 인간의 습성과도 관련이 있다. 항상 규칙을 만들고 규칙에서 벗어나더라도 적응하려는 항상성 같은 것이다. 우리 인간은 계속해서 편안함을 추구하는 경향이 있는 것처럼. 예를 들면, 디자인의 트렌드도 계속해서 발산하며 바뀌지만 결국, 큰 변화는 아직 학습되지 않은 사용자에게는 불편할 수 있다.

복잡성과 질서가 대조되는 용어로 보일 수 있지만 그 의미는 조금 다르다. 무질서하다고 해서 복잡한 것은 아니며, 질서가 있다고 해서 단순한 것은 아니다. 질서는 엔트로피와 더 관련이 있다. 정보의 양과 종류가 많아짐과 동시에 여기서 규칙이 없을 때 비로소 무질서함이 나타난다. 가끔은 창의적인 프로덕트 디자인을 공부하는 면에서는 이러한 시도도 필요하기도 하다. 프로덕트의 컨셉과 사용자의 페르소나에 따라 어떤 방식을 취할 것인지 이야기해 볼 수 있겠다. 전략적으로도 어떤 곳에 더 머물게 할 것인지 아닌지도 조사해볼 수 있다.

사용자의 눈을 이해할 때와 그렇지 않을 때

디자이너의 눈은 세심하며 예민하다. 1~2픽셀이 어긋나도 불편함을 느끼기도 하니까. 반대로 우리의 프로덕트 사용자는 그만큼 시각적으로 예민한 눈을 가지지 못할 수 있다. 하지만 모든 인간의 눈은 동일한 반응을 한다. 시각체계가 가장 초기에 반응하는 지표를 살펴본 만큼 디자이너들이 UI, GUI 디자인을 하기 전 가끔은 생각해볼 계기가 되었음 좋겠다. 앞으로 프로덕트 사용성 테스트나 사용자 분석을 할 경우에도 (주로 프로덕트에 대한 결과, 평가나 반응 위주로 이루어지는 것 같다.) 이 부분의 내용도 충분히 고려해볼 수 있겠다.