FigGenie란 무엇인가요?
FigGenie는 기술 논문에 바로 사용할 수 있는 그림을 그리는 AI 에이전트 스킬입니다. 시스템 설명, 메커니즘, 기존 그림 또는 기타 참고 자료를 에이전트에 제공하면, 에이전트가 간단한 설명 작성, 그리기, 렌더링, 린트 검사, 시각적 검토 및 수정 과정을 안내합니다.
비트맵 이미지 생성기와 달리 FigGenie는 편집 가능한 벡터 그래픽을 만듭니다. 주요 결과물은 글꼴이 포함되고 요소에 이름이 지정된 SVG입니다. LaTeX용 그림 크기 PDF, PNG 미리 보기, 초안 캡션, 그리고 요청 시 편집 가능한 PowerPoint 프레젠테이션도 생성할 수 있습니다.
이 프로젝트는 현재 시스템 연구에서 사용되는 그림을 중심으로 설계되었습니다. 규칙은 2023년부터 2026년까지 발표된 1,113편의 OSDI, NSDI, SOSP 및 ASPLOS 논문에서 수집한 12,577개의 그림을 기반으로 도출되었습니다. 유지 관리자들은 2,041개의 그림을 수작업으로 평가하고, 결과를 20개의 아키텍처 레이아웃, 5개의 메커니즘 계열, 21개의 팔레트, 485개의 주석이 달린 예시, 2,853개의 재사용 가능한 부품으로 정리했습니다.
주요 기능
- 아키텍처 다이어그램: 구성 요소, 제어 흐름, 데이터 흐름, 실행 단계 및 관련 시스템 구조를 표현할 수 있는 20개의 레이아웃 템플릿 중에서 선택합니다.
- 메커니즘 그림: 비교, 발전 과정, 논리, 단계별 설명 및 구조 분석 그림을 만듭니다.
- 편집 가능한 벡터 출력: 결과 SVG를 Illustrator 또는 호환되는 다른 벡터 편집기에서 열고 개별 요소를 계속 편집할 수 있습니다.
- 논문용 PDF: LaTeX 문서에 삽입할 수 있도록 그림 크기에 맞게 잘린 PDF를 내보냅니다.
- 편집 가능한 PowerPoint: 기본 도형은 네이티브 도형으로 변환되고, 레이블은 실시간 텍스트로 유지되며, 그룹 이름은 사양 ID를 기반으로 유지되는 PPTX를 요청할 수 있습니다.
- 수식 지원: 선택 사항인 Node.js 및 MathJax 설정을 사용해 벡터 TeX 수식을 포함할 수 있습니다.
- 다국어 레이블: 라틴 문자와 함께 중국어 및 기타 CJK 텍스트를 사용할 수 있습니다.
- 혼합 콘텐츠: 벡터 요소를 아이콘, 스크린샷, 사진 또는 기타 비트맵과 결합할 수 있습니다.
- 자동 검사: FigGenie는 헤드리스 Chromium에서 그림을 렌더링하고 측정하며, 린터를 실행하고, 편집 후 결과를 시각적으로 검토합니다.
- 인쇄 크기 기반 설계: 그림은 240포인트 논문 본문 열을 기준으로 포인트 단위로 그려지므로 출판 크기에서도 레이블을 읽을 수 있습니다.
설치 전에 확인할 사항
스킬을 불러오고 셸 명령을 실행하며 렌더링된 PNG를 검사할 수 있는 AI 에이전트가 필요합니다. FigGenie는 Claude Code 플러그인으로 직접 설치할 수 있으며, Codex 및 호환 에이전트에서 표준 Agent Skill로 불러올 수 있습니다.
필요한 로컬 종속 항목은 다음과 같습니다.
- Python 3
- Playwright 및 헤드리스 Chromium 설치
- Python 패키지
lxml,pillow,playwright및fonttools
Node.js 18 이상은 선택 사항이며 TeX 수식에 사용됩니다. PowerPoint 내보내기에는 선택 사항인 python-pptx 패키지도 필요합니다. PowerPoint에서 네이티브 수식을 사용하려면 Office의 mathml2omml.xsl도 필요합니다.
설치 방법 1: 에이전트에게 FigGenie 설치 요청
가장 간단한 방법은 AI 에이전트에 저장소 URL을 제공하고 스킬과 종속 항목을 설치하도록 요청하는 것입니다.
Install this skill and set up its dependencies: https://github.com/Sleepy-Avacado/FigGenie설치 후 에이전트가 스킬을 찾고, 스크립트를 실행하고, Chromium을 헤드리스 모드로 시작하며, PNG 미리 보기를 검사할 수 있는지 확인합니다.
설치 방법 2: Claude Code 플러그인 설치
Claude Code에서 FigGenie 마켓플레이스를 추가한 다음 플러그인을 설치합니다.
/plugin marketplace add Sleepy-Avacado/FigGenie
/plugin install figgenie@figgenie플러그인이 활성화되면 Claude Code에 논문 그림의 생성, 검토, 수정 또는 재작성을 요청할 수 있습니다.
설치 방법 3: Agent Skill로 설치
FigGenie는 SKILL.md 파일, 스크립트 및 참고 자료로 구성된 일반 Agent Skill입니다. 저장소를 복제한 다음 스킬 디렉터리를 에이전트의 스킬 위치에 연결합니다.
git clone https://github.com/Sleepy-Avacado/FigGenie.git
mkdir -p ~/.agents/skills
ln -s "$PWD/FigGenie/skills/figgenie-paper-diagram" ~/.agents/skills/figgenie-paper-diagram이전 Codex 버전은 ~/.codex/skills에서 스킬을 읽습니다. 설치 환경이 ~/.agents/skills에서 스킬을 검색하지 못하면 대신 이전 디렉터리에 배치하거나 연결하세요.
필수 렌더링 종속 항목 설치
pip install lxml pillow playwright fonttools
playwright install chromium이 패키지들은 XML 처리, 이미지 처리, 글꼴 도구, 브라우저 자동화, 렌더링 및 린트 검사 기능을 제공합니다.
선택 사항인 PowerPoint 내보내기 활성화
pip install python-pptx그림에 TeX 수식이 필요한 경우 Node.js 18 이상을 설치합니다. 프로젝트 문서에 따르면 MathJax는 처음 사용할 때 자동으로 설치됩니다.
첫 그림 만들기
FigGenie는 고정된 명령줄 그리기 문법이 아니라 대화를 통해 작동합니다. 그림에서 전달해야 할 내용, 그림이 들어갈 위치, 필요한 결과물을 에이전트에 설명하는 것부터 시작하세요.
예를 들어 다음과 같은 프롬프트로 아키텍처 그림을 요청할 수 있습니다.
이 시스템 설명을 위한 논문 게재용 아키텍처 그림을 작성하세요.
데이터 플레인 위에 컨트롤 플레인을 배치하고, 요청 흐름과 데이터 전송을 구분하며, 단일 논문 열에서도 라벨을 읽기 쉽게 유지하세요.
SVG, PDF, PNG 미리보기 및 캡션 초안을 제공하세요.
시스템 설명:
[여기에 설명을 붙여넣으세요]에이전트는 그림을 그리기 전에 간략한 설계안을 준비해야 합니다. 이 설계안은 의도한 메시지, 시각적 계층 구조, 구성 요소, 관계 및 출력 요구 사항을 설정하므로 신중하게 검토하세요.
- 원본 자료를 제공하세요. 문단, 구조화된 메모, 구성 요소 목록, 메커니즘 설명 또는 개선이 필요한 기존 그림을 붙여넣으세요.
- 설계안을 검토하세요. 그림이 무엇을 전달해야 하는지, 어떤 세부 사항을 강조하거나 생략해야 하는지 확인하세요.
- 계획을 확인하세요. 에이전트가 적절한 아키텍처 템플릿이나 메커니즘 유형을 선택하도록 하세요.
- 그림을 생성하세요. FigGenie가 확인된 사양에 따라 벡터 그림을 작성합니다.
- 검사를 실행하세요. 에이전트가 그림을 렌더링하고, 기하 구조를 린트하며, 미리보기를 검사하고, 감지된 문제를 수정합니다.
- 결과물을 검토하세요. SVG 또는 PNG 미리보기를 확인하고 일반적인 언어로 변경 사항을 요청하세요.
적절한 그림 유형 선택
아키텍처 그림
독자가 주요 구성 요소와 그 관계를 이해해야 할 때 아키텍처 그림을 사용하세요. 원하는 계층 구조와 중요한 흐름을 명시적으로 작성하세요. 예를 들면 다음과 같습니다.
아래 설명을 바탕으로 아키텍처 그림을 그리세요.
구성 요소를 클라이언트, 컨트롤 플레인 및 워커 계층으로 그룹화하세요.
동기식 요청은 실선 화살표로, 백그라운드 업데이트는 점선 화살표로 표시하세요.
스케줄러와 공유 캐시를 강조하세요.
240pt 단일 열 레이아웃을 사용하세요.모든 구현 세부 사항을 프롬프트에 과도하게 담지 마세요. 독자가 즉시 이해해야 하는 개념을 식별하고, 부차적인 세부 사항은 시각적으로 종속된 상태로 두세요.
메커니즘 그림
시간에 따른 동작을 설명하거나, 대안을 비교하거나, 순서를 제시하거나, 내부 구조를 보여 주거나, 프로세스를 단계별로 설명할 때 메커니즘 그림을 사용하세요. FigGenie는 비교, 진화, 논리, 순서 안내 및 구조 해부의 다섯 가지 메커니즘 유형을 제공합니다.
비교 요청은 다음과 같이 작성할 수 있습니다.
왼쪽에는 기준 방식을, 오른쪽에는 제안 방식을 배치한 비교 메커니즘 그림을 작성하세요.
두 패널에서 동일한 타임라인 척도를 사용하세요.
유휴 구간을 강조하고 최종 단계가 시작될 수 있는 시점을 표시하세요.
아래 데이터의 정확한 값을 포함하고 간결한 캡션을 작성하세요.README의 갤러리는 가상의 시스템과 값을 사용하므로, 갤러리 그림은 자신의 논문을 위한 사실 자료가 아니라 스타일과 구조를 보여 주는 예시로 취급하세요.
일상적인 언어로 그림 수정
미리보기를 검토한 후 구체적인 용어로 변경 사항을 설명하세요. 모든 수정에서 기본 SVG를 직접 편집할 필요는 없습니다.
스케줄러를 주요 시각적 초점으로 만드세요.
모니터링 경로의 시각적 비중을 줄이세요.
가장 작은 라벨의 크기를 키우세요.
워커 상자를 정렬하고 교차하는 화살표를 짧게 하세요.
최종 그림이 240pt 열 안에 들어가도록 유지하세요.
편집 후 다시 렌더링하고 린트하세요.FigGenie의 워크플로는 수정 요청 후 그림 작성 단계로 돌아가도록 설계되어 있습니다. 의미 있는 편집을 수행할 때마다 렌더링, 린트, 시각적 검사 및 수정을 반복해야 합니다.
결과 내보내기 및 편집
SVG
SVG는 기본 편집 가능한 벡터 결과물입니다. 글꼴이 포함되어 있으며 요소에 이름이 지정되어 호환되는 편집기에서 식별할 수 있습니다. 벡터 애플리케이션에서 간격, 색상, 라벨 또는 기하 구조를 조정할 예정이라면 SVG를 사용하세요.
PDF는 그림 크기에 맞게 잘려 있으며 LaTeX와 같은 논문 작업 흐름을 위한 형식입니다. 확대했을 때의 가독성만으로 판단하지 말고 실제 출판 크기에서 확인하세요.
PNG 및 캡션 초안
PNG는 검사와 협업에 편리한 미리보기를 제공합니다. 캡션 초안은 시작점으로 사용할 수 있지만, 원고의 용어, 주장 및 관례에 맞는지 여전히 확인해야 합니다.
PowerPoint
PowerPoint에서 그림을 편집해야 한다면 PPTX를 명시적으로 요청하세요. FigGenie는 SVG와 동일한 좌표에서 기본 도형으로 프리미티브를 변환합니다. 라벨은 편집 가능한 텍스트로 유지되며 그룹 이름에는 요소 ID가 사용됩니다.
이 그림을 편집 가능한 PowerPoint 프레젠테이션으로도 내보내세요.
상자는 기본 도형으로, 라벨은 편집 가능한 텍스트로 유지하고, 이름이 지정된 그룹을 보존하세요.
고급 팁
최종 인쇄 크기에 맞게 설계
그림이 한 열을 차지할지 더 넓은 레이아웃을 사용할지 지정하세요. FigGenie의 기본 원칙은 240포인트 열을 기준으로 하지만, 논문에서 사용할 크기로 내보낸 PDF를 여전히 확인해야 합니다. 가장 작은 라벨, 화살표 주석, 범례 및 수식의 아래 첨자에 특히 주의하세요.
사실과 표현 선호 사항을 구분
에이전트에게 정확한 구성 요소 이름, 측정값, 순서 제약 조건 및 관계를 제공하세요. 그런 다음 시각적 선호 사항을 별도로 나열하세요. 이렇게 하면 스타일 지정 요청이 시스템 속성으로 잘못 해석될 가능성을 줄일 수 있습니다.
설명에 도움이 될 때만 수식을 요청
메커니즘이 수학적 관계에 의존한다면 TeX 표현식을 포함하고 그 역할을 설명하세요. 선택적 MathJax 기반 수식 워크플로를 사용하려면 Node.js 18 이상이 필요합니다. 편집 가능성과 인쇄 품질이 중요할 때는 붙여 넣은 방정식 스크린샷보다 벡터 수식을 사용하는 것이 좋습니다.
다국어 텍스트를 일찍 계획하세요
FigGenie는 중국어 및 기타 CJK 레이블을 지원합니다. 최종 그림을 그리기 전에 에이전트에게 사용할 언어를 알려 주세요. 그러면 레이아웃 과정에서 텍스트 너비와 줄바꿈을 고려할 수 있습니다.
비트맵은 선별적으로 사용하세요
스크린샷과 사진을 그림 안에 배치할 수 있지만, 상자, 연결선, 레이블, 수식을 벡터 요소로 표현하면 주변 다이어그램을 가장 쉽게 편집할 수 있습니다. 비트맵 콘텐츠에는 충분히 고해상도인 원본 이미지를 제공하세요.
비평과 다시 그리기를 요청하세요
처음부터 산문으로 시작하는 대신 기존 그림에 FigGenie를 사용할 수 있습니다. 에이전트에게 계층 구조, 간격, 가독성, 구조를 비평하도록 요청한 다음, 사실 콘텐츠는 유지한 채 다시 그리도록 요청하세요. 제안된 단순화를 수락하기 전에 반드시 확인하세요.
자동 검증을 계속 활용하세요
첫 번째 렌더링을 최종 결과로 간주하지 마세요. 수정 후 에이전트에게 렌더링과 린팅을 다시 실행하도록 요청하세요. 자동 측정은 기하학적 문제를 찾아낼 수 있고, 시각적 검토는 혼란스러운 강조, 어색한 경로, 기술적으로는 들어가지만 여전히 읽기 어려운 레이블을 발견하는 데 도움이 됩니다.
현재의 제한 사항을 파악하세요
대화형 편집기는 로드맵에 포함되어 있으며 현재는 제공되지 않습니다. NeurIPS, ICML, ICLR, CVPR, ACL과 같은 주요 AI 학회 스타일과 draw.io 및 OmniGraffle 같은 편집기 지원도 현재 기능이 아니라 로드맵 항목입니다.
라이선스 및 저작자 표시
FigGenie의 코드와 문서는 MIT 라이선스로 공개됩니다. 출판된 논문에서 가져온 그림과 재사용 가능한 구성 요소는 해당 저자의 재산으로 남으며, 함께 제공되는 글꼴에는 각자의 라이선스가 적용됩니다. 포함된 에셋을 재배포하기 전에 저장소의 저작자 표시, 출처, 글꼴 라이선스 문서를 검토하세요.
결론
FigGenie는 연구 설명을 편집 가능하고 출판에 적합한 그림으로 변환하는 구조화된 방법을 제공합니다. Claude Code 플러그인 또는 Agent Skill로 설치하고, 집중된 설명을 제공한 뒤, 작업 개요를 확인하고 렌더링, 린팅, 시각적 검토를 반복하세요. 논문 제작에는 SVG 또는 PDF로 내보내고, 공동 작업자가 기본 PowerPoint 편집을 해야 할 때는 PPTX를 요청하세요.