PowerApps에서 멀티미디어 파일 사용Using multimedia files in PowerApps

이 항목에서는 캔버스 앱에 멀티미디어 파일을 포함하고, 데이터 원본에 펜 드로잉을 업로드하고, 캔버스 앱에서 데이터 원본의 이미지를 표시하는 방법을 보여 줍니다.This topic shows you how to embed multimedia files in your canvas app, upload pen drawings to a data source, and show images from a data source in your canvas app. 이 토픽에 사용된 데이터 원본은 비즈니스용 OneDrive에서 Excel 파일입니다.The data source used in this topic is an Excel file in OneDrive for Business.

필수 조건Prerequisites

PowerApps에 등록한 다음, 등록에 사용한 동일한 자격 증명을 사용하여 로그인합니다.Sign up for PowerApps, and then sign in using the same credentials that you used to sign up.

파일 또는 클라우드에서 미디어 추가Add media from a file or the cloud

추가할 미디어 파일의 종류를 선택할 수 있습니다(예: 이미지, 비디오 또는 오디오).You can choose the kind of media file to add (for example, images, video, or audio).

  1. 콘텐츠 탭에서 미디어를 선택합니다.On the Content tab, select Media.

  2. 미디어 아래에서 이미지, 비디오 또는 오디오를 선택한 다음 찾아보기를 선택합니다.Under Media, select Images, Videos, or Audio, and then select Browse:

    미디어 찾아보기

  3. 추가하려는 파일을 선택한 다음 열기를 선택합니다.Select the file that you want to add, and then select Open.

    컴퓨터에서 그림 폴더가 열리고 여기에서 이미지를 선택하거나 다른 폴더로 이동할 수 있습니다.The Pictures folder on your computer opens, and you can select an image from there or navigate to another folder.

  4. 파일 추가가 완료되면 Esc 키를 눌러 기본 작업 영역으로 돌아갑니다.When you finish adding files, press Esc to return to the default workspace.

  5. 삽입 탭에서 미디어를 선택한 다음 이미지, 비디오 또는 오디오를 선택합니다.On the Insert tab, select Media, and then select Image, Video, or Audio:

    미디어 유형 선택

  6. 이미지 컨트롤을 추가한 경우 해당 Items 속성을 추가한 파일로 설정합니다.If you added an image control, set its Image property to the file that you added:

    이미지 속성 설정

    참고

    작은따옴표 안에 확장명 없이 파일 이름만 지정합니다.Specify the file name only, without the extension, inside single quotes.

  7. 비디오 또는 오디오 컨트롤을 추가한 경우 해당 Media 속성을 추가한 파일로 설정합니다.If you added a video or audio control, set its Media property to the file that you added:

    미디어 속성 설정

    참고

    비디오 컨트롤의 Media 속성을 큰따옴표로 묶인 적절한 URL로 설정하여 YouTube 비디오를 재생합니다.Play a YouTube video by setting the Media property of a video control to the appropriate URL, enclosed in double quotation marks.

Azure Media Services에서 미디어 추가Add media from Azure Media Services

  1. Azure Media Services 계정에서 AMS > 설정 > 자산에서 비디오 자산을 업로드하고 게시합니다.From your Azure Media Services account, upload and publish your video asset from AMS > Settings > Assets.

  2. 비디오를 게시한 후 해당 URL을 복사합니다.After the video is published, copy its URL.

  3. PowerApps의 삽입 > 미디어에서 비디오 컨트롤을 추가합니다.From PowerApps, add the Video control from Insert > Media.

  4. 미디어 속성을 복사한 URL로 설정합니다.Set the Media property to the URL that you copied.

    이 그림에서 볼 수 있듯이 Azure Media Services가 지원하는 모든 스트리밍 URL을 선택할 수 있습니다.As this graphic shows, you can choose any streaming URL that Azure Media Services supports:

    미디어 속성 설정

앱에 클라우드의 이미지 추가Add images from the cloud to your app

이 시나리오에서는 클라우드 저장소 계정, 비즈니스용 OneDrive에 이미지를 저장합니다.In this scenario, you save images in a cloud storage account, OneDrive for Business. Excel 테이블을 사용하여 이미지에 대한 경로를 포함하고 앱의 갤러리 컨트롤에서 이미지를 표시합니다.You use an Excel table to contain the path to the images, and you display the images in a gallery control in your app.

이 시나리오에서는 일부 .jpeg 파일을 포함하는 CreateFirstApp.zip을 사용합니다.This scenario uses the CreateFirstApp.zip that contains some .jpeg files.

