UX 디자이너 서비스 분석 방법 : 실제 분석 > 개선 > 정리 단계

글ㅣ정그린 삼성전자 UX 디자이너

UX 디자이너 서비스 분석 방법 : 실제 분석 > 개선 > 정리 단계

일자

상시

유형

아티클

태그

이 아티클은 <시니어가 주니어에게> 시리즈의 3화입니다.

이전 1화에서는 UX 디자이너의 서비스 분석 과정 중 서비스 선정과 이용 단계를 살펴봤습니다. 2화에서는 서비스를 집요하게 뜯어보고 개선해보며 관련 인사이트를 내 것으로 소화할 수 있는 방법을 소개합니다.

✔️ 1화 먼저 읽기

✔️ 해당 가이드에 소개된 예시는 제가 직접 브런치에서 연재했던 <[UX/UI] 택시, 어떤 앱으로 부르시나요? -우버 vs 카카오택시로 비교하는 사용자 경험>바탕으로 작성되었습니다.

Step 4. [분석 단계]
플로우(Flow)별로 서비스를 뜯어보자

4-1. 스크린 묶기

서비스를 이용해봤다면, 이제 세세하게 분석해 볼 차례입니다. 컴포넌트 디자인은 어떠한지, 정보 구조(IA, Information Architecture)는 어떻게 구성되어 있는지, 인터랙션은 어떤 방법으로 이루어지고 있는지 디테일하게 뜯어보세요. 팁을 드리자면, 플로우(Flow)별로 서비스 스크린을 나열해보고 묶어 분석하면 좋습니다. 기능별로 스크린들이 자연스레 엮어질 거예요. 저는 카카오택시와 우버를 비교 분석할 적에, 서비스 이용 과정을 크게 5가지(출발 및 목적지 선택, 택시 종류 선택, 결제 수단 선택, 기사님 매칭, 배차 성공 후 대기)로 나눠 분석했습니다.

4-2. 집요하게 뜯어보며 ‘Why’ 질문하기

이전까지는 인터페이스가 이렇게 디자인되어있구나- ‘가볍게 느끼는’ 단계였다면, 지금부턴 ‘날카롭게 보는’ 단계입니다. 왜 이렇게 디자인 했을지 그 의도를 생각해보세요. 사용 중에 불편함을 느꼈다면 “왜” 그런 감정을 느꼈는지 질문하며 답해보세요. 편리함을 느꼈다면 그 또한 마찬가지입니다. “왜” 그렇게 느꼈고, “왜” 이렇게 디자인 했을까? 최적의 디자인이 맞는지 판단하고 검토해야 합니다. 특히 서비스를 구성하는 여러 요소를 종합적으로 뜯어보며 질문해보는 것이 중요합니다. 이해를 돕기 위해 우버와 카카오택시 분석 케이스를 예로 들어 각 요소들을 설명해 볼게요.

1️⃣ 진입 경로

사용자가 특정 기능에 접근하기까지 얼마나 많은 페이지나 컴포넌트를 거쳐야 하는지, 어떤 버튼을 통해 진입하는지를 분석합니다. 진입 경로를 분석하는 것은 UI와 정보 구조(IA, Information Architecture)의 효율성을 평가하는데 도움을 주는데요, 보통 진입 경로가 짧고 직관적일수록 사용자는 더 쉽게 목적을 달성할 수 있으며, 서비스에 대한 만족도가 높아집니다.

카카오택시와 우버의 각 플로우별 스크린인데요. 목적지를 선택하고 택시를 호출하는 단계, 호출한 택시를 취소하는 단계 부분입니다. 유사 서비스를 함께 이용하며 분석하길 권장하는 이유가 여기에 있어요. 비슷한 기능도 꽤나 다른 플로우와 디자인을 가지기 때문에, 어떤 방법이 더 편리하고 불편한지 고민하고 그 이유를 분석해보기 좋습니다.

☑️ 택시 호출

