모델 기반 앱을 위한 사용자 지정 페이지 디자인

아티클
09/29/2023

이 문서에서는 모델 기반 앱에서 사용할 사용자 지정 페이지를 디자인하기 위한 팁을 제공합니다.

중요

사용자 지정 페이지는 중요한 제품 변경 사항이 포함된 새로운 기능이며 현재 사용자 지정 페이지의 알려진 문제에 설명된 여러 알려진 제한 사항이 있습니다.

사용자 지정 페이지에서 지원되는 컨트롤

사용자 지정 페이지 제작은 현재 캔버스 앱 컨트롤의 하위 집합을 지원합니다. 아래 테이블에는 현재 지원되는 컨트롤이 나열되어 있습니다.

Ctrl	제어 유형	노트
레이블¹	표시
텍스트 상자¹	입력
날짜 선택기¹	입력
단추¹	입력
콤보 상자¹	입력
확인란¹	입력
토글¹	입력
라디오 그룹¹	입력
슬라이더¹	입력
등급¹	입력
수직 컨테이너	레이아웃	새로운 반응형 가로 레이아웃 컨테이너
수평 컨테이너	레이아웃	새로운 반응형 가로 레이아웃 컨테이너
서식 있는 텍스트 편집기	입력
갤러리	목록
아이콘	미디어
이미지	미디어
양식 편집	입력
표시 양식	입력
코드 구성 요소	사용자 지정	사용자 정의 페이지에 코드 구성 요소 추가
캔버스 구성 요소(프리뷰)	사용자 지정	사용자 정의 페이지에 캔버스 구성 요소 추가

¹ 컨트롤은 새로운 최신 컨트롤입니다. Teams의 캔버스 앱에 대한 제어가 도입되었습니다. 컨트롤은 Power Apps Component Framework로 래핑된 Fluent UI 라이브러리를 기반으로 합니다.

사용자 지정 페이지에 대한 사용자 지정 구성 요소 지원

로우 코드(캔버스 구성 요소) 및 프로 코드(코드 구성 요소) 사용자 지정 UX 구성 요소를 모두 환경에 추가하고 모든 제작자가 사용할 수 있도록 할 수 있습니다. 사용자 지정 페이지별 UX 확장성 문서는 모델 기반 앱의 사용자 지정 페이지에 캔버스 구성 요소 추가 및 모델 기반 앱의 사용자 지정 페이지에 코드 구성 요소 추가를 참조하세요.

일반적으로 로우 코드 확장성 접근 방식은 빌드, 테스트가 더 간단해지고 유지 관리 비용이 줄어듭니다. 캔버스 구성 요소를 먼저 평가한 다음 더 복잡하고 고급 사용자 지정이 필요한 경우에만 코드 구성 요소를 사용하는 것이 좋습니다.

추가 정보:

컨테이너 컨트롤로 반응형 레이아웃 활성화

반응형 사용자 지정 페이지 레이아웃은 가로 레이아웃 컨테이너 및 세로 레이아웃 컨테이너 컨트롤의 계층 구조를 구축하여 정의됩니다. 이러한 컨트롤은 삽입 탭의 레이아웃 아래 캔버스 앱 디자이너에서 찾을 수 있습니다.

페이지 수준 스크롤 막대를 방지하고 세로 본문 스크롤 막대를 사용하기 위해 앱 개체에 최소 화면 높이와 너비를 설정하십시오.

MinScreenHeight=200
MinScreenWidth=200

선택적으로 사용자 지정 페이지 디자인 크기는 설정 > 디스플레이에서 크기를 사용자 지정으로 설정하여 조정할 수 있습니다. 그런 다음 너비 및 높이를 너비 1,080 및 높이 768과 같은 보다 일반적인 데스크탑 사용자 지정 페이지 크기로 변경합니다. 화면에 컨트롤을 추가한 후 이 설정을 변경하면 일부 레이아웃 속성이 재설정될 수 있습니다.

전체 공간을 채우고 사용 가능한 공간에 따라 크기를 조정하도록 최상위 컨테이너를 설정합니다.

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

유연한 높이 컨테이너의 수평 래핑

데스크톱 너비에서 좁은 너비로 조정되는 페이지를 지원하려면 유연한 높이의 수평 컨테이너에서 이러한 속성을 활성화하십시오. 이러한 설정이 없으면 페이지가 좁을 때 페이지에서 컨트롤이 잘립니다.

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

이 컨테이너 바로 아래에 있는 자식 컨테이너 또는 컨트롤은 페이지가 300픽셀 너비 내에 맞도록 하는 최소 너비를 갖도록 설정해야 합니다. 컨테이너 또는 컨트롤과 부모 컨테이너의 여백을 고려하십시오.

