앱 디자이너를 사용하여 간단한 앱을 만들고 실행하기
R2026b앱 디자이너가 제공하는 튜토리얼에서는 플롯과 슬라이더가 포함된 간단한 앱을 만드는 절차를 단계별로 안내합니다. 슬라이더는 플로팅된 함수의 진폭을 제어합니다. 튜토리얼을 실행하거나 여기에 나열된 튜토리얼 단계에 따라 다음 앱을 만들 수 있습니다.
튜토리얼 실행하기
앱 디자이너에서 튜토리얼을 실행하려면 앱 디자이너 시작 페이지를 열고 앱 섹션의 예제 표시를 클릭하십시오. 그런 다음 대화형 방식 튜토리얼을 선택합니다.
앱을 만들기 위한 튜토리얼 단계
앱 디자이너에는 앱을 만드는 데 사용할 수 있는 두 개의 뷰인 디자인 뷰와 코드 뷰가 있습니다. UI 컴포넌트를 만들고 대화형 방식으로 앱을 배치하려면 디자인 뷰를 사용하십시오. 앱의 동작을 프로그래밍하려면 코드 뷰를 사용하십시오. 앱 디자이너의 오른쪽 위 코너에 있는 토글 버튼을 사용하여 두 가지 뷰 간에 전환할 수 있습니다.
단순한 플로팅 앱을 만들려면 앱 디자이너에서 새 앱을 열고 다음 단계를 따르십시오.
1단계: 좌표축 컴포넌트 만들기
디자인 뷰에서 대화형 방식으로 UI 컴포넌트를 만들고 그 모양을 수정합니다. 컴포넌트 라이브러리에는 대화형 방식으로 앱에 추가할 수 있는 모든 컴포넌트, 컨테이너 및 툴이 들어 있습니다. 컴포넌트 라이브러리에서 앱 캔버스로 컴포넌트를 끌어와 컴포넌트를 추가합니다. 그런 다음 컴포넌트 브라우저에서 속성을 설정하거나, 캔버스에서 바로 크기 및 레이블 텍스트와 같은 컴포넌트의 특성을 편집하여 컴포넌트의 모양을 변경할 수 있습니다.
플로팅된 데이터를 표시하기 위해 플로팅 앱에 좌표축 컴포넌트를 만듭니다. 컴포넌트 라이브러리에서 좌표축 컴포넌트를 캔버스로 끌어서 놓습니다.
2단계: 슬라이더 컴포넌트 만들기
컴포넌트 라이브러리에서 슬라이더 컴포넌트를 캔버스로 끌어서 놓습니다. 좌표축 컴포넌트 아래에 슬라이더 컴포넌트를 배치합니다.
3단계: 슬라이더 레이블 업데이트
슬라이더 레이블 텍스트를 바꿉니다. 레이블을 더블 클릭하고 단어 Slider를 Amplitude로 바꿉니다.
앱 배치를 완료하면 디자인 뷰의 캔버스가 다음과 같이 표시됩니다.
앱 배치에 대한 자세한 내용은 앱 디자이너 디자인 뷰에 앱 레이아웃 설정하기 항목을 참조하십시오.
4단계: 코드 뷰로 이동
앱을 배치했으면 코드를 작성하여 앱의 동작을 프로그래밍합니다. 캔버스 위에서 코드 뷰 버튼을 클릭하여 앱 코드를 편집합니다.
디자인 뷰에서 앱에 컴포넌트를 추가하면 앱을 실행할 때 실행되는 코드가 자동으로 생성됩니다. 이 코드는 캔버스에 표시된 것과 일치하도록 앱 모양을 구성합니다. 이 코드는 편집할 수 없으며 회색 배경으로 표시됩니다. 이렇게 생성된 코드의 일부로 앱 디자이너는 앱 동작을 프로그래밍할 때 사용할 객체를 생성합니다.
app객체 — 이 객체는 UI 컴포넌트를 비롯해 속성을 사용하여 지정하는 데이터와 같은 앱의 모든 데이터를 저장합니다. 앱의 모든 함수에서는 이 객체를 첫 번째 인수로 사용해야 합니다. 이 패턴을 사용하면 이러한 함수 내에서 컴포넌트와 속성에 액세스할 수 있습니다.컴포넌트 객체 — 디자인 뷰에서 컴포넌트를 추가할 때마다 앱 디자이너가
app.ComponentName형식의 이름이 지정된 객체로 컴포넌트를 저장합니다. 컴포넌트 브라우저를 사용하여 앱에서 컴포넌트의 이름을 확인하고 수정할 수 있습니다. 앱 코드 내에서 컴포넌트 속성에 액세스하고 업데이트하려면app.ComponentName.Property패턴을 사용하십시오.
5단계: 슬라이더 콜백 함수 추가
콜백 함수를 사용하여 앱 동작을 프로그래밍합니다. 콜백 함수는 슬라이더 값 조정과 같이 앱 사용자가 특정 상호 작용을 수행할 때 실행되는 함수입니다.
플로팅 앱에서 사용자가 슬라이더 값을 조정할 때마다 실행되는 콜백 함수를 추가합니다. 컴포넌트 브라우저에서 app.AmplitudeSlider를 마우스 오른쪽 버튼으로 클릭합니다. 그런 다음, 상황별 메뉴에서 콜백 > ValueChangedFcn 콜백 추가를 선택합니다.
콜백을 컴포넌트에 추가하면 앱 디자이너가 콜백 함수를 만든 후 이 함수의 본문에 커서를 놓습니다. 앱 디자이너는 app 객체를 콜백 함수의 첫 번째 인수로 자동으로 전달하여 컴포넌트와 그 속성에 대한 액세스를 활성화합니다. 예를 들어, AmplitudeSliderValueChanged 함수에서는 앱 디자이너가 슬라이더의 값에 액세스하는 코드 한 줄을 자동으로 생성합니다.
콜백 함수를 사용하여 앱 동작을 프로그래밍하는 방법에 대한 자세한 내용은 앱 디자이너에서 콜백 사용하기 항목을 참조하십시오.
6단계: 데이터 플로팅
앱 디자이너에서 그래픽스 함수를 호출할 때 대상 좌표축 또는 부모 객체를 함수에 대한 인수로 지정합니다.
플로팅 앱에서, app.UIAxes 앱에서 axes 객체의 이름을 plot 함수에 대한 첫 번째 인수로 지정하여 앱 사용자가 슬라이더 값을 변경할 때마다 좌표축에 플로팅된 데이터를 업데이트합니다. AmplitudeSliderValueChanged 콜백의 두 번째 라인에 다음 코드를 추가하여 좌표축에 peaks 함수의 스케일링된 출력을 플로팅합니다.
plot(app.UIAxes,value*peaks)
앱에서 그래픽스를 표시하는 방법에 대한 자세한 내용은 앱 디자이너에서 그래픽스 표시하기 항목을 참조하십시오.
7단계: 좌표축 제한 업데이트
앱 코드 내에서 컴포넌트 속성에 액세스하고 업데이트하려면 app.ComponentName.Property 패턴을 사용하십시오.
플로팅 앱에서 app.UIAxes 객체의 YLim 속성을 설정하여 y축의 제한을 변경합니다. AmplitudeSliderValueChanged 콜백의 세 번째 라인에 다음 명령을 추가합니다.
app.UIAxes.YLim = [-1000 1000];
8단계: 앱 실행
실행을 클릭하여 앱을 저장한 후 실행합니다. 슬라이더의 값을 조정하여 앱에 일부 데이터를 플로팅합니다.
변경 사항을 저장한 후 앱 디자이너에서 앱을 다시 실행할 수 있습니다. 또는 MATLAB® 명령 창에 앱 이름을 .mlapp 확장자 없이 입력해도 됩니다. 명령 프롬프트에서 앱을 실행하는 경우 파일이 현재 폴더나 MATLAB 경로에 있어야 합니다.