카카오택시는 지도와 내 현 위치를 제대로 보여준 뒤 → 목적지 검색 필드를 클릭하면(유저 액션 발생) → 목적지를 선택하는 모달로 이동하고, 우버는 별다른 액션 없이 지도를 보여주는듯 하다가 목적지 검색 모달로 자동 이동합니다. (카카오택시처럼 출발지를 지도 상에서 디테일하게 설정하는 과정은 목적지 검색 후 이뤄져요.)

함께 써보니까 우버는 내 위치를 제대로 인식했다는 인상이 없어 '이 앱이 지금 내 위치를 제대로 파악한 게 맞나?’ ‘잘못 부르게 되면 어떡하지?’ ‘지도 다시 못보나?’ 등의 의문과 불안감이 들었습니다. 아마 우버만 사용하고 분석했더라면 이 인터랙션이 불편하다는 걸 느끼지 못했을 거예요. 카카오택시와 비교한 덕분에 [이런 경로는 택시를 호출하는 사용자에게 불안감을 줄 수 도 있다]는 인사이트를 얻을 수 있었습니다.

☑️ 호출 취소

호출한 택시를 취소하는 뎁스도 비교해보니 큰 차이를 가지고 있었습니다. 카카오택시는 ‘Cancel’ 버튼을 누르면 ‘정말 취소할 것인지’ 확인하는 바텀 시트가 뜨는 게 전부입니다. 반면 우버는 어땠을까요? 무려 세 개의 바텀 시트를 지나야 했습니다. ‘취소하기’를 누르면 왜 취소하는지 이유를 선택해야 하고, 이유를 골라 골라 누르면 ‘정말 취소할 건지’ 또 선택해야 했죠. 자, 그럼 이 뎁스가 정말 사용자 친화적인지 생각해봅시다. 취소 요인을 묻는 시트가 필요할까? 아니요. 더 정확히 말하자면 과정에 딜레이를 줄 정도로 ‘사용자에게’ 중요하거나 필수적인 정보가 아닙니다.
특히 취소처럼 반복적으로 사용하는 기능이라면 진입 경로가 지나치게 깊거나 비효율적일 경우 사용자의 불편이 가중될 수 있습니다. 이렇게까지 분석하다보면, [불필요한 뎁스는 사용성을 크게 저하시키므로 최대한 ‘경로를 최소화’하는 것이 좋고, 실질적으로 사용자에게 필요한 정보만을 제공해야한다. 혹여나 불가피하게 꼭 제공해야한다면 ‘Skip’ 버튼은 눈에 띄는 위치와 디자인으로 제공할 것(우버는 바텀시트 상단에 작게 위치되어 있어 눈에 잘 띄지 않아요).]이라는 인사이트를 체감하게 됩니다.

2️⃣ 컴포넌트 UI 디자인

컴포넌트의 크기, 색상, 간격, 인터랙션 방식 등 세부적인 디자인 요소들은 모두 사용성(Usability)과 접근성(Accessibility)에 영향을 줍니다. 잘 설계된 UI 컴포넌트는 직관적이고 일관성 있는 경험을 제공해 사용자가 목적을 쉽게 달성할 수 있도록 돕지만, 디자인이 적절하지 않을 경우 사용자에게 혼란을 초래하거나 기능을 사용하기 어렵게 만들죠. 이런 컴포넌트들을 살펴봅니다.

위에서 소개한 우버의 취소 바텀 시트를 예로 들어 이어 분석해볼게요. 해당 바텀 시트는 뎁스가 길어지는 점도 문제이지만, 취소를 확정하는 CTA 버튼 위치가 있다 없다 하기 때문에 ‘터치의 연속성’을 해치고 있습니다. 약 왼쪽 이미지와 같이 첫 번째와 마지막 바텀 시트로만 이루어져 있다면, 사용자는 취소 버튼을 같은 위치에서 연속해 누르면 됩니다. 하지만 오른쪽 이미지처럼 구성되니 사용자는 하단에 있는 취소 버튼 눌렀다가, 중간에 있는 취소 요인 선택지를 눌렀다가, 다시 하단 취소 버튼을 눌러야 하는, 손가락을 계속 왔다 갔다 하는 불편함이 생기게 되죠.

이처럼 컴포넌트를 주요 버튼의 위치까지 세밀하게 뜯어볼 수 도 있지만, 다음과 같이 전반적인 디자인을 살펴볼 수 있는데요.

아래와 같은 부분을 고민해 봅시다.

택시를 선택하는 옵션 UI가 통일되어 있는가? 다르다면 각 옵션들이 어떤 식으로 디자인 및 강조처리 되어 있는가? 둘 중 어떤 방법이 더 사용자 친화적인 디자인일까?
결제 수단을 선택할 때 스와이프하며 카드를 선택하는 방식과, 리스트 타입의 카드 중 하나를 선택하는 것 중 어떤 방법이 더 편리한가? 각 방법의 장단점은 무엇이고 왜 이런 디자인을 취했을까?
취소 버튼이 어떤 디자인으로, 어디에 위치하는가? 사람들이 자주 사용하는 버튼이라면 어떤 곳에 있는게 가장 적합할까?

이렇게 UI 디자인을 분석할 때는 단순히 미적 요소를 보는 것을 넘어서, 각 컴포넌트가 사용자의 여정에서 어떤 역할을 하고 있는지, 효율적인지, 사용성을 떨어뜨리지는 않는지 면밀히 분석하는 것이 필요합니다. 분명 많은 시간과 노고가 드는 작업이나 배우는 점이 많은 과정이니, 천천히 그리고 꼼꼼하게, 비판적으로 살펴보길 권장합니다.

3️⃣ 컴포넌트 위치

주요한 CTA나 액션 버튼이 어디에 위치하는지, 그에 따른 시선 처리가 자연스러운지 분석합니다. 컴포넌트의 위치는 사용자가 정보의 우선순위를 파악하고, 시각적 흐름이 자연스럽게 이어지며 편리한 터치 영역을 확보하는 데 중요한 역할을 합니다.

☑️ 시선 처리

시선 처리는 다음과 같이 분석해볼 수 있습니다. 두 서비스 모두 지도 위 택시가 움직이며, 택시가 현재 어디까지 왔는지 실시간으로 정보를 제공합니다. 보통 시선은 ‘움직이는 곳’으로 집중되기 때문에, 해당 지점을 중심으로 사용자의 시선이 움직이게 되는데요, 자연스럽게 도착하기 남은 시간과 자동차 번호 정보를 확인하게 될 겁니다. 그렇다면 사용자 맥락상 시선 이동이 적은지 살펴보는 겁니다.
카카오택시는 남은 도착 시간이 움직이는 택시 그래픽 위에 있어 기사님이 현재 어디까지 오셨는지와 몇 분 남았는지를 ‘동시에’ 파악할 수 있습니다. 차 번호 또한 ‘상단에 노란 박스로 강조’처리 되어 있어, 시선이 쉽게 주요한 정보로 이동할 수 있죠. 반면 우버는 어떤가요? 지도는 위에, 도착 정보는 바텀시트 헤더로, 택시 정보는 시트 안 우측 하단으로 각기 분산되어 있어 시선 이동이 큽니다. 또한 각 정보도 검정 텍스트로만 처리되어 있어 한 눈에 들어오지 않죠. 이런 부분을 캐치해보며 [맥락상 이어지는 정보는 강조해주거나, 비슷한 위치에 배치하는 것이 사용자 친화적이구나.]를 생각할 수 있어요.

☑️ 터치 영역

터치 영역은 주로 ‘엄지 영역(Thumb zone)’을 기반으로 분석해 볼 수 있습니다. 엄지 영역은 스마트폰 터치 스크린에서 사용자의 엄지가 닿기 편한 곳을 뜻합니다. 스마트폰 세로의 중간 지점의 위 · 아래나 아래쪽 영역에 해당하는데요. 멀리있는 메뉴 버튼을 누르기 위해 손가락을 쭉 뻗느라 불편함을 느낀 적이 있다면, 엄지 영역을 벗어났기에 발생하는 문제입니다.

