사용자 입장에서 생각하세요 - 내가 만든 화면은 왜 나에게만 쉬웠을까

“한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.”

목차

  1. 왜 이 책을 선택했나 - 판단 근거가 내 감각밖에 없었다
  2. 15장 한눈에 보기 - 이 책이 실제로 다루는 범위
  3. 2장 똑똑하지 않은 사용자 - 당연하다고 여긴 것이 전부 전제였다
  4. 6장 예쁜 게 좋은 사용자 - 예쁘다도 별로다도 데이터가 아니었다
  5. 이런 분께 추천합니다
  6. 정리 - 남은 건 확신이 아니라 질문지였다

왜 이 책을 선택했나 - 판단 근거가 내 감각밖에 없었다

퍼즐 게임 Fluxile, 교대 근무 일정 앱 듀티라운지, 검색메모, 자라는 가계부. 스토어에 올린 앱들과 npm에 올린 조직도 컴포넌트까지, 기획부터 배포까지 전부 혼자 결정해서 만들었다. 지금도 새 웹 서비스를 하나 붙들고 있다.

기능은 만들면 된다. 막히더라도 결국 길이 보인다.

문제는 화면이었다. 이 버튼을 여기 두면 알아볼까, 이 흐름이 자연스러울까. 판단할 근거가 내 감각밖에 없으니 결국 “내가 보기에 쉬우면 쉬운 것”으로 결론이 났다.

그렇게 만든 걸 주변에 보여줬을 때 돌아온 말은 예상과 달랐다. “이게 뭔지 모르겠는데?” 예쁘다고 확신했던 UI도, 며칠을 붙잡았던 로고도 반응이 시원치 않았다. 그때는 그 피드백을 어떻게 처리해야 할지도 몰랐다.

이 책의 들어가며는 그 상황을 정확히 한 문장으로 요약한다.

설계자는 숲을 보고, 사용자는 나무를 본다

설계자는 화면이 어디서 시작해 어디로 이어지는지 이미 알고 있다. 매일 들여다본 플로라서 “이 정도면 충분하겠다”는 판단이 자연스럽게 나온다. 반면 사용자는 눈앞의 화면 한 장만 본다. 앞뒤 맥락도, 이 화면에 얼마나 공을 들였는지도 모른 채로.

내 문제는 감각이 없다는 게 아니라, 설계자와 사용자를 한 사람이 겸하고 있다는 사실을 잊고 있었다는 쪽에 가까웠다.


15장 한눈에 보기 - 이 책이 실제로 다루는 범위

400쪽에 15장. 저자는 삼성전자에서 일하는 UX 디자이너 정그린이고, 브런치 연재물 〈UX 사용자 도감〉이 제13회 브런치북 대상을 받으며 이 책이 됐다.

서평에서 제일 궁금한 건 결국 “이 책에 뭐가 들었나”일 것이다. 15개의 사용자 유형을 상황별로 묶으면 이렇게 정리된다.

구분 다루는 사용자와 주제
읽고 이해하는 순간 1~2장 읽는 사용자(텍스트 리듬·F/Z 패턴) / 똑똑하지 않은 사용자(멘탈 모델·러닝 커브)
결정하고 몰입하는 순간 3~4장 서두르는 사용자(빠른 선택) / 즐거운 사용자(게이미피케이션)
첫인상이 만들어지는 순간 5~7장 들어주는 사용자(UX 라이팅) / 예쁜 게 좋은 사용자(심미성) / 시작하는 사용자(온보딩)
머무르고 이탈하는 순간 8~9장 유혹되는 사용자(무한 스크롤과 자율성) / 불안한 사용자(오류 예방·회복 13원칙)
관계와 시간의 순간 10~11장 소통하는 사용자(커뮤니티·리디자인 롤백) / 기다리는 사용자(로딩과 체감 시간)
감정과 변화의 순간 12~13장 감성적인 사용자(브랜드 감성) / 보수적인 사용자(업데이트 거부감)
경계 밖의 사용자 14~15장 소외되는 사용자(접근성) / 먼 나라의 사용자(글로벌·현지화)

15개 장이 전부 같은 3단 구성을 반복한다는 점이 이 책의 구조적 장점이다.

  1. 사용자 유형 분석 — 그 사용자가 보이는 행동 패턴과 심리
  2. 서비스 사례 탐구 — 실제 UX/UI 사례로 보는 전략과 효과
  3. 설계 가이드 — 프로젝트에 바로 적용할 원칙 (장마다 4~13가지)

사례가 카카오웹툰 개편, 카카오톡 피드형 롤백, 토스의 말투처럼 국내에서 직접 겪어본 서비스라 감이 바로 온다. 400쪽이지만 한 장이 25~30쪽이라, 필요한 장만 뽑아 읽어도 흐름이 끊기지 않는다.

