학습 목표

이 연습에서 학습자는 Copilot을 사용하여 Power Pages 사이트를 빌드합니다. 사이트가 만들어지면 Power Pages Design Studio를 사용하여 콘텐츠 추가 및 수정, 테마 변경 등의 작업을 수행하게 됩니다.

시나리오

Contoso Consulting은 일년 내내 다양한 유형의 이벤트를 호스트합니다. 이러한 이벤트에는 직접 참여하는 이벤트부터 웨비나, 강사 주도 교육 등에 이르기까지 다양합니다. Microsoft Power Platform을 사용하여 호스트하고 있는 다양한 이벤트를 관리하고자 합니다. Power Pages를 사용하여 호스트하고 있는 다양한 이벤트를 표시하는 이벤트 관리 사이트를 만들고 싶어 합니다.

이 연습을 성공적으로 완료하면 다음을 수행하게 됩니다.

• Copilot을 사용하여 이벤트 관리 웹 사이트를 빌드하세요.
• 사이트에 새로운 콘텐츠를 추가하세요.
• 다양한 유형의 디바이스에서 새로운 Power Pages 사이트를 미리 봅니다.

랩 세부 정보:

이 연습을 시작하기 전에 다음 랩을 완료해야 합니다.

• 랩 2 – 데이터 모델 만들기

중요: 이 랩에서는 AI를 사용하여 구성 요소를 빌드합니다. AI 결과는 다양하게 나타날 수 있으므로, 사용자의 결과는 랩에서 정의된 결과와는 다를 수 있지만 유사한 결과가 나올 수 있다는 점을 유의해야 합니다. 랩에서 설명된 기본 개념은 무엇을 만들든, 어떤 이름을 붙이든 관계없이 동일합니다. 테이블과 열이 정확히 일치하지 않더라도, 생성된 항목에 맞게 조정이 필요할 수 있습니다.

이 연습을 완료하는 데 걸리는 예상 시간은 30~45분입니다.

시작하기 전 주의 사항: Power Pages Maker Portal에 처음으로 액세스하는 경우, 몇 가지 설정을 지정해야 할 수도 있습니다. 설정이 필요한 경우, 아래의 지침을 따르세요. 그렇지 않으면 작업 1로 계속 진행할 수 있습니다.

1. 필요한 경우, Microsoft Power Pages로 이동합니다.

2. Power Pages에 오신 것을 환영합니다 화면에서 시작하기 단추를 선택하세요.

   

3. 자기 소개를 좀 해주세요 화면에서 건너뛰기 단추를 선택하세요.

   

작업 1: Copilot을 사용하여 새로운 Power Pages 사이트를 만듭니다.

1. 필요한 경우 https://make.powerpages.microsoft.com으로 이동하세요.
2. Power Pages 디자인 스튜디오 홈페이지에서 다음 텍스트를 입력하세요. “조직에서 호스트하는 이벤트를 관리할 수 있는 사이트를 빌드해 줘.”
3. 보내기 단추를 선택합니다.
4. 기본 사이트 세부 정보 확인 화면에서 다음과 같이 구성하세요.
   • 사이트 이름 지정:Contoso Event Management
   • 웹 주소 만들기: 제공된 기본 주소 적용
   • 사이트 언어: 영어

   

5. 다음 단추를 선택합니다.
6. 레이아웃 선택 화면에서 제안된 레이아웃을 검토하세요. 추가 레이아웃 제안을 원하는 경우, 다시 시도를 선택하여 Copilot이 제안하는 또 다른 레이아웃을 확인하세요.
7. 사용할 템플릿을 확인한 후, 다음을 선택하세요.
8. 공통 페이지 추가 섹션에서 다음 페이지를 선택하세요.
   • 정보
   • 문의하기
   • FAQ
   • 원하는 경우, 추가 페이지를 선택하세요.

9. 페이지를 선택한 후, 완료를 선택하세요.

   새 사이트가 백그라운드에서 만들어지므로 몇 분 정도 시간이 소요될 수 있습니다.

10. 사이트가 만들어진 후, 자동으로 이동되지 않았다면 해당 사이트를 수동으로 열어주세요.

    참고: 경우에 따라, 사이트가 처음으로 로드될 때 Liquid 개체를 찾을 수 없다는 프롬프트가 표시될 수 있습니다. 이런 경우, 브라우저 창을 새로 고침(F5)하여 사이트를 다시 로드합니다. 사이트가 표시됩니다.

