노드 사용자 인터페이스 요소#
n8n은 사용자가 모든 종류의 데이터 유형을 입력할 수 있도록 하는 미리 정의된 UI 구성 요소 집합( JSON 파일 기반)을 제공합니다. n8n에서는 다음과 같은 UI 요소를 사용할 수 있습니다.
문자열#
기본 구성:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
비밀번호 입력용 문자열 필드:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
여러 줄을 가진 문자열 필드:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
데이터 키에 대한 드래그 앤 드롭 지원#
사용자는 데이터 값을 끌어다 놓아 필드에 매핑할 수 있습니다. 드래그 앤 드롭은 데이터 값을 로드하기 위한 expression을 생성합니다. n8n은 이를 자동으로 지원합니다.
데이터 키를 드래그 앤 드롭할 수 있도록 지원하려면 추가 구성 옵션을 추가해야 합니다:
requiresDataPath: 'single'
: 단일 문자열이 필요한 필드용.requiresDataPath: 'multiple'
: 쉼표로 구분된 문자열 목록을 수용할 수 있는 필드용.
Compare Datasets 노드 코드는 예제를 포함하고 있습니다.
숫자#
소수점을 가진 숫자 필드:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
수집#
옵션 필드를 표시해야 할 때 collection
유형을 사용합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
|
날짜 및 시간#
dateTime
유형은 날짜 선택기를 제공합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
불리언#
boolean
유형은 true 또는 false를 입력할 수 있는 토글을 추가합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
색상#
color
유형은 색상 선택기를 제공합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
옵션#
options
유형은 옵션 목록을 추가합니다. 사용자는 단일 값을 선택할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
다중 선택#
multiOptions
유형은 옵션 목록을 추가합니다. 사용자는 여러 값을 선택할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
필터#
이 구성 요소를 사용하여 들어오는 데이터를 평가하고, 일치시키거나 필터링합니다.
이는 n8n의 If 노드에서의 코드입니다. 이것은 사용자가 필터의 동작을 구성할 수 있는 컬렉션 구성 요소와 함께 작동하는 필터 구성 요소를 보여줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
할당 컬렉션 (드래그 앤 드롭)#
사용자가 드래그 상호작용을 통해 이름 및 값 매개변수를 미리 채우고 싶을 때 드래그 앤 드롭 구성 요소를 사용합니다.
1 2 3 4 5 6 |
|
n8n의 필드 편집(설정) 노드에서 예를 확인할 수 있습니다:
고정 컬렉션#
fixedCollection
유형을 사용하여 의미적으로 관련된 필드를 그룹화합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
|
리소스 로케이터#
리소스 로케이터 요소는 사용자가 Trello의 카드나 라벨과 같은 외부 서비스에서 특정 리소스를 찾는 데 도움을 줍니다.
다음 옵션을 사용할 수 있습니다:
- ID
- URL
- 목록: 사용자가 미리 채워진 목록에서 선택하거나 검색할 수 있게 합니다. 이 옵션은 목록을 채우고, 선택적으로 검색을 지원하려면 검색 처리 로직이 필요하므로 더 많은 코드가 필요합니다.
포함할 유형을 선택할 수 있습니다.
예시:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
|
실제 예제는 다음을 참조하세요:
CardDescription.ts
및Trello.node.ts
에서searchFilterRequired: true
가 포함된 검색이 가능한 목록의 예제를 확인하세요.- 사용자가 목록을 탐색하거나 검색할 수 있는 예는
GoogleDrive.node.ts
를 참조하세요.
리소스 매퍼#
노드가 삽입, 업데이트 또는 업서트 작업을 수행하는 경우, 통합하고 있는 서비스에서 지원하는 형식으로 노드에서 데이터를 전송해야 합니다. 일반적인 패턴은 데이터를 전송하는 노드 전에 Set 노드를 사용하여 연결할 서비스의 스키마에 맞추는 것입니다. 리소스 매퍼 UI 구성 요소는 Set 노드를 사용하지 않고도 노드 내에서 직접 필요한 형식으로 데이터를 가져올 수 있는 방법을 제공합니다. 리소스 매퍼 구성 요소는 또한 노드에 제공된 스키마에 대해 입력 데이터를 검증하고, 입력 데이터를 예상되는 유형으로 변환할 수 있습니다.
매핑 및 일치
매핑(Mapping)은 업데이트할 행(row)의 값으로 사용할 입력 데이터를 설정하는 과정입니다. 일치(Matching)는 업데이트할 행(row)을 식별하기 위해 열 이름을 사용하는 과정입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
데이터베이스 스키마를 사용하는 실제 예제는 Postgres node (version 2)를 참조하세요.
스키마가 없는 서비스를 사용하는 실제 예제는 Google Sheets node (version 2)를 참조하세요.
리소스 매퍼 유형 옵션 인터페이스#
typeOptions
섹션은 다음 인터페이스를 구현해야 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
리소스 매퍼 메서드#
이 메서드는 데이터 스키마를 가져오기 위한 노드 특화 로직을 포함합니다. 모든 노드는 스키마를 가져오기 위한 고유 로직을 구현해야 하며, 스키마에 따라 각 UI 필드를 설정해야 합니다.
반환값은 ResourceMapperFields
인터페이스를 구현해야 합니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
라이브 예제는 Postgres 리소스 매핑 메서드와 Google Sheets 리소스 매핑 메서드를 참조하세요.
JSON#
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
HTML#
HTML 편집기를 통해 사용자는 워크플로우에서 HTML 템플릿을 작성할 수 있습니다. 편집기는 표준 HTML, <style>
태그의 CSS 및 {{}}
로 감싼 표현식을 지원합니다. 사용자는 추가 JavaScript를 가져오기 위해 <script>
태그를 추가할 수 있습니다. n8n은 워크플로우 실행 중에 이 JavaScript를 실행하지 않습니다.
1 2 3 4 5 6 7 8 9 10 11 |
|
라이브 예제는 Html.node.ts
를 참조하세요.
공지#
힌트 또는 추가 정보를 나타내는 노란색 상자를 표시합니다. 좋은 힌트 및 정보 텍스트 작성을 위한 지침은 Node UI 디자인을 참조하세요.
1 2 3 4 5 6 |
|

힌트#
힌트에는 두 가지 유형이 있습니다: 매개변수 힌트와 노드 힌트:
- 매개변수 힌트는 사용자 입력 필드 아래에 있는 짧은 텍스트입니다.
- 노드 힌트는 Notice보다 더 강력하고 유연한 옵션입니다. 입력 패널, 출력 패널 또는 노드 세부정보 보기에서 긴 힌트를 표시하는 데 사용하세요.
매개변수 힌트 추가#
UI 요소에 hint
매개변수를 추가하세요:
1 2 3 4 5 6 7 |
|
노드 힌트 추가#
노드의 힌트를 노드 description
안의 hints
속성에 정의하세요:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
프로그래밍 스타일 노드에 동적 힌트 추가#
프로그래밍 스타일 노드에서는 노드 실행에서 가져온 정보를 포함하는 동적 메시지를 생성할 수 있습니다. 이것은 노드 출력 데이터에 의존하므로 실행 후에만 이 유형의 힌트를 표시할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
프로그래밍 스타일 노드에서 동적 힌트의 라이브 예제를 보려면 Split Out 노드 코드를 확인하세요.