16. 악보 구성 수정, 악보 검색 기능 추가

원래는 악보를 구성할 때, 페이지 별로 구성하는 것을 생각했었다.

 

verse 페이지 작성하고, chorus 페이지 작성하고, bridge 페이지를 각각 만든다음

'전체' 페이지에는 각 페이지에 작성한 코드를 이리저리 조합해서 만들자!

 

이게 내 처음 아이디어였는데, 생각보다 '전체' 페이지에서 각 페이지의 코드를 합치는게 복잡했다.

단순히 각 페이지의 코드를 읽어서 붙이는 것이라면 상관없겠지만,

(사실 이것도 구현하기가 너무 귀찮았다.)

 

이왕 각 페이지의 코드를 참조하는거, '전체페이지의 코드'와 '각 페이지의 코드' 를 서로 연동해서

전체 페이지에서 수정한 코드가 각 페이지에서도 수정되고,

각 페이지에서 수정한 코드가 전체에서도 수정되도록 하고 싶었다.

 

이걸 구현하려면, 결국 모든 코드셀에대해 GlobalKey를 달아줄 필요성이 있었는데, 이걸 수정하는게 너무 귀찮았다.

그리고 이미 파이어베이스 연동, Provider 라이브러리로 구조를 수정하면서 계속 검색하고, 공부하다보니

뭔가 새로운 걸 배우는 것에 대해 많이 지쳐있었어서 GlboalKey까지 공부하고 싶지 않았다 ㅋㅋ..

(어차피 정말 필요한 때가 오면 그때 다시 공부하게 될 테니까..)

 

그래서 '페이지' 구성대신 '블록' 구성으로 수정했다.

블록구성은 기본적으로 한 화면안에 모든 코드를 다 넣되,

한 화면을 여러 블록으로 쪼개 블록단위로 악보를 구성하도록 했다.

 

수정한 악보 편집페이지의 모습이다.

아이유의 '내 손을 잡아' 악보를 직접 이 편집기로 만들어서 넣어둔 상태인데, 생각보다 쓸만하다 ㅋㅋ

 

이렇게 하나의 셀을 선택하면, 그 셀이 속한 블럭 색이 바뀐다.

이렇게 선택한 블럭에 대해 이름을 수정하거나 블럭을 삭제할 수 있다.

 

블럭 추가는 이렇게 악보 맨 하단에서 할 수 있다.

중간에 블럭을 추가하는 기능은 만들지 않았다.

어차피 이미 유명한 곡을 악보로 만드는 경우가 대부분일텐데,

빼먹고 안넣는 경우는 없을 것 같았다.

 

블럭 추가버튼을 누르면 이렇게 빈 블럭을 만들지, 기존에 존재하는 블럭에서 복사할지 고를 수 있다.

 

복사하기를 고르면 이렇게 현재 존재하는 블럭들의 리스트가 악보 순서대로 나온다.

포스팅을 쓰면서 갑자기 든 생각인데, 이렇게 스크롤 가능한 리스트가 나왔을 때

사용자가 이 화면이 스크롤이 가능한지, 그냥 이대로 고정된 화면인지 알 수 있게 하면 좋겠다는 생각이 든다.

(스크롤 바에 대해서 공부해봐야겠다.)

 

그리고 이걸 구현하면서 'SingleChildScrolllview' + 'Column' 조합보다

단순히 ListView 위젯의 효율성이 더 좋다는 걸 알았다.

 

전자는 컬럼 내부의 모든 위젯을 준비한 상태에서 스크롤을 부여하는 것이고,

후자는 스크롤하다가 위젯을 그릴 필요가 있을 때 그리는 방식이라 더 효율적이었다.

 

사실 지금도 셀이 많은 '내 손을 잡아' 악보를 로드하는데 약간 렉이 걸리는데,

그나마 ListView로 바꾸고 나서 성능이 개선되었다.

디버그모드에서는 악보를 로드하는데 약 3초 정도 소요되었고,

성능을 체크하는 프로파일 모드에서는 약간 잔렉이 걸리는 느낌으로 바로 악보가 나온다.

 

TMI지만, 위 악보는 다른 악보를 참고한 뒤, 내가 직접 연주해가면서 악보를 만들었다.

이건 악보 뷰어의 모습이다.

블록 이름에 대괄호를 씌워서 가사와 구분할 수 있게 하였고,

뷰어 모드에서는 각 가로줄의 간격을 조금 더 넓게 하였다.

 

그리고 자동스크롤 기능도 넣었다. (사랑해요 스택오버플로우!)

우측 상단에서 속도 스피드를 1~10 사이로 정한다음, 재생버튼을 누르면 해당 속도에 맞게 자동 스크롤 된다.

---

그리고 악보 검색 기능도 만들었다.

 

사실 검색 기능을 만드는 부분이 약간 까다로웠는데,

놀랍게도.. 파이어스토어의 NoSQL에서는 like 연산자를 지원하지 않았다.

즉 오라클이라면 where song_title like '%:query%' 이렇게 간단하게 쓸 수 있는 검색 조회 쿼리를

파이어스토어에서는 쓸 수 없었다.

 

스택오버플로우를 열심히 뒤져가면서 공부한 끝에 비슷하게 만들기는 했는데,

like 'query%' 이런 꼴로 밖에 만들지 못했다.

검색해보니 %query% 형태로 만드려면 %query 와 query% 두개의 결과를 합쳐야 된다고 하는데

그것까지는 너무 힘들었다 ㅋㅋ

 

그리고 곡 제목을 정확하게 쳐야지만 검색이 되는게 조금 아쉬웠다.

"내 손을 잡아" 가 제목이라면 "내손을 잡아" 이렇게 검색했을 때 안나온다.

띄워쓰기까지 정확하게 일치해야 검색이 된다.

 

이렇게 해당하는 악보가 리스트에 나오고,

리스트에서 악보를 탭하면 바로 해당 악보의 뷰어로 이동하는 방식이다.

 

현재 고민하는 것은, 플레이스토어 처럼 추천 검색어만 보여주고

해당 검색어를 선택하면, 검색 결과를 따로 보여줘서 사용자가 선택하게 할 지,

아니면 지금처럼 이 창에서 바로 검색 결과를 볼 수 있도록 할 지 어떤 걸 선택하느냐이다.

 

포스팅을 하면서 떠오른 생각은 지금처럼 이렇게 검색으로 리스트를 볼 수 있게 만들어 두고,

메인 화면에서는 추천 악보, 난이도별 악보, 장르별 악보, 이런 식으로

각 분류별로 악보를 나누어 보여주는 게 나을 것 같다는 생각도 든다.

---

지금은 구글 로그인에 이어 카카오톡 로그인을 구현하고 있는데,

로그인 플랫폼이 여러개가 되니 코드를 구성하는게 힘들어져서 따로 로그인 페이지를 빼는 것을 고민하고 있다.

로그인 페이지를 첫 화면으로 만들고, '로그인 없이 사용하기'를 선택하면

그때는 악보를 보는 것만 가능하도록 하는 것이다.

아니면 그냥 지금처럼 구글로만 로그인하게 하는 것도 고려 중이다. (귀찮음)