Power Apps 캔버스 앱 카메라 컨트롤을 사용하여 여러 사진을 한번에 원드라이브에 저장하기

Power Platform의 Canvas App을 활용하여 사진을 촬영하고, 원드라이브에 다수의 사진을 한 번에 저장하는 앱을 만들어보려고 합니다. 테스트 결과 핸드폰의 OS 별로 앱 최적화 또는 다른 문제로 저장할 수 있는 사진 수가 달랐습니다. 안드로이드의 경우 100장의 사진은 안정적으로 등록이 가능했지만, 이 또한 RAM이 12GB인 갤럭시 폴드4 기준이기 때문에 RAM이 문제라고 하면 100장 이하로 저장 가능할 수도 있습니다.  IOS의 경우 아이폰 14 PRO 기준으로 300장 정도까지 저장 가능했습니다. 그리고 사진 화질 또한 고정으로 변경할 수 없기 때문에 좋은 화질을 원할 경우 미리 촬영하고 업로드해야 하는 앱이 필요합니다. 화질 문제는 몇 년 전부터 많은 사람이 문제를 공유하고 있지만 아직 해결되지는 않았습니다. 

 

 

 

1. 캔버스앱을 만들기 위해서 Create 버튼을 클릭합니다. Dataverse, Sharepoint, Excel 등 여러 데이터 기반으로 앱을 만들 수 있지만, 저는 Blank app으로 앱을 만들어 보겠습니다. 

2. Blank canvas app을 선택하여 캔버스 앱을 생성합니다. 

3. 앱 이름과, 태블릿 or 핸드폰을 선택하여 캔버스 크기를 지정할 수 있습니다. 사진을 찍어서 올리는 기능이기때문에 핸드폰으로 만들어보겠습니다. 

4. 앱을 만들면 Screen1이 만들어지게 됩니다. 비어있는 스크린에 카메라 컨트롤 등 여러 컨트롤을 사용하여 앱을 만들 수 있습니다. 

5. 왼쪽에 + 버튼을 클릭하여 카메라 컨트롤을 추가합니다. 추가하게 되면 중앙에 있는 스크린에 카메라를 통한 화면이 나오게 됩니다. 

6. 카메라 컨트롤과 같은 방법으로 드롭다운 기능을 추가합니다. 

7. 드롭다운을 선택하고 Items를 선택 후 fx 오른쪽에 "Camera1.AvailableDevices" 라고 입력합니다. 그러면 이 드롭다운은 사용 가능한 카메라를 선택할 수 있게 됩니다. 

8. 그리고 카메라를 선택하고, "Dropdown1.Selected.Id" 를 입력합니다. 이렇게 되면 드롭다운에서 선택한 카메라에 따라서 카메라가 변경됩니다. 

9. 노트북에서 작업중이라 여러 카메라가 있지는 않고, 기본 카메라와 PRISM Live Studio가 뜨게 됩니다. 실제 핸드폰으로 테스트한다면 전면 카메라, 후면 카메라 등 여러 카메라를 선택할 수 있습니다. 

10. 다음은 사진을 촬영하기 위한 버튼을 추가하려고 합니다. 저 카메라 아이콘을 추가했습니다. 

11. 카메라 아이콘의 OnSelect를 선택하고 다음과 같이 입력합니다.  첫 줄의 내용은 카메라를 찍고나서 결과물을 varTakePic에 저장하여 다른 곳에 표시할 수 있게 변수를 설정했다고 생각하면 됩니다. 

Collect는 다음에 만들 세로갤러리에 Title과 사진을 표시하는 기능입니다. 여기서 ImageCollection이라는 이름을 먼저 지정해주고, 세로갤러리 만들 때 선택하면 됩니다.  Title의 경우 현재 시간으로 지정하였습니다. Onedrive에 저장하기 위해서는 확장자까지 있어야 하지만, 확장자는 Power Automate에서 추가해주면 됩니다. 

Set(varTakePic, Camera1.Stream);
Collect(ImageCollection, {Title:Text(Now(), "yy-mm-dd hh:mm:ss.fff" ), DataStream: Camera1.Stream})

12. 위에서 언급한것과 같이 세로 갤러리를 추가하고 데이터 원본은 위에서 만들었던 "ImageCollection"을 선택합니다. 

13. 오른쪽에 레이아웃을 선택하고 이미지 및 제목으로 선택했습니다. 그리고 Items가 "ImageCollection"으로 설정되었는지 확인합니다. 

14. 다음은 이미지 컨트롤을 추가합니다. 이미지는 아까 사진 아이콘을 클릭할 때 설정했던, "varTakePic"을 선택해 줍니다. 그러면 사진을 찍을 때 찍힌 화면이 이미지 컨트롤에 표시되게 됩니다. 그리고 아래 갤러리에도 사진과 제목이 표시됩니다. 현재 갤러리에 사진이 표시되지 않는데, 카메라에서 설정해야 할 부분이 있습니다. 

15. 카메라의 StreamRate를 100으로 설정합니다. 

16. 그럼 정상적으로 이미지 컨트롤과 갤러리에 찍은 사진을도 표시되게 됩니다. 이제 사진을 찍고 갤러리에 저장하는 기능까지 모두 완료되었습니다. 이제 캔버스앱에서는 갤러리 카운트, 삭제, 원드라이브에 저장하기 위한 버튼을 추가해야 합니다. 

17. 텍스트 레이블을 추가하여 COUNT라고 입력합니다. 

