배경
서비스의 기획은 지난주에 확정되었고, 이제 본격적인 디자인 및 개발 단계에 들어섰다. 디자인이라곤 평생 해본 적도 없지만, 졸업과제에서 내가 프론트엔드 개발자를 맡은 만큼 내가 해야 했다. 그래도 바로 디자인에 들어가는 것보다는 어느 정도 와이어프레임을 확립해두고 시작하면 좋을 것 같았다.
내가 사용한 툴은 다음과 같다.
- Excalidraw with Obsidian: 와이어프레임 및 플로우차트, 마인트맵을 그리기 좋은 툴이다. 키보드와 트랙패트 만으로 그리는 중인데, 기능이 정말 필요한 기능만 있어서 심플하다. 특히 졸업과제 도중 서로의 생각이 달라지는 지점이 있을 때마다 그림으로 그려가면서 서로의 생각의 동기화시키는 데에 잘 써먹었다. Figma로 본격적인 디자인에 앞서 간단한 와이어프레임을 그리는 데에 사용했다.
- Figma: 명실상부 제일 유명한 디자인 툴이다. 와이어프레임 작성이 끝난 이후 디테일한 디자인을 그리기 위해 사용 중이다.
Excalidraw
지갑 와이어프레임
서비스 1차 와이어프레임
- 디자인 같은 거 전혀없이 정말 간단하게 UI들이 어떤 식으로 상호작용하고 플로우가 어떻게 흘러가는지를 그렸다.
서비스 2차 와이어프레임
- 적당한 디테일을 추가해서 와이어프레임을 작성했다.
- 분기마다 달라지는 플로우를 상세하게 작성했다.
Figma
- 아직 한참 작업 중인 디자인이다..
- 시장의 여러 데이팅앱을 리서치해서 디자인을 하고 있다.
결론
졸업과제 최종보고서 제출까지 이제 한달 남짓 남았다. 이제 디자인도 완벽하게 만들기보단 적당히 하고 실제 플로우를 먼저 구현하고 테스트하는 게 급할 것 같다.
'프로젝트 > 졸업과제' 카테고리의 다른 글
[졸과] 구현구현구현 (0) | 2024.05.02 |
---|---|
[졸과] 모각코 api 테스트 (1) | 2024.04.23 |
[졸과] 기획에서 막혔다. (0) | 2024.04.13 |
[졸과] 노션 백로그 작성하기 (1) | 2024.04.05 |
[졸과] 서비스 기획 및 지갑 와이어프레임 (0) | 2024.03.27 |