작업 2: 사이트의 콘텐츠 수정

이제 첫 단계의 사이트를 만들었으므로 디자인 스튜디오를 사용하여 페이지, 텍스트, 이미지, 양식 등을 추가하며 사이트를 수정할 수 있습니다.

1. 기본 탐색에서 홈을 선택하면 홈 페이지가 열립니다.
2. 사이트 헤더의 Contoso 이벤트 관리 사이트 텍스트 위에 마우스를 올려놓고 사이트 헤더 편집을 선택합니다.
3. 사이트 제목을 Contoso Consulting으로 변경합니다.
4. 이미지 업로드 단추를 선택하세요.
5. 이미지 추가 화면에서 이미지 업로드를 선택하고, 클래스 파일에서 Contoso 로고를 선택한 다음, 열기를 선택합니다.
6. Contoso 로고 이미지를 선택한 다음, 확인을 선택합니다.
7. 변경 작업을 마친 후, X를 선택하여 사이트 헤더 편집 화면을 종료합니다.
8. 사이트 배경 이미지를 변경하려면 배경 이미지의 아무 곳이나 클릭합니다.
9. 표시되는 메뉴에서 배경 편집을 선택합니다.
10. 이미지 변경 단추를 선택하세요.
11. 미디어 라이브러리, 이미지 업로드를 차례로 선택하세요.
12. 클래스 파일에서 Site_Background 이미지를 선택하고 열기를 선택합니다.
13. Site_Background를 선택한 다음, 확인을 선택합니다.
14. Welcome to Contoso Events라는 텍스트를 선택하고 텍스트를 Contoso Consulting으로 변경하세요.
15. 표시되는 도구 모음에서 디자인(페인트 브러시) 단추를 선택하세요.
16. 텍스트 그림자 속성 옆에 있는 화살표를 선택하고 H-오프셋을 2로 설정하세요.
17. X를 선택하여 텍스트 디자인 창을 닫습니다.

18. Contoso Consulting 아래의 텍스트 (Your Partner in Event Management와 비슷한 문구일 수 있음) 를 선택한 다음, Your partner for today and tomorrow로 변경하세요.

    홈페이지에 몇 가지 기본적인 변경 내용을 만들었으니 이제 Contoso의 브랜딩에 더 잘 어울리도록 사이트 테마를 업데이트하겠습니다.

19. 왼쪽의 탐색 영역에서 스타일 지정 단추를 선택합니다.
20. 밝은 파란색 테마를 선택하세요.
21. 브랜드 색 아래에서 회색 원형 색상표를 선택하세요.
22. Hex 색상** 변경: 101E2B**
23. 확인을 선택합니다.
24. 흰색 원을 선택한 다음, 색상을 Hex 코드 e8e8e8로 변경하세요.
25. 확인을 선택합니다.
26. 검정색 원을 선택하고, 색을 흰색으로 변경합니다. (ffffff)
27. 확인을 선택합니다.
28. 원하는 테마를 추가로 적용합니다. 테마 변경이 완료되면 저장 단추를 선택하세요.

작업 3: 비즈니스 데이터에 사이트 연결

Power Pages의 주요 이점 중 하나는 Power Pages를 Dataverse에 있는 비즈니스 데이터에 연결할 수 있다는 것입니다. 데이터를 가져오기 전에 사용할 몇 가지 요소를 빌드해야 합니다.

1. 왼쪽의 탐색 영역에서 데이터 아이콘을 선택합니다.
2. 검색 필드에서 이벤트를 입력하세요.

3. 이벤트 테이블을 선택합니다.

   먼저, 새로운 이벤트를 추가할 때 사용할 양식을 만들겠습니다.

4. 양식 탭을 선택한 다음, + 새 양식을 선택합니다.
5. 양식 이름을 Create Event로 설정한 다음, 만들기 단추를 선택합니다.
6. 레이아웃은 수정하지 않습니다. 저장 및 게시 단추를 선택하세요.

7. 디자이너로 돌아가려면 뒤로 화살표를 누르세요.

   다음으로, 기존 이벤트를 보고 편집하는 데 사용할 양식을 만들어 보겠습니다.

