시작하기
외부 서비스 준비
이 페이지의 내용
  1. Google Cloud (TTS · STT)
  2. OpenAI
  3. ElevenLabs
  4. 텔레그램 봇
  5. Firebase Realtime Database
  6. 사운드 폰트에서 악기 선택
  7. 날씨 데이터 받아오기

외부 서비스 준비

일부 설정 항목은 외부 서비스에서 발급한 키나 값을 입력해야 사용할 수 있습니다. 각 서비스에서 필요한 값을 얻는 방법입니다.

서비스Grablo 에 입력할 값사용하는 곳
Google CloudAPI 키텍스트 음성 변환, 음성 텍스트 변환
OpenAIAPI 키텍스트 음성 변환, 음성 텍스트 변환, LLM AI
ElevenLabsAPI 키, Voice ID텍스트 음성 변환
텔레그램봇 토큰, Chat ID텔레그램 봇 설정, 텔레그램 메시지 동작
Firebase데이터베이스 주소, 웹 API 키, 로그인 계정데이터베이스
사운드 폰트뱅크, 프리셋 번호전자 악기 연주 동작
주의 API 키가 유출되면 다른 사람이 키를 무단으로 사용하여 요금이 청구되는 등의 피해가 발생할 수 있습니다. 발급한 키는 외부에 공개하지 않고, 유출이 의심되면 해당 서비스에서 키를 삭제하고 새로 발급합니다.

Google Cloud (TTS · STT)

  1. Google Cloud 에 로그인하고 우측 상단의 콘솔을 클릭합니다. 상단의 프로젝트 선택 버튼에서 새 프로젝트를 만들고, 결제에 결제 수단을 등록하여 프로젝트에 연결합니다.
  2. API 및 서비스 에서 Text-to-Speech API 와 Speech-to-Text API 를 각각 찾아 사용을 활성화합니다.검색 창에 text to speech, speech to text 를 입력하면 찾을 수 있습니다.
  3. API 및 서비스 > 사용자 인증 정보 에서 + 사용자 인증 정보 만들기 → API 키로 키를 만들고 값을 복사합니다.
  4. 같은 화면의 키 제한에서 사용 대상을 위 두 API 로 한정합니다.제한하지 않은 키는 프로젝트 안의 모든 애플리케이션과 API 에 사용될 수 있습니다. 키가 유출되었을 때의 피해 범위를 줄이는 조치입니다.

OpenAI

  1. OpenAI 플랫폼(platform.openai.com)에 로그인하고 Dashboard > API keys 에서 + Create new secret key → Create secret key 를 클릭한 뒤 Copy 로 값을 복사합니다.키 값은 만들 때 한 번만 표시되므로 바로 복사해 둡니다.
  2. 설정 > Billing > Payment methods 에서 결제 수단을 등록하고 사용할 금액을 충전합니다.OpenAI 의 음성 변환에는 무료 사용량이 없으므로 충전이 필요합니다.

ElevenLabs

  1. ElevenLabs 홈페이지에서 회원 가입한 뒤 좌측 하단의 계정 이름 → API Keys → Create Key 를 클릭합니다. 이름은 기본값을 그대로 두고 Create 를 클릭한 뒤 표시된 키 값을 복사합니다.
  2. 좌측 메뉴의 Voices 에서 사용할 음성을 미리 들어 보고 View → ID 를 클릭하여 Voice ID 를 복사합니다.API 키만으로는 설정이 완성되지 않습니다. Voice ID 를 함께 입력해야 합니다.

텔레그램 봇

  1. 텔레그램에서 BotFather 를 찾아 START 로 대화를 시작하고 /newbot 을 입력합니다.
  2. 봇의 표시 이름을 입력하고, 이어서 사용자 이름을 입력합니다.사용자 이름은 bot 으로 끝나야 하며 다른 봇과 겹치지 않아야 합니다.
  3. 발급된 토큰을 설정 → 텔레그램 봇의 토큰 항목에 입력합니다.
  4. 만들어진 봇의 주소를 클릭해 채팅방을 열고 START 를 눌러 대화를 시작합니다.이 과정을 거치지 않으면 봇이 메시지를 보낼 수 없습니다.
  5. 텔레그램에서 @userinfobot 을 찾아 시작하면 자신의 Chat ID 를 알려줍니다. 이 값을 동작 → 텔레그램 메시지의 Chat ID 에 입력합니다.Chat ID 는 메시지를 받을 사용자, 그룹, 채널을 가리키는 고유 번호입니다.

