포트폴리오 앱 제작(4) - 머트리얼 디자인에 맞게 재 수정

이전편: loner123.tistory.com/136

포트폴리오 앱 제작(3) - UI 만들기, 머트리얼 디자인을 참고하며..

이전편에서 머트리얼 디자인을 참고하기 시작해서 UI 제작을 시작했습니다. 

내가 주로 하는 진행 방식은

1) 기획서와 zeplin 링크를 받음  ->

2) 비즈니스 로직을 정리 후 다이얼그램 남기기->

3) 아키텍쳐 구상 후 다이얼로그 남기기->

4) 스케줄 예상해보기 (검토 보다 스케줄을 먼저 대답해야 경우가 많다.) ->

5) 프로젝트 Setting 시작 ->

6) 추상도가 높은 것(Entity,ParentClass 등등)부터 만들기 ->

7) 디버깅 및 테스트 환경 만들면서 추상도가 높은것 부터 낮은 단계 순서로 구현->

8) 아키텍쳐 고려, 비즈니스 로직 구현, 로직 구현 방식 재검토,  실기기 테스트, FeedBack,이슈 해결

위 순서를 기본으로 잡고 상황에 따라 방식을 바꿉니다. 

하지만 이 프로젝트는 협업을 하지 않기 때문에 1번 디자인과 기획을 스스로 해야합니다. 그리고 전문 기획자가 아니라서 기획의 큰 틀은 잡아두고 디자인을 하면서 부족한 기획을 보충해가는 중입니다.

저번 편에 머트리얼 디자인을 참고 하기 시작했고, 머트리얼 디자인을 UI 제작겸 공부하면서 안드로이드를 한층 더 이해가 된다는 생각이 듭니다. 

저번 편에 이어서 진행을 얘기하자면 

1. 용어 변경 및 하단 탐색 바 아이템 용어 변경

더 알기 쉽게 직관적으로 텍스트명을 바꿧습니다. 그리고 시선을 분산 시킬 수 있었던 음악 플레이어 기능과 틱택톡 기능은 기능 구현란에 넣었습니다. 이 포트폴리오를 보는 사용자가 더 중요한 내용을 보게 하도록 초점을 맞췄습니다.

2. 다이얼로그 추가 

바텀 다이얼로그를 만들었습니다. 가운데 다이얼로그에 대해 이야기 하자면 머트리얼 디자인의 버튼은 4가지의 경우로 나뉩니다. 

1.TextButton

2.Outlined Button

3.Contained button

4.Toogle Button

각 버튼마다 중요도가 나뉘는데

1번 TextButton은 low

2번 Outlined Button은 medium

3번 Contained button은 high

이렇게 구분됩니다. 

 

이 다이얼로그에서 Contained button 과 Outlined Button를 사용했습니다. 로그인 버튼의 더 중요도를 높혔고 취소는 단순히 모달창을 취소 시키므로 중요도가 낮다는 것을 표시했습니다.

그리고 머트리얼 디자인 버튼 배치에 권장 사항으로 두개의 버튼이 나란히 있을 때 두개다 Contained button으로 두는것을 권장하지 않습니다.

3. 포트폴리오 홈 화면 제작

Bottom Navigation Bar 위 화면에 사용할 시작 화면 입니다. 스크롤이 가능하게끔 적용이 되어 있습니다. 머트리얼 디자인에 따르면 화면이 스크롤 형식일 시에 사용자가 스크롤을 하게되면 BottomNavigationBar을 숨겨도 된다. 라고 언급이 되어있었습니다. (필수는 아니다.) 그래서 스크롤시 BottomNavigationBar를 숨겨서 탁트인 UI를 보일 예정입니다.

위 사진들을 보면 그리드 형식과 리스트형식으로 구성이 되어있습니다. 이 두가지는 사용자가 한눈에 많은 정보를 볼 수 있도록 도움을 줍니다. 

4. 포트폴리오 미리보기 화면 추가

홈 화면에서 포트폴리오 자세히 보기를 클릭하면 이 화면을 볼 수 있습니다. 스와이프 형식으로 포트폴리오를 골라서 보는 형식입니다. Miro 특성상 UI로 디테일하게 그리지는 못했지만 스와이프 아이템들은 모두 카드뷰 형식으로 되어있습니다. 그리고 하단에 Appbar를 적용 시켰습니다. 머트리얼 디자인에 있는 하단 Appbar를 참고했습니다.

