안드로이드 피아노 악보 뷰어

note88 개발 배경

피아노 학원에서 어느 날 갤럭시 탭으로 악보를 보는 지인분께서 안드로이드용으로는 악보 보는 앱이 있으나, imslp연동이 된 악보가 없다고 말한 것이 시초가 되었다.
이미 iOS용으로는 PiaScore라는 앱이 존재하고, 이미 오래전 부터는 IMSLP 공식 앱이 안드로이드에서 존재는 하고 있었다.
하지만 내 기준 IMSLP 앱이 단순했으면 하는 마음에서 안드로이드용 imslp 연동이 되는 앱을 개발하기로 시작했다.

개발부터 배포까지

2024년 3월 10일부터 개발을 시작한 것으로 보아, 그간 구직활동과 회사활동으로 여러모로 미루다가 올해가 되어서야 완성을 했다.
일단 flutter에 대해서 빠삭하게 아는 편은 아니고, 2023년 하반기에 플러터 관련 책을 읽고 거기에 나오는 프로젝트만 몇개 따라서 해본 수준이라, 경험도 있겠다 싶어서 무모하게 플러터로 시작했다.
사실 그냥 react native로 개발할까 하다가, react native는 안드로이드와 iOS에서 각각의 네이티브 컴포넌트를 사용해야 하는데, 플러터는 그럴 필요가 없어서 플러터로 개발하기로 했다. Cross platform으로 개발할 수 있다는 점에서 데스크톱으로도 연계하려 했으나 중간에 문제가 발생해서.. 이건 보류하기로 했다..ㅠㅠ 아무튼 이 포스트모템 쓰는 시점에서는 잔오류 확인하고 구글 플레이스토어에 배포할 예정이라고 보면 되겠다.

Product Keypoint

• Bookview like
• Swipe/Slide to change page
• IMSLP 연동
• PDF Viewer

Development

개발 환경은 아래와 같다.

Development Stack

• Flutter
• Dart
• Android
• Claude

Ui/Ux Design

사실.. 디자인 프레임워크도 없고 그냥 바로 머리에서 생각나는대로 만들어서 어찌보면 일관성이 없어 보일 수 있겠다. 신경이 쓰여서 컬러팔레트도 옮기고 웬만해서 AppTheme을 최대한 사용하는 방향으로 개발했다.

일단 Ui는 최대한 간단하게, 색상은 하나의 색상을 키포인트로 가져가고 최대한 악보가 눈에 띄는 색상을 사용했다. 색상은 Flutter에서 제공하는 기본 색상인 MaterialColor를 사용했다.

Issues

개발하면서 사실 순탄하지 않았던 것 같다.. ㅋㅋ ㅠㅠ 꽤나 고생하면서 만들었는데, 생각나는 몇가지만 정리해보겠다.

Bookview PDF viewer 패키지는 없다.

원래는 pdfrx 패키지를 사용했었는데, 이 패키지가 bookview 모드가 없어서, 최대한 기본 라이브러리로 bookview를 구현하였고, pdfrx로는 pdf 읽는 용도로 나누어서 사용했다.
나쁘지 않은 패키지이다. 아무튼 최근 아래 내가 남긴 깃이슈를 확인해보니까 여러 이벤트 넣으시려고 노력하시는 것 같다.

• GITISSUE

bookview는 orientaton을 고려하면서 snapping event가 걸려야하는데, 이것도 offset 계산으로 골머리를 좀 앓았던 것으로 기억한다.

아 참, 그리고 몰랐는데, pdf 위에 그리는 등등 고급기능이 들어간 패키지는 유료다..ㅠㅠ

Dynamic 페이지들을 parsing하기에는 flutter가 빈약하다.

webview_flutter 패키지를 사용했는데, 안드로이드와 iOS에서만 지원하기 때문에 만약 데스크톱으로도 parsing을 원하면 webview_windows 패키지를 사용해야 한다. 설령 사용해도 후자는 offscreen rendering을 지원하지 않기 때문에, 동적인 페이지에서 정보를 가져오는 것은 실패하였다.. ㅠㅠ 이건 여러번 시험해본 끝에 내린 결과다..ㅠㅠ

Google Admob은 데스크탑을 지원하지 않는다.

사실 데스크탑 개발의 의미가 없어져서 데스크탑을 굳이 살라진 않았다. 그리고 Admob이 테스트 하는데 있어서 너무 안되는 문제를 4일 내내 고생한 적이 있었는데, 이 링크 보고 해결한적이 있었다. 공식 문서에서는 에뮬레이터 설정 관련 말이 없어서 좀 허무하긴 했다..ㅋㅋ
공식 문서 참고하고 에뮬레이터는 vscode에서 생성하고 만들면 자동으로 Google play 기반 안드로이드 에뮬레이터가 나오긴 한다.

Wrapup & Conclusion

요약을 하자면, 플러터로 처음부터 끝까지 프론트엔드 개발을 해보았고, 개인적으로는 나쁘지 않은 경험이었다. 하지만 나는 프론트엔드로 정식으로 갈 생각이 전혀 없는 사람이라..

다만 처음부터 끝까지 혼자서 개발을 한 것을 토대로 광고를 달고 배포까지는 처음이라, 이 경험을 토대로 후속 프로젝트들이 더 잘 되었음 하는 마음이다. 그런데 생각보다 옆동네 React native보다 라이브러리 생태계가 없는 것으로 느껴지긴 했다.