7. 악보 검색 / 등록 페이지 제작 (5) - 악보 추가 기능 만들기(1)

개인적으로 구상에 가장 많은 시간을 쏟았던 부분이다.

지난 포스팅이후로 지금 포스팅을 쓰는 시점까지 계속 구상만 했다..

 

 

처음에 UI를 참고하려고 했던 어플리케이션은 Chordify 라는 앱이다.

박자칸을 나눠두고 각각의 칸에 코드를 적어둔다.

노래가 나오면 노래에 맞게 박자가 이동하며 코드가 적혀있는 칸의 배경이 바뀐다.

 

이 앱의 단점은 몇가지가 있다.

사실 지금 만드는 앱을 구상하게된 계기이기도 하다

 

1. 유튜브 음원으로부터 추출한 코드의 정확도가 떨어진다.

2. 코드가 단순하다.

3. 박자가 단순하다.

4. 코드와 박자를 수정할 수 없다.

 

그래서 맨 처음 생각한 것은

 

1. 음원에서 추출하지 말고 집단지성을 이용하자.

2. 더 복잡한 코드를 입력할 수 있게 하자.

3. 더 복잡한 박자에 맞게 입력할 수 있게 하자.

4. 누구나 수정할 수 있게하자.

 

이것이 처음 떠올린 아이디어였다.

그러나 2번과 3번을 동시에 구현하는 과정에서 문제가 생겼다.

 

처음에는 더 복잡한 박자를 입력할 수 있도록

칸을 더 자세하게 쪼개기를 선택했다.

그랬더니 각각의 칸이 너무 작아져 복잡한 코드를 쓸 수가 없었다.

C, D, E 같은 코드가 딱 칸에 맞았고

Cm7 같은 코드는 길이가 길어서 넘쳐보였다.

 

그 다음으로 고민한 것은

C, D, E가 칸에 맞는다면 루트만 칸에 넣고

m7, add2, dim 같은 부가적인 요소는 칸 밖으로 나와도 상관 없도록 하는 것이었다.

그러나 이것을 리사이클러뷰, 스크롤뷰 여러가지 위젯으로 구현하는 것을 고민하다가

도저히 구현 방법이 떠오르질 않아서 포기했다.

 

그냥 텍스트뷰를 위에 붙이면 될 것 같았는데,

내가 구현하려는 것은 4번.

각각의 칸을 선택했을 때 수정이 가능하도록 하는 것이 핵심이다.

그러나 수정을 어떻게 해야할지 도저히 감이 안왔다.

 

(물론 막말로 텍스트뷰를 덕지덕지 붙이고

각각에 아이디를 준 다음 참조해서 수정할 수도 있겠지만..

이런식으론 구현하고 싶지 않았다.)

 

그래서 다시 구상단계로 돌아갔다.

그리고 인터넷에 돌아다니는 코드악보들,

현재 플레이스토어에 나와있는 코드악보모음 앱들을 다시 살펴봤다.

그리고 그냥 칸맞추기를 포기하기로 했다.

대신 기존 코드악보처럼 가사와 코드를 같이 써넣는 방식을 택하기로 했다.

 

 

보통 인터넷에 나와있는 악보,

플레이스토어에 나와있는 코드 악보들은 이런 형식을 띄고 있다.

하지만 이런 악보는 만드는게 매우 힘들다.

 

 

거의 코딩하듯 편집을 해야 하는데, 그마저도 코딩보다 불편하다.

Cm7(b5), G7sus4 같은 코드를 쓰면서 가사와 줄맞춤을 고려하고..

매우 복잡하지 않을 수가 없다.

 

그래서 여기에 칸을 쓰는 아이디어를 가져왔다.

코드를 쓰고, 그 아래에 가사를 쓰면

그 가사가 발음 되는 시점이 그 코드가 시작되는 시점으로 하는 것이다.

그리고 고정된 칸이 아닌 길이가 변하는 칸을 쓰는 것을 생각했다.

 

www.ezcho.com/chop/3254

코드 자료실 - 아이유 - 블루밍(Blueming)

이 분이 작성하신 것과 비슷한 느낌이다.

