elsa in mac

touchOSC(IOS)와 ControllerMate(Mac)를 이용한 어플리케이션 컨트롤러 구성하기 - 3 touchOSC Layout 만들기 - 1 본문

소소한 일상/연재

touchOSC(IOS)와 ControllerMate(Mac)를 이용한 어플리케이션 컨트롤러 구성하기 - 3 touchOSC Layout 만들기 - 1

elsa in mac 2017. 5. 13. 02:11

IOS의 touchOSC 앱과 Mac의 ControllerMate를 이용한 어플리케이션 컨트롤러 구성하기 3번째 포스트 입니다.  이번 포스트에서는 touchOSC에서 사용할 LayOut을 만드는 방법에 대해 알아보도록 하겠습니다.  

touchOSC의 경우 IOS앱 자체에서 Layout을 편집할 수 없기 때문에 Mac/Window용 Editor를 별도로 제공 합니다. 

touchOSC Editor는 Keynote나 PowerPoint와 유사하지만 보다 단순한 수준의 Editor 환경을 제공한다고 보시면 되는데요, 위의 스샷이 기본 화면 입니다. 1번에서 Layout의 크기를 선택할 수 있는데, 보시는 바와 같이 일반적인 IOS기기들의 크기를 미리 정의한 Pre-defined Size들을 모두 포함하고 있으며, iPad mini 혹은 앞으로 Apple에서 어떤 사이즈의 IOS기기를 내놓을지 모를 때를 대비하여 Custom SIze를 정의할 수 있도록 되어 있습니다. 

2번에서는 가로 혹은 세로 모드로 디자인을 할 수 있도록 Orientation을 정할 수 있는데, touchOSC와 비견되는 Lemur의 경우 가로 모드로만 Layout을 정의할 수 있는 것과 비교하면, touchOSC의 강점 중 하나라고 할 수 있습니다. ^

3번에서는 메시지 형식을 정의할 수 있는데, 이 하 모두 MIDI로 설정한 경우에 한하여 설명하도록 하겠습니다.  

1번 Size와 과 2번 Orientation을 설정하게 되면, 그에 따라 메인 화면에 Layout Page의 크기와 가로/세로 비율이 곧바로 바뀌게 됩니다. 이제, 이 빈공간의 Page에 사용자가 원하는 각종 UI 요소들을 올려 놓아야 하는데, 마우스의 오른쪽 버튼을 누르면 위에서 4번과 같이 Context Menu가 나타나서, 추가할 UI 요소를 선택할 수 있습니다. 

Midi Controller가 갖고 있는 대부분의 Control 요소들을 모두 갖고 있는데요. LED, Label, Push Button, Fader Rotary.. 등등을 확인할 수 있습니다. UI요소 이름에서 V가 붙은 것은 세로형(Vertical), H가 붙은 것은 가로형(Horizontal) 입니다.

UI 요소를 선택하면, 아래와 같이 외곽으로 outline point가 표시되어 마우스를 이용하여 크기를 조절할 수 있습니다.    

위의 예는 Push Button을 하나 만든 경우입니다.  Push Button을 만들고, 해당 Push Button을 마우스로 선택하면, Push Button에 대한 설정을 할 수 있는 항목들이 좌측에 나타나게 됩니다. 이러한 설정항목들은 각 UI 요소의 종류에 따라 다소 차이가 나지만, 대부분 대등소이 합니다. 

1번에서 해당 UI 요소의 이름을 설정하고, 2번에서는 색상을 변경할 수 있는데, 9가지 색상으로 Pre-Define이 되어 있습니다. 이건 좀 아쉽습니다. 3번 항목은 해당 UI 요소의 위치와 크기 정보로 마우스를 이용할 수도 있지만, 값을 직접 입력하여 수정할 수 있도록 해 놓고 있습니다. 

4번 ~ 8번까지는 속성을 정의하는 부분 입니다. 4번 Enabled를 활성화 시키면 해당 UI 요소를 누를 경우, MIDI 데이터가 출력되게 됩니다. 비 활성화 시켜 놓으면 단지 그림일 뿐 MIDI Control 로서 동작하지 않게 되는데, Disable로 사용하는 경우는 Decoration용도 일 경우를 위한 것이라 보시면 됩니다. 6번에서 channel과 Number는 식별자이고, Range는 해당 UI 요소가 갖는 값의 범위를 의미합니다. 위에 스샷을 보면, 0 ~ 127까지의 값을 갖을 수 있다는 의미가 됩니다. 7번 항목은 Local Feedback을 OFF 시키는 옵션으로 UI요소를 터치하거나 터치를 완료 했을 때, UI 요소의 변화를 활성화 할 것인지의 비 활성화 시킬 것인지를 설정합니다. 기본은 ON으로 Push Button을 예로 들면, 버튼을 터치하먄 버튼 자체에 불이 들어오고, 버튼에서 터치를 때면 불이 꺼집니다. OFF를 시키게 되면 이 동작을 하지 않게 됩니다. 

