반응형 캔버스 앱 빌드

아티클
03/16/2023

응답성은 앱이 다양한 화면 크기와 폼 팩터에 자동으로 정렬되어 사용 가능한 화면 공간을 현명하게 사용하여 모든 기기, 폼 팩터 및 화면 크기에 뛰어난 UI와 UX를 제공하는 기능을 의미합니다.

응답성은 앱의 다양한 요소가 다음과 같은 방법을 지정할 수 있도록 합니다.

화면 크기 변경에 따라 늘리거나 크기를 조정합니다.
화면 크기 변경에 따라 위치를 유지하거나 변경합니다.

반응형 앱을 빌드해야 하는 이유

최종 사용자는 대형 모니터, 다양한 화면 크기 및 다양한 픽셀 수를 사용하는 휴대폰, 태블릿, 랩톱 및 데스크톱과 같은 다양한 장치에서 앱에 액세스할 수 있습니다.

각 폼 팩터 및 기기에서 앱의 뛰어난 사용자 경험과 유용성을 보장하려면 반응형 디자인 원칙으로 앱을 디자인해야 합니다. 앱이 웹 브라우저 또는 휴대폰에서만 사용되도록 의도된 경우에도 사용자 장치 화면 크기가 다를 수 있으므로 반응형 원칙으로 앱을 디자인하는 것이 좋습니다.

응답성 원칙으로 앱 디자인

앱의 UI 디자인을 시작하기 전에 다음 측면을 고려해야 합니다.

어떤 폼 팩터 또는 장치를 지원하시겠습니까?
각 폼 팩터에서 앱이 어떻게 보일까요?
확장하거나 크기를 조정하려면 앱의 어떤 요소가 필요합니까?
일부 폼 팩터에서 요소가 숨겨져 있습니까?
앱이 일부 폼 팩터에서 다르게 작동합니까?

이러한 모든 요구 사항이 수집되면, Power Apps에서 사용할 수 있는 반응형 도구를 사용하여 단일 응용 프로그램에서 이러한 다양한 UI 레이아웃을 만드는 방법에 대해 생각해야합니다.

반응형 레이아웃 사용을 시작하기 전에 다음을 수행해야 합니다.

Power Apps으로 이동합니다.
반응형 레이아웃을 사용하려는 앱을 엽니다.
설정 > 표시로 이동하여 크기에 맞게 비율 크기 조정, 가로 세로 비율 잠금, 그리고 방향 잠금을 사용 중지하고 적용을 선택하세요.

반응형 레이아웃

새 화면을 추가하고 레이아웃 탭에서 적절한 옵션을 선택하여 다음 반응형 레이아웃을 만들 수 있습니다.

화면 레이아웃.

참고

새로운 반응형 레이아웃은 앱 형식에 사용할 수 있지만 새 화면 템플릿은 태블릿 형식에만 이용할 수 있습니다.

화면 분할

분할 화면 레이아웃에는 데스크톱 화면의 50% 너비를 각각 차지하는 두 개의 섹션이 있습니다. 모바일 디바이스에서 섹션은 서로 위아래로 배치되며 각 섹션은 전체 화면 너비를 차지합니다.

사이드 바 레이아웃에는 왼쪽에 고정 너비 사이드 바가 있습니다. 본체는 고정 높이 헤더로 구성되며 메인 섹션은 나머지 화면 너비를 차지합니다. 기본적으로 템플릿은 모바일에서 동일한 동작을 갖지만 모바일 환경에 필요한 UI 패턴을 기반으로 일부 사용자 지정이 권장됩니다.

컨테이너에 대한 작업

컨테이너는 모든 반응형 디자인의 구성 요소입니다. 컨테이너는 세로 또는 가로 방향의 자동 레이아웃 컨테이너로, 향후 제약 조건을 지원할 것입니다.

다음은 컨테이너로 앱의 UI를 빌드하기 위한 몇 가지 팁입니다.

항상 컨테이너 내부에 UI 테이블을 형성하는 UI 요소를 만듭니다.
컨테이너가 자체 반응형 속성 및 설정을 사용하여 다양한 화면 크기에서 배치 또는 크기 조정되는 방법을 지정할 수 있습니다.
응답성과 관련하여 하위 구성 요소가 배치되는 방식을 변경할 수 있습니다.

컨테이너의 레이아웃 모드인 수동 레이아웃 또는 자동 레이아웃(가로 또는 세로) 중 하나를 선택합니다

자동 레이아웃 컨테이너

수평 컨테이너와 수직 컨테이너 이 두 컨트롤을 이용하면 자식 구성 요소를 자동으로 배치하는 데 사용할 수 있습니다. 이러한 컨테이너는 하위 구성 요소의 위치를 결정하므로 컨테이너 내부의 구성 요소에 대해 X, Y를 설정할 필요가 없습니다. 또한 설정에 따라 사용 가능한 공간을 하위 구성 요소에 배포할 수 있을 뿐만 아니라 하위 구성 요소의 수직 및 수평 정렬을 결정합니다.

자동 레이아웃 컨테이너를 사용하는 경우

다음 시나리오에서 자동 레이아웃 컨테이너를 사용할 수 있습니다.

UI는 화면 크기 또는 폼 팩터 변경에 반응해야 합니다.
화면 크기 또는 폼 팩터 변경 사항에 따라 크기를 조정하거나 이동해야 하는 자식 구성 요소가 두 개 이상 있습니다.
항목을 세로 또는 가로로 쌓아야 하는 경우(크기에 관계없이).
화면에서 항목의 간격을 균등하게 해야 하는 경우.