차이점은 칸의 길이가 가사의 길이에 따라 달라져서

이 분의 것처럼 각 칸마다 가사글씨 크기가 제각각이지 않게 보이도록 하는 것이다.

한 줄에 들어가는 칸의 수는 가사 길이에 따라 가변적이 되도록 할 것이다.

 

이 사이트에서는 칸의 구분을 박자로 활용하고 있지만,

나는 칸의 구분을 '코드의 선택 영역'을 시각적으로 보여주는 역할 수준으로 하고자 한다.

겉보기엔 다음과 같이 각 라인마다 다른 길이로 보일 수 있도록 하는 것이 목표이다.

 

 

그리고 많은 코드 악보가 한줄에 노래 전체를 담고 있다.

1절 2절 후렴은 반복되는데 좀 더 효율적으로 악보를 쓸 수 없을지 고민하다

칸을 활용한 김에, 악보에 쓰이는 악상기호도 칸에 맞춰 활용하는 것을 떠올렸다.

 

도돌이표, 디카포, 달세뇨, 코다, 피네 등의 악상기호를 활용하거나

곡의 파트에 A, B, C 등 별칭을 붙여

A1 - B - A2 - B - B - C 와 같이 곡의 진행 순서를 표기하는 것이다.

(실제로 내가 있는 교회 찬양단에서 활용하는 방식이기도 하다)

 

그렇게 새로 만든 레이아웃은 다음과 같다.

 

단순하게 빈 화면과 하단에 +, - 버튼이 있는 구조이다.

 

+ 버튼을 누르면 다음처럼 코드와 가사를 입력하는 칸이 추가된다.

코드는 휴대폰 내장 키보드가 아닌 별도의 입력용 레이아웃을 사용할 예정이고

가사는 휴대폰 내장 키보드로 입력하게끔 EditText 위젯을 활용했다.

 

가사를 바꿔준다음

 

그 뒤로 계속 칸을 추가할 수 있다.

 

만약 추가할 공간이 없다면 다음 줄로 내려서 추가하도록 했다.

 

이걸 구현하기 위해 좀 복잡한 방법을 썼는데,

그리드 레이아웃 / 테이블 레이아웃을 활용하면 열 수가 정해져있어 불편하다고 생각했다.

 

그래서 스크롤뷰에 vertical 리니어레이아웃을 넣고,

그 안에 horizontal 리니어 레이아웃을 동적으로 넣는 방법을 택했다.

각각의 칸을 새로 추가하기전 사이즈를 체크해서 사이즈가 모자라면

그 다음 줄에 리니어 레이아웃을 동적으로 추가하고 거기에 아이템을 추가하는 방식이다.

 

이제 이 방법의 문제점이라면 차곡차곡 데이터를 쌓는 것까지는 괜찮았으나

중간에 데이터를 수정, 삽입, 삭제하는 것이 문제였다.

 

해결책은 두가지로 고민중이다.

 

1. 중간 데이터 수정, 삽입, 삭제를 못하도록 하고,

스택처럼 최근 데이터부터 지운뒤 다시 채우도록 한다.

 

2. Relative 레이아웃과 연결리스트를 활용하여 중간에 추가,수정,삭제를 한다.

 

가능하면 2번으로 구현하려고 한다.

내가 상상하는 사용방법은 코드를 일단 다 추가하고나서

각각의 코드마다 가사를 맞게 넣어주는 방식의 사용방법을 구상했기 때문이다.

코드쓰고 가사쓰고, 코드쓰고 가사쓰고를 반복하는 것은 너무 불편해보인다

 

또 구현하고 싶은 기능은 다음과 같다.

가사를 입력하다가 가사가 길어져서 화면이 부족해지면 자동으로 다음줄로 넘어가지는 것

반대로 가사를 지워서 화면에 여유가 생기면 다음줄의 내용이 이전 줄로 돌아오는 것.

사용자가 다음줄로 줄넘김을 하고 싶다면 자유롭게 줄넘김을 할 수 있는 것.

 

워드나 메모장에서 편하게 타이핑 하듯 코드 악보를 작성할 수 있도록 하는 것이 목표다.