0. 들어가며
기술은 어떻게 행동을 형성하는가?
최근 우리 주변을 살펴보면, 정말 셀 수 없을 정도로 많은 기술들이 우리를 둘러싸고 있습니다. 그리고 우리는 그 모든 것들이 사용자 경험으로 이어지는 시대에 살고 있습니다. 이제 기술은 단순히 기능을 구현하는 도구가 아니라, 사용자의 행동을 형성하기 시작했습니다. 사용자와 서비스의 접점에 서있는 프론트엔드 개발자로서, 기술적인 부분은 당연하지만 사용자 경험에 관심을 가지는 것도 이제는 필수적이라고 생각합니다.
지금까지 그저 디자인 시스템대로 구현하며 관습적으로 사용해왔던 UI 패턴들, 하지만 기업들이 설계한 UI 패턴들은 모두 명확한 이유가 존재합니다. 그리고 그 '이유'를 아는 것과 모르는 것은 프로덕트의 품질을 결정짓는 차이가 된다고 생각합니다.
이번 글에서는 다룰 내용들은 직접적으로 코드를 다루는 기술적인 부분은 아닙니다. 그러나 최근 읽었던 책에서 얻은 인사이트를 기반으로, 어떻게 하면 사용자 경험을 고려한 프로덕트를 개발할 수 있을지와 관련된 내용들을 다뤄보려 합니다.
1. 심리학과 UX?
제목을 '사용자의 마음을 읽는 UX 개발자 되기' 라고 지었던 이유는, 다양한 심리학 원칙을 소개하고 이를 사용자 경험으로 치환할 수 있는 방법을 다루고자 하기 때문입니다. 사람들의 마음을 연구하는 심리학을 통해 사용자 경험을 새로운 관점에서 조명하고자 합니다.
그럼 지금부터, 우리가 의식하지 못했던 곳에 어떤 심리학 법칙이 사용되고 있었는지 하나씩 살펴보겠습니다.
2. 심리학을 통해 바라보는 UX
2.1. 밀러의 법칙 (Miller’s Law)
보통 사람은 작업 기억에 7개 정도의 항목밖에 저장하지 못한다.
1956년 하버드대학교 심리학과 교수였던 인지 심리학자 조지 밀러가 발표한 논문에서 기원한 법칙입니다. 추후 논문들에서 기억 범위는 일정치 않다는 주장도 있었지만, 작업 기억 용량에는 본질적으로 한계가 있다는 것을 인식한 초창기 연구였습니다. 우리가 한번쯤 들어본 '인지 부하 이론' 이라는 중요한 개념의 토대가 되기도 했습니다.
사실 우리가 중점적으로 봐야 할 부분은 '7' 이라는 숫자가 아니라, 덩어리화(chunking)라는 개념입니다. 인간은 덩어리화를 통해 정보를 암기하고, 이때 밀러는 덩어리의 크기는 중요하지 않다는 것을 알아냈습니다. 즉, 글자 7개를 외우든 단어 7개를 외우든 드는 노력은 비슷하다는 의미입니다.
가장 간단한 예시로, 전화번호를 확인해볼까요?
왼쪽 번호를 보고 암기해보고, 오른쪽 번호를 보고 암기해보면 바로 느낄 수 있습니다. 오른쪽 번호가 형식에 맞게 덩어리화 되어 있기 때문에 우리는 더 쉽게 인지하고 암기할 수 있습니다.
실제로 대부분의 뉴스 웹사이트는 사용자 경험을 위해, 밀러의 법칙을 따라 한번에 많은 양의 정보를 띄우는 것이 아니라 중심이 되는 몇 개의 기사만 덩어리화 해서 보여줍니다.
우리가 흔히 사용하는 쇼핑몰 웹사이트도 제품 정보를 덩어리화 해서, 내비게이션 링크 항목의 수는 많지만 사용자가 빠르게 목록을 훑어볼 수 있도록 하고 있습니다.
마지막은 흔히 사용하는 네이버도 UI를 구현하는데 덩어리화를 적극적으로 채택하고 있습니다.
우리가 지금까지 의식하지는 못했지만 디자인된 모든 것들은 대부분 덩어리화 되어 있습니다. 우리의 눈과 뇌는 가까운 것에 연관성의 의미를 부여하고 그걸 무의식적으로 빠르게 인식하기 때문입니다. 단순히 화면을 보기 좋게 꾸미는 것이 아니라, 사용자가 원하는 정보를 빠르게 찾고, 탐색에 소비하는 인지 부담을 최소화 하기 위해서는 이를 적극적으로 적용할 수 있어야 합니다.
이제 우리는 단순히 화면을 그리는 것을 넘어, 데이터를 유저의 뇌가 처리하기 쉬운 단위로 덩어리화 하는 전처리 역할을 수행해야 합니다. 데이터 포맷팅을 통해 가독성을 높이고, '점진적 정보 노출' 전략에 따라 퍼널 컴포넌트 설계, 아코디언 UI 등을 활용하여 유저의 인지 부하를 줄임과 동시에 초기 렌더링 성능도 최적화 할 수 있습니다.
2.2. 도허티 임계 (Doherty Threshold)
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성은 급격히 높아진다.
사용자 경험과 관련한 필수 요소 중 하나는 '성능'과 관련한 부분입니다. 사용자가 목표를 달성하는데 있어 처리 속도는 더디고, 그에 맞는 피드백도 없는 웹 사이트는 사용자 경험을 해치고 부정적인 인상으로 이어집니다.
과거에 비해 현대 웹페이지의 전체 크기는 과거에 비해 수년간 기하급수적으로 증가했습니다. 2010~2011년에는 PC 평균 633.7 KB, 모바일 평균 260.1 KB 였으나 2022~2023년에는 HTTP Archive 기준 각 2286.3 KB, 2006.6 KB까지 증가했습니다.
이러한 추세로 사용자의 대기 시간이 길어지고 있고, 모든 사용자들은 이를 원하지 않습니다. 시스템의 반응이 즉각적이라고 느끼려면 0.1초 이내에 응답해야 하고, 0.3초의 지연도 맨눈으로 감지할 수 있으며, 1초가 넘어가면 사용자의 집중력은 급격하게 떨어집니다. 이처럼 대기 시간이 길어지면 아예 작업을 포기하는 사용자가 늘어난다는 사실을 입증한 연구도 수없이 많습니다.
우리는 물론 개발자로서 성능을 신경쓰며, 도허티 임계인 0.4초의 처리 시간을 지키고자 노력해야겠지만 정말 더 이상 개선할 방법이 없는 경우에는 어떻게 해야할까요?
- Skeleton UI
콘텐츠를 로딩하는 동안 뼈대 화면을 보여주는 방식입니다. 뼈대 화면이란 콘텐츠가 로딩되는 동안 콘텐츠 영역에 임시로 자리표시자 블록을 표시하는 것을 의미합니다. 사용자는 이를 통해 로딩 속도가 느려도 기다린다는 느낌이 덜하고 속도와 반응성이 더 낫다고 인지합니다.
스켈레톤 UI는 순수 HTML/CSS로 직접 스타일링하여 가볍게 구현할 수도 있고, react-loading-skeleton 같은 라이브러리를 사용해 생산성을 높일 수도 있습니다. 또한, React의 Suspense를 활용하면 데이터 로딩 상태를 선언적으로 관리하여 스켈레톤 UI를 적절한 타이밍에 노출시킬 수 있습니다.
- Blur Up / LQIP(Low-Quality Image Placeholder)
웹의 로딩 시간을 지연시키는 원인은 다양하겠지만, 이미지가 주범일 가능성이 있습니다. 실제로는 큰 이미지를 표시할 공간에 우선 작은 크기로 이미지를 로딩해서 확대합니다. 이때 픽셀 단위로 깨지는 노이즈는 가우시안 블러를 활용하여 가립니다. 그리고 추후 원본 이미지의 로딩이 완료되면, 기존 이미지를 감추고 실제 이미지를 표시합니다.
위처럼 간단한 UI 패턴이 효과적인 이유는 요청한 작업이 처리되고 있다는 사실을 사용자에게 분명히 알리고, 사용자가 기다리는 동안 볼거리를 제공하기 때문입니다.
이 외에도 로딩 시간을 보여주는 애니메이션을 활용한다거나, 낙관적 UI를 적용하는 방법 또한 존재합니다. 동작이 완료된 후에 피드백을 제공하는 것이 아니라, 미리 예측하여 낙관적으로 UI를 먼저 업데이트 하는 방식입니다.
실제로 인스타그램도 댓글을 게시할 때, 실제로 게시가 완료되기 전에 게시될 것으로 가정하고 즉각적인 시각적 피드백을 제공합니다. 백그라운드에서는 여전히 작업이 진행 중이지만, 사용자는 웹 성능이 좋다고 생각합니다.
2.3. 피크엔드 법칙(Peak-End Rule)
인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
1993년 대니얼 카너먼을 비롯한 연구진이 발표한 논문에서 처음으로 증거가 제시된 법칙입니다.
인간은 과거 사건을 떠올릴 때, 경험 전반을 고려하기보다 감정적으로 절정에 이른 순간과 마지막 순간에 집중하는 흥미로운 경향이 있습니다. 마치 스냅사진처럼 특정 순간만을 기억한다고 생각하면 이해하기 쉽습니다. 이는 전반적인 경험을 어떻게 기억할지에 큰 영향을 미치고, 다시 경험할 의향이 있는지 또는 추천할 의향이 있는지 등을 결정합니다.
이를 통해 우리가 생각해봐야 할 점은 사용자가 전체 경험을 긍정적으로 평가하게 하려면 이렇게 중요한 순간에 주의를 기울여야 한다는 것입니다.
실제로 많은 기업들이 피크엔드 법칙을 사용하고 있습니다.
최근 연말이다 보니, Youtube Recap이나 Spotify Wrapped 처럼 지난 한 해동안 해당 서비스에서 활동한 기록(가장 좋아하는 아티스트, 가장 많이 들었던 노래) 등을 정리해서 사용자가 확인할 수 있도록 하고 있습니다.
이 두 기업은 개인화의 힘을 활용하여, 한 해의 마지막에 사용자와 서비스가 특별하며 연결되어 있다는 느낌을 유도합니다. 이를 통해 1년 간 해당 서비스의 전반적인 사용자 경험을 긍정적 인상으로 만들어냅니다.
우리는 서비스의 핵심 가치를 달성하는 순간에, 기술적 디테일을 더해 성취감을 극대화해야 합니다.
좋은 예시로 토스를 들 수 있습니다. 토스는 '송금'이라는 서비스 핵심 기능을 긍정적 감정으로 바꾸기 위해 애니메이션을 활용합니다. JSON 기반 경량 애니메이션 파일 형식인 Lottie 등을 사용하여 고품질의 벡터 애니메이션을 렌더링합니다. 유저는 이 짧은 시각적 피드백을 통해 "안전하고 빠르게 돈을 보내는데 성공했다"라는 긍정적 감정을 느낄 수 있습니다.
뿐만 아니라 인간은 부정적인 사건을 더 쉽게 기억에 남기는 '부정 편향'이 있으므로, 우리는 가능한 한 이러한 부정적인 절정을 완화해 이와 관련한 부정 편향을 피해야 합니다.
그 예시로 404 오류 페이지를 들 수 있습니다. 404 오류 페이지를 사용자가 마주하면, 원하는 페이지를 확인하지 못했으므로 부정적인 감정이 들기 쉽습니다. 이때 일부 기업들은 고객과 라포를 형성하고 브랜드의 개성을 드러내는 기회로 삼기도 합니다. 위 사진을 보면 그 예시를 바로 확인할 수 있습니다.
이처럼 피크엔드 법칙을 고려하면, 유저의 감정이 고조되는 특정 시점에 인터랙션과 성공적인 피드백을 집중적으로 배치하고 부정적 경험은 최대한 완화하여 서비스의 인상을 긍정적으로 바꿀 수 있습니다.
2.4. 테슬러의 법칙 (Tesler’s Law)
모든 시스템에는 더 이상 줄일 수 없는 복잡성이 존재한다.
1980년대 중반 제록스 파크에서 컴퓨터과학자 래리 테슬러가 인터랙션 디자인 언어 개발 업무를 수행하던 시절에 탄생한 개념입니다. 복잡성 보존의 법칙이라고 알려지기도 했습니다.
위에서 언급했듯, 모든 프로세스에는 더 이상 처리할 수 없는 기본적인 복잡성이 존재합니다. 웹 사이트도 마찬가지이므로, 사용자 또는 개발자 중 한 쪽이 반드시 감당해야 합니다. 우리는 개발자로서, 사용자가 감당할 복잡성을 우리가 조금이라도 더 감당하고 사용자에게 가중시켜서는 안됩니다.
실제 기업들은 어떨까요? 우리가 이메일을 작성한다고 생각해보면 이메일 전송 과정에 있어서 더 이상 줄일 수 없는 복잡성은 발신인, 수신인, 이메일 내용 정도입니다.
최신 이메일 클라이언트(Gmail 등)은 이러한 복잡성을 시스템이 감당하도록 하기 위해, 발신인은 로그인한 사용자의 이메일 주소로 자동 입력하고 수신인은 연락처 정보를 기반으로 자동 추천합니다. 최근에는 AI가 이메일 내용 작성 또한 도와주고 있습니다.
이러한 방법도 복잡성이 완전히 사라진 것은 아니지만, 추상화를 통해 사용자가 해야 하는 수고를 줄일 수 있습니다. 우리는 어떻게 하면 사용자의 수고를 추상화할지, 추상화를 잘하는 방법은 무엇일지를 반드시 고민해야 합니다.
애플페이나 삼성페이 같은 서비스도, 기존에 매우 번거롭고 복잡했던 결제 프로세스를 추상화를 통해 사용자가 겪는 복잡성을 혁신적으로 줄였습니다. 이제 우리는 결제 옵션을 선택하고 구매 정보만 확인하면 무엇이든 결제할 수 있습니다.
단순히 개발하는 것을 넘어, 서비스에서 최소한의 복잡성을 명확히 인지하고 시스템이 감당하도록 하는 것은 별 것 아닌 것처럼 보이지만 매우 중요한 포인트라 생각합니다. 래리 테슬러의 말을 인용하며 이번 챕터를 마무리하겠습니다.
"만약 어떤 엔지니어가 소프트웨어를 다소 복잡하게 만드는 바람에 그가 일주일이면 충분히 제거할 복잡성을 처리하느라 100만명의 사용자가 매일 1분의 시간을 허비하고 있다면, 그건 엔지니어의 작업을 덜어낸 대가로 사용자에게 불이익을 주는 것과 다름없다."
2.5. 포스텔의 법칙(Postel’s Law)
자신이 행하는 것은 엄격하게, 남의 것을 받아들일 때는 너그럽게
포스텔의 원칙은 원래 컴퓨터 네트워크 상 데이터 전송과 관련된 네트워크 엔지니어링 가이드라인으로 만들어졌습니다. 미국의 컴퓨터 과학자 존 포스텔은 TCP의 초기 모델을 구현한 사람으로, 위에서 언급한 '견고함의 원칙'을 근거로 도입한 장애 허용 시스템 덕에 초기 인터넷 노드 통신은 안정성을 얻었습니다.
이 원칙은 이제 컴퓨터 네트워크 뿐 아니라, 소프트웨어 아키텍쳐 등 그 외 분야에도 영향을 미치고 있습니다. 우리가 가장 많이 사용하는 HTML/CSS를 예로 들어보면 모두 오류를 느슨하게 다룹니다. 오류나 이해하지 못하는 부분이 있어도 느슨하게 넘어가는 유연성 덕분에, 인터넷 세계를 제패했습니다.
이제 포스텔의 원칙은 UX 분야에도 영향을 주고 있습니다. 사용자는 기계처럼 행동하지 않습니다. 사용자는 일관성이 없고, 가끔 실수하며 때로는 우리의 예상 범위 밖에서 행동합니다. 동시에 사용자는 서비스가 자신을 이해하고 너그럽게 대해주기를 바랍니다.
대표적인 예시로 '오류 수용'이 있습니다. 대부분의 검색 엔진에서 정확한 단어를 검색하지 않아도, 비슷한 단어를 기반으로 자동 수정해줍니다. 우리는 항상 사용자의 오류를 대비해야 합니다. 사용자의 오류는 너그럽게 받아들이고, 우리가 제공하는 서비스는 엄격하게 빈틈이 없어야 합니다.
우리가 포스텔 법칙과 관련하여 알았으면 하는 부분은 '점진적 향상 기법'입니다.
더 좋지 않은 기기를 사용한다고 웹 사이트의 핵심 기능을 사용할 수 없다면 어떨까요? 아마 매우 불쾌한 사용자 경험을 가져올 것이라 생각합니다.
모든 사용자가 브라우저 기능 지원, 기기 기능이나 성능, 인터넷 연결 속도와 관계 없이 기본적인 콘텐츠 또는 기능에 접근할 수 있어야 합니다. 그리고 부가적인 스타일 또는 인터랙션은 성능을 탐지해 점진적으로 추가해야 합니다.
점진적 향상 기법은 다양한 사용자를 관대하게 수용하며 핵심 콘텐츠를 지키면서 향상된 추가 기능들은 보수적으로 접근하기 때문에 그 누구의 접근성도 저해하지 않습니다.
우리는 사용자의 연결 상태가 불안정할 때 고용량 이미지나 화려한 애니메이션 로직을 생략하는 전략을 사용해볼 수도 있고, SSR을 사용해서 완성된 HTML 파일을 먼저 보내주고 그 후에 인터랙션을 입히는 Hydration 기법을 고려해볼 수도 있습니다.
3. 마치며
지금까지 단순히 기술적으로 코드를 작성하는 것을 넘어, 심리학을 통해 사용자를 새롭게 바라보고 사용자 경험을 최적화하는 방법들을 알아봤습니다. 글을 작성하고 공부하며, 최근 AI의 발달로 인해 개발 효율이 높아진만큼, 조금은 인문학적인 내용을 기반으로 사용자에게 더욱 집중하는 것은 또 다른 경쟁력이 될 수 있겠다고 생각했습니다.
우리가 단순히 디자인을 화면에 그대로 복제하는 것에 그치지 않고, 어떻게 하면 사용자가 더 나은 사용자 경험을 가질 수 있을 지 고민할 때 더 나은 프로덕트를 만들 수 있다고 생각합니다.
기술은 계속해서 변화하고 지금은 존재하지 않는 새로운 기술들도 끊임없이 등장하겠지만, '사람이 어떻게 생각하고 행동하는가'와 관련한 심리학 본질은 쉽게 변하지 않으리라 생각합니다.
각 심리학 법칙을 통해 사용자를 이해하고 끊임없이 고민한 시간들이 모여 결국 '사용자의 마음을 읽는 UX'가 완성된다고 믿습니다. 우리 모두가 사용자의 마음을 읽고자 노력하는, 더 나아가 조금이나마 읽을 수 있는 개발자가 될 수 있었으면 좋겠습니다.