8. + 새 양식 단추를 선택하세요.
9. 양식 이름을 이벤트 보기로 지정하고 만들기 단추를 선택합니다.
10. 명령 모음에서 구성 요소 추가를 선택하고 하위 그리드를 선택하세요.
11. 다음과 같이 하위 그리드를 구성하세요.
    • 관련 레코드 표시: 예
    • 테이블: 이벤트 세션
    • 기본값: Active Sessions
12. 완료를 선택합니다.
13. 저장 및 게시 단추를 선택하세요.
14. 디자인 스튜디오로 돌아가려면 뒤로 단추를 선택하세요.

작업 4: 필요한 웹 페이지 양식 만들기

이제 이벤트 테이블의 양식을 정의했으므로 해당 양식을 포함하는 페이지를 만들어 사이트 사용자가 이벤트 레코드를 사용할 수 있도록 하겠습니다. 이벤트를 보고, 만들고, 편집하기 위한 페이지를 만들겠습니다.

1. 왼쪽의 탐색 기능을 사용하여 페이지 아이콘을 선택하세요.
2. + 페이지 단추를 선택하세요.
3. Copilot에서 다음 텍스트를 입력하세요. Add a new blank page.보내기 단추를 선택합니다.
4. 유지 단추를 선택하세요.
5. 새 페이지 상단에서 섹션 추가 단추를 선택하세요.
6. 1열을 선택하세요.
7. 이 섹션에 추가할 구성 요소 선택에서 양식을 선택하세요.
8. + 새 양식을 선택합니다.
9. 양식 추가 화면에서 다음과 같이 구성하세요.
   • 테이블 선택: Event
   • 양식 선택: 이벤트 만들기
   • 선택한 양식 사본의 이름 지정: 이벤트 만들기
10. 데이터 탭을 선택하고 이 양식의 데이터가 새 레코드 만들기로 설정되어 있는지 확인합니다.
11. 제출 시 탭을 선택하세요. 이 메시지 표시 필드에 Your event has been successfully submitted. 을(를) 입력합니다.

12. 확인 단추를 선택합니다.

    해당 페이지에 필요하지 않은 추가 섹션은 제거하겠습니다.

13. 방금 추가한 양식 아래의 섹션을 선택하세요. 표시되는 도구 모음에서 더보기 (…) 를 선택하고 삭제를 선택합니다.

14. 나머지 두 섹션을 페이지에서 제거하려면 이전 단계를 반복하세요.

    완료되면, 생성한 양식과 페이지 하단의 바닥글만 남게 됩니다.

15. 왼쪽의 기본 탐색에서 만든 새 페이지 옆에 있는 줄임표를 선택하세요.
16. 표시되는 메뉴에서 페이지 설정을 선택하세요.
17. 다음과 같이 페이지 설정을 구성하세요.
    • 이름: 새 이벤트
    • 부분 URL: 새 이벤트

18. 확인 단추를 선택합니다.

    다음으로 개별 이벤트를 보는 데 사용할 수 있는 추가 페이지를 추가합니다.

19. 페이지가 선택되어 있는지 확인하고 + 페이지 단추를 클릭하세요.
20. 페이지를 만들어 설명하세요 화면에서 다음을 입력하세요. Add a Blank Page named View Event.보내기 단추를 선택합니다.
21. 새 페이지를 적용하려면 유지 단추를 선택하세요.
22. 새 페이지 상단에서 섹션 추가 단추를 선택하세요.
23. 1열을 선택하세요.
24. 이 섹션에 추가할 구성 요소 선택에서 양식을 선택하세요.
25. + 새 양식을 선택합니다.
26. 양식 추가 화면에서 다음과 같이 구성하세요.
    • 테이블 선택: Event
    • 양식 선택: 보기 이벤트
    • 선택한 양식 사본의 이름 지정: 보기 이벤트
27. 데이터 탭을 선택하고 이 양식의 데이터 필드를 읽기 전용으로 설정합니다.

28. 확인 단추를 선택합니다.

    해당 페이지에 필요하지 않은 추가 섹션은 제거하겠습니다.

