---
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) 소요 시간: 3분

의 UI 빌더이벤트에서 직접 UI 상호작용을 트리거하면 이벤트 기반 동작을 재사용 가능한 상호작용 논리에 연결할 수 있습니다.

UI 상호작용은 UI 요소와 논리를 단일 단위로 결합하는 재사용 가능한 플로우로, 의 UI 빌더구성요소 이벤트에서 트리거할 수 있습니다. 여러 페이지에서 동일한 배선을 반복하는 것을 방지하고 디자인을 더 쉽게 유지 관리할 수 있도록 도와줍니다.

## UI 상호작용을 사용하는 이유 {#uib-ui-interactions__section_f4z_qgg_yhc}

* 중복 감소: 모든 구성요소에 대해 별도의 작업을 생성하는 대신 플로우를 한 번 정의한 후 재사용합니다.
* 일관성 개선: 상호작용은 여러 페이지 또는 경험에 동일한 동작을 적용합니다.
* 유지관리 간소화: 상호작용에 대한 변경 내용은 사용되는 모든 위치에 자동으로 적용됩니다.

{#uib-ui-interactions__ul_kst_wgg_yhc}  
주:  
장기 실행 프로세스가 있는 기록 기반의 순차적 UI의 경우 을 사용하는 플레이북것이 좋습니다.

## UI 상호작용의 실제 사용 {#uib-ui-interactions__section_an2_c3g_yhc}

* 사용자가 버튼을 선택하면 확인 대화 상자가 트리거됩니다.
* 기록이 저장된 후 경보 메시지 표시
* 확인에 실패하면 모달 내에 양식 뷰 표시
* 데이터 업데이트 및 성공 메시지 표시와 같은 여러 단계를 함께 연결
{#uib-ui-interactions__ul_qc5_33g_yhc}

## UI 상호작용 접근 {#uib-ui-interactions__section_rtk_1rc_cjc}

* 내부 UI 빌더에서 기존 UI 상호작용 목록을 보려면 UI 빌더 홈페이지에서 UI 상호작용 탭을 선택합니다.
* 내에서 UI 상호작용을 작성하려면 다음을 선택합니다.UI 빌더 작성UI 상호작용 UI 빌더 홈페이지에서
* 플랫폼에서 기존 UI 상호작용 목록을 보려면 다음으로 이동하십시오. 모두Now Experience 프레임워크UI 상호작용모두. UI 빌더 UI 상호작용 목록이 표시된 상태로 홈페이지가 열립니다.
* 플랫폼에서 UI 상호작용을 생성하려면 다음으로 이동하십시오. 모두Now Experience 프레임워크UI 상호작용새로 생성. 상호작용 이름, 유형 및 설명을 정의하는 생성 모달이 열립니다 UI 빌더 .
{#uib-ui-interactions__ul_e53_2rc_cjc}

## UI 상호작용 워크플로우 {#uib-ui-interactions__section_ert_33k_23c}

UI 상호작용은 재사용 가능한 사용자 및 시스템 작업 플로우를 정의합니다. 개략적으로 모든 상호작용은 다음과 같이 작동합니다.

1. 입력: UI 상호 작용을 실행하는 데 필요한 구성 가능한 데이터 조각입니다. 지원되는 유형으로는 문자열, 예/아니오, 선택, 참조 및 JSON이 있습니다. 입력은 미리 정의하거나 단계 속성에서 승격할 수 있습니다.
2. 트리거: 구성요소, 선언적 작업 또는 이벤트가 상호작용을 시작하고 입력을 전달합니다.
3. 시작: 하나 이상의 시작 노드가 실행이 시작되는 위치를 결정합니다.
4. 단계: 상호작용은 해당 단계를 순차적으로 실행하며, 선택적으로 이벤트 또는 병렬 및 경로로 분기됩니다.
5. 종료: 실행이 종료 노드에 도달하여 플로우가 완료됩니다.
{#uib-ui-interactions__ol_g3m_k3k_23c}
그림 1. UI 상호작용 워크플로우 예시

## UI 상호작용과 선언적 동작의 차이점 {#uib-ui-interactions__section_er2_zg3_b3c}

선언적 동작은 동작이 나타나는 위치와 시기를 결정하며, 가장 일반적으로 양식이나 목록에 표시됩니다. UI 상호 작용은 발생하는 일을 캡슐화하며 페이지 이벤트 또는 선언적 작업에 의해 트리거될 수 있습니다. 주요 차이점은 다음과 같습니다.

* 선언적 작업은 페이지를 수정할 필요 없이 목록과 양식에 단추를 배치합니다.
* UI 상호작용은 트리거될 때 UI, 논리 및 스크립트의 엔드 투 엔드 동작을 정의합니다.
* 선언적 작업은 UI 상호작용을 트리거할 수 있습니다.
* 선언적 작업은 모달과 같은 UI를 트리거할 때에도 페이지 소유권이나 수정 없이 작동하므로 UXF 클라이언트 작업 대신 UI 상호 작용으로 구현할 수 있습니다.
{#uib-ui-interactions__ul_stq_2h3_b3c}

## UI 상호작용에 대한 트리거 {#uib-ui-interactions__section_mcd_ymg_yhc}

사용 사례에 따라 여러 엔트리포인트에서 UI 상호작용을 실행할 수 있습니다.

* 선언적 작업: 페이지 커스터마이제이션 없이 양식이나 목록에 버튼이 필요한 경우에 이상적입니다.
* UI 빌더 페이지 이벤트: 페이지 내의 버튼, 구성요소 이벤트 또는 사용자 지정 UI 동작에서 상호작용을 트리거합니다.
{#uib-ui-interactions__ul_nrc_f33_b3c}

## UI 상호작용 유형 {#uib-ui-interactions__section_r2y_2hg_yhc}

상호작용을 생성할 때 작동하는 컨텍스트를 결정하는 유형을 선택합니다.

* 일반: 모든 구성요소와 함께 작동
* 양식: 저장, 확인, 스크립팅과 같은 양식별 동작을 위해 설계됨
* 목록: 목록 새로 고침 및 스크립팅과 같은 목록 기반 작업에 맞게 조정됨
{#uib-ui-interactions__ul_gpx_ghg_yhc}

## UI 상호작용 도구 상자 {#uib-ui-interactions__section_gvq_3yl_13c}

이 도구 상자는 다음을 포함하여 UI 상호작용 편집기 내에서 사용할 수 있는 모든 구성 요소를 제공합니다.

* 모달, 모덜리스 대화 상자 및 동적 양식과 같은 UI 요소
* 구성요소 빌더를 사용하는 사용자 지정 구성요소
* 조건, if/else 분기 및 탐색과 같은 논리 단계
* 양식 또는 목록 작업(해당 상호작용 유형에 사용 가능한 경우)
* 클라이언트 및 서버 스크립트 단계
* 데이터 바인딩 입력 및 구성 가능한 속성

{#uib-ui-interactions__ul_d2v_m33_b3c}  
주:  
도구 상자 구성요소는 양식, 목록 또는 일반과 같은 상호작용 유형에 따라 다릅니다.
그림 2. UI 상호작용 도구 상자 예시
* **[UI 상호작용 생성](https://servicenow-prod.fluidtopics.net/xgIc7wOXwYMnDJH4KWmpGQ)**   
  UI 상호작용을 생성하고 에서 구성요소 이벤트 UI 빌더에 첨부합니다. UI 상호작용은 구성요소 빌더로 빌드된 사용자 지정 UI를 포함하여 UI, 논리 및 스크립트를 단일 단위로 결합하는 재사용 가능한 플로우이며 페이지의 모든 구성요소 이벤트에서 트리거될 수 있습니다.
* **[기존 UI 상호작용 편집](https://servicenow-prod.fluidtopics.net/WXUoM5yVskZ8Y3O2rpBMRw)**   
  다이어그램 편집기에서 새 단계를 삽입하거나, 이벤트를 교체 또는 삭제하거나, 단계를 제거하거나, 단계 구성을 업데이트하여 기존 UI 상호작용을 편집하거나 수정합니다.
* **[UI 상호작용 복제](https://servicenow-prod.fluidtopics.net/Ox8kg7lLxEP6HVbwtilxcg)**   
  새 상호작용의 시작점으로 사용하거나 안전하게 변경 사항을 실험하기 위해 기존 UI 상호작용의 독립적인 사본을 만듭니다.
* **[페이지 이벤트에서 UI 상호작용 트리거](https://servicenow-prod.fluidtopics.net/CWza8HMXdnczF3M1hXXPUQ)**   
  사용자가 구성요소에 대한 작업을 수행할 때 상호작용이 실행되도록 UI 상호작용을 페이지 이벤트에 UI 빌더 연결합니다.
* **[UI 상호작용 삭제](https://servicenow-prod.fluidtopics.net/ZRaoHXSpX1wT3gR4XmMzpA)**   
  더 이상 필요하지 않거나 새 버전으로 교체해야 하는 UI 상호작용을 삭제합니다. UI 상호 작용은 만든 후 편집할 수 있지만 일부 기본 속성은 데이터 및 런타임 오류를 방지하기 위해 의도적으로 잠겨 있습니다. 이러한 경우 삭제가 필요할 수 있습니다.
* **[UI 상호작용 도구 상자 단계](https://servicenow-prod.fluidtopics.net/Y6Rn4w5TmSVQiV4SdqUvZw)**   
  상호작용 유형별로 구성된 UI 상호작용 도구 상자 단계에 대한 상세 정보, 단계 설명 및 사용 가능한 발신 이벤트를 찾습니다. UI 상호작용 편집기의 도구 상자를 사용하여 UI 상호작용에 단계가 추가됩니다. 사용 가능한 단계는 UI 상호작용을 만들 때 선택한 유형(일반, 양식 또는 목록)에 따라 다릅니다.
* **[UI 상호작용 데모 데이터로 작업](https://servicenow-prod.fluidtopics.net/xSlEhc8xagt8ztfUA~tyog)**   
  데모 UI 상호작용은 일반적인 UI 상호작용 패턴을 보여주는 간단하고 기성 예제를 제공합니다. 이러한 샘플을 복제하여 상호 작용이 작동하는 방식을 탐색하고, 안전하게 실험하고, 자체 환경을 구축할 때 시작점으로 사용할 수 있습니다.