캔버스 앱에서 반응형 레이아웃 만들기

아티클
03/16/2023

Power Apps에서 캔버스 앱을 빌드하기 전에 앱을 휴대 전화 또는 태블릿에 맞게 조정할지 여부를 지정합니다. 이 선택에 따라 앱을 빌드할 캔버스의 크기와 모양이 결정됩니다.

그 선택을 한 후에 설정 > 표시를 선택하면 몇 가지 선택을 더 할 수 있습니다. 가로 또는 세로 방향과 화면 크기를 선택할 수 있습니다(태블릿만 해당). 종횡비를 잠그거나 잠금을 해제하고 장치 회전을 지원할 수도 있습니다.

이러한 선택은 화면 레이아웃을 디자인할 때 선택한 다른 모든 선택의 기초가 됩니다. 앱이 다른 크기의 장치나 웹에서 실행되는 경우 전체 레이아웃은 앱이 실행 중인 화면에 맞게 조정됩니다. 예를 들어 휴대 전화용으로 설계된 앱이 큰 브라우저 창에서 실행되는 경우 앱은 크기를 조정하여 공간을 크게 차지합니다. 앱은 더 많은 컨트롤이나 더 많은 콘텐츠를 표시하여 추가 픽셀을 이용할 수 없습니다.

반응형 레이아웃을 만들면 컨트롤이 다른 장치나 창 크기에 응답하여 다양한 환경을 보다 자연스럽게 느낄 수 있습니다. 반응형 레이아웃을 만드려면 앱 전체에서 일부 설정을 조정하고 표현식을 작성합니다.

영역 안에 맞추기 비활성화

레이아웃이 앱이 실행되는 실제 공간에 맞게 각 화면을 구성할 수 있습니다.

앱의 기본값으로 설정된 영역 안에 맞추기를 끄면 앱을 끄면 반응성이 활성화됩니다. 이 설정을 끄면 특정 화면 모양에 맞춰 디자인하는 게 아니기 때문에 종횡비 잠금도 꺼집니다. (앱이 장치 회전을 지원하는지 여부는 여전히 지정할 수 있습니다.)

영역 안에 맞추기 설정 비활성화.

앱을 반응형으로 만들려면 추가 단계를 수행해야 하지만 이러한 변화는 반응성을 가능하게 하는 첫 번째 단계입니다.

앱 및 화면 크기의 이해

앱의 레이아웃이 화면 크기의 변화에 반응하도록 하려면 Width 및 Height 속성을 사용하는 수식을 작성합니다. 이러한 속성을 표시하려면 Power Apps Studio에서 앱을 열고 화면을 선택합니다. 이러한 속성에 대한 기본 수식은 오른쪽 창의 고급 탭에 나타납니다.

너비 = Max(App.Width, App.DesignWidth)

높이 = Max(App.Height, App.DesignHeight)

이 수식은 앱의 Width, Height, DesignWidth, DesignHeight 속성을 참조합니다. 앱의 Width 및 Height 속성은 앱이 실행되는 장치 또는 브라우저 창의 크기에 해당합니다. 사용자가 브라우저 창의 크기를 조정하면(또는 방향 잠금이 꺼진 상태에서 장치를 끄거나 회전시키는 경우) 이러한 속성의 값은 동적으로 변경됩니다. 화면의 Width 및 Height 속성의 수식은 이러한 값이 변경되면 속성이 재평가됩니다.

DesignWidth 및 DesignHeight 속성은 설정의 디스플레이 창에서 지정한 크기에서 가져옵니다. 예를 들어 세로 방향으로 전화 레이아웃을 선택하면 DesignWidth는 640이고 DesignHeight는 1136입니다.

Width 및 Height 속성의 화면에 대한 수식에서 사용됨에 따라, DesignWidth 및 DesignHeight를 디자인할 앱의 최소 치수로 생각할 수 있습니다. 앱에서 사용할 수 있는 실제 영역이 이 최소 크기보다 작은 경우 화면의 Width 및 Height 속성에 대한 수식은 해당 값이 최소값보다 작아지지 않도록합니다. 이 경우 사용자는 화면의 모든 내용을 보려면 스크롤해야 합니다.

