MATLAB 앱 디자이너를 소개합니다.

 

최근에 MATLAB 을 사용할 일이 부쩍 늘었어요. 그중에 예전부터 쓰이던 GUIDE 라는 GUI(사용자 인터페이스)를 대체한 MATLAB 앱 디자이너를 자주 쓰고 있습니다. 2016년도에 새로 나와 꾸준히 업데이트가 되고 있고 간단한 앱은 MATLAB 코딩에 익숙하다면 손쉽게 만들 수 있는 MATLAB 앱 디자이너가 썩 괜찮은 거 같아서 소개하려고 합니다. 앱 디자이너는 MATLAB 설치를 하면 함께 따라오는 구성품인 듯합니다. 

 

MATLAB 인터페이스에서 앱 디자이너 실행하기

 

MATLAB을 켜게 되면 명령 창이 보입니다. 그 다음은 바로 명령 창에 appdesigner 라고 입력해 주시면 됩니다. 

저는 학생용을 사용하고 있어서 Student License 라고 떠요. 기다리시면 앱 디자이너 인터페이스가 나올 겁니다.

 

figure 1. appdesigner를 명령창에 입력

figure 2. 앱 디자이너 시작화면

figure 3. 앱 디자이너 시작화면 II

 

앱 디자이너 구성요소

 

그럼 앱 디자이너로 앱을 만들기 전에 앱 디자이너 구성요소에 대해 빠르고 간략하게 짚고 넘어가도록 하지요. 설명에 해당하는 부분은 알아보기 쉽게 민트색으로 음영처리를 해 두었습니다. 민트 초콜릿 아이스크림 좋습니다. 

 

012345

slide 1. 앱 디자이너 구성요소 (옆으로 넘기면서 보세요)

 

• 디자인 보기: 앱의 전체적인 디자인을 관리 할 수 있는 공간입니다. 이것저것 끌어다가 마음에 드는 구성으로 다양한 앱을 만들게 해 줍니다. 앱 디자인의 시각적인 부분을 관리합니다. 비유하자면 웹사이트 디자인의 프런트엔드 WYSIWYG 방식 같은 느낌이라고 생각하시면 될 듯합니다. 
• 구성요소 라이브러리: 앱을 디자인하는데 사용할 여러 도구들을 모아놓은 라이브러리입니다. 혹시 LabView 를 써보셨다면 마찬가지로 라이브러리에서 도구를 선택해 끌어다가 디자인 공간에 가져다 놓기만 하면 됩니다. 나머지 형식이나 포맷에 관한 코드는 MATLAB 스스로 척척 작성해 줍니다.  
• 디자인 패널: 라이브러리에서 끌어오는 도구들을 놓는 공간입니다. 앱을 실행하게 되면 보여질 모습을 미리 보며 제작할 수 있다는 장점을 보유하고 있습니다. 또한 여러 도구들을 나열하게 되면 보기 좋게 배열을 도와주는 기능도 있습니다. 나중에 좀 더 복잡한 앱을 설계할 때 매우 유용합니다. 
• 구성요소 브라우저: 디자인 패널에서 사용하는 도구들을 검색할 수 있는 공간입니다. 많은 도구들을 나열하게 되면 관리가 어려운데 트리 형식 목차 구성으로 한눈에 보기 쉽게 되어 있는 것이 특징입니다. 
• 구성요소 속성: 각각 구성요소 및 도구들의 속성을 바꾸고 설정할 수 있는 공간입니다. 폰트를 바꾸거나, 다른 도구와의 상호작용, 디자인 패널 상에서의 위치, 그리고 구성요소 간의 계급을 바꿀 수 있는 공간입니다. 계급을 바꾼다는 것은 마치 상위 또는 하위 폴더의 순서를 바꾼다는 느낌으로 이해하시면 됩니다. 
• 코드 보기: 앱의 내부입니다. 앱을 구성하는 요소들을 코딩으로 나타낸 공간입니다. 회색 지역은 MATLAB 스스로 디자인 공간에서의 사용자의 선택을 반영해서 짜 넣어 놓는 지역이고, 직접 편집이 불가합니다. 사용자 편집 공간에 대해서는 밑의 예시에서 설명하겠습니다. 

 

버튼을 클릭하면 메세지를 보여주는 아주 간단한 앱을 만들어 보지요.

 

단순한 앱이지만 앱 디자이너의 작동원리를 알 수 있는 앱을 만들어 보겠습니다. 버튼을 클릭하면 미리 설정해 둔 메시지를 보여주는 단순한 앱을 만들어 볼 건데요, 앱 디자이너의 활용에 있어서 중요한 몇 가지 요소에 중점을 두고 알아보도록 하겠습니다. 

 

figure 4. 일단은 보여지는 모습부터 만들기

 

코딩을 하기에 앞서 일단은 앱을 실행하면 보여지게 될 인터페이스부터 만듭니다. 저는 패널의 크기를 줄이고, 버튼과 텍스트를 편집할 수 있는 편집 필드를 구성요소 라이브러리에서 끌고 와 배치했습니다. 원하지 않는다면 Edit Field라고 적힌 편집 필드의 레이블을 삭제할 수 도있습니다. 아래 보시면 저는 디자인을 위해 삭제했습니다.  

 