Firebase Realtime Database

  1. Firebase 콘솔(Go to console)에서 새 프로젝트를 만듭니다. 프로젝트 이름을 입력하고 계속을 클릭하며, Google 애널리틱스는 사용하지 않음으로 설정하고 프로젝트 만들기를 클릭합니다.
  2. 제품 목록에서 Realtime Database 를 선택하고 데이터베이스 만들기를 클릭합니다. 데이터베이스 위치를 선택하고 다음을 클릭한 뒤, 보안 규칙은 잠금 모드로 시작을 선택합니다.
  3. 화면 상단에 표시되는 데이터베이스 주소를 링크 버튼으로 복사합니다.
  4. Authentication → 로그인 방법에서 사용할 방식을 활성화합니다. 이메일과 비밀번호로 접근하려면 이메일/비밀번호의 사용 설정 스위치를 켜고 저장한 뒤 사용자 탭에서 계정을 추가하며(여러 계정을 추가할 수 있습니다), 로그인 없이 접근하려면 새 제공업체 추가에서 익명을 활성화합니다.로그인 방법은 나중에 구성 수정으로 언제든지 바꿀 수 있습니다.
  5. 프로젝트 개요 옆의 톱니 아이콘 → 프로젝트 설정 → 일반에서 웹 API 키를 복사합니다.웹 API 키는 컨트롤러가 Firebase 데이터베이스 서버에 연결할 때 필요합니다.
  6. Realtime Database → 규칙 탭에서 기존 내용을 지우고 아래 규칙을 붙여 넣은 뒤 게시를 클릭합니다.잠금 모드로 만든 데이터베이스는 누구도 접근할 수 없습니다. 이 규칙을 적용하면 위에서 허용한 사용자만 접근할 수 있습니다.
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

사운드 폰트에서 악기 선택

전자 악기 설정에는 사운드 폰트 파일과 함께 악기를 가리키는 뱅크와 프리셋 번호를 입력합니다. 이 번호는 사운드 폰트 편집기에서 확인합니다. Polyphone 과 같은 편집기로 사운드 폰트(sf2, sf3)를 열고 프리셋 목록에서 악기를 선택한 뒤, 가상 건반으로 소리를 확인하고 화면 아래에 표시된 뱅크와 프리셋 값을 그대로 입력합니다.

Polyphone 은 polyphone.io 에서 내려받습니다. 프리셋 목록은 화살표 버튼으로 펼치고, 가상 건반은 우측 상단의 피아노 건반 아이콘으로 엽니다. 입력한 값은 전자 악기 연주 동작에서 사용합니다.

날씨 데이터 받아오기

Grablo 에는 날씨 전용 동작이 없으므로 HTTP 통신 동작으로 날씨 API 를 호출합니다. WeatherAPI.com 을 예로 들면, 가입 후 대시보드에서 API 키를 확인하고 아래 형식으로 요청합니다.

https://api.weatherapi.com/v1/forecast.json?key=API_KEY&q=Seoul&days=3&lang=ko

일반 형식은 다음과 같습니다.

https://api.weatherapi.com/v1/forecast.데이터타입?key=API_KEY&q=지역&days=예보일수&lang=언어코드
항목설명
데이터타입json 또는 xml
keyWeatherAPI 대시보드에 표시된 API 키
q도시 이름(영문, 예: Seoul, Busan, Incheon, Daegu, Daejeon, Gwangju, Ulsan, Jeju, London), 위도와 경도(예: 37.5665,126.9780), 또는 auto:ip
days예보 일수. 받을 수 있는 최대 일수는 가입한 요금제에 따라 다릅니다.
lang응답 언어(예: en 영어, ko 한국어, ja 일본어)

응답 JSON 에서 자주 쓰는 값은 다음과 같으며, JSON 블록으로 값을 꺼내 변수에 저장합니다 (8부).

경로값
location.name, location.region, location.country지역 이름, 행정 구역, 국가
location.tz_id, location.localtime시간대, 현지 시각
current.temp_c현재 기온(섭씨)
current.humidity현재 습도(%)
current.is_day낮이면 1, 밤이면 0
current.wind_kph현재 풍속(km/h)
current.condition.text현재 날씨 설명
forecast.forecastday[].date예보 날짜
forecast.forecastday[].day.maxtemp_c, mintemp_c일별 최고 기온, 최저 기온
forecast.forecastday[].day.daily_chance_of_rain일별 강수 확률(%)
forecast.forecastday[].day.condition.text일별 날씨 설명
forecast.forecastday[].astro.sunrise, sunset일출 시각, 일몰 시각
forecast.forecastday[].hour[]시간대별 예보
알아두기 외부 서비스의 무료 사용량과 요금은 수시로 바뀝니다. 실제 조건은 각 서비스의 요금 안내 페이지에서 확인합니다.