이 글은 Flutter로 앱을 개발하고 출시하면서 느낀 점을 가볍게 작성한 글입니다.
기술 위주의 개발기가 궁금하시다면 밤하늘_개발일지 를 클릭해주세요! 🙏
앱 소개
밤하늘 - 목소리로 소통하는 음성 SNS
- 목소리로 생각과 감정을 공유하고자 하는 모든 분들을 위한 음성 기반 SNS입니다.
- 주요 기능은 아래와 같습니다.
- 음성 게시글 작성 : 프로필 사진, 닉네임, 음성을 게시글로 업로드 가능
- 음성 메시지 답장 : 마음에 드는 게시글에 음성 메시지 전송 가능
- 음성 채팅 : 답장을 통해 시작된 채팅방에서 음성 메시지로 대화 가능
🛠️ 깃허브 레포 : https://github.com/Yundal0/the_night_sky
🍎 앱스토어 : https://apps.apple.com/kr/app/id6503616413
기획
초반에 기획을 대충하는 바람에 여러 번의 시행착오를 겪었고,
개발 기간이 예상보다 길어지며 개발 의욕까지 꺾였습니다.
"이 앱은 왜 존재하고, 해당 기능을 왜 제공해야 하는가" 에 대해 명확하게 설명하기 위해
기획일지를 따로 작성했는데요. 이후 기획일지를 작성하면서 시행착오가 줄었고,
비교적 완성도가 높은 앱을 만들 수 있었습니다.
제가 작성한 일지의 내용이 궁금하시다면 밤하늘_기획일지를 참고해보세요 😃
디자인
저는 사용자 경험을 고려했을 때 디자인이 매우 중요한 부분이라고 생각했고, 직접 Figma로 Design Guide와 위젯을 디자인하여 앱을 제작했습니다.
제가 Figma를 학습할 때 사용한 유튜브 링크를 공유하겠습니다. 참고해보셔도 좋을 것 같습니다!
🔗 피그마 기본 익히기
🔗 연정's Figma
개발
코드가 궁금하시다면 깃허브 레포를 참고해주세요.
사용된 기술/패키지
사용된 기술과 패키지는 다음과 같습니다.
- Dart, Flutter
- Provider
- Firebase Auth, Firebase Storage, Firestore
- audioplayers, record
프로젝트 폴더 구조
MVP의 규모가 작아 학습과 설계에 많은 노력이 필요한 Clean Architecture를 적용하기보다는, 앱에서 공통적으로 사용되는 부분과 데이터 관련 요소들을 app 폴더에 모았습니다.
또한, presentation 폴더 내에는 MVVM 패턴을 적용한 pages 폴더와 재사용 가능한 위젯들을 모아둔 widgets 폴더를 하위 폴더로 구성하였습니다.
|-- lib
|-- app
| |-- config
| |-- constants
| |-- enums
| |-- models
| |-- repository
| |-- utils
|-- presentation
|-- pages
| |-- chat_room
| |-- chat_thumbnail
| |-- login
| |-- post
| |-- profile
| |-- register_profile
| |-- reply
|-- widgets
| |-- app_bar
| |-- audio_player
| |-- custom_buttons
| |-- layout
| |-- record_buttons
| |-- tiles
|문제 해결 과정
문제가 발생했을 때 문제 현상 - 원인 - 해결 가설 - 결과 순서로 해결했습니다.
예를 들어, ViewModel과 Repository의 역할 갈등 사례를 해결한 과정을 공유합니다.
- 문제 현상
- ViewModel과 Repository의 역할이 충돌하는 상황이다.
- ViewModel은 Model Instance를 만든 후에 Repository로 Instance를 전달하는 역할을 수행한다.
- Repository는 전달받은 Instance를 Firestore에 전달하는 역할을 수행한다.
- 원인
- ChatModel의 경우 ChatId라는 필드 값을 생성해야 하는데, ChatId는 Firestore의 Doc ID이다.
- Firestore의 Doc ID는 Firestore의 Collection에 Doc과 Field를 생성해야 만들어지는 값이다.
- 따라서 ChatModel의 Instance를 ViewModel에서 만들 경우 반드시 ViewModel 내부에서 Firestore에 DB를 생성하는 작업을 수행해야 하고, 이는 ViewModel과 Repository의 역할 갈등을 초래하고, ViewModel의 크기를 증가시킨다.
- 해결 가설
- ChatModel에서 Doc ID로 사용되는 부분을 Nullable로 처리하면 된다.
- Repository에서 할당받은 chatId와 messageId를 Model Instance에 나중에 할당하면 된다.
- 결과
- ViewModel과 Repository의 역할이 충돌되는 상황을 해결했다.
- 문제 상황에 적어놓은대로 ViewModel과 Repository의 독립된 역할이 수행된다.
더 많은 문제 해결 과정이 궁금하시다면 밤하늘_문제해결일지를 참고해주세요.
앱 스토어 등록 과정
로고 만들기
저는 밤하늘을 떠올렸을 때 달과 별이 가장 먼저 떠올랐는데요. 그래서 Figma로 달과 별을 그리는 방법에 대해 고민했고, 이를 알려주는 유튜브 영상을 참고하여 로고를 제작했습니다.
그리고나서 앱의 브랜드 컬러를 그라데이션으로 잘 녹여내어 만족스러운 로고를 완성했습니다.
약관 작성하기
특정 항목을 선택하면 약관의 초안을 작성해주던 사이트가 운영을 중단하면서, 직접 필요한 약관을 작성하게 되었습니다. 처음부터 모든 약관을 작성하는데 시간이 너무 오래걸릴 것 같아, 밤하늘과 최대한 비슷한 서비스의 약관을 참고하여 개인정보 처리방침 과 서비스 이용약관을 수정하는 방식으로 진행했습니다.
앱스토어에 앱 등록하기
- [AppStore] 앱스토어에 앱 등록하는 방법을 모르겠다. (velog.io)
- 저는 상단 링크의 블로그를 참고하면서 등록했습니다.
- 등록 절차를 밟으면서 겪은 시행착오와 꿀팁 등을 아래에 적어놓았으니 참고해주세요!
App Store Connect에 신규 앱 생성하기
이름 : 밤하늘
번들 ID : com.example.everyonesTone
(저는 이미 출시해서 변경이 불가능하지만 여러분들은 꼭 변경해주세요..)
앱 미리보기 및 스크린샷 넣기
주의사항 : 스크린샷을 등록할 때에는 반드시 파일 내보내기 후 알파 체크 해제를 해주세요. 체크 해제를 하지 않으면 에러가 발생합니다..
iPad 이슈 : 아이폰에서만 사용 가능한 앱을 출시하려고 했는데, iPad 스크린샷도 같이 제출해야 한다고 하네요. 게다가 iPad가 없는데 iPad 스크린샷을 첨부하라고 해서 당황스러웠는데, iPad Simulator로 캡쳐 후 등록을 했는데 운이 좋게도 통과됐습니다.
빌드 업로드하기
주의사항 : 빌드 업로드 하기 전에 버전 정보 입력하기에서도 나왔듯이 로고의 png 또한 알파 체크 해제를 해주셔야 합니다. 안그러면 에러가 뜹니다.
마치며
단순한 앱 개발 경험을 넘어, 제가 직접 필요로 하는 서비스를 기획부터 배포까지 해결하면서
'내가 원하는 서비스를 직접 만들 수 있다' 는 자신감을 얻게 되었습니다.
비록 서비스 운영 관점에서 보면, 앱 배포는 끝이 아닌 새로운 시작이지만,
가장 큰 난관을 넘긴 초보 개발자로서 두려움보다는 설렘이 앞서네요 😊
Flutter의 매력에 빠져 앱을 개발하고 과정을 기록한 이 글이 여러분에게 도움이 되었기를 바랍니다.
읽어주셔서 감사합니다.
