에디터 UI 탐색#

이번 레슨에서는 Editor UI를 탐색하는 방법을 배웁니다. 캔버스를 통해 각 아이콘의 의미와 n8n에서 워크플로우를 구축하는 동안 필요한 항목을 찾는 방법을 보여드리겠습니다.

시작하기#

n8n 설정을 시작합니다. 다음 두 가지 방법으로 설정할 수 있습니다:

n8n Cloud - 호스팅 솔루션으로 설치가 필요 없습니다. 모든 수준의 경험에 적합합니다.
셀프 호스팅 - 기술 지식이 있는 고급 사용자에게 권장됩니다.

n8n을 설정하는 다양한 방법에 대한 자세한 내용은 플랫폼 문서를 참조하세요.

n8n version

이 과정은 n8n 버전 1.30.0에서 개발되었습니다. 다른 버전에서는 사용자 인터페이스의 일부가 다르게 보일 수 있지만 핵심 기능에는 영향을 미치지 않아야 합니다.

n8n을 실행한 후 브라우저 창에서 Editor UI를 엽니다. 아래와 같이 보일 것입니다:

Editor UI 설정#

에디터 UI는 워크플로우를 구축하는 웹 인터페이스입니다. Editor UI에서 모든 워크플로우와 자격증명, 지원 페이지에 접근할 수 있습니다.

왼쪽 패널#

Editor UI의 왼쪽에는 워크플로우 관리를 위한 핵심 기능과 설정이 포함된 패널이 있습니다. 작은 화살표 아이콘을 선택하여 확장 및 축소할 수 있습니다.

패널에는 다음과 같은 섹션이 포함되어 있습니다:

개요: 당신이 접근할 수 있는 모든 워크플로우와 자격증명이 포함되어 있습니다. 이 과정 동안 새 워크플로우를 여기에서 생성하세요.
템플릿: 미리 만들어진 워크플로우의 모음입니다. 일반적인 사용 사례로 시작하기 좋은 장소입니다.
변수: 워크플로우 전반에 걸쳐 고정된 데이터를 저장하고 액세스하는 데 사용됩니다. 이 기능은 Pro 및 Enterprise 플랜에서 사용할 수 있습니다.
모든 실행: 워크플로우 실행에 대한 정보를 포함합니다.
설정: 다양한 기능에 대한 사용자 및 액세스 설정을 관리합니다.
도움말: n8n 제품 및 커뮤니티에 대한 리소스가 포함되어 있습니다.
관리자 패널: n8n Cloud 전용. n8n 인스턴스 사용량, 청구 및 버전 설정에 접근합니다.
업데이트: n8n Cloud 전용. 최근에 릴리스된 제품 업데이트에 대한 지표입니다.

Editor UI left-side menu — *Editor UI 왼쪽 메뉴*

상단 바#

Editor UI의 상단 바에는 다음과 같은 정보가 포함되어 있습니다:

워크플로우 이름: 기본적으로 n8n은 새 워크플로우의 이름을 "My Workflow"로 지정하지만 언제든지 이름을 편집할 수 있습니다.
+태그 추가: 태그는 워크플로우를 카테고리, 사용 사례 또는 자신에게 관련 있는 방식으로 조직하는 데 도움이 됩니다. 태그는 선택 사항입니다.
비활성/활성 전환: 이 버튼은 현재 워크플로우를 활성화하거나 비활성화합니다. 기본적으로 워크플로우는 비활성화되어 있습니다.
공유: Starter, Pro 및 Enterprise 플랜에서 다른 사람과 워크플로우를 공유하고 협업할 수 있습니다.
저장: 이 버튼은 현재 워크플로우를 저장합니다.

캔버스#

캔버스는 편집기 UI의 회색 점선 그리드 배경입니다. 여러 아이콘과 다양한 기능을 가진 노드가 표시됩니다:

캔버스를 화면에 맞게 조정하고, 캔버스를 확대하거나 축소하며, 캔버스를 원래 해상도로 초기화하는 버튼.
워크플로 실행 버튼. 클릭하면 캔버스의 모든 노드가 실행됩니다.
안에 + 기호가 있는 버튼. 이 버튼은 노드 패널을 엽니다.
안에 메모 아이콘이 있는 버튼. 이 버튼은 캔버스에 스티키 노트를 추가합니다. (우측 상단 + 아이콘 위에 마우스를 올렸을 때 보임)
"첫 번째 단계 추가"라는 텍스트가 있는 점선 사각형. 여기에서 첫 번째 노드를 추가합니다.