참고

Excel 파일에서 이러한 이미지에 대한 경로는 슬래시를 사용해야 합니다.The path to these images in the Excel file must use forward slashes. PowerApps에서 Excel 테이블에 이미지 경로를 저장할 때 경로는 백슬래시를 사용합니다.When PowerApps saves image paths in an Excel table, the path uses backslashes. 이러한 테이블에서 이미지 경로를 사용하는 경우 백슬래시 대신 슬래시를 사용하도록 Excel 테이블에서 경로를 변경합니다.If you use image paths from such a table, change the paths in the Excel table to use forward slashes instead of backslashes. 그렇지 않으면 이미지가 표시되지 않습니다.Otherwise, the images won't display.

  1. CreateFirstApp.zip을 다운로드하고 자산 폴더를 클라우드 저장소 계정에 압축 해제합니다.Download CreateFirstApp.zip, and extract the Assets folder to your cloud storage account.

  2. 자산 폴더의 이름을 Assets_images로 바꿉니다.Rename the Assets folder to Assets_images.

  3. Excel 스프레드시트에서 1열 테이블을 만들고 다음 데이터로 채웁니다.In an Excel spreadsheet, create a one-column table, and fill it with the following data:

    Jackets 테이블

  4. 테이블의 이름을 Jackets로 지정하고 Excel 파일의 이름을 Assets.xlsx로 지정합니다.Name the table Jackets, and name the Excel file Assets.xlsx.

  5. 앱에서 데이터 원본으로 Jackets 테이블을 추가합니다.In your app, add the Jackets table as a data source.

  6. 이미지만 컨트롤을 추가하고(삽입 탭 > 갤러리) 해당 Items 속성을 Jackets로 설정합니다.Add an Image only control (Insert tab > Gallery), and set its Items property to Jackets:

    항목 속성

    갤러리가 해당 이미지로 자동으로 업데이트됩니다.The gallery is automatically updated with the images:

    Jacket 이미지

    Items 속성을 설정하는 경우 PowerAppsId라는 열은 Excel 테이블에 자동으로 추가됩니다.When you set the Items property, a column named PowerAppsId is automatically added to the Excel table.

    Excel 테이블에서 이미지 경로는 이미지에 대한 URL일 수도 있습니다.In the Excel table, the image path can also be the URL to an image. 예는 바닥재 견적 샘플 파일입니다.An example is the Flooring Estimates sample file. 클라우드 저장소 계정으로 다운로드하고, 앱에 데이터 원본으로 FlooringEstimates 테이블을 추가한 다음 갤러리 컨트롤을 FlooringEstimates로 설정할 수 있습니다.You can download it to your cloud storage account, add the FlooringEstimates table as a data source in your app, and then set the gallery control to FlooringEstimates. 갤러리는 이미지로 자동으로 업데이트됩니다.The gallery is automatically updated with the images.

클라우드로 펜 드로잉 업로드Upload pen drawings to the cloud

