먼저 볼 카드 — AI 없이 직접 색과 프레임 만지기
실습 CONFIG 2026 / 08
이미지와 글자를 한 장으로 합치기
- 이미지가 나온 뒤에도 문구를 얹는 작업이 남습니다
- Compositor 노드: 그 작업을 별도 프로그램 대신 워크플로우 안에서, 익숙한 Figma 캔버스로 처리합니다
화면으로 따라가기
- 확인할 것: Compositor 안에서 이미지와 글자가 각각 레이어로 보이는지
- 왼쪽: Layers 패널(Canvas, Layer 1, Background)
- 가운데 캔버스: 산길 이미지 위에 “Alaska” 텍스트
- 오른쪽 패널: 폰트를 검색해 고르는 중
자주 묻는 질문
- Compositor 안에서 못 하는 편집이 있나요? — 발표에서는 텍스트 폰트·크기·정렬·위치를 다뤘습니다. Figma에서 하던 레이어 조작과 크게 다르지 않습니다. 자세한 편집 도구는 공식 문서: Editing Tools에서 볼 수 있습니다.
- 레이어는 몇 개까지 넣을 수 있나요? — 이 발표에서는 이미지 1장 + 텍스트 1장으로 시작해서, 뒤 카드에서 영상 레이어를 더 추가합니다. 정해진 상한은 확인되지 않았습니다.
실행 순서
-
새 Prompt 노드에 넣고 싶은 문구(발표에서는 "Alaska")를 텍스트로 씁니다.
-
Compositor 노드를 캔버스에 놓고, 「AI 없이 직접 색과 프레임 만지기」 카드에서 보정한 이미지(없으면 캔버스에 있는 아무 이미지 노드의 출력)와 이 텍스트를 각각 레이어로 연결합니다. Compositor는 이미지·텍스트·영상·오디오를 동시에 층으로 받을 수 있습니다 — 이 카드에서는 이미지와 텍스트 두 층부터 시작합니다.
-
Compositor 노드를 열면 Figma와 같은 캔버스가 나옵니다. 텍스트 레이어를 선택해 폰트·크기·정렬을 조정합니다.
-
텍스트가 이미지 위에서 잘 안 보이면 위치를 다시 잡거나 정렬을 맞춥니다. 발표에서는 처음에 텍스트가 가운데 정렬이 안 돼 있어 다시 맞췄습니다.
-
캔버스를 닫고 확인하면 텍스트가 이미지 위에 얹힌 한 장짜리 결과가 만들어져 있습니다.
-
앞쪽 색보정 노드의 노출 값을 다시 바꿔 보고, 그 변화가 Compositor 결과까지 따라 바뀌는지 확인합니다.
직접 해보기
텍스트 위치나 정렬을 바꿔서 같은 이미지에 다른 레이아웃을 만들어 보세요.
헷갈리기 쉬운 것
Compositor 캔버스 안에서 만든 편집은 그 레이어 안에서만 유지됩니다. 원본 이미지 노드를 직접 고치지 않으면 다음 실행에서 사라지지 않으니, 무엇을 어디서 고쳤는지 헷갈리지 않게 확인합니다. 텍스트가 하얀색인데 배경도 밝으면 안 보입니다 — 발표에서도 흰 텍스트가 잘 안 보여서 앞 단계(색보정)의 노출을 다시 낮췄습니다. 텍스트 색이 아니라 배경 노출을 조정해 해결한 점이 포인트입니다.
왜 이렇게 작동하나요
Figma에서 사진 위에 텍스트 레이어를 얹어 포스터를 만드는 것과 똑같은 조작입니다. 다만 그 사진이 워크플로우에서 자동으로 생성된 이미지라는 점만 다릅니다.
Compositor는 이미지·텍스트를 각각 노드로 입력받아 합성하는 다운스트림 노드입니다. 워크플로우 안의 다른 노드와 똑같이, 앞 노드의 출력이 바뀌면 그 변화가 그대로 흘러 들어옵니다. 그래서 합성 자체를 다시 만들 필요 없이, 원인이 되는 앞 노드만 고치면 결과가 갱신됩니다.
더 알고 싶다면
영상 레이어를 넣으면 어떻게 되나요?
입력만 영상으로 갈아 끼우기 카드에서 다룹니다 →용어 풀이
전체 용어집 →- Compositor 노드
- 이미지·텍스트·영상·오디오를 레이어로 받아 하나의 결과로 합성하는 노드입니다. 열면 Figma와 같은 편집 캔버스가 나옵니다.
- 레이어(layer)
- Compositor 안에서 이미지·텍스트 같은 각 입력이 쌓이는 층입니다. Figma의 레이어 패널과 같은 방식으로 순서·위치를 조정합니다.
2026-07-28 기준 · 출처 · Figma deep dive: Weave | Config 2026, Editing Tools