8번의 Y Position Velocity는 터치 동작에 좀 더 디테일한 값의 변화를 줄 수 있는 옵션인데, 버튼의 경우 기본적으로 터치를 하면 Range의 최대값 즉, 127 이라는 값이 출력됩니다. 터치를 때면 최소값 즉, 0값이 출력됩니다. 하지만, Y Position Velocity를 활성화 시키면 버튼의 어느 부분을 터치하느냐에 따라 0 ~ 127 사이의 값이 출력되게 됩니다. 즉, 버튼의 윗 부분을 터치하면 최대값인 127이 출력되고 버튼의 중간 부분을 터치하면 63, 제일 하단 부분을 터치하면 1 이 출력되며, 터치를 때면 0이 출력됩니다.  Invert 옵션은 방향을 뒤집는 것으로 윗 부분을 터치하면 1, 버튼의 가장 아랫 부분을 터치하면 127이 출력되게 됩니다.  

Enabled를 활성화 시키면 Type에서 어떤 MIDI Data를 사용할 것인지를 정의해야 하는데.. Control Change 부터 System Exclusive 까지 10가지 Type을 지원합니다. 이건 실제 MIDI 앱이나 DAW용도로 touchOSC를 사용할 경우, 즉 본래의 목적인 MIDI Controller로 사용할 경우에는 정확히 그 의미를 가려야 하지만, 이번 연재와 같이 단순히 어플리케이션 컨트롤러로 사용할 경우에는 큰 의미는 없습니다. 단지 UI 요소를 식별하는 식별자의 의미만 갖을 뿐이기 때문이죠..

Channel은 MIDI Channel, Number와 Range는 5번 Type이 무엇인가에 따라 달라지게 됩니다. 해당 MIDI 데이터의 값을 정의하는 것이라고 생각하시면 됩니다.  

예를 들어, Undo / Redo 버튼을 만든다고 한다면, 아래와 같이 정의할 수 있습니다. 

두 버튼에서 중요한 차이점은 식별자인 Number 입니다. 둘 다 11 채널의 Control Change로 정의되어 있지만, Undo 버튼은 Number가 1 이고, Redo 버튼은 Number가 2 입니다. 따라서, Undo 버튼을 터치할 경우와 Redo 버튼을 터치할 경우 두 버튼을 구분할 수 있게 됩니다.  Range는 0 ~ 1로 정의 했는데, 터치하면 1, 터치를 놓으면 0값으로 출력되게 한 것 입니다. 

실제로 두 버튼을 누를 때 MIDI 데이터가 어떻게 출력되는지 보겠습니다. 

MIDI Monitor를 통해 확인을 해 보면, Undo 버튼을 터치하면 Channel 15번에서 Control 메시지가 Modulation Wheel 1 이라는 값으로 들어오고, 터치를 때면 동일한 메시지에 값만 0으로 들어오는 것을 알 수 있습니다. Redo일 경우에도 마찬가지 이지만, Modulation Wheel이 아니고 Breath Control 로 값이 들어오는 차이가 있는 것을 알 수 있는데, Control Change Type의 Number 1 이 MIDI 에서는 Modulation Wheel로 정의되어 있고, Number 2가 Breath Control로 정의되어 있기 때문 입니다.  

그럼 메시지 Type을 Control Change가 아닌 Note(음계)로 바꿔 설정을 해 봅니다. 

위의 스샷을 보면, 둘 다 Type을 Note로 변경한 것을 볼 수 있습니다. Undo 버튼의 경우 Note를 C-2(2옥타브의 "도"), Redo 버튼의 경우 Note를 D-2(2옥타브의 "래")로 설정했으며, Velocity의 경우도 최소값 0, 최대값 127로 설정을 했습니다. 

이 경우, 실제 동작 시에 값은 아래와 같이 들어오게 됩니다. 

보시는 바와 같이, touchOSC에서 설정한 값 그대로 해당 음계에 터치하면 127, 터치를 때면 0이 들어오는 것을 확인할 수 있습니다.

Push Button은 터치 한 경우와 터치를 땐 경우, 이렇게 두 번 이벤트가 발생하지만, Toggle Button을 사용한 경우에는 말 그대로 한번 터치하면 ON, 다시 한번 터치하면 OFF가 되는 차이가 있을 뿐입니다.

다음은 Rotary에 대해서 간단하게 알아보도록 하겠습니다. Rotary는 다이얼이죠.. 터치를 하고, 원형을 그리며 돌리면 값이 바뀌는 UI 요소 입니다. 

Rotary는 시작과 끝이 있는 다이얼 입니다. 다음에 살펴 볼 Encoder라는 녀석은 동일한 다이얼이기는 하지만, 처음과 끝이 없이 무한대로 빙글빙글 돌릴 수 있는 차이가 있습니다. 

