따릉이, QR코드로 간편하고 안전하게 자전거 대여하기

[코드스테이츠 PMB 7기] Wireframe 그리기

이번 과제는 앱 서비스 한 가지를 선택해서 해당 서비스의 태스크 1가지에 대한 Wireframe을 작성하는 것입니다. 저는 서울시의 공공자전거대여 서비스인 '따릉이'의 QR코드기반 자전거대여 버튼을 사용하고자 합니다.

User Story : 간편하고 안전하게 자전거 대여하기

어플리케이션이 나오기 전인 초창기부터 따릉이를 애용했던 소비자로서 따릉이의 주된 고민 중 하나는 '어떻게하면 간편하고 안전하게 자전거를 대여하게 할 수 있을까'라는 고민이었습니다. 여기에서 '간편'이라 함은 소비자들이 최대한 적고 간편한 동작으로 자전거를 대여할 수 있는 방법을 의미하고, '안전'이라 함은 자전거 공급자인 서울시 입장에서 자전거 무인대여에 따른 도난을 방지할 수 있는 방법을 의미했죠. 양쪽의 요구들이 충족되는 선에서 문제를 해결할 수 있는 기능이 필요했습니다.

따라서 이에 대한 User Story는 다음과 같습니다.

"따릉이 사용자는 간편하고 편리한 자전거 대여를 위해
원클릭 대여 서비스를 원한다"

Lo-Fi Wireframe 그리기

초창기에는 자전거 대여지점들마다 선형 잠금장치를 설정해서 해당 지점들에 자전거를 거치하는 방식으로 도난을 방지했었습니다. 하지만 이 경우, 자전거 대여지점의 거치시설을 초과하는 경우 자전거의 거치가 어렵고, 선들로 연결이 되어 있기 때문에 거추장스럽고 잠금장치의 사용과정에서의 잔고장이 많았습니다. 또한 기존의 LCD화면 기반 대여방식은 공유서비스의 특성상 화면 혹은 버튼에 대한 잔고장이 잦았었죠.

이에 서울시에서는 민간 자전거 대여 서비스 등의 모델을 참고해서 QR코드를 기반으로 대여를 하면 블루투스 기반으로 잠금레버가 설정되는 방식을 차용해서 이러한 문제들을 해결하고자 했습니다.

QR코드 기반으로 자전거를 대여하는 방법에 대한 Flow는 다음과 같습니다.  

 

1. 따릉이 어플 로그인(대여권 구매된 상태 가정)
2. 남아 있는 따릉이 숫자 확인
3. 따릉이 '대여하기' 버튼 클릭
4. 카메라를 통해 대여하고자 하는 따릉이의 QR코드 스캔
5. 블루투스를 통해 따릉이 대여
6. 사용

이를 Lo-fi Wireframe으로 그려봤습니다.

로그인 후 지도 상에서 자전거를 확인하고 대여 버튼을 누르면, QR코드를 촬영할 수 있는 페이지로 넘어가고, 여기에서 자전거 체크가 이루어집니다. 이 중 자전거가 고장 혹은 이미 대여되어 있을 경우, 고장 혹은 이미 대여 메시지가 뜬 후 다시 대여버튼 화면으로 돌아갑니다. 대여가 성공할 경우, 연결 과정을 기다리도록 돕는 연결중 화면을 기다린 후 대여 시의 화면으로 넘어갑니다.

Figma를 통해 구현한 Wireframe 디자인

Figma를 통해서 구현한 Wireframe 디자인은 다음과 같습니다. 지도의 경우 기존 따릉이의 지도를 그대로 사용하였고, QR코드 촬영을 통한 대여만을 초점으로 맞춘 Wireframe 디자인입니다.

나가며

아주 간단한 내용의 Wireframe만을 시범적으로 그려봤지만 생각보다 많은 프레임과 내용을 담아야 함을 알 수 있었습니다. 그리고 화면을 기반으로 내용들을 설명하도록 되어 있는 방식이 중심이 되어서 디자인과 개발과의 의사소통에 유용하게 활용될 수 있음을 보게 됩니다. 동시에 다양한 기능들이 동시다발적으로 설계되기 때문에 보다 종합적인 통찰과 정렬, 그리고 개선이 필요함을 보게 됩니다.