Cowart: Codex에서 AI 이미지를 생성하고 주석으로 수정하는 로컬 무한 캔버스 플러그인

Cowart 소개

이미지를 다루는 작업은 대화형 명령줄만으로는 답답할 때가 많습니다. 어떤 그림을 어디에 놓을지, 어떤 부분을 어떻게 고칠지는 텍스트로 설명하기보다 화면 위에 펼쳐 놓고 보는 편이 직관적입니다. Cowart는 이 간극을 메우는 도구로, AI 코딩 에이전트인 Codex 안에서 열리는 로컬 무한 캔버스(local infinite canvas) 플러그인입니다.

Cowart의 캔버스는 오픈소스 화이트보드 라이브러리인 tldraw 위에 만들어졌습니다. 이 캔버스에서 구상하고, 주석을 달고, 이미지를 생성하고, 주석을 반영해 이미지를 다시 다듬을 수 있습니다. 캔버스는 로컬 웹 서비스로 실행되며, 데이터는 플러그인 저장소가 아니라 현재 작업 중인 사용자 프로젝트의 canvas/ 디렉토리에 저장됩니다. 작업 결과물이 프로젝트 안에 남으므로 버전 관리나 공유가 자연스럽습니다.

이미지 생성 자체는 Codex가 담당합니다. 사용자가 캔버스에 "AI 이미지 홀더" 를 만들고 원하는 그림을 설명하면, Codex가 그 요청을 읽어 이미지를 만들어 홀더에 채웁니다. Cowart는 캔버스와 그 캔버스를 Codex에 연결하는 MCP 도구를 제공하는 접착제 역할을 합니다.

Cowart의 핵심 기능

Cowart가 제공하는 기능은 캔버스, 생성, 수정, 저장의 네 축으로 정리됩니다.

  • 로컬 무한 캔버스: Codex 안에서 tldraw 기반의 무한 캔버스를 열어 이미지와 아이디어를 자유롭게 배치합니다.
  • AI 이미지 생성: 캔버스에 AI 이미지 홀더를 만들고 선택하면, Codex가 홀더의 화면 비율에 맞춰 이미지를 생성해 채웁니다.
  • 주석 기반 이미지 수정: 이미지에 주석을 단 스크린샷을 Codex에 주면, Codex가 주석의 화살표와 메모를 읽어 주석 흔적이 없는 깨끗한 수정본을 만들어 원본 옆에 배치합니다. 원본과 주석은 지우거나 옮기지 않습니다.
  • 프로젝트 로컬 저장과 MCP 연동: 캔버스 페이지와 이미지 자원은 프로젝트 디렉토리에 보존되고, Cowart MCP 도구로 선택 상태를 읽고 이미지를 삽입해 페이지 로컬 자원 디렉토리에 저장합니다.

Cowart 설치

Cowart는 Codex 플러그인으로 설치합니다. 가장 간단한 방법은 Codex에게 설치를 맡기는 것으로, 저장소 주소와 함께 설치 절차를 요청하면 Codex가 저장소를 클론하고 personal marketplace에 등록한 뒤 플러그인을 추가합니다. 직접 설치하려면 다음처럼 저장소를 클론하고 빌드합니다.

mkdir -p ~/plugins
git clone https://github.com/zhongerxin/cowart.git ~/plugins/cowart
cd ~/plugins/cowart
npm install
npm run build

이어서 personal marketplace를 등록하고 플러그인을 추가합니다. 설치가 끝나면 새 스킬과 MCP 도구를 깨끗하게 불러오기 위해 Codex 대화를 새로 시작하라고 안내합니다.

codex plugin marketplace add ~
codex plugin add cowart@personal

Cowart 사용법

캔버스를 열려면 Codex에게 "Open the Cowart canvas for this project." 와 같이 요청합니다. 그러면 Cowart가 http://127.0.0.1:43217/ 에 로컬 서비스를 띄우고, 캔버스 데이터는 현재 프로젝트의 canvas/ 아래에 저장됩니다.

이미지를 생성할 때는 캔버스에 AI 이미지 홀더를 만들어 선택한 뒤 원하는 그림을 설명합니다. Codex가 선택된 홀더를 읽고 화면 비율을 맞춰 이미지를 생성해 홀더에 넣습니다. 이미 있는 이미지를 고치려면 캔버스에서 이미지에 주석을 달고, 그 주석 스크린샷을 찍어 Codex에 전달한 다음 수정본 생성을 요청합니다. Codex는 주석의 메모와 화살표를 읽어 주석이 없는 깨끗한 새 이미지를 만들어 원본 옆에 놓습니다.

Cowart의 스킬과 로컬 개발

Cowart는 세 가지 스킬을 제공합니다. 캔버스를 여는 cowart:cowart-open-canvas, 선택한 AI 이미지 홀더에 생성한 이미지를 넣는 cowart:cowart-image-gen, 사용자가 제공한 주석 스크린샷으로 수정본을 만드는 cowart:cowart-image-edit 입니다.

로컬 개발 시에는 npm run dev로 개발 서버를 띄우거나 저장소의 scripts/start-canvas.sh로 캔버스 서비스를 직접 실행하며 사용자 프로젝트 디렉토리를 넘길 수 있습니다. 로컬 서비스 포트는 COWART_PORT(기본값 43217), 캔버스 데이터를 소유하는 프로젝트 디렉토리는 COWART_PROJECT_DIR, 캔버스 데이터 디렉토리는 COWART_CANVAS_DIR 환경 변수로 조정합니다. 이 프로젝트는 개발자 ZHONG XIN이 만들었습니다.

:github: Cowart 프로젝트 GitHub 저장소

더 읽어보기




이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. :smiley:

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: