교회 대학부 주보 웹앱, ‘멍에’ 사용성 테스트(Usability Test) 진행 후기

 

 

'멍에' 는 웹앱 기반 대학부 주보로

매주 친교와 광고, 그리고 그 주의 특별한 소식을 전하는 소통 창구로 활발히 사용되고 있는 서비스예요.

 

 

이 글은 ‘멍에’의 불편한 점을 찾고 새롭게 기획하는 과정에서 진행했던 사용성 테스트(UT) 후기를 정리한 글입니다.

 

 

 

'멍에'

 

 

 

---

 

목차

1. 사용성 테스트(UT, Userbility test) 란?
2. ‘멍에’에서 UT를 진행하게 된 배경과 목적
3. 사용성 테스트 시행 과정 
4. 사용성 테스트 결과 및 분석 
5. 사용성 테스트에서의 아쉬운 점

 

---

 

 

 

1. 사용성 테스트(UT, Userbility test) 란

 

사용성 테스트는 출시 이전에 MVP 단계에서 기능이 의도한 대로 사용되고 있는지 확인할 수 있어요. 

 

사용성 테스트의 설문은 참가자가 상황에 이입해서 Task를 수행할 수 있도록 구체적인 상황이 제시된 시나리오 형태로 구성해요. 

 

사용성 테스트를 통해 사용자가 의도에 따라 원하는 기능을 잘 사용하고 있는지 확인할 수 있어요.

 

 

 

---

 

 

 

2. ‘멍에’에서 UT를 진행하게 된 배경과 목적

 

첫 번째, '진짜' 사용자 경험 개선을 위해 

 

 

실제 유저들은 '멍에'를 어떻게 사용하고 있을까? 

우리(개발자, 서비스 운영자)가 새롭게 기획한 방향이 기존의 불편함을 개선할 수 있을까?

실제 유저들은 '멍에'에 있는 기능을 얼마나 활용하고 있을까? 

 

 

멍에를 새롭게 기획하며 불편한 점을 정리하는 과정에서 '진짜' 사용자의 불편함을 알고 싶었어요. 

그래서 사용성 테스트를 통해 팀에서 기획한 개선 방향이 실제 유저들에게 적절한 지 검증해보고 싶었어요.

 

 

두 번째, 캐러셀 라이브러리의 적합도 판단 

 

 

기획 과정에서 '멍에' 서비스 운영자로부터 사진 확대를 하면 다음 페이지로 넘어가는 문제가 있다고 전달받았어요. 

 

 

여기서 ‘멍에'의 흥미로운 점이 있는데요! 

'멍에'는 이전·다음 페이지를 넘길 때 캐러셀 방식으로 화면이 전환되는 구조를 가지고 있어요.

 

 

멍에에서 사용하는 캐러셀 라이브러리

https://github.com/naver/egjs-flicking

GitHub - naver/egjs-flicking: 🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel

 

 

하지만 사진 확대를 하면 옆으로 넘어가는 동작으로 인식돼서 페이지가 쉽게 옆으로 넘어가는 문제가 자주 발생했어요.

 

 

'멍에' 사진 첨부 화면

 

 

 

 

 

 

캐러셀은 사용자에게 많은 정보를 보여주고 싶지만 공간은 없을 때 쓰는 UI 에요.

 

중요한 정보만 노출 시키고 자세한 정보는 그 안으로 들어가야 볼 수 있으며, 슬라이드를 통해서 여러 콘텐츠를 탐색할 수도 있어요. 

 

 

 

캐러셀 예시 - 이벤트 배너 (출처: 부트텐트 웹페이지)

 

 

 

https://designbase.co.kr/dictionary/carousel/

캐로셀 (Carousel) | 디자인베이스

 

 

하지만 멍에에서는 기사 전체 부분을 캐러셀 방식으로 구성하고 있었기 때문에

캐러셀 UI 디자인의 목적에 맞지 않은데 이 방식이 적절한가? 에 대한 고민이 있었어요. 

 

 

그래서 새로운 기획 과정에서 다음 두 가지 방향을 고민했어요.

 

1. 사진 확대 문제를 해결할 수 있는 다른 캐러셀 라이브러리를 찾기

2. 캐러셀 방식을 과감히 버리기

 

 

기존의 방식을 완전히 버리기엔 확신이 없었고, 

실제 유저의 사용을 보고 판단하고자 사용성 테스트를 기획하게 되었어요.

 

 

 

---

 

 

 

 

3. 사용성 테스트 레퍼런스 

아래는 제가 참고한 토스 컨퍼런스에서 사용성 테스트 경험을 공유하는 영상이에요.

 

https://www.youtube.com/watch?v=46KDogfdSyQ

 

토스에서는 자체적으로 EVR (Entrance conVersion Rate) 이라는 UT 툴을 제작해서 사용했어요. 

 

