[Web 개발] 아이들의 음악교실 'Let's Note' - 기능 문제 파악

직접적으로 Let's Note 홈페이지의 기능 문제를 파악하고 고쳐나가보지.

 

1. 악기 별 시각화 및 연주 기능 문제

 

이 기능의 목적은 해당 탭을 이용하여 특정 악기만 display하도록 해서

 

협업시 상대방의 편집이 내 작업에 지장이 가지 않도록 하는 것이었다.

 

근데 해당 기능은 현재 드럼만 가능하며, 피아노와 기타는 피아노의 버튼으로 같이 on/off 되고 있다.

 

그리고 해당 display는 연주에는 적용되지 않고 모두 On 상태로 플레이 되고 있다.

 

# 특정 악기만의 연주 소리를 듣는 것이 필요한가?

나는 필요하다고 생각한다.

 

퀄리티가 낮아보이더라도 필요한 기능들이 있어야 사용할 수 있다고 생각하고

 

드럼의 소리를 듣기 위해 플레이했는데 피아노 소리에 묻힌다면 불편함을 느낄 수 있다고 생각했다.

근데 이 문제는 프론트엔드에서 작업할 기능이기 때문에 일단 후순위로 두기로 했다.

 

 

 

2. 음성통화 기능 버그

 

 

공동 작업실인 만큼 Discord처럼 음성통화로 대화하며 재밌게 작업할 수 있게 기능을 추가했다.

 

해당 기능은 현재 폐쇠망 네트워크 안에서만 작동하며

 

라우터를 통해 다른 네트워크로 데이터가 전송되는건 차단되고 있는 듯하다.

 

해당 문제를 디버깅하여 해결하는 것이 중요할 것 같다.

 

게다가 이 웹에서 뒤로가는 동작을 제외하고 웹을 강제 종료하였을 때, 사용자가 사라졌지만 이름이 계속 남아있는 경우가 있다.

 

이 데이터는 웹소켓 종료, 그리고 음성통화 스트림 통신의 종료를 웹 강제 종료에도 적용해야 하는데 그렇지 않아서 생기는 버그이다.

 

따라서 이 문제도 해결하여야 한다. 이 문제는 작업자의 작업하는 커서 공유 기능에도 동일한 상황이다. 

 

 

 

3. 드럼 루프 개선

 

이 기능은 맨 왼쪽의 드럼 버튼을 통해 특정 패턴을 반복해주는 기능인데

 

이 페이지 끝까지 반복해주도록 구현해놓았다.

 

또한 드럼 패턴이 있는 상황에서는 버튼을 다시 클릭하면 해당 패턴을 전부 삭제해준다.

 

이 문제는 이 페이지의 끝까지 반복된 드럼이 노래가 끝나도 혼자 드럼을 갈기고 있다는 것인데

 

이 문제를 해결하기 위해선 사용자에게 얼마나 패턴을 반복할 것인지 추천해주는 알림을 추가하고,

 

이 알림에 기본 베이스는 사용자가 위에 찍은 악기의 노래를 마무리한 패턴까지 기본으로 제공해주어 확인을 클릭하면 빠르게 원하는 비트까지 제작되도록 변경해야 할 듯하다.

 

그러기 위해선 프론트엔드의 알림창 적용, 현재 악기의 최대 x좌표를 제공하는 api 제작, 드럼 알고리즘 수정이 필요할 것 같다.

 

먼저 가볍게 이 문제부터 슬슬 해결하기 시작해야겠다.

 

 

4. 커서 위치에 대응하는 피아노 위치 시각화

 

 

분명 왼쪽에 어느 음계가 해당 라인인지 제공하고야 있지만

 

시연 당시 체험했던 사람들이 가장 크게 불편함을 느낀 요소이다.

 

지금 내가 위치한 음계노트가 어느 음계인지 파악하는게 쉽지 않다.

 

따라서 내가 지금 마우스를 도 음계에 갖다댔다면 피아노의 도 음계의 색이 변하는 피드백 UI 개선이 필요할 것 같다.

 

이부분은 사용자 이용 측면에서는 제일 1순위로 개선되어야 한다고 생각되는 요소이다.

 

 

5. 스냅샷 영상 제작 기능

 

스냅 샷이란 내가 만든 작업물의 현재 상태를 fix하여 스냅샷이라는 것으로 만들고 해당 작품을 전시하여 사람들에게 공개하는 기능이다.

 

이 기능은 이 서비스 웹페이지 안의 작품 둘러보기를 통해 확인 가능하지만,

 

이 웹페이지를 사용하지 않는 사람에게 공유하기 위해서는 현재는 URL을 통해 이 웹페이지로 들어와 관람하도록 하고 있다.

 

 

이 방식은 요즘 핫한 SNS인 인스타의 스토리로 공유하기에는 URL이 좀 짜치는 방법이기 때문에

 

해당 스냅샷을 영상으로 생성하고 이 영상을 인스타로 공유하도록 하는 기능을 만들어 볼 수 있을 듯 하다.

 

 

6. 스냅샷 피드 기능 추가 및 수정

 

 

먼저 수정할 부분은 해당 피드의 제작 시간이다.

 

이 제작 시간은 잘못된 시간으로, 현재의 한국 시간이 아니라 미국 시간으로 된 것 같다.

 

따라서 이 문제를 해결해야 한다.

 

 

그리고 검색 기능을 추가하려 한다.

 

일단 검색창에 쓰는 대로 바로 동기화하는 건 심화이므로 먼저 검색 키워드가 포함된 작업실 이름을 보여주는 기능으로 추가하는 것이 먼저이다.

 

따라서 이 기능을 중순위로 두고 API부터 작업 예정이다.

 

 

 

7. foreign 키 비매칭

 

현재 내 코드는 자동으로 schema의 Foreign키를 제작해주지 않고 있다.

 

따라서 이 foreign 키를 수동으로 설정하고 있는데 아직 데이터베이스의 foreign키를 연결해주지 않았다.

 

이 foreign키를 설정해줘야 삭제할 때 한번에 관련 데이터가 깔끔히 삭제되기 때문에 먼저 이 작업부터 진행해야 할 것 같다.