앱을 처음부터 만들기Create an app from scratch

다양한 데이터 원본 중 하나를 사용하고 원하는 경우 더 많은 원본을 추가하여 처음부터 사용자 고유 앱을 만듭니다.Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. 정확한 목표와 워크플로에 대한 결과를 최적화할 수 있도록 각 UI 요소의 동작과 모양을 지정합니다.Specify the appearance and behavior of each UI element so that you can optimize the result for your exact goals and workflow. 이 접근 방식은 앱을 자동으로 생성하는 것보다 훨씬 시간 집약적이지만, 노력한 앱 제작자는 요구 사항에 맞는 최고의 앱을 빌드할 수 있습니다.This approach is much more time-intensive than generating an app automatically, but experienced app makers can build the best app for their needs.

참고

이 항목은 Windows용 PowerApps Studio용으로 작성되었지만, 브라우저에서 PowerApps를 여는 경우 단계가 유사합니다.This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

이 자습서를 따라 두 화면을 포함하는 앱을 만듭니다.By following this tutorial, you'll create an app that contains two screens. 한 화면에서 사용자는 레코드 집합을 통해 찾아볼 수 있습니다.On one screen, users can browse through a set of records:

사용자가 데이터의 집합을 통해 스크롤할 수 있는 화면

다른 화면에서 사용자는 한 레코드를 만들고 한 레코드에서 하나 이상의 필드를 업데이트하거나 전체 레코드를 삭제할 수 있습니다.On the other screen, users can create a record, update one or more fields in a record, or delete an entire record:

사용자가 데이터를 추가하거나 업데이트할 수 있는 화면

필수 조건Prerequisites

자습서에서 일반적인 개념을 살펴볼 수 있습니다. 또는 이 단계를 완료하면 자습서의 내용을 정확하게 따를 수 있습니다.You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. 이 데이터를 복사한 다음 Excel 파일에 붙여넣습니다.Copy this data, and then paste it into an Excel file.

    시작 날짜Start Day 시작 시간Start Time 자원 1Volunteer 1 자원 2Volunteer 2
    토요일Saturday 오전 10시 정오10am-noon VasquezVasquez KumashiroKumashiro
    토요일Saturday 정오~오후 2시noon-2pm IceIce SinghalSinghal
    토요일Saturday 오후 2시~4시2pm-4-pm MykMyk MuellerMueller
    일요일Sunday 오전 10시 정오10am-noon LiLi AdamsAdams
    일요일Sunday 오전 10시 정오10am-noon SinghSingh MorganMorgan
    일요일Sunday 오전 10시 정오10am-noon BatyeBatye NguyenNguyen
  2. PowerApps에서 정보를 구문 분석할 수 있도록 해당 데이터를 Schedule이라는 테이블로 형식을 지정합니다.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    자세한 내용은 워크시트에서 Excel 테이블 만들기를 참조하세요.For more information, see Create an Excel table in a worksheet.

  3. eventsignup.xls 이름으로 저장한 다음, OneDrive와 같은 클라우드 저장소 계정으로 업로드합니다.Save the file under the name eventsignup.xls, and then upload it to a cloud-storage account, such as OneDrive.

  4. PowerApps를 처음 접하는 경우:If you're new to PowerApps:

새 앱을 만들고 데이터에 연결Create a blank app, and connect to data

  1. PowerApps Studio에서 (화면의 왼쪽 가장자리에 있는) 파일 메뉴에서 새로 만들기를 클릭하거나 탭합니다.In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).

    파일 메뉴의 새 옵션

  2. 비어 있는 앱 타일에서 휴대폰 레이아웃을 클릭하거나 탭합니다.On the Blank app tile, click or tap Phone layout.

    데이터에서 앱을 만드는 옵션

  3. 메시지가 표시되면 둘러보기 소개를 사용하여 PowerApps의 주요 영역을 이해합니다(또는 건너뛰기를 클릭하거나 탭하기).If prompted, take the intro tour to understand the main areas of PowerApps (or click or tap Skip).

    둘러보기

    화면의 왼쪽 위 모서리에 있는 물음표 아이콘을 클릭하거나 탭한 후 소개 둘러보기를 클릭하거나 탭하여 둘러보기를 나중에 항상 이용할 수 있습니다.You can always take the tour later by clicking or tapping the question-mark icon near the upper-left corner of the screen and then clicking or tapping Take the intro tour.

  4. 왼쪽 탐색 모음에서 오른쪽 위 모서리의 아이콘을 클릭하거나 탭하여 썸네일 보기로 전환합니다.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    보기 토글

  5. 오른쪽 창에서 데이터 원본 추가를 클릭하거나 탭합니다.In the right-hand pane, click or tap Add data source.

    데이터 원본 추가

  6. 다음의 단계 중 하나를 수행합니다.Perform either of these steps:

    • 클라우드 저장소 계정에 대해 이미 연결되어 있는 경우, 클릭하거나 탭합니다.If you already have a connection to your cloud-storage account, click or tap it.
    • 클라우드 저장소 계정에 대한 연결이 없는 경우, 연결 추가를 클릭하거나 탭하고, 계정 형식을 클릭하거나 탭하거나, 또는 연결을 클릭하거나 탭한 다음, (메시지가 표시된 경우) 자격 증명을 제공합니다.If you don't have a connection to your cloud-storage account, click or tap Add Connection, click or tap your account type, click or tap Connect, and then (if prompted) provide your credentials.
  7. Excel 파일 선택에서 eventsignup.xlsx를 찾아 클릭하거나 탭합니다.Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    사용할 Excel 파일 지정

  8. 표 선택에서 일정 확인란을 선택한 다음 연결을 클릭하거나 탭합니다.Under Choose a table, select the Schedule check box, and then click or tap Connect.

    Excel에서 사용할 표 지정

    오른쪽 창의 데이터 원본 탭은 앱에 추가된 데이터 원본을 보여 줍니다.The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    연결된 데이터 원본 표시

    이 자습서에는 데이터 원본이 하나만 필요하지만 나중에 더 많은 데이터 원본을 추가할 수 있습니다.This tutorial requires only one data source, but you can add more data sources later.

