루팡 (스마트폰 루프스테이션 어플리케이션)

구분

팀프로젝트 (2019 한이음)

개발인원

4명 (개발자 4, 그중 2명 UI 디자인 겸업)

프로젝트 개발 기간

19.7 ~ 19.11(5개월)

성과

2019 한이음공모전 한국정보산업연합회장 상

깃헙 주소

https://github.com/injae/Loopang

프로젝트 사용 스택

Kotlin(안드로이드, 클라이언트)
RxAndroid(클라이언트,UI)
Kotlin coroutine library(클라이언트, UI, 비지니스로직)
Figma (클라이언트, UI, 프로토타입제작)
Retrofit(클라이언트, 통신)
okHttp API(클라이언트, 통신)
Docker(서버)
Python(서버)
Flask(서버)
JWT(서버, 세션관리),
PostgreSQL, SQLAlchemy(DB, ORM)
GitHub, GitLab(버전관리)

기능

모바일 디바이스 만으로 루프스테이션을 활용한 음악 창작 방식을 그대로 재현하여 즉흥적으로 반주를 창작할 수 있습니다.
기존 녹음된 소리 위에 새로운 소리를 녹음하여 반주를 만들 수 있습니다.
점점 쌓이며 녹음되는 음원소스들을 레이어라고 부르는데, 이펙터라는 특수한 효과 모듈을 사용하여 레이어의 톤을 조정할 수 있습니다.
창작된 반주를 바탕으로, 반주를 조작하거나 보컬을 추가하여 하나의 곡을 만들 수 있습니다.
녹음 시 화이트노이즈를 제거하여 음질을 개선할 수 있습니다.
녹음 시 메트로놈 기능을 지원합니다.
제스처 기반 UI, UX를 제공합니다.
자신의 음원소스를 타인과 공유할 수 있습니다.
Feed에서 최신소스, Like top 5 리스트를 볼 수 있습니다
견본 이미지

시연 영상 링크
https://www.youtube.com/watch?v=Tu0eyBPZUZg
참여

역활
클라이언트개발
- 루프스테이션 로직 개발 및 리팩토링 (
- 최종믹싱 UI와 비즈니스 로직 연결 부분 개발 (이펙터 연결, 볼륨조절, 바이트 길이 시간 변환 등)
UI개발
- 로그인 및 회원가입
- 루프스테이션 UI ( 제스처 구현, 녹음, 메트로놈, Realtime Sound Visualizer, Sound Visualizer 등)
- 프로젝트 매니저 UI ( 메인 View, 사운드 프리뷰, 그 외 다이얼로그 등)
- 최종 믹서 UI ( 메인 View, 애니메이션을 이용한 뷰 크기 지속 변환 등)
  - 그 외 유틸리티 ( 증폭 값 배열 변환 로직, 프로젝트 중복체크 로직 등)
UI 디자인
- 스플래시, 로그인 및 회원가입 UI
- 루프 스테이션 메인 UI
- 프로젝트 매니저 UI
- 최종 믹싱 UI

내가 사용한 기술

Kotlin(안드로이드, 클라이언트)
Kotlin coroutine library(클라이언트, UI, 비지니스로직)
Figma (클라이언트, UI, 프로토타입제작)
PCM Data에 관한 기본 지식(SampleRate, BitRate 등)

문제 해결 과정

프로젝트 관리 측면

초기, 각 구성원의 코드를 하나로 취합하기 어려움을 느낌
Github를 사용하여 협업하는 방법을 익혀 해결
각자 맡은 파트의 진행상황을 상시 파악할 수 있게 되었고, 빠르게 코드 리뷰를 할 수 있게 되었음.

UI 프로토타입

프로젝트 초기에 UI의 프로토타입을 종이나 칠판에 그려서 개발하였음.
깔끔하게 그리는데 시간이 오래 걸렸고, 미술능력을 부모님께 상속받지 못해 알아볼 수 가없었음.
Figma 라는 프로토타입 솔루션을 알게되어, 기본적인 사용방법과 추출, 트리거 기능에 대해 공부함
UI/UX 설계 사항을 더 자세히 전달할 수 있게 됨.

녹음 상황 실시간 Visualizing

Android에서 제공하는 Waveform은 기본 제공 녹음 라이브러리에 특화되어 있어 프로젝트에 적용하기 무리가 있음.
직접 만든 모듈에 적용하기 위해 OpenSource API를 확인하였지만, 모두 목적에 부합하지 않음
Custom View 제작 필요성을 느낌.
적용한 해결방안1 : 팀원들의 코드를 모두 분석 및 음원소스가 어떤 형태로 저장되는지 파악
적용한 해결방안2 : 증폭값을 View에 맞게 계산해내는 알고리즘 작성 및 언제나 View에 녹음된 데이터 시각화
적용한 해결방안3 : Custom View에 대한 별도의 공부로 원하는 스타일의 파형을 그려 Realtime Visualizing 문제 해결

작업파일 로딩 문제

각자 다른 영역에 있는 프로젝트뷰어와 프로젝트 창 간에 데이터 송수신 문제 발생
적용한 해결방안 : 송수신 작업을 추상화 하여 인터페이스를 두어 액티비티 전달

리스트 뷰 어댑터의 뷰 재활용 문제

리스트뷰는 아이템의 개수에 맞춰 모든 뷰를 생산하지 않고 몇개의 아이템 뷰를 만들어 재활용하는 방식
적용한 해결방안 : 리스트뷰에 ViewHolder 패턴을 도입하여 문제 해결

일정한 속도로 크기가 변화하는 뷰

별도의 스레드를 사용하여 레이아웃파라미터를 변경하는 것은 관리가 몹시 어려움.
UI Thread 동작 방식으로 인해 변경에 대한 결과 반영이 즉시 되지 않는다는 문제점을 가짐.
변화 값을 단순 정수로 관리하기엔 값들이 소스 등지에 산재하게 되어 관리가 어려움
각 시간 단위마다 비례식을 계산하여 변환하기 위한 함수의 필요성이 느껴짐
적용된 해결 방안 1: 시간 대비 픽셀 크기를 나타내는 클래스를 별도 제작하고 메소드로 변환식을 구현.
적용된 해결방안 2: 애니메이션에 대해 공부하여, 무한 반복되는 애니메이션을 적용

지속적으로 크기가 변환되는 뷰를 아이템으로 가지는 리스트뷰 문제

리스트뷰는 아이템의 개수에 맞춰 모든 뷰를 생산하지 않고 몇개의 아이템 뷰를 만들어 재활용하는 방식.
아이템이 되는 뷰의 크기가 계속하여 업데이트 되는 중 교체되므로 널 포인터 문제가 발생함.
갱신될 때 마다 뷰를 새로 만들게 되면 오버헤드가 증가
적용된 해결 방안 : 리스트뷰를 리니어뷰로 교체, 리스트뷰와 같은 기능을 갖도록 별도의 함수를 추가 제작하여 문제 해결.

루팡 (스마트폰 루프스테이션 어플리케이션)

구분

개발인원

프로젝트 개발 기간

성과

깃헙 주소

프로젝트 사용 스택

기능

견본 이미지

시연 영상 링크

참여

역활

내가 사용한 기술

문제 해결 과정