앱의 DesignWidth 및 DesignHeight를 설정한 후 (대부분의 경우) 각 화면의 Width 및 Height 속성 관련 기본 수식을 변경할 필요가 없습니다. 나중에 이 토픽에서 이러한 수식을 사용자 지정할 수 있는 경우에 대해 설명합니다.

동적 레이아웃에 수식 사용

반응형 디자인을 만들려면 절대(상수) 좌표 값 대신 수식을 사용하여 각 컨트롤을 찾아 크기를 조정합니다. 이 수식은 전체 화면 크기 또는 화면의 다른 컨트롤과 관련하여 각 컨트롤의 위치와 크기를 나타냅니다.

중요

컨트롤의 X, Y, Width, Height 속성에 대한 수식을 작성한 후 만약 캔버스 편집기에서 순차적으로 컨트롤을 드래그하면 작성된 수식은 상수 값으로 덮어쓰기됩니다. 동적 레이아웃을 만들기 위해 수식을 사용하기 시작하면 컨트롤을 드래그하지 않아야 합니다.

가장 간단한 경우 하나의 컨트롤이 전체 화면을 채웁니다. 이 효과를 만들려면 컨트롤의 속성을 다음 값으로 설정합니다.

속성	값
X	`0`
Y	`0`
너비	`Parent.Width`
높이	`Parent.Height`

이 수식은 부모 운영자를 사용합니다. 화면에 직접 놓인 컨트롤의 경우 부모는 화면을 의미합니다. 이 속성 값을 사용하면 컨트롤이 화면의 왼쪽 위 모서리(0, 0)에 나타나고 화면의 너비 및 높이와 같아집니다.

이 토픽 뒷부분에서 이러한 원칙(그리고 부모 운영자)을 적용해 갤러리, 그룹 컨트롤, 구성 요소와 같은 다른 컨테이너 내에 컨트롤을 배치합니다.

대안으로, 컨트롤은 화면의 상단만 채울 수 있습니다. 이 효과를 만들려면 Height 속성을 Parent.Height / 2로 설정하고 다른 수식은 변경하지 않습니다.

두 번째 컨트롤이 같은 화면의 아래쪽 절반을 채우려면 수식을 구성하는 데 적어도 두 가지 다른 방법을 사용할 수 있습니다. 간단하게 이 접근 방식을 사용할 수 있습니다.

컨트롤	속성	수식
Upper	X	`0`
Upper	Y	`0`
Upper	너비	`Parent.Width`
Upper	높이	`Parent.Height / 2`
저지	X	`0`
저지	Y	`Parent.Height / 2`
저지	너비	`Parent.Width`
저지	높이	`Parent.Height / 2`

Upper 및 Lower 컨트롤.

이 구성은 원하는 효과를 얻을 수 있지만 컨트롤의 상대적 크기에 대해 마음이 바뀐 경우 각 수식을 편집해야 합니다. 예를 들어, 상단 컨트롤이 화면의 상단 1/3만 차지하고 하단 컨트롤이 하단 2/3을 채우도록 결정할 수 있습니다.

이 효과를 만들려면 Upper 컨트롤의 Height 속성 및 Lower 컨트롤의 Y, Height 속성을 업데이트해야 합니다. 대신 이 예시와 같이 Upper 컨트롤(자체)의 관점에서 Lower 컨트롤에 대한 수식을 쓸 수 있습니다.

컨트롤	속성	수식
Upper	X	`0`
Upper	Y	`0`
Upper	너비	`Parent.Width`
Upper	높이	`Parent.Height / 3`
Lower	X	`0`
Lower	Y	`Upper.Y + Upper.Height`
Lower	너비	`Parent.Width`
저지	높이	`Parent.Height - Lower.Y`

Upper 및 Lower 컨트롤 상대 크기 조정.

이러한 수식을 사용하면 Upper 컨트롤의 Height 속성만 바꿔서 화면 높이의 여러 부분을 표현할 수 있습니다. Lower 컨트롤은 자동으로 이동하고 크기를 조정하여 변경 사항을 처리합니다.