캔버스 이동

캔버스 워크플로를 세 가지 방법으로 이동할 수 있습니다:

캔버스에서 Ctrl + 왼쪽 마우스 버튼을 선택하고 이동합니다.
캔버스에서 중간 마우스 버튼을 선택하고 이동합니다.
터치패드에 두 손가락을 올리고 슬라이드합니다.

워크플로 실행 및 활성화에 대해서는 걱정하지 마세요. 이러한 개념은 나중에 코스에서 설명할 것입니다.

노드#

노드는 서로 다른 기능을 제공하는 구축 블록으로, 함께 결합되어 작동하는 기계, 즉 자동화된 워크플로를 형성합니다.

노드

노드는 워크플로의 개별 단계로, (a) 데이터를 로드하고, (b) 데이터를 처리하며, (c) 데이터를 전송하는 단계입니다.

기능을 기반으로 n8n은 노드를 네 가지 유형으로 분류합니다:

앱 또는 액션 노드는 데이터를 추가, 제거 및 편집하고; 외부 데이터를 요청 및 전송하며; 다른 시스템에서 이벤트를 트리거합니다. 이러한 노드의 전체 목록은 액션 노드 라이브러리를 참조하세요.
트리거 노드는 워크플로를 시작하고 초기 데이터를 제공합니다. 트리거 노드의 전체 목록은 트리거 노드 라이브러리를 참조하세요.
코어 노드는 코어 노드 또는 앱 노드일 수 있습니다. 대부분의 노드는 특정 외부 서비스에 연결되지만, 코어 노드는 로직, 스케줄링 또는 일반 API 호출과 같은 기능을 제공합니다. 코어 노드의 전체 목록은 코어 노드 라이브러리를 참조하세요.
클러스터 노드는 워크플로에서 기능을 제공하기 위해 함께 작동하는 노드 그룹입니다. 자세한 내용은 클러스터 노드를 참조하세요.

자세히 알아보기

모든 노드 유형에 대한 자세한 설명은 노드 유형을 참조하세요.

노드 찾기#

사용 가능한 모든 노드는 편집기 UI의 노드 패널에서 확인할 수 있습니다. 노드 패널을 여는 방법은 세 가지가 있습니다:

캔버스의 오른쪽 상단 모서리에 있는 + 아이콘을 클릭합니다.
캔버스에 있는 기존 노드의 오른쪽에 있는 + 아이콘을 클릭합니다 (다른 노드를 추가하려는 노드).
키보드에서 Tab 키를 클릭합니다.

노드 패널에서 첫 번째 노드를 추가할 때 여러 트리거 노드 범주가 표시됩니다. 트리거 노드를 추가하면 노드 패널이 액션, 데이터 변환, 헬퍼, 플로우 및 파일 노드를 표시하도록 변경됩니다.

특정 노드를 찾고 싶다면 노드 패널 상단의 검색 입력란을 사용하세요.

노드 추가하기#

캔버스에 노드를 추가하는 방법은 두 가지가 있습니다:

노드 패널에서 원하는 노드를 선택합니다. 새 노드는 캔버스에서 선택한 노드에 자동으로 연결됩니다.
노드를 노드 패널에서 캔버스로 드래그 앤 드롭합니다.

노드 버튼#

노드 위에 마우스를 올리면, 상단에 세 개의 아이콘이 나타나는 것을 알 수 있습니다:

노드를 실행합니다 (재생 아이콘)
노드를 비활성화/활성화합니다 (전원 아이콘)
노드를 삭제합니다 (휴지통 아이콘)

추가로 점 세 개 아이콘이 보이며, 이 아이콘을 클릭하면 다른 노드 옵션 이 포함된 컨텍스트 메뉴가 열립니다.

워크플로우 이동

캔버스에서 워크플로우를 이동하려면, 마우스를 사용하여 모든 노드를 선택하거나 Ctrl + A를 선택한 후, 노드를 선택하고 유지하면서 원하는 위치로 드래그합니다.

요약#

이번 수업에서는 편집기 UI를 탐색하는 방법, 아이콘의 의미, 좌측 및 노드 패널에 접근하는 방법, 캔버스에 노드를 추가하고 실행 결과를 해석하는 방법을 배웠습니다.

다음 수업에서는 지금까지 배운 내용을 바탕으로 미니 워크플로우를 구축할 것입니다.