구성요소 작성기를 사용하여 여러 페이지에 재사용할 사용자 지정 구성요소 생성

취리히 애플리케이션 빌드 또는 수정

Release

zurich

ft:locale

ko-KR

ft:publication_title

취리히 애플리케이션 빌드 또는 수정

ft:clusterId

cadev

bundleId

cadev

workflow

Development, Data, and Analytics

구성요소 작성기를 사용하여 여러 페이지에 재사용할 사용자 지정 구성요소 생성

릴리스 버전: Zurich

업데이트 날짜 2025년 07월 31일

소요 시간: 14분

의 경험과 페이지 UI 빌더전체에서 사용자 지정 구성요소를 재사용합니다.

의 구성요소 빌드 UI에서 UI 빌더사용자 지정 구성요소를 생성합니다. 구성요소 빌드 UI는 페이지 빌드와 많은 유사점을 공유하며 에서 페이지를 UI 빌더구성할 때와 동일한 방식으로 구성요소를 구성할 수 있습니다.

사용자 지정 구성요소의 강점

사용자 지정 구성요소를 빌드하면 경험 전반에 걸쳐 효율성, 일관성 및 유지 관리 가능성이 향상됩니다. 재사용 가능한 UI 요소를 생성하면 구성 중복을 방지하고, 균일한 모양과 느낌을 보장하고, 업데이트 또는 디자인 변경을 보다 쉽게 관리할 수 있습니다. 또한 사용자 정의 구성 요소는 복잡한 레이아웃을 단순화하고, 유연한 구성을 지원하며, 테스트 및 디버깅을 용이하게 합니다. 또한 공유 구성 요소가 공동 작업을 간소화하고 대규모로 사용자 경험을 일관되게 유지하는 데 도움이 되는 팀 환경에서도 유용합니다.

사용자 지정 구성요소는 경험 내에서 다양한 사용자 유형을 위한 페이지를 디자인할 때 특히 중요합니다. 예를 들어 목록과 데이터 시각화를 모두 포함하는 재사용 가능한 구성요소를 만든 다음 사용자 그룹을 기반으로 콘텐츠나 동작을 조정하여 역할별 정보를 제공하면서 레이아웃의 일관성을 유지할 수 있습니다.

구성요소 빌더에서 편집된 구성요소는 사용되는 모든 페이지에서 자동으로 업데이트됩니다.

중요사항:

인스턴스에서 생성된 사용자 지정 구성요소는 업데이트 세트 또는 애플리케이션 설치를 사용하여 다른 인스턴스로 마이그레이션될 때까지 해당 인스턴스 내에서만 사용할 수 있습니다.

사용자 지정 구성요소 또는 페이지 컬렉션

효율적이고 확장 가능한 디지털 환경을 구축하려면 가능한 한 요소를 재사용하는 것이 중요합니다. 이를 수행하는 두 가지 방법은 사용자 지정 구성요소와 페이지 컬렉션을 이용하는 것입니다. 각각은 필요한 재사용 범위에 따라 고유한 용도로 사용됩니다.

사용자 지정 구성 요소: 제목, 목록, 양식 또는 단추와 같은 페이지의 특정 부분을 여러 페이지에 복제하려는 경우 사용자 지정 구성요소를 사용합니다.; 구성요소 또는 구성요소 그룹에 일관된 테마 또는 구성을 적용하려고 합니다.; 페이지의 일부가 변경될 수 있지만 공유 구성요소가 일관되게 유지되는 모듈식 또는 유연성으로 페이지를 디자인하고 있습니다.; 한 곳에서 변경을 관리하고 구성요소가 사용되는 모든 곳에서 업데이트하려고 합니다.; 여러 팀이 같은 페이지의 서로 다른 섹션에서 동시에 작업하고 있습니다.
페이지 수집: 여러 페이지 또는 경험에서 전체 페이지 레이아웃과 구성을 재사용하려고 합니다.; 다양한 사용자 또는 워크플로우에 맞게 전체 페이지의 변형을 빌드해야 합니다.; 여러 페이지 또는 경험에서 탭 세트를 사용하려고 합니다.

