The Rich UX 개선 / 개발하기
[코드스테이츠 PMB 09기]
https://brunch.co.kr/@c356ff2cf5a2403/13
지난번 작성한 글에 이어서 조금 더 MVP를 디벨롭시켜 화면 설계서까지 작성해보는 시간을 가지려고 한다.
저번에 설정한 MVP는 배당금에 Tax를 나누어 설정하여 보다 정확한 포트폴리오를 만드는 것이었다.
문제 : 배당금 포트폴리오가 정확하지 않다 -> 세금 계산의 오류
기능 정의를 하기에 앞서 문제 해결을 위해 서비스를 사용하는 과정을 시나리오로 작성하여 어떠한 기능들이 필요한지 알아보려 한다.
시나리오 : 직장인이 배당주로 포트폴리오를 만들고 있다. 여러 가지 종류의 계좌를 사용해서 세금이 달라 총배당금을 쉽게 계산하기 어려웠으나 서비스 내에 개별 포트폴리오로 나누어 세금을 다르게 매기는 것으로 한눈에 배당금을 확인할 수 있었고 세금 전도 손쉽게 확인할 수 있었으며 내 배당주의 배당금을 손쉽게 세금 전, 세금 후를 확실히 알 수 있었다.
시나리오 별 기능위의 표와 같이 기능을 정의하였으면 이 기능들을 유사한 기능끼리 그룹핑하고 기능들과 그룹 간의 중요도를 정해야 한다.
그룹핑 및 기능 추가 설명직관적으로 보이는 것도 중요하지만 일단 첫 번째로는 세금 적용이 먼저 되어야 한다고 판단했기에 포트폴리오 별로 나누어 적용되는 것을 최우선 순위로 설정하였다. 그 이후에는 tax를 설정하는 기능이 어디에 있는지 가이드를 제공해야 신규 고객들도 어려움 없이 이용할 수 있기에 2순위로 설정하였고 디자인 관련된 사항은 이미 정확하게 세금이 몇 %로 적용되고 있는지 까지는 보여주지 않지만 세금이 적용된 배당금인지 적용되지 않은 배당금인지는 지금도 확인할 수 있기에 마지막 순위로 설정하였다.
이 서비스들을 추가 및 개선하기 위해서는 각각의 서비스들이 어디에 위치해 있는지 먼저 확인을 해야 한다. 그러므로 정보구조도를 설계해보고 확인해보자.
표시한 부분에 현재 이야기하고 있는 기능이 위치해 있다. 화면 디자인 (Wireframe)
위의 개선하고 싶은 서비스들의 위치를 확인하였으면 와이어프레임을 만들어보려고 한다.
가이드를 제시하는 것을 제외한 설정에 들어가서 포트폴리오 별로 따로 Tax를 설정하고 포트폴리오에서 한눈에 세금 %를 확인하고 세금 전 / 후를 한눈에 확인할 수 있는 플로우를 1차 와이어 프레임으로 그렸다.
1차 와이어 프레임1차로 그렸으면 Figma를 통해 조금 더 현실적으로 와이어프레임을 작성해보자.
Figma로 그린 와이어프레임이렇게 작성해보았는데 아직 분류하는 것에 대하여 어려움을 많이 겪는 것 같고 기준도 명확하지 않은 것 같아서 제대로 했는지 의문이 들었다. Figma를 사용하는 것에 대해서 아직 익숙하지 않아 만드는 시간이 오래 걸리기도 하고 중간에 사라지기도 해서 굉장히 속상했는데 그래도 새로운 툴 사용법을 배운다는 점에서 재미있게 진행할 수 있었던 것 같다.
