[독서] UX/UI의 10가지 심리학 법칙

2024년 1월 6일

들어가면서

저는 프론트엔드 개발자를 꿈꾸지만, 놀랍게도 디자인에 대해서는 전혀 조예가 없습니다. 더 엄밀히 이야기하자면, 디자인에 대한 조예가 아니라 예술적 감각이 전혀 없다고 봐도 무방합니다. 저는 아직도 어떤 색들이 서로 보색 관계를 이루고 있는지 모를 뿐더러(사실 이건 미술시간에 졸아서 그런 것 같습니다), 클론 코딩 강의의 랜딩 페이지를 제가 생각하기에 예쁜 색과 디자인으로 변경한 뒤 지인분에게 ‘눈이 썩을 것 같다’는 평가를 들었습니다. 물론 디자이너와 개발자라는 직군이 엄연히 나누어져 있는 만큼 제가 전문적인 디자이너 수준으로 디자인을 하게 되진 않겠지만(그러나 풍문으로 듣기에는 겸업을 하는 경우도 많은 모양입니다), 적어도 디자인을 보고 ‘이런 의도로 디자인했구나’같은 생각은 들 수 있게끔 어느 정도의 지식을 가지고 싶었습니다. 또한 작은 프로젝트를 위해서 UI 디자인을 결정해야 할 때 뛰어나지는 않더라도 최악은 아닌 UI를 골라낼 수 있는 안목을 키우고 싶었습니다. 그래서 예전에 구매하고 책장에서 먼지가 쌓여가는 책을 하나 꺼냈습니다. 입문하기에 이만큼 좋은 책은 없는 것 같았거든요. 절대로 책 두께가 얇아서 선택한 것은 아닙니다. 바로,

이 책입니다. 200쪽도 채 되지 않는 책에, 저를 놀라게 할 만한 내용이 매 쪽마다 담겨 있었습니다. 너무 가슴이 떨려서 글을 쓰는 지금도 청심환을 먹는 중입니다. 아, 이건 에너지 드링크를 너무 마셔서 그렇군요. 아무튼, 이 책이 탄생한 계기는 이렇다고 합니다.

저자인 존 야블론스키(Jon Yablonski)씨는 디자이너로 일하던 중 가장 힘든 시기를 보내던 중이었습니다. 한 브랜드의 클라이언트 프로젝트를 진행하고 있었는데, 다른 프로젝트와 사뭇 다른 점이 있었답니다. 바로 지지할 데이터가 아직 마련되지 않은 상황에서 이해관계자들에게 디자인 결정의 근거를 제시해야 한다는 것이었습니다. 정량적, 정성적 데이터가 있었다면 쉬웠겠지만, 그렇지 않은 상황에서 이러한 근거를 제시하기란 어려운 일이었습니다. 그래서 야블론스키 씨는 심리학을 선택했습니다. 행동심리학부터 인지심리학까지, 자신의 근거를 뒷받침할 자료들을 모으기 위해 많은 공부를 했고 그 끝에 이해관계자들을 설득할 수 있었다고 합니다.

그런데 온라인상에서 디자이너에게 도움을 줄 수 있는 양질의 자료를 찾기 어려웠기 때문에, 야블론스키 씨는 본인이 이러한 자료를 만들기로 했습니다. 그렇게 탄생한 웹사이트가 바로 Laws of UX입니다. 글을 쓰면서 확인해 보니 웹사이트에는 21개의 규칙이 있었는데, 이 책에서는 그 중 10가지의 법칙을 다루고 있습니다. 그럼 하나씩 살펴보고, 책을 읽으면서 느낀 점을 이야기해 보고자 합니다.

10가지 심리학 법칙들

제이콥의 법칙

제이콥의 법칙이란, 사용자는 다른 웹사이트를 통해 축적된 경험을 바탕으로 디자인 관례에 대한 기대치를 형성하는 경향을 보인다는 내용의 법칙입니다. 이렇게 축적된 경험은 곧 사용자의 멘탈 모델이 되고, 사용자가 새롭게 접하는 웹사이트가 기존에 사용했던 웹사이트와 유사하다면 기대치와 멘탈 모델이 조화를 일으켜 서비스를 원할하게 이용할 수 있습니다. 결국 저희는 이런 익숙함을 공략해야 한다는 내용입니다. 굳이 예시를 들지 않아도, 저희가 늘 사용하는 웹사이트를 살펴보면 비슷한 디자인을 가진 것들이 참 많습니다. 동영상 스트리밍 서비스나 OTT 플랫폼 등을 떠올려 보세요. 무언가 공통적인 디자인이 머리속에 그려지지 않나요?

