현재 출시 준비 중인 앱으로 인해 소스 코드 중 일부를 Github에 올리지 못하는 점 양해 부탁드립니다.

Github : https://github.com/sgsgsg09/only_tempo/tree/for_viewers

<aside> 💡 [README.MD]

ONLY_TEMPO 음악을 연주할 때 정확한 리듬은 필수적입니다.

하지만 기존의 리듬 생성 방식에서는 핸드폰 사운드를 통해 조절해야 하는 번거로움이 있으며, 이로 인해 다른 음량까지 변하는 등 불편함을 느끼는 경우가 많았습니다.

이러한 문제를 해결하기 위해 개발된 앱인 ONLY_TEMPO,

직관적인 인터페이스와 손쉬운 설정 변경을 통해 편리하게 박자를 조절하고 볼륨을 설정할 수 있도록 설계되었습니다.

사용자는 간단한 조작만으로 원하는 리듬을 설정하고, 보다 연주에 집중할 수 있습니다.

기능 ✨

✅ 직관적인 UI 제공

✅ 다크 모드 지원

✅ 상태 저장기능 지원

💻 사용된 패키지 및 사용 이유

• 💡 상태 관리 및 의존성 주입
• 💡 데이터 모델링 및 직렬화
• 💡 데이터베이스 및 로컬 스토리지
• 💡 오디오 재생
• 💡 코드 생성 및 빌드 도구
• 💡 코드 린팅 </aside>

UI 화면 구성 방식.

손쉬운 BPM조절.

직관적인 볼륨 조절

다크 모드 지원

프로젝트의 전반적인 흐름과 문제 해결 과정

1. 해결해야 하는 문제

• 모바일 화면 구성: 다양한 모바일 기기(특히 iOS와 Android)의 화면 크기 및 해상도가 달라, 각각에 최적화된 UI 구성이 필요했습니다.
• 테마 반응성: 다크 테마와 라이트 테마 전환 시, 사용자의 입력에 즉각 반응하는 UI 구현이 요구되었습니다.
• 실시간 볼륨 조절: 다이얼 위젯을 통해 UI상에서 볼륨을 조정할 때, 즉각적으로 소리가 변경되지 않고 앱 전체를 새로 고침해야 하는 문제 발생.

예상되는 문제점

• 플랫폼 간 UI 차이: iOS와 Android의 화면 처리 방식 차이로 인한 레이아웃 이슈 발생 가능성
• 상태 관리 문제: 볼륨 조절 시 불필요한 위젯 재빌드로 인해 음향 처리에 지연이 발생할 위험
• 데이터 지속성: 사용자 설정(볼륨, 테마 등)을 앱 재실행 후에도 유지해야 하는 요구사항

2. 문제 구체화 및 로직 설계

• 화면 구성: 다양한 모바일 기기에 대응하기 위해 ScreenSize를 기반으로 레이아웃을 동적으로 구성하도록 설계
• 테마 관리: theme 속성에 provider를 설정하여 사용자의 다크/라이트 테마 입력에 실시간으로 반응하도록 구현
• 볼륨 조절 로직:
  • 초기에는 StatefulWidget에서 다이얼 위젯을 사용해 볼륨 조절을 구현하였으나, ViewModel에 업데이트 후에도 즉각적인 소리 변경이 이루어지지 않는 문제 발생
  • 해당 문제를 해결하기 위해 상태 관리 패턴인 Riverpod를 도입, ref.read(tempoModelProvider.notifier).updateVolume(widget.id, newVolume); 방식으로 불필요한 위젯 재빌드를 줄이는 로직으로 개선