와이어프레임은 왜 만들까? 직접 그려보며 생각해보기
[코드스테이츠 PMB 10기 W4D4 와이어프레임, Figma]
요즘 새로운 프로덕트를 기획하며 구상한 화면의 와이어프레임을 그리고 있다. 시장 조사를 하기 위해 방대한 자료 속에서 허덕이다가 와이어프레임을 만드니 재미를 느끼지만 문득 생각이 든다. 왜, 기획자는 와이어프레임을 그려야 하는걸까? 여러가지 이유가 있겠지만 배운 것과 느낀 점을 토대로 말하자면 다음과 같이 정리할 수 있다.
정확히 소통하려고!
기획자가 구상하는 화면을 만약 글로만 적어서 개발자와 디자이너에게 넘긴다면, 그들은 기획자가 구상한 대로 만들어주지 못할 것이다. (아무리 친한 친구끼리 일을 해도 힘들 것..) "상단 우측에 알림 버튼 배치해주시고, 중앙쯤엔 카테고리 메뉴를 넣어주세요. 그리고 카테고리 밑에는 띠 배너를 넣어주세요." 라고 글로 쓰거나 말로 전달하는 대신 그림으로 보여주며 설명하는 편이 훨씬 정확하다.
빠르게 소통하려고!
그림에 비해 글로, 혹은 구두로 설명을 할 때는 시간이 좀 더 오래 걸린다. 기획자가 설명하는 시간도 오래걸리지만, 디자이너와 개발자가 이해하는데도 시간이 많이 소요된다. 단번에 알아보기 쉬운 와이어프레임은 빠른 전달과 빠른 이해를 돕는다.
피드백을 받기 위해!
와이어프레임을 그려보니 이 화면도 좋고, 저 화면도 좋았던 적이 한두번이 아니다. 그럴 때는 주변 지인들에게 두 프레임을 보여주며 어떤 것이 더 나은지 물어봤고, 명확한 피드백이 돌아왔다. 또, 디자이너와 개발자에게 '이게 가능한건지' 알기 위해서는 와이어프레임이 필요하다.
결국은 소통이다. 와이어프레임은 소통을 위한 도구인 것이다. 기획자의 머릿 속에 흩어져 있던 것들이 차곡차곡 정리되는 과정의 결과물이 와이어프레임이며, 관계자들과의 원활한 협업을 위해 꼭 필요하다. 이제 기존 서비스를 살펴보며 직접 와이어프레임을 그려보도록 하자.
나는 블로그를 운영하면서 맛집 체험단을 몇 번 경험해봤는데, 그래서인지 블로그의 맛집 글들은 광고가 아닌지 남보다 더 의심하며 읽게 된다. 체험단 글은 가이드 대로 작성을 해야하기 때문에 어느정도 냄새(?)가 나지만 티가 나지 않는 광고성 글들도 있어 전부 피해갈 수는 없다. 이렇게 나처럼 광고의 늪에 빠진 소비자들은 광고 없는 클린한 리뷰를 찾게 된 와중, 푸딘코라는 서비스가 떠오르기 시작했다.
광고 없는 맛집 후기, 푸딘코
F&B 스타트업 CNP컴퍼니의 자회사인 푸딘코(Food in Korea). 대한민국의 맛집을 찾아다니는 푸딘코는 맛집 지도를 제공하는 어플리케이션이다. 초기에는 인스타그램과 페이스북 페이지로 맛집 정보를 공유하며 약 80만 명의 구독자를 모았다. 현재는 맛집 지도 앱을 출시하여 5일 만에 5만 명 이상이 다운로드를 하는 실적을 거두었다. '저격수가 몇 명일까. 심장을 몇번 저격 당했는지 알 수 없다. 광주 봉선동에서 유럽을 경험했다.' 등의 위트있는 문구를 활용해, 일반적인 맛집 정보와는 달리 특색있으면서도 광고 없는 후기를 제공하여 큰 인기를 얻고 있다.
앞서 말했듯이 푸딘코는 광고가 없는 '내돈내산' 후기를 제공한다. 그렇기에 광고에 지친 유저들은 포털 사이트에서 맛집 검색을 하는 대신 푸딘코 앱에서 맛집을 검색하고 푸딘코의 인스타그램 계정을 팔로우한다. 앱 유저는 푸딘코에서 음식을 먹게 될 지역 혹은 먹고 싶은 음식을 검색하고 맛집 후기를 확인할 수 있다.
와이어프레임을 만들 땐, 유저스토리를 생각하자.
유저스토리(User Story)란 무수히 많은 고객의 요구사항 중에서 프로덕트의 실제 기능으로 개발될 요구사항을 정리한 것이다. 프로덕트 팀의 '공유된 이해'를 만들기 위해 작성한다. 즉, 팀원 모두가 고객이 해당 요구사항을 갖게 된 배경을 이해하고, 동일한 결과물을 떠올리게 만드는 것이다.
푸딘코의 유저스토리를 아래와 같이 예상해봤다.
'식(食)'을 중요하게 여기는 유저는 이번 주말에 친구와 함께 갈 서울 종로구 지역의 '진짜 맛집'을 찾기 위해 푸딘코를 사용한다.
유저스토리를 해결하기 위한 화면 흐름을 종이에 그려 보자.
푸딘코의 핵심 기능을 지닌 화면 흐름은 위와 같다.
1) 검색 버튼을 클릭한다.
2) 지역명 입력 후 하단에서 정확한 지역을 클릭한다.
3) 목록보기를 클릭한다.
4) 맛집 리스트 중 원하는 맛집을 클릭한다.
5) 맛집의 정보를 확인한다.
Figma 로 화면의 Wireframe을 디자인해보자.
디자인 툴은 Sketch, Adobe XD, Figma, Zeplin, ProtoPie 등 다양하다. 그중에서도 Figma를 활용하여 와이어프레임을 그렸다. 최근 스타트업에서 많이 활용하고 있다고 하여 해당 툴을 사용했다. 아래의 페이지에서 가입 후 다운로드가 가능하다. (참고로 포토샵을 사용할 줄 알면 이 툴은 더 편하다.)
푸딘코의 와이어프레임을 그려보는 과정에서 푸딘코는 일반 맛집 앱이 아닌 '맛집 지도 앱'이기에 지도를 중심으로 서비스를 제공한다는 점을 알 수 있었다. 그리고 문제를 해결하는 해당 플로우에서는 불편함이 거의 없었다. 다만 마음에 드는 맛집 콘텐츠를 저장을 한 후 지역별/음식별로 분류를 할 수 있는 기능은 없어서 해당 부분이 아쉬웠다.
앞서 와이어프레임을 그리면 소통이 원활해진다고 말했다. 이와 더불어 유저가 느끼는 pain point를 파악할 수 있으며 디자인에 가려졌던 기능의 유용성 등을 파악할 수 있다. 푸딘코의 와이어프레임을 그리고 화면 플로우까지 파악하며 불편한 UX를 파악한 것처럼 말이다.