Appbar 가운데 버튼을 클릭하면 나중에 제작 해놓을 포폴 안내 동영상 화면으로 이동할 예정입니다.

ExoPlayer 를 심플하게 사용할 예정입니다. 위 UI에서 미디어 컨트롤러는 생략이 되어있지만 안드로이드 제작시 ExoPlayer에서 기본으로 제공해주는 것들을 사용할 생각입니다.

그리고 이전화면으로 돌아와보겠습니다. 하단 Appbar 좌측 햄버거 버튼을 누르면 Naviagtion View 가 나옵니다. 머트리얼 디자인에서 하단 앱바를 사용할 시 drawer의 Naviagtion View 가 아래에서 열리도록 권장하고 있습니다. 그에 맞게 적용을 해줬습니다.

5. 탭 추가

Bottom Navigation Bar의 아이콘이 5개 였지만 4개로 줄었습니다. 기능 구현 화면에서 탭 레이아웃을 이용해서 두개의 화면을 한 화면으로 쉽게 시작 할 수 있도록 변경했습니다.

6. 뮤직 플레이어 UI 추가

리스트 형식으로 한눈에 모든 노래를 볼 수 있도록 설정했습니다. 

app Bar를 변형해서 검색 기능으로 사용 예정 입니다.

drawer navigation Bar를 적극 활용해줬습니다. 머트리얼 디자인 권장사항 상 navigation 에 같은 아이콘을 쓰지 말라고 합니다. (특별한 경우 제외해서) 위 화면은 중복이되지만 곧 수정 예정입니다. 

drawer navigation Bar를 통해서 플레이 리스트, 좋아요 리스트, 전체 음악, 앨범 리스트 등등으로 이동하게끔 할겁니다. drawer navigation Bar를 사용한 이유는 기존 화면 하단에 플레이 리스트 UI가 이미 있기 때문에 화면 왼쪽에 탐색기능을 부착한겁니다. (머트리얼 디자인에서 BottomNavigationBar와 겹칠일 없도록 주의 하라고 하기 때문)

7. 뮤직 플레이어의 앨범 리스트 화면 추가

Miro 특성상 카드 뷰 라는걸 잘 표현하지 못했지만 위 그리드 레이아웃 안의 아이템들은 모두 카드 형태로 사용할 예정입니다. 아이템 각각 마다 PLAY를 대문자로 적은 이유는 머트리얼 디자인에서 버튼의 텍스트는 반드시 짦고 한줄이며 영어일시 대문자만 사용하라고 권장하기 때문입니다.

앨범 리스트 디테일 화면에서 drawe navigation 를 열었을시 앨범 리스트 텍스트에 Bold를 처리해놨습니다. 

마지막으로 플레이어 재생 디테일 화면 입니다. 직접 만든 UI는 아니라 참고할 UI입니다. (내가 구상한 UI가 완전히 똑같아서 색감만 바꾸면 됩니다.) 

블러처리는 아이폰의 UI의 특징이라서 배경만 머트리얼 디자인의 특징으로 블러처리를 없애고 단색으로 갈 예정입니다.

총 진행된 디자인 입니다. 생각보다 꽤 양이 많이 나와서 놀랍긴 하네요 항상 앱이 완성되는 모습을 상상하면 두근 거립니다. 이런 상상을 할때 마다 개발을 얼마나 사랑하는지 다시 생각하게 되네요

디자인 편은 여기까지 입니다. 

개인앱 치고 꽤 일을 크게 벌린듯한 느낌이 듭니다..ㄷㄷ 서버까지 담당하기에 부담이 될거같아서 어쩔 수 없이 noSql인 FireStore를 쓸 예정이라, nosql 특성상 Join 기능이 없으니 Entity를 확실하게 잡고 시작해야 할 것 같네요

다음은 로직 구상 및 아키텍쳐 고려 단계로 들어갑니다. 이 부분은 제가 개발 하면서 가장 좋아하고 집중하는 부분 입니다.  당연히 초기에 비즈니스 로직 시나리오를 잡아도 뒤에 가서 여러가지 상황으로 소소하게 변형이 되겠지만, 이 처음 시나리오가 나중가서 쿠션 역활을 한다고 생각합니다. 

과연 어떤 앱이 탄생할지 궁금합니다.