12. 악보 편집 기능 만들기 - 커스텀 키보드 토글 버튼 기능 구현

오늘은 하루종일 커스텀 키보드의 토글 버튼 기능을 구현했다.

이 작업이 굉장히 복잡해서 하루종일 머리를 싸매면서 만들었다.

 

오늘 구현한 것은 토글 버튼에 색을 입히고,

코드 구성 변수에 따라 토글 버튼 상태를 조정하는 일이었다.

 

최종 결과는 아래 사진과 같다.

 

색이 굉장히 알록달록해졌다ㅎㅎ

기존 키보드 배경색이 너무 진한 것 같아서 버튼의 색을 강조하기 위해 색을 연하게 바꾸었다.

그리고 선택된 버튼들은 같은 종류끼리 같은색을 가지도록 하였다.

(이게 제일 힘들었다.. 코드가 복잡해진 요인 1순위)

 

위 키보드가 나타내는 코드는

Cm7(#13)add4/G# 이라는 굉장히.. 이상한 코드이다 ㅋㅋ

 

이걸 구현할 때 제일 힘들었던 부분은 코드 타입을 정하는 부분이었다.

특히 저 '숫자'가 들어가는 부분이 구현하기 굉장히 힘들었는데,

하나의 코드에서 숫자(텐션)가 들어가는 위치가 꽤 자유롭기 때문이다.

 

C2, Cadd2, Cm7, CM7(#9) 와 같이 위치가 제각각이고 여러번 중복해서 들어가기도 한다.

나는 이걸 구현하기 위해 숫자텐션의 위치를 나누어서 변수로 모두 만들고, 그때그때 값을 바꾸도록 했다.

 

우선 가장 마지막으로 입력한 코드의 종류를 기억하게 한다.

루트코드의 C를 입력하면, 최근에 입력한 코드의 종류는 루트이다.

이 상태에서 숫자 2를 누르게 되면 이 숫자 2는 C2 의 2를 의미한다.

이렇게 루트코드 바로 옆에 나오는 텐션을 "루트텐션"으로 명명해서 이름을 넣고

 

Cm7과 같이 m 다음에 나오는 숫자를 마이너텐션

CM11 과 같이 M 다음에 나오는 숫자를 메이저텐션

Cm7(b5) 와 같이 코드 맨 마지막에 덧붙여서 나오는 숫자를 그냥 '텐션' 으로 명명하였다.

 

add2, sus4, aug7, dim7 과 같이 특수한 종류에 붙는 숫자는 따로 묶어서 한번에 관리했다.

어차피 add, sus, aug, dim 는 따로따로 나올 수 밖에 없기 때문이다.

---

지금 추가로 구현할 예정인 것은 토글의 해제를 좀 더 쉽게 하는 것이다.

예를 들어 add2를 구현하기 위해 add와 숫자 2를 선택한 상태에서

만약 add를 다시 눌러 add를 해제하면 숫자 2도 같이 해제되는 방식이다.

 

또한 dim, aug는 m, M 와 같이 나올 수 없는 구조이다.

따라서 dim, aug를 선택하면 기존에 선택한 m, M이 자동으로 해제하는 것도 고려 중이다.

 

내일은 위에 말한 내용을 구현하는 것에 더해,

저렇게 구성한 토글 조합으로 만든 코드를 실제 코드로 변환하는 기능을 구현할 것이다.

단순히 텍스트를 순서에 맡게 붙이면 되지 않나 싶지만,

사실 근음/베이스 코드는 키에 따라서 값이 유동적으로 변할 수 있다.

 

그래서 이렇게 길다란 하나의 리스트 안에 모든 코드를 넣어놓고

루트, 베이스 코드는 이 리스트의 '인덱스'값을 저장하도록 하였다.

그래서 키를 1키 올리면, 저장된 인덱스값을 일제히 1 올리면 1키를 올린 것과 같은 효과를 보이게 된다.

하지만, D#, Eb 처럼 같은 의미를 가졌지만 다른 표기를 쓰는 코드에 대해 어떤 것을 선택할 지는 알 수가 없다.

그래서 이를 정해주기 위해 상황에 맡게 주어진 인덱스값에 따라 표기할 문자를 지정해주어야 한다.

 

만들기가 굉장히 복잡하지만, 이를 실제로 쓰는 유저입장에서는 굉장히 편하게 쓸 수 있기를 기대한다.

무엇보다 이 앱의 첫번째 유저는 내가 될 것이기에, 내가 편하다고 느끼도록 앱을 만드는게 1순위이다.

 

9월에 군대를 가기 전 플레이스토어에 결과물을 출시하는 것까지 목표로 하고 있지만,

설사 출시를 못하더라도 개인적으로 유용하게 써먹을 예정이다.