29. 방금 추가한 양식 아래의 섹션을 선택하세요. 표시되는 도구 모음에서 더보기 (…) 를 선택하고 삭제를 선택합니다.
30. 나머지 섹션을 페이지에서 제거하려면 이전 단계를 반복하세요.
31. 왼쪽의 기본 탐색에서 만든 새 페이지 옆에 있는 줄임표를 선택하세요.
32. 표시되는 메뉴에서 페이지 설정을 선택하세요.
33. 다음과 같이 페이지 설정을 구성하세요.
    • 이름: 보기 이벤트
    • 부분 URL: 이벤트 보기

34. 확인 단추를 선택합니다.

    마지막으로 이벤트를 편집하는 데 사용할 수 있는 웹 페이지 양식을 하나 더 만들어 보겠습니다.

35. 페이지가 선택되어 있는지 확인하고 + 페이지 단추를 클릭하세요.
36. 페이지를 만들어 설명하세요 화면에서 다음을 입력하세요. Add a Blank Page named Edit Event.보내기 단추를 선택합니다.
37. 새 페이지를 적용하려면 유지 단추를 선택하세요.
38. 새 페이지 상단에서 섹션 추가 단추를 선택하세요.
39. 1열을 선택하세요.
40. 이 섹션에 추가할 구성 요소 선택에서 양식을 선택하세요.
41. + 새 양식을 선택합니다.
42. 양식 추가 화면에서 다음과 같이 구성하세요.
    • 테이블 선택: Event
    • 양식 선택: 이벤트 만들기
    • 선택한 양식 사본의 이름 지정: 이벤트 편집
43. 데이터 탭을 선택하고 이 양식의 데이터를 기존 레코드 업데이트로 설정합니다.

44. 확인 단추를 선택합니다.

    해당 페이지에 필요하지 않은 추가 섹션은 제거하겠습니다.

45. 방금 추가한 양식 아래의 섹션을 선택하세요. 표시되는 도구 모음에서 더보기 (…) 를 선택하고 삭제를 선택합니다.
46. 이전 단계를 반복하여 페이지에서 나머지 섹션을 제거합니다.
47. 확인 단추를 선택합니다.

작업 5: 이벤트 목록을 표시하는 페이지 만들기

레코드 관리하는 데 사용할 필요한 양식을 정의했으므로 이제 해당 레코드를 표시하는 페이지 보기를 만들어 보겠습니다.

1. + 페이지 단추를 선택하세요.

2. 페이지를 만들어 설명하세요 화면에서 다음을 입력하세요. Add a blank page called events.보내기 단추를 선택합니다.
3. 새 페이지를 적용하려면 유지를 선택하세요.
4. 새 페이지 상단에서 섹션 추가 단추를 선택하세요.
5. 1열을 선택하세요.
6. 이 섹션에 추가할 구성 요소 선택에서 더 보기 단추 (…) 를 선택하세요. 연결된 데이터 그룹에서 목록을 선택하세요.
7. 목록 추가 화면에서 설정 탭을 선택하고 다음과 같이 구성합니다.
   • 테이블 선택: Event
   • 데이터 보기 선택: 활성 이벤트, 비활성 이벤트
   • 나열한 이름:Events
8. 작업 탭을 선택하고 다음과 같이 구성하세요.
   • 새 레코드 만들기: 켜기
     • 대상 형식: 폼
     • 양식: 이벤트 만들기
     • 레이블 표시: Create New Event
   • 세부 정보 보기: 켜기
     • 대상 형식: 폼
     • 양식: 보기 이벤트
     • 레이블 표시: See Event Details
   • 레코드 편집: 켜기
     • 대상 형식: 폼
     • 양식: 이벤트 편집
     • 레이블 표시: Edit Event
9. 완료를 선택합니다.

작업 6: 권한 업데이트

사용자가 자신과 관련된 데이터만 볼 수 있도록 하기 위해 조직에서는 테이블 권한을 지정할 수 있습니다. 이 작업에서는 모든 사용자에게 액세스할 수 있는 매우 기본적인 권한을 만들어 보겠습니다.

1. 기본 탐색에서 이벤트 페이지를 선택하세요.
2. 이벤트 목록을 선택하고 + 새 권한 단추를 클릭하세요.
3. 다음과 같이 권한을 구성합니다.
   • 이름: 이벤트
   • 테이블: Event
   • 액세스 유형: 전역 액세스
4. 권한을 읽기로 설정하세요.
5. 역할 추가를 선택하고 관리자, 익명 사용자, 인증된 사용자 역할을 선택하세요.
6. 저장 단추를 선택합니다.

