고려대학교 응원가 뮤직플레이어 Flutter 앱 제작기(2) - UI/UX 개발

플레이스토어 다운로드 링크

쿠직(KUsic) - 고려대학교 응원가 - Google Play 앱

 

드디어 앱의 뼈대가 되는 페이지 디자인을 완료했다! 3일 정도 걸렸는데 구상한 페이지가 7개밖에 안 되는 것 치고는 생각보다 오래 걸렸다. Android Studio 설치하고 Git이랑 연결하고 Emulater도 실행해보면서 이것저것 처음 해보다 보니 시간이 오래 걸렸다. 직전 프로젝트에서는 FlutLab라는 온라인 IDE 환경에서 개발을 진행했어서 디버깅도 웹 환경에서 해야 해서 불편한 점이 많았는데 Emulater에서 직접 보고 디버깅하니까 확실히 직관적이고 편하다. 하지만 용량이 10GB라서 내 노트북 C드라이브 용량을 다 차지해버렸다.. ㅠㅠ

 

앱 페이지 디자인 완료

데이터베이스도 아직 없고 노래 목록이 민족의 아리아로만 도배되어 있지만 실제로 만들어진 페이지가 보이니까 개발이 많이 진척된 것 같은 느낌이 든다. 사실 Figma에서 디자인할 때는 괜찮아 보였는데 막상 만들고 나니 디자인이 좀 이상하다 싶은 부분이 몇 군데 있었다. 우선 붉은색 배경에 검정 아이콘을 쓴 부분이 좀 이상해 보였다. 아이콘이 눈에 안 띄고 배경에 묻히는 느낌이 들었는데 하양으로 바꿔보니 더 이상해서 일단 검정으로 놔뒀다 ㅋㅋ 도대체 저 정열의 크림슨 색과 어울리는 아이콘 색은 무엇일까.. 더보기 창도 뭔가 디자인이 이상하다. 나름 고려대 느낌 내겠다고 고려대 학교 마크에 있는 붉은색과 황토색 같은 색을 쓴 건데 저 황토색 비스무래한 색이 화면에 너무 많으니까 숨이 턱 막히는 답답함이 느껴진다. 하지만 이것 역시 일단은 보류했다. 여기서 디자인을 더 고민했다가는 개발이 너무 지연될 것 같아서 우선은 다음 단계로 넘어가려고 한다.

이번에 개발할 때는 두 페이지 이상에서 사용하는 공통된 위젯들은 최대한 컴포넌트화 시키려고 노력했다. 저번 프로젝트에서 일단 돌아가기만 하면 되겠지 하는 생각으로 리팩토링 없이 무지성 코딩을 하다 보니 나중에 디자인을 조금만 바꾸려고 해도 모든 페이지에 다 들어가서 하나하나 바꿔야 했던 기억이 있어서 이번에는 미리 여러 번 사용할 위젯들을 추렸다. 특히 노래 목록에 쓰는 SongTile이랑 더보기 창을 컴포넌트로 한번 만들어 놓으니까 코드도 간결해지고 디자인 수정이 필요할 때 한 번만 수정하면 돼서 확실하게 편한게 느껴졌다.

쥐어짜낸 컴포넌트들

개발하다가 지쳐서 중간에 앱 로고도 만들어봤다. 아무래도 나는 디자인이랑은 잘 안 맞는 것 같다...

그림판으로 만든 앱 로고

앞으로의 개발 순서는
1. audioplayers plugin을 사용해서 음악 재생 기능 구현하기
2. Provider를 이용한 상태관리
3. 데이터베이스와 연동시켜서 실제 뮤직 플레이어 앱처럼 구동되게 만들기
4. 플레이스토어에 출시하기

조금 더 힘내서 꼭 끝까지 앱을 완성시키고 싶다!!