자연어를 사용하여 AI를 통해 생성된 생성 페이지를 빌드합니다. 생성 페이지는 모델 기반 앱에서 앱 디자인 프로세스를 단순화, 가속화 및 개선하도록 설계된 AI 기반 환경입니다. 앱 에이전트와 상호 작용하면 자연어로 필요한 내용을 설명하고 참조할 Microsoft Dataverse 테이블을 지정하여 모델 기반 앱에서 완벽하게 기능하는 페이지를 만들 수 있습니다. 원하는 페이지 모양을 나타내는 이미지를 첨부할 수도 있습니다.
페이지를 설명하면 시스템에서 요구 사항과 사양을 처리하고, 올바른 구성 요소를 선택하고 최적의 레이아웃을 결정하여 프런트 엔드 사용자 경험과 해당 비즈니스 로직을 모두 포괄하는 React 코드를 지능적으로 생성합니다. 대화형 환경을 통해 페이지 디자인을 실시간으로 다듬고 요소, 레이아웃 및 기능을 비전에 완벽하게 맞출 수 있습니다.
사전 요구 사항
- Power Platform 환경은 미국 지역에 있어야 합니다. 이 기능은 다른 지역에서는 아직 사용할 수 없습니다.
모델 기반 앱에서 생성 페이지 만들기
Power Apps에 로그인합니다.
편집을 위해 모델 기반 앱을 엽니다.
앱 디자이너에서 페이지 추가>페이지 설명을 선택합니다.
전체 페이지 생성 페이지 환경이 열립니다.
텍스트 상자에 만들려는 페이지 유형에 대한 설명을 입력합니다. 설명에는 기능 요구 사항과 UX 사양(선택 사항)이 포함되어야 합니다. 예를 들어, 현대적인 디자인과 느낌을 사용하여 계정 기록을 카드 갤러리 형태로 보여주는 페이지를 만드세요. 상단에 이름, 엔티티 이미지, 웹사이트, 이메일, 전화번호를 추가하세요. 계정 테이블의 데이터를 사용하여 갤러리를 스크롤 가능하게 만드세요라고 입력할 수 있습니다.
데이터 추가>테이블 추가를 선택하여 적절한 테이블과 이미지를 추가합니다. 최대 6개의 Dataverse 테이블을 연결할 수 있습니다. 스크린샷에서 계정 테이블이 추가됩니다.
필요에 따라 데이터 추가>이미지 첨부를 선택하여 생성된 페이지의 UI를 안내하는 이미지를 업로드합니다. 이것은 거친 냅킨 스케치 또는 고해상도 이미지일 수 있습니다.
페이지 설명을 마쳤으면 페이지 생성을 선택합니다.
에이전트는 실시간으로 관찰할 수 있는 다단계 빌드 프로세스를 시작합니다.
- 생각을 정리하여 전달: 에이전트는 먼저 프롬프트에 대한 해석을 정리하고, 요구 사항, 가정, 실행 계획을 나열합니다.
- 코드 생성: 다음으로 계획에 따라 페이지의 기본 코드를 작성합니다.
- Transpilation: 생성된 코드는 호환성 및 적절한 렌더링을 보장하기 위해 변환됩니다.
- 최종 렌더링: 마지막으로 완료된 사용자 환경이 표시됩니다.
이 프로세스가 끝날 때 사용자 환경이 표시되지 않으면 미리 보기 탭을 선택하여 볼 수 있습니다.
생성된 코드 보기, 반복 및 게시
페이지를 생성한 후 구체화하고 마무리하는 몇 가지 옵션이 있습니다.
생성된 코드 보기 및 편집 앱 에이전트에서 생성한 코드를 보려면 코드 탭을 선택합니다.
다음 두 가지 방법으로 출력을 구체화할 수 있습니다.
- 앱 에이전트와 반복적으로 채팅하여 오류를 수정하거나 레이아웃을 조정하거나 기능을 추가합니다.
- 코드 탭에서 편집 을 선택하여 코드를 수동으로 편집합니다. 몇 가지 편집을 수행한 후 저장 을 선택하여 변경 내용을 새 반복으로 커 밋하거나 취소 하여 변경 내용을 취소할 수 있습니다.
반복 비교 에이전트를 사용하여 두 개 이상의 반복을 완료한 후 코드 탭에서 비교 를 선택하여 현재 반복과 이전 반복 간의 코드 차이 보기를 볼 수 있습니다.
참고
이 기능은 현재 세션의 두 번째 반복부터만 사용할 수 있습니다.
빠른 참조를 위한 스크린샷 첨부 채팅 환경에서 연결>스크린샷 추가 를 클릭하여 앱 에이전트와의 다음 상호 작용과 함께 현재 미리 보기의 스크린샷을 포함합니다. 이는 페이지의 시각적 요소를 조정하는 데 유용합니다.
저장 및 게시 명령 모음에서 저장 을 선택하여 페이지의 진행률이 손실되지 않도록 합니다.
페이지에 만족하면 저장 및 게시 를 선택하여 모든 생성 페이지를 포함하여 앱에 대해 보류 중인 모든 변경 내용을 게시합니다.
중요
에이전트는 접근성 및 보안 모범 사례에 대한 고려 사항을 포함하여 프로덕션 준비가 완료된 코드를 생성하기 위해 최선을 다하지만, 궁극적으로 코드의 유효성을 검사할 책임이 있습니다. 생성된 코드가 조직의 표준 및 규정 준수 요구 사항을 충족하는지 확인합니다.
솔루션에 생성 페이지 추가
생성 페이지는 솔루션을 인식하며 환경 간에 쉽게 이동할 수 있도록 솔루션에 추가할 수 있습니다(앱을 통해). 솔루션에 생성 페이지를 추가하려면 다음을 수행합니다.
중요
미리 보기 단계에서 생성 페이지를 만든 경우 모델 앱 디자이너에서 생성 페이지를 로드하여 새 솔루션 인식 데이터 모델로 일회성 마이그레이션을 시작해야 합니다. 페이지가 디자이너에 로드되면 "페이지 업그레이드" 진행률 메시지가 표시됩니다. 마이그레이션이 완료될 때까지 창을 닫지 마세요.
- 생성 페이지가 포함된 앱을 솔루션에 추가
- Power Apps의 왼쪽 탐색 창에서 솔루션을 선택하고 원하는 솔루션을 엽니다.
- 기존 > 앱 > 추가 모델 기반 앱을 선택합니다.
- 생성 페이지가 포함된 앱을 선택합니다.
-
솔루션 내보내기 (관리형 또는 비관리형)
- 앱 사이트맵이 솔루션에 포함되어 있는지 확인합니다. 그렇지 않은 경우 종속성 검사 중에 요청해야 합니다.
- 또한 사이트맵에 대한 종속성에 따라 생성 페이지( UX 에이전트 프로젝트 행으로 표시됨)도 요청됩니다.
참고
종속성 검사 중에 생성 페이지가 요청되지 않은 경우 다음 항목을 확인합니다.
- 미리 보기 중에 만든 페이지는 마이그레이션된 경우에만 표시됩니다. 디자이너에 로드하여 마이그레이션을 트리거합니다.
- 사이트맵이 솔루션에 포함되어 있고 생성 페이지가 마이그레이션된 경우 사이트맵(예: 페이지 순서 변경 또는 이름 바꾸기)을 약간 변경하고 앱을 다시 게시한 다음 내보내기를 다시 시도합니다.
내보낸 후 앱 및 생성 페이지를 다른 환경으로 가져올 수 있습니다. 대상 환경의 디자이너에서 열면 첫 번째 프롬프트 및 게시된 코드만 사용할 수 있습니다. 전체 에이전트 대화는 페이지와 함께 전송되지 않습니다.
제한 사항
생성 페이지의 현재 제한 사항은 다음과 같습니다.
- 페이지는 Dataverse 테이블에만 연결할 수 있습니다(단일 페이지당 최대 6개). 이러한 테이블에 대해 CRUD(만들기, 읽기, 업데이트 및 삭제) 작업을 수행할 수 있습니다. 다른 데이터 원본은 사용할 수 없습니다.
- 프롬프트에는 최대 50,000자의 문자가 있을 수 있습니다.
- 미국 영어만 지원됩니다.
- 공동 작업은 지원되지 않습니다. 의도하지 않은 충돌을 피하기 위해 한 번에 한 명의 제작자만 생성 페이지에서 작업하도록 합니다.
- 다음 데이터 유형만 지원됩니다.
- 선택 항목
- 통화
- 고객 님
- 날짜 및 시간
- 날짜만
- 10진수
- 부동 소수점 수
- Image
- Lookup
- 여러 줄 텍스트
- Status
- 상태 이유
- 문자
- 정수
- 예/아니요
- 고유 식별자
자주 묻는 질문
계획 디자이너에서 앱 디자인을 시작한 다음 생성 페이지를 사용할 수 있나요?
예, 현재 계획과 생성 페이지 간에 직접 통합은 없지만 계획을 사용하여 테이블과 앱을 정의한 다음 앱 디자이너로 전환하여 원하는 생성 페이지를 만들 수 있습니다.
생성 페이지를 사용하는 데 필요한 추가 비용이나 크레딧이 있습니까?
아니요, 생성 페이지(및 계획)에 대한 작성자 환경에는 추가 AI 또는 메시지 크레딧이 필요하지 않습니다.
UI 생성을 안내하는 데 가장 적합한 이미지 종류는 무엇인가요?
그것은 당신의 목표에 따라 달라집니다. 최종 페이지의 모양을 정확히 알고 있는 경우 선명하고 상세한 스케치 또는 와이어프레임(손으로 그린 스케치든 디지털이든)이 가장 효과적입니다. 일반적인 개념만 있고 에이전트가 세부 정보를 채우도록 하려는 경우 빠른 화이트보드 스케치 또는 냅킨 드로잉도 잘 작동할 수 있습니다.
캔버스 앱 또는 다른 앱 유형에서 생성 페이지를 사용할 수 있습니까?
아니요, 생성 페이지는 현재 모델 기반 앱에서만 지원됩니다.
여러 환경에서 생성 페이지를 재사용하거나 복제할 수 있는 방법이 있습니까?
예, 생성 페이지는 환경 간에 이동할 수 있는 솔루션 인식 요소입니다. 마지막으로 게시된 코드 버전과 첫 번째 프롬프트만 솔루션과 함께 유지 관리됩니다. 전체 수정 기록은 원래 환경에 남아 있습니다.
생성된 코드를 수동으로 편집할 수 있습니까?
예. 코드 탭에서 편집을 선택하여 생성된 코드를 수동으로 편집할 수 있습니다. 변경 내용은 새 반복으로 저장됩니다. 편집 내용을 유지하지 않도록 선택한 경우 취소 를 선택하여 편집을 취소합니다.
생성 페이지에 의해 생성된 코드가 프로덕션 준비가 되어 있고 조직의 표준을 준수하도록 보장되나요?
아니요 에이전트는 접근성 및 보안 모범 사례를 염두에 두고 고품질의 프로덕션 준비 코드를 생성하기 위해 최선을 다하지만, 출력의 유효성을 검사하는 것은 사용자의 책임입니다. 생성된 코드를 항상 검토하여 조직의 표준, 정책 및 규정 준수 요구 사항에 부합하는지 확인합니다.
기능에 대한 피드백을 제공하려면 어떻게 해야 하나요?
생성 페이지에 대한 피드백을 제공하는 가장 좋은 방법은 각 반복 후에 사용할 수 있는 채팅 환경에서 엄지손가락 위/아래 버튼을 사용하는 것입니다. 또한, 기능 사용과 관련하여 발생한 문제를 디버깅하거나 재현해 볼 수 있도록 관련 콘텐츠 샘플 및 추가 로그 파일 공유에서 예를 선택하는 것이 좋습니다.
내 환경에서 생성 페이지가 활성화되지 않으면 어떻게 합니까?
환경이 미국 지역에 있는지 확인합니다.