https://play.google.com/store/apps/details?id=com.juann.akchak
많은 사람들이 악기 연습을 할 때 여러 가지 이유로 어려움을 겪습니다. 악기를 연습해도 실력이 빠르게 늘지 않거나, 혼자 연습하느라 지루하고 동기부여가 될만한 자극이 부족할 때도 있습니다. 이런 문제들을 해소하기 위해 제작한 앱이 '악착'입니다.
'악착'은 시작할 때 목표를 정하도록 합니다. 정할 수 있는 목표의 종류는 음악과 교본이 있습니다. 연습할 목표를 정하고나면 본격적으로 연습을 시작할 수 있습니다.
연습을 시작하면 '악착'이 카메라를 통해서 사용자의 모습을 녹화하게 됩니다. 악기를 연습할 때 자기의 연주를 녹화해서 모니터링하는 것은 정말 중요합니다. 카메라로 녹화된 영상에서는 자신의 연주 자세나 박자나 소리에 어떤 문제가 있는지 알 수 있게 됩니다. 하지만 많은 사람들이 귀찮다는 이유로 하지 않고 있습니다. '악착'을 통해서 자신의 연주를 녹화해서 내 실력을 점검할 수 있습니다.
연습을 끝내면 '악착'에서는 다른 사용자들과 자신의 연주 영상을 공유할 수 있도록 영상 자르기 기능을 제공합니다. 별도의 툴 없이 영상에서 잘 연주했다고 생각한 부분만 잘라서 영상을 업로드할 수 있습니다. 손쉽게 섬네일 제작할 수 있는 기능도 제공합니다.
영상 업로드를 완료하면 자신의 연습 시간이 업데이트 되며, 프로필 화면에서 주간 평균 연습 시간과 함께 연습 시간을 차트로 확인할 수 있습니다. 다른 사람들의 연주영상을 홈화면에서 조회할 수 있습니다. 다른 사람들의 연습하는 모습을 보면서 자극을 받을 수 있습니다.
- typescript
- react native
- github
- react-navigation
- reduxjs
- ffmpeg-kit-react-native
- react-native-paper
- react-native-video
- react-native-video-controls
- react-native-vision-camera
- react-redux
- validator
- ffmpegkit 패키지를 이용하여 별도의 인코딩 없이 영상 자르기와 섬네일 추출
- redux 이용해서 현재 user의 접속 정보를 Global 변수로 사용
- axios interceptor를 이용해서 refresh token을 자동으로 재발급 받도록 하기
- react-native-paper의 ui component 사용하여 일관성 있는 theme 유지
- expo-secure-store를 이용하여 jwt token 저장
- react-native-video-controls이 typescript 지원하지 않아서 definition file 만듬
- validator를 이용해서 frontend에서도 예외처리를 하여 서버에 부담을 덜어냄
- localize를 이용해서 현재 사용자의 timezone 얻기
- react-native-chart-kit 이용해서 서버에서 받은 데이터로 차트 생성
- react-native-fs 이용해서 파일을 aws s3에 업로드 및 파일 삭제
- 피드백을 받아보니 목표를 설정할 때 사용하기 어렵다는 후기가 있었다. 연습을 시작할 때 목표를 쉽게 설정할 수 있도록 ui 개선이 필요하다.