이 페이지의 최신 내용은 아직 번역되지 않았습니다. 최신 내용은 영문으로 볼 수 있습니다.

GUIDE를 사용하여 간단한 앱 만들기

참고

이 항목은 GUIDE를 사용하여 만드는 앱에 적용됩니다. 앱을 작성하는 또 다른 방법은 앱 작성 방법 항목을 참조하십시오.

이 예제에서는 GUIDE를 사용하여 아래에 표시된 것처럼 간단한 사용자 인터페이스(UI)가 포함된 앱을 만드는 방법을 보여줍니다.

이후 섹션에서는 이 앱을 만드는 프로세스를 안내합니다.

이 앱을 만든 코드를 보고 실행하는 작업만 하려면 현재 폴더를 쓰기 권한을 갖는 폴더로 설정하십시오. 다음 MATLAB® 명령을 실행하여 예제 코드를 복사한 후 편집기에서 엽니다.

copyfile(fullfile(docroot, 'techdoc','creating_guis',...
   'examples','simple_gui*.*')),fileattrib('simple_gui*.*', '+w');
guide simple_gui.fig;
edit simple_gui.m
실행 버튼을 클릭하여 앱을 실행합니다.

GUIDE 레이아웃 편집기에서 새 UI 열기

  1. MATLAB 프롬프트에 guide를 입력하여 GUIDE를 시작합니다.

  2. GUIDE 빠른 시작 대화 상자에서 Blank GUI (Default) 템플릿을 선택한 다음 확인(OK)을 클릭합니다.

  3. 구성요소 팔레트에 구성요소 이름을 표시합니다.

    1. 파일(File) > 기본 설정(Preferences) > GUIDE를 선택합니다.

    2. 구성요소 팔레트에 이름 표시(Show names in component palette)를 선택합니다.

    3. 확인(OK)을 클릭합니다.

GUIDE에서 창 크기 설정하기

레이아웃 편집기에서 그리드 영역 크기를 조정하여 창 크기를 설정합니다. 오른쪽 아래 코너를 클릭하여 대략적으로 캔버스의 높이가 3인치, 너비가 4인치가 될 때까지 끌어서 놓습니다. 필요한 경우, 캔버스를 더 크게 만듭니다.

UI 레이아웃 설정하기

UI의 구성요소를 추가하고 배치하며 구성요소에 레이블을 지정합니다.

  1. UI에 3개의 푸시 버튼을 추가합니다. 레이아웃 편집기 왼쪽의 구성요소 팔레트에서 푸시 버튼 툴을 선택하고 레이아웃 영역으로 끌어서 놓습니다. 다음 Figure에 표시된 것처럼 대략적으로 배치하여 3개의 버튼을 만듭니다.

  2. UI에 나머지 구성요소를 추가합니다.

    • 정적 텍스트 영역

    • 팝업 메뉴

    • 좌표축

    다음 Figure에 표시된 대로 구성요소를 배열합니다. 좌표축 구성요소의 크기를 2x2인치 정도로 조정합니다.

구성요소 배치하기

여러 구성요소의 상위(부모)가 동일하면 배치 툴을 사용하여 구성요소를 서로에 맞춰 배치할 수 있습니다. 3개의 푸시 버튼을 배치하려면 다음 단계를 수행하십시오.

  1. Ctrl 키를 누른 채로 푸시 버튼 3개를 모두 클릭하여 선택합니다.

  2. 툴(Tools) > 객체 배치(Align Object)를 선택합니다.

  3. 배치 툴에서 다음과 같이 설정합니다.

    • 가로 방향으로 왼쪽 맞춤.

    • 세로 방향으로 푸시 버튼 간 간격 20픽셀.

  4. 확인(OK)을 클릭합니다.

푸시 버튼 레이블 지정하기

3개의 푸시 버튼은 각각 플롯 유형 surf, mesh, contour를 지정합니다. 이 섹션에서는 다음 옵션을 통해 버튼에 레이블을 지정하는 방법을 보여줍니다.

  1. 보기(View) > 속성 인스펙터(Property Inspector)를 선택합니다.

  2. 레이아웃 영역에서 맨 위의 푸시 버튼을 클릭합니다.

  3. 속성 인스펙터에서 String 속성을 선택한 다음, 기존 값을 단어 Surf로 바꿉니다.

  4. Enter 키를 누릅니다. 푸시 버튼 레이블이 Surf로 변경됩니다.

  5. 나머지 푸시 버튼 각각을 차례대로 클릭하여 3~4단계를 반복합니다. 가운데 푸시 버튼에 레이블 Mesh를, 맨 아래 푸시 버튼에 레이블 Contour를 지정합니다.

