Square, Supabase, 그리고 ElevenLabs를 사용해 AI 바리스타를 만든 방법

Source: Dev.to

개요

저는 필라델피아에 BrewHubPHL 라는 기술 중심 커피 허브를 운영하고 있습니다. 오픈했을 때 단순히 “주문 준비 완료” 라는 화면만 깜빡이길 원한 것이 아니라, 매장이 직접 말했으면 했습니다.

여기서는 Supabase Edge Functions 를 사용해 Square POS 와 ElevenLabs 를 연결해 주문을 자동으로 알리는 시스템을 만든 과정을 소개합니다.

사용 스택

• 데이터베이스 & 인증: Supabase
• 결제: Square (POS 및 Webhook)
• 음성 AI: ElevenLabs (Turbo v2 모델)
• 컴퓨팅: Netlify Functions

워크플로우

1. Square 가 결제(payment.updated) 를 감지합니다.
2. Supabase 가 웹훅을 받아 라우팅합니다.
3. ElevenLabs 가 오디오 파일을 생성합니다(예: “John님의 주문이 준비되었습니다!”).
4. 프론트엔드가 오디오를 자동으로 재생합니다.

단계 1: Square 웹훅 잡기

먼저 주문이 실제로 결제된 시점을 알아야 합니다. Square의 payment.updated 이벤트를 수신하도록 서버리스 함수를 설정합니다.

// square-webhook.js
exports.handler = async (event) => {
  const body = JSON.parse(event.body);

  if (
    body.type === 'payment.updated' &&
    body.data.object.payment.status === 'COMPLETED'
  ) {
    const orderId = body.data.object.payment.reference_id;

    // Update Supabase
    await supabase
      .from('orders')
      .update({ status: 'paid' })
      .eq('id', orderId);

    // Trigger the Announcer
    await triggerVoiceAnnouncement(orderId);
  }
};

단계 2: 음성 생성

여기가 마법이 일어나는 부분입니다. 로봇 같은 “텍스트‑투‑스피치” 음성이 아니라 개성을 가진 목소리를 원했습니다. 저는 지연 시간이 짧은 ElevenLabs Turbo v2 모델을 사용했습니다(실시간 소매 환경에 필수).

// text-to-speech.js
const response = await fetch(
  `https://api.elevenlabs.io/v1/text-to-speech/${VOICE_ID}`,
  {
    method: 'POST',
    headers: {
      'xi-api-key': process.env.ELEVENLABS_API_KEY,
    },
    body: JSON.stringify({
      text: "Order ready for specific_customer!",
      model_id: 'eleven_turbo_v2',
      voice_settings: { stability: 0.5, similarity_boost: 0.75 },
    }),
  }
);

왜 이렇게 만들었나요?

단순한 장난이 아닙니다. 바쁜 매장에서는 고객이 바리스타의 외침을 듣지 못합니다. 일관되고 독특한 AI 목소리는 소음 속에서도 눈에 띕니다. Square와 Supabase에 직접 통합함으로써 수작업이 전혀 필요 없습니다—바리스타가 “결제” 버튼만 누르면 코드가 나머지를 처리합니다.

개발자를 위해 동기화 로직은 GitHub에 오픈소스로 공개되어 있습니다: