[회고] 첫 출시 프로젝트 - 뭐 부르지?(iOS)

ryu_y·2022년 10월 4일

9/12일부터 3주 좀 넘는 시간동안의 출시프로젝트가 마무리단계에 접어 들었다. 첫 출시프로젝트인 노래방 곡 리스트 어플 "뭐 부르지? - 내 맘대로 만드는 노래 리스트"에 대한 회고를 해보려고 한다.
지나고 생각해보니 뿌듯하면서도 아쉬웠던 것들이 많이 생각난다.

아이디어 구상

"뭐 부르지? - 내 맘대로 만드는 노래 리스트?"는 쉽게 말해 노래방 곡 리스트 어플이다. 노래방에 갔을때 뭐 부를까 생각하면서 시간을 보내거나 인기차트를 하염없이 내리는 경험은 누구나 많이 해보았을것이다. 나 역시도 이러한 경험들을 겪던 와중에 같이 코인 노래방에 간 친구를 보게 되었다. 자기가 평소에 부르고 싶었던 노래들, 자신이 있는 노래 목록을 메모장에 적어 예약을 하는 모습을 보고 메모장이 아니라 좀 더 괜찮게 리스트를 만들어 보면 어떨까? 하는 생각에 이 어플을 개발하게 되었다.

앱 디자인

흔히 아이폰은 감성, 디자인이라는 말을 많이 한다. 또한 iOS어플들도 감성있는 디자인, 같은 기능이라도 예쁜 디자인을 갖고있는 어플이 인기가 많다. 이처럼 나의 디자인도 메모장이나 딱딱한 디자인이 아니라 사용하고 싶은 깔끔한 디자인을 갖도록 설계하고 싶었고 여러번의 수정도 거쳐 최종 디자인이 나왔다.

1차 디자인

처음엔 손으로 대충 그려보고 Figma를 사용하여 앱 디자인을 해보았다.(Figma 경험 전무...)
1차 디자인은 위부터 검색(TexField), 인기차트(TableView), 추천 리스트(CollectioView)를 홈화면으로 하고 아래에 TabBar를 사용하여 홈, 리스트, 주변노래방(지도), 설정으로 이동할수있도록 만드는 것이 구상이였다. 물론 대충 틀만 잡은 디자인이였지만 실제 개발을 했을때 너무 딱딱한 디자인, 약간 안드로이드스러운(?) 느낌이 들어 전면 수정을 했다. 또한, 가사부분은 저작권으로 인하여 직접적으로 표시되는 부분은 제거해야할것같다는 멘토님의 피드백을 바탕으로 수정을 하였다.

2차 디자인

약간의 Figma 사용법을 익히고 앱 디자인을 수정하였다. 약간 유사하면서도 다른 디자인이다.
전체적으로 검색부분, TableView부분으로 나누고 TableView도 노래리스트, 인기차트, 주변노래방으로 셀을 나누어 스크롤이 되도록 구상하였다. TableView안에 CollectionView를 넣는 구조로 되어있어 개발할때 약간의 복잡함이 있었지만 깔끔해진 느낌을 주는 디자인이라고 생각한다.

찐.... 최종 디자인

실제로 개발을 하다보면 점점 생각했던 것들보다 추가로 많은 것이 필요해진다. 화면전환이나 버튼을 눌렀을때 메뉴를 사용자가 쉽게 동작할수있도록 도움을 주는 작은 디테일이 어플의 질을 높인다고 생각하며 여러 메뉴들도 추가하게 되어 마지막 디자인으로 수정되었다.

리젝된 부분이 있어 약간의 계획이 수정이 생기긴했지만, 추후 업데이트로 대응예정...

최종 디자인은.... 다운로드해서 봐주시면 좋을것같습니다.🙇🙇🙇

https://apps.apple.com/kr/app/%EB%AD%90-%EB%B6%80%EB%A5%B4%EC%A7%80-%EB%82%B4-%EB%A7%98%EB%8C%80%EB%A1%9C-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%85%B8%EB%9E%98-%EB%A6%AC%EC%8A%A4%ED%8A%B8/id6443573821