그렇다고 저자가 모든 웹사이트와 애플리케이션의 동작 방식을 반드시 동일하게 만들어야 한다고 주장하는 것은 아닙니다. 다만 무조건 완전히 새로운 것을 만들기 보다는, 사용자가 어떤 서비스를 사용할 때 그 사용법을 매번 공부하지 않고도 원할하게 사용할 수 있어야 하기 때문에, 기존의 멘탈 모델을 반영한 일반적인 관례도 생각해 볼 필요가 있다는 것입니다.

사진: 사용자의 멘탈 모델(좌)와 기대치(우)가 조화를 일으키는 모습이다(아닙니다)

피츠의 법칙

피츠의 법칙은 사용자가 대상을 사용하기까지 걸리는 시간이 대상의 크기 및 대상까지의 거리와 연관이 있다는 내용의 법칙입니다. 이게 무슨 이야기냐구요? 버튼을 예시로 들어볼게요. 만약 저희가 어떤 버튼을 클릭(혹은 터치)해야 한다고 했을 때,

버튼(대상)의 크기
버튼(대상)까지의 거리

가 우리가 버튼을 사용하기까지 걸리는 시간과 연관이 있다는 내용입니다. 이때 만약 버튼이 너무 작거나, 화면의 이전 동작을 수행한 위치에서 다음 동작을 수행하기 위한 버튼이 너무 멀리 떨어져 있다면 시간이 증가할 것입니다. 혹은 버튼이 독립적으로 구분되지 않을 정도로 가까이 붙어 있다던가 하는 경우에도 비슷한 문제가 발생할 수 있겠네요. 따라서 상호작용 가능한 요소의 크기를 적절하게 설정하고, 요소 사이의 간격을 잘 조절해야 한다는 것을 알 수 있었습니다.

만약 x를 누르려다가 팔로우를 눌렀는데 그게 전 애인 계정이라면? 유감입니다.

그런데 이 ‘적절하게’, 그리고 ‘잘’이라는 표현이 조금 애매하지 않나요? 다행히, 이미 정해진 기준을 저희는 쉽게 찾아볼 수 있습니다(석박사들이 머리를 맞대고 만들었어요). 대표적으로 애플의 HIG(Human Interface Guidelines)와 구글의 Material Design이 이를 잘 설명하고 있답니다.

힉의 법칙

힉의 법칙은 의사결정에 걸리는 시간이 선택지의 개수와 복잡성에 비례해서 늘어난다는 법칙입니다. 서비스의 인터페이스가 너무 많아지면 사용자의 목표 달성에 방해가 된다는 것인데요, 사실 저는 이걸 ‘점심 메뉴 선택’의 법칙이라고 부르고 싶네요. 식당에 들어갔을 때 점심 메뉴가 너무 많다면 오히려 결정에 방해가 되는 것과 같은 현상입니다. 이래서 뷔페를 가야 하나 봅니다. 뷔페는 입에 들어가는 만큼 먹을 수 있거든요. 아무튼, 이러한 힉의 법칙과 같이 등장하는 개념이 인지 부하(Cognitive Load)인데, 쉽게 말해 정신적 자원의 양입니다. 인터페이스에 요소가 너무 많거나 취해야 하는 동작이 명확하지 않을수록 많은 인지 부하가 걸리게 됩니다. 결국 이러한 인지 부하는 복잡한 선택지를 단순화 하는 방법을 통해서 줄일 수 있습니다. 하지만 너무 추상화하지 않도록 하세요. 사용자가 의미를 이해하지 못할 수도 있습니다!

극한의 인지 부하가 단시간에 걸리면 어떻게 되는지 궁금하신 분들은 '인디아나 존스: 크리스탈 해골의 왕국'을 시청하세요.

밀러의 법칙