카카오택시의 결제 수단 적용하기 CTA 버튼은 가장 하단에 위치하기 때문에 엄지로 선택하기 용이하지만, 우버의 적용하기 버튼은 X 버튼을 누르는 방식입니다. (결제 수단을 적용할 때 해당 페이지로 뎁스인 하기 때문이예요.) 이 X는 가장 좌측 상단에 위치하기 때문에, 엄지 영역에서 많이 벗어나 있어 손가락을 보다 멀리 이동시켜야 합니다. 사용성을 저하시키는 포인트인 거죠.

4️⃣ UX 라이팅

UX 라이팅도 작지만 큰 역할을 하는 부분입니다. UX 라이팅은 단순한 텍스트 전달을 넘어서, 사용자가 서비스를 이해하고 원활하게 사용할 수 있도록 돕는 중요한 요소예요. 효과적인 UX 라이팅은 사용자 경험을 개선하고, 인터페이스 내에서 의사소통의 역할을 하며 기능을 명확하게 안내합니다.

카카오택시와 우버의 UX 라이팅 차이를 살펴볼까요. 카카오택시는 배차를 시작하자마자 “3분 내 거리에 있는 기사님 요청 중”이란 안내가 보입니다. 시간이 지날 수록 대기 시간은 4분, 5분으로 길어지고, 오래 기다린다 싶으면 기사님이 곧바로 매칭되는 ‘카카오 블루’를 추천하죠. 반면 우버는 ‘몇 분 남았다’가 아닌 “배차 요청 중, 가까이에 있는 기사님을 찾고 있어요”라는 메시지를 보여줍니다.

보통 조급한 마음으로 택시를 기다리는 사용자에게는 ‘정확히 몇 분 남았는지’ 알려주는 카카오택시의 라이팅이 더 직관적이고 편안합니다. 이렇게 사소하지만 적절한 UX 라이팅의 사용은 사용자가 서비스의 목적과 기능을 쉽게 이해할 수 있게 하며, 특정 기능이나 작업에 대한 명확한 기대치를 제공합니다. 명확하고 간결한 텍스트는 곧 서비스 흐름을 자연스럽게 이끌어줘 더 나은 경험을 하게 만들죠.

안내 메시지, 오류 메시지, 성공 알림 등도 사용자가 서비스와 상호작용하는 데 중요한 역할을 하므로, 이러한 부분에 적절한 라이팅이 사용되었는지 살펴보는 것도 좋은 분석 경험이 되어줄 것입니다.

5️⃣ GUI/모션 인터랙션 정도

우버의 GUI 모션 인터랙션은 흥미로웠습니다. 기사님을 연결하는 과정에서 이미지와 같이 지도가 줌 인, 아웃되거든요. 꼭 필요한 인터랙션은 아니지만, 택시를 기다리는 지루함이 조금은 덜 해지는 효과라 느껴졌습니다. 하지만 여기서 따져볼 것은 ‘정말 사용자에게 필요한 정보가 맞는가’라는 부분입니다. 우리에게 필요한 건 재미보다는 ‘기사님이 언제 매칭되는가’에 대한 정보거든요. 때문에 다소 정적이어도 “몇 분 거리에 있는 기사님을 매칭 중입니다”라는 안내 메시지를 주는 카카오택시가 더 사용자 친화적인 경험을 제공한다 생각했습니다.

잘 설계된 GUI는 정보의 우선순위를 시각적으로 구분해주고, 사용자가 의도한 대로 빠르고 정확하게 작업을 수행하게 도와줍니다. 자연스러운 애니메이션이나 전환 효과는 사용자가 인터페이스의 변화를 쉽게 이해하게 만들고, 피드백을 제공해 상호작용이 성공적으로 이루어지고 있다는 일종의 ‘신호’ 역할을 해주죠. 다만 중요한 점은 ‘과도한 시각 정보’는 사용자로 하여금 주의를 산만하게 만들고, 피로감을 야기할 수 있기 때문에 이 밸런스를 잘 맞추고 있는지 판단해보는 자세가 중요합니다. 멋있고 유려하기만한 시각 효과는 UX 디자인이 아닙니다. 기능과 정보 전달을 ‘보조’하고, 사용자의 목적을 잘 달성할 수 있도록 ‘지원’하는 역할을 하는 것이 그래픽 요소 활용의 핵심입니다.

