---
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. 페이지를 열거나 생성합니다.  
   기존 페이지를 여는 경우 원래 페이지와 같은 범위에 있는지 확인합니다. 그렇지 않은 경우 페이지 편집을 시작하기 전에 범위를 변경합니다. 애플리케이션 범위 지정은 애플리케이션 파일 및 데이터에 대한 접근 권한을 확인하고 제한하여 애플리케이션을 보호합니다. 관리자는 범위를 설정하여 다른 애플리케이션에 액세스할 수 있는 애플리케이션 부분을 지정합니다. 애플리케이션 범위는 데이터와 애플리케이션 파일을 보호합니다. 애플리케이션 범위에 대한 자세한 내용은 문서를 참조하십시오 [보안 및 역할에 대해 알아보기](https://servicenow-prod.fluidtopics.net/jeu~boLdG7GovvC~Yid4EA "인스턴스의 보안 및 역할을 설정합니다.UI 빌더") .
4. 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다.
5. 단일 열 레이아웃을 선택합니다.
6. 콘텐츠 트리에서 모달 옆에 있는 +를 선택합니다.
7. 목록에서 뷰포트 모달을 선택합니다.  
   그림 1. 뷰포트 모달  
   페이지 위에 뷰포트 모델이 나타납니다.
8. 저장을 클릭합니다.
9. 콘텐츠 트리에서 뷰포트를 선택합니다.  
10. 구성 탭의 페이지 컬렉션 옆에 있는 + 추가를 선택합니다.  
11. 페이지 컬렉션을 선택하거나 새 페이지 컬렉션을 생성합니다.  
    자세한 내용은 [여러 UI 페이지에서 페이지 컬렉션 생성](https://servicenow-prod.fluidtopics.net/dd~XWA0wae6LsTghoYX_WA "여러 환경에서 사용할 수 있는 탭 콘텐츠를 포함하도록 페이지 컬렉션을 생성합니다.") 문서를 참조하십시오.

12. 추가를 클릭합니다.
13. 저장을 클릭합니다.
14. 뷰포트 모달을 여는 구성요소를 추가합니다.  
    다음 예제에서는 버튼을 사용하여 뷰포트 모달을 엽니다.

15. 이벤트 탭을 선택합니다.
16. + 이벤트 핸들러 추가를 선택합니다.  
17. 모달 대화 상자 열기 또는 닫기를 선택합니다.
18. 모달 대화 상자 열기를 활성화합니다.
19. 모달 드롭다운에서 생성한 뷰포트 모달을 선택합니다.  
    뷰포트 ID가 자동으로 채워집니다.
20. 추가를 선택합니다.
21. 저장을 선택합니다.
22. ![페이지 변형을 여는 미리 보기 버튼을]()선택하여 페이지를 보고 테스트합니다. .