사용자 지정 구성요소 UI

홈페이지의 헤더 또는 구성요소 타일에서 생성을 선택하여 구성 UI 빌더 요소 빌더에 액세스할 수 있습니다UI 빌더.

구성요소 생성 버튼을 가리키는 화살표가 있는 UI 빌더 홈페이지입니다. — 그림 1. UI 빌더 홈 페이지

로 UI 빌더 빌드된 구성요소는 페이지에 구성요소를 추가할 때 도구 상자와 홈페이지 UI 빌더의 구성요소 목록에서 찾을 수 있습니다. 의 홈페이지에 UI 빌더있는 구성요소 목록에서 사용자 지정 구성요소를 찾아 업데이트하거나 수정할 수 있습니다.

테스트 값을 선택하면 대체 텍스트 모달이 표시됩니다. — 그림 3. 구성요소 빌더에서 테스트 값

구성요소 빌더의 테스트 값을 사용하여 사용자 지정 구성요소를 빌드할 때 필수 및 선택적 URL 매개변수에 대한 시뮬레이션된 값을 제공합니다. 테스트 값은 바인딩과 데이터 자원이 올바르게 작동하는지 확인하여 구성요소가 페이지에 추가될 때 작동하는 방식을 확인하는 데 도움이 됩니다. 테스트 값에 대한 자세한 내용은 다음 페이지의 테스트 값문서를 참조하십시오.

구성요소 탭을 표시하는 UI 빌더 홈페이지입니다. — 그림 4. 구성요소 목록

복제 를 선택하여 구성요소 설정 화면에서 사용자 지정 구성요소를 빠르게 복제하면 재사용 또는 수정을 위해 구성요소의 정확한 복사본을 생성할 수 있습니다.

복제 옵션을 표시하는 화살표가 있는 구성요소 설정 화면입니다. — 그림 5. 사용자 지정 구성요소 설정

구성요소 빌더와 NOW CLI 구성요소 개발 비교

에 대한 UI 빌더구성요소를 빌드하는 방법에는 두 가지가 있습니다. 첫 번째는 사용자 지정 구성 요소를 생성하기 위한 드래그 앤 드롭 인터페이스를 제공하는 로우 코드 구성 요소를 UI 빌더사용하는 것입니다. 두 번째는 NOW CLI 개발자 도구를 사용하여 코드를 통해 구성요소를 빌드하는 것입니다. 두 방법 모두 UIB 도구 상자에 추가하고 여러 환경에서 재사용할 수 있는 구성요소를 생성합니다. 포함된 구성요소에 대한 변경은 두 유형 모두에 영향을 줄 수 있습니다.

두 도구 모두 에 대한 UI 빌더구성요소를 생성하지만 고려해야 할 중요한 차이점이 있습니다.

의 구성요소 빌더 UI 빌더

내 UI 빌더 장된 구성요소는 컨트롤러와 데이터 자원을 참조할 수 있습니다.
sys_ux_macroponent 테이블에 저장되는 "Macroponent 구성 요소"를 생성합니다.
구성요소 작성기는 구성요소를 빌드하기 위해 시각적인 끌어서 놓기 인터페이스를 선호하는 사용자에게 이상적입니다.
간단한 구성요소부터 중간 정도의 복잡한 구성요소까지 빠르게 만드는 데 적합합니다.

NOW CLI 구성요소:

사용자 지정 HTML, CSS 및 JavaScript를 작성해야 하는 개발자를 위한 것입니다.
복잡하고 사용자 정의 가능한 구성 요소를 구축하는 데 적합합니다.
NOW CLI로 만든 구성요소는 sys_uib_toolbox_component 테이블에 저장됩니다.

베스트 프랙티스

사용자 지정 구성요소 빌더에는 UI 빌더 거버넌스 기능이 부족하여 경험이 중복되거나 일관성이 없을 수 있습니다. 팀은 약간의 변형이 있는 유사한 구성요소를 만들 수 있으며, 이로 인해 UI가 조각화되고 사용자 경험이 혼란스러워질 수 있습니다. 팀이 정기적인 감사와 팀 간 커뮤니케이션을 완료하여 조율을 유지하고 경험이 성장함에 따라 단편화되지 않도록 하는 것이 좋습니다.

