삐요로그의 UX는 왜 편할까? - (2)
Wireframe 직접 그려보기
지난 글에서 '분유 수유를 기록하고 확인한다'라는 유저 테스크를 수행하기 위한 삐요로그의 유저플로우를 그려보았는데요. 이번엔 화면을 한번 뜯어보면서 UX를 확인해 보았습니다.
이전 글 - 삐요로그 UX는 왜 편할까? - (1) User story와 User flow를 확인해보자
Wireframe
와이어프레임은 말 그대로 틀, 골격 정도로 생각할 수 있습니다. 제품을 구성하는 화면(레이아웃 등)의 골격을 간단한 모양으로 구현한 것입니다. 간단하게 화면의 있는 사용자인터페이스를 시각적으로 구성한 것이죠. 화면이나 페이지의 구성과 콘텐츠, 기능, 작동 방식 등을 설명하는 데 사용됩니다.
와이어프레임은 Lo-fi, Mid-fi, High-fi로도 구분이 가능합니다.
Lo-Fi Wireframe은 간단하게 손으로 스케치하듯 슥슥 그려놓은 듯한 와이어프레임을 말합니다. 종이에 슥슥 그리기 때문에 아주 간단하게 작성할 수 있고 수정 절차도 없다시피 합니다. 논의 도중에도 작성이 가능할 정도여서 저는 간단하게 팀원들과 아이디어 회의를 위해 작성하곤 합니다.
Mid-Fi Wireframe은 레이아웃과 배치, 폰트, 요소의 크기 정렬을 정돈한 수준을 말합니다. 구성요소와 핵심 기능 같은 중요한 요소를 정확히 표현합니다.
High-Fi Wireframe의 경우는 그래픽까지 구현한 완성의 가까운 수준으로 보이는 이미지가 됩니다. 이는 정말 프로덕트를 만들기 전 최종적으로 체크하는 수준이 됩니다. 여기서 더 이상 오류가 없다면 제품개발에 들어가게 됩니다.
삐요로그의 와이어프레임을 그려보면 화면의 구성과 요소, 작동 방식을 확인할 수 있을 거라고 생각해 Lo-Fi 와이어프레임을 그려보았습니다.
단순히 유저플로우를 보았을 때는 잘 와닿지 않았는데, 실제로 와이어를 그리면 화면의 요소를 확인하니 UI의 배치와 그래프가 보이네요. UI의 배치를 통해 유저가 기록을 할 때 한 손으로도 조작이 가능하도록 설계되어 있다는 걸 알게 되었습니다. 또 정리표는 단순한 숫자가 아니라 알맞은 그래프의 사용으로 기록 내용이 한눈에 보이게 되어있네요. 주간 패턴을 통해 요즘의 아이 상태를 확인할 수 있습니다. 삐요로그의 사용이 편리했던 이유를 찾은 듯합니다.
기록 화면의 우측 시간바에 점으로도 하루의 패턴을 확인하게 해준 점이 UX 적으로 훌륭한 선택이었다고 생각합니다. 주간 통계까지 가지 않아도 오늘의 패턴을 확인할 수 있으니까요.
아쉬운 점은 한 손으로 조작하다 보니 화면 전반을 스와이프/풀스크린 터치/드래그 하는 동작이 많이 쓰였는데, 동작의 수는 줄였지만 스와이프와 드래그가 유저에게 혼란을 줄 수 있을 것 같아요. 상호작용 방식에서 스와이프 방향을 조금 더 직관적으로 바꾸면 어떨까 하는 생각이 들었습니다. UX 법칙 중 제이콥의 법칙에 따르면 좋았을 듯해요. 그럼 유저는 동작 실패가 줄어들 겁니다.
+
와이어프레임을 살펴본 김에 Mid-Fi Wireframe으로 발전시켜보았습니다.
툴 같은 경우 평소에는 Sketch나 XD를 주로 사용하고 있지만, 요즘 핫하게 떠오르는 Figma에 한번 도전해 보았어요. XD와 UX가 비슷해서 적응은 쉬웠는데, 안 쓰던 툴을 쓰려니 시간이 1.5배는 걸린 듯합니다. 확실히 무료라는 장점이 있는 툴이었어요.
Figma로 만들어본 삐요로그의 Mid-Fi 와이어프레임. 디자인엔 소질이 없지만, 개발자와 소통하기 위해 Mid-Fi에 공을 들이는 편입니다.