데이터 표시Show the data

  1. 탭에서 새 화면을 클릭하거나 탭한 다음, 목록 화면을 클릭하거나 탭합니다.In the Home tab, click or tap New screen and then click or tap List screen.

    제목, 부제목 및 본문 요소가 있는 레이아웃 추가

    화면에는 검색 상자와 갤러리 컨트롤 등의 여러 기본 컨트롤이 추가됩니다.A screen is added with several default controls, such as a search box and a Gallery control. 갤러리는 검색 상자에서 전체 화면을 처리합니다.The gallery covers the entire screen under the search box.

  2. 화살표를 제외한 갤러리의 어디에서나(예: 검색 상자 아래에서 바로) 클릭하거나 탭합니다.Click or tap anywhere in the gallery except an arrow, such as directly under the search box.

    갤러리 선택

  3. 오른쪽 창에서 레이아웃 목록을 연 다음 제목, 부제목 및 본문을 보여주는 옵션을 클릭하거나 탭합니다.In the right-hand pane, open the Layouts list, and then click or tap the option that shows a title, a subtitle and body.

    갤러리 선택

  4. 속성 목록에서 항목을 클릭하거나 탭하여 수식 입력줄에 붙여넣습니다.In the property list, click or tap Items, copy this formula, and paste it into the formula bar:

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

    속성 목록이 있는지 확실하지 않은 경우 컨트롤 추가 및 구성을 참조하세요.If you're not sure where the property list is, see Add and configure controls.

    참고

    공백이 있는 열 이름이 포함된 Excel 또는 SharePoint 데이터 원본의 경우 PowerApps는 공백을 "_x0020_"으로 표시합니다.For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". 이 예제에서는 열 "Volunteer 1""Volunteer_x0020_1"에서 수식으로 나타납니다.In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

    이 갤러리는 일정 표에서 데이터를 표시합니다.This gallery shows the data from the Schedule table.

    기본적으로 갤러리의 일정 데이터

    검색 상자는 사용자가 입력한 텍스트를 기반으로 갤러리를 필터링할 수 있습니다.A search box can filter the gallery based on text that the user types. 사용자가 검색 상자에 하나 이상의 문자를 입력하는 경우, 갤러리는 자원 봉사 1 필드에 사용자가 입력한 텍스트를 포함한 이 레코드만을 표시합니다.If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer 1 field contains the text that the user typed.

    정렬 단추는 자원 봉사 1 열의 데이터를 기반으로 레코드를 정렬할 수 있습니다.The sort button can sort the records based on data in the Volunteer 1 column. 사용자가 해당 단추를 클릭하거나 탭하면, 정렬 순서가 오름차순과 내림차순 사이에 전환됩니다.If a user clicks or taps that button, the sort order toggles between ascending and descending.

    이 수식에는 Sort, If, IsBlank, FilterText 함수가 포함됩니다.That formula contains the Sort, If, IsBlank, Filter, and Text functions. 이 함수를 비롯한 기타 함수에 대한 자세한 내용은 수식 참조를 참조하세요.For more information about these and other functions, see the formula reference

  5. 검색 상자에 i를 입력하고 정렬 단추를 한 번(또는 홀수 번) 클릭하거나 누릅니다.Type an i in the search box, and click or tap the sort button once (or an odd number of times).

    갤러리에 다음 결과가 표시됩니다.The gallery shows these results.

    갤러리 정렬 및 필터링

    정렬, 필터다른 함수에 대한 자세한 내용More information about the Sort, Filter, and other functions

  6. 컨트롤을 클릭하거나 탭하여 화면 맨 위의 레이블 컨트롤을 선택합니다.Select the Label control at the top of the screen by clicking or tapping the control.

    제목 표시줄 선택

  7. 속성 목록에서 텍스트를 클릭하거나 탭하여 이 텍스트를 복사한 후 수식 입력줄에 붙여넣습니다.In the property list, click or tap Text, copy this text, and then paste it in the formula bar.
    "레코드 보기""View Records"

    제목 표시줄 변경

