Vibe Draw 만들기: ElevenLabs와 FLUX Kontext를 결합한 음성 기반 이미지 생성

음성 인터페이스는 AI와 소통하는 방식을 바꾸고 있습니다. 이미지를 만드는 일이 말로 설명하는 것만큼 쉬워진다면 어떨까요?

이런 생각에서 주말 프로젝트로 Vibe Draw를 만들게 됐습니다. 음성을 우선으로 하는 창작 도구로, ElevenLabs의 음성 AI와 Black Forest Labs의 FLUX Kontext를 결합해 음성 프롬프트를 이미지로 바꿉니다.

FLUX Kontext는 새로운 이미지 모델입니다. 기존 텍스트-이미지 시스템과 달리, Kontext는 생성과 편집 모두를 지원합니다. 프롬프트로 새로운 이미지를 만들거나 기존 이미지를 수정하고, 여러 참고 이미지를 하나로 합칠 수도 있습니다.

GPT-4o, Gemini 2 Flash 같은 모델도 멀티모달 기능을 제공하지만, FLUX Kontext는 고품질 시각적 편집에 특화되어 있습니다. 테스트에서는 스타일이 있는 텍스트의 개별 글자를 바꾸거나, 오브젝트 위치를 바꾸는 것도 설명만으로 가능했습니다.

그래서 생각했습니다. “이걸 음성으로 해보면 어떨까?” 그리고 ElevenLabs의 강력한 음성 기술만큼 좋은 기반도 없죠.

기술적 과제

음성 기반 이미지 시스템을 만들기 위해서는 다섯 가지 핵심 문제를 해결해야 했습니다:

1. 자연어 이해 — 새로 만들기와 편집 구분하기
2. 상황 인식 — 여러 상호작용에서 맥락 유지하기
3. 오디오 관리 — 응답이 겹치지 않게 하고 큐 관리하기
4. 시각적 생성 — 생성과 편집을 자연스럽게 전환하기
5. 사용자 경험 — 고급 AI 상호작용을 직관적으로 만들기

아키텍처 개요

Vibe Draw는 완전히 클라이언트에서 동작하며 다음과 같은 구성요소를 통합합니다:

• 웹 스피치 API — 음성 인식용
• ElevenLabs 텍스트 음성 변환(TTS) API — 음성 응답용
• FLUX Kontext API — 이미지 생성 및 편집용
• 커스텀 의도 감지 — 사용자 입력 이해용

이 방식은 프로토타입을 가볍게 유지하지만, 실제 서비스에서는 보안을 위해 서버에서 요청을 중계하는 것이 좋습니다.

ElevenLabs로 음성 구현하기

Vibe Draw는 ElevenLabs의 텍스트 음성 변환(TTS) API를 사용해 대화형 응답을 제공합니다:

const voiceSettings = {
    model_id: "eleven_turbo_v2",
    voice_settings: {
        stability: 0.5,
        similarity_boost: 0.75
    }
};

다양성을 위해, 음성 응답은 미리 정의된 템플릿 중에서 무작위로 선택됩니다:

const responses = {
    generating: [
        "Ooh, I love that idea! Let me bring it to life...",
        "That sounds awesome! Creating it now...",
        "Great description! Working on it..."
    ],
    editing: [
        "Got it! Let me tweak that for you...",
        "Sure thing! Making those changes...",
        "No problem! Adjusting it now..."
    ]
};

function getRandomResponse(type) {
    const options = responses[type];
    return options[Math.floor(Math.random() * options.length)];
}

오디오 재생 관리

음성 응답이 겹치면 대화의 몰입감이 깨집니다. Vibe Draw는 오디오 큐 시스템으로 이를 해결합니다:

let audioQueue = [];
let isPlayingAudio = false;

async function queueAudioResponse(text) {
    audioQueue.push(text);
    if (!isPlayingAudio) {
        playNextAudio();
    }
}

각 메시지는 완전히 재생된 후 다음 메시지가 시작됩니다.

의도 감지와 맥락 관리

시스템은 키워드와 맥락을 감지해 사용자의 프롬프트가 새 이미지 요청인지, 편집 요청인지 판단합니다:

const editKeywords = [ ... ];
const contextualEditPhrases = [ ... ];

if (currentImage && (hasEditKeyword || hasContextClue)) {
    await handleEditRequest(text);
} else {
    await handleGenerateRequest(text);
}