팝업 메뉴 항목 나열하기

팝업 메뉴에서는 3개의 데이터 세트(peaks, membrane, sinc)를 선택 항목으로 제공합니다. 이 데이터 세트는 동일한 이름의 MATLAB 함수에 해당합니다. 이 섹션에서는 데이터 세트를 팝업 메뉴의 선택 항목으로 나열하는 방법을 보여줍니다.

  1. 레이아웃 영역에서 팝업 메뉴를 클릭합니다.

  2. 속성 인스펙터에서 String 옆에 있는 버튼을 클릭합니다. String 대화 상자가 표시됩니다.

  3. 기존 텍스트를 3개의 데이터 세트 이름(peaks, membrane, sinc)으로 바꿉니다. Enter 키를 눌러 다음 라인으로 이동합니다.

  4. 항목 편집이 끝나면 확인(OK)을 클릭합니다.

    레이아웃 영역의 팝업 메뉴에 목록의 첫 번째 항목 peaks가 표시됩니다.

정적 텍스트 수정하기

이 UI에서 정적 텍스트는 팝업 메뉴의 레이블 역할을 합니다. 이 섹션에서는 Select Data를 읽어 들이도록 정적 텍스트를 변경하는 방법을 보여줍니다.

  1. 레이아웃 영역에서 정적 텍스트를 클릭합니다.

  2. 속성 인스펙터에서 String 옆에 있는 버튼을 클릭합니다. 표시된 String 대화 상자에서 기존 텍스트를 구 Select Data로 바꿉니다.

  3. 확인(OK)을 클릭합니다.

    팝업 메뉴 위의 정적 텍스트 구성요소에 Select Data가 표시됩니다.

레이아웃 저장하기

레이아웃을 저장할 때 GUIDE는 두 개의 파일 FIG 파일과 코드 파일을 만듭니다. 확장자가 .fig인 FIG 파일은 레이아웃 설명이 포함된 이진 파일입니다. 확장자가 .m인 코드 파일에는 앱 동작을 제어하는 MATLAB 함수가 포함됩니다.

  1. 툴(Tools) > 실행(Evaluate)을 선택하여 프로그램을 저장하고 실행합니다.

  2. GUIDE에 다음과 같이 묻는 대화 상자가 표시됩니다. "활성화하면 변경 내용이 Figure 파일 및 MATLAB 코드에 저장됩니다. 계속하시겠습니까?"

    예(Yes)를 클릭합니다.

  3. GUIDE의 현재 폴더에서 다른 이름으로 저장(Save As) 대화 상자가 열리고 FIG 파일 이름을 입력하라는 메시지가 표시됩니다.

  4. 쓰기 권한이 있는 폴더를 찾은 다음, FIG 파일의 파일 이름 simple_gui를 입력합니다. GUIDE는 이 이름을 사용하여 FIG 파일과 코드 파일을 모두 저장합니다.

  5. 파일을 저장할 폴더가 MATLAB 경로에 없으면 GUIDE에서 현재 폴더를 변경할 수 있는 대화 상자가 열립니다.

  6. GUIDE는 파일 simple_gui.figsimple_gui.m을 저장한 다음, 프로그램을 실행합니다. 또한 디폴트 편집기에서 코드 파일을 엽니다.

    앱이 새로운 창에서 열립니다. 이 창에는 MATLAB Figure 창에 표시되는 표준 메뉴 모음과 표준 도구 모음이 없습니다. GUIDE를 사용하여 고유한 메뉴 및 도구 모음 버튼을 추가할 수는 있지만, 기본적으로 GUIDE 앱에는 이러한 구성요소가 전혀 포함되어 있지 않습니다.

    simple_gui를 실행할 때 팝업 메뉴에서 데이터 세트를 선택하고 푸시 버튼을 클릭할 수는 있지만 아무런 영향이 발생하지 않습니다. 팝업 메뉴와 버튼을 실행하는 명령문이 코드 파일에 없기 때문입니다.

GUIDE를 열지 않고도 GUIDE로 만든 앱을 실행하려면 코드 파일 이름을 입력하여 해당 코드 파일을 실행하십시오.

 simple_gui