자동 레이아웃 컨테이너의 예

반응형 화면을 구축하는 방법

태블릿 레이아웃으로 빈 캔버스 앱을 만듭니다.
설정 > 디스플레이를 선택하고 크기에 맞게 조정, 가로세로 비율 고정과 방향 고정을 비활성화하고 적용을 선택합니다.
이제레이아웃 탭 하단 좌측 사이드바의 삽입 창에서 가로 컨테이너를 선택합니다.
이러한 속성으로 전체 공간을 차지하려면 최상위 컨테이너의 크기를 조정해야 합니다. 크기가 조정되면 화면과 같은 크기가 됩니다.
1. X = 0
2. Y= 0
3. 너비 = Parent.Width
4. 높이 = 부모. 높이
이제 삽입 창에서 세로 컨테이너 두 개를 가로 컨테이너에 추가하세요.
컨테이너를 만들려면 전체 세로 공간을 채우고 컨테이너1을 선택하고 Align (vertical) 속성을 Stretch로 설정합니다.
콘텐츠 간에 화면을 나누려면 두 개의 자식 컨테이너에 Fill portions 속성을 사용합니다. 왼쪽 컨테이너는 화면 공간의 1/4을 차지합니다.
1. 컨테이너2를 선택합니다. Flexible width 속성이 켜져 있습니다. Fill portions를 1로 설정합니다.
2. 컨테이너3을 선택합니다. Flexible width 속성이 켜져 있습니다. Fill portions를 3으로 설정합니다.
컨테이너2를 선택합니다. 수식 입력줄에서 Fill = RGBA(56, 96, 178, 1) 속성을 설정합니다. Align (horizontal)를 Stretch로 설정합니다.
메뉴를 만들려면 몇 개의 버튼을 추가하세요. 필요에 따라 버튼의 이름을 바꿉니다.
컨테이너3을 선택하고 가로 컨테이너를 추가한 다음 Flexible height 속성을 끕니다. Height를 100으로 설정합니다. Align (vertical)를 Stretch로 설정합니다.
일부 아이콘을 컨테이너4로 추가합니다. 아이콘 속성과 다르게 아이콘을 변경합니다.
컨테이너4를 선택합니다. Justify (horizontal) 속성을 End로 설정합니다. Align (vertical)를 Center로 설정합니다. Gap을 40으로 설정하여 아이콘 사이에 공간을 만듭니다.
컨테이너3을 선택합니다. Align (horizontal)를 Stretch로 설정합니다. Vertical Overflow를 Scroll로 설정합니다.
컨테이너 밖으로 확장할 때까지 다른 레이블, 입력, 미디어를 추가합니다. 직사각형의 색상을 다르게 변경하세요. 보이지 않는 콘텐츠에 액세스 할 수 있는 스크롤 막대가 표시됩니다.
미리 보기 또는 F5를 선택합니다. 브라우저 창의 크기를 변경하여 앱이 다양한 화면 크기에 어떻게 조정되는지 확인합니다.

알려진 문제

레이아웃 컨테이너 속성의 특정 조합은 호환되지 않거나 원하지 않는 출력을 생성할 수 있습니다. 예를 들면 다음과 같습니다.
- 컨테이너의 경우 Wrap 속성이 활성화되면 Align 속성 설정은 자식 컨트롤에서 무시됩니다.
- 컨테이너의 경우 Wrap 속성이 비활성화되고 컨테이너의 기본 축 오버플로가 스크롤로 설정되는 경우(가로 컨테이너의 경우 가로 오버플로 또는 세로 컨테이너의 경우 세로 오버플로), Justify 속성을 시작 또는 사이 공백 중 하나로 설정하는 것이 좋습니다.
- 가운데 또는 종료 옵션을 사용하면 컨테이너가 너무 작아서 모든 컨트롤을 표시할 수 없는 경우 Overflow 속성이 스크롤로 설정되어 있더라도 자식 컨트롤에 액세스할 수 없습니다.
레이아웃 컨테이너에서 끌어서 놓기 컨트롤이 비활성화되어 있으므로 캔버스 앱에서 컨트롤의 크기를 조정하거나 위치를 변경할 수 없습니다. 대신 레이아웃 컨테이너 속성을 사용하여 원하는 크기와 위치를 지정하세요. 제어 순서는 트리 보기, 또는 화살표 키를 단축키로 사용하여 변경할 수 있습니다.
데이터 테이블, 차트, 및 사진 추가 컨트롤은 현재 레이아웃 컨테이너에서 지원되지 않습니다.
일부 레이아웃 컨테이너 속성은 자식 컨트롤에 대해 숨겨져 있습니다. 숨겨진 속성은 수식 입력 줄이나 고급 패널을 통해 계속 액세스 할 수 있습니다. 그러나 이러한 속성은 이러한 위치에 설정되어 있어도 무시됩니다.
컨트롤을 레이아웃 컨테이너로 이동하면(예: 컨트롤을 복사하거나 붙여 넣을 때) 컨트롤은 트리 보기의 순서대로 컨테이너에 삽입됩니다.

참조

반응형 레이아웃 만들기

참고

귀사의 설명서 언어 기본 설정에 대해 말씀해 주시겠습니까? 간단한 설문 조사에 응해주세요. (이 설문 조사는 영어로 되어 있습니다.)

이 설문 조사는 약 7분 정도 걸립니다. 개인 데이터는 수집되지 않습니다(개인정보처리방침).