「이미지 생성 AI를 사용해보고 싶지만, Midjourney의 월간 요금은 좀 부담스러운데...」 「인포그래픽을 AI로 만들고 싶지만, 프롬프트가 너무 어렵다」

그런 고민을 한 번에 해결할 Web 앱을 만들어 보았습니다. AI 이미지 스튜디오 (lumichy/ai-image-studio)는 Agnes AI의 무제한·무료 API를 활용하여, 텍스트 입력만으로 지식 만화·인포그래픽·일반 이미지 생성을 GUI 조작으로 구현할 수 있는 풀스택 (Full-stack) Web 앱입니다.

LLM (대규모 언어 모델)이 「AI에 의한 프롬프트 보완」을 담당하여, 사용자가 일본어로 간단한 키워드를 입력하는 것만으로 복잡한 이미지 생성 프롬프트를 자동 생성하여 아름다운 비주얼을 출력합니다.

본 기사에서는 이 앱의 기능·구현·조작 방법을 철저히 해설합니다.

Agnes AI는 현재 완전 무료·무제한으로 API를 제공하고 있습니다. 월간 요금이나 종량제 과금은 일절 없습니다. 이것이 이 앱의 가장 큰 강점입니다. Midjourney나 DALL-E의 대안으로서, 비용 0으로 본격적인 이미지 생성을 이용할 수 있습니다.

심플한 텍스트 프롬프트로부터 이미지를 생성하는 베이직 모드.

조작 방법:

• 「프롬프트」란에 생성하고 싶은 이미지의 설명을 입력 (최대 500자)
• 스타일을 GUI 버튼으로 선택 (6종류)
• 사이즈 (1:1 정사각형 / 16:9 가로형 / 9:16 세로형 / 4:3 가로형)를 선택
• 「이미지 생성」 버튼을 클릭

선택 가능한 스타일:

• 애니메이션 (기본값)
• 리얼
• 유화
• 사이버펑크 (Cyberpunk)
• 수채화
• 사진

왼쪽 패널에 프롬프트 입력란·스타일 선택·사이즈 선택. 오른쪽 패널에 생성 결과가 표시됨

실제로 「축구를 하고 있는 소년」을 「수채화」 스타일·16:9 가로형으로 생성한 결과. 생성 프롬프트와 생성된 이미지를 다운로드하는 버튼이 오른쪽 패널에 표시됨

참조 이미지를 업로드하고, 프롬프트에 따라 이미지를 편집·변환하는 모드. Agnes API의 extra_body.image 파라미터를 활용하여 참조 이미지의 URL을 전달하는 구조입니다.

조작 방법:

• 참조 이미지를 업로드 (Base64 인코딩 후, 임시 호스트에 업로드하여 URL 취득)
• 편집 내용을 프롬프트로 지정
• 「이미지 생성」 버튼을 클릭

이 앱의 최대 특징 기능입니다. 테마를 입력하는 것만으로 LLM이 적절한 레이아웃·스타일을 자동으로 추천하여, 복잡한 인포그래픽을 생성합니다.

준비된 레이아웃 (20종류 이상):

인포그래픽 스타일 (12종류 이상):

• 핸드메이드 크래프트 (기본값)
• 클레이메이션 (3D 점토)
• 귀여운 계열 (파스텔)
• 그림책 수채화
• 초크보드 (칠판)
• 사이버펑크 (네온)
• 볼드 그래픽 (코믹 스타일)
• 앤티크 학술 (레트로)
• 기술 블루프린트 (Blueprint)
• 종이접기 등

레이아웃·스타일·종횡비(Aspect Ratio)를 GUI로 선택. 「AI에게 맡기기」를 선택하면 LLM이 최적의 조합을 추천함

2단계 생성 플로우:

• 테마 입력 + 추천 취득: 테마를 입력하고 「추천 취득」을 클릭 → LLM이 테마를 분석하여 최적의 레이아웃 + 스타일 조합을 여러 개 제안
• 생성 실행: 제안을 확인하고 「인포그래픽 생성」을 클릭 → Agnes AI가 실제 이미지를 생성

▼ 실제 생성 샘플 (테마: 「How LLM AI Agents Work」 / 레이아웃: 허브 앤 스포크 (Hub & Spoke) / 스타일: 크래프트)

