이전에 큰 기획까지 다 완성하고 나니 디자이너님이 너무 그리웠습니다. 제플린이 너무 그립지만 개인적으로 만드는 포트폴리오 이니 만큼 스스로 디자인을 만드는 수 밖에 없는 상황이네요. 아쉬움을 뒤로한 채 기존에 만들었던 앱의 UI나 머트리얼 디자인을 열심히 참고하기 시작했습니다.
우선 와이어프레임 툴로 Miro를 선택했습니다.
Miro: the collaborative whiteboard platform for distributed teams
Scalable, secure, cross-device and enterprise-ready team collaboration whiteboard for distributed teams. Join 10M+ users from around the world
miro.com
구글 서치로 구글 이미지를 샘플로 가져올 수도 있고, iconFinder 사이트와 기본적으로 연동되서 iconFinder의 icon을 빠르게 검색해서 ui 그릴때 아이콘으로 사용할 수도 있습니다. 각종 플러그인들도 존재해서 무료 도구 치고 굉장히 좋은 툴이라 생각합니다.
1. 스플래쉬
툴 사용법을 천천히 손에 익힐 겸 가볍게 스플래쉬 부터 그려봤습니다. 앱을 처음 시작하면 안드로이드 아이콘이 나오고, 아이콘을 누르는 순간 애니메이션이 시작하면서 스플래쉬 로고가 뛰어지는 방식입니다. 포트폴리오 앱이니 기억에 남을 애니메이션 하나 간단히 넣어봤습니다. (사실상 필요는 없지만 눈요기로..)
그리고 노란색 메모장에 미로 툴에서 마저 그리지 못한 부분을 안드로이드 스튜디오 xml 작업시 추가로 그릴 부분들을 체크를 좀 해놨습니다. (디자이너님이 그립습니다..)
2. 튜토리얼
튜토리얼 화면 입니다. (툴 사용이 매우 서툴러서 볼품 없는데 어디까지나 와이어프레임 개념으로 그렸습니다.) 영상이 첨부될 수도 있고 이미지를 넣는 상황을 생각했습니다.
3. 메인 화면
메인 화면을 진행하기 앞서서 본격적인 색 테마를 골랐습니다. 머트리얼 디자인에서 색을 고를때 3가지 경우를 생각해서 색을 고른 후
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
1) Primary color
2) Secondary color
3) Light and dark variants
기본 Primary color 밝은 버전의 Primary color 어두운 버전의 Primary color
기본 Secondary color 밝은 버전의 Secondary color 어두운 버전의 Secondary color
이렇게 총 6개의 색을 골라야합니다.
material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=1976D2&secondary.color=42A5F5
Color Tool - Material Design
Create and share color palettes for your UI, and measure the accessibility of any color combination.
material.io
앱의 미적 감각인 저는 위 사이트를 참고해서 전체적인 블루 계열을 선택했고 보조 색상도 블루 계열인데 더 밝은 색으로 찾았습니다. 그리고 miro에 맞춰서 기본 색감을 응용하기 시작했습니다.
primaryColor = 1976D2
secondaryColor = 42A5F5
툴바 = PrimaryColor 상태표시줄 = PrimaryColor 어두운 버전 , 하단바 = PrimaryColor 밝은 버전 이런식으로 색을 입히고 하단 바에 5개의 아이콘을 임시로 지정했습니다.
4. 메인의 하단 탭 화면
1) 에피소드
머트리얼 디자인에 의하면 secondaryColor은 주로
- 플로팅 액션 버튼
- 슬라이더 및 스위치와 같은 선택 컨트롤
- 특정 글자 강조
- 진행률 혹은 표시줄
- 링크 및 헤드 라인 등등 표시
특수한 경우 및 활동적인 버튼 이나 컨텐츠 내부내의 강조 표시할 때 사용하는 편입니다. 권장 사항에 맞게 에피소드 화면에 색상들을 표시했습니다. 그리고 바텀 네비게이션 바 같은 경우 스크롤시 보는데 방해가 된다하면 스크롤 하는순간 바텀네비게이션 바를 가려도 무방 하다고 합니다.
2) 응원 게시판
게시판 화면 입니다. 왼쪽 화면에 노란색 메모를 남긴 부분에 그림자를 적용할 예정입니다. 임시로 회색선을 그었습니다. 머트리얼 디자인에서 강조하는 부분은 앱에서 보는 UI가 2차원적으로 보는게 아니라 실제 3차원 세계로 보는 경향이 있습니다. 그래서 그림자가 진다는 것은 해당 뷰의 높이가 높게 설정이 되어있다고 보면 됩니다.
miro 툴은 그저 2차원 그림을 그리는 도구일 뿐이라서 머트리얼 디자인 처럼 3차원 요소적인 부분은 살리지 못하지만, 안드로이드 스튜디오에서 작업 시 실제 elevation을 조절할 예정 입니다.
3) 대화하기
위에 말했다 시피 플로팅 액션 버튼에 secondaryColor가 적용 됩니다. 플로팅 액션 버튼은 생산적인 작업을 주로 하는편인데 탐색, 만들기, 추가의 의미로 사용하기도 합니다. 첫 채팅 시 추가, 기존 채팅이 존재할 시 기존 채팅방 탐색한다는 의미로 플로팅 액션 버튼을 삽입했습니다.
채팅방에서 사진 공유기능도 넣을 예정 입니다. 머트리얼 디자인에서 사진 클릭 시 툴바가 상황에 맞게 툴바가 바뀌는 것도 가능하다고 얘기를 합니다.
참고: material.io/components/app-bars-top#contextual-action-bar
4) 틱택톡
상단 툴바에 이미지를 넣을 수 있습니다. 다만 머트리얼 디자인에서 주의해야할 점은 이미지가 툴바의 텍스트를 가릴정도로 복잡한 이미지면 안되고 텍스트를 알아볼 수 있는 이미지만 사용해야합니다.
게임 설정화면은 카드뷰를 사용할 예정입니다. 게임 화면에서는 플레이어의 게임 상태에 따라 안내 상태 색감이 변하는데 에러나 틀렸다는 표시는 머트리얼 디자인에서 보통 붉은 색 계열을 사용합니다. 게임 기록 화면에서 리스트 형식으로 표현해서 한번에 모든 랭킹을 직관적으로 보여줄 수 있습니다.
아직 1) 에피소드 디테일 내부 화면들과 5) 음악 플레이어 UI작업은 다음에 이어서 작업할 예정입니다.
5) 네비게이션 뷰
머트리얼 디자인을 참고해서 드롸블 네비게이션 뷰를 만들어뒀습니다. 왼쪽에서 나오는 네비게이션 뷰 같은경우 BottomNavigationBar 를 사용하는 경우 사용하지 않기를 권장 합니다. 만들어 두긴 했는데 사용할지는 고민이 됩니다.
이상입니다. 다음에는 툴바 활용 및 드롸블 네비게이션 뷰를 어떻게 활용할 지 및 아직 그리지 않는 UI 부분 더 진행하고 준비가 되면 바로 개발 진행을 해봐야겠네요.
'포트폴리오 Portfoilo' 카테고리의 다른 글
| 포트폴리오 앱 제작(4) - 머트리얼 디자인에 맞게 재 수정 (0) | 2021.05.11 |
|---|---|
| 포트폴리오 앱 제작(2) - 기획을 시작하다. (0) | 2021.05.10 |
| 포트폴리오 앱 제작(1) - 개발에 사용할 것들. (0) | 2021.05.10 |
| 포트폴리오 앱 제작(0) - 최악의 PPT를 삭제하다. (0) | 2021.05.10 |
