14. 악보 편집 기능 만들기 - UI수정, Provider, 편집한 악보 저장

악보 편집 기능의 핵심 기능을 완성했다.

 

3일 동안의 커밋 내역이다. 변경사항이 정말 많다.

3일동안 밥먹고 자는 시간 빼고 플러터로 코딩만 했다...

(코딩 : 아키텍처 고안 : 디버깅,플러터 공부 = 3 : 2 : 5 정도 인 듯하다.)

 

1. DB에 코드를 저장하고, 저장한 코드를 불러오는 기능을 구현했다.

 

코드 정보를 포함하여 새 악보를 추가하는 createSheet, 기존 악보를 불러오는 getSheet

딱 '코드'만 저장하는게 아니라 코드를 포함한 줄 건너뜀과 같은 부분도 저장하도록 했다.

 

2. 코드셀을 보여줄 때, 높이가 높아지면 아래 코드가 키보드와 버튼 UI에 가려지는 문제를 수정했다.

 

탭과 탭뷰를 Expanded 위젯으로 감싸서 넣고, 그 아래에 버튼과 키보드 위젯을 추가하였다.

원래 Scaffold() 위젯의 body 속성으로 코드셀을 넣어주고, 커스텀키보드와 버튼UI를 bottom 속성에 넣었었다.

그런데 bottom 속성은 기본적으로 body위에 스택처럼 덮어서 UI를 보여주는 속성이었다.

그래서 body속성값을 column을 기본 위젯으로 변경하고, 키보드와 버튼을 컬럼 아래에 추가했다.

 

또한 코드 셀의 높이가 높아지면 스크롤을 할 수 있도록 만들었다.

당연히 구현했어야 하는 기능인데 항상 코드셀 1, 2개에서 많아야 2줄 정도로 테스트를 하다보니

하마터면 전혀 생각을 못할 뻔 했다.

 

3. 코드 저장방식을 절대위치 저장에서 상대위치 저장 방식으로 변경했다.

 

기존에는 keyList의 인덱스로 코드를 저장했지만, 이제는 버튼의 인덱스로 코드를 저장하고, indexToKeyOffset을 이용해 키로 변환한다.

버튼 인덱스와 코드 키 인덱스가 일치하지 않다보니 복잡하게 변환함수를 써서 맞춰줬는데,

생각해보니 상대 위치를 알고 노래의 key를 알면 코드 절대위치를 알 수 있었다.

또한 상대위치로 저장하면 노래 key를 수정했을 때 코드의 절대위치를 계산하는 것도 간단하고,

무엇보다 코드로 구현할 때 복잡하지가 않아서 좋다.

 

이에 따라 현재 저장한 코드를 코드스트링으로 변환하는 함수에 song key를 매개변수로 입력받도록 했는데,

toString() 메소드는 오버라이딩이 안돼서 함수 이름을 그냥 바꿨다.

모든 클래스를 기본적으로 오브젝트로 보는 건지, Object를 상속한 것도 아닌데 왜 toString이 들어있는 건지 모르겠다.

(dart언어의 오묘함..)

 

4. 가사 옮기기 기능을 추가했다.

 

오른쪽이 비어 있는 셀이라면

셀을 추가하고 가사를 옮긴다.

옆에 셀이 존재하면

내용을 덮어쓴다.

한 셀에 입력한 가사에서 현재 커서 위치 기준으로 오른쪽 부분을 그 오른쪽 셀로 옮기는 기능이다.

이 기능을 추가한 이유는 인터넷에서 가사를 복사하고 한 셀에 붙여넣은 다음

가사를 끊어가면서 오른쪽으로 쭉쭉 밀어내기 쉽도록 하기 위함이다.

 

아무리 코드를 입력하기 편해도 가사를 일일히 '핸드폰으로' 타이핑 해야한다면

나라도 코드악보를 만들고 싶지 않을 것이다.

하지만 복사한 가사를 적당히 끊어 옆으로 밀어내는 버튼이 있다면 수고로움이 줄어든다.

하지만 인터넷에 가사가 없다면 얄짤없이 손수 타이핑 해야한다.

 

5. 앱 내부에서 코드와 가사의 저장 방식을 Provider를 사용하도록 수정했다.

 

Provider는 메인보다, 전역 상태를 사용하는 객체들의 상위 위젯에 넣어주는게 좋은데, 왜인지 오류가 나서 그냥 메인에 넣어버렸다.

가사 옮기기 기능을 구현하는 도중, 가사를 옆의 셀로 옮겼는데,

오른쪽 셀의 상태가 갱신이 안되는 문제가 발생했다.

포커스를 직접 주면 상태가 갱신이 되는데, 자동으로 갱신이 안되어서 답답했다.

문제점은 이해했으나 해결책을 찾을 수 없어 결국 다시한번 Chord 객체의 저장 위치를 수정했다.

 

상태를 전역으로 관리할 수 있도록 Provider 라이브러리를 추가하여 사용하였고,

상태를 관리할 클래스로 Sheet 클래스를 만들어

Chord 객체, 가사, 현재 선택한 코드 위치 등을 전반적으로 관리하도록 했다.

 

6. ChordCell 객체에 읽기전용 속성을 추가했다.

 

코드는 임의로 넣었다 실제로 코드와는 다르다.

새 악보를 추가하는 기능을 만들면서, 이 기능에서 사용된 UI를 악보를 보는 기능에도 그대로 사용하고 싶었다.

그래서 읽기 전용 모드를 만들어 악보를 조회할 때는 수정을 할 수 없도록 했다.

이렇게 하니 중복코드를 줄일 수 있어 프로그램 구조가 단순화되었고,

악보를 조회할 때는 단순히 readOnly 속성값을 false로 변경만 하면 되니, 구현도 간단해졌다.

 

디자인도 읽기모드에서는 칸 테두리를 제거해 가독성을 높였다.

저 사진을 보니 칸과 칸 사이에 글자 간격을 좀 더 넓히면 좋겠다는 생각이 든다.

 

7. 버튼 UI 수정

 

코드 작성 모드에서는 기준 커서가 없기에 가사를 옮길 수 없다.

현재 사용불가능한 위치에서는 버튼이 비활성화 된다.

코드추가/코드삭제/줄내림/줄내림 취소 라는 한글로 적힌 버튼을 직관적인 아이콘 버튼으로 수정하였다.

추가는 초록색, 변경은 검은색, 삭제는 빨간색으로 표기해서 직관적으로 버튼의 기능을 알 수 있게 하고자 노력했다.

물론 아이콘은 모두 Material 내장 디자인 아이콘이다.

---

이것이 3일동안 정신없이 달려서 만든 결과물이다.

물론 아직 만들어야 하는 부분은 많이 남았다.

 

사실 전혀 생각을 못하고 있던 차에, 안드로이드 스튜디오의 TODO 기능을 발견했다.

 

주석으로 // TODO 키워드를 쓰면, 해당 주석 내용은 TODO로 인식되어 IDE하단의 TODO 리스트에 추가된다.

그때 그때 이건 나중에 수정해야지, 추가해야지 하고 떠오른 기능들을 메모해둘 수 있어서 편리하다.

 

안드로이드 스튜디오의 Git 기능은 아직 어떻게 써야할지 모르겠어서 그냥 Terminal을 이용하고 있다.

소스트리 없이 시각적으로 현재 브랜치와 커밋 현황을 볼 수 있다는 점에 의의를 두고 있다.

 

내일부터는 TODO 리스트를 하나씩 지워가면서 '악보 조회' 기능의 UI 구상을 해보고자 한다.