API 연동으로 버블(Bubble) 똑똑하게 활용하기
안녕하세요! 합리적인 외주 개발의 가치를 더하는 리트머스입니다.
오늘은 Bubble.io를 활용해 실제 프로덕트를 제작할 때 유용하게 사용할 수 있는 SMS 전송과 카카오 알림톡 API 연결 방법에 대해 알려드리려고 합니다.
API 연동은 단순한 메시지 전송 이상의 가치를 제공합니다. 사용자와의 즉각적이고 효과적인 소통을 가능하게 하고, 프로덕트의 기능성을 대폭 확장할 수 있죠. 특히, SMS와 카카오 알림톡은 고객과의 신뢰를 구축하는 데 중요한 역할을 합니다.
버블(Bubble.io)과 같은 노코드(no-code) 플랫폼에서도 API를 활용하면 개발 리소스를 최소화하면서 강력한 기능을 손쉽게 구현할 수 있습니다. 특히 NHN Cloud API를 활용하면 국내 환경에 최적화된 메시징 솔루션을 빠르고 안정적으로 적용할 수 있는데요. 이러한 API 연동 과정을 단계별로 쉽게 알려드리겠습니다.
1. NHN Cloud 설정: 회원가입과 프로젝트 생성
먼저, NHN Cloud라는 서비스의 Open API를 통해 구현할 수 있습니다. 시작하기 전에 NHN Cloud 회원가입과 Bubble API Connector 플러그인 설치를 완료해 주세요.
NHN 회원가입 후, 상단 메뉴바 우측의 파란색 Console 버튼을 클릭합니다. 상단 메뉴바에서 새로운 프로젝트 만들기를 선택해 프로젝트를 생성합니다.
2. SMS/KakaoTalk Biz Message 활성화
프로젝트가 생성되면 해당 프로젝트로 이동합니다. 상단 메뉴바 우측에 있는 서비스 선택 메뉴에서 Notification > SMS/KakaoTalk Biz Message를 클릭해 서비스를 활성화합니다. 이렇게 설정을 완료하면 프로젝트 좌측 메뉴에 Notification 탭이 생성되며, 여기서 SMS를 먼저 연결할 수 있습니다.
3. SMS API 연결: 발신 번호 등록
SMS API를 연결하기 위해서는 사전에 발신 번호를 등록해야 합니다. Notification 탭에서 SMS를 클릭한 후, 상단의 발신 번호 사전 등록 탭으로 이동합니다. 여기서 본인 인증 절차와 발신 번호 등록 및 명의자 입력을 완료하면 발신 번호가 최종적으로 등록됩니다.
이제 NHN Cloud에서 필요한 설정은 끝났습니다. 다음으로는 Bubble API Connector에서 SMS API를 연결해 보겠습니다.
4. 버블에서 API 연결하기
API를 연결할 때는 항상 기술문서를 꼼꼼히 살펴보는 것이 중요합니다. NHN Cloud는 사용자 가이드 탭에 상세한 기술문서를 제공하고 있습니다. 기술문서에는 API를 호출할 때 어떤 URL로 불러와야 하는지, 호출 시에 요청하는 Body에 어떤 형식의 값들을 넣어줘야 하는지, 어떤 오류코드가 뜬다면 무엇이 잘못된 것인지 등이 상세하게 나와 있습니다. 이 기술문서를 참고해서 진행하시면 더욱 손쉽게 진행할 수 있습니다.
↗︎ 기술문서 링크 바로가기
5. HTTP Method와 URL 설정
"첨부 파일(필드명: attachFileIdList)을 포함한 장문 MMS 발송을 위해서는 사전에 첨부 파일 업로드가 진행되어야 합니다."
기술문서에서 이러한 문구를 발견하실 수 있을텐데요. 그렇다면 첨부 파일 업로드 방법을 알아 보겠습니다.
‘첨부 파일 업로드’ 탭에는 Http method와 URL이 있습니다. Http method는 서버가 어떤 동작을 수행해야 할지 지정해 주는 것이고, URL은 해당 요청을 보낼 주소입니다.
Bubble의 API Connector에서 새 API를 생성하면, [Request Body]와 [Response] 섹션에 입력해야 할 필드들이 나타납니다. 아래 이미지처럼 왼쪽에는 HTTP Method를, 오른쪽에는 URL을 입력합니다.
URL의 {appkey} 부분은 [appkey]로 변경해야 합니다.
버블은 파라미터를 대괄호([ ])로 인식하므로, 이를 올바르게 설정해야 합니다.
URL을 입력한 뒤에는 URL Parameters 섹션에 새로운 Key와 Value가 생성됩니다.
NHN Cloud 프로젝트의 SMS 탭으로 이동합니다.
상단 우측에 있는 AppKey 버튼을 클릭해 해당 값을 복사한 뒤, URL Parameters의 Value로 입력하세요.
복사한 Key 값은 다른 곳에 공유하지 않도록 보안에 주의하세요!
6. Header 설정하기
Header 섹션으로 이동해 Add Header 버튼을 클릭합니다.
‘Content-Type’을 추가합니다. URL이 작성된 부분에서 확인할 수 있습니다.
Content-Type은 전송하는 데이터의 형식을 서버에 알려주는 역할을 합니다. 이 내용을 헤더에 추가해서 우리가 보내는 정보의 타입이 어떤 것인지 알려주는 부분이라고 생각하시면 됩니다.
7. Body 설정하기
Body는 JSON 형식으로 작성합니다.
붉은색으로 표시된 부분 중 일부 “attachment.jpg”, “Createuser”, “{byte~}” 이러한 부분들에 다이나믹 데이터가 들어간다고 생각하면 됩니다. 이 부분에 다이나믹으로 데이터를 넣기 위해서는 아래와 같이 코드를 살짝 변경해 줍시다.
기술문서에서 붉은색으로 표시된 값들(예: "attachment.jpg", "Createuser", "{byte~}")은 다이내믹 데이터를 입력해야 합니다. 이를 위해 코드를 수정하고, 필요한 데이터를 동적으로 삽입하세요.
8. 파라미터와 파일 설정
Body 입력이 완료되면 하단에 자동으로 파라미터들이 생성됩니다. Value 값을 채워주면 되는데요.
fileBody의 값은 Base64로 인코딩된 JPG 이미지가 들어가야 합니다.
NHN Cloud 문서에 따르면, 이미지 형식은 JPG/JPEG 형식만 지원한다고 하네요.
9. API 연결 테스트 및 완성!
모든 설정이 완료되었다면 Initialize 버튼을 눌러 API를 테스트합니다.
이렇게 Success 메시지가 나타나면 API 설정이 성공적으로 완료된 것입니다!
NHN Cloud API를 버블과 성공적으로 연동시켜서 원하시는 SMS 마음껏 전송하세요!
![[2025 최신] 버블에서 리피팅 그룹 각 셀마다 워크플로우를 실행하고 싶을 때 : 플러그인 오케스트라(Orchestra)](/_next/image?url=https%3A%2F%2Fuosmtaxndlzgvsnhbugi.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fmedia%2F12-1.jpg&w=3840&q=75)