TIL: 20220310

😎 Today I Learned!

마지막 프로젝트가 시작되면서 주제를 3번 크게 뒤엎고 새로운 마음으로 다시 S.A를 함께 작성해보았다. 이번 프로젝트 S.A는 사업계획서처럼 또는 우리의 서비스를 사용할 타겟유저가 사용하고 싶은 마음이 들도록 하는 것이 목적이다! S.A의 내용으로 앞으로 github의 read.me를 채워나가면 될 것 같다.

---

* User Flow 작성

:사용자가 서비스에 접근하는 방법, 단계를 정리한 차트

예전부터 behance, pinterest등 ui, ux관련 작업물을 보면서 꼭 언젠가 user flow차트를 만들어보고 싶다고 생각했는데, 

우리 서비스의 타겟유저가 두 그룹이다보니 단계별로 꼼꼼히 체크해나갈 필요가 있었다. 이번에는 figma도 제대로 활용해보자라는 마음으로 먼저 figma작성을 하고 팀원들과 공유했다. 실제로 회의하면서 계속 고쳐나가고 문제점도 많이 발견할 수 있었다. 특히 기존에 사용하던 디자인파일이 아니라 figjam을 활용해서 간단하게 도형과 텍스트로 채워나갈 수 있어 간편하고 활용하기에 너무 좋았다. 실시간으로 팀원들과 같은 화면을 보며 고쳐나갈 수 있어서 제대로 활용해나갔다. 

user flow에서는 페이지별로 작성하기 보다는 접근방법, 단계에 대한 설명이기에 어느단에서 페이지가 필요한지 표시해나갔고, 선순위, 후순위 기능구현에 대한 우선순위도 정리해나갔다. 의견이 갈릴때에는 귀여운 스티커를 활용해 마음에 드는 의견에 붙여주고, 이미지도 쉽게 복사 붙여넣기 하며 참고자료도 넣을 수 있어서 figjam 매력에 푹 빠져버렸다.

---

* Wireframe

:페이지에 어떤 요소들이 배치되는지 구체적으로 작성하는 단계

와이어프레임도 정말 심플하면서도 구체적으로 그리고 다른사람이 보아도 이해할 수 있는 깔끔한 디자인을 넣고 싶었다. 기존에는 Figma자체에 대해 다루기 조금 어려워서(독학으로 해야하기 때문에 시간이 조금 걸렸다.) 기존 프로젝트때마다 아쉬움이 가득했는데, 이번 프로젝트에서는 나 스스로 직접 피그마를 정리해보겠다고 선언했다. 

와이어프레임 작성에 참고했던 예시이미지

 

우선 팀원들이 각자 생각했던 페이지를 나누어서 작업을 했고, 예쁜 것, 크기 모두 신경쓰지 않고 기능에 집중해서 작성을 해나갔다. 개인적으로 보기좋은 모습은 아니지만 어떤 기능이 있고 구현되어야하는지 볼 수 있다. 

 

팀원들이 함께 작성한 페이지를 바탕으로 없앨 요소는 없애고 빠진 부분은 채워나가며 페이지를 정리하다보니 빠진 기능 또는 페이지에 대해서 논의할 것이 생겼고, 이렇게 와이어프레임을 작업하니 문제점을 프로젝트 시작전에 발견할 수 있는 경험을 하게되었다. (페이지마다 넘어가는 단계가 매끄럽지 않았음.)

또한 튜터님과의 미팅에 잘 짜여있는 유저플로우와 와이어프레임을 통해 설명하고 서로 이해할 수 있는 자료가 되어 원활한 소통이 가능했고, 또 다른 문제점들을 찾아낼 수 있었다. (우리가 생각하지 못했던 DB모델이 더 있었다.)

 

오늘은 전반적으로 팀 플젝 주제에 대한 정리를 했고, 튜터님 피드백을 통해 조금 더 보완할 곳이 있는지 더욱 꼼꼼하게 살펴보아야한다. 내 자신이 직접 유저가 되어 한 단계, 한 단계 어떻게 접근하는지에 대해서 생각해보면 답이 나올 것이다.