7. 누구나 데이터를 볼 수 있습니다라는 화면이 나타나면 저장을 선택하세요.

   이벤트 양식 페이지에도 이 과정을 반복해 보겠습니다. 새 이벤트 페이지부터 시작하겠습니다.

8. 기본 탐색에서 새 이벤트 페이지를 선택하세요.
9. 권한 업데이트 단추를 선택하세요.
10. 다음과 같이 권한을 구성합니다.
    • 이름: 이벤트 만들기
    • 테이블: Event
    • 액세스 유형: 전역 액세스
11. 권한을 읽기 및 만들기로 설정하세요.
12. 역할 추가를 선택하고 관리자, 익명 사용자, 인증된 사용자 역할을 선택하세요.

13. 저장 단추를 선택하고 팝업 화면에서 다시 저장을 선택하세요.

    다음으로, 이벤트 편집 화면을 설정하겠습니다.

14. 기본 탐색에서 이벤트 편집 페이지를 선택하세요.
15. 권한 업데이트 단추를 선택하세요.
16. 다음과 같이 권한을 구성합니다.
    • 이름: 이벤트 만들기
    • 테이블: Event
    • 액세스 유형: 전역 액세스
17. 권한을 읽기 및 업데이트로 설정합니다.
18. 역할 추가를 선택하고 관리자, 익명 사용자, 인증된 사용자 역할을 선택하세요.
19. 저장 단추를 선택하고 팝업 화면에서 다시 저장을 선택하세요.

작업 7: 사이트 탐색 업데이트

이제 페이지와 항목의 서식이 원하는 대로 지정되었으므로 그에 맞게 사이트 탐색을 조정해 보려고 합니다.

1. 기본 탐색에서 이벤트 페이지 옆에 있는 줄임표를 선택하세요.

2. 표시되는 메뉴에서 위로 이동을 선택하세요.
3. 문의하기 페이지 아래에 있는 이벤트 페이지가 나올 때까지 단계를 반복합니다.
4. 새 이벤트 페이지가 이벤트 페이지 바로 아래에 있는지 확인하세요. (그렇지 않은 경우 새 이벤트 페이지를 해당 페이지로 이동합니다.)
5. 새 이벤트 페이지에서 줄임표 단추를 선택하세요.
6. 표시되는 메뉴에서 이 페이지를 하위 페이지로 만들기를 선택합니다.
7. 이벤트 보기 옆에 있는 줄임표를 선택하고 다른 페이지로 이동을 선택하세요.
8. 이벤트 편집 옆에 있는 줄임표를 선택하고 다른 페이지로 이동을 선택하세요.
9. 명령 모음에서 동기화 단추를 선택하세요.

작업 8: 사이트 미리 보기 및 개선 작업

사이트가 만들어지면 비즈니스 요구 사항을 충족하는지 검토하여 필요한 개선 사항을 결정해야 합니다. 사이트는 데스크톱 및 모바일 모드에서 미리 볼 수 있습니다.

1. 디자인 스튜디오에서 홈 페이지 단추를 선택하세요.
2. 명령 모음에서 미리 보기를 클릭합니다.
3. 브라우저에서 사이트를 미리 보려면 데스크톱을 선택하세요.
4. 데스크톱 모드에서 볼 때 다음과 같은 사이트 측면을 검토하세요.
   • 레이아웃 및 탐색
   • 색, 글꼴, 로고와 같은 브랜딩 요소입니다.

5. 사이트 테스트를 마치면 브라우저 탭을 닫고 사이트 편집기로 돌아가세요.

   다음으로, 모바일 디바이스에 어떻게 표시되는지 사이트를 미리 살펴보겠습니다.

6. 미리 보기 단추를 다시 선택하세요.
7. 모바일 디바이스를 이용하여 표시된 QR 코드를 스캔하세요.
8. 사이트가 모바일 디바이스에서 열립니다 (참고: 로그인하라는 프롬프트가 표시될 수 있습니다. 그럴 경우 로그인 자격 증명을 제공하세요.).
9. 데스크톱 모드에서 했던 것처럼 다음과 같은 사이트 측면을 검토하세요.
   • 레이아웃 및 탐색
   • 색, 글꼴, 로고와 같은 브랜딩 요소입니다.
10. 테스트를 마치면 브라우저 탭을 닫고 사이트로 돌아가세요.