---
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 페이지 API

# UI 페이지 API - ServiceNow Fluent {#ariaid-title1}

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

UI 페이지 API는 양식, 대화 상자, 목록 및 기타 UI 구성요소를 표시하는 사용자 지정 사용자 인터페이스(UI) 페이지\[sys_ui_page\]를 정의합니다.
주:  
최신 ServiceNow Fluent API 설명서 및 예제는 [ServiceNow Fluent API 참조](https://servicenow.github.io/sdk/) 및 [ServiceNow SDK 예제 리포지토리](https://github.com/ServiceNow/sdk-examples) 는 의 위치에 있습니다 GitHub.

UI 페이지는 웹 페이지로 표시되며 대시보드에서 사용하기 위해 위젯에 추가할 수 있습니다. UI 페이지에 대한 일반적인 정보는 다음 문서를 참조하십시오 [UI pages](https://www.servicenow.com/docs/access?context=r_UIPages&version=australia&pubname=australia-api-reference&ft:locale=en-US).

UI 페이지 API를 사용하여 간단한 React 애플리케이션을 개발할 수 있습니다. src/client 디렉터리에서 페이지의 HTML, 클라이언트 스크립트 및 스타일을 정의하는 정적 컨텐츠 파일을 추가합니다. UiPage 객체에서 페이지의 HTML 엔트리포인트(index.html)를 참조합니다. 자세한 내용은 [React를 사용한 사용자 인터페이스 개발](https://servicenow-prod.fluidtopics.net/nx2cZLNjdE0BhQIwYNhnyw "React 라이브러리로 사용자 인터페이스(UI)를 개발하여 소스 코드로 전체 스택 애플리케이션을 빌드합니다.") 문서를 참조하십시오.
**관련 개념**   

* [ServiceNow Fluent](https://servicenow-prod.fluidtopics.net/LkgjsL6Ogxn6hUPsJ73QXQ "도메인별 프로그래밍 언어를 사용하여 소스 코드에서 애플리케이션 메타데이터를 정의합니다.ServiceNow Fluent")

## UiPage 객체 {#ariaid-title2}

사용자 지정 사용자 인터페이스용 UI 페이지 \[sys_ui_page\]를 만듭니다.
{#fluent-ui-page-object__table_qyv_1pj_4fc__entry__3}{#fluent-ui-page-object__now-id-desc2}

| 이름 | 유형 | 설명 |
|-|-|-|
| $id | 문자열 또는 숫자 | 필수 메타데이터 객체의 고유 ID입니다. 애플리케이션을 빌드할 때 이 ID는 고유한 sys_id으로 해시됩니다. 자세한 내용은 [ServiceNow Fluent 언어 구성](https://servicenow-prod.fluidtopics.net/bd4_Ogu8TJjhKosNwonOfw "ServiceNow Fluent 언어 구문은 API를 사용하여 ServiceNow Fluent 소스 코드에서 개발하기 위한 추가 기능을 제공합니다.") 문서를 참조하십시오. 형식: `Now.ID['문자열' 또는 숫자]` |
| 엔드포인트 | 문자열 | 필수 웹 페이지에 액세스하기 위한 엔드포인트입니다. 엔드포인트 값에는 공백을 포함할 수 없습니다. 형식: `<scope>_<ui_page_name>.do` |
| 설명 | 문자열 | 사용자 인터페이스와 그 용도에 대한 설명입니다. |
| 직접 | 부울 | UI 페이지에 대해 표준 HTML, CSS 및 JavaScript를 생략할지 여부를 나타내는 플래그입니다. React UI 페이지의 경우 이 속성을 예로 설정합니다`.` 유효한 값은 다음과 같습니다. * true: 표준 HTML, CSS 및 JavaScript를 생략하고 페이지에 사용자 지정 CSS와 JavaScript를 제공합니다. * false: 표준 HTML, CSS 및 JavaScript를 포함합니다. {#fluent-ui-page-object__ul_hvk_4hr_4fc} 기본값: false |
| HTML | 문자열 | 페이지가 표시될 때 렌더링되는 내용을 정의하는 본문 HTML 코드입니다. 여기에는 정적 XHTML, Jelly로 정의된 동적으로 생성된 콘텐츠 또는 호출 스크립트 포함 및 UI 매크로가 포함될 수 있습니다. 이 속성은 React 개발을 위해 index.html 파일을 임포트하는 별칭, HTML이 포함된 애플리케이션의 다른 파일에 대한 참조 또는 인라인 JavaScript를 지원합니다. 주: React 개발 및 가져온 HTML에서 UiPage 객체의 html 속성은 단방향 동기화만 지원합니다. 소스 코드에서 UI 페이지의 HTML을 정의한 후 소스 코드 외부에서 HTML을 수정하면 해당 변경 내용이 동기화되지 않고 소스 코드에 반영되지 않습니다. 체재: * React를 사용한 UI 개발을 위해 이전 빌드에서 index.html 파일을 임포트하는 별칭입니다. 별칭은 임의의 값이 될 수 있으며 UiPage 객체가 포함된 now.ts 파일에서도 가져와야 합니다. import `<alias> from 'path/to/index.html'.` * 다른 파일의 텍스트 콘텐츠를 사용하려면 `Now.include('경로/대상/파일')` 형식을 사용하여 애플리케이션에서 파일을 참조합니다. 자세한 내용은 [ServiceNow Fluent 언어 구성](https://servicenow-prod.fluidtopics.net/bd4_Ogu8TJjhKosNwonOfw "ServiceNow Fluent 언어 구문은 API를 사용하여 ServiceNow Fluent 소스 코드에서 개발하기 위한 추가 기능을 제공합니다.") 문서를 참조하십시오. * 인라인 HTML을 제공하려면 여러 줄의 코드에 대해 문자열 리터럴 또는 템플릿 리터럴을 사용합니다( `'HTML' 또는 'HTML'`). {#fluent-ui-page-object__ul_rtr_vyd_1gc} |
| 범주 | 문자열 | UI 페이지의 유형입니다. 유효한 값은 다음과 같습니다. * 일반: 페이지는 범용입니다. * 홈페이지: 이 페이지는 홈페이지로 사용됩니다. * htmleditor: 페이지는 HTML 컨텐츠를 삽입하는 데 사용됩니다. * kb: 페이지는 지식베이스. * cms: 페이지는 콘텐츠 관리 시스템(CMS)과 함께 사용됩니다. * catalog: 페이지는 와 함께 서비스 카탈로그사용됩니다. {#fluent-ui-page-object__ul_g1x_fjr_4fc} |
| 클라이언트 스크립트 | 스크립트 | 버튼으로 호출되는 함수와 같이 브라우저에서 실행되는 스크립트입니다. 이 스크립트는 페이지가 로드된 후 필드 또는 기타 대화형 DHTML 기능에 포커스를 설정하는 등 필요한 클라이언트 측 처리를 처리합니다. 이 속성은 인라인 JavaScript 또는 스크립트가 포함된 애플리케이션의 다른 파일에 대한 참조를 지원합니다. UI 페이지에 대한 클라이언트 스크립트는 `]]> 태그 내에<![CDATA[<script>` 브라우저에 배포되므로 HTML 필드 내에서 컨텐츠를 유사하게 정의할 수 있습니다. 대신 clientScript 속성을 사용하여 이러한 스크립트를 간결하게 정의하여 Jelly 및 HTML 관리 용이성을 유지할 수 있습니다. 체재: * 다른 파일의 텍스트 콘텐츠를 사용하려면 `Now.include('경로/대상/파일')` 형식을 사용하여 애플리케이션에서 파일을 참조합니다. 자세한 내용은 [ServiceNow Fluent 언어 구성](https://servicenow-prod.fluidtopics.net/bd4_Ogu8TJjhKosNwonOfw "ServiceNow Fluent 언어 구문은 API를 사용하여 ServiceNow Fluent 소스 코드에서 개발하기 위한 추가 기능을 제공합니다.") 문서를 참조하십시오. * 인라인 스크립트를 제공하려면 여러 줄의 코드에 문자열 리터럴 또는 템플릿 리터럴을 사용합니다( `'Script' 또는 'Script'`). {#fluent-ui-page-object__ul_zr2_zvg_5fc} |
| 처리 중인 스크립트 | 스크립트 | 페이지가 제출될 때 서버에서 실행되는 스크립트로, 페이지에 `<g:ui_form/>` 또는 `<g:form/>` 태그로 정의된 양식이 있는 경우에 유용합니다. 이 속성은 JavaScript 모듈의 함수, 스크립트가 포함된 애플리케이션의 다른 파일에 대한 참조 또는 인라인 JavaScript를 지원합니다. 체재: * 함수의 경우 JavaScript 모듈에서 익스포트한 함수, 함수 표현식 또는 기본 함수의 이름을 사용하여 .now.ts 파일로 임포트합니다. JavaScript 모듈에 대한 자세한 내용은 다음 문서를 참조하십시오 [JavaScript 모듈 및 타사 라이브러리](https://servicenow-prod.fluidtopics.net/BgHqCmt1oAyXsb0oVdi_9Q "JavaScript 모듈을 사용하여 코드 베이스를 최적화하고 관련 코드를 그룹화하거나 타사 라이브러리를 추가하고 애플리케이션 내에서 코드를 재사용합니다.").{#fluent-ui-page-object__script-function} * 다른 파일의 텍스트 콘텐츠를 사용하려면 `Now.include('경로/대상/파일')` 형식을 사용하여 애플리케이션에서 파일을 참조합니다. 자세한 내용은 [ServiceNow Fluent 언어 구성](https://servicenow-prod.fluidtopics.net/bd4_Ogu8TJjhKosNwonOfw "ServiceNow Fluent 언어 구문은 API를 사용하여 ServiceNow Fluent 소스 코드에서 개발하기 위한 추가 기능을 제공합니다.") 문서를 참조하십시오. * 인라인 스크립트를 제공하려면 여러 줄의 코드에 문자열 리터럴 또는 템플릿 리터럴을 사용합니다( `'Script' 또는 'Script'`). {#fluent-ui-page-object__d2794e479} |
| $meta | 객체 | 애플리케이션 메타데이터의 메타데이터입니다. installMethod 속성을 사용하면 애플리케이션 메타데이터를 특정 상황에서만 로드되는 출력 디렉터리에 매핑할 수 있습니다. $meta: { installMethod: 'String' } installMethod에 유효한 값: * demo: 데모 데이터 로드 옵션을 선택한 경우 애플리케이션과 함께 설치할 metadata/unload.demo 디렉터리에 애플리케이션 메타데이터를 출력합니다. * 첫 번째 설치: 애플리케이션이 인스턴스에 처음 설치될 때만 설치할 메타데이터 /언로드 디렉터리에 애플리케이션 메타데이터를 출력합니다. {#fluent-ui-page-object__ul_n3q_y3s_42c} |
[표 1. 속성]

{#fluent-ui-page-object__table_qyv_1pj_4fc}  
React를 사용한 UI 개발의 이 예제에서 페이지의 HTML은 src/client 디렉토리의 index.html 파일에서 가져옵니다.

    //incident-manager.now.ts
    import '@servicenow/sdk/global'
    import { UiPage } from '@servicenow/sdk/core'
    import incidentPage from '../../client/index.html'

    UiPage({
        $id: Now.ID['incident-manager-page'],
        endpoint: '<scope>_incident_manager.do',
        description: 'Incident Response Manager UI Page',
        category: 'general',
        html: incidentPage,
        direct: true,
    })

index.html 파일에서 `]]> 태그는<![CDATA[<script>` 구성 요소 코드가 포함된 src/client 디렉터리의 main.jsx 파일을 참조합니다.

    //index.html
    <html>
    <head>
      <title>Incident Response Manager</title>

      <!-- Initialize globals and Include ServiceNow's required scripts -->
      <sdk:now-ux-globals></sdk:now-ux-globals>

      <!-- Include your React entry point -->
      <script src="./main.jsx" type="module"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    </html>