EVR은 설문 폼으로 아래와 같이 사용자에게 정확한 시나리오를 제공하고 사용자의 진입점을 테스트할 수 있어요.

 

'TMC25 ❘ Design - 사용자 경험을 어떻게 수치화할 수 있을까' 에서 캡쳐한 화면

 

 

설문에서 사용자가 선택한 부분이 빨간 점으로 표시되고 사용자의 진입점을 확인할 수 있어요.

 

'TMC25 ❘ Design - 사용자 경험을 어떻게 수치화할 수 있을까' 에서 캡쳐한 화면

 

 

토스의 EVR과 비슷한 서비스를 제공하는 유저 리서치 툴에는 Maze, MS Clarity가 있어요.

 

Maze는 유료 서비스고, 조금 복잡하길래 저는 사용하지 않았어요.

 

 

https://maze.co/

Maze | User Research and Testing Platform

 

https://clarity.microsoft.com/

Microsoft Clarity - Free Heatmaps & Session Recordings

 

---

 

 

3. 사용성 테스트 시행 과정 

 

토스의 사용성 테스트 방법을 참고해서 구글폼으로 사용성 테스트 설문을 만들었어요. 

 

 

 

Step 1. 무엇을 검증해보고 싶은지 정리 

설문 문항을 작성하기 전에, 제가 이 UT를 통해 알아보고자 하는 점을 정리했어요. 

 

 

• 초기 사용자 진입점 파악 (사용자는 홈 버튼, 멍에 리스트 화면을 보고 있는지) 
  • 첫 화면에서 만약 멍에 홈 화면을 간다면 어디를 누르는지 확인하기
• 캐러셀 라이브러리 적합도 판단
  • 멍에를 볼 때 다음 버튼을 누르는지 아니면 옆으로 슬라이드 하는지 확인 (캐러셀 활용 여부)
    
    •  
  • 옆으로 넘기는 부분이 불편하다고 느껴지는지? (캐러셀 라이브러리 사용 시에 사진 확대 이외의 불편함 확인하기) 
• 네비게이션 활용도 확인
  • 유저들은 네비게이션 기능을 알고 있는지 확인
• 멍에 검색 기능 활용도 확인

 

 

 

Step 2. 구글폼에 실제 '멍에'의 이미지를 첨부하고  구체적인 시나리오 제시하기 

 

그리고 파악하고자 하는 점을 일대일 매칭으로 설문 문항을 구성했어요.

 

 

구글폼에 '멍에'의 이미지를 첨부해서 사용자가 멍에를 읽는다고 생각하며 설문에 임할 수 있도록

구체적으로 시나리오를 작성했어요.

 

 

실제 UT를 진행했던 구글폼

 

 

---

 

 

 

4. 사용성 테스트 결과 및 분석 

 

결과적으로 '멍에'의 사용성 테스트에서는 총 45명의 사용자 응답을 받았어요. 

'멍에' 사용성 테스트 구글폼 응답 시트

 

 

캐러셀 방식에 대한 사용성 검증 결과

 

멍에를 읽을 때 60% 이상의 사용자가 옆으로 슬라이드 해서 읽는데,

그 중 절반 정도의 사용자가 슬라이드가 불편하다고 응답했어요. 

 

가장 큰 원인은 ‘멍에를 아래로 스크롤 하다가 옆으로 넘어가는 경우가 많아서 불편해요’ 였어요.

 

 

 

사용성 테스트를 통해 팀의 예상보다 캐러셀 방식에 불편함을 느끼는 유저들이 많다는 걸 알게 되었어요. 

 

그래서 테스트 결과를 바탕으로 캐러셀 라이브러리를 적용하지 않는 방향으로 기획을 수정했어요. 

 

 

 

---

 

 

5. 사용성 테스트에서의 아쉬운 점

 

사용자의 네비게이션 활용 정도를 파악하기 위한 문항에서 선지를 모호하게 작성해서 응답 결과가 분산되는 경우가 있었어요. 

 

해당 문항의 선지

 

 

‘그냥 쭉 봐요’ 에 담긴 의미: < , > 버튼으로 혹은 슬라이드로 직접 이동해요.

 

 

저는 위와 같은 의도로 선지를 작성했지만,

질문의 의도가 사용자에게 잘 전달 되지 않아서 응답 결과가 분산된 걸 확인할 수 있었어요.

 

 

응답 결과

 

 

응답 결과에는 기타 항목의 사용자 입력 답변이 많았고, 그 내용의 대부분은  ‘그냥 쭉 봐요'와 같은 맥락이었어요. 

 

 

이번 테스트를 통해 선지를 작성할 때는 사용자의 어떤 활동을 캐치할 건지 선지의 의도를 더 명확하고 직관적으로 적어야 한다는 점을 배웠어요.