밀러의 법칙은 기억 범위에 더 큰 영향을 미치는 것은 정보의 기본 단위인 비트(bit)의 양이 아니라, 정보 덩어리(chunk)의 개수라는 것입니다. 책에서는 이 법칙의 대표적인 예시로 전화번호를 들고 있습니다. 가령, 01012345678과 같은 번호보다는 010-1234-5678과 같이 구분된 번호가 더 기억에 잘 남는다는 것입니다. 마찬가지로, 웹사이트의 카테고리나 텍스트 등도 이러한 덩어리화를 잘 활용하면 사용자들이 정보를 더 쉽게 처리하고 이해할 수 있습니다.

아무리 그래도 이건 너무 많잖아요

포스텔의 법칙

사용자를 고려하는 것은 마치 두더지 게임을 하는 것과 같습니다. 차이점이 있다면 사용자는 때려도 점수가 올라가지 않습니다. 대신 때린 사람 형량이 올라가겠지요.

포스텔의 법칙은 자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게라는 말 아래, 서비스 제공자는 누구에게나 정상 작동하는 인터페이스를 제공하며, 동시에 사용자의 입력은 다양하게 고려해야 한다는 것을 강조하고 있습니다. 5장의 내용은 한마디로 요약하자면 ‘예측할 수 없는 결과에 대비하라’라고 할 수 있겠네요. 저만 해도 작은 프로젝트를 만들면서 몸소 느꼈지만, 사용자들은 정말 예측할 수 없는 방향으로 서비스를 사용합니다. ‘비밀번호는 영소문자, 숫자 그리고 특수 기호를 사용해야 합니다’라고 적어 놔도, 이모지를 입력하는 사용자는 분명히 있을 겁니다. 그렇기 때문에 사용자를 더욱 너그럽게 고려해야 한다는 것이지요.

또 사용자가 서비스를 다양한 환경에서 사용한다면 어떨까요? 예전에는 사용자가 PC로만 웹 서비스를 사용했다면, 지금은 PC, 스마트폰, 태블릿 등(심지어 콘솔 게임기에서도!) 다양한 환경에서 웹 서비스를 사용합니다. 이러한 배경 속에 반응형 디자인과 같은 새로운 개념들이 탄생하기도 했어요. 그렇기 때문에 포스텔의 법칙을 잘 적용하면, 사용자의 부담이 줄어들어 향상된 UX를 가진 서비스를 완성할 수 있을 겁니다.

피크 엔드 법칙

피크 엔드 법칙은 인간은 과거 사건을 떠올릴 때, 경험 전반을 고려하기보다 감정적으로 절정에 이른 순간과 마지막 순간에 집중하는 경향이 있다는 현상을 다룹니다. 저자는 이때 사람의 판단에 관여하는 사고나 이성에 발생하는 계통 오차인 인지 편향을 이해한다면 도움이 될 것이라고 말합니다. 이 인지 편향의 종류 중 하나인 기억 편향(memory bias)이 바로 피크 엔드 법칙입니다. 결국 사용자가 서비스에 대해서 전반적으로 좋은 경험을 가져가게 하려면, 감정적 절정의 순간을 잘 공략해야 한다는 것이지요. 책에서는 우버를 그 예시로 들고 있는데, 비슷한 서비스인 카카오 T를 생각해 볼까요? 택시를 호출하고 택시가 도착할 때까지 아무런 피드백이 없다면 사용자는 해당 서비스를 사용하는 과정을 굉장히 지루하게 느끼게 될 것입니다. 그래서 택시의 도착 과정을 애니메이션으로 표현했어요. 이를 통해서 사용자는 택시에 탄다는 목표를 향해 조금씩 다가간다는 느낌을 받게 될 것입니다.

근데 택시가 아니라 다른 게 오고 있는데요?

심미적 사용성 효과