모든 구성요소는 보안 정책이 read_only으로 설정되어 있는 한 업그레이드를 안전하게 설계되었습니다. 이렇게 하면 번들 및 페이지 템플릿과 같은 다른 배포 가능 단위에 비해 더 큰 구성요소 또는 페이지 부분에 대해 더 큰 업그레이드 보호 기능이 제공됩니다. 그러나 이는 바로 사용 가능(OOTB) 구성요소를 편집할 수 없음을 의미하기도 합니다.

여러 페이지에서 재사용할 구성요소 생성

의 경험과 페이지에서 사용할 재사용 가능한 사용자 지정 구성요소를 빌드합니다 UI 빌더.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

이 구성요소 빌더 예에서는 모든 페이지에 추가할 수 있는 경과 시간을 추적하는 스톱워치 구성요소를 만듭니다. 구성요소에는 페이지에 배치된 후 수정할 수 있는 사용자 지정 가능한 속성이 포함됩니다.

프로시저

다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
홈페이지에서 만들기 를 UI 빌더 선택합니다.
구성요소를 선택합니다.

양식에서 필드에 내용을 입력합니다.

표 1. 구성요소 양식 생성
필드	설명
이름	내부적으로 구성 요소를 추적할 이름을 추가합니다. 구성요소 이름이 도구 상자에 나타납니다. 이 예에서는 `스톱워치`입니다.
범주	도구 상자에서 쉽게 찾을 수 있도록 구성요소에 범주를 추가합니다. 나중에 설정에서 범주를 업데이트할 수 있습니다. 이 예에서는 컨텐츠를 선택합니다.
설명	구성요소를 사용하는 시기와 방법을 설명하는 설명을 추가합니다.
아이콘	도구 상자에서 구성요소를 나타내는 아이콘을 선택합니다.

생성을 선택합니다.
페이지가 구성요소 빌더 뷰에서 열립니다.

속성 및 정책 섹션에서 + 속성 추가를 선택하여 사용자 지정 구성요소 속성을 추가합니다.

목록에서 문자열을 선택합니다.

구성 패널에 다음 값을 입력합니다.

표 2. 구성요소 속성
필드	값
속성 레이블	`SVG 이미지 소스`
속성 ID	`svgImageSource`
기본값	`animateddino.svg`

구성 패널에서 속성 레이블, 속성 ID 및 SVG 이미지 소스 필드를 가리키는 화살표가 있는 사용자 지정 구성요소 빌드 UI입니다.

저장을 선택합니다.

+ 콘텐츠 추가 버튼을 선택하여 사용자 지정 구성요소의 레이아웃을 구성합니다.
1. 단일 열을 선택한 다음 추가를 선택합니다.
2. 콘텐츠 트리의 열 1에서 +콘텐츠 추가를 선택합니다.
3. 카드 기본 컨테이너를 선택한 다음 추가를 선택합니다.
4. 콘텐츠 트리의 카드 기본 컨테이너 1에서 + 콘텐츠 추가를 선택합니다.
5. 레이아웃을 선택합니다.
6. Flexbox를 선택한 다음 추가를 선택합니다.
7. 저장을 선택합니다.
컨테이너 1에서 + 콘텐츠 추가를 선택하여 Flexbox 컨테이너에 스타일화된 텍스트 구성요소를 추가합니다.
1. 스타일 텍스트 구성 요소를 선택한 다음 추가를 선택합니다.
2. 취소를 선택하여 사전 설정 창을 닫습니다.
3. 저장을 선택합니다.

스타일화된 텍스트 구성요소를 구성하기 위해 몇 가지 클라이언트 상태 매개변수를 추가합니다.

데이터 및 스크립트 섹션에서 클라이언트 상태 매개변수를 선택합니다.

클라이언트 상태 매개변수 편집 대화 상자에서 다음 값을 입력합니다.

표 3. 클라이언트 상태 매개변수
이름	유형	초기 값
startTime	번호
경과 시간	문자열	00:00:00
시간 간격	JSON
스톱워치실행 중	부울
intervalId	문자열

