먼저 볼 카드 — 색
실습 Connect
포트 연결
이 카드를 다루는 수업 Config 2026에서 시작하는 Figma Weave 실습
두 노드를 연결하는 동작은 모든 작업의 기본입니다. 한 번 익히면 다른 노드에도 같은 방식으로 적용됩니다.
노드 추가
- 캔버스 빈 곳에서 우클릭해 검색합니다.
- 왼쪽 위 돋보기 아이콘을 눌러 노드를 끌어다 놓습니다.
연결
- 연결선은 데이터가 흐르는 방향을 보여 줍니다.
- 완성된 선에서 데이터는 한 노드의 출력(오른쪽 점)에서 다음 노드의 입력(왼쪽 점)으로 흐릅니다.
- 연결 동작은 호환되는 입력이나 출력 어느 쪽에서 시작해도 됩니다. 입력끼리나 출력끼리는 연결되지 않습니다.
끊기. 잘못 이었다면 연결선을 클릭한 뒤 backspace 키를 누르면 끊깁니다.
색이 다른 포트끼리는 연결이 거부됩니다. 그 자리에는 색을 바꿔 줄 노드를 하나 더 넣어야 한다는 뜻입니다.
Pitfall
- 호환 안 되는 포트끼리 연결을 시도합니다. 텍스트는 텍스트에만, 이미지는 이미지에만 연결되니 포트 색을 먼저 확인합니다.
자주 묻는 질문
- 연결이 안 됩니다. — 포트 타입이 다른 경우입니다. 같은 색(타입)끼리만 연결됩니다.
- 연결선을 어떻게 지우나요? — 연결선을 클릭한 뒤 backspace를 누릅니다.
실행 순서
따라하기 덱으로 열기 →-
화면 왼쪽 위 돋보기(검색) 아이콘을 누르고 원하는 노드 이름을 입력합니다.
-
검색 결과 목록에서 노드를 캔버스로 끌어다 놓습니다.
이 단계의 실제 화면
화면에서 확인할 것 왼쪽 검색 패널에 찾은 노드가 보이고, 캔버스에는 놓은 노드 상자가 보여야 합니다. Figma Weave · Config 2026 · 2026-07-28 -
첫 노드 오른쪽의 작은 점(출력 포트)을 마우스로 누른 채 끌어 옮깁니다. 호환되는 입력 포트에서 시작해도 됩니다.
-
두 번째 노드 왼쪽의 같은 색 점(입력 포트) 위에서 손을 놓으면 두 노드 사이에 선이 생깁니다.
이 단계의 실제 화면
화면에서 확인할 것 두 노드 사이에 연결선이 생기고 선이 첫 노드의 출력에서 다음 노드의 입력으로 연결돼야 합니다. Figma Weave · Config 2026 · 2026-07-28 -
이미지 생성 노드를 추가하고, Prompt 출력에서 이미지 입력 포트로 연결합니다. 색이 맞는지 확인합니다.
직접 해보기
이미지 노드 둘을 놓고 일부러 색이 다른 포트끼리 연결해 보세요. 선이 그어지지 않는 것을 확인합니다.
헷갈리기 쉬운 것
입력끼리, 출력끼리는 연결되지 않습니다. 연결 동작은 입력이나 출력 어느 쪽에서 시작해도 되지만, 완성된 데이터 흐름은 출력에서 입력으로 향합니다.
왜 이렇게 작동하나요
연결선은 두 상자를 묶는 표시가 아니라, 앞 노드의 결과가 다음 노드의 재료가 되는 길입니다.
연결에는 두 조건이 함께 필요합니다. 완성된 데이터 흐름이 앞 노드의 출력에서 다음 노드의 입력으로 향해야 하고, 두 포트가 주고받는 데이터 종류도 맞아야 합니다. 드래그는 호환되는 입력이나 출력 어느 쪽에서 시작해도 됩니다.
더 알고 싶다면
색이 다른 데이터를 꼭 연결해야 한다면?
- 두 데이터 사이를 바꾸는 노드를 중간에 넣습니다. 이미지를 설명문으로 바꾸는 노드를 거치면 녹색 이미지 출력이 보라색 텍스트가 되어 프롬프트 입력에 연결됩니다.
- 반대 방향은 변환 노드를 찾기 전에 이미 있는 생성 노드부터 봅니다. 텍스트를 이미지로 바꾸는 일은 이미지 생성 노드 자체가 맡는 일이라, 별도 변환이 필요 없는 경우가 많습니다.
용어 풀이
전체 용어집 →2026-07-28 기준 · 출처 · Understanding Nodes, Connecting Edges (Wires), Datatypes