물건정리앱 기획(3)

화면 설계를 위한 IA와 Mid-fi Wireframe

지난 주 정리한 정보 구조도를 바탕으로 어플 내 화면설계를 진행한다.

하단 네비게이션에 5가지 기능이 들어갈 것을 가정하고 같은 방식으로 IA를 그렸다.

Whimsical에서 열심히 그렸는데 요소 1000개까지가 무료 요금제 한도여서, 최종적으로는 피그잼에서 마무리했다. 나중에 안 사실인데, AUTOFLOW라고 하는 플러그인을 사용하면 쉽게 화살표를 그릴 수 있어서 플로우 차트 작업할 때 편리할 것 같다.

홈 / 커뮤니티 / 구인 / 마켓 / 마이페이지

처음에는 이렇게 총 5개 네비게이션으로 구성했다.

그런데 만들고 나서 보니 화면이 너무 많이 나올 것 같아서, 일단 wireframe 은 주요 기능 위주로만 작업하고 전체 플로우 차트는 포트폴리오에만 넣을 생각이다.

화면 몇 개 그려보고 다 할 수 있을거 같으면 전체 버전으로 진행해도 괜찮을 것 같다.

주요 기능만 정리해서 플로우 차트를 다시 그렸다

홈 / 커뮤니티 / 통계 / 설정

구체적인 설정 값들은 이전 플로우차트를 참고하면 되니까 여기서는 전체적인 Flow만 이해할 수 있도록 간단하게 수정했다.

탭별러 주요 기능 페이지들을 정리했다

플로우 차트를 참고하여 기능의 플로우 별로 가능한 케이스들을 생각하면서 스크린 작업을 했다.

인턴에서 스크린 작업을 실제 동작 하나하나 한다고 가정하고 그렸었던게 좀 도움이 됐다.

예전에는 그것들이 다 너무 귀찮았는데, 이제는 가능한 모든 엣지케이스들을 그리려고 할 정도로 파고들게 되어서 중간에 멈췄다.

더 자잘하게 쪼개면 더이상 와이어프레임 수준이 아닌것 같아 캘린더, 커뮤니티, 설정 탭의 스크린들은 적당히만 그렸다. 캘린더 탭의 스크린은 한 번더 다듬고 싶긴 하다.

와이어 프레임 작업 일단 여기서 홀드!

처음에 생각했던 기본 플로우에 대해서 원하는 수준으로 풀어냈기 때문에 여기서 다음 단계로 넘어가도 될 것 같다. 브런치 발행과 동시에 이래저래 많이 밀렸긴 했으나...

그래도 와이어프레임 작업을 하면서 UX Writing을 좀 익사이팅하게 해보려고 노력했다.

뭔가 잔소리를 하는 듯 격려하는 듯 유쾌한 엄마 혹은 룸메이트의 이미지를 상상하면서 써봤더니 나름 괜찮은 것 같다. 서비스의 캐릭터가 어느 정도 머릿속에 시각화가 된 것 같으니, 이제 브랜딩 작업을 해보려고 한다.

시각 디자인 전공이 아닌지라 사실 브랜딩 디자인 과정 자체가 솔직히 익숙하지 않긴 하지만,

어쨌든 로고 / 아이콘 / 컬러파레트 / 몇가지 그래픽 리소스 를 기본으로 작업해볼 것이다.

여기서 사실 경쟁사 분석을 버무려서 진행해보고 싶기도 한데, 이게 메인은 아니니까 적당히 2-3시간 정도만 리서치하고 분석 표 만들어서 색상 / 메인 컨셉 / UX Writing(브랜드 성격 파악) 정도만 보도록 하자.

경쟁사가 좀 많으면 맵 만들어서 포지셔닝 하는것도 좀 멋질 거 같기도.

어쨌든 BX는 메인은 아니니까 각 방법론들 빠르게 치고 기획은 빠르게 넘어가고,

그래픽 리소스를 좀 힘줘보는 방향으로 하면 포트폴리오 첫번째 프로젝트로 넣기에 손색없을 거 같다.

사실 사용자 리서치를 안한게 좀 걸리긴 하는데,,, 뭐 마지막에 한 번 설문조사 돌려서 추가해도 괜찮을거 같다.