Rotary의 속성을 보면, Push Button과 차이가 하단 옵션 인데요, 기본적으로는 Rotary의 좌측 끝이 0(최소값), 우측 끝이 127(최대값) 입니다 만, Inverted 옵션을 주면, 위치에 따른 최소/최대값이 반대로 바뀌게 됩니다. Centered는 시작 위치가 Rotary의 죄측 끝이 아닌 가운데로 바뀌게 되며, 값도 1/2인 63에서 시작됩니다. 즉, Center를 기준으로 죄측으로 돌리면 63에서 0으로 값이 바뀌고, 반대로 Center를 중심으로 오른쪽으로 돌리면 63 ~ 127로 바뀌게 됩니다. 이 역시도 Inverted 옵션을 켜면 반대로 동작을 하게 되겠죠..  3번째 옵션인 No Rollover는 다시 처음으로 돌아가지 않는다는 의미인데, 기본은 OFF 입니다. No Rollover가 OFF이면 Rotary에 손가락을 대고 360도를 계속해서 빙글빙글 돌릴 경우, 최소값 --> 최대값, 그리고 다시 최소값 --> 최대값으로 계속 바뀌게 됩니다. 하지만, No Rollover 옵션을 켜게(체크) 되면, Rollover가 비 활성화 됩니다. 즉, 360도를 빙글 빙글 돌리더라도 최대값에서 다시 최소값으로 바뀌지 않게 되는 것으로 바꿔 말하면, 시계 방향으로 돌리면 최대값에서 멈추고, 반 시계 방향으로 돌리면 최소값에서 멈추게 됩니다. 

위의 스샷을 보시면 3개의 예제를 만들어 놨는데, 제일 윗쪽은 기본 설정, 가운데는 기본 설정 + Rollover 금지, 제일 아래 Rotary는 No Rollover와 Centered 옵션을 둘 다 켠 경우 입니다. 동작 예는 아래와 같습니다. 

다음은 Encoder 입니다. 앞서도 언급했지만, Encoder는 Rotary와 같은 다이얼 이지만, 처음과 끝이 없는 다이얼 입니다. 

무한 회전하는 다이얼이기 때문에 위에 보는 바와 같이 기본 설정 이 외의 옵션은 없습니다. 즉, 오른쪽(시계 방향)으로 돌리면  최대 값인 127이 출력되며, 반대로 왼쪽(시계 반대방향)으로 돌리면 최소값인 0이 출력됩니다. 

뒤집어 해석하면, 값이 127이면 오른쪽으로 돌리고 있다는 의미가 되며, 값이 0이면 왼쪽으로 돌리고 있다는 의미로 해석할 수 있습니다. 회전량과 회전 속도는 이벤트가 몇 번 출력되었는가와 각 이벤트의 발생 시간차를 알면 구할 수 있습니다. 

다음은 Fader를 알아 보겠습니다. 

Fader는 Slider라고도 하고, Potentiometer라고도 하죠, 막대 모양으로 Fader Bar의 위치에 따라 값에 변화를 줄 수 있는 Control 요소 입니다. 기본 옵션 이 외에 위에 보시는 바와 같이 inverted, Centered Response 가 있는데, Fader Bar가 우측, 혹은 상단에 있으면 최소값, 죄측 혹은 제일 하단에 위치할 경우 최대값이 출력되지만, Inverted 옴션이 켜지면 반대가 됩니다. 즉, 죄측 혹은 하단일때 최소값(0), 우측 혹은 상단에 위치할 때 최대값(127)이 출력됩니다.  Centered 옵션은 기준점을 Fader의 가운데로 옮기는 옵션입니다. 

Response는 앞서 설명을 드리지 않았는데, 절대값을 출력할 것인지 혹은 변화량을 출력할 것인지를 설정하는 것입니다, 기본인 Absolute로 설정이 되어 있으면, Fader Bar를 직접 움직이지 않고도 Fader의 특정 위치를 터치하면 곧바로 Fader Bar가 해당 터치 위치로 점프하면서 해당 값이 출력됩니다.  하지만, Response를 Relative로 설정하게 되면, 반드시 Fader Bar를 움직여야만 값을 조정할 수 있게 됩니다. 

위에 3개의 Fader를 만든 것을 보실 수 있는데, 첫번째 좌측 상단의 빨간색 Fader는 기본 설정이고, 좌측 하단 Fader는 inverted와 Response를 Relative로 설정한 경우 입니다. 마지막으로 우측에 긴 녹색의 Fader는 기본 설정에서 Centered 옵션을 준 경우 입니다. 실행 결과는 아래와 같습니다. 

 이 번 포스트는 여기서 줄이고 다음 포스트에서는 touchOSC layout 만들기 두 번째로 아직 살펴보지 않은 나머지 Control 요소들에 대해 알아보고, 작성된 Layout을 아이폰이나 아이패드로 어떻게 넣어주는지에 대해 살펴 보도록 하겠습니다. 


▼ 관련 글 
• 2017/05/09 - touchOSC(IOS)와 ControllerMate(Mac)를 이용한 어플리케이션 컨트롤러 구성하기 - 2 - touchOSC 사용법
• 2017/05/03 - touchOSC(IOS)와 ControllerMate(Mac)를 이용한 어플리케이션 컨트롤러 구성하기 - 1 - 인트로

공유하기 링크
Comments