RIDI에 제안하는 MVP '탐색 탭' 구체화하기 | 코드스테이츠 PMB 13기 4주차 위클리

 📃 목차

1.   이전 주차 MVP 수정 후 기능 정의하기  
2.   탐색 탭 정보구조도(IA) 작성하기  
3.   추가로 만들어본 유저 플로우 차트  
4.   화면 디자인(와이어프레임)  
5.   스토리보드(기능명세서) - 추후 첨부 예정

 

---

 

  1. 이전 주차 MVP 수정 후 기능 정의하기  

이번주 과제는 다른 때와 달리 원활하게 진행되지 못했다.
MVP에서 강조하고픈 성격이었던  '커뮤니티 기능'에 집착했기 때문이었다.
토요일 저녁에 원본을 갈아엎기 전까지는 피드백에 따라 나름대로 기능을 간소화하고자
'키워드를 기반으로 맞춤형 환경을 설정하고 피드에 노출되는 콘텐츠는 키워드와 관련된 유저들의 데이터를 기반으로 구성하자'
는 결론을 내리고 종이에다 와이어프레임을 그려보았다.

하지만 계속 막혔다.
계속 머리를 싸매다 막히는 원인이 '팔로잉 기능을 구현하고 싶다'는 욕심 때문이라는 것을 깨달았다.
팔로잉 기능 때문에 무수히 많은 부가적인 기능들이 요구되고 있었다.
MVP의 핵심 기능을 골라내지 못하고 있음을 깨달은 후에는 이를 고쳐보고자
리스트로 정리해 MVP에 필요한 최소한의 기능이 무엇인지 찾아보았다.

 

 

리스트로 정리해보니 정말 많은 기능을 구현하고 싶어했다는 것이 눈에 보였다.

 

Note

 

표로 정리한 전후 차이를 아래 포스트잇으로 정리해보았다.

 

 

---

 

  2. 탐색 탭 정보구조도(IA) 작성하기  

처음에는 막막해서 손을 놓고 있다가 다른 동기분들이 한 결과물들을 참고해 작성해보았다.
기능이라는 것이 버튼에 대한 내용만 추가하는 것인지, 아니면 사용자 눈에 보이는 모든 부분들에 대해 언급하는 것인지 헷갈렸다.
그래서 일단은 화면에 보이는 모든 요소에 대한 설명을 넣었다.
한 눈에 보기 쉽게 하고 싶었는데 생각보다 쉽지 않았다. 

 

 

자세한 내용은 아래 링크를 클릭해서 확인할 수 있습니다.

 

위클리 과제_ 기능 정의 및 우선순위 설정

 

 

❓ 멘토님께 질문드립니다

이번주 과제는 백로그 작성, IA 설계, 화면디자인, 스토리보드로 이루어져 있습니다. 
이것들 간의 작성 순서(우선순위)가 있을까요?
저는 이미지화하기 전에 문서로 기능을 정의하고 구조를 설계하는 게 어렵게 느껴져서
머릿속으로 대략적인 흐름을 구상해놓고 와이어프레임을 가장 먼저 작성했습니다.
이미지를 만들면서 '여기에는 이 기능이 필요하겠다'를 떠올리는 식으로 작업했습니다.
이 방법이 적절한 것 같지는 않는데, 어떤 순서로 접근하면 좋을 지 모르겠습니다.
와이어프레임을 만들고 나서 백로그, IA 문서를 작성해도 괜찮을까요? 

 

📢  아래 이미지들에 대한 피그마 보기 전용 파일입니다.  
https://www.figma.com/file/PwKNZhIwNONgYPExFLpO1z/RIDI-weekly?node-id=5%3A3089

 

  3. 추가로 만들어본 유저 플로우 차트  

금요일에 유저 저니를 생각하며 만들어본 플로우 차트다.
피그마 주요 기능에 익숙해지기 위해서 만든 것도 있지만
MVP의 흐름이 펜으로 그려보려고 하면 이상하게 자꾸 막혀서 이를 해결하기 위해 만들어보았다.
결과물을 살펴보니 하나의 행동을 이끌어내기 위해 생각보다 많은 절차를 사용자에게 요구하고 있다는 느낌이 들었다.
간결한 플로우를 짜는 게 생각보다 매우 어렵다고 느꼈다.

 

클릭하면 확대해서 볼 수 있습니다

 

---

 

  4. 화면 디자인 (와이어프레임)  

화면 디자인을 하면서 기능을 생각하고 화면 간의 관계를 정리할 수 있었다.
화살표는 세 가지 색상으로 구분해 두었다.
핑크색은 리디 메인 화면에서 탐색 탭의 세 가지 종류의 화면(랭킹, 리뷰, 취향 설정)으로 이동하기까지의 흐름을 나타내고
민트색은 '나의 취향 설정하기'에서의 흐름을 나타낸다.
보라색 화살표는 각각의 화면에서 최종적으로 작품 감상까지 이어지는 과정을 나타낸다.
유저는 탐색 탭에서 어떤 활동을 하던지 간에 결국에는 작품을 열람하는 행동으로 이어진다. 

 

 

 

 

---

 

  5. 스토리보드 (기능명세서) 생성하기  
  (추후 첨부 예정)  

IA와 결이 다르게 잘 모르겠는 부분이 스토리보드였다.
화면의 각 구성요소가 어떤 기능을 하고 어떤 행동으로 이어져야 하는지를 명시해놓는 파일이라고 알고있는데
어떻게 해야 간결하게 표현할 수 있을지가 너무 막막했다.
첫 페이지에 대해 작업을 하다가  '엉터리인 방식으로 끝까지 작업하면 시간과 체력의 낭비다'라고 생각해서
일단 뒤의 화면에 대해서는 만들지 않았다. 사실 제작할 시간 여유도 없었다.

 

❓ 멘토님께 질문드립니다

적어놓고 나니 너무 막연한 질문이네요.. 🥲🥺
스토리보드에는 어느 정도까지 상세하게 정보를 기록해야 하는 게 적절할까요?
화면 내 모든 요소들에 대해 넘버링을 하고 내용을 적어야 할까요?
심지어 저는 넘버링 하는 기준도 잘 모르겠습니다.
통용되는 넘버링 기준이 있는지, 아니면 사람마다 자신만의 기준으로 작성하는 것인지 궁금합니다.
타인이 직관적으로 이해할 수 있거나 따라갈 수 있는 내용이라면 임의로 넘버링을 해도 괜찮을까요?

 

클릭하면 확대해서 볼 수 있습니다