UI 상호작용 생성

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 3분
  • UI 상호작용을 생성하고 에서 구성요소 이벤트 UI 빌더에 첨부합니다. UI 상호작용은 구성요소 빌더로 빌드된 사용자 지정 UI를 포함하여 UI, 논리 및 스크립트를 단일 단위로 결합하는 재사용 가능한 플로우이며 페이지의 모든 구성요소 이벤트에서 트리거될 수 있습니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    이 태스크 정보

    이 작업에서는 UI 상호작용을 생성하고 다이어그램 편집기를 사용하여 해당 동작을 정의합니다. 상호작용 유형을 선택하고, 단계를 추가 및 구성하고, 논리 및 분기를 정의하고, 런타임에 상호작용에 필요한 입력을 지정합니다.

    중요사항:
    UI 상호작용은 자체적으로 실행되지 않습니다. 상호작용을 생성한 후에는 해당 이벤트가 발생할 때 실행할 수 있도록 상호작용을 구성요소 또는 페이지 이벤트에 연결해야 합니다.

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
    2. UI 빌더 홈페이지에서 작성 > UI 상호작용.
      그림 1. UI 상호작용 생성
      UI 상호작용이 선택된 드롭다운 메뉴를 만듭니다.
    3. 생성 모달에서 상호작용의 이름을 입력합니다.

      예를 들어 지식 격차를 보고하는 UI 상호작용의 경우, 지식 격차 보고를 입력할 수 있습니다. 나중에 UI 상호작용 설정에서 이름을 변경할 수 있습니다.

      그림 2. UI 상호작용 생성 모달
      UI 상호작용 생성 모달
    4. 상호작용 유형을 선택합니다.

      일반 상호작용은 양식 또는 목록 컨트롤러 데이터에 대한 종속성 없이 사용됩니다. 양식 상호작용은 기록 확인 또는 저장과 같은 양식별 단계를 사용합니다. 목록 상호작용은 목록 새로 고침 또는 쿼리와 같은 목록별 단계를 사용합니다.

    5. 옵션: 상호작용이 수행하는 작업과 실행 시기를 요약한 설명을 입력합니다.
      예를 들어 기록을 삭제하기 전에 확인 모달을 표시합니다.
    6. 생성을 선택합니다.
      그림 3. UI 상호작용 편집기
      UI 상호작용 편집기.
      다이어그램 편집기가 추가 아이콘 으로 연결된 시작 및 종료 노드와 함께 열립니다. 도구 상자에서 사용할 수 있는 단계는 선택한 상호작용 유형에 따라 다릅니다.
    7. 도구 상자에서 단계를 추가하려면 시작 노드와 종료 노드 사이의 추가 아이콘을 선택하여 상호작용을 구성합니다.
      1. +를 선택하여 도구 상자를 엽니다.
        그림 4. UI 상호작용 도구 상자
        단계 도구 상자가 열려 있는 UI 상호작용 편집기.
      2. 사용 가능한 단계를 범주별로 찾아보거나 이름으로 검색합니다.
        시작 노드와 끝 노드 사이에 첫 번째 단계를 추가하면 도구 상자 내의 사용할 수 없음 섹션에 And 분기가 나타납니다. 하나 이상의 단계가 기본 분기에 추가될 때까지 And 분기를 추가할 수 없습니다. 기존 두 단계 사이에 단계를 삽입하면 탐색 단계와 같이 나가는 이벤트가 없는 단계가 도구 상자 내의 사용할 수 없음 섹션에 나타납니다. 이러한 단계는 기존 단계 앞에 삽입할 수 없으며 End 노드에 직접 연결되는 And 분기를 통해 추가해야 합니다.
      3. 캔버스에 추가할 단계를 선택합니다.
        시작 노드와 종료 노드 사이에 단계를 추가하거나 기존 단계 앞에 삽입합니다. 기본적으로 기존 단계 앞에 새 단계를 삽입하면 맨 위에 나가는 이벤트와 함께 플로우가 계속됩니다. 변경하려면 이벤트 노드를 선택하고 다른 이벤트를 선택합니다.
        주:
        각 이벤트는 하나의 발신 분기를 지원합니다. 이벤트를 교체하면 이벤트에 종속된 모든 다운스트림 바인딩이 기본값으로 재설정되고 시각적 표시기에 재설정이 표시됩니다.
      4. 구성 패널에서 단계 속성을 구성합니다.
      5. 반복하여 단계를 순서대로 추가합니다.
        단계를 병렬로 실행하려면 도구 상자에서 And 단계를 선택합니다. 분기는 위에서 아래로 순서대로 실행됩니다. 조건부 경로를 정의하려면 도구 상자의 논리 섹션에서 If/Else 단계를 추가합니다. 기존 단계 앞에 If/Else 단계를 삽입하면 시스템은 Else 분기에 다운스트림 플로우를 유지합니다.수식 작성 또는 스크립트를 사용하여 조건을 정의할 수 있습니다. 분기는 위에서 아래로 평가되며 true로 평가되는 첫 번째 분기가 실행됩니다.
      6. 상호작용에 런타임 데이터가 필요한 경우 입력 정제를 선택하고 상호작용에 필요한 데이터를 추가하여 입력을 정의합니다.
        지원되는 입력 유형은 문자열, 참/거짓, 선택, 참조 및 JSON입니다.
      7. 저장을 선택합니다.
      8. 옵션: 삭제 아이콘을 선택하여 언제든지 상호작용에서 단계를 삭제할 수 있습니다.
      9. 옵션: 다이어그램에서 이벤트를 삭제하려면 이벤트에서 삭제 아이콘을 선택합니다.
        이벤트를 삭제하면 연결 및 모든 다운스트림 단계가 제거됩니다.

    결과

    UI 상호작용이 생성되고 구성요소 또는 페이지 이벤트에 첨부할 준비가 되었습니다. 연결되면 지정된 이벤트가 발생할 때마다 구성된 단계를 실행합니다. 페이지 이벤트에서 UI 상호작용 트리거 문서를 참조하십시오.

    선언적 작업을 사용하여 양식이나 목록 단추에서 이 UI 상호작용을 트리거하려면 다음 문서를 참조하십시오 Trigger a UI interaction from a declarative action.