*** 특히 아래와 같은 포인트를 중심으로 분석해보면 좋습니다.***

정보의 우선순위를 시각적으로 잘 구분시켜주고 있는가? 사용자의 이용 흐름을 해치지는 않는가?
시각적 요소가 오히려 피로감을 불러 일으키지는 않는가?
기능을 사용하고 이해하는 데 ‘보조적’ 역할을 잘 수행하고 있는가? 그렇다면 어떤 측면에서 도움을 준다고 생각하는가?

Step 5. [분석 단계]
보통 어떤 타겟이, 어떤 상황에서 쓰는지 시나리오까지 상상해보자

마지막으로 서비스 기능을 살펴보는 과정에서, “이 기능은 어떤 특징과 상황에 놓인 사용자가 쓸지” 함께 상상해보는 겁니다. 기능이 사용되는 맥락(Context)을 구체적으로 설정해보면, 해당 UX 디자인이 왜 불편하거나 만족스럽게 느껴지는지 그 이유를 명확하게 파악할 수 있기 때문인데요. 위에서 분석한 카카오택시 vs 우버 사용자 경험 분석글 또한, 사용자 맥락을 기반으로 어떤 UX가 더 편리하고 친화적인지 판단했습니다.

가장 처음, 택시 호출 진입 경로의 UX를 분석했던 부분을 기억하시나요? 당시 카카오택시의 [내 현 위치를 제대로 보여준 뒤 → 목적지 검색 필드를 ‘클릭하면’ → 목적지를 선택하는 모달로 이동]하는 뎁스를 편안하다 분석했던 이유는, 택시 서비스란 ‘사용자가 자신의 돈과 시간을 걸고 이용하는’ 특징을 가지기 때문이었습니다.

돈과 시간은 사용자가 예민해질 수 밖에 없는 요소입니다. 따라서 ‘바빠 죽겠는데 이상한 곳으로 오는거 아니야?’라는 불안감을 느끼지 않도록 ‘너의 정보를 제대로 파악했어. 그러니 택시를 잘못 부르는 일은 없을거야.’라는 확신을 그 짧은 순간에도 주는 경험이 필요한거죠.

이후 우버의 택시 호출을 취소하는 긴 진입 경로와 바텀 시트 디자인을 비판적으로 분석한 까닭도 사용자 맥락을 기반으로 분석했기 때문입니다. 시나리오상 택시를 취소하는 사용자는 보통 (a) 택시가 너무 안와서 (b) 목적지든 택시 종류든 뭔가를 잘못 설정해서 (c) 다른 택시가 잡혀 최대한 빨리 취소해야 하는 케이스일겁니다. 이런 프로세스에 놓일 사용자의 감정은 어떨까요? 당연히 화가 나고, 짜증나고, 조급하며 예민한 -부정적인 감정을 느끼고 있겠죠. 이런 사용자에게 불필요한 뎁스는 단순한 불편함을 넘어 더 큰 스트레스와 짜증으로 번질 겁니다.

이렇게 시나리오를 상상해보면, 설계된 UX의 유용성이나 적합성을 더욱 사용자 관점으로 평가할 수 있습니다. 특정 디자인이 왜 편한지/불편한지 그 원인을 더 깊이 이해하고, 더 나은 솔루션을 구체적으로 고민할 수 있게 하죠. 사실상 기능을 사용하는 사용자의 시나리오를 상상해보는 것은 UX 분석에서 기본이자 필수적인 단계로 볼 수 있습니다. 따라서 한 두개의 기능이라도 사용자 시나리오를 그려보면서 UX를 분석해 보세요. 더 풍부하고 논리적인 통찰을 얻을 수 있을 거예요.

Step 6. [개선 단계]
직접 고쳐보자

분석이 끝났다면, 여기서 그치지 않고 불편함을 느낀 UX를 직접 고쳐보는 시간까지 가져봅시다. 내 것으로 완전히 체화하는 과정이라 생각하세요. 이 컴포넌트를 어떤 식으로 바꾸면 좋을까? 뎁스를 더 단축시킬 수 있는 방법은 없을까? UX 라이팅은 이게 최선일까?

