Power Apps로 반응형 앱 만들기

파워앱스(Power Apps)에서 반응형 앱(Responsive App)을 만들기 위해서는

화면 크기에 따라 레이아웃과 컨트롤이 유동적으로 조정되도록 설정해야 합니다.

 

기본적으로 파워앱스는 정적 캔버스 앱을 제공하지만,

설정과 구성 요소 배치를 통해 반응형(Responsive) 디자인을 구현할 수 있습니다.

 

다음은 반응형 파워앱스를 만들기 위한 주요 단계입니다:

---

1. 앱을 “반응형 모드”로 설정

• 파워앱스를 새로 만들 때 캔버스 앱(Canvas App) 을 선택합니다.
• 화면 크기 선택 시 "태블릿" 또는 "전화"가 아닌 "빈 캔버스" 로 시작하세요.
• 앱의 App 객체에서 다음 속성을 확인/설정하세요:
  • App.Width = App.Width
  • App.Height = App.Height
• 앱 설정 → 디스플레이 설정(Display settings) 에서:
  • Lock aspect ratio (화면 비율 고정) 옵션을 끄기(Off) → 크기 조절 가능

---

2. 스크린(Screen)을 반응형으로 설정

• 각 화면(Screen)의 Width와 Height 속성은 다음과 같이 설정:
  • Width = App.Width
  • Height = App.Height

---

3. 컨트롤(Control) 배치 시 유동적 속성 사용

• 컨트롤의 위치(X, Y) 및 크기(Width, Height)를 고정값이 아닌 수식으로 설정합니다.

예시:

X = Parent.Width * 0.1
Width = Parent.Width * 0.8

• 이 방식으로 설정하면 화면 크기가 바뀌어도 비율에 따라 유동적으로 움직입니다.

---

4. 레이아웃 컨테이너 활용하기 (권장)

Power Apps는 "컨테이너 레이아웃" 을 지원하여 더 쉽게 반응형 디자인을 만들 수 있습니다:

• Horizontal container: 가로로 배치
• Vertical container: 세로로 배치
• Flexible height container: 자동 높이 조절

♣ 컨테이너 안의 요소들은 자동으로 정렬, 간격 조정, 크기 조정이 가능하여 모바일/웹 모두에 대응하기 좋습니다.

 

☞ 삽입 > 레이아웃 > 컨테이너를 선택해서 사용

 

---

5. Breakpoints 또는 화면 크기 조건 처리

화면 폭에 따라 다른 레이아웃을 적용할 수 있습니다. 예:

If(App.Width < 600, "모바일 레이아웃", "데스크톱 레이아웃")

• 컨트롤 Visible 속성에 조건을 넣어 화면 크기에 따라 다른 구성요소를 보여줄 수 있습니다.

 

6. 테스트 및 시뮬레이션

• Power Apps Studio에서 오른쪽 상단의 화면 크기 조절기로 다양한 크기를 테스트해보세요.
• 또한 브라우저 창 크기를 줄이거나 늘리며 직접 확인해도 됩니다.

---

★ 요약 체크리스트

항목	설정
앱 화면 비율 고정 해제	V
App.Width, App.Height 활용	V
컨트롤 위치/크기 비율로 설정	V
컨테이너 레이아웃 사용	V
화면 크기 조건 분기 처리	V