figure 5. call back (콜백)

figure 6. 콜백 추가시 넘어가는 코드 공간

 

위 사진들은 MATLAB 앱 디자이너에서 중요한 기능인 ★★ 콜백을 추가하는 과정입니다. 콜백은 단순히 버튼이 눌렸을 때 어떠한 반응이 일어나게 하기 위한 과정입니다. 예를 들어 버튼을 눌렀을 때 메세지가 보인다면 '메시지가 보임' 이 바로 '버튼을 누름'에 대한 콜백이 됩니다. 버튼을 눌렀을 때 결과가 나오기를 원하므로 버튼을 마우스 우클릭하여 콜백을 추가합니다. 콜백 추가하기를 누르면 코드 공간으로 넘어가면서 새로 하얀 공간이 생긴 것을 볼 수 있습니다. 이 공간이 이제 우리가 직접 코드를 작성해야 하는 공간입니다. 콜백을 추가하니 마치 MATLAB에서의 함수처럼 코드의 틀이 작성된 것을 확인할 수 있습니다. 쉽게 보면 '버튼을 누름'과 같은 사용자의 행동은 콜백 함수의 입력값이 되는 것이고, '메시지가 보임'과 같은 결과는 콜백 함수의 출력 값이 되는 것입니다. 

 

012

slide 2. 코드 공간에 직접 코드 작성하기

 

아주 중요한 포인트입니다! 바로 ★★★ app 이라는 키워드인데요, 앱 디자이너의 코드 공간에서 디자인 공간의 패널에 있는 도구들과 연결을 해 주기 위해서는 app이라는 키워드로 코드를 시작하셔야 합니다. MATLAB 코딩 중 스크립트 파일이나 함수 파일 (m. 파일들) 에서 그냥 변수를 선언하는 것과는 조금 다른 앱 디자이너만의 포인트입니다. app 키워드 뒤에 마침표를 입력하니 app 과 함께 사용 가능한 다양한 옵션들이 제안됩니다.

그중 저희는 텍스트 편집 필드인 EditField의 값에 관심이 있으므로 app.EditField.Value (app의 EditField의 Value 값)을 'Hello World! 안녕하세요 :D'라는 문자열 데이터로 정의합니다.

app.EditField.Value = 'Hello World! 안녕하세요 :D';

 

앱 디자이너에서도 역시 명령창에명령 창에 결과가 표현되는 것을 숨기기 위해 세미콜론( ; )을 사용합니다. 조금 헷갈릴 수도 있지만 앱 디자이너 코드 공간 안에서 작성 한 함수 또는 수식의 결과가 세미콜론으로 숨겨져 있지 않다면 MATLAB 기본 인터페이스의 명령 창에서도 결과로 보여질 수 있다는 점을 기억하시기 바랍니다.   

이렇게 이 앱을 위한 코딩은 끝이 났습니다. 앱이 이대로 생성이 된다면 버튼이 눌렸을 때 앱의 편집 필드에는 이제 우리가 정의한 문자열 데이터가 보여질 것입니다. 

 

앱 저장하기, 확장자 .mlapp 

 

figure 7. 확장자 .mlapp 으로 저장되는 앱

figure 8. 버튼 이름 변경하기

 

실행 버튼 또는 저장을 하면 이제 앱 디자이너의 파일이. mlapp 확장자를 가진 이름으로 저장이 됩니다. 이렇게 저장이 끝난 앱은 이제 하나의 프로젝트처럼 관리가 됩니다. 저는 저장 후에 Button이라고 써져 있던 버튼의 이름을 Click Me!로 편집하였습니다. 이름 또는 텍스트의 편집을 원하시면 간단하게 디자인 코드의 도구를 선택해 바꿔주시면 됩니다. 

 

앱 실행 및 결과 확인하기

 

figure 9. 앱을 실행 했을 떄 나오는 인터페이스의 모습

 

역시나 디자인 한대로 결과가 출력됩니다. 실행 버튼을 누르면 저렇게 앱이 새 창에 뜨고, 사용자의 입력값과 행동을 기다립니다. 우리가 만든 앱에서 사용자가 해야 할 일은 '버튼을 누른다' 라는 일이고, 사용자가 버튼을 누르면 아래와 같은 결과가 나오는 것을 확인할 수 있습니다.  

 

figure 10. 버튼을 클릭하면 메세지를 보여주는 앱

 

이렇게 간단한 앱을 만들어 보았습니다. 이를 통해 배운 앱을 디자인 함에 있어서 중요한 점을 다시 정리하자면, 

 

1) 콜백은 사용자의 행동 또는 입력값에 따라서 나오는 결과값이다. 

2) 디자인 공간에서의 값을 코딩 공간에 전달하려면 app. 으로 시작해야 한다. 

 

위 두 가지만 기억하면 MATLAB의 앱 디자이너를 통해 코딩을 하고 실행하는 여러 과정 동안 큰 무리 없이 앱을 작성할 수 있을 것입니다. 다음에는 다른 구성요소들을 가지고 더 다양한 앱을 작성해 돌아올게요.

 

Good Bye!