컨테이너를 활용한 반응형 디자인

Power Apps 입문

Luise Freese

Azure & Power Platform Architect

왜 반응형이 필요할까요?

 

  • 동일한 앱이 휴대폰, 태블릿, 노트북에서 열립니다
  • 고정 레이아웃은 작은 화면에서는 잘리고, 큰 화면에서는 어색해 보입니다
  • 반응형 = 레이아웃이 알맞게 조정됨

$$

휴대폰, 태블릿, 노트북에서 동일한 앱이 단일 열에서 다중 열로 레이아웃을 조정하는 모습

Power Apps 입문

최신 레이아웃 컨테이너

세로형과 가로형 레이아웃 컨테이너를 비교하는 그림으로, 하위 컨트롤이 쌓이거나 나란히 배치되는 모습을 보여줍니다

 

  • 세로형 레이아웃 컨테이너는 하위 요소를 위에서 아래로 쌓습니다
  • 가로형 레이아웃 컨테이너는 하위 요소를 왼쪽에서 오른쪽으로 배치합니다
  • 최신 컨트롤은 사용 가능한 공간에 맞춰 배치됩니다
Power Apps 입문

가변 너비와 높이

 

  • FlexibleWidth와 FlexibleHeight
  • On으로 설정하면 컨트롤이 컨테이너를 채우도록 늘어납니다
  • Off로 설정하면 컨트롤이 고정 크기를 유지합니다

$$

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width
Power Apps 입문

LayoutMinWidth와 LayoutMinHeight

휴대폰과 태블릿을 비교하며 LayoutMinWidth가 단일 열에서 사이드 패널과 콘텐츠로 레이아웃이 전환되는 기준점임을 보여주는 그림

 

  • 컨테이너가 제대로 배치되려면 충분한 공간이 필요합니다
  • LayoutMinWidth는 레이아웃이 재배치되기 전의 최소 너비입니다
  • 휴대폰과 태블릿에 다른 레이아웃을 적용합니다
Power Apps 입문

앱 디스플레이 설정

 

  • 설정(Settings) → 디스플레이(Display)에서 방향과 크기를 설정합니다
  • 앱 레이아웃: 고정(Fixed)은 하나의 비율로 확대되고, 반응형(Responsive)은 화면에 맞춰 조정됩니다
  • 여러 크기로 테스트해 보세요

$$

Power Apps Studio 설정 대화상자의 디스플레이 탭에서 레이아웃, 방향, 캔버스 크기 옵션을 보여주는 화면

Power Apps 입문

미리 정의된 레이아웃

Power Apps Studio의 새 화면 플라이아웃을 보여주는 실제 스크린샷으로, 빈 화면, 분할 화면, 사이드바, 머리글과 바닥글, 승인 요청, 시작 화면 등 미리 정의된 레이아웃 템플릿과 각 프레임 미리보기를 보여줍니다

 

  • + New screen에는 미리 만들어진 레이아웃 템플릿이 포함되어 있습니다
  • 사이드바, 머리글과 바닥글, 분할 화면은 이미 반응형으로 구성되어 있습니다
  • 첫 반응형 앱을 만들 때 추천하는 시작점입니다
Power Apps 입문

만들어 볼 것

$$

컨트롤을 레이아웃 컨테이너로 감싸기 · 기기 크기 전환하기 · 앱이 반응하는 모습 확인하기

휴대폰, 태블릿, 노트북에서 갤러리 레이아웃이 각 화면 크기에 맞게 조정되는 모습을 보여주는 그림

Power Apps 입문

연습해 봅시다!

Power Apps 입문

Preparing Video For Download...