'글로벌 인터랙션' 프로젝트 진행을 위한 디자인 시스템 디벨롭
01. 전 페이지 디자인 적용
위 사진은 11주차 때 일부 대표 페이지에만 적용한 디자인 결과물들이다. 이번 주차엔 해당 디자인을 전 페이지에 적용하고, 제대로 된 시스템 가이드를 잡아 통일성을 제대로 정립하는 것을 주 과제로 삼았다. 또한 앱 아이콘에 대한 논의도 함께 진행하였다. 이전 주차에 본인이 맡았던 페이지 분야에서 작업이 되지 않은 부분을 더 가져와 각자가 적용시켜온 결과가 아래로 이어지는 사진들이다.
02. 디자인 시스템 고안
그렇게 디자인 페이지를 적용하자, 전체적으로 통일시켜야 할 부분들을 찾아낼 수 있었다. 팝업, 버튼, 상단바, 스낵바, 폰트 사이즈, 웨이트, 로딩 방식, 시간 표기 방식 등 의논해야할 점을 목록으로 작성하여 이에 대한 일관된 디자인 시스템을 논의했다. 특히 팝업 창의 스타일 통일이 가장 큰 디벨롭 사안이라고 파악하여 기준이 될 그리드 시스템을 만들어 통일시켜주었다. 아래는 해당 작업을 진행한 피그마 보드의 사진이다.
사진으로는 나와있지 않지만, 폰트는 프리텐다드 Bold (강조) / Medium (기본) 으로 웨이트를 통일하였고, 크기는 각 기능에 따른 페이지 내부에서 일관성 있게 통일하도록 결정하였다.
03. 앱 아이콘 고안
아래의 캔버스는 각자가 고안해본 앱 아이콘을 모아놓은 사진이다. 다만 이번 주차에 고안해 온 아이콘 중 '앱의 기능'에 대해 확실하게 말해주는 시안이 없다고 판단되어 최종 직전까지 꾸준히 더 디벨롭을 시킬 예정이다. 개인적인 의견으로는 말풍선, 혹은 시계의 이미지가 들어갈 수 있도록 시안을 다시 짜 볼 생각이다.
04. 전체 디자인 페이지 통일성 있게 수정
디자인 가이드를 수정하고, 또 조원들 간에 수정점이 필요한 부분에 대해 논의를 하여 해당 사항이 적용 된 수정 페이지를 완성함으로써 12주차의 과제를 마무리했다. 전체적인 분량이 많아 스크린 샷을 많이 첨부하기가 어려움으로, 본인이 작업한 채팅방 디자인 페이지만 일부 자세하게 첨부하도록 하겠다.
+ 메인 페이지 피드백 반영
추가로 수업에서 들었던 피드백을 반영하여, 메인 페이지 상단에서 넘어가는 일정들의 목록을 색상 차이가 있게 하도록 수정하였다. 개인 일정과 공유 일정의 색상 차이가 이미 존재하기 때문에, 공유 일정 목록들은 명도에 변화를 주었다.