심미적 사용성 효과는 디자인이 아름다우면 긍정적인 감정 반응이 일어나고, 인지 능력이 향상되며 사용하기 편하다는 인식과 함께 제품(서비스)에 대한 신뢰도도 높아지는 현상을 다루고 있습니다. 책에서 소개된 연구 결과에 따르면, 사용자가 웹사이트에 가지는 첫 인상을 판단하는 데에는 0.05초 정도가 걸리며, 이렇게 결정된 첫 인상은 사용자 경험 전반에 영향을 미친다고 합니다. 역시 첫인상이 중요하네요. 저는 현 시대에 이 분야의 끝판왕은 개인적으로 애플이라고 생각합니다. 산업 디자인과 UI 디자인 모두 미려한 매력을 가지고 있어 그 팬층도 더 두터운 것 같아요. 저자가 이야기하는 바와 같이 물론 이러한 애플의 디자인에 문제가 전혀 없진 않지만, 미학적으로 아름다운 디자인은 사용자들이 이러한 사용성 문제를 어느 정도 눈감아 주도록 합니다(사실 여전히 불편한 것들이 몇 가지 있긴 합니다). 그렇다고 예쁘다고 다 덮어놓고 가는 것은 또 지양해야 합니다. 저자는 이러한 점에 대해서, 문제 식별이 중요한 사용성 테스트에서마저 심미적 사용성 효과가 발생하면 큰 문제가 될 수 있다고 경고합니다.

심미적 사용성 효과의 맹점을 잘 파악한 친구구나!

폰 레스토프 효과

경고: 제발 버튼 가지고 월리를 찾아라 하지 마세요

폰 레스토프 효과는 인간이 다른 요소와 시각적으로나 개념적으로 분리된 항목을 더 잘 기억한다는 것에 대해서 설명합니다. 밀러의 법칙에서 이야기 한 기억 용량에 대해서 기억하고 계신가요? 이와 마찬가지로 집중력 역시 용량과 시간에 대해 제한을 가지고 있습니다.

이러한 폰 레스토프 효과의 예시는 대부분의 서비스에서 찾아볼 수 있는데, 이는 서비스의 인터페이스가 사용자가 집중할 곳을 안내하거나, 당황하거나 산만해지는 일을 방지하는 등의 역할을 수행하기 때문입니다. 예를 들어 소셜 서비스에서 댓글을 삭제할 때 나타나는 모달(Modal) 등이 대표적인 예시입니다. 물론 가끔가다 엉뚱한 버튼을 강조해서 사용자들의 혼을 쏙 빼놓는 경우도 있지만요.

나아가 저자는 이러한 폰 레스토프 효과의 주의점도 이야기하고 있는데, 너무 많은 것을 강조하거나 장애를 가진 사람들 및 그러한 환경을 고려하지 않고 인터페이스를 디자인하는 것은 지양해야 한다고 말합니다.

테슬러의 법칙

테슬러의 법칙은 모든 시스템에는 더 이상 줄일 수 없는 복잡성이 존재한다고 이야기합니다. 결국 이렇게 남겨진 최소한의 복잡성은 개발(디자인)과정이나 사용자 인터렉션 단계 중 어느 쪽에서든 처리해야 합니다. 9장에서는 이에 대한 예시로 Gmail의 스마트 편지쓰기와 스마트 답장 기능을 소개합니다. 두 기능 모두 사용자의 수고를 덜어주고 시간을 절약하게 해서 서비스의 복잡성을 처리하는데 도움을 주고 있다고 볼 수 있겠네요.

사용자의 수고를 덜어 원시인으로 만들어 주는 자동완성 기능도 존재하는 것 같군요

하지만 반면에, 저자는 이렇게 단순성을 추구할 때 과도하게 추상화하지 않는 것 역시 중요하다고 이야기합니다. 너무 단순화되어 그 의미를 알아볼 수 없는 아이콘과 같이 말이지요. 저는 아직도 메시지 전송 버튼이 종이 비행기로 표현된 것이 적절한지에 대한 의문이 가끔 듭니다.

도허티 임계

도허티 임계는 컴퓨터의 반응 시간이 생산성에 불균형을 미친다는 도허티의 발견을 토대로 세워진 임계값입니다. 기존에는 PC가 작업을 수행하는 반응 시간의 임계값이 2초라고 여겨졌으나, 도허티의 논문에 따라 생산성 반응 시간 감소의 정비례로 증가할 때 이것이 성립하는 시간의 임계값인 0.4초가 되었다고 합니다.

