11. 악보 편집 기능 만들기 - 코드 줄넘김/줄넘김 취소 & 커스텀 키보드

오늘은 하루종일 코드 줄넘김/줄넘김 취소 기능을 구현하고,

커스텀 키보드 디자인을 구상하고 구현하는데 집중했다.

아직 커스텀 키보드의 구현과 구상은 100% 완료되지 않았다.

 

오늘의 프로젝트 진행과정을 자세하게 정리해보고자 한다.

---

코드 줄넘김 / 줄넘김 취소 기능 구현

코드 줄넘김 / 줄넘김 취소 기능이라고만 하면 와닿지가 않을 것이다.

텍스트를 입력할 때 '엔터키'를 생각하면 된다.

 

이렇게 텍스트로 코드를 입력한 상태라고 생각해보자.

현재 커서는 사진에 보아는 대로 Em7 앞에 가있다.

 

이 상태에서 엔터키를 누르면 

 

이렇게 코드가 한 줄 아래로 이동하며, 뒤따른 코드들이 모두 아래로 이동한다.

지금 이건 텍스트로 되어있기 때문에 알아서 편리하게 구현이 되지만

이걸 코드셀 객체에 대해서 구현해야한다.

 

스택 오버플로우도 찾아보고 구글을 열심히 검색해봤지만,

Wrap 위젯에서 자식 위젯을 새로운 라인으로 보내는 기능은 찾을 수 없었다.

 

그래서 줄을 넘길 할 코드셀 위젯 앞에 큰 빈공간을 하나 넣어서 줄넘김을 구현해보기로 했다.

처음에는 '빈 공간'의 사이즈를 딱 맞추기 위해 Expanded 위젯을 사용했다.

그러나 Expanded 위젯은 Flow, Row, Column 위젯에서만 사용이 가능해 오류가 발생하였다.

 

그래서 어쩔 수 없이 Container() 위젯에 width 속성을 임의로 큰 값을 넣어 추가하였다.

그러자 다행히 성공적으로 작동하였다.

 

이렇게 사진처럼 가사를 입력해주고, 현재 선택한 셀에 대해 줄넘김 버튼을 누르면

 

이렇게 새로운 줄로 넘어가는 듯 보이게 된다.

이 상태에서는 줄넘김 취소 버튼을 눌러도 원래대로 돌아가지 않는다.

줄넘김이 된 코드 앞에서 줄넘김 취소를 눌러야 한다.

 

이렇게 줄넘김이 된 코드셀을 선택하고, 줄넘김 취소 버튼을 누르면 줄넘김이 취소된다.

 

구체적으로 구현한 방식은 다음과 같다.

그냥 현재 선택한 셀 다음에 가로길이 1000짜리 빈 컨테이너 위젯을 삽입하여 다시 빌드하였다.

 

줄넘김 취소는, 이전 위젯이 컨테이너 위젯인 경우 삭제하도록 하였다.

UX를 더 개선한다면 줄넘김 취소 버튼이 줄넘김 취소가 가능한 상황에서만 보이도록 만들어야 할 것 같다.

---

코드 입력 키보드 구상 & 커스텀 키보드 수정

다음으로는 코드를 어떻게 입력할 지 구상했다.

코드를 입력받는 방법을 참고하기 위해 다음 사이트들을 참고했다.

 

첫번째 사이트는 코드를 입력하면 해당 코드의 피아노 건반모양을 보여주는 사이트이다.

https://www.chordsscales.com/chords/piano/C/madd2

Cmadd2 Piano Chord | ChordsScales

이 사이트에서는 코드 입력을 드롭다운 박스 3개를 이용해서 입력한다.

루트코드 - 코드의 가운데 부분 - 베이스코드

이렇게 코드를 3개의 부분으로 나누어서 입력받는다.

 

이 방식은 '하나의 코드'를 검색하는데 쓴다면 괜찮겠지만

여러개의 코드를 반복해서 입력해야 하는 상황에서 드롭다운 3개를 계속 수정하는 것은 매우 불편할 것 같았다.

하지만 하나의 코드를 3개로 쪼개서 따로따로 입력받는다는 점은 참고하기 좋았다.

 

두번째 사이트는 일본의 코드 악보 모음 사이트인 U-Fret 이다.

https://www.ufret.jp/create_origin_chord.php

オリジナルのコード譜を作成する

이 사이트에서는 코드악보를 직접 만드는 것도 가능한데 첫번째 사이트와 비슷하게 코드를 만들 수 있었다.

 

사실 내가 떠올렸던 아이디어와 겹쳐서 정말 많이 놀랐다.

나는 코드의 '키'를 정하면, 해당 키로 구성된 기본 코드들을 미리 만들어서 보여주는 것을 떠올렸다.

이 사이트에서도 이를 구현해두었다.

C키를 설정하면 C 메이저 스케일의 구성음들로 구성된 코드 집합을 보여준다.

(이 집합을 부르는 이름이 있었는데 이름을 까먹었다..)

 

가운데에 이 버튼을 누르면 직접 코드를 입력할 수 있다.

(직역하면 '그 밖의 코드를 입력+' 이다.)

 

그러면 첫번째 사이트와 유사하게 세 단계에 나눠 코드를 만들어낸다.

 

처음으로 루트 음을 선택한다.

 

그 다음으로 코드를 선택한다.