다음 예와 같이 코드 파일과 함께 run 명령을 사용해도 됩니다.
run simple_gui

참고

GUIDE 외부에서 FIG 파일을 열어 앱을 실행하지 마십시오. 그럴 경우, Figure가 열리고 사용할 준비가 된 것처럼 보이지만, UI가 초기화되지 않고 콜백이 작동하지 않습니다.

앱 동작 코딩하기

이전 섹션 레이아웃 저장하기에서 레이아웃을 저장할 때, GUIDE는 두 개의 FIG 파일 simple_gui.fig와 프로그램 파일 simple_gui.m을 만들었습니다. 하지만 simple_gui.m에 동작을 수행하는 명령문이 포함되어 있지 않기 때문에 앱이 응답하지 않습니다. 이 섹션에서는 앱이 작동하도록 이 파일에 코드를 추가하는 방법을 보여줍니다.

플로팅할 데이터 생성하기

이 섹션에서는 사용자가 버튼을 클릭하는 경우 플로팅할 데이터가 어떻게 생성되는지 보여줍니다. 개시 함수는 MATLAB 함수를 호출하여 이 데이터를 생성합니다. 개시 함수는 GUIDE로 생성된 모든 코드 파일의 첫 번째 콜백이며, UI가 열릴 때 이 UI를 초기화합니다.

이 예제에서는 3개의 데이터 세트를 만드는 코드를 개시 함수에 추가합니다. 코드는 MATLAB 함수 peaks, membrane, sinc를 사용합니다.

  1. MATLAB 편집기에 개시 함수를 표시합니다.

    편집기에 파일 simple_gui.m이 아직 열려 있지 않은 경우 레이아웃 편집기에서 보기(View) > 편집기(Editor)를 선택하여 여십시오.

  2. 편집기(Editor) 탭의 탐색(Navigate) 섹션에서 이동을 클릭한 다음, simple_gui_OpeningFcn을 선택합니다.

    다음 코드가 포함된 개시 함수로 커서가 이동합니다.

    % --- Executes just before simple_gis made visible.
    function simple_gui_OpeningFcn(hObject, eventdata, handles, varargin)
    % This function has no output args, see OutputFcn.
    % hObject    handle to figure
    % eventdata  reserved - to be defined in a future version of MATLAB
    % handles    structure with handles and user data (see GUIDATA)
    % varargin   command line arguments to simple_g(see VARARGIN)
    
    % Choose default command line output for simple_gui
    handles.output = hObject;
     
    % Update handles structure
    guidata(hObject, handles);
     
    % UIWAIT makes simple_gwait for user response (see UIRESUME)
    % uiwait(handles.figure1);
  3. 개시 함수에서 % varargin...으로 시작되는 주석 바로 아래에 다음 코드를 추가하여 플로팅할 데이터를 만듭니다.

    % Create the data to plot.
    handles.peaks=peaks(35);
    handles.membrane=membrane;
    [x,y] = meshgrid(-8:.5:8);
    r = sqrt(x.^2+y.^2) + eps;
    sinc = sin(r)./r;
    handles.sinc = sinc;
    % Set the current data value.
    handles.current_data = handles.peaks;
    surf(handles.current_data)

    실행 가능한 처음 6개 라인은 MATLAB 함수 peaks, membrane, sinc를 사용하여 데이터를 만듭니다. 이러한 함수는 모든 콜백에 제공되는 인수인 handles 구조체에 데이터를 저장합니다. 푸시 버튼에 대한 콜백은 handles 구조체에서 데이터를 가져올 수 있습니다.

    마지막 2개 라인은 현재 데이터 값을 만들어 peaks로 설정한 다음, peaks에 대한 surf 플롯을 표시합니다. 다음 Figure에서는 앱이 처음 표시될 때의 모양을 보여줍니다.

팝업 메뉴 동작 코딩하기