적용을 선택합니다.
저장을 선택합니다.

스타일화된 텍스트 구성요소를 구성하기 위해 elapsedTime 클라이언트 상태 매개변수를 바인딩합니다.
1. 컨텐츠 트리에서 스타일 텍스트 1 구성요소를 선택합니다.
2. 스타일화된 텍스트 구성요소의 텍스트 필드를 가리킬 때 바인딩 아이콘을 선택합니다.
3. 클라이언트 상태를 선택합니다.
4. elapsedTime 알약을 두 번 클릭합니다.
5. 적용을 선택합니다.
6. 저장을 선택합니다.
버튼을 고정할 Flexbox 컨테이너를 추가합니다.
1. 스타일화된 텍스트 구성요소 아래에서 + 아이콘을 선택합니다.
2. 레이아웃을 선택합니다.
3. Flexbox를 선택합니다.
4. 추가를 선택합니다.

스톱워치 실행 렌더러와 시작 단추를 추가하고 구성합니다.

이전 단계에서 추가한 컨테이너에 + 콘텐츠 추가 를 선택하고 조건부 렌더러를 추가합니다.
콘텐츠 트리에서 + 조건 추가 를 선택합니다.
단일 구성요소를 선택한 후 다음을 선택합니다.
버튼 아이콘을 선택한 후 다음을 선택합니다.
설정 편집 대화 상자에서 다음 값을 입력합니다.
- 구성요소 레이블: 시작
- 구성요소 ID: start_button
- 컨텐츠 렌더링: 항상.
적용을 선택합니다.
콘텐츠 트리에서 시작 버튼을 선택합니다.

구성 패널에서 다음 속성을 설정합니다.

표 4. 구성요소 속성
필드	값
아이콘	스톱워치 채우기
변형	기본
크기	크게
도구 설명 텍스트	`시작`

저장을 선택합니다.

스톱워치가 실행되는 동안 중지 버튼이 표시되도록 구성합니다.

콘텐츠 트리에서 + 조건 추가 를 선택합니다.
빈 컨테이너를 선택한 후 다음을 선택합니다.
설정 편집 대화 상자에서 다음 값을 입력합니다.
- 구성요소 레이블: 실행 중
- 구성요소 ID: running_container
- 컨텐츠 렌더링: 아래 조건이 예일 때
조건 필드를 가리키면서 바인딩 아이콘을 선택합니다.
클라이언트 상태를 선택한 다음 stopwatchRunning 알약을 두 번 클릭합니다.
적용을 선택합니다.
적용을 선택합니다.
+ 실행 중인 컨테이너에 콘텐츠 추가를 선택하고 버튼 아이콘을 추가합니다.
구성 패널에서 버튼 아이콘 1 을 선택하고 다음 값을 입력합니다.
- 구성요소 레이블: 중지
- 구성요소 ID: stop_button
적용을 선택합니다.

구성 패널에서 다음 속성을 설정합니다.

표 5. 구성요소 속성
필드	값
아이콘	스톱워치 채우기
변형	보조
크기	크게
도구 설명 텍스트	`중지`

저장을 선택합니다.

시작 위에 실행 중 이 표시되도록 조건 의 순서를 변경합니다.
1. 콘텐츠 트리에서 조건부 렌더러 1 을 선택합니다.
2. 구성 패널에서 끌기 핸들 아이콘을 선택하고 끌어 조건을 제자리로 이동합니다.
  조건은 위에서 아래로 순서로 평가되므로 버튼이 올바르게 표시되려면 시작 위에 실행 중이 표시되어야 합니다.

데이터 및 스크립트 섹션에서 클라이언트 스크립트 옆에 있는 +를 선택하여 구성요소에 대한 논리를 추가합니다.

스크립트 이름 필드에 시작을 입력합니다.

다음 스크립트를 스크립트 필드에 붙여넣습니다.