18. 텍스트 레이블을 하나 더 추가하여 Text에 "CountRows(ImageCollection)" 라고 입력합니다. 아까 만들었던 Collection의 카운트가 입력됩니다. 

19. 다음은 갤러리의 오른쪽 아이콘을 휴지통 모양으로 변경하려고 합니다. 아이콘을 선택하고 오른쪽 속성에서 아이콘을 원하는 아이콘으로 변경할 수 있습니다. 

20. 휴지통으로 바뀐 아이콘을 클릭하여 OnSelect를 선택하고 "Remove( [@ImageCollection], ThisItem )" 를 입력합니다. 선택한 Collection의 아이템을 삭제하게 됩니다. 

21. 다음으로 촬영한 전체 이미지 삭제를 위해 취소 아이콘을 추가합니다. 

22. 취소아이콘의 Onselect는 "Clear(ImageCollection)" 을 입력합니다. 해당 Collection을 모두 삭제하는 기능입니다. 

23. 다음은 단추를 추가하여 원드라이브에 저장할 버튼을 만들고 Text를 Save라고 수정하였습니다. 

실제로 캔버스앱에서 원드라이브에 추가하는 기능이 아닌, Power Automate Flow을 호출하도록 하면 됩니다. 

24. Power Automate를 만들기 위해 왼쪽 메뉴에서 새 흐름 만들기를 선택합니다. 

25. Create from blank를 클릭하여 처음부터 흐름을 생성합니다. 

26. 여기부터는 Power Automate 화면입니다. Variable을 선택하여 변수를 설정합니다. 

27. Initialize variable을 선택하여 캔버스앱에서 만든 촬영 이미지를 저장할 변수를 초기화합니다. 

28. String 타입으로 이름을 적고 Value는 PowerApps의 'Initializevariable_Value 을 선택하여 이미지 관련 내용을 전달받습니다. 

29. 다음은 Compose를 사용하여 위에서 받은 변수를 입력하려고 합니다. 

30. Json을 사용하여 변수로 받은 내용을 Json 형태로 변경합니다. 

31. 다음 이름을 변경하고 저장합니다. 

32. 일반적은 흐름은 바로 Test를 진행하지만 이 흐름의 경우 Power Apps에서 캔버스앱을 실행하여 테스트 합니다. 

33. 테스트 하기 위해서 아까 만들었던 버튼의 OnSelect에 다음과 같이 입력합니다. 촬영한 이미지를 JSON 형태로 전달합니다. 

reSaveImages.Run(JSON(ImageCollection, IncludeBinaryData))

34. F5를 눌러서 실제로 촬영하고 Save 버튼을 클릭하여 테스트를 진행합니다. 

35. 그럼 run history에 정상적으로 완료된 것을 확인할 수 있습니다. 

36. 해당 내역을 클릭하여 Outputs을 확인합니다. 

37. 나중에 Json 데이터를 Generate 하기 위해서 복사합니다. 

38. 테스트가 끝난후 Parse JSON을 추가합니다. 

39. Content는 Outputs을 선택하고 Generate from sample을 클릭합니다. 

40. 여기에는 아까 복사했던 Outputs 내용을 추가하고 Done을 선택하여 마무리합니다. 

41. 이제 이렇게 만들어진 여러장의 사진 데이터를 하나씩 Onedrive에 만들기 위해서 Applt to eact를 추가합니다. 

42. Parse Json의 Body를 선택합니다. 

43. 그리고 데이터를 확인하기 위해 Compose를 추가합니다. 

44. Inputs에 Title, DataStream을 추가합니다. 

45. 이렇게 다시 캔버스앱에서 테스트 하여 Outputs을 확인할 수 있습니다. Title, DataStream이 정상적으로 출력된 것을 확이할 수 있습니다. 

46. 이제 마지막 기능인 원드라이브에 사진을 저장하기 위해서 Create File을 선택합니다. 

47. 저장할 폴더를 선택하고 File Name은 Title.jpg로 입력합니다. 이전에 캔버스앱에서 확장자를 선택하지 않았기 때문에 여기서 확장자를 입력합니다. File Content는 아래와 같이 입력합니다. 

@{dataUriToBinary(items('Apply_to_each')['DataStream'])}

48. 이제 모든 작업이 완료되었고, 캔버스앱을 실행하여 테스트를 진행합니다. 

49. 그런데 아래와 같은 오류가 발생했습니다. 정확한 이유에 대해서는 아직 확인할 수 없었습니다. 

50. 해결 방법은 이 흐름을 Save As 버튼을 클릭하여 새로운 이름으로 다시 만들어줍니다. 

51. 다시 만든 흐름을 확인하고, 캔버스앱에서는 Save images Run을 사용했기 때문에 캔버스앱 화면으로 이동합니다. 

52. 흐름 추가를 선택하여 방금 새로 만들었던 reSave Images를 추가합니다. 

53. 그리고 save 버튼의 OnSelect 내용도 reSaveImages라고 수정합니다. 

54. 모두 수정한 뒤 다시 테스트를 진행하면 정상적으로 완려된 것을 확인할 수 있습니다. 

55. 실행 결과를 보면 아래와 같이 File Name, Content를 확인할 수 있습니다. 

56. 그리고 다른 결과들도 확인할 수 있습니다. 

57. 원드라이브 사이트에 접속해보면 아래와 같이 생성했던 이미지가 저장된 것을 확인할 수 있습니다. 

58. 클릭하여 사진이 정상적으로 출력되는지 확인합니다.