02. 기획과 디자인 레퍼런스 찾기

앱을 구상했으니 좀 더 구체화하기 위해 Figma를 활용해 대략적인 디자인 작업을 실행했다.

각 페이지별로 들어갈 기능을 분배하고, 유저 플로우를 생각하며 UX/UI를 작업했으나, 지금은 여러번의 업데이트 과정을 거치며 많이 변하게 되었다.

• 초기 디자인 기획 확인 Figma

Figma

앱에 사용되는 색상은 단청에 들어가는 5방색을 채용하여 선택을 했으나, 다크모드도 적용할 생각이라, Dark모드의 색상은 임의로 조금 더 어두운 색상으로 등록했다. 디자인과 오방색의 조합이 촌스러워보이긴 하지만 디자이너가 아니기때문에 어느정도 타협하고 가기로 했다.

폰트는 다국어 지원을 예상하며 최대한 다양한 언어가 지원되는 폰트를 사용하였고, 마포구에서 제작해 배포하는

MapoFlowerIsland, MapoGoldenPier  그리고 Montserrat를 사용하기로 했다.

추가적으로 Button과 Cell의 아이템을 공통의 요소로 작업하기 위해 제작해 두었고, 통일성을 위해 CornerRadius를 동일하게 적용하여 사용했다.

특히 사용자의 통계를 기록해서 보여주기위해 고민을 했었다.

 

왓차피디아의 마이페이지 유형을 참고하여 제작하려고 했으나, 지금의 앱에서 유저의 사용패턴을 봤을때 필요하지 않다는 판단이 들어 업데이트 과정에서 제거되었다. 추 후에 앱 기능이 다양해진다면 다시 살려보고 싶은 기능이다.