function handler({ api, helpers }) {
  console.log('Start script running');
 
  if (api.state.stopwatchRunning === undefined) {
    api.setState('stopwatchRunning', false);
    api.setState('elapsedTime', '00:00:00');
    api.setState('startTime', null);
    api.setState('intervalId', null);
  }
 
  let running = api.state.stopwatchRunning;
 
  function pad(n) {
    return n < 10 ? '0' + n : n.toString();
  }
 
  function updateElapsedTime(startTime) {
    if (!running) {
      if (api.state.intervalId) {
        helpers.timing.clearInterval(api.state.intervalId);
        api.setState('intervalId', null);
        console.log('Interval cleared');
      }
      return;
    }
 
    if (!startTime) {
      console.log('No startTime passed to updateElapsedTime, cannot update');
      return;
    }
 
    const now = Date.now();
    const elapsedMs = now - startTime;
 
    const totalSeconds = Math.floor(elapsedMs / 1000);
    const hours = pad(Math.floor(totalSeconds / 3600));
    const minutes = pad(Math.floor((totalSeconds % 3600) / 60));
    const seconds = pad(totalSeconds % 60);
 
    const formattedTime = `${hours}:${minutes}:${seconds}`;
 
    console.log('Setting elapsedTime:', formattedTime);
    api.setState('elapsedTime', formattedTime);
  }
 
  if (!running) {
    const now = Date.now();
 
    api.setState('startTime', now);
    api.setState('elapsedTime', '00:00:00');
    api.setState('stopwatchRunning', true);
    running = true;
 
    if (api.state.intervalId) {
      helpers.timing.clearInterval(api.state.intervalId);
      api.setState('intervalId', null);
      console.log('Existing interval cleared before starting new one');
    }
 
    // Pass startTime directly here
    updateElapsedTime(now);
 
    const id = helpers.timing.setInterval(() => {
      updateElapsedTime(now);
    }, 1000);
    api.setState('intervalId', id);
    console.log('Interval started with id:', id);
  } else {
    if (!api.state.intervalId) {
      // Use existing startTime from state, but be mindful it might still lag
      const storedStartTime = api.state.startTime || Date.now();
      const id = helpers.timing.setInterval(() => {
        updateElapsedTime(storedStartTime);
      }, 1000);
      api.setState('intervalId', id);
      console.log('Interval restarted with id:', id);
    }
  }
}

적용을 선택합니다.
클라이언트 스크립트 옆에 있는 +를 선택하여 두 번째 스크립트를 추가합니다.
스크립트 이름 필드에 Stop을 입력합니다.

다음 스크립트를 스크립트 필드에 붙여넣습니다.

function handler({ api, helpers }) {
  console.log('Stop script running');
 
  if (api.state.stopwatchRunning === undefined) {
    // If state is not initialized yet, initialize it to avoid errors
    api.setState('stopwatchRunning', false);
    api.setState('elapsedTime', '00:00:00');
    api.setState('startTime', 0);
    api.setState('intervalId', null);
  }
 
  if (api.state.stopwatchRunning) {
    api.setState('stopwatchRunning', false);
    if (api.state.intervalId) {
      helpers.timing.clearInterval(api.state.intervalId);
      api.setState('intervalId', null);
    }
  }
}

적용을 선택합니다.
저장을 선택합니다.

이전 단계에서 만든 버튼에 이벤트 핸들러를 추가합니다.
1. 컨텐츠 트리에서 시작 버튼을 선택하고 구성 패널에서 이벤트 탭을 엽니다.
2. 버튼 아이콘 클릭됨 아래에서 핸들러 추가를 선택한 다음, 이전 단계에서 만든 클라이언트 스크립트 시작을 선택합니다.
3. 계속을 선택한 다음 추가를 선택합니다.
4. 콘텐츠 트리에서 중지 버튼을 선택하고 구성 패널에서 이벤트 탭을 엽니다.
5. 처리기 추가를 선택한 다음, 이전 단계에서 만든 클라이언트 중지 스크립트를 선택합니다.
6. 계속을 선택한 다음 추가를 선택합니다.
7. 저장을 선택합니다.
구성된 구성요소를 테스트하려면 미리 보기 를 선택합니다.

결과

이제 도구 상자에서 사용자 지정 구성요소를 사용할 수 있습니다.UI 빌더