이 수식 패턴을 사용하여 C로 명명된 컨트롤 및 D로 명명된 부모 또는 형제 컨트롤 사이에 공통 레이아웃 관계를 표현할 수 있습니다.

C와 부모의 관계	속성	수식
C는 N의 여백으로 부모의 너비를 채웁니다.	X	`N`
	너비	`Parent.Width - (N * 2)`
C는 N의 여백으로 부모의 높이를 채웁니다.	Y	`N`
	높이	`Parent.Height - (N * 2)`
C는 N의 여백으로 부모의 오른쪽 가장자리와 정렬됩니다.	X	`Parent.Width - (C.Width + N)`
C는 N의 여백으로 부모의 아래 가장자리와 정렬됩니다.	Y	`Parent.Height - (C.Height + N)`
C는 부모 위에 가로로 중앙에 위치합니다.	X	`(Parent.Width - C.Width) / 2`
C는 부모 위에 세로로 중앙에 위치합니다.	Y	`(Parent.Height - C.Height) / 2`

C와 D의 관계	속성	수식
C는 D와 수평으로 정렬되며 D와 너비가 같습니다.	X	`D.X`
	너비	`D.Width`
C는 D와 수직으로 정렬되며 D와 높이가 같습니다.	Y	`D.Y`
	높이	`D.Height`
C의 오른쪽 가장자리는 D의 오른쪽 가장자리와 정렬됩니다.	X	`D.X + D.Width - C.Width`
C의 아래쪽 가장자리는 D의 아래쪽 가장자리와 정렬됩니다.	Y	`D.Y + D.Height - C.Height`
C는 D와 수평으로 중앙에 위치합니다.	X	`D.X + (D.Width - C.Width) / 2`
C는 D와 수직으로 중앙에 위치합니다.	Y	`D.Y + (D.Height - C.Height) /2`
C는 N 간격으로 D의 오른쪽에 위치합니다.	X	`D.X + D.Width + N`
C는 N 간격으로 D 아래에 위치합니다.	Y	`D.Y + D.Height + N`
C는 D와 부모 오른쪽 가장자리 사이의 공간을 채웁니다.	X	`D.X + D.Width`
	너비	`Parent.Width - C.X`
C는 D와 부모 아래쪽 가장자리 사이의 공간을 채웁니다.	Y	`D.Y + D.Height`
	높이	`Parent.Height - C.Y`

계층적 레이아웃

더 많은 컨트롤이 포함된 화면을 구성 할 때 화면이나 형제 컨트롤이 아닌 부모 컨트롤을 기준으로 컨트롤을 배치하는 것이 더 편리하거나 필요합니다. 컨트롤을 계층적 구조로 구성하면 수식을 보다 쉽게 작성하고 유지 관리할 수 있습니다.

갤러리

앱에서 갤러리를 사용하는 경우 갤러리 템플릿 내에 컨트롤을 배치해야 합니다. 이 컨트롤을 사용하는 수식을 작성하여 갤러리 템플릿을 참조할 부모 운영자를 사용하는 컨트롤을 배치 할 수 있습니다. 갤러리 템플릿 내의 컨트롤에 대한 수식에서 Parent.TemplateHeight 및 Parent.TemplateWidth 속성을 사용하고 갤러리 전체의 사이즈를 참조하는 Parent.Width 및 Parent.Height를 사용하면 안됩니다.

템플릿 너비와 높이를 보여주는 세로 갤러리.

컨테이너 제어

레이아웃 컨테이너 컨트롤을 부모 컨트롤로 사용할 수 있습니다.

화면 상단의 헤더 예시를 참고하십시오. 제목과 사용자가 상호 작용할 수있는 몇 가지 아이콘이 있는 헤더가 일반적입니다. 레이블 컨트롤 및 두 아이콘 컨트롤을 포함하는 컨테이너 컨트롤을 사용해서 이러한 헤더를 구성할 수 있습니다.

그룹을 사용하는 헤더 예.

이러한 컨트롤의 속성을 다음 값으로 설정합니다.