팝업 메뉴는 데이터를 플로팅할 수 있는 옵션을 제공합니다. 사용자가 플롯 3개 중 하나를 선택하면 선택한 메뉴 항목의 인덱스가 팝업 메뉴의 Value 속성에 설정됩니다. 팝업 메뉴 콜백은 팝업 메뉴의 Value 속성을 읽어 들여 메뉴에 현재 표시되고 있는 항목을 확인하고, 이에 따라 handles.current_data를 설정합니다.

  1. MATLAB 편집기에 팝업 메뉴 콜백을 표시합니다. GUIDE 레이아웃 편집기에서 팝업 메뉴 구성요소를 마우스 오른쪽 버튼으로 클릭한 다음, 콜백 보기(View Callbacks) > Callback을 선택합니다.

    GUIDE의 편집기에 코드 파일이 표시되고 다음 코드가 포함된 팝업 메뉴 콜백으로 커서가 이동합니다.

    % --- Executes on selection change in popupmenu1.
    function popupmenu1_Callback(hObject, eventdata, handles)
    % hObject    handle to popupmenu1 (see GCBO)
    % eventdata  reserved - to be defined in a future version of MATLAB
    % handles    structure with handles and user data (see GUIDATA)
  2. popupmenu1_Callback에서 % handles...로 시작되는 주석 뒤에 다음 코드를 추가합니다.

    이 코드는 먼저 다음 2개의 팝업 메뉴 속성을 가져옵니다.

    • String — 메뉴 내용이 포함된 셀형 배열

    • Value — 선택한 데이터 세트의 메뉴 내용에 대한 인덱스

    그런 다음, 코드는 switch 문을 사용하여 선택한 데이터 세트를 현재 데이터로 설정합니다. 마지막 명령문은 handles 구조체에 변경 내용을 저장합니다.

    % Determine the selected data set.
    str = get(hObject, 'String');
    val = get(hObject,'Value');
    % Set current data to the selected data set.
    switch str{val};
    case 'peaks' % User selects peaks.
       handles.current_data = handles.peaks;
    case 'membrane' % User selects membrane.
       handles.current_data = handles.membrane;
    case 'sinc' % User selects sinc.
       handles.current_data = handles.sinc;
    end
    % Save the handles structure.
    guidata(hObject,handles)

푸시 버튼 동작 코딩하기

각 푸시 버튼은 팝업 메뉴의 현재 선택 항목으로 지정된 데이터를 사용하여 서로 다른 유형의 플롯을 만듭니다. 푸시 버튼 콜백은 handles 구조체에서 데이터를 가져온 다음, 플로팅합니다.

  1. MATLAB 편집기에 Surf 푸시 버튼 콜백을 표시합니다. 레이아웃 편집기에서 Surf 푸시 버튼을 마우스 오른쪽 버튼으로 클릭한 다음, 콜백 보기(View Callbacks) > 콜백(Callback)을 선택합니다.

    편집기에 코드 파일이 표시되고 다음 코드가 포함된 Surf 푸시 버튼 콜백으로 커서가 이동합니다.

    % --- Executes on button press in pushbutton1.
    function pushbutton1_Callback(hObject, eventdata, handles)
    % hObject    handle to pushbutton1 (see GCBO)
    % eventdata  reserved - to be defined in a future version of MATLAB
    % handles    structure with handles and user data (see GUIDATA)
  2. 콜백에서 % handles...로 시작되는 주석 바로 아래에 다음 코드를 추가합니다.

    % Display surf plot of the currently selected data.
    surf(handles.current_data);
  3. 1~2단계를 반복하여 Mesh 푸시 버튼 콜백과 Contour 푸시 버튼 콜백에 유사한 코드를 추가합니다.

    • Mesh 푸시 버튼 콜백 pushbutton2_Callback에 다음 코드를 추가합니다.

        % Display mesh plot of the currently selected data.
        mesh(handles.current_data);
    • Contour 푸시 버튼 콜백 pushbutton3_Callback에 다음 코드를 추가합니다.

        % Display contour plot of the currently selected data.
        contour(handles.current_data);
  4. 파일(File) > 저장을 선택하여 코드를 저장합니다.

앱 실행하기

앱 동작 코딩하기에서는 팝업 메뉴와 푸시 버튼을 프로그래밍했습니다. 또한 팝업 메뉴와 푸시 버튼에서 사용할 데이터를 만들고 표시를 초기화했습니다. 이제 프로그램을 실행하여 작동 방식을 확인할 수 있습니다.

  1. 툴(Tools) > 실행(Evaluate)을 선택하여 레이아웃 편집기에서 프로그램을 실행합니다.

  2. 팝업 메뉴에서 Membrane을 선택한 다음, Mesh 버튼을 클릭합니다. 앱에 MathWorks® MathWorks L 모양의 멤브레인 로고의 mesh 플롯이 표시됩니다.

  3. 창을 닫기 전에 다른 조합으로도 실행해 봅니다.

관련 항목