이에 맞춰서 서비스의 처리 시간을 0.4초까지 줄일 수 있다면 좋겠지만, 그 이상이어도 개선의 방법이 없다면 다른 방법을 사용해야 합니다. 예를 들면 미리 컨텐츠의 뼈대를 표시하는 뼈대 화면(skeleton screen)이나, 미리 이미지를 작게 로딩하고 로딩이 완료되면 크게 확대해 원본을 표시하는 블러 업(blur up)효과 등이 있습니다. 이런 효과를 적용할 경우 사용자는 요청한 작업이 진행되고 있다는 사실을 알 수 있고, 사용자가 기다리는 동안 볼거리를 제공받을 수 있다는 장점이 있습니다. 결국 서비스의 성능은 기술적인 문제일 뿐만 아니라 본질적인 디자인 요소이기도 합니다.

Q. 안경을 쓰고 마스크를 착용하면 김이 서립니다. 이것도 블러 업 효과인가요?

A. 헛소리 그만 하고 안경을 닦으세요.

나오면서

이렇게 10가지의 심리학 법칙을 간단하게 알아봤습니다. 사실 책을 읽으면서 두 번 놀랐는데, 첫 번째는 책에서 예시로 든 UI/UX가 제가 이미 평소에 웹 서비스를 사용하면서 봐 왔거나 경험한 것이라는 사실입니다. 오히려 책을 읽기 전에는 예시로 어려운 내용이 나오지 않을까 걱정했었는데, 이러한 예시 덕분에 책에서 소개하는 심리학 법칙들을 보다 쉽게 이해할 수 있었습니다.

두 번째는 제가 평소에 사용하는 웹 서비스에 이렇게 인간의 심리에 대한 깊은 탐구가 녹여져 있다는 점이었습니다. 좋은 서비스와 나쁜 서비스를 사용하면서 느꼈던 편안함과 불편함이 모두 이러한 인간의 사고와 심리에 기반을 두고 있다는 사실이 놀라울 따름입니다.

이후 11장에서, 저자는 지금까지 소개한 심리학 법칙을 바탕으로 보다 책임감있는 서비스를 만드는 것이 왜 중요한지, 그리고 그렇게 하기 위해서는 어떤 자세를 가져야 하는지를 또 한번 심리학 이론과 함께 설명합니다. 사실 지금까지의 내용만큼 11장의 내용도 저에게는 꽤나 인상깊게 다가왔습니다. 저자는 인간의 행동과 사고를 고찰한 심리학 이론이 역으로 인간에게 어떤 영향을 미칠 수 있는지와 함께, 기술이 비록 그 의도가 선하더라도 의도치 않은 부작용을 낳을 수 있다는 점을 설명하며 디지털 윤리를 강조합니다. 단적인 예로 소셜 서비스의 부작용을 언급하기도 합니다.

11장을 읽으면서 넷플릭스 다큐멘터리 소셜 딜레마(the social dilemma, 2020)가 생각나기도 했습니다. 소셜 미디어가 인류에게 미친 영향과, 무분별한 소셜 미디어 사용을 비판하는 전 소셜 서비스 직원들의 인터뷰를 담은 내용입니다. 오랜만에 한번 다시 봐야겠다는 생각이 들었습니다.

"윤리적인 디자인 결정을 내리는 첫 단계는 인간의 마음이 부당하게 이용될 수도 있다는 사실을 인정하는 것에서 시작한다. 우리는 자신이 만드는 기술에 책임을 지고 그러한 기술이 사람들의 시간이나 관심, 그리고 디지털 생활 전반의 균형에 해가 되지 않게 해야 한다.

- UX/UI의 10가지 심리학 법칙, p.150"

책을 마무리하는 12장에서는 이러한 심리학 법칙을 디자인 프로세스에 도입하기 위한 방법을 소개하고 있습니다. 사실 이 부분은 디자이너에게 더 중요한 내용이 될 것 같습니다. 물론 개발자가 알아서는 안될 내용이란 건 아닙니다.

이렇게 UX/UI에 대한 짧은 여정을 마쳤습니다. 여전히 더 나은 UX/UI를 만들기 위해 고민해야 할 부분은 많지만, 그래도 책을 통해 조금이나마 알게 되어 기쁩니다. 이 여정을 통해 배운 지식이 언젠가 잘 쓰일 날이 오기를 바랍니다.