첫번째 사진의 드롭박스에 있던 선택메뉴보다는 적은 수지만 자주 쓰이는 코드들로 알뜰하게 들어있다.

 

마지막으로 '온코드'를 선택하게 한다.

베이스 음으로 짚는 코드이다.

 

그러면 이렇게 완성된 코드를 입력할 수 있는 버튼이 나온다.

 

이렇게 악보에 텍스트 필드에 텍스트로된 코드가 추가된다.

하지만 이래서는 내가 싫어하는 '키보드 타이핑으로 코드 악보를 입력하는 것'보다 더 불편하기만 하다..

차라리 키보드 입력을 치는게 훨씬 더 빠를 것이다.

 

이 사이트도 결국은 이렇게 텍스트로 입력된 코드악보를 보기좋게 변환하는 것에 불과했다.

 

세 번째로 참고한 곳은 Chordify이다.

https://chordify.net/

Instant chords for any song - Chordify

악보를 만드는 것은 프리미엄 기능이지만, 검색한 악보를 수정하는 것은 자유롭게 할 수 있다.

이렇게 악보가 보인다.

 

새로운 코드를 입력할 때는 이 사이트도 똑같이 코드를 세 부분으로 나누어 입력한다.

키보드로 입력받는 것은 똑같지만, 아래에 추천이 따로 뜬다.

 

코드 타입으로 입력가능한 종류는 이걸로 되나 싶을 정도로 굉장히 적다..

이렇게 하나하나 부분을 나누어 키보드로 타이핑해야 하는 점에서 코드 하나를 입력하는데는 굉장히 불편하다.

 

하지만 이렇게 코드를 선택해서 편하게 칸에 복사/붙여넣기를 할 수 있게 하였다.

 

나는 이 3가지 사이트 각각의 입력별 장점과

'모바일 터치 키보드'의 입력방식의 특징에 맞추어 키보드 디자인을 구상하였다.

 

그래서 다음과 같이 아이디어를 떠올렸다.

1. 기본적으로 코드 입력은 '루트 - 타입 - 베이스코드' 3개로 나누어 입력받는다.

2. '루트' 와 '베이스코드' 에 들어갈 수 있는 구성음이 똑같은 점을 이용한다.

3. '코드 타입'은 숫자와 영어 기호의 조합으로 되어있다는 점을 이용한다.

 

컴퓨터로는 조합을 맞추어 하나의 코드를 입력하는 것이 굉장히 불편하지만,

핸드폰처럼 터치식으로 입력한다면 조합을 맞추어 입력하는 것이 굉장히 편하다.

 

그래서 아래와 같은 키보드 디자인을 구상했다.

 

색 조합이 굉장히 구린 공대생 감성ㅋㅋ

키보드 상단의 하얀색 네모버튼은 최근 입력한 코드를 빠르게 입력할 수 있는 버튼이다.

최근 입력을 완료한 코드들을 큐에 넣어 쉽게 입력할 수 있도록 할 예정이다.

큐의 최대 사이즈는 8~10 정도를 생각하고 있다.

 

이렇게 기본 키보드에서 자동완성 기능을 지원하는 것에서 아이디어를 떠올렸다.

 

이렇게 되어있는 키보드에서 상단의 코드는 '루트' 입력겸, '베이스' 코드를 입력하는 칸이다.

이 키보드(?)는 토글버튼의 조합으로 되어있다.

 

처음에 7개 중 루트코드를 하나 고른다.

(C키에서는 사진처럼 나오지만, 키를 바꾼다면 해당 키에 맞게 내용이 수정되게 할 생각이다.)

 

그 다음 코드 타입을 고르기 위해 2, 3번째 줄의 토글을 이용해 코드 타입을 짜맞춘다.

(이 부분의 구현이 굉장히 복잡해서 머리를 싸매고 있다)

 

마지막 줄은 #/b 조합이 3개가 있는데,

처음 조합은 루트코드, 두번째 조합은 가운데 코드 타입의 숫자에 적는 용도,

마지막은 근음 코드에 입력하는 용도이다.

 

이때 '/' 토글이 있는데, 이 토글을 활성화 한 상태에서 C~B 코드를 선택하면

해당 코드는 베이스 코드로 입력하게 할 예정이다.

 

마지막으로, 저렇게 토글버튼이 복잡하게 조합되어 있으면 이게 현재 어떤 코드인지 알아보기가 힘들다.

그래서 각 파트별로 토글의 색을 다르게 넣어 이게 어디에 붙은 조합인지 쉽게 알 수 있게 만들 예정이다.

---

오늘은 하루종일 키보드를 구상하고, 키보드의 형태를 구현하는데 시간을 썼다.

내일은 키보드의 기능을 구현하는데 집중할 예정이다.

아직 저 토글버튼의 조합을 만들어도 실제 코드로 입력이 되지 않는데,

가능하면 실제 코드로 입력까지 되도록 만들 것이다.

 

이게 끝나면 이 코드셀을 저장하는 DB 테이블 레이아웃을 구상하여 DB를 만들고

탭 페이지별로 나누어 DB에 코드를 저장하도록 해야한다.

 

또한, 현재는 '전체' 탭이 똑같은 하나의 페이지와 같은 기능을가지지만,

나중에는 '전체' 탭에서는 나머지 탭에 적힌 코드들을 모아서 보여주는 역할을 하도록 할 것이다.