앱 디자이너를 사용하여 간단한 앱을 만들고 실행하기

앱 디자이너가 제공하는 튜토리얼에서는 플롯과 슬라이더가 포함된 간단한 앱을 만드는 절차를 단계별로 안내합니다. 슬라이더는 플로팅된 함수의 진폭을 제어합니다. 튜토리얼을 실행하거나 여기에 나열된 튜토리얼 단계에 따라 다음 앱을 만들 수 있습니다.

App that contains a plot of some data and a slider labeled "Amplitude"

튜토리얼 실행하기

스크립트 열기

앱 디자이너에서 튜토리얼을 실행하려면 앱 디자이너 시작 페이지를 열고 앱 섹션의 예제 표시를 클릭하십시오. 그런 다음 대화형 방식 튜토리얼을 선택합니다.

앱을 만들기 위한 튜토리얼 단계

앱 디자이너에는 앱을 만드는 데 사용할 수 있는 두 개의 보기인 디자인 보기와 코드 보기가 있습니다. UI 컴포넌트를 만들고 대화형 방식으로 앱을 배치하려면 디자인 보기를 사용하십시오. 앱의 동작을 프로그래밍하려면 코드 보기를 사용하십시오. 앱 디자이너의 오른쪽 위 코너에 있는 토글 버튼을 사용하여 두 가지 보기 간에 전환할 수 있습니다.

Design View and Code View toggle buttons

단순한 플로팅 앱을 만들려면 앱 디자이너에서 새 앱을 열고 다음 단계를 따르십시오.

1단계: 좌표축 컴포넌트 만들기

디자인 보기에서 대화형 방식으로 UI 컴포넌트를 만들고 그 모양을 수정합니다. 컴포넌트 라이브러리에는 대화형 방식으로 앱에 추가할 수 있는 모든 컴포넌트, 컨테이너 및 툴이 들어 있습니다. 컴포넌트 라이브러리에서 앱 캔버스로 컴포넌트를 끌어와 컴포넌트를 추가합니다. 그런 다음 컴포넌트 브라우저에서 속성을 설정하거나, 캔버스에서 바로 크기 및 레이블 텍스트와 같은 컴포넌트의 특성을 편집하여 컴포넌트의 모양을 변경할 수 있습니다.

플로팅된 데이터를 표시하기 위해 플로팅 앱에 좌표축 컴포넌트를 만듭니다. 컴포넌트 라이브러리에서 좌표축 컴포넌트를 캔버스로 끌어서 놓습니다.

2단계: 슬라이더 컴포넌트 만들기

컴포넌트 라이브러리에서 슬라이더 컴포넌트를 캔버스로 끌어서 놓습니다. 좌표축 컴포넌트 아래에 슬라이더 컴포넌트를 배치합니다.

3단계: 슬라이더 레이블 업데이트

슬라이더 레이블 텍스트를 바꿉니다. 레이블을 더블 클릭하고 단어 Slider를 Amplitude로 바꿉니다.

Slider component. The slider label text is selected and reads "Amplitude".

앱 배치를 완료하면 디자인 보기의 캔버스가 다음과 같이 표시됩니다.

Canvas in App Designer Design View. The canvas contains a blank axes component above a slider labeled "Amplitude" with limits of 0 to 100.

앱 배치에 대한 자세한 내용은 앱 디자이너 디자인 보기에 앱 레이아웃 설정하기 항목을 참조하십시오.

4단계: 코드 보기로 이동

앱을 배치했으면 코드를 작성하여 앱의 동작을 프로그래밍합니다. 캔버스 위에서 코드 보기 버튼을 클릭하여 앱 코드를 편집합니다.

디자인 보기에서 앱에 컴포넌트를 추가하면 앱을 실행할 때 실행되는 코드가 자동으로 생성됩니다. 이 코드는 캔버스에 표시된 것과 일치하도록 앱 모양을 구성합니다. 이 코드는 편집할 수 없으며 회색 배경으로 표시됩니다. 이렇게 생성된 코드의 일부로 앱 디자이너는 앱 동작을 프로그래밍할 때 사용할 객체를 생성합니다.

app 객체 — 이 객체는 UI 컴포넌트를 비롯해 속성을 사용하여 지정하는 데이터와 같은 앱의 모든 데이터를 저장합니다. 앱의 모든 함수에서는 이 객체를 첫 번째 인수로 사용해야 합니다. 이 패턴을 사용하면 이러한 함수 내에서 컴포넌트와 속성에 액세스할 수 있습니다.
컴포넌트 객체 — 디자인 보기에서 컴포넌트를 추가할 때마다 앱 디자이너가 app.ComponentName 형식의 이름이 지정된 객체로 컴포넌트를 저장합니다. 컴포넌트 브라우저를 사용하여 앱에서 컴포넌트의 이름을 확인하고 수정할 수 있습니다. 앱 코드 내에서 컴포넌트 속성에 액세스하고 업데이트하려면 app.ComponentName.Property 패턴을 사용하십시오.

5단계: 슬라이더 콜백 함수 추가

콜백 함수를 사용하여 앱 동작을 프로그래밍합니다. 콜백 함수는 슬라이더 값 조정과 같이 앱 사용자가 특정 상호 작용을 수행할 때 실행되는 함수입니다.

플로팅 앱에서 사용자가 슬라이더 값을 조정할 때마다 실행되는 콜백 함수를 추가합니다. 컴포넌트 브라우저에서 app.AmplitudeSlider를 마우스 오른쪽 버튼으로 클릭합니다. 그런 다음, 상황별 메뉴에서 콜백 > ValueChangedFcn 콜백 추가를 선택합니다.

App Designer Component Browser. The Callbacks option of the context menu for app.AmplitudeSlider contains options to add a ValueChangedFcn or a ValueChangingFcn callback.

콜백을 컴포넌트에 추가하면 앱 디자이너가 콜백 함수를 만든 후 이 함수의 본문에 커서를 놓습니다. 앱 디자이너는 app 객체를 콜백 함수의 첫 번째 인수로 자동으로 전달하여 컴포넌트와 그 속성에 대한 액세스를 활성화합니다. 예를 들어, AmplitudeSliderValueChanged 함수에서는 앱 디자이너가 슬라이더의 값에 액세스하는 코드 한 줄을 자동으로 생성합니다.

AmplitudeSliderValueChanged function definition. The function takes in two arguments: app and event. The first line of code in the function is "value = app.AmplitudeSlider.Value". The cursor is on the second line.

콜백 함수를 사용하여 앱 동작을 프로그래밍하는 방법에 대한 자세한 내용은 앱 디자이너에서 콜백 사용하기 항목을 참조하십시오.

6단계: 데이터 플로팅

앱 디자이너에서 그래픽스 함수를 호출할 때 대상 좌표축 또는 부모 객체를 함수에 대한 인수로 지정합니다.

플로팅 앱에서, app.UIAxes 앱에서 axes 객체의 이름을 plot 함수에 대한 첫 번째 인수로 지정하여 앱 사용자가 슬라이더 값을 변경할 때마다 좌표축에 플로팅된 데이터를 업데이트합니다. AmplitudeSliderValueChanged 콜백의 두 번째 라인에 다음 코드를 추가하여 좌표축에 peaks 함수의 스케일링된 출력을 플로팅합니다.