그래서 읽는 순서도 자유롭게 잡을 수 있다. 나는 이렇게 읽었다.

  1. 들어가며를 먼저 읽어 설계자와 사용자의 간극부터 잡는다.
  2. 지금 막힌 지점의 장으로 바로 점프한다. (이해를 못 함 → 2장, 예쁨 논쟁 → 6장, 첫 이탈 → 7장, 오류 대응 → 9장)
  3. 다 읽은 뒤에는 각 장의 ‘설계 가이드’만 다시 훑어 체크리스트로 쓴다.

2장 똑똑하지 않은 사용자 - 당연하다고 여긴 것이 전부 전제였다

제목만 보면 사용자를 낮춰 보는 장 같지만, 정반대다. 사용자의 지능 얘기가 아니라 뇌가 인지적 경제성을 따른다는 얘기다. 뇌에게 생각은 비용이고, 사람은 본능적으로 그 비용을 아낀다.

그래서 사용자는 매뉴얼을 정독하는 대신 일단 눌러보고, 새 인터페이스를 탐구하는 대신 눈에 익은 버튼을 찾는다. 뜻대로 안 되면 미련 없이 나간다.

멘탈 모델 - 사용자는 과거의 경험으로 현재를 해석한다

이 장의 핵심 개념은 멘탈 모델이다. 사용자는 백지상태로 서비스를 만나지 않는다. 지금까지 쌓아온 경험으로 “이건 이렇게 작동하겠지”를 예측하며 화면을 탐색한다.

책이 드는 예가 명쾌하다. 스마트폰을 쓴 지 10년이 넘었는데도 통화 버튼은 여전히 90년대 수화기 모양이고, 플로피 디스크를 본 적 없는 세대도 저장할 때 디스크 아이콘을 누른다. 한 번 굳은 시각적 약속은 쉽게 바뀌지 않는다.

읽으면서 최근에 낸 퍼즐 게임 Fluxile이 떠올랐다. 전 세계 배포를 염두에 둔 게임이라 언어 장벽을 피하려고 설명 문구 없이 아이콘과 동작만으로 튜토리얼을 만들었다. 블록과 화살표만 보여주면 당연히 알아볼 거라고 생각했다.

그런데 돌아온 반응은 “이거 어떻게 하는 거야?”였다. 튜토리얼을 보고 난 뒤에 나온 질문이었다.

내가 믿은 건 아이콘의 보편성이 아니라 결국 내 머릿속 멘탈 모델이었다. 수화기와 디스크 아이콘이 통하는 건 수십 년 동안 굳어진 약속이기 때문이지 아이콘이라서가 아니다. 내가 그린 블록 아이콘에는 그런 축적이 없었다. 책의 표현을 빌리면 익숙한 스테레오타입을 존중하는 연결점을 만들지 못한 것이다.

튜토리얼로도 덮이지 않는다

막히면 설명을 더 붙이는 게 그동안의 기본 대응이었다. 첫 실행 툴팁, 코치마크, 도움말 페이지. Fluxile의 아이콘 튜토리얼도 결국 같은 계열이다. 그런데 2장의 마무리 소제목이 그 방식을 정면으로 반박한다.

잘 설계된 인터페이스는 튜토리얼을 요구하지 않는다

안내를 덧붙여야만 쓸 수 있는 인터페이스라면 그건 혁신이 아니라 설계자 쪽의 문제라는 것이다. 사용자는 서비스를 공부하러 들어온 게 아니니까.

설계 가이드 6가지 중에서도 첫 번째가 인상 깊었다. 러닝 커브의 목표치를 먼저 정하라는 조언이다.

사용자 타입에 따른 러닝 커브

출처: 『사용자 입장에서 생각하세요』(한빛미디어)

같은 기능이라도 초보 사용자와 전문 사용자는 곡선의 모양이 다르다. 우리 서비스가 ‘누구나 쉽게(범용성)’와 ‘전문적이고 빠르게(특수성)’ 중 어디에 서 있는지 정해두면, 이후 기능 하나하나의 난이도를 판단할 기준이 생긴다.

가계부 앱과 npm 컴포넌트가 같은 기준일 수 없다는 걸, 나는 그동안 한 번도 명시적으로 정해본 적이 없었다.


6장 예쁜 게 좋은 사용자 - 예쁘다도 별로다도 데이터가 아니었다

로고 하나에 며칠을 쓴 적이 있다. 색을 바꾸고, 자간을 줄이고, 모서리를 조금씩 다듬으면서.

그렇게 만든 걸 주변에 보여줬더니 반응이 갈렸다. 한 명은 예쁘다고 했고, 한 명은 별로라고 했고, 또 한 명은 로고가 좀 이상한 것 같다고 했다.

문제는 그다음이었다. 어느 쪽 말을 들어도 뭘 고쳐야 하는지가 남지 않았다. 다들 진심으로 봐준 건데, 나는 그 말들을 들고 다시 혼자 화면 앞에 앉았다.

6장은 이 상황이 왜 벌어지는지를 양쪽에서 설명한다.

예쁘면 정말로 잘 작동하는 것처럼 보인다

먼저 심미적 사용성 효과다. 사용자는 아름다운 제품을 더 직관적이고 신뢰할 만하다고 인식하고, 약간의 불편은 너그럽게 넘기거나 심지어 자기 탓으로 돌린다.