사소해도 괜찮습니다. 저 같은 경우 우버의 택시 취소 바텀 시트의 TO BE 형태를 고민했어요. CTA 버튼 위치를 최대한 통일시켜 불필요한 페이지를 쉽게 넘길 수 있도록 아주 살짝 바꿔본 건데요.

첫 번째 시안은 취소 요인을 묻는 페이지가 중간에 꼭 들어가야 할 때의 디자인입니다. 불필요함을 느낀 사용자가 곧바로 해당 과정을 넘길 수 있게 좌측 상단에 있던 작은 글씨의 ‘skip’ 버튼을 메인 CTA 버튼으로 이동시켰고, 터치 위치가 바뀌지 않도록(즉, 쉽게 연속으로 터치할 수 있도록) ‘Cancel ride’와 같은 주요 액션 버튼들을 모두 최하단으로 통일시켰습니다. 더불어 버튼 디자인도 ‘기다리기’보다 높은 우선 순위를 가지도록 ‘background: black, text: white’으로 변경, 사용자의 눈에 더 잘 띌 수 있도록 대비감을 높였습니다.

도출한 문제점에 대한 솔루션을 스스로 제안하고 리디자인해보는 과정은, UX 디자이너로서 문제 해결 역량을 강화시킵니다. 마땅한 해결책이 생각나지 않는다면 레퍼런스를 찾아보며 고민해보세요. 단순히 문제 발견에서 끝내지 않고, 직접 해결해보는 과정까지가 UX 관점으로 서비스를 스터디하는 방법입니다.

Step 7. [정리 단계]

이렇게 분석한 내용은 꼭 정리해두기

자, 분석이 끝났나요? 그렇다면 분석한 내용을 가볍게 정리해보는 것으로 스터디를 마무리 지으세요. 기록으로 남겨두는 과정은 생각을 명확하게 정리하고 구조화하는 데 큰 도움이 됩니다. 정리는 각자가 편한 방법으로. 저는 브런치에 길게 정리했지만, 아이패드에 앱 스크린샷을 올리고 간단히 필기할 때도 있어요. 어떤 방식이든, 중요한 것은 나름대로 정리해보는 겁니다.

특정 디자인이 사용자 친화적이다, 그렇지 않다 판단하는 데는 정답이 없다고 생각합니다. ‘왜’ 좋다 느꼈고, 불편하다 느꼈는지 논리적으로 설명할 수 있다면 그것으로 충분하다 봐요. 그 이유를 찾아가는 것이 UX적으로 서비스를 분석하는 데의 핵심이거든요.

또한 서비스를 이 가이드에 따라 매번 오랜 시간에 걸쳐 꼼꼼하게 분석해야 하는 건 아닙니다. 당연히 밀도있게 분석해보는 것은 좋지만, 너무 많은 공수가 든다고 부담을 느끼면 시작 자체가 어려워지니까요. 그러니 어떤 서비스는 깊게, 어떤 서비스는 가볍게 살펴보자고요. 사용하면서 '흥, 좀 불편하다. 이건 이렇게 바뀌면 좋겠는걸.'라고 가볍게 상상해보는 것만으로도, 서비스를 대하는 UX 디자이너의 좋은 자세입니다. 그러다 생각이 많아지는 서비스를 발견하면, 가이드를 참고해 심도 깊게 검토하는거죠. 내 주변의 서비스를 한 두 개 씩 분석하다보면 분명 더 나은 사용자 경험을 고민하고 설계하는 UX 디자이너로 성장하고 있을 겁니다.

▶ <시니어가 주니어에게> 시리즈 보러 가기

글, 사진 정그린 삼성전자 UX 디자이너

발행일 2024.10.11

방금 보신 콘텐츠, 마음에 드셨나요?

원티드 회원이라면 모든 콘텐츠를 무료로 보실 수 있어요!
당신의 커리어 성장을 돕는 원티드 오리지널 콘텐츠