밀리의 서재, 세 번째 이야기
[코드스테이츠 PMB 9기] WEEKLY PROJECT 03
한 손에 잡히는 책의 마을
[蜜里]
지난 시간, 밀리의 서재를 사용하고 있는 사용자의 인터뷰를 토대로 아쉬운 UX를 도출해냈다. 여기서 문제를 정의하고, 이를 해결하기 위한 최소한의 기능을 나름대로 제시해 보았다. 이번 시간에는 이 제시된 MVP를 차근차근 구체화시키는 작업을 진행했다. 다음은 MVP를 구체화하는 과정에 대한 기록이다.
1. 이러한 것을 만들고 싶다.
아무래도 사람들이 앱에 더 오래 머무르면서 서비스를 즐기도록 하고 싶다. 즐거움도 느끼고, 좋은 책을 '발견'하는 재미도 느끼도록. 이를 위해서 책장을 꾸미고, 다른 사람의 서재를 방문할 수 있게 서비스를 개선해보자. 그렇게 하면 서비스에 머무는 시간도 더 길어지고, 다른 사람들이 읽던 책 속에서 우연히 좋은 책을 발견할 수도 있을 것 같다.
2. 그러기 위해서는 어떤 기능이 필요할까?
'책장을 꾸미고, 다른 사람들의 서재를 구경할 수 있으면 좋겠다'
그렇다면 여기에는 어떤 기능이 필요할까?
먼저 간단히 생각해보면, 책장을 꾸미기 위해서는 다양한 꾸미기 아이템이 필요하다. 아이템을 밀리의 서재에서 만들어 판매한다면, 아이템을 구매할 수 있는 기능과 구매한 아이템을 보관할 수 있는 보관 기능도 필요하다. 다른 사람의 서재를 구경할 수 있게 하려면, 사람들의 서재를 인스타그램 피드처럼 제시하고, 마음에 드는 서재를 방문해서 둘러볼 수 있는 기능이 필요할 것이다.
이걸 조금 더 구체적으로 정리하자면, 아래의 표와 같다.
중요도를 1과 2로 구분해, 1의 기능을 우선적으로 고려해 만든다.
크게 '서재 꾸미기'와 '서재 탐방' 기능이 있고, 서재 꾸미기에는 '밀리상점'과 '내 보관함' 기능이 들어간다. 상점에서 아이템을 구매하고, 구매한 아이템을 내 보관함에 보관한다. 서재 탐방에는 팔로우하는 서재를 모아 볼 수 있는 기능과 밀리의 서재 이용자들 전체의 서재를 볼 수 있는 기능 둘로 나뉜다. 큰 뼈대는 이렇게 진행이 되고, 각각의 큰 기능들 아래에 세부적인 기능이 들어간다.
3. IA를 그려 시스템의 구조를 확인하자.
그 후 IA, 즉 정보계층구조도를 그렸다. 시스템의 구조를 알 수 있으니 정의한 기능이 어떤 플로우로 어디까지 연결이 될 수 있는지 확인이 가능하다.
4. 와이어프레임(Lo-Fi)
요구 사항을 확인하고, 요구 사항을 실현하기 위한 기능들에 대해서도 정의했으니, 이제 와이어프레임을 그려 우리가 만들어야 할 서비스의 실체를 나타내볼 시간이다. 와이어프레임은 lo-fi 수준으로, 이 서비스가 어떤 기능을 어떻게 제공할지 간단하게 종이에 손으로 그림을 그려 구체화시켰다.
(지금은 혼자 기획해보는 연습을 하느라, 이게 개발이 가능할지, 디자인적으로도 괜찮을지 전혀 알 수 없는 상태에서 그린 그림으로 끝났지만, 실무에서는 아마 이렇게 종이에 그려가면서 수정하고, 토론하고, 다시 그 위에 수정하고, 지우고 다시 그리면서 틀을 짜나가겠지. 처음에는 어차피 피그마로 다시 그릴 거, 왜 종이에 그려야하는지 이해할 수가 없었는데, 이건 내가 혼자서 모든 과정을 처리하기 때문이었다. 어차피 내 머릿속에서 나온 것이니 lo-fi로 그린 그림 그대로 피그마에서 그려질 것이었기 때문에. 하지만, 팀에서 이 프로덕트를 이렇게 구체화시키는 것이 가능한지 등에 대해 회의를 하다보면 피그마로 처음부터 작성하고 계속해서 수정하는 것보다는 종이에 대충 그려가며 수정하는 것이 간단하고 편할 수 있겠다는 생각이 들었다. 그렇게 해서 협의가 된 사항을 최종적으로 피그마로 만들어 각각의 기능에 대한 설명을 덧붙여 개발자와 디자이너에게 공유하고 서비스 개발을 시작하는거겠지. 아직도 갈 길이 멀다:)...)
5. 피그마를 사용해 조금 더 발전을..!
먼저, 앞서 손으로 그린 와이어프레임을 피그마로 정리한다.
각각의 화면을 만들고, 각 화면에 위치한 기능이 어떤 흐름을 가지는지 선으로 표시했다. 이제 각각의 기능들이 어떤 역할을 수행해야 하는지 설명이 필요하다. 내 머릿속에 있었던 그림을 구체화시켰으니 이제 어떤 버튼이 어떤 기능을 수행해야 하는지 개발자, 디자이너와 공유를 해야 한다. 이는 스토리보드를 통해서 공유가 가능하다.
스토리보드에는 각 화면에 있는 버튼을 누르면 어떤 기능들이 어떻게 동작해야하는지, 어떤 페이지로 넘어가야하는지, 어떤 정책이 적용되어야하는지 등이 모두 담겨있다. 이 페이지를 보고 이제 프로그램을 개발하고, 디자인을 입히게 되는 것이다.
오늘은 단 몇 줄로 처음 시작된 MVP의 모양이 드러나는 날이었다. 문제 해결을 위해 어떤 서비스를 만들어야 하는지, 그 서비스를 만들기 위해서는 어떤 기능이 필요한지 정리했다. 단순히 '서재를 꾸미게 하자'라는 간단한 해결책을 제시했을 때와 그것을 실현하기 위해 세부적인 기능을 생각하는 일은 머릿속에 자리잡고 있던 것들이 간단히 튀어나올 것 같으면서도 쉽지가 않았다. 와이어프레임을 그릴 때도 각각의 기능들의 배치를 어떻게 해야할지 고민하는 시간이 필요했다. 서비스를 사용하던 입장에서 직접 생산하는 입장이 되니, 그동안 생각 없이 편하게 쓰고 있었던 기능들과 서비스가 누군가의 세심한 고민과 배려에서 나온 것이라는 생각을 하게 되었다. 오늘 만든 기능정의서와 와이어프레임, 스토리보드는 아직 한참 발전해야 하는 모양이지만, 그 첫 삽을 뜨면서 많은 것을 깨닫고, 여기서부터 시작이라는 생각이 들었다.
다음에 조금 더 발전된 작업물로 다시 이 페이지를 수정할 수 있기를!