이 시나리오에서는 데이터 원본, 비즈니스용 OneDrive에 펜 드로잉을 업로드하는 방법을 알아보고 드로잉이 저장되는 방식을 확인합니다.In this scenario, you learn how to upload pen drawings to your data source, OneDrive for Business, and examine how the drawings are stored there.

  1. Excel에서 Image [image] 를 셀 A1에 추가합니다.In Excel, add Image [image] to cell A1.

  2. 다음 단계에 따라 테이블를 만듭니다.Create a table using the following steps:

    1. 셀 A1을 선택합니다.Select cell A1.

    2. 삽입 리본에서 테이블을 선택합니다.On the Insert ribbon, select Table.

    3. 대화 상자에서 내 테이블에 헤더 포함을 선택한 다음 확인을 선택합니다.In the dialog box, select My table has headers, and then select OK.

      테이블 만들기

      Excel 파일은 이제 테이블 형식입니다.Your Excel file is now in a table format. Excel에서 테이블 서식 지정에 대한 자세한 내용은 데이터를 테이블로 서식 지정을 참조하세요.See Format the data as a table for more information about table formatting in Excel.

    4. 테이블 이름을 Drawings로 지정합니다.Name the table Drawings:

      Drawings로 테이블 이름 바꾸기

  3. Excel 파일을 SavePen.xlsx로 비즈니스용 OneDrive에 저장합니다.Save the Excel file to OneDrive for Business as SavePen.xlsx.

  4. PowerApps에서 비어 있는 앱을 만듭니다.In PowerApps, create a blank app.

  5. 앱에서 비즈니스용 OneDrive 계정을 데이터 원본으로 추가합니다.In your app, add the OneDrive for Business account as a data source:

    1. 보기 탭을 클릭하거나 탭한 다음 데이터 원본을 클릭하거나 탭합니다.Click or tap the View tab, and then click or tap Data sources.

    2. 데이터 원본 추가를 클릭하거나 탭한 다음 비즈니스용 OneDrive를 클릭하거나 탭합니다.Click or tap Add data source, and then click or tap OneDrive for Business.

    3. SavePen.xlsx를 클릭하거나 탭합니다.Click or tap SavePen.xlsx.

    4. Drawings 테이블을 선택한 다음 연결을 클릭하거나 탭합니다.Select the Drawings table, and then click or tap Connect.

      연결

      이제 Drawings 테이블은 데이터 원본으로 나열됩니다.Now, the Drawings table is listed as a data source.

  6. 삽입 탭에서 텍스트를 선택한 다음 펜 입력을 선택합니다.On the Insert tab, select Text, and then select Pen input.

  7. 새 컨트롤의 이름을 MyPen으로 변경합니다.Rename the new control MyPen:

    이름 바꾸기

  8. 삽입 탭에서 단추 컨트롤을 추가하고 이 수식에 해당 OnSelect 속성을 설정합니다.On the Insert tab, add a Button control, and set its OnSelect property to this formula:

    Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})

  9. 이미지 갤러리 컨트롤을 추가하고(삽입 탭 > 갤러리) 해당 Items 속성을 Drawings로 설정합니다.Add an Image gallery control (Insert tab > Gallery), and set its Items property to Drawings. 갤러리 컨트롤의 Image 속성은 자동으로 ThisItem.Image로 설정됩니다.The Image property of the gallery control is automatically set to ThisItem.Image.

    화면이 다음과 같이 표시되도록 컨트롤을 정렬합니다.Arrange the controls so that your screen resembles the following:

    샘플 화면

  10. F5 키를 누르거나 미리 보기(Press F5, or select Preview ( 미리 보기 단추 )를 선택합니다.).

  11. MyPen에 무언가를 그린 다음 단추를 선택합니다.Draw something in MyPen, and then select the button.

    갤러리 컨트롤의 첫 번째 이미지가 그린 내용을 표시합니다.The first image in the gallery control displays what you drew.

  12. 이 그림에 다른 것을 추가하고 단추를 선택합니다.Add something else to your drawing, and select the button.

    갤러리 컨트롤의 두 번째 이미지가 그린 내용을 표시합니다.The second image in the gallery control displays what you drew.

  13. Esc 키를 눌러 미리 보기 창을 닫습니다.Close the preview window by pressing Esc.

    클라우드 저장소 계정에서 SavePen_images 폴더가 자동으로 생성되었습니다.In your cloud storage account, a SavePen_images folder has been automatically created. 이 폴더는 해당 파일 이름에 대한 ID로 저장된 이미지를 포함합니다.This folder contains your saved images with IDs for their file names. 폴더를 표시하려면 예를 들어, F5 키를 눌러 브라우저 창을 새로 고쳐야 합니다.To show the folder, you may need to refresh the browser window by, for example, pressing F5.

    SavePen.xlsx에서 Image 열은 새 이미지에 대한 경로를 지정합니다.In SavePen.xlsx, the Image column specifies the path to the new images.

알려진 제한 사항Known limitations

조직 내에서 Excel 데이터를 공유하는 방법에 대한 자세한 내용은 이러한 제한 사항을 검토하세요.For information about how to share Excel data within your organization, review these limitations.

자세한 내용For more information

브라우저 창 및 휴대폰을 포함하여 다른 플랫폼에서 앱을 테스트해야 합니다.Be sure to test your app on different platforms, including in a browser window and on a phone.

다른 데이터 원본으로 멀티미디어 직접 업로드와 관련된 고급 시나리오에 대한 자세한 내용은 이미지 캡처 pro 팁이미지 업로드에 대한 사용자 지정 커넥터를 참조하세요.For information about more advanced scenarios that involve uploading multimedia directly to a different data source, see image capture pro tips and custom connectors for image upload.

데이터 원본에 파일을 업로드하는 다른 방법은 Patch 함수를 사용하는 것입니다.Another way to upload files to a data source is to use the Patch function.