현대식 컨트롤
캔버스 앱의 최신 컨트롤은 Microsoft 에코시스템 내 사용자 인터페이스 개발 및 디자인의 중요한 발전을 나타냅니다. Microsoft의 Fluent Design System을 기반으로 하는 이러한 컨트롤은 빠르고 성능 지향적이며 액세스 가능한 사용자 환경을 제공하는 동시에 테마 기능과의 원활한 통합을 보장하도록 설계되었습니다. 탭 목록, 진행률 표시줄, 정보 버튼, 스피너 등을 포함한 이러한 컨트롤의 도입은 보다 직관적이고 반응성이 뛰어나며 시각적으로 매력적인 애플리케이션을 만들기 위한 전략적 변화를 강조합니다. 개발자는 이러한 최신 컨트롤을 사용하여 미학적으로 만족스럽고 기능적으로 풍부한 정교한 UI 요소를 쉽게 구현하여 전반적인 사용자 참여와 만족도를 높일 수 있습니다.
테마를 염두에 두고 이러한 컨트롤의 고유한 디자인을 통해 애플리케이션 전체에 통일되고 일관된 모양과 느낌이 가능하므로 앱을 사용자 지정하고 브랜딩하는 데 필요한 노력이 크게 줄어듭니다. 설정된 테마를 기반으로 모든 컨트롤의 스타일을 자동으로 업데이트하는 기능은 디자인 프로세스를 단순화하고 애플리케이션이 전체적으로 시각적 일관성을 유지하도록 보장합니다. 이는 고품질 디지털 경험을 제공하면서 브랜드 일관성을 유지하려는 현대 기업의 요구 사항과 완벽하게 일치합니다. 또한 최신 컨트롤은 접근성과 성능을 강조하여 포괄적인 디자인 원칙에 따라 장애가 있는 사용자를 포함한 광범위한 사용자가 애플리케이션을 사용할 수 있도록 보장합니다. 따라서 캔버스 앱의 최신 컨트롤은 단순한 UI 구성 요소 세트가 아니라 개발자가 비즈니스와 사용자 모두의 진화하는 요구 사항을 충족하는 보다 효율적이고 유지 관리 가능하며 액세스 가능하고 응집력 있는 애플리케이션을 구축할 수 있도록 지원하는 혁신적인 도구 세트입니다.
중요
캔버스 앱의 최신 컨트롤 중 일부는 일반 공급(GA)되었지만 더 광범위한 기능 세트는 프리뷰 상태로 유지됩니다. 이러한 프리뷰 컨트롤을 탐색하고 피드백을 제공하는 것이 좋습니다. 그러나 해당 기능은 일반 공급에 도달하기 전에 피드백과 테스트를 기반으로 개선될 수 있다는 점을 명심하는 것이 중요합니다.
양식 디자인 및 지침
양식 구성
- 양식을 논리적 섹션으로 나누고 관련 필드를 그룹화합니다.
- 단일 화면에 양식을 유지하는 것을 목표로 하세요. 내용이 길다면 여러 화면, 단계, 탭으로 나누는 것을 고려해 보세요.
- 필드 레이블에는 명확하고 간단한 언어를 사용하고 익숙하지 않은 용어나 전문 용어는 피하십시오.
- 데이터 정확성을 보장하기 위해 유효성 검사 규칙을 구현합니다. 필수 필드의 경우 필수임을 명확하게 표시하세요. 필요에 따라 이메일 주소, 전화번호 및 기타 형식의 유효성을 검사합니다.
양식 재사용
- 새 레코드를 생성하고, 기존 레코드를 편집하고, 보기 전용 모드로 레코드를 표시하려면 단일 양식을 사용하세요.
- 동일한 양식을 재사용하면 일관성을 유지하면서 개발 및 유지 관리 시간이 단축됩니다.
양식 모드
사용자 작업에 따라 양식 모드를 동적으로 설정합니다. 예:
- 새 레코드를 만들 때 양식을 "새로 만들기" 모드로 설정하세요.
- 기존 레코드를 편집할 때 양식을 "편집" 모드로 설정하세요.
- 레코드를 표시할 때 양식을 "보기" 모드로 설정합니다.
컨트롤 배치
- 서로 다른 컨트롤(갤러리, 표시 양식, 편집 양식 등)을 별도의 화면에 배치하여 구별할 수 있도록 합니다.
- 이러한 컨트롤을 수식과 결합하여 응집력 있는 사용자 환경을 만듭니다.
컨테이너
더 많은 비즈니스 시나리오를 처리하기 위해 캔버스 앱의 크기가 커짐에 따라 컨트롤의 수도 계속 늘어나고 수행하는 기능에 따라 컨트롤을 구성해야 합니다. 이를 수행하는 한 가지 쉬운 방법은 컨트롤을 함께 선택하고 그룹으로 그룹화하는 것입니다. 그러나 그룹화 컨트롤이 항상 권장되는 것은 아닙니다. 캔버스 앱 Container 컨트롤은 컨트롤 집합을 보유할 수 있으며 자체 속성을 갖습니다.
컨테이너는 컨테이너의 왼쪽 위 모서리를 기준으로 컨트롤을 삽입하고 구성할 수 있는 빈 공간으로 작동합니다. 컨테이너를 유연하게 중첩하여 보다 복잡한 레이아웃을 생성하고 디자인을 자유롭게 할 수 있습니다.
컨테이너는 Width 및 BorderColor와 같은 자체 속성을 가진 실제 컨트롤입니다. 컨테이너는 앱 레이아웃에 영향을 미치고 화면 독자 사용자가 앱의 구조를 이해하도록 돕습니다.
그룹에 모든 컨트롤을 추가할 수 있지만 컨테이너에는 논리적으로 관련된 컨트롤만 추가해야 합니다.
그룹을 사용하여 Power Apps에서 요소를 구성하면 사용자가 여러 요소에 공유 속성을 적용할 수 있습니다. 그러나 그룹 내에서 개별 속성을 변경하려면 수동 조정이 필요할 수 있습니다. 또한 그룹은 화면 판독기가 그룹을 인식할 수 없기 때문에 접근성상의 이유로 앱의 논리적 구조에 존재하지 않습니다. 또한 그룹을 중첩할 수 없기 때문에 더 복잡한 레이아웃을 만드는 것이 어렵습니다.
갤러리 디자인 및 지침
내부에서 갤러리 항목을 변경하지 마세요
Items 또는 OnChange와 같은 하위 컨트롤의 이벤트 내에서 갤러리의 OnSelect 속성을 수정하지 마세요. 이로 인해 특히 값이 변경될 때 이벤트를 트리거하는 특정 컨트롤을 처리할 때 예기치 않은 동작이 발생할 수 있습니다.
OnChange 트리거 컨트롤에 주의하세요
갤러리에서 콤보 상자, 날짜 선택기, 슬라이더 또는 토글과 같은 컨트롤을 사용할 때는 주의하십시오. 이러한 컨트롤은 OnChange 이벤트를 예기치 않게 트리거하여 무한 루프와 같은 잠재적인 문제를 일으킬 수 있습니다.
패치 적용에 대한 성능 영향
갤러리의 항목을 패치하거나 업데이트할 때, 특히 많은 수의 항목을 처리할 때 성능에 미치는 영향에 유의하세요. 패치가 느려질 수 있으며 갤러리가 모든 항목을 다시 로드하여 성능에 영향을 미칠 수 있습니다.
주의해서 무한 루프 처리**
갤러리 데이터를 수정하면 무한 루프로 이어지는 이벤트가 트리거되는 경우 최신 컨트롤 또는 루프를 중단하기 위해 데이터가 변경될 때 OnChange를 트리거하지 않는 컨트롤을 사용하는 것이 좋습니다.
중첩된 갤러리 피하기
중첩된 갤러리는 성능 문제와 복잡한 데이터 바인딩으로 이어질 수 있습니다.
가능하면 갤러리 중첩을 피하세요. 대신, 데이터 구조를 디자인하고 최적화된 방식으로 함수를 사용해보세요.
유연한 높이 갤러리 사용
고정 높이 갤러리는 특히 동적 데이터를 처리할 때 콘텐츠 가시성이 제한될 수 있습니다.
Height 속성을 Parent.Height 또는 데이터를 기반으로 하는 동적 값으로 설정하여 유연한 높이 갤러리를 사용하세요. 이렇게 하면 다양한 양의 데이터를 수용할 수 있도록 갤러리의 높이가 조정됩니다.
데이터 로딩 최적화
Power Apps에서 데이터 로드를 최적화할 때 전체 데이터 세트를 검색하는 대신 갤러리에서 필요한 열만 가져와 표시할 수 있습니다.
이를 달성하는 방법에 대한 예는 다음과 같습니다. 여러 열이 포함된 EmployeeData 컬렉션이 있고 갤러리에 "이름" 및 "부서" 열만 표시한다고 가정합니다.
// Collection named ProductSales with sample sales data
ClearCollect(ProductSales,
Table(
{ ProductName: "Phone", UnitPrice: 499.99, QuantitySold: 100 },
{ ProductName: "Laptop", UnitPrice: 999.99, QuantitySold: 50 },
{ ProductName: "Tablet", UnitPrice: 299.99, QuantitySold: 75 }
)
)
// Bind the gallery to display only the "ProductName" and "QuantitySold" columns
Gallery1.Items = ShowColumns(ProductSales, ProductName, QuantitySold)
갤러리 모범 사례에 대해 자세히 알아보세요.
재사용 가능한 구성 요소 빌드
Power Apps Component Framework(PCF)를 사용하여 사용자 지정 코드 구성 요소를 만들어야 하는 경우
Power Platform을 사용하면 Power Apps Component Framework(PCF)를 통해 재사용 가능한 구성 요소를 만들 수 있습니다. 자세한 내용은 여기에 있습니다.
Power Apps에서 PCF 구성 요소 생성을 고려할 수 있는 시나리오는 다음과 같습니다.
복잡한 UI 요소
표준 Power Apps 컨트롤에서 쉽게 사용할 수 없는 복잡한 사용자 인터페이스 요소 또는 컨트롤을 만들어야 하는 경우.
특정 요구 사항에 대한 사용자 지정 컨트롤
앱에 기본 컨트롤로 충족되지 않는 특정 요구 사항이 있고 요구 사항에 맞는 사용자 지정 컨트롤을 만들어야 하는 경우.
앱 전반에 걸쳐 일관된 사용자 경험
PCF 구성 요소 내에서 특정 기능을 캡슐화하여 여러 Power Apps 또는 환경에서 일관된 사용자 경험을 유지하려는 경우.
앱 간 재사용성
여러 앱에서 특정 기능이나 사용자 인터페이스 요소를 재사용해야 할 필요성이 예상되는 경우 PCF 구성 요소를 생성하면 한 번 빌드하고 재사용할 수 있습니다.
고급 논리 구현
Power Apps의 표준 수식이나 함수의 기능을 넘어서는 고급 비즈니스 논리나 계산을 구현해야 하는 경우.
향상된 사용자 환경
기본 컨트롤로는 달성할 수 없는 시각적으로 매력적이고 대화형 구성 요소를 만들어 전반적인 사용자 경험을 향상시키려는 경우.