[UX 꼼지락] 따릉이 - Wireframe 2탄! 화면 구성 점검하기

(작성일 : 2019. 10. 12. 15:31)

 

안녕하세요! 따릉이 리디자인 꼼지락 프로젝트입니다!

​

지난 시간에 손으로 직접 그려본 wireframe을 이번엔 실제 폰 화면에서 어떻게 구현되면 좋을지 파악하기 위해 adobe XD를 사용하여 다시 그려보았습니다.

​

그리고 역시! 손으로 그리는 것과 XD의 널찍한 아트 보드 위에 아이디어를 직접 그려보는 일은 또 달랐습니다. 한눈에 들어오고, 너무 복잡하지 않고 깔끔하면서 일관성을 유지하는 UX/UI란.. 쉽지 않았습니다.

​

정말 많은 Dribble의 참고 자료를 보면서 이 task를 위해서는 어떤 구성이 가장 적합할지 고민하는 시간의 연속이었습니다. 그리고 그 결과물을 지금!!! 공개합니다.

​

​

손으로 그린 페이지들이 완벽하지는 않아도 제가 생각했던 정보와 아이디어는 대부분 담을 수 있을 거라 생각했지만, 오산이었습니다..!

널찍한 저 아이폰X 사이즈의 화면에 어지럽지 않고 직관적으로 와닿게 하기 위해 많은 것들을 고려해야 했습니다.

​

예를 들어, 정보 제시의 방법으로 카드형이 좋을지, 리스트형이 좋을지, 아니면 둘 다 가능하게 아이콘/버튼을 배치해야 할지.. 와 같은 것들 말이죠.

그리고 무엇보다 기존 따릉이 앱의 IA를 분해하여 유사한 내용으로 카테고리를 다시 묶는 과정(앞선 Wireframe 스케치에서 잘 해내야 했던)을 반복하는 중에 살짝! 머리가 띵하면서도 아주 도전의식이 팍팍 생겼습니다.

​

또, 은연중에 원래 따릉이 앱 화면의 정보 배치/구조를 따라가려는 저를 발견하고 그 틀에 얽매이지 않게 더 많은 디자인 샘플을 참고하며 개선할 점을 찾아나갔습니다.

​

이렇게 하여 약 50개의 화면이 adobe XD 상에 탄생하게 되었습니다.

다시 하나하나 뜯어보면 고치고 추가할 페이지와 기능이 많지만, 또 다음 단계에서 계속해 나가면 되겠죠??

그럼 다음 시간에 좀 더 업그레이드된 따릉이를 만날 수 있으면 좋겠습니다.