ChangeScreen 및 배너 만들기Create the ChangeScreen and its banner

  1. Screen1을 삭제하고 Screen2의 이름을 ViewScreen으로 바꿉니다.Delete Screen1, and rename Screen2 to ViewScreen.

    화면 이름 바꾸기

  2. 화면을 추가하고 이름을 ChangeScreen으로 변경합니다.Add a screen, and rename it ChangeScreen.

    화면 추가 및 이름 바꾸기

  3. 삽입 탭에서 텍스트, 레이블을 차례로 클릭하거나 탭합니다.On the Insert tab, click or tap Text, and then click or tap Label.

  4. 방금 추가한 레이블 컨트롤을 구성합니다.Configure the Label control that you just added:

    • Text 속성을 다음 수식으로 설정합니다.Set its Text property to this formula:
      "레코드 변경""Change record"

    • Fill 속성을 다음 수식으로 설정합니다.Set its Fill property to this formula:
      RGBA(62, 96, 170, 1).RGBA(62, 96, 170, 1).

    • Color 속성을 다음 수식으로 설정합니다.Set its Color property to this formula:
      RGBA(255, 255, 255, 1)RGBA(255, 255, 255, 1)

    • Align 속성을 Center로 설정합니다.Set its Align property to Center.

    • X 속성을 0으로 설정합니다.Set its X property to 0.

    • Width 속성을 640으로 설정합니다.Set its Width property to 640. 레이블 컨트롤은 변경 사항을 반영합니다.The Label control reflects your changes.

      배너가 있는 ChangeScreen

양식 추가 및 구성Add and configure a form

  1. 삽입 탭에서 양식, 편집을 차례로 클릭하거나 탭합니다.On the Insert tab, click or tap Forms, and then click or tap Edit.

  2. 대부분의 화면을 포함하도록 양식을 이동하고 양식 크기를 조정합니다.Move and resize the form to cover most of the screen.

    양식 추가

    이미 양식을 추가하고 제거하지 않는 경우 기본적으로 양식 이름은 Form1입니다.The form is named Form1 by default unless you already added and removed a form. 이 경우 양식 양식의 이름을 Form1으로 변경합니다.In that case, rename the form to Form1.

  3. Form1DataSource 속성을 Schedule로 설정합니다.Set DataSource property of Form1 to Schedule.

  4. Form1Item 속성을 다음 식으로 설정합니다.Set the Item property of Form1 to this expression:
    BrowseGallery1.SelectedBrowseGallery1.Selected

  5. 오른쪽 창에서 각 필드의 확인란을 클릭하거나 탭하여 표시합니다.In the right-hand pane, click or tap the checkbox for each field to show it.

    양식에 필드 표시

  6. 양식의 맨 나래 근처에서 사용자 지정 카드 추가를 클릭하거나 탭합니다.Near the bottom of the form, click or tap Add a custom card.

    사용자 지정 카드 추가

  7. 새 카드에서 레이블 컨트롤을 추가합니다.Add a Label control in the new card.

  8. 새 컨트롤의 AutoHeight 속성을 true로 설정하고 해당 Text 속성을 다음 수식으로 설정합니다.Set the AutoHeight property of the new control to true, and set its Text property to this formula:
    Form1.ErrorForm1.Error

    레이블은 양식에서 오류를 표시합니다.The label will show any errors from the form.

  9. 왼쪽 탐색 모음에서 선택하려면 ChangeScreen의 썸네일을 클릭하거나 탭합니다.In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.

  10. 삽입 탭에서 아이콘을 클릭하거나 탭하고 뒤로 화살표 추가 옵션을 클릭하거나 탭한 다음, 화살표를 화면의 왼쪽 아래 모서리로 이동합니다.On the Insert tab, click or tap Icons, click or tap the option to add a Back arrow, and then move the arrow to the lower-left corner of the screen.

  11. 화살표의 OnSelect 속성을 다음 수식으로 설정합니다.Set the arrow's OnSelect property to this formula:

    ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)

    사용자가 화살표를 클릭하거나 탭하면 Navigate 함수는 ViewScreen을 엽니다.When the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

  12. 양식에서 단추 컨트롤을 추가하고 단추의 텍스트 속성을 "저장"으로 설정합니다.Add a Button control under the form, and set the button's Text property to "Save".

    저장 단추 추가

  13. 단추의 OnSelect 속성을 이 수식에 설정::Set the OnSelect property of the button to this formula::

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))

    사용자가 단추를 클릭하거나 탭하면 SubmitForm 함수는 데이터 원본에 변경 내용을 저장하며 ViewScreen이 다시 나타납니다.When the user clicks or taps the button, the SubmitForm function saves any changes to the data source, and the ViewScreen reappears.

  14. 화면 맨 아래에서 다른 단추를 추가하고, 해당 텍스트 속성을 "제거"로 설정하고, 해당 OnSelect 속성을 이 수식으로 설정합니다.At the bottom of the screen, add another button, set its Text property to "Remove", and set its OnSelect property to this formula:

    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))
    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))

    사용자가 이 단추를 클릭하거나 탭하면 제거 함수는 레코드를 제거하면 ViewScreen이 다시 나타납니다.When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

  15. Remove 단추의 Visible 속성을 이 수식으로 설정합니다.Set the Visible property of the Remove button to this formula:
    Form1.Mode=FormMode.EditForm1.Mode=FormMode.Edit

    이 단계는 사용자가 레코드를 만들 때 제거 단추를 숨깁니다.This step hides the Remove button when the user is creating a record.

    ChangeScreen은 이 예제와 일치합니다.The ChangeScreen matches this example:

    Final ChangeScreen