책이 드는 예가 발뮤다 토스터다. 폭이 넓어 자리를 많이 차지하고 높이가 낮아 빵 윗부분이 잘 타는데도, 세련된 디자인 하나로 엄청난 판매량을 기록했다. 리뷰도 “예쁘니까 살 가치가 있다”로 모인다. 심미성은 사치가 아니라 전략이 맞다.

조금 불편해도 예쁘니까 구매하는 심미적 사용성 효과

출처: 『사용자 입장에서 생각하세요』(한빛미디어)

반대 극단의 사례로는 2021년 카카오웹툰 초기 UI를 든다. 화려한 스플래시, 움직이는 썸네일, 유려한 전환 효과까지 비주얼 완성도는 독보적이었지만 정작 작품을 찾고 읽는 핵심 경험이 무거워졌다. 어떻게 써야 할지 감이 안 잡힌다는 반응이 나올 정도였다.

아름다움은 사소한 불편은 덮어주지만, 핵심 과업이 막히는 문제까지 덮지는 못한다는 것이다.

그러면 뭘 기준으로 삼아야 하나

다시 로고 이야기로 돌아오면, 예쁘다와 별로다 사이에서 내가 고를 수 있는 건 없었다. 둘 다 감상이지 사용 결과가 아니기 때문이다.

6장 끝의 설계 가이드는 그 감상을 판단 가능한 항목으로 바꿔놓는다.

원칙 내용
1. 흐름을 방해하지 않기 가독성·일관성이 먼저다. 사용자의 목표와 흐름을 정한 뒤에 UI를 배치한다
2. 인터랙션은 가볍게 불필요한 애니메이션은 줄이고, 피드백은 행동을 인지할 만큼만 준다
3. 애니메이션은 의미가 있을 때만 UI가 콘텐츠보다 눈에 띄면 안 된다. 상태 변화와 중요한 정보에만 쓴다
4. 브랜드는 핵심 화면에 스플래시·온보딩·랜딩처럼 인상이 결정되는 순간에 몰아 넣는다
5. 익숙함 위에 차별화 검증된 패턴은 그대로 쓰고, 버튼·아이콘·카드 같은 세부에서 개성을 낸다

제일 뜨끔했던 건 3번이다. UI가 콘텐츠보다 눈에 띄면 안 된다. 퍼즐 게임을 만들면서 블록이 놓일 때마다 효과를 넣고 화면 전환에 애니메이션을 얹었는데, 그게 게임을 돋보이게 하는 건지 가리는 건지 따져본 적이 없다.

5번도 오래 남았다. 며칠씩 로고를 붙잡고 있었던 건 결국 이 선을 몰라서였다. 개성을 어디에 얼마나 넣을지 기준이 없으니 아무 데나 계속 매만지게 된다.


이런 분께 추천합니다

읽으면서 두 부류가 계속 떠올랐다.

첫째, 화면 결정을 스스로 내려야 하는 개인 개발자

사이드 프로젝트나 1인 개발로 앱·웹을 내고 있고, UI 결정의 근거가 취향뿐이라 매번 오래 붙잡게 되는 경우. 이 책은 정답을 주지는 않지만, 취향 대신 꺼내 쓸 판단 기준과 어휘를 준다.

6장 하나만 제대로 읽어도 “예뻐?”라고 묻던 습관은 다시 보게 된다.

둘째, 디자이너·기획자와 논의할 언어가 필요한 개발자

리뷰 자리에서 “이건 좀 아닌 것 같은데요”까지는 말할 수 있지만 그다음을 이어가기 어려웠던 경우. 멘탈 모델, 러닝 커브, 심미적 사용성 효과 같은 개념은 감을 주장으로 바꿔주는 도구다. 사례가 국내 서비스라 회의에서 인용하기도 좋다.

반대로 Figma 실습이나 접근성·다국어의 코드 레벨 구현을 기대한다면 결이 다른 책이다. 이 책은 무엇을 왜 해야 하는지까지를 다룬다.


정리 - 남은 건 확신이 아니라 질문지였다

사용자 입장에서 생각하세요를 한 문장으로 정리하면 이렇다.

“내가 쉽다고 느낀 건 내가 설계자라서다.”

400쪽을 덮고 남은 건 UX 지식이라기보다 혼자서도 돌려볼 수 있는 질문 목록이었다.

  • 이 화면은 사용자에게 새 규칙을 학습시키고 있지 않나?
  • 안내 문구를 지워도 쓸 수 있나?
  • 이 애니메이션은 콘텐츠보다 눈에 띄고 있지 않나?
  • 이 서비스의 러닝 커브 목표치를 정해두긴 했나?

이 책의 6장은 이런 질문으로 끝난다.

여러분의 서비스는 편리함과 아름다움이 함께 설계되어 있나요?

지금 만들고 있는 웹 서비스의 화면부터, “예뻐?”라고 묻는 대신 이 질문들을 하나씩 먼저 통과시켜 볼 생각이다.

피드백은 언제나 환영입니다.