이 방식으로 기존 이미지가 있을 때만 편집이 적용되고, 맥락이 명확할 때만 동작합니다.

FLUX Kontext로 이미지 생성

Kontext는 생성과 편집, 두 가지 모드를 지원합니다.

생성 (텍스트 → 이미지)

const response = await fetch('https://fal.run/fal-ai/flux-pro/kontext/text-to-image', {
    ...
    body: JSON.stringify({
        prompt: enhancedPrompt,
        guidance_scale: 3.5,
        num_images: 1,
        safety_tolerance: "2",
        output_format: "jpeg"
    })
});

편집 (맥락 기반 변환)

const response = await fetch('https://fal.run/fal-ai/flux-pro/kontext', {
    ...
    body: JSON.stringify({
        prompt: instruction,
        image_url: currentImage,
        guidance_scale: 3.5,
        num_images: 1
    })
});

복잡한 변환 처리

일부 프롬프트는 편집 API의 한계를 넘는 변화를 요구할 수 있습니다. 이럴 때 시스템은 대체 방법을 제안합니다:

if (hasSignificantChange) {
    try {
        const enhanced = instruction + ", maintain composition but apply requested changes";
        await editImage(enhanced);
    } catch {
        queueAudioResponse("That's quite a transformation! Would you like me to create a fresh image instead?");
    }
}

경험 최적화

점진적 피드백

UI 피드백으로 사용자가 시스템 상태를 쉽게 파악할 수 있습니다:

function updateUI(state) {
    switch(state) {
        case 'listening': ...
        case 'processing': ...
        case 'generating': ...
        case 'ready': ...
    }
}

지능형 타이밍

자연스러운 대화에는 자연스러운 타이밍이 필요합니다:

if (Math.random() > 0.7) {
    setTimeout(() => {
        queueAudioResponse("Want me to change anything about it?");
    }, 3000);
}

세션 상태

맥락 유지를 위해 세션 데이터를 저장합니다:

const saveState = () => { ... };
const restoreState = () => { ... };

성능 고려사항

빠른 응답성을 위해:

• 지연 로딩 — 필요할 때만 API 초기화
• 디바운싱 — 상호작용당 API 요청 제한
• 에러 처리 — 타임아웃이나 오류 발생 시 부드럽게 복구
• 리소스 정리 — 오디오 객체와 이벤트 리스너 적절히 해제

앞으로의 방향

대화형 UI로 새로운 가능성이 열립니다:

• 멀티모달 입력 — “이 사진처럼 만들어줘.”
• 협업 세션 — 여러 사용자가 하나의 디자인에 참여
• 스타일 기억 — 시스템이 사용자의 취향을 학습
• 실시간 스트리밍 — 사용자가 말하는 동안 이미지 업데이트를 스트리밍하고 대화형 AI 를 연동해 음성도 실시간으로 제공합니다.

핵심 요약

Vibe Draw를 만들면서 음성 기반 도구의 핵심 원칙을 발견했습니다:

1. 맥락이 가장 중요 — 상태를 추적하면 상호작용이 자연스러워집니다
2. 타이밍이 개성을 더함 — 응답 속도를 조절하면 AI가 더 반응적으로 느껴집니다
3. 대체안으로 흐름 유지 — 생성이 실패하면 다른 방법을 제시
4. 다양성이 신선함을 유지 — 같은 말을 반복하면 몰입감이 깨집니다

맺음말

Vibe Draw는 대화형 음성 AI와 시각적 창의성이 만났을 때 어떤 일이 일어나는지 보여줍니다. ElevenLabs의 자연스러운 음성 합성과 FLUX Kontext의 이미지 API가 결합해 클릭이나 슬라이더 없이, 오직 말로 새로운 창작 방식을 만듭니다.

설명만큼 쉽게 창작할 수 있다면, 상상과 실현 사이의 장벽이 사라집니다.

직접 체험해보세요

전체 소스 코드는 GitHub에서 확인할 수 있습니다. 직접 실행하려면:

1. 레포지토리 클론
2. ElevenLabs API 키 추가
3. FAL.ai API 키 추가
4. vibe-draw-v2.html을 최신 브라우저에서 열기
5. 마이크를 클릭하고 바로 창작 시작
   
   직접 음성 기반 경험을 만들고 싶으신가요? ElevenLabs 대화형 AI를 살펴보거나 문의하기.