---
sourceDocument: 호주 애플리케이션 빌드 또는 수정
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/application-development

 Release :

    - australia

ft:locale :

    - ko-KR

ft:publication_title :

    - 호주 애플리케이션 빌드 또는 수정

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# 페이지에 뷰포트 구성요소 추가

# 페이지에 뷰포트 구성요소 추가 {#ariaid-title1}

* 릴리스 버전: Australia
* 
* 업데이트 날짜 2026년 03월 12일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 1분

페이지에 뷰포트 구성요소를 추가하고 하위 페이지를 만들어 페이지에 별도의 콘텐츠를 생성합니다.

## 시작하기 전에

필요한 역할: ui_builder_admin

## 프로시저

1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험.  
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") .
3. 뷰포트를 추가할 페이지 변형의 편집기를 엽니다.  
   환경에 대한 페이지를 생성하지 않은 경우 다음 단계를 따르십시오.[UI 빌더에서 페이지 생성](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더")
4. 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다.
5. 단일 열 레이아웃을 선택합니다.
6. 그런 다음 열에서 + 아이콘을 선택하여 도구 상자를 엽니다.
7. 검색 상자에 <kbd class="ph userinput">뷰포트</kbd> 를 입력합니다.
8. 뷰포트를 선택합니다.  
   그림 1. 뷰포트 구성요소
9. 컨텐츠 트리에서 뷰포트 구성요소를 선택합니다.
10. 구성 패널에서 + 추가 를 선택합니다.  
11. 목록에서 [페이지 컬렉션](https://servicenow-prod.fluidtopics.net/n9UkHaM8My2Hv3gyqpYW0w#gloss-page-collection-ui-builder "탭 또는 모달 내의 경험에서 재사용할 수 있는 페이지 그룹입니다.") 을 선택하거나 + 컬렉션 생성을 선택하여 컬렉션을 생성합니다.  
    고유한 페이지 컬렉션을 만드는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 [여러 UI 페이지에서 페이지 컬렉션 생성](https://servicenow-prod.fluidtopics.net/dd~XWA0wae6LsTghoYX_WA "여러 환경에서 사용할 수 있는 탭 콘텐츠를 포함하도록 페이지 컬렉션을 생성합니다.").

12. 추가를 선택합니다.  
    페이지 컬렉션은 구성 패널의 페이지 컬렉션 섹션에 표시됩니다. 페이지 컬렉션의 한 페이지만 준비 영역에 표시됩니다.
13. 저장을 선택합니다.
14. 뷰포트 ID와 경로를 찾습니다.  
    다음 그림과 같이 구성 패널에서 ID와 경로를 볼 수 있습니다.
15. 페이지에 구성요소를 추가 하여 방금 추가한 뷰포트(예: 버튼 구성요소)를 엽니다.  
    자세한 내용은 [구성요소 추가 및 구성](https://servicenow-prod.fluidtopics.net/qmxQoGzAEcZmJDRXYpo1aw#add-components "에서 페이지에 UI 빌더구성요소를 추가하는 방법에 대해 알아봅니다. 구성요소를 추가하여 페이지가 빌드됩니다.") 문서를 참조하십시오.
16. 구성 패널에서 이벤트 탭을 선택합니다.
17. + 이벤트 핸들러 추가를 선택하여 뷰포트를 봅니다.  
18. 페이지 수준 이벤트 핸들러에서 UXF macroponent 뷰포트 로드 요청됨을 선택합니다.  
19. viewportElementID 요소에서 <kbd class="ph userinput">null</kbd> 값을 이전 단계에서 찾은 뷰포트 ID로 바꿉니다.  
    이 예에서는 <kbd class="ph userinput">"viewport_1"</kbd>입니다.
20. 추가를 선택합니다.  
21. 저장을 선택합니다.
22. ![페이지 변형을 여는 미리 보기 버튼을]()선택하여 페이지를 보고 테스트합니다. .