맥딜리버리 와이어프레임 제작해보기(Figma, Wireframe)

 

Figma를 활용해 Wireframe 만들어 보기

1. 앱 서비스 선택 및 태스크 1가지 선정

이번 과제에서 내가 선택한 애플리케이션은 '맥딜리버리'이다. 이름에서도 알 수 있듯이, 맥딜리버리는 맥도날드 공식 배달 앱으로써 집에서도 맥도날드 메뉴를 즐길 수 있게 배달 주문 서비스를 제공하는 애플리케이션이다. 맥딜리버리 서비스는 2007년에 시작됐지만, 애플리케이션은 2014년에 출시되었다. 전화 주문이 더 선호되고 배달 앱이 주류로 완전 잡히기 전부터 서비스하여 배달 서비스의 큰 선배 격으로 볼 수 있겠다. 과제에서 선정한 이유는 과제를 시작하기 전에 갑자기 쿼터파운드 버거가 너무 먹고 싶어서 어플로 주문하려다가 그냥 이걸로 와이어프레임을 만들어봐야겠다 생각해서 선정하게 되었다. 앱 내에서 수행할 수 있는 많은 Task 중 '메뉴 장바구니에 담기'라는 Task를 선정하여 스토리보드를 포함한 Mid-Fi Wireframe을 제작하여 보겠다.

 

2. 태스크가 해결하는 문제 정의 및 User Story 작성

맥도날드 공식 배달 앱, 맥도날드 맥딜리버리
더 쉽고, 더 빠르게~ 맥도날드를 만나 보세요!
터치 몇 번으로 내가 좋아하는 맥도날드 메뉴를 바로 배달!

원하는 메뉴 가격 확인은 물론, 앱 내에서 바로 주문까지~
기존 맥딜리버리 회원이라면 별도의 가입 절차 없이, 바로 주문 가능!
-앱 스토어 애플리케이션 소개 문구

너무 당연한 말이지만 맥딜리버리가 Task를 통해 해결하는 문제는 '매장에 가지 않고도 집에서 맥도날드 버거를 먹는 것을 원하는 사용자'의 요구를 만족시키기 위함이다. 요즘 배달의 민족으로 맥도날드 주문도 되고 안 되는게 없는데 왜 맥딜리버리를 이용하냐? 라고 물어본다면.. 나는 배달의 민족을 사용하기 전부터 맥딜리버리를 이용하여 UI가 굉장히 익숙하고, 잘 되는 자체 서비스 대신 굳이 배달의 민족을 이용할 이유도 없기 때문이다. 맥도날드를 좋아해서 그냥 맥딜리버리 쓰자~ 하는 것도 있다.

집에서도 햄버거를 즐길 수 있지롱

 

유저 스토리
WHO : 맥도날드 매장에 갈 시간이나 상황이 안되는 사람
WHY : 맥도날드 버거를 먹고 배를 채우기 위해
WHAT : 간단한 절차로 맥도날드 버거를 배달받고 싶다

 

3. User Story를 해결하기 위한 간단한 Flow 파악

실제 애플리케이션이 어떤 Flow로 메뉴를 선택하고 장바구니에 담는 것까지 진행되는지 파악해 보겠다. 유저 스토리를 해결하기 위한 핵심 기능은 4번의 디스크립션에 상세하게 설명하였으므로 참고하면 좋겠다.

 

4. Mid-Fi 와이어프레임 디자인 및 디스크립션을 포함한 스토리보드 설계

---

사실 솔직한 마음으로 맥딜리버리 어플 간단한데 해볼까? 라는 마음이 주제로 선정한 주 이유였는데.. 과제를 해보면서 단순해 보이는 애플리케이션 내에도 화면 하나를 구현하기 위해 다양한 요소가 있고, 상호 인터랙션을 잘 고려해야 하는구나.. 사용자가 UI를 쉽게 사용할 수 있도록 만드는 것은 생각보다 어려운 일이구나를 느꼈다. 오늘 과제를 기반으로 피그마 활용 능력을 더 갖춰서 위클리 과제에서 완성도 있는 Hi-fi한 와이어프레임을 만들어야겠다고 다짐했다.

 

[코드스테이츠 PMB 11기_W4D4]