ViewScreen에서 탐색 설정Set navigation from ViewScreen

  1. 왼쪽 탐색 모음에서 ViewScreen의 썸네일을 클릭하거나 탭합니다.In the left navigation bar, click or tap the thumbnail for the ViewScreen.

    ViewScreen 열기

  2. 갤러리의 첫 번째 레코드에 대해 다음 화살표를 클릭하거나 탭합니다.Click or tap the Next arrow for the first record in the gallery.

    다음 화살표

  3. 해당 화살표의 OnSelect 속성을 이 수식으로 설정합니다.Set the OnSelect property of that arrow to this formula:

    Navigate(ChangeScreen,ScreenTransition.None)Navigate(ChangeScreen,ScreenTransition.None)

  4. 오른쪽 위 모서리에서 더하기(+) 아이콘을 클릭하거나 탭합니다.In the upper-right corner, click or tap the plus icon.

    레코드 추가

  5. 선택된 아이콘의 OnSelect 속성을 이 수식으로 설정합니다.Set the OnSelect property of the selected icon to this formula:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`

    사용자가 이 아이콘을 클릭하거나 탭하면 ChangeScreen은 비어 있는 각 필드를 표시하며, 사용자는 레코드를 보다 쉽게 만들 수 있습니다.When the user clicks or taps this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

앱 실행Run the app

이 섹션에서 보여주는 단계처럼, 앱을 사용자 지정할 때 미리 보기 모드에서 앱을 실행하여 변경 내용을 테스트할 수 있습니다.As you customize the app, test your changes by running the app in Preview mode, as the steps in this section describe.

  1. 왼쪽 탐색 모음에서 상단 썸네일을 클릭하거나 탭하여 ViewScreen을 선택합니다.In the left navigation bar, click or tap the top thumbnail to select the ViewScreen.

    ViewScreen 선택

  2. F5를 눌러 (또는 오른쪽 위 모서리의 미리 보기 아이콘을 클릭하거나 탭하기) 미리 보기 모드를 엽니다.Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    미리 보기 모드 열기

  3. 레코드에 대한 다음 화살표를 클릭하거나 탭하여 해당 레코드에 대한 세부 정보를 표시합니다.Click or tap the Next arrow for a record to show details about that record.

  4. ChangeScreen에서 하나 이상의 필드에서 정보를 변경한 후, 저장을 클릭하거나 탭하여 변경 내용을 저장하거나 제거를 클릭하거나 탭하여 레코드를 제거합니다.On the ChangeScreen, change the information in one or more fields, and then save your changes by clicking or tapping Save, or remove the record by clicking or tapping Remove.

  5. Esc 키를 눌러 (또는 제목 표시줄 아래의 닫기 아이콘을 클릭하거나 탭하기) 미리 보기 모드를 닫습니다.Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    미리 보기 모드 닫기

다음 단계Next steps

  • 다른 장치에서 실행할 수 있도록 앱을 클라우드에 저장하려면 Ctrl-S를 누릅니다.Press Ctrl-S to save your app in the cloud so that you can run it from other devices.
  • 다른 사용자가 앱을 실행할 수 있도록 앱을 공유하세요.Share the app so that other people can run it.
  • 갤러리, 양식수식에 대한 자세한 내용을 배웁니다.Learn more about galleries, forms, and formulas.