[졸과] 피그마로 디자인하는 중..

배경

 서비스의 기획은 지난주에 확정되었고, 이제 본격적인 디자인 및 개발 단계에 들어섰다. 디자인이라곤 평생 해본 적도 없지만, 졸업과제에서 내가 프론트엔드 개발자를 맡은 만큼 내가 해야 했다. 그래도 바로 디자인에 들어가는 것보다는 어느 정도 와이어프레임을 확립해두고 시작하면 좋을 것 같았다.

 

 내가 사용한 툴은 다음과 같다.

• Excalidraw with Obsidian: 와이어프레임 및 플로우차트, 마인트맵을 그리기 좋은 툴이다. 키보드와 트랙패트 만으로 그리는 중인데, 기능이 정말 필요한 기능만 있어서 심플하다. 특히 졸업과제 도중 서로의 생각이 달라지는 지점이 있을 때마다 그림으로 그려가면서 서로의 생각의 동기화시키는 데에 잘 써먹었다. Figma로 본격적인 디자인에 앞서 간단한 와이어프레임을 그리는 데에 사용했다.
• Figma: 명실상부 제일 유명한 디자인 툴이다. 와이어프레임 작성이 끝난 이후 디테일한 디자인을 그리기 위해 사용 중이다.

 

 

Excalidraw

 

지갑 와이어프레임

 

서비스 1차 와이어프레임

• 디자인 같은 거 전혀없이 정말 간단하게 UI들이 어떤 식으로 상호작용하고 플로우가 어떻게 흘러가는지를 그렸다.

 

서비스 2차 와이어프레임

• 적당한 디테일을 추가해서 와이어프레임을 작성했다.
• 분기마다 달라지는 플로우를 상세하게 작성했다.

 

 

Figma

• 아직 한참 작업 중인 디자인이다..
• 시장의 여러 데이팅앱을 리서치해서 디자인을 하고 있다.

 

 

결론

 졸업과제 최종보고서 제출까지 이제 한달 남짓 남았다. 이제 디자인도 완벽하게 만들기보단 적당히 하고 실제 플로우를 먼저 구현하고 테스트하는 게 급할 것 같다.