개발공수

개발계획서를 작성하며 정말 자세히, 정교하게 작성해야한다고 느꼈다. 프로젝트 경험이 없고 계획서도 작성해 본적이 없는지라 노션을 통하여 4일을 단위로 계획을 TodoList로 세우고 체크하는 방식으로 계획을 세웠는데
시간적으로나 계획대로 이루어지지 않았을때의 대응이 많이 어려웠다. 물론 계획을 시간적으로 자세하게 적어도 계획이 틀어지는 경우도 있었겠지만 대응이 편했을것같다.
교훈: 개발 설계와 계획은 꼼꼼하게!

개발후기

이번 프로젝트의 목표는 배운 것들을 최대한 많이 활용하는것이였다. 교육과정을 통하여 다루었던 모든 부분들을 출시 프로젝트에 녹이면서 써보고 익숙해지는 것이 중점이였고 많은 기능들도 넣어보고 싶었다. 그렇다보니 코드적으로 깔끔한 느낌은 좀 부족했고 많은 라이브러리, 오픈소스들을 사용하였다. MVVM도 다루어보고싶었지만 시간적으로나 아직 익숙하지 않아 추후 업데이트때 개선해나가야 할것같다.
여러 API 사용하면서 어려움도 많았다. 내 생각처럼 각각의 API의 정보를 호환시켜 다루는 것이 어려움이 많았다. API를 불러오는 과정과 뷰를 그리는 부분에서 충돌도 많이 일어났고 이 문제를 알맞게 풀어가는데에도 시간이 꽤 걸렸다. 홈화면의 인기차트를 표시하는 부분은 테이블뷰안에 컬렉션뷰안에 테이블뷰가 들어가는 구조로 디자인했는데 이부분도 복잡하여 애를 많이 먹었고 화면간의 전환시 데이터 전달, 데이터 저장 방식, 네이버 지도를 활용 등 교육과정에서 배운것들을 응용하여 개발하는 것들에서 쉽지않았지만 많은 구글링, 교육과정동료들과 소통, 멘토님께 질문을 통해 해결할수있었고 끝내 완성할수있었다.

리젝...

첫 심사때 저작권 관련으로 리젝을 먹었다.....😢
리뷰어가 스크릿샷을 보내주며 가사링크 부분과 앨범커버가 저작권에 위배되는 사항이기때문에 리젝되었고 일단은 해당기능을 제외하고 출시하고 추후 저작권을 준수하고 기능도 구현되는 쪽으로 다시 업데이트 예정이다.

개발일지 중에서...

9/16
테이블뷰 안에 컬렉션뷰가 작동하지 않는 오류 : cell에서 추가할때 self가 아닌 contentView에 추가하는 것으로 해결
api에서 지원하지않는 앨범커버를 불러오는 것이 매우 어려워 후순위로 미루어봐야할것같음
9/19
일단 앨버커버를 불러오는 것이 많은 오류를 갖고 있어 DetailView로 넘어갔을때만 불러오고 앨범커버 주소를 저장하여 저장된 리스트 곡에서만 보여주는 것으로 변경, 불러오지 못한 앨범커버는 기본 이미지로 대체하는것으로 수정됨
9/20
DetailView - 가수검색시 검색어가 포함된 가수들의 곡들도 표시됨
Realm 저장된 데이터를 불러오기 위해서 fetch가 필요
Realm에 컬러값을 저장할수없어 extension으로 UIColor에 String값을 hex로 변환하게 함
9/21
Song 구조체 안에 앨범커버 이미지 주소를 하나씩 넣어 호출 가능한 주소만 각각 넣어주니 시간이 걸리지만 이미지를 정확도 높은 이미지를 가져올수있었음 (못가져오는 앨범커버가 대부분이지만…)
UI를 신경쓰다보니 자꾸 뷰가 하나씩 더 늘어남 - songview에서 메뉴 버튼을 만들어 클릭시 panmodal로 리스트에 추가하거나 정보를 보여주는 뷰를 구성해야할듯