병원 예약앱 똑닥의 와이어프레임 피그마로 뚝딱 제작
[코드스테이츠 PMB 13기] Figma로 Wireframe 만들기
들어가며
몸이 아플 때 아픈 것도 서러운데 병원에서 기약 없이 대기한다면? 이보다 서러울 수는 없다. 똑닥은 진료 예약과 당일 진료 접수 서비스를 제공하는 병원 예약 앱이다. 병원 예약 앱은 굿닥, 똑닥, 닥터나우가 3파전을 벌이고 있다. 사실상 병원에서 어떤 예약 앱을 이용하는 가에 따라 사용자도 따라가게 되는 구조이지만, 똑닥은 진료비 결제 기능 추가, 실손보험 간편 청구 서비스를 시작하는 등 본인의 길을 개척해 나가고 있다. 코드스테이츠 PMB 13기 W4D4 과제, 피그마로 똑닥의 와이어프레임을 만들어 보았다.
W4D4. 와이어프레임(Wireframe)
Figma를 활용해 Wireframe 만들어 보기
오늘의 프로덕트
: 똑닥
1. 앱 서비스를 하나 선택해, 해당 앱에서 태스크(유저가 서비스에서 수행하길 원하는 과제)를 1가지를 선정합니다. 해당 태스크가 사용자의 어떤 문제를 해결하는지 정의하고 이에 대한 User Story를 작성해 봅니다.
1) 앱 서비스 선정
- 병원 예약 및 접수를 할 수 있는 똑닥을 선정했다.
2) 해당 앱의 태스크
- 똑닥 앱의 태스크 1가지는 '병원 당일 접수'로 선정했다.
3) 사용자 문제 해결
- 해당 태스크는 병원 진료가 필요한 사람이 병원에 가기 전에 줄을 설 수 있게 한다. 또는, 대기시간이 너무 길다고 나오면 1순위로 가려던 A병원 대신 대기 순서가 적은 2순위 B병원으로 갈 수도 있다. 무작정 병원으로 가서 진찰 순서를 무기한 기다려야 하는 문제점을 해결해준다.
4) 유저 스토리(User Story)
- 유저 스토리는 쉽게 말하면 [누구는 / 이것을 원한다 / 무엇을 위해]라고 한다.
- 똑닥의 유저 스토리를 다음과 같이 생각해 보았다.
아픈 사람은
아픔을 해결하기 위해서
빨리 진찰받기를 원한다
- 똑닥은 병원 당일 접수 서비스를 통해 아픈 사람이 진찰 순서를 무기한 기다리지 않고 빠르고 원활하게 진찰을 받을 수 있도록 한다.(문제점 해결)
2. User Story를 해결하기 위한 핵심 기능과 Flow를 파악하고, 화면 흐름을 종이에 간단히 그려 봅니다.(Lo-Fi)
- 똑닥 Lo-Fi 와이어프레임(페이퍼 프로토타입)을 그려보았다.
- 똑닥 메인 페이지에 접속해 OO정형외과의원에 당일 바로 접수를 하는 흐름(Flow)이다.
3. Figma를 통해 위에서 구성한 화면의 와이어프레임(Wireframe)을 디자인합니다.(Mid-Fi 목표, High-Fi면 �)
- 와이어프레임에 앞서 피그마를 먼저 소개하자면, 피그마는 유저 인터페이스(UI) 디자인에 최적화된 툴이다. 피그마는 별도 설치 없이 온라인에서 사용할 수 있는 클라우드 기반 프로그램으로, UI 작업을 하면서 댓글을 달 수 있는 등 커뮤니케이션에 특화된 툴이라고 한다. 기존 스케치, 어도비XD 유저가 피그마로 넘어가는 추세라고 한다.
- 피그마로 똑닥의 Mid-Fi 와이어프레임을 디자인해보았다.
- 피그마는 처음 사용해봤는데 수업 중 제작 샘플이 제공되어 비교적 수월하게 작업할 수 있었다.(수월하게 작업했다고 해서 빨리 했다는 건 아니다, 피그마 단축키도 모르고 디자인 작업이 자잘하게 손이 많이 가기 때문에) 포토샵을 오랫동안 사용해 온 게 도움이 되었다.
- 피그마를 거치니 제법 진짜 앱 화면처럼 보인다. 기존에 있는 서비스를 따라 그렸지만 다 그리고 나니 제법 만족스럽다(제법 앱 같음)
- 아래는 실제 앱 스크린샷(상단)과 직접 제작한 피그마 와이어프레임(하단)을 비교한 것이다. 최대한 구현하기 위해 노력했으나 미흡한 부분이 있을지도!
마치며
포토샵을 오랫동안 사용해 온 사람으로서 피그마는 정말 가벼운 프로그램이었다. 그래서 이 프로그램을 왜 쓰는지 알 것 같았다.(포토샵으로 했다간 몇 번이고 멈췄을지도 모르는 작업이었다, 그러면 시간이 1.5배는 더 들었겠지)
과제에서는 미드 파이로 작성한 경우 디스크립션을 추가해서 스토리보드로 작성하면 더 좋다고 했는데, 우선 기본 와이어프레임만 완성해보았다.^^
과거 구글 docs를 보고 우와! 했다가 미리캔버스를 보고 우와 대박! 했는데 사용자가 사용하기 쉽도록 점점 더 편한 프로덕트가 등장하는 것 같다는 생각이 든다. 이것이 다 사용자 경험(UX)을 충족시키려는 노력에서 나오는 거겠지!
