--- 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) 소요 시간: 8분 의 기본 사항을 UI 빌더 사용하여 내 튜토리얼이라는 페이지를 만드는 방법을 알아봅니다. ## 시작하기 전에 필요한 역할: ui_builder_admin 이 UI 빌더 튜토리얼에서는 다음 작업을 수행하여 [페이지에서 페이지를](https://servicenow-prod.fluidtopics.net/n9UkHaM8My2Hv3gyqpYW0w#gloss-page-ui-builder "열 레이아웃, 열 및 구성요소의 컬렉션입니다. 작업 공간 및 포털 환경을 위해 여러 UI 빌더 페이지를 만들거나 사용자 지정합니다.")UI 빌더빌드합니다. * 시작 UI 빌더. * 작업 공간 또는 사용자 지정 포털 환경에 대한 페이지를 생성합니다. 페이지 생성에 대한 자세한 내용은 다음 문서를 참조하십시오 [UI 빌더에서 페이지 생성](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더"). * 두 개의 열이 있도록 페이지 레이아웃을 변경합니다. 자세한 내용은 [UI 빌더 페이지에서 구성요소 구성](https://servicenow-prod.fluidtopics.net/ibIx7Xs4BeYrEakpGNpkIw "열 레이아웃은 페이지의 구성요소를 구성합니다 UI 빌더 . 에서 열 레이아웃이 어떻게 사용되는지 UI 빌더알아봅니다.") 문서를 참조하십시오. * 두 개의 컨테이너 [구성요소를](https://servicenow-prod.fluidtopics.net/n9UkHaM8My2Hv3gyqpYW0w#gloss-component-ui-builder "구성요소는 UI 빌더에서 페이지를 빌드하는 데 사용됩니다. 구성요소에는 최종 사용자가 보고 상호작용할 수 있는 인터페이스가 있습니다. 구성요소는 이벤트 및 속성을 통해 서로 통신할 수 있습니다. 일반적으로 사용되는 구성 요소에는 제목, 이미지, 목록, 양식 및 버튼이 포함됩니다.") 추가하여 페이지를 빌드합니다. * 콘텐츠 트리에서 컨테이너 구성요소의 이름을 바꿉니다. * 첫 번째 컨테이너에 제목 구성요소와 버튼 구성요소를 추가합니다. 두 번째 컨테이너에 데이터 시각화 구성요소를 추가합니다. 구성요소에 대한 자세한 내용은 다음 문서를 참조하십시오 [구성요소를 사용하여 페이지 사용자 지정 UI 빌더](https://servicenow-prod.fluidtopics.net/KoO4iIq1ZI9eGUIWT4JTrQ "구성요소가 UI 빌더무엇인지 알아봅니다. 또한 UI 빌더 내에서 구성요소가 작동하는 방식도 확인합니다."). * 구성요소를 다음과 같이 구성합니다. * 버튼을 ServiceNow® 웹 사이트에 연결합니다. * 데이터 시각화 구성요소를 데이터 소스에 연결하여 작업 데이터를 표시합니다. 데이터 자원에 대한 자세한 내용은 다음 문서를 참조하십시오 [UI 빌더 페이지에서 데이터를 동적으로 노출(고급 기능)](https://servicenow-prod.fluidtopics.net/ASzkg0RpIjVup5hloNMsRQ "로 빌드UI 빌더하는 페이지와 테이블 및 데이터 간 ServiceNow 데이터를 동기화합니다. 페이지는 동기화된 데이터를 실시간으로 표시하고 사용자가 정보를 입력하면 데이터/테이블을 업데이트합니다."). {#uib-tutorial__ul_yn2_xyq_24b} * 페이지를 자주 저장합니다. * 페이지를 미리 보고 브라우저에서 어떻게 보이는지 확인합니다. {#uib-tutorial__ul_fgz_xhc_24b} ## 프로시저 1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더. 필터 탐색기에UI 빌더를 직접 입력할 수도 있습니다. 2. UI 빌더 홈페이지에서 작업할 환경을 선택합니다. 작업할 경험이 나열되지 않으면 관리자에게 문의하여 경험에 액세스하거나 경험을 생성합니다. 자세한 내용은 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") 문서를 참조하십시오. 3. 페이지를 생성합니다. | 이 작업을 수행하려면 | 수행 방법 | | 페이지 생성 | 1. 페이지 섹션에서 + 아이콘을 선택합니다. ![경험 뷰 페이지의 페이지 생성 버튼입니다.]() 2. 새 페이지 만들기를 선택합니다. 3. 대신 처음부터 새로 생성을 선택하십시오. ![대신 처음부터 새로 생성 버튼.]() 4. 새 페이지의 이름을 입력합니다. 이름은 원하는 것이 될 수 있습니다. 이 예에서는 내 튜토리얼 페이지를 입력할 수 있습니다. 5. 경로 필드에는 페이지 이름을 기준으로 경로가 자동으로 입력됩니다. 이 예에서 경로는 my-tutorial-page입니다. 경로는 페이지의 URL입니다. 이 경로를 원하는 대로 변경할 수 있지만 경로는 고유해야 합니다. 경로는 소문자여야 하며 공백을 포함해서는 안 됩니다. URL 미리 보기에는 페이지의 경로가 표시됩니다. 6. 유형 드롭다운 목록에서 URL 페이지 유형을 선택합니다. URL 페이지 유형은 경험 뷰에서 중요한 페이지를 분류하고 찾는 데 도움이 됩니다. 7. 계속을 선택합니다. 8. (선택 사항) 페이지 URL에 매개변수를 추가합니다. 9. 좋아 보기를 선택합니다. 10. 페이지 변형의 이름을 입력합니다. 이름은 원하는 것이 될 수 있습니다. 이 예에서는 내 첫 페이지 변형을 입력할 수 있습니다. 11. + 대상 추가를 선택하여 페이지 변형의 대상을 추가합니다. 이 예에서는 관리자를 선택합니다. 12. 계속을 선택합니다. 13. 다음 화면에서 응답형 빌드를 선택합니다. 14. 생성을 선택합니다. 15. 페이지가 생성되면 페이지 편집기 화면이 나타납니다. URL 설정 및 변형 설정과 같은 고급 설정을 변경할 수 있습니다. 이 튜토리얼에서는 이러한 고급 옵션을 건너뛸 수 있습니다. 고급 설정 변경에 대한 자세한 내용은 다음 문서를 참조하십시오 [UI 빌더 페이지 생성: 고급 설정](https://servicenow-prod.fluidtopics.net/zIp3eqVhhBAhq5PargLw8g#work-pages__create_page_advanced_settings). {#uib-tutorial__ol_ncw_hms_tjb} | |-|-| {#uib-tutorial__choicetable_n3q_gmd_jjb} 축하합니다! 튜토리얼 페이지를 만들었습니다! 페이지에 콘텐츠가 없습니다. 페이지에 구성요소를 추가하여 페이지를 빌드합니다. 구성요소는 페이지의 구성 요소입니다. UI 빌더 에는 페이지에 추가할 준비가 된 많은 구성요소가 함께 제공됩니다. 구성요소는 제목처럼 단순할 수도 있고 목록처럼 복잡할 수도 있습니다. 4. 페이지의 레이아웃을 2열 레이아웃으로 변경합니다. 레이아웃에 대한 자세한 내용은 다음 문서를 참조하십시오 [UI 빌더 페이지에서 구성요소 구성](https://servicenow-prod.fluidtopics.net/ibIx7Xs4BeYrEakpGNpkIw "열 레이아웃은 페이지의 구성요소를 구성합니다 UI 빌더 . 에서 열 레이아웃이 어떻게 사용되는지 UI 빌더알아봅니다."). | 이 작업을 수행하려면 | 수행 방법 | | 페이지의 레이아웃을 2개의 열로 변경 | 1. 콘텐츠 트리의 본문 수준을 선택하여 페이지를 강조 표시합니다. 2. 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다. 3. 2개 열 레이아웃을 선택합니다. 4. 추가를 선택합니다. 5. 두 열 레이아웃이 나타납니다. {#uib-tutorial__ol_igv_b1x_d4b} | |-|-| {#uib-tutorial__choicetable_hgv_b1x_d4b} 5. 왼쪽 열에 제목 구성요소와 버튼 구성요소를 추가합니다. | 이 작업을 수행하려면 | 수행 방법 | | 왼쪽 열 컨테이너에 제목 구성요소 추가 | 다양한 방법으로 페이지에 구성요소를 추가할 수 있습니다. 페이지에 구성 요소를 추가하는 방법에 대한 자세한 내용은 [표 1을](https://servicenow-prod.fluidtopics.net/KoO4iIq1ZI9eGUIWT4JTrQ#work-components__addcomponentstable) 참조하십시오. 1. 왼쪽 열 중앙에 있는 + 버튼을 선택합니다. 2. 검색 필드에 제목을 입력합니다. 3. 제목 구성요소를 선택하여 컨테이너에 추가합니다. 제목 구성요소는 페이지에 텍스트나 제목을 추가하는 방법입니다. 4. 추가를 선택합니다. 5. 구성 패널에서 구성요소 이름을 선택하여 구성요소 레이블 과 구성요소 ID를 확인합니다. 고유한 항목인 한 원하는 대로 변경할 수 있습니다. 6. 적용을 선택합니다. 7. 제목 구성요소를 구성 합니다 . 구성요소 작성자는 구성요소를 설정하는 데 필요한 적절한 속성을 노출하도록 구성합니다. * 스타일을 헤더 기본으로 설정합니다. 스타일은 글꼴, 두께 및 색상과 같은 제목 텍스트의 클래스를 변경합니다. 예를 들어 헤더 보조를 선택하면 텍스트가 더 작아집니다. 제목 크기가 두 개 있고 두 번째 제목이 기본 제목보다 작아지려는 경우에 유용합니다. * 레이블 필드에 내 튜토리얼을 제목 텍스트로 입력합니다. * 수준을 1로 둡니다. {#uib-tutorial__ul_yc3_dlx_d4b} {#uib-tutorial__ol_r1g_4fl_vnb} | | 왼쪽 열 컨테이너에 버튼 구성요소 추가 및 구성 | 페이지에 버튼 구성요소를 추가합니다. 텍스트와 모양을 변경하여 버튼을 구성합니다. 그런 다음 버튼에 대한 이벤트 핸들러를 추가하여 버튼을 클릭할 때 발생하는 작업을 변경합니다. 이벤트 핸들러는 홈페이지에 연결하는 버튼을 위한 작업을 추가합니다.ServiceNow® 따라서 버튼을 ServiceNow® 클릭하면 브라우저의 새 탭에서 홈페이지가 열립니다. 구성요소 구성에 대한 자세한 정보는 [구성요소를 참조하십시오](https://developer.servicenow.com/dev.do#!/reference/now-experience/sandiego/components). 1. 이전 섹션에서 추가한 제목 구성요소의 하단 가장자리에 있는 + 를 선택합니다. 2. 검색 필드에 Button 을 입력합니다. 3. 목록에서 버튼 구성요소를 선택합니다. 페이지에 구성요소를 추가하는 방법에 대한 자세한 내용은 [표 1을](https://servicenow-prod.fluidtopics.net/KoO4iIq1ZI9eGUIWT4JTrQ#work-components__addcomponentstable) 참조하십시오. 4. 구성 패널에서 구성요소 이름을 선택하여 구성요소 레이블 과 구성요소 ID를 확인합니다. 고유한 항목인 한 원하는 대로 변경할 수 있습니다. 5. 버튼 구성요소를 다음과 같이 구성합니다. * 레이블 필드에 홈페이지를 입력하여 버튼의 이름을 변경합니다. * 크기를 크게 변경합니다. * 아이콘 검색 필드에 home을 입력합니다. * 홈 개요를 선택합니다. {#uib-tutorial__ul_gxl_w1x_g4b} 6. 이벤트 핸들러를 추가하여 버튼에 적용되는 작업을 구성합니다. * 구성 패널에서 이벤트 탭을 선택합니다. * 버튼 클릭됨에서 + 새 이벤트 처리기 추가를 선택합니다. * 상속된 이벤트 핸들러에서 대상에 대한 링크를 선택합니다. * 대상 선택을 클릭합니다. * 대상 선택 화면에서 외부 URL을 선택합니다. * URL을 입력합니다. 이 튜토리얼에서는 https://www.servicenow.com확인 선택을 입력합니다. * 추가를 선택합니다. 이벤트 핸들러에 대한 자세한 내용은 다음 문서를 참조하십시오 [UI 빌더 페이지에서 작업 관리](https://servicenow-prod.fluidtopics.net/kFinM_ToXsMo~CFX4Z_P_g "에서 구성요소, 페이지, 데이터 자원 및 선언적 작업에 UI 빌더작업을 추가할 수 있도록 이벤트를 사용하는 방법에 대해 알아봅니다."). {#uib-tutorial__ul_crn_zxd_24b} 7. 저장을 선택합니다. 작업할 때 페이지를 자주 저장하는 것이 좋습니다. 8. 미리 보기를 선택합니다. 9. 이전 단계에서 생성한 버튼을 테스트합니다. {#uib-tutorial__ol_nvw_kwd_24b} | |-|-| {#uib-tutorial__choicetable_q1g_4fl_vnb} 페이지에 대한 제목 및 버튼 구성요소를 추가하고 구성했습니다. 6. 컨테이너에 데이터 시각화 구성요소를 추가합니다. 데이터 시각화 구성요소에는 시각적으로 표시하는 데이터가 포함되어 있습니다. 데이터 시각화 구성요소 매개변수를 구성합니다. 그런 다음 데이터 자원을 추가합니다. | 이 작업을 수행하려면 | 수행 방법 | | 오른쪽 열 컨테이너에 데이터 시각화 구성요소 추가 및 구성 | 다양한 방법으로 페이지에 구성요소를 추가할 수 있습니다. 페이지에 구성 요소를 추가하는 방법에 대한 자세한 내용은 [표 1을](https://servicenow-prod.fluidtopics.net/KoO4iIq1ZI9eGUIWT4JTrQ#work-components__addcomponentstable) 참조하십시오. 1. 오른쪽 열 중앙에 있는 + 버튼을 선택합니다. 2. 검색 필드에 데이터 시각화 구성요소가 보일 때까지 데이터 시각화를 입력한 다음, 구성요소를 선택하여 페이지에 추가합니다. 3. 구성 패널에서 구성요소 이름을 선택하여 구성요소 레이블 과 구성요소 ID를 확인합니다. 고유한 항목인 한 원하는 대로 변경할 수 있습니다. 4. 데이터 시각화 구성요소에 데이터 자원을 추가하여 고객 계정 데이터를 가져옵니다. * 데이터 시각화 구성요소를 선택한 다음 구성 탭을 선택합니다. * 데이터 소스 추가를 선택합니다. * 검색 필드에 작업 [task]을 입력하고 인스턴스 UI 빌더 에서 사용할 수 있는 작업을 찾습니다. * 이 소스 추가를 선택합니다. {#uib-tutorial__ul_wrt_122_24b} 5. 데이터 시각화 유형 드롭다운을 선택하고 다이얼을 선택합니다. 데이터에 가장 적합한 다양한 시각화 유형을 선택할 수 있습니다. 6. 구성 패널에서 헤더 및 테두리 를 선택합니다. 7. 차트 제목 필드에 내 작업을 입력합니다. {#uib-tutorial__ol_k31_whl_vnb} | |-|-| {#uib-tutorial__choicetable_j31_whl_vnb} 오른쪽 열에 데이터 시각화 구성요소를 추가하고 구성했습니다. 또한 고객 계정 데이터를 가져오기 위해 데이터 자원을 추가했습니다. 7. 마지막으로 새 페이지를 저장합니다. | 이 작업을 수행하려면 | 수행 방법 | | 페이지 저장 | 1. 의 맨 오른쪽 모서리 UI 빌더에서 저장을 선택합니다. 2. 이제 페이지를 저장했으므로 언제든지 환경에서 액세스할 수 있습니다. {#uib-tutorial__ol_nd1_c5m_vnb} | |-|-| {#uib-tutorial__choicetable_md1_c5m_vnb} 8. 이제 페이지를 미리 보고 브라우저에서 어떻게 보이는지 확인하십시오. | 이 작업을 수행하려면 | 수행 방법 | | 페이지 미리 보기 | 1. 헤더에서 미리 보기를 선택합니다.UI 빌더 2. 페이지의 왼쪽 열에 있는 제목을 참조하십시오. 3. 홈페이지 버튼을 선택합니다. 홈페이지가 ServiceNow® 다른 브라우저 탭에서 열립니다. 브라우저 탭을 닫고 미리 보기 페이지로 돌아갑니다. 4. 페이지의 오른쪽 열에서 고객 계정 데이터 시각화를 참조하십시오.그림 1. 튜토리얼 페이지 미리 보기 {#uib-tutorial__ol_dyg_qg2_24b} | |-|-| {#uib-tutorial__choicetable_cyg_qg2_24b} 축하합니다! 튜토리얼을 완료했습니다 UI 빌더 . ## 결과 1. 에서 페이지를 생성했습니다 UI 빌더. 2. 페이지 레이아웃이 두 개의 열로 변경되었습니다. 3. 왼쪽 열에 제목 구성요소를 제목으로 추가했습니다. * 제목의 텍스트를 변경했습니다. * 제목의 레이블을 변경했습니다. {#uib-tutorial__ul_osc_jcr_24b} 4. 제목 구성요소 아래에 버튼 구성요소를 추가했습니다. * 버튼이 구성되었습니다. * 버튼에 대한 이벤트 핸들러를 추가했습니다. * 웹 페이지에 대한 링크를 설정하는 이벤트 핸들러를 추가했습니다. 버튼을 클릭하면 웹 페이지가 열립니다. {#uib-tutorial__ul_hdx_kcr_24b} 5. 오른쪽 열의 레이블을 변경했습니다. 6. 데이터 시각화 구성요소를 추가했습니다. * 데이터 시각화 구성요소를 구성했습니다. * 작업 데이터를 가져오는 데이터 자원을 추가했습니다. {#uib-tutorial__ul_twx_qcr_24b} 7. 새 페이지를 저장했습니다. 8. 페이지를 미리 보았습니다. {#uib-tutorial__ol_pbw_tvm_vnb}