Planning(기획)・Tool Use(도구 사용)・Memory(메모리)・Action(액션)의 4요소를 허브로부터 방사형으로 전개한 인포그래픽이 자동 생성되었다. 허브 앤 스포크(Hub & Spoke) 레이아웃과 크래프트(Craft) 스타일의 조합을 인포그래픽 기능이 자동으로 선택

테마를 입력하면 LLM이 스토리보드(컷 구성안)를 생성하고, 그대로 AI가 컷 만화를 그립니다. 기술 해설·역사·개념 설명을 만화 형식으로 자동 생성할 수 있는 독특한 기능입니다.

아트 스타일 (6종류):

• ligne-claire (클리어 라인)
• 만화 (Manga)
• 리얼 (Real)
• 잉크 브러시 (Ink Brush)
• 초크 (Chalk)
• 미니멀리스트 (Minimalist)

톤 (7종류):

• 뉴트럴(Neutral)・따뜻함(Warm)・드라마틱(Dramatic)・로맨틱(Romantic)・에너제틱(Energetic)・빈티지(Vintage)・액션(Action)

컷 레이아웃 (7종류):

• 스탠다드(Standard)・시네마틱(Cinematic)・고밀도(High-density)・스플래시(Splash)・혼합(Mixed)・웹툰(Webtoon)・4컷(4-panel)

▼ 실제 생성 샘플 (테마: 「How Git Works」 / 스타일: 만화 / 4컷)

git commit → git branch → 독립 개발 → git merge의 흐름을 깔끔한 4컷 만화 스타일로 자동 생성. 아트 스타일·톤·컷 나누기를 각각 커스텀 가능

ai-image-studio/
├── src/
│ ├── app/
...

// src/lib/agnes.ts 보다
const API_BASE_URL = 'https://apihub.agnes-ai.com/v1';
const API_KEY = process.env.AGNES_API_KEY;
...

인포그래픽·지식 만화에서는 사용자가 입력한 심플한 테마를 LLM이 분석하여, Agnes AI로 전달할 상세한 프롬프트(Prompt)로 변환합니다.

• 사용자가 「React의 동작 원리」라고 입력
• LLM (OpenAI 호환 엔드포인트)이 테마를 분석
• 테마에 최적화된 레이아웃·스타일 조합(Combo)을 여러 후보로 제안
• 사용자가 후보를 확인 및 선택
• 선택된 Combo를 기반으로 상세 프롬프트를 구성하여 Agnes AI에 전송

// 인포그래픽의 Combo 타입 정의 (InfographicFlow.tsx)
interface Combo {
layoutId: string; // 레이아웃 ID (예: 'linear-progression')
...

React Context를 사용한 심플한 i18n 구현. useI18n() 훅을 통해 중문(Chinese)・영어(English)・일본어를 전환할 수 있습니다.

const { t } = useI18n();
const label = t('common.reset'); // "리셋" (일본어 시)

# 1. 리포지토리를 클론
git clone https://github.com/lumichy/ai-image-studio.git
cd ai-image-studio
...

# .env.local 설정 예시
AGNES_API_BASE_URL: https://apihub.agnes-ai.com/v1
AGNES_API_KEY: sk-xxxxxxxxxxxx # Agnes AI에서 무료 취득
...

# 4. 개발 서버 실행
npm run dev
# → http://localhost:3000/ 에서 접속 가능

AI 이미지 스튜디오는 다음과 같은 3가지 점이 돋보이는 OSS 앱입니다.

비용 0으로 본격적인 이미지 생성: Agnes AI의 무제한·무료 API를 통해 월간 요금 없이 Midjourney 품질의 이미지 생성이 가능
LLM을 통한 프롬프트 자동 보완: 사용자는 일본어(또는 간단한 키워드)로 심플한 키워드를 입력하기만 하면 됩니다. 레이아웃·스타일의 최적 조합을 AI가 제안
지식 만화·인포그래픽이라는 독자적인 유스케이스: 교육 콘텐츠·기술 기사의 도해·SNS 포스팅용 인포그래픽을 전자동으로 생성 가능

Next.js + TypeScript를 이용한 구현은 깔끔하고 확장하기 쉬우며, 새로운 레이아웃이나 스타일의 추가도 용이합니다. Agnes AI의 API가 무료인 지금, 꼭 한번 시도해 보세요!

실제로 시도해 보신 분은 어떤 인포그래픽이나 만화를 생성하셨나요?

댓글창에 꼭 공유해 주세요! 🎨