studio.soluta

먼저 볼 카드 — 노드

개념 Colors

이 카드를 다루는 수업 Config 2026에서 시작하는 Figma Weave 실습

Figma Weave 노드 검색 목록에 모델 이름·설명·필요 크레딧이 함께 표시된 화면
연결하기 전 포트 색을 보면 텍스트·이미지·영상 중 어떤 데이터가 오가는지 먼저 판단할 수 있습니다
  • 연결은 같은 색끼리만 됩니다. 예를 들어 텍스트(보라) 포트를 이미지(녹색) 포트에 바로 꽂을 수 없습니다.
  • 어떤 노드를 어디에 연결할지 헷갈릴 때는 먼저 포트 색을 봅니다.
  • 색이 같으면 연결되고, 다르면 중간에 타입을 바꿔 줄 노드를 하나 더 넣어야 합니다.

색 다섯 가지를 알아두면 처음 보는 노드도 어디에 연결할지 짐작할 수 있습니다.

화면으로 따라가기

첫 화면에서 연결선 양쪽 포트가 같은 보라색인지 확인합니다.

prompt를 GPT image 1.5 생성 노드에 연결

Prompt 노드의 보라(텍스트) 출력을 이미지 생성 노드의 보라(텍스트) 입력에 연결하는 장면입니다. 노드가 만드는 결과와 포트 색은 별개라, 이미지를 만드는 노드도 텍스트를 받는 입력 포트는 보라입니다.

출력 포트에서 입력 포트로 연결, backspace로 연결 끊기

연결선 위로 마우스를 올리면 포트 색이 같은지 바로 확인할 수 있습니다.

예시 · 튜토리얼 영상에서 Prompt 노드와 노드 검색 패널 사이에서 보라색 텍스트 출력 포트가 강조된 화면
Prompt 노드와 노드 검색 패널 — 보라색이 텍스트(Prompt) 출력 포트입니다

직접 해보기

화면에서 포트 두 개를 골라 색을 비교하고, 서로 바로 연결할 수 있는지 먼저 말한 뒤 실제로 연결해 보세요.

헷갈리기 쉬운 것

노드 상자의 배경색과 포트의 작은 점 색을 구분합니다. 연결 가능 여부는 포트 색으로 판단합니다.

왜 이렇게 작동하나요

충전 케이블은 단자 모양이 맞아야 꽂힙니다. Weave의 포트 색도 무엇이 오갈 수 있는지 알려 주는 표시입니다.

포트 색은 꾸밈이 아니라 데이터 타입 표시입니다. 같은 종류끼리 바로 연결하고, 종류가 다르면 중간에서 데이터를 바꾸는 노드가 필요합니다.

더 알고 싶다면

색 이름을 전부 외워야 하나요?
  • 처음에는 연결하려는 두 포트의 색이 같은지만 비교하면 됩니다. 어떤 데이터인지 이름을 대는 것보다 같음·다름을 판별하는 것이 먼저입니다.
  • 자주 쓰는 텍스트(보라)·이미지(녹색)·영상(빨강)은 작업하면서 반복해 보게 되고, 나머지는 필요할 때 이 카드의 색 표를 다시 봅니다.
  • 헷갈리기 쉬운 것은 색과 결과물의 관계입니다. 이미지를 만드는 노드도 프롬프트를 받는 입력 포트는 보라입니다. 포트 색은 노드의 종류가 아니라 그 자리로 오가는 데이터의 종류를 말합니다.

용어 풀이

전체 용어집 →
포트
노드 양옆에 있는 작은 점입니다. 왼쪽 점은 입력, 오른쪽 점은 출력이고, 여기서 선을 끌어 다른 노드와 연결합니다.
구간별로 보기
Weavy AI Masterclass (5:41부터)

포트 색이 콘텐츠 타입을 나타낸다는 것을 연결 조작과 함께 보여 주는 구간입니다.

YouTube · 미리보기 선택 시 원본 영상 열기

2026-07-28 기준 · 출처 · Understanding Nodes, Datatypes