출퇴근 시스템 - 앱 만들기 시작, 앱 도입 화면 구현

저번 포스팅에서는 테이블들을 구축했으니, 이제 본격적으로 powerapps에서 앱을 만들어 보겠다. 

새 앱 만들기

새 앱 버튼을 클릭하면 4가지 옵션이 나타난다.

• Copilot으로 시작 → AI가 앱 뼈대를 자동 생성
• 데이터로 시작 → 엑셀/DB 기반 앱 자동 생성
• 페이지 디자인으로 시작 → UI를 직접 디자인
• 앱 템플릿으로 시작 → 기본 템플릿을 불러와 수정

이번에는 페이지 디자인으로 시작을 선택한다.

 

 

빈 캔버스 선택

페이지 디자인 화면에서 빈 캔버스를 선택한다.

첫 화면 구성

1. 기본 생성된 Screen1을 Home Screen으로 이름 변경
2. 상단 메뉴에서 템플릿 > 머리글 및 바닥글 선택
3. Home Screen은 앱 접속 시 로딩되는 화면이므로 바닥글 삭제

Header Container 설정

• Header Container1의 Fill 속성에서 색상 지정
• 원하는 색상 또는 테마 선택 가능

Main Container – 라벨 추가

Main Container1에 Label을 추가하고 이름을 lbl메인으로 변경한다.
텍스트에는 “출/퇴근 시스템”을 입력한다.

- lbl메인:
    Control: Label@2.5.1
    Properties:
      Align: =Align.Center  # 텍스트를 수평 가운데 정렬
      AlignInContainer: =AlignInContainer.Center  # 라벨 자체를 부모 컨테이너 안에서 가운데 정렬
      BorderColor: =RGBA(0, 18, 107, 1)  # 테두리 색상: 짙은 파란색 (RGB 0, 18, 107)
      Color: =RGBA(0, 134, 208, 1)  # 텍스트 색상: 하늘색 계열 (RGB 0, 134, 208)
      Font: =Font.'Segoe UI'  # 글꼴: Segoe UI 사용
      Height: =Parent.Height  # 라벨의 높이를 부모 컨트롤과 동일하게 설정
      Size: =80  # 글자 크기: 80pt
      Text: ="출/퇴근 시스템"  # 라벨에 표시될 텍스트
      Width: =Parent.Width  # 라벨의 너비를 부모 컨트롤과 동일하게 설정

해당 속성대로 설정하면 중앙 정렬된 큰 제목 라벨이 생성된다.

Parent 속성 참고

• Parent.Height, Parent.Width → 부모 컨테이너의 높이와 너비를 그대로 따라감
• 즉, 부모 크기에 맞춰 라벨의 크기가 자동으로 조정된다.

여기까지 Home Screen의 헤더, 메인 라벨 설정까지 완료된다.

 

로딩 화면 설정

앱 접속 시 로딩 화면(Home Screen)이 먼저 뜨고, 일정 시간이 지난 후 메인 화면(Main Screen)으로 이동하도록 설정한다.

1. 앱 시작 화면(App Start Screen)을 Home Screen으로 지정
2. 새 화면을 추가해 머리글 및 바닥글 레이아웃을 적용
3. HeaderContainer2에 텍스트 라벨을 추가하고 "메인 화면" 입력
4. 새로 만든 Screen2의 이름을 Main Screen으로 변경

타이머(Timer) 추가

Home Screen에 Timer 컨트롤을 삽입하고 다음 속성을 적용한다.

- Timer1:
    Control: Timer@2.1.0
    Properties:
      AutoStart: =true                               # 앱 실행 시 자동으로 타이머 시작
      BorderColor: =ColorFade(Self.Fill, -15%)       # 테두리 색상: Fill보다 15% 어둡게
      Color: =RGBA(255, 255, 255, 1)                 # 텍스트 색상: 흰색
      DisabledBorderColor: =ColorFade(Self.BorderColor, 70%)  # 비활성화 상태 테두리 색상
      DisabledColor: =ColorFade(Self.Fill, 90%)      # 비활성화 상태 텍스트 색상
      DisabledFill: =ColorFade(Self.Fill, 70%)       # 비활성화 상태 배경색
      Duration: =10000                               # 실행 시간: 10초 (10,000ms)
      Fill: =RGBA(56, 96, 178, 1)                    # 배경색: 파란색 계열
      Font: =Font.'Open Sans'                        # 글꼴: Open Sans
      HoverBorderColor: =ColorFade(Self.BorderColor, 20%) # 마우스 오버 시 테두리 색상
      HoverColor: =RGBA(255, 255, 255, 1)            # 마우스 오버 시 텍스트 색상
      HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%) # 마우스 오버 시 배경색
      OnTimerEnd: =Navigate('Main Screen',ScreenTransition.Fade)  
          # 타이머 종료 후 Main Screen으로 이동, 전환 효과는 Fade
      PressedBorderColor: =Self.Fill                 # 클릭 시 테두리 색상
      PressedColor: =Self.Fill                       # 클릭 시 텍스트 색상
      PressedFill: =Self.Color                       # 클릭 시 배경색
      Start: =true                                   # 타이머 강제 시작
      Visible: =false                                # 화면에 표시되지 않음 (숨김 처리)

👉 이 설정으로 Home Screen이 10초간 표시된 뒤, 자동으로 Main Screen으로 이동한다.

 

 

 

여기까지 로딩 화면(Home Screen)과 메인 화면(Main Screen) 구성, 그리고 타이머를 통한 자동 전환 설정이 완료된다.