유연한 너비 컨테이너의 수직 래핑

데스크톱 너비에서 좁은 너비로 조정되는 페이지를 지원하려면 유연한 너비의 수직 컨테이너에서 이러한 속성을 활성화하십시오. 이러한 설정이 없으면 페이지가 좁을 때 페이지에서 컨트롤이 잘립니다.

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

이 컨테이너 바로 아래에 있는 자식 컨테이너 또는 컨트롤은 페이지가 300픽셀 높이 내에 맞도록 하는 최소 너비를 갖도록 설정해야 합니다. 컨테이너 또는 컨트롤과 부모 컨테이너의 여백을 고려하십시오.

추가 정보: 반응형 레이아웃 만들기.

고정 머리글, 유연한 본문, 고정 바닥글이 있는 수직 컨테이너

수직 컨테이너에서 맞춤(가로) 을 늘이기로 설정합니다.
부모 수직 컨테이너 내에 세 개의 수평 컨테이너 컨트롤을 삽입합니다.
첫 번째 및 세 번째 자식 수평 컨테이너 컨트롤에서 높이 늘이기를 끄고 Height=80와 같이 필요한 공간에 맞춰 높이를 줄입니다.

두 개의 짝수 자식 컨테이너가 있는 가로 컨테이너

부모 가로 컨테이너에서 맞춤(세로) 을 늘이기로 설정합니다.
부모 수평 컨테이너 내에 두 개의 수직 컨테이너 컨트롤을 삽입합니다.

모델 기반 앱 컨트롤에 맞게 사용자 지정 페이지 컨트롤 스타일 지정

최신 앱 디자이너에서 사용자 지정 페이지를 만들면 이러한 기능이 기본값을 사용합니다.

사용자 정의 페이지의 테마입니다. 사용자 지정 페이지에서 사용되는 컨트롤의 테마 값은 통합 인터페이스의 기본 파란색 테마와 일치하도록 자동으로 설정됩니다. 이 기본 테마는 스튜디오와 애플리케이션 런타임 모두에서 사용됩니다. 명시적 테마 선택이 사용자 지정 페이지 작성 환경에서 제거되었습니다.
컨트롤은 페이지 계층 구조에서의 위치에 따라 다른 글꼴 크기를 사용해야 합니다.

참고

사용자 지정 페이지 텍스트의 업스케일링은 1.33이므로 원하는 크기를 얻으려면 대상 FontSize를 1.33으로 나누어야 합니다.

레이블 유형 대상 FontSize 사용할 FontSize입니다.

페이지 제목 17 12.75

일반 레이블 14 10.52

작은 레이블 12 9.02

레이블 유형	대상 FontSize	사용할 FontSize입니다.
페이지 제목	17	12.75
일반 레이블	14	10.52
작은 레이블	12	9.02

기본 및 보조 단추 컨트롤에는 다음과 같은 스타일 변경이 필요합니다.

기본 단추

Color=RGBA(255, 255, 255, 1)
Fill=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

보조 단추

Color=RGBA(41,114,182,1)
Fill=RGBA(255, 255, 255, 1)
BorderColor=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

사용자 지정 페이지는 호스팅 모델 기반 앱에서 사용하는 것과 동일한 탭 탐색 디자인을 따릅니다. 시각적으로 정렬된 의미 체계 HTML 구조는 사용자가 키보드나 스크린 리더를 사용할 때 사용자 지정 페이지를 원활하게 탐색하는 데 도움이 됩니다. 독립 실행형 캔버스 앱과 달리 사용자 지정 페이지 컨트롤 및 기타 UX 요소에는 명시적인 탭 번호 할당이 필요하지 않습니다. 최신 컨트롤에는TabIndex 속성을 사용하고 탐색을 위해 의미 체계 HTML 구조를 활용합니다.

컨트롤, 캔버스 및 코드 구성 요소, 컨테이너 등과 같은 다양한 요소는 사용자 지정 페이지 레이아웃에서의 위치에 따라 탭으로 지정할 수 있습니다. 탭 탐색은 Z 순서 탐색을 따릅니다. 구성 요소, 컨테이너와 같은 더 큰 그룹화 요소 내부의 개별 탭 중지는 탭이 DOM(문서 개체 모델) 트리의 다음 요소로 이동하기 전에 먼저 탐색됩니다.

다음은 컨트롤, 코드, 캔버스 구성 요소 및 컨테이너가 포함된 페이지의 탐색 예입니다.