속성	헤더	메뉴	종료	직함
X	`0`	`0`	`Parent.Width - Close.Width`	`Menu.X + Menu.Width`
Y	`0`	`0`	`0`	`0`
너비	`Parent.Width`	`Parent.Height`	`Parent.Height`	`Close.X - Title.X`
높이	`64`	`Parent.Height`	`Parent.Height`	`Parent.Height`

Header 컨트롤에 대해 Parent는 화면을 나타냅니다. 그 이외의 경우 Parent는 Header 컨트롤을 나타냅니다.

이 수식을 작성한 후에 속성에 대한 수식을 변경함으로 Header 컨트롤의 크기 또는 위치를 조정할 수 있습니다. 자식 컨트롤의 크기와 위치가 자동으로 조정됩니다.

자동 레이아웃 컨테이너 컨트롤

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

구성 요소

Components라는 다른 기능을 사용하는 경우 빌딩 블록을 구성하고 앱 전체에서 재사용할 수 있습니다. 컨테이너 컨트롤과 마찬가지로 구성 요소 안에 놓는 컨트롤은 구성 요소의 사이즈를 나타내는 Parent.Width 및 Parent.Height에 위치와 사이즈 수식을 두어야 합니다. 추가 정보: 구성 요소 만들기

장치 크기 및 방향에 대한 레이아웃 조정

지금까지 사용 가능한 공간에 따라 수식을 사용하여 각 컨트롤의 크기를 변경하는 방법과 컨트롤을 서로에 대해 정렬하는 방법을 배웠습니다. 그러나 다양한 장치 크기와 방향에 따라 보다 실질적인 레이아웃 변경을 원하거나 필요할 수 있습니다. 예를 들어 장치를 세로에서 가로 방향으로 회전하는 경우 세로 레이아웃에서 가로 레이아웃으로 전환할 수 있습니다. 더 큰 장치에서는 더 많은 콘텐츠를 제공하거나 재정렬하여 보다 매력적인 레이아웃을 제공할 수 있습니다. 작은 장치에서는 여러 화면으로 콘텐츠를 분할해야 할 수 있습니다.

디바이스 방향

이 토픽의 앞에서 설명했듯이 화면의 Width 및 Height 속성에 대한 기본 수식은 사용자가 디바이스를 회전하면 좋은 경험을 제공하지 못할 수도 있습니다. 예를 들어 세로 방향의 휴대 전화용으로 설계된 앱은 DesignWidth 640과 DesignHeight 1136을 가집니다. 가로 방향의 휴대 전화에서 동일한 앱에 다음과 같은 속성 값을 가집니다.

화면의 Width 속성이 Max(App.Width, App.DesignWidth)로 설정됩니다.. 앱의 Width(1136)가 DesignWidth(640) 보다 크므로 수식이 1136으로 평가합니다.
화면의 Height 속성이 Max(App.Height, App.DesignHeight)로 설정됩니다.. 앱의 Height(640)가 DesignHeight(1136) 보다 크므로 수식이 1136으로 평가합니다.

화면의 Height가 1136, 디바이스 높이(이 방향에서) 640인 경우 사용자는 콘텐츠 전체를 보려면 화면을 수직으로 돌려야하며 이는 원하는 경험이 아닐 수 있습니다.

화면의 Width 및 Height 속성을 디바이스 방향으로 조정하려면 다음 수기을 사용할 수 있습니다.

너비 = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

높이 = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

이 수식은 디바이스의 너비가 높이보다 짧은지(세로 방향) 아니면 긴지(가로 방향)에 따라 앱의 DesignWidth 및 DesignHeight 값을 바꿉니다.

화면의 Width 및 Height 수식을 조정한 후 화면의 컨트롤을 재배치해 공간을 활용할 수 있습니다. 예를 들어 두 컨트롤 각각이 화면의 절반을 차지하는 경우 세로 모드에선 수직으로 쌓아놓고 가로 모드에선 나란히 배열할 수 있습니다.

화면의 방향 속성을 사용해 화면이 세로인지 가로인지 결정합니다.

참고

가로 방향에서 Upper 및 Lower 컨트롤은 왼쪽 및 오른쪽 컨트롤로 나타납니다.

