--- 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 --- # UI 빌더 페이지에 탭 콘텐츠 추가 # UI 빌더 페이지에 탭 콘텐츠 추가 {#ariaid-title1} * 릴리스 버전: Australia * * 업데이트 날짜 2026년 03월 12일 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 7분 탭 구성요소를 사용하여 의 페이지에 UI 빌더탭 콘텐츠를 추가합니다. 페이지에 탭 구성요소를 추가하여 페이지에서 추가 탐색 UI 빌더 을 생성합니다. 탭 구성요소를 사용하여 페이지의 탭 내에 구성요소를 중첩합니다. 탭은 컨텐츠 상단의 가로 탭 또는 컨텐츠의 왼쪽 또는 오른쪽에 세로 탭으로 구성할 수 있습니다. 구성 패널에서 탭을 구성하여 페이지에 탭이 표시되는 방식을 재정렬할 수 있습니다.UI 빌더 탭에 사용자 지정 레이블과 아이콘을 추가하여 탭을 탐색할 때 고유한 시각적 식별자를 제공합니다. 이러한 변경 사항은 탭 구성요소를 편집할 때 실시간으로 볼 수 있습니다. 다음 유형의 탭 중 하나를 페이지에 추가할 수 있습니다 UI 빌더 . * 빈 컨테이너 탭 * [반복자](https://servicenow-prod.fluidtopics.net/n9UkHaM8My2Hv3gyqpYW0w#gloss-repeater-ui-builder "UI 빌더에서 반복자는 여러 구성요소에서 제공하는 데이터를 반복하는 기본 루프 역할을 하는 구성요소입니다. 반복자는 배열 또는 객체 배열을 사용합니다. 반복자는 값을 데이터 배열 속성에 바인딩합니다. 예를 들어, [{\"task\": \"A\"},{\"task\": \"B\"}]는 그 안의 콘텐츠를 두 번 반복합니다.") 탭 * 관련 목록 탭 * 페이지 모음 탭 {#tabs-components__ul_anm_nst_c5b} 탭 구성요소는 정적 탭, 반복 탭, 관련 목록 탭 및 페이지 모음 탭의 조합을 지원합니다. 또는 뷰포트 탭 모드를 사용하여 일련의 뷰포트를 추가할 수 있습니다. ## 빈 컨테이너 탭 추가 {#ariaid-title2} 빈 컨테이너 탭을 사용하여 페이지에 정적 탭 세트를 수동으로 생성합니다. ### 시작하기 전에 필요한 역할: 관리자 ### 프로시저 1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더. 2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험. 경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") . 3. 페이지 또는 페이지 변형을 만들거나 엽니다. 에서 페이지를 UI 빌더생성하는 방법에 대한 자세한 내용은 [UI 빌더에서 페이지 만들기](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더")를 참조하십시오. 4. 스테이지에서 + 콘텐츠 추가 버튼을 선택하여 도구 상자를 엽니다. 5. 단일 열 레이아웃을 선택합니다. 6. 그런 다음 열에서 + 아이콘을 선택하여 도구 상자를 엽니다. 7. 페이지에 탭 구성요소를 추가합니다. 페이지에 구성요소를 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 [구성요소 추가 및 구성](https://servicenow-prod.fluidtopics.net/qmxQoGzAEcZmJDRXYpo1aw#add-components "에서 페이지에 UI 빌더구성요소를 추가하는 방법에 대해 알아봅니다. 구성요소를 추가하여 페이지가 빌드됩니다."). 8. 스테이지에서 + 추가 탭 을 선택합니다. 9. 빈 컨테이너에서 시작을 선택합니다. 10. 다음을 선택합니다. 11. 양식에서 필드를 채웁니다. {#add-a-tab-component__table_usy_s1c_wtb__entry__2} | 필드 | 설명 | |-|-| | 탭 레이블 | 페이지에 표시할 탭의 레이블입니다. | | 아이콘 | 탭 레이블 옆에 표시할 아이콘입니다. 아이콘은 필요하지 않습니다. | | 탭 숨기기 | 탭을 숨길지 표시할지 여부입니다. | [표 1. 탭 설정 양식] {#add-a-tab-component__table_usy_s1c_wtb} 12. 생성을 선택합니다. 새 탭이 탭 구성요소에 표시됩니다. 13. 새 탭을 선택합니다. 14. + 아이콘을 선택합니다. 15. 탭에 추가할 구성요소를 선택합니다. 구성요소는 콘텐츠 트리에서 중첩된 탭 아래에 표시됩니다. 자세한 내용은 [구성요소 추가 및 구성](https://servicenow-prod.fluidtopics.net/qmxQoGzAEcZmJDRXYpo1aw#add-components "에서 페이지에 UI 빌더구성요소를 추가하는 방법에 대해 알아봅니다. 구성요소를 추가하여 페이지가 빌드됩니다.") 문서를 참조하십시오. ### 결과 페이지에 생성한 두 개의 탭이 표시됩니다. 각 탭을 선택하여 추가로 구성하거나, 스타일을 추가하거나, 이벤트 핸들러를 추가합니다. 스타일링에 대한 자세한 내용은 다음 문서를 참조하십시오 [구성요소의 기본 모양 변경](https://servicenow-prod.fluidtopics.net/kilGIHyzxaHf63k4TCWtpA#add-styling-to-component "구성요소 및 래퍼의 스타일을 설정하여 기본 모양을 변경합니다."). 이벤트 핸들러 추가에 대한 자세한 내용은 다음 문서를 참조하십시오 [UI 빌더 페이지에서 작업 관리](https://servicenow-prod.fluidtopics.net/kFinM_ToXsMo~CFX4Z_P_g "에서 구성요소, 페이지, 데이터 자원 및 선언적 작업에 UI 빌더작업을 추가할 수 있도록 이벤트를 사용하는 방법에 대해 알아봅니다."). ## 반복자 탭 추가 {#ariaid-title3} 탭 구성요소를 사용하여 탭을 데이터 배열에 연결하여 반복자 탭 세트를 만듭니다. ### 시작하기 전에 필요한 역할: 관리자 ### 이 태스크 정보 [반복자](https://servicenow-prod.fluidtopics.net/n9UkHaM8My2Hv3gyqpYW0w#gloss-repeater-ui-builder "UI 빌더에서 반복자는 여러 구성요소에서 제공하는 데이터를 반복하는 기본 루프 역할을 하는 구성요소입니다. 반복자는 배열 또는 객체 배열을 사용합니다. 반복자는 값을 데이터 배열 속성에 바인딩합니다. 예를 들어, [{\"task\": \"A\"},{\"task\": \"B\"}]는 그 안의 콘텐츠를 두 번 반복합니다.") 탭을 사용하여 사용자가 제공한 데이터 배열을 기반으로 여러 탭을 생성할 수 있습니다. 아이콘, 레이블, 카운트 및 필드를 객체의 키로 전달할 수 있습니다. 레이블 키를 사용하여 탭에 이름을 추가합니다. 필드 키를 사용하여 정보를 반복자 탭으로 전달합니다. 데이터 브로커, 클라이언트 상태 또는 클라이언트 스크립트를 데이터 배열 공급자에 바인딩하여 올바른 스키마를 사용하여 객체 배열을 반환할 수 있습니다. ### 프로시저 1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더. 2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험. 경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") . 3. 페이지 또는 페이지 변형을 만들거나 엽니다. 에서 페이지를 UI 빌더생성하는 방법에 대한 자세한 내용은 [UI 빌더에서 페이지 만들기](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더")를 참조하십시오. 4. 스테이지에서 + 콘텐츠 추가 버튼을 선택하여 도구 상자를 엽니다. 5. 단일 열 레이아웃을 선택합니다. 6. 그런 다음 열에서 + 아이콘을 선택하여 도구 상자를 엽니다. 7. 페이지에 탭 구성요소를 추가합니다. 페이지에 구성요소를 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 [구성요소 추가 및 구성](https://servicenow-prod.fluidtopics.net/qmxQoGzAEcZmJDRXYpo1aw#add-components "에서 페이지에 UI 빌더구성요소를 추가하는 방법에 대해 알아봅니다. 구성요소를 추가하여 페이지가 빌드됩니다."). 8. 스테이지에서 + 추가 탭 을 선택합니다. 9. 반복자 사용을 선택합니다. 10. 다음을 선택합니다. 11. 자리 표시자 탭 레이블 필드에 반복자 탭의 레이블을 입력합니다. 이 레이블은 첫 번째 반복자 탭에 할당되며 페이지 미리 보기에 표시되는 유일한 탭입니다. 12. 데이터 배열 필드에서 편집을 선택합니다. 13. JSON 편집기에서 데이터 배열을 구성합니다. {#add-repeater-tab__table_spf_5sb_5kb__entry__3} | 키 | 데이터 유형 | 설명 | |-|-|-| | 아이콘 | 문자열 | 에 나타나는 아이콘의 이름입니다 UI 빌더. | | 레이블 | 문자열 | 필수입니다. 에 있는 UI 빌더탭의 표시 이름입니다. | | 카운트 | 번호 | 탭 레이블에 제공할 값입니다. 레이블에 표시될 데이터 브로커 또는 클라이언트 스크립트에 동적으로 바인딩합니다. | | 필드 | 객체 | 정보를 저장하고 탭의 구성요소에 전달하는 데 사용할 수 있는 객체입니다. | [ ] {#add-repeater-tab__table_spf_5sb_5kb} 14. 적용을 선택합니다. 데이터 배열 필드에 데이터 배열 구성이 표시됩니다. 15. 생성을 선택합니다. 새 반복자 탭 이 페이지와 컨텐츠 트리에 나타납니다 . 16. 저장을 선택합니다. 17. 반복자 탭에 구성요소를 추가합니다. 18. ![웹 페이지에서 페이지가 어떻게 보이는지에 대한 미리 보기인 런타임 시 페이지를 여는 미리 보기 버튼을 선택합니다.]() 반복자 탭이 페이지에 올바르게 표시되는지 확인합니다. ## 관련 목록 탭 추가 {#ariaid-title4} 관련 목록에 연결하여 페이지에서 탭 세트를 생성합니다. ### 시작하기 전에 필요한 역할: 관리자 ### 이 태스크 정보 관련 목록 탭은 페이지가 표시하는 기록에 따라 탭을 자동으로 채웁니다. 예를 들어 기본적으로 사용자 테이블의 관련 목록은 역할, 그룹, 위임자 및 가시성 도메인입니다. 페이지에 사용자 기록이 표시되는 경우 관련 목록 탭을 생성하면 이러한 관련 목록 4개가 모두 페이지에 탭으로 추가됩니다. 페이지를 미리 보고 추가된 관련 목록을 볼 수 있습니다. 관련 목록 탭을 생성하려면 기록 컨트롤러가 필요합니다. 페이지에 컨트롤러를 추가하려면 자세한 내용을 참조하십시오 [컨트롤러를 사용하여 페이지에 데이터 UI 빌더 바인딩(고급 기능)](https://servicenow-prod.fluidtopics.net/wIbnFzA0pLWFSK5Gpe1N5Q#controllers "컨트롤러는 데이터 및 이벤트 논리의 연결을 단순화하여 에서 구성요소 사전 설정을 UI 빌더활성화합니다.") . ### 프로시저 1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더. 2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험. 경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") . 3. 페이지 또는 페이지 변형을 만들거나 엽니다. 에서 페이지를 UI 빌더생성하는 방법에 대한 자세한 내용은 [UI 빌더에서 페이지 만들기](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더")를 참조하십시오. 4. 스테이지에서 + 콘텐츠 추가 버튼을 선택하여 도구 상자를 엽니다. 5. 단일 열 레이아웃을 선택합니다. 6. 그런 다음 열에서 + 아이콘을 선택하여 도구 상자를 엽니다. 7. 페이지에 탭 구성요소를 추가합니다. 페이지에 구성요소를 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 [구성요소 추가 및 구성](https://servicenow-prod.fluidtopics.net/qmxQoGzAEcZmJDRXYpo1aw#add-components "에서 페이지에 UI 빌더구성요소를 추가하는 방법에 대해 알아봅니다. 구성요소를 추가하여 페이지가 빌드됩니다."). 8. 스테이지에서 + 추가 탭 을 선택합니다. 9. 기록에 대한 관련 목록 표시를 선택합니다. 10. 다음을 선택합니다. 11. 양식에서 필드를 채웁니다. {#add-related-list-tab__table_usy_s1c_wtb__entry__2} | 필드 | 설명 | |-|-| | 자리 표시자 탭 레이블 | 페이지의 미리 보기 탭에 표시할 자리 표시자 레이블입니다. | | 탭 숨기기 | 탭을 숨기거나 표시할지 여부입니다. | | 기록 컨트롤러 | 관련 목록이 있는 기록 컨트롤러입니다. | [표 2. 탭 설정 양식] {#add-related-list-tab__table_usy_s1c_wtb} 12. 생성을 선택합니다. 새 관련 목록 탭이 구성 패널의 탭 섹션에 표시됩니다. 페이지 미리 보기에는 하나의 자리 표시자 탭만 나타납니다. 컨텐츠 트리의 관련 목록 탭 옆에 있는 녹색 아이콘은 페이지에 표시되는 탭 수를 보여줍니다. 13. 저장을 선택합니다. 14. 웹 ![페이지에서 페이지가 어떻게 보이는지에 대한 미리 보기인 런타임 시 페이지를 여는 미리 보기 버튼을]()선택하여 페이지를 보고 테스트합니다. ## 페이지 모음 탭 추가 {#ariaid-title5} 페이지 모음 탭을 사용하여 의 UI 빌더여러 페이지에서 동일한 탭을 다시 만듭니다. ### 시작하기 전에 필요한 역할: 관리자 ### 이 태스크 정보 페이지 컬렉션은 전역적으로 사용 가능한 미리 빌드된 페이지 그룹입니다. 페이지 컬렉션 탭을 사용하여 페이지 컬렉션의 각 페이지를 탭으로 렌더링합니다. 기존 페이지 컬렉션을 선택하거나 직접 만들 수 있습니다. 페이지 컬렉션을 추가하려면 컨트롤러가 필요합니다. 페이지 컬렉션에 대한 자세한 내용은 다음 문서를 참조하십시오 [페이지 수집](https://servicenow-prod.fluidtopics.net/WjKXDV_yFoG9TyXZwgHtNQ "페이지 컬렉션은 여러 환경에서 사용할 수 있는 페이지 그룹입니다."). ### 프로시저 1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더. 2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험. 경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") . 3. 페이지 또는 페이지 변형을 만들거나 엽니다. 에서 페이지를 UI 빌더생성하는 방법에 대한 자세한 내용은 [UI 빌더에서 페이지 만들기](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더")를 참조하십시오. 4. 스테이지에서 + 콘텐츠 추가 버튼을 선택하여 도구 상자를 엽니다. 5. 단일 열 레이아웃을 선택합니다. 6. 그런 다음 열에서 + 아이콘을 선택하여 도구 상자를 엽니다. 7. 페이지에 탭 구성요소를 추가합니다. 페이지에 구성요소를 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 [구성요소 추가 및 구성](https://servicenow-prod.fluidtopics.net/qmxQoGzAEcZmJDRXYpo1aw#add-components "에서 페이지에 UI 빌더구성요소를 추가하는 방법에 대해 알아봅니다. 구성요소를 추가하여 페이지가 빌드됩니다."). 8. 스테이지에서 + 추가 탭 을 선택합니다. 9. 페이지 컬렉션 추가를 선택합니다. 10. 다음을 선택합니다. 11. 목록에서 페이지 컬렉션을 선택하거나 + 컬렉션 생성을 선택하여 컬렉션을 생성합니다. 고유한 페이지 컬렉션을 생성하려면 다음 문서를 참조하십시오 [여러 UI 페이지에서 페이지 컬렉션 생성](https://servicenow-prod.fluidtopics.net/dd~XWA0wae6LsTghoYX_WA "여러 환경에서 사용할 수 있는 탭 콘텐츠를 포함하도록 페이지 컬렉션을 생성합니다."). 12. 추가를 선택합니다. 새 페이지 모음 탭이 구성 패널의 탭 섹션에 표시됩니다. 페이지 미리 보기에는 하나의 자리 표시자 탭만 표시됩니다. 13. 저장을 선택합니다. 14. ![페이지 변형을 여는 미리 보기 버튼을]()선택하여 페이지를 보고 테스트합니다. .