KT앱 와이어프레임 그리기
결제 수단 변경해 보기 [코드스테이츠PMB 07]
<목차>
1. 들어가며
2. 과업 설정과 유저스토리
3. 와이어프레임 그리기 : KT 결제수단 변경
- 로우-파이 와이어프레임
- 미드-파이 와이어프레임 + 프로토타입
4. 마치며
들어가며
최근 카페에 들렀다가 신용카드를 잃어버린 일이 있었습니다.
처음 커피를 계산하고 카드를 지갑에 다시 넣었(다고 생각 했)습니다. 그런데 지하철을 타기 위해 지갑을 찍어보니 아무 반응이 없었습니다. 살펴보니 지갑 안에 평소 신용카드를 넣던 자리가 비어있었죠. 다시 돌아가서 카드를 찾아볼까 하다가, 비가 억수같이 쏟아져 이내 포기했습니. 마침 카드의 IC칩도 많이 닳아서 결제가 잘 안 되는 경우도 많았기에, 새 카드로 바꾸자고 생각했습니다.
교통, 통신, 인터넷 쇼핑 등 실생활용으로 쓰던 카드여서 카드를 재발급받은 뒤 결제정보를 재설정해 줘야 했습니다. 카카오페이, 네이버 페이, 토스 등 핀테크 앱부터 구글, 애플, 넷플릭스 등의 구독 정보까지 모두 바꿔야 했죠.
이 과정에서 가장 어려웠던 것 중 하나가 바로 KT서비스의 결제 수단을 바꾸는 일 이었습니다.
마침 코드스테이츠 PMB 과정 중 모바일 앱서비스의 태스크를 분석하는 과제가 있었던 터라, 실제 경험했던 결제수단 변경 사례 중 변경 과정이 가장 복잡했던 통신사 KT의 결제 방법 변경 과정에 대해 분석 해 보기로 하였습니다.
KT 결제수단 변경을 위해 어떤 과업(Task)을 수행해야 하고, 과업을 통해 어떤 문제를 해결할 수 있는지 알아보고, 유저 스토리(User Story)를 통해 이를 한 문장으로 정리한 뒤, 과업을 수행할 흐름(Flow)을 예측하고 각 단계별로 와이어프레임(Wireframe)을 그려보고자 합니다.
과업(Task) 설정과 유저 스토리(User Story)
결제 방법을 변경할 수 있는 다양한 방법이 있겠지만, 절대 ARS나, 방문으로 문제를 해결하고 싶지 않았습니다.
전 직장에서 통신요금 납부 정보를 바꿀 때 ARS를 이용한 적이 있었는데, 상담하시는 분께서 해결해 줄 수 있는 문제는 없었고, 결국 온갖 서류를 구비해서 'KT플라자'라고 하는 곳에 방문해야만 했기 때문입니다. 당시 굉장히 많은 시간과 노력이 필요해 매우 힘들었던 기억이 있었습니다. 물론 법인과 달리 개인의 결제 수단 변경은 간단할 수도 있겠지만, 최근의 ARS를 통한 문제 해결 경험이 매우 좋지 못했기에, 상담과 방문을 통해 문제를 해결하고 싶지는 않았습니다.
그래서 저의 정보를 간편하게 변경할 수 있으리라 기대하고, KT의 모바일 애플리케이션에서 결제 수단을 바꾸려고 시도 해 봤습니다.
과업(Task)과 이를 통해 해결되는 문제
과업(Task)은 사용자가 수행하고자 하는 일을 의미합니다. 저의 경우에는 KT 모바일 애플리케이션에서 요금 납부 수단 변경이 과업에 해당하죠. 해당 과업을 달성하면 결제가 안 되는 카드로 결제를 시도하는 상황을 방지할 수 있습니다. 분실한 카드로는 어떠한 결제도 되지 않도록 막아 두었기 때문이죠. 연체에 대한 불안을 미리 없앨 수 있고, 결제일에 귀찮게 가상계좌를 발급받아서 계좌이체로 납부해야 하는 상황을 피할 수 있습니다.
유저 스토리(User Story)
유저 스토리(User Story)는 사용자의 입장에서 어떤 목적을 달성하기 위해 무엇을 필요로 하는지 알아보는 방법입니다. 어떤 과업에 대해, 아래의 빨간색 칸을 채워서 유저 스토리를 정의할 수 있습니다. (유저 스토리에 대해 더 알고 싶은 독자분들께는 일하는 우리 님의 브런치에 정리된 글을 읽어볼 것을 추천드립니다.)
고객/사용자 는
목적/목표를 위해서,
필요/욕구를 원한다.
일하는 우리님이 제안하신 방법을 차용해 아래와 같이 유저 스토리를 작성해 보았습니다.
KT 사용자 는
지점 방문이나 전화보다 쉽게 결제 카드를 바꾸기 위해서
모바일 어플리케이션에서 간편하게 결제수단을 변경하기를 원한다.
와이어프레임 그리기 : KT 결제수단 변경
유저 스토리를 수행하기 위한 '핵심 기능'과 '흐름'
KT의 모바일 애플리케이션을 통해 결제 수단을 변경하기 위해서는 아래 5단계를 거쳐야 합니다.
앱 설치 → 로그인 → 결제수단 변경 신청 → 본인 인증 → 변경할 결제수단 등록
1. 앱 설치
제 스마트폰인 애플 아이폰(iPhone)을 기준으로, 앱스토어(App Store)에 KT를 검색해 보면 최상단에 '마이 케이티'라는 애플리케이션이 나옵니다. 해당 앱이 KT의 모바일 서비스를 모두 담은 애플리케이션입니다.
2. 로그인
KT 통신 서비스를 개통할 때, 보통 멤버쉽 회원가입을 진행합니다. 당시에 가입한 계정으로 로그인하면 현재 사용 중인 요금제와 결제 수단, 결제 일정 등을 확인할 수 있습니다.
3. 결제수단 변경 신청
상세 메뉴를 통해 결제 수단 변경 신청을 진행합니다.
4. 본인 인증
신청인이 본인이 맞는지 인증하는 과정을 거칩니다.
5. 변경할 결제수단 등록
카드, 카카오페이, 계좌이체 등 향후 결제할 수단을 선택하고, 결제 정보를 입력합니다.
프로토타입과 와이어프레임(Wireframe)
프로토타입(Prototype)은 직역하면 시제품이라는 뜻입니다. IT제품에서는 제품의 정식 론칭 전 테스트를 위해 사용되는 최종 제품의 시뮬레이션 또는 샘플 버전이라는 의미로 사용됩니다.
보통 낮은 충실도를 가진 Low Fidelity Prototype(로우-파이 프로토타입, Lo-Fi Prototype)부터 조금씩 개선하여 최종적으로는 출시 제품과 유사한 High Fidelity Prototype(하이-파이 프로토타입, Hi-Fi Prototype)으로 발전합니다.
와이어프레임(Wireframe)은 간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사한 것 을 의미합니다. IT 제품의 각 화면을 골격만 짜고, 이를 선으로 연결해 흐름을 보여주는 것이 와이어프레임이죠. '선(wire)으로 연결된 골격(frame)'이라는 의미로 이해하면 쉽습니다.
와이어프레임은 디자인과 기능보다는 사용자에게 어떤 정보를 어떻게 보여줄지에 집중한다는 측면에서 프로토타입과 약간의 차이가 있습니다. 와이어프레임은 제품을 개발하는 S/W 엔지니어, UI 디자이너와 같은 구성원에게 제품의 개발 방향과 구현할 모습을 시각적으로 보여주고 커뮤니케이션하는 효과적인 도구입니다.
앞서 살펴본 핵심 플로우를 바탕으로 마이 케이티의 결제 수단 변경에 대한 와이어프레임을 작성해 보았습니다.
로우-파이 와이어프레임
우선은 손으로 매우 조악하게 마이 케이티에서 결제 수단 변경 과정을 그려보았습니다.
으악 내 눈....이미 앱 설치와 로그인이 되어있는 상태였기에, [결제수단 변경 신청]부터 [완료]까지만 와이어프레임으로 그려 보았습니다.
생각보다 들어가야 할 페이지가 너무 많았고, 입력할 정보도 너무 많았습니다. 실제로 결제 수단을 변경할 때 실수가 여러 번 나오기도 했구요.
현재 UX의 문제점에 대해서는 정리해서 다음 기회에 다루기로 하고, 그림으로 그린 "Super Low fidelity" 와이어프레임을 바탕으로 조금 더 높은 완성도의 와이어프레임을 만들어 보았습니다.
미드-파이 와이어프레임
프로토타이핑 툴 피그마(Figma)를 활용해 중간 완성도(Medium fidelity)의 와이어프레임을 만들어 보았습니다. 컴퓨터 만세
로우-파이 와이어프레임에서 살펴본 것처럼 앱 설치와 로그인은 제외한, 순수한 결제 수단 변경을 찾기까지의 과정을 그려보았습니다.
클릭하시면 이미지가 확대됩니다.** 브런치에 올릴 수 있는 사진 크기에 한계가 있어서, 부족하지만 피그마의 기능을 활용해 실제 클릭, 스크롤이 가능한 프로토타입을 만들어 보았으니(프로토타입 링크) 관심 있으신 분들께서 확인해 보시길!
마치며
KT 결제 수단 변경 경험을 바탕으로 '마이 케이티'에서 실제로 결제 수단을 변경하는 과정에 대한 과업(Task), 유저 스토리(User Story)를 작성해 보고, 이를 바탕으로 실제 플로우를 Lo-fi, Med-fi Wireframe으로 그려본 뒤, 최종적으로 Figma의 기능을 이용해 프로토타이핑까지 해 보았습니다.
와이어프레임을 그릴 때 생각보다 많은 시간이 소요되었고 많은 정성이 필요하다는 것을 알게 되었습니다. 무엇보다 실제 앱을 기획하고 디자인했을 분들이 얼마큼 노력을 기울여서 앱을 제작했을지도 조금이나마 알 수 있었습니다.
하지만 이 작업을 통해 '이 과정은 굳이 필요하지 않겠는데?'라는 생각이 드는 부분도 확인할 수 있었습니다. 해서 기회가 된다면 제 기준으로 불편했던 점을 바탕으로 KT 애플리케이션인 '마이 케이티'의 UX 개선안을 만들어 보고자 합니다.
<Wrap-up>
- 과업(Task) : KT 모바일 애플리케이션으로 결제수단 변경하기
- 과업으로 해결되는 문제 : 결제가 안 되는 카드로 결제를 시도하는 상황을 방지
- 유저 스토리(User Story) : KT 사용자는 지점 방문이나 전화보다 쉽게 결제 카드를 바꾸기 위해서 모바일 애플리케이션에서 간편하게 결제수단을 변경하기를 원한다.
- 플로우 : 앱 설치 → 로그인 → 결제수단 변경 신청 → 본인 인증 → 변경할 결제수단 등록
[참고자료]
- 일하는 우리 님의 브런치, 유저 스토리 : https://brunch.co.kr/@workingus/36
- tarot 님의 블로그, 프로토타입 : http://imagestory.net/?p=804
- 인터랙션 디자인 님의 브런치, 로우 파이&하이파이 프로토타입 https://brunch.co.kr/@ixdkakao/21
- Adobe 블로그, 와이어프레임 : https://blog.adobe.com/ko/publish/2018/03/06/everything-you-need-to-know-about-wireframes-and-prototypes.html#gs.5qtn4s
- 피그마(Figma), 프로토타이핑 툴 : https://www.figma.com/