컨트롤	속성	수식
Upper	X	`0`
Upper	Y	`0`
Upper	너비	`If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)`
Upper	높이	`If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height)`
Lower	X	`If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width)`
Lower	Y	`If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0)`
Lower	너비	`Parent.Width - Lower.X`
저지	높이	`Parent.Height - Lower.Y`

세로 방향을 조정하는 표현식.

가로 방향을 조정하는 표현식.

화면 크기 및 중단점

장치의 크기에 따라 레이아웃을 조정할 수 있습니다. 화면의 Size 속성은 현재 장치 크기를 분류합니다. 크기는 양의 정수이기에, ScreenSize 유형은 가독성을 돕기 위해 지정된 상수를 제공합니다. 이 테이블은 상수를 나열합니다.

상수	값	일반적인 디바이스 유형 (기본 앱 설정 사용)
ScreenSize.Small	1	전화
ScreenSize.Medium	2	태블릿, 세로로 고정
ScreenSize.Large	3	태블릿, 가로로 고정
ScreenSize.ExtraLarge	4	데스크탑 컴퓨터

이 크기를 사용하여 앱의 레이아웃을 결정합니다. 예를 들어, 휴대 전화 크기의 장치에서 컨트롤을 숨기고 다른 방법으로 볼 수 있게 하려면 컨트롤의 Visible 속성을 다음 수식으로 설정합니다.

Parent.Size >= ScreenSize.Medium

이 수식은 사이즈가 중간 이상일 때 true로 아닌 경우 false입니다.

컨트롤이 화면 크기에 따라 화면 너비의 다른 비율을 차지하도록 하려면 컨트롤의 Width 속성을 다음 수식으로 설정합니다.

Parent.Width *
Switch(
    Parent.Size,
    ScreenSize.Small, 0.5,
    ScreenSize.Medium, 0.3,
    0.25
)

이 수식은 컨트롤의 너비를 작은 화면에서 화면 너비의 절반, 중간 화면에서 화면 너비의 3/10, 다른 모든 화면에서 화면 너비의 1/4로 설정합니다.

사용자 지정 중단점

화면의 Size 속성은 화면의 Width 속성과 앱의 SizeBreakpoints 속성 값과 비교하여 계산됩니다. 이 속성은 명명된 화면 크기를 구분하는 너비 중단점을 나타내는 단일 열 숫자 표입니다.

태블릿 또는 웹용으로 만든 앱에서 앱의 SizeBreakpoints 속성에서 기본값은 [600, 900, 1200] 입니다. 휴대 전화용으로 만든 앱에서 값은 [1200, 1800, 2400] 입니다. (이러한 앱은 다른 앱에서 사용되는 좌표의 두 배인 좌표를 사용하기 때문에 휴대 전화 앱의 값이 두 배가 됩니다.)

App.SizeBreakpoints 속성의 기본값.

앱의 값을 변경하여 앱의 SizeBreakpoints 속성에서 값을 변경하여 앱의 중단점을 사용자 지정할 수 있습니다. 트리뷰의 앱에서 속성 목록의 SizeBreakpoints를 선택하고 수식 입력줄에서 값을 편집합니다. 앱에 필요한 만큼의 중단점을 만들 수 있지만 크기가 1에서 4까지만 명명된 화면 크기에 해당합니다. 수식에서 ExtraLarge 이외의 크기는 숫자 값(5, 6 등)으로 나타낼 수 있습니다.

더 적은 중단점을 지정할 수도 있습니다. 예를 들어 앱에 3개의 크기(2개의 중단점)만 있으면 되므로 가능한 화면 크기는 Small, Medium 및 Large입니다.

알려진 제한 사항

제작 캔버스가 만들어진 크기 조정 수식에 응답하지 않습니다. 반응형 동작을 테스트하려면 앱을 저장하고 게시한 다음 다양한 크기와 방향의 장치나 브라우저 창에서 앱을 엽니다.

컨트롤의 X, Y, Width, Height 속성에서 표현식 또는 수식을 쓰고 만약 나중에 컨트롤을 다른 위치로 드래그하거나 테두리를 드래그하여 컨트롤 사이즈를 변경하면 이러한 표현식 또는 수식을 덮어쓰게 됩니다.

참고

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

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