해외 노코드툴 완벽 분석 2 - 버블 (bubble.io)

노코드툴은 소프트웨어를 구축하고 개발하는 방식에 혁명을 일으키고 있습니다. 노코드툴을 이용하면 코딩에 대한 지식 없이도 완벽하게 기능하는 웹 어플을 만들 수 있죠! 이러한 노코드툴은 속도, 비용 효율성, 접근성 등 다양한 면에서 이점을 제공하기에 스타트업, 중소기업 및 개인에게 매력적인 선택지라고 할 수 있습니다.

버블에 대해서

현재 시장에서 가장 인기 있는 노코드툴 중 하나는 미국의 노코드툴, “Bubble” 입니다. 직관적인 비쥬얼 에디터, 드래그 앤 드롭 기능, 사전에 제공되는 엘리먼트들, 엄청난 양의 플러그인 라이브러리까지! 따라서 노코드툴임에도, 비개발자뿐만 아니라 개발자 모두에게 인기 있는 선택지입니다.

복잡한 데이터 구조를 처리할 수 있는 툴이기에, 복잡한 웹 응용프로그램을 만들 수 있는 노코드툴이죠.

버블의 비주얼 에디터는 코딩 경험이 없는 사람들도 직관적이고 사용하기 쉽도록 설계되었습니다. 에디터를 사용하면 미리 만들어진 엘리먼트를 페이지로 끌어다 놓기만 해도, 앱의 유저 인터페이스를 설계할 수 있습니다. 그 후, 앱 디자인의 모든 측면을 세부적으로 제어할 수 있는 엘리먼트들의 속성 에디터를 사용해서 이러한 엘리먼트들의 스타일과 동작을 직접 컨트롤 할 수 있답니다.

앞서 언급했듯이, 버블은 사전에 구축된 엘리먼트들이 많고, 또 이들의 수정에 대한 자유도가 높다는 점과 정말 다양한 플러그인을 제공하고 있다는 것이 가장 큰 장점입니다. 예를 들어서, 플러그인을 활용해서 페이스북같은 소셜 미디어 연동을 하거나, 스트라이프와 토스같은 결제 시스템을 앱에 쉽게 추가할 수 있죠.

정말정말 많은 플러그인이 있어요!

다른 노코드툴에 비해 버블은 복잡한 데이터 구조를 처리할 수 있다는 장점도 있습니다.

버블의 데이터 에디터를 사용하면 작업할 데이터의 유형과, 데이터 간의 관계를 포함해서 앱의 데이터 구조를 정의할 수 있습니다. 그래서 여러 데이터 소스와 데이터 간의 관계를 유기적으로 설정해야 하는 앱에 적합합니다!

하지만 이렇게 복잡한 데이터 구조를 설정하려면, 관계형 데이터구조에 대한 지식도 웬만큼 필요하다는 사실 😵

버블, 한 번 해볼까요?

버블에 처음 로그인을 하면, 앱을 생성할 수 있는 대시보드가 표시됩니다. 그리고 앱을 만들려면 ‘Create an app’ 버튼을 클릭해주세요!

1번의 비주얼 에디터는 앱의 유저 인터페이스를 만들 수 있는 곳입니다. 쉽게 말해서 프론트와 백이 이곳에서 나뉜다고 생각할 수 있는데요, 비주얼 에디터에서는 주로 디자인적인 측면을 수정하고 2번의 워크플로우에서는 해당 엘리먼트의 동작을 정할 수 있습니다.

3번의 데이터 에서는 앱의 데이터 구조를 정의할 수 있습니다. 이곳에서 데이터 유형을 만들고, 해당 유형에 각각의 필드를 추가하고, 각 데이터 간 관계를 설정할 수도 있습니다.

버블에서 미리 만들어져 있는 엘리먼트를 사용하면 코딩 없이도 앱에 대한 유저 인터페이스를 쉽게 만들 수 있는데요, 여기에서 버튼, 텍스트 상자, 이미지, 인풋 필드 등을 쉽게 추가할 수 있습니다.

각 페이지에 이런 엘리먼트를 추가하려면, 그냥 이곳에서 해당 엘리먼트를 페이지로 드래그 앤 드롭하기만 하면 됩니다. 그리고 속성을 변경함으로써 이 요소들의 크기, 색상 등을 설정할 수 있습니다.

모바일 기기 접속률이 전체 접속률이 절반 정도를 차지하는 오늘날, 앱이 pc 뿐만 아니라 모든 기기에서 잘 보이게 하는 것은 매우매우 중요하죠!

버블은 데스크톱과 모바일 장치 모두에서 원활하게 작동하는 반응형 디자인을 쉽게 만들 수 있습니다.

버블의 레이아웃 시스템을 이렇게 조절할 수도 있고, Responsive Design 부분에서 다양한 화면에서 앱이 어떻게 표시되는지를 확인해가며 디자인 레이아웃을 변경할 수도 있습니다.

버블의 가장 강력한 기능 중 하나는 커스텀 데이터 타입을 정하고 그것들에 필드를 추가하는 기능입니다. 이 데이터 관리 기능으로, 광범위한 데이터 유형 및 구조를 처리할 수 있는 복잡한 웹 응용프로그램을 만들 수 있죠.

버블에서 데이터 타입을 만들려면 이곳에서 create 를 클릭한 후, 이름을 지정하고, create a new field 를 클릭해서 이 타입 안에 들어갈 각 데이터가 텍스트 형태인지, 이미지 형태인지 등의 속성을 정해주면 됩니다.

버블의 비주얼 프로그래밍 인터페이스를 사용하면, 복잡한 비즈니스 프로세스와 인터랙션을 자동화할 수 있는 맞춤형 워크플로우를 쉽게 만들 수 있습니다.

워크플로우 탭에서, 어떤 특정 동작이 실행되었을 때 (조건/트리거) ~을 한다 (결과) 식의 작업을 설정할 수 있습니다. 예를 들어, 어떤 버튼을 눌렀을 때만 특정 내용을 가진 전자 메일이 가도록 한다, 라는 식으로 설정할 수 있겠죠.

외부 시스템 및 서비스와 상호 작용할 수 있는 커스텀 플러그인을 통해 버블의 기능을 확장할 수도 있습니다! 이런 플러그인은 특히 버블에서 자체적으로 지원되고 있지 않은 써드 파티 API 나 서비스와 연동할 때 매우 유용합니다.

개발 지식이 이미 있으시다면, 버블의 플러그인을 직접 만드는 것도 가능합니다! 그리고 직접 만든 플러그인을, 직접 만든 버블 앱 내에 다운로드 해서 사용하는 것도 가능합니다.

버블은 이렇게 여러 측면에서 다양한 엘리먼트들을 제공하지만, 그럼에도 이것들로 불충분할 때가 있습니다. 이럴 때는 html, css 및 자바스크립트를 활용해서 만들 수 있습니다.

이는 html 요소를 페이지에 추가한 후, css를 사용해서 스타일을 지정할 수 있습니다. 버블의 html요소는 다양한 html 태그와 속성을 지원하기에 표준 html 및 css 기술을 활용해서 디자인과 기능의 자유도를 높일 수 있습니다. 또한 기능적인 측면으로는, 자바스크립트를 추가해서 더 풍부한 동작과 기능을 추가할 수도 있죠.

버블의 심화 기능에는 어떤 것들이 있을까요?

버블 앱을 구축할 때 외부 API 및 서비스와 연결해서 데이터를 가져오거나 작업을 수행할 수도 있다고 하신 것 기억하시나요? 예를 들어, 대한민국의 대기 정보를 가져오는 API 를 이용해서 따로 날씨 데이터를 추가할 필요없이, 에어코리아의 대기오염정보 API 를 연동할 수 있습니다!

먼저 연동하고자 하는 서비스에서 API 키를 받은 후, 버블의 API connector 을 이용해서 새 API를 생성하고 API 엔드포인트와 필요한 파라미터를 추가하면 됩니다. 이후 API에서 데이터를 검색하여 앱에 표시할 수도 있습니다. 예를 들어, 각 엘리먼트의 속성 부분에서 데이터 소스에 “get data from external API”를 사용하여 날씨 API 에서 날씨 정보를 가져오고, 앱에 현재 온도를 표시할 수 있겠죠 😝

버블 앱을 다 만들고, 론칭하고자 하면 웹 서버나 클라우드 서비스에 앱을 배포할 수 있습니다. 유료 플랜에서는 버블 앱을 라이브 버전으로 배포할 수 있는데요, 작업하면서 자주 사용했던 ‘프리뷰’ 모드 좌측에 있는 버튼을 클릭하면 이런 화면이 뜰거예요! 이곳에서 라이브 버전 배포를 할 수 있습니다.

또한 위에 언급했듯이, 버블의 데이터 기능을 통해 복잡한 데이터 기반의 앱을 구축할 수 있습니다!

예를 들어, 고객 주문 데이터베이스가 있고 가장 많이 팔리는 제품의 목록을 표시하려고 한다면 버블의 데이터 액션에서 ‘필터링하기’ ‘정렬하기’ ‘그룹화하기’ 등을 통해 원하는 정보만을 표시하도록 할 수 있습니다.

‘Search’ 작업을 통해서 고객 주문과 관련된 데이터를 모두 불러오고, “filter” 을 통해서 완료된 주문들만 불러오고, “sort by” 를 통해서 판매량이 많은 데이터들 순대로 정렬을 하는 것이죠. 마지막으로 제품의 종류에 따라서 그룹화를 시킬 수도 있답니다.

이외에도 버블의 워크플로우 기능을 잘만 활용하면 더 복잡한 응용프로그램도 가능합니다!

예를 들어, 구글폼처럼 유저가 피드백을 제출할 수 있는 설문지가 있다고 가정해보겠습니다. 사용자가 양식을 제출할 때마다 해당 유저에게 이메일을 보내도록 하지만, 오직 유저가 “복사본 발송” 이라는 체크박스에 체크를 표시한 경우에만 보내도록 하고 싶다고 해보죠. 버블의 조건문을 사용해서 체크박스가 체크 되어 있는지 확인하고 체크되어 있는 경우에만 이메일을 보낼 수 있습니다.

또한, 백엔드 워크플로우에서는 “X초마다 실행” 과 같은 반복적인 액션의 수행도 가능합니다. 이 기능을 활용해서 예를 들어, 10초마다 채팅 앱에서 새 메세지를 확인할 수 있도록 하는 것도 가능하죠.

마지막으로, 버블에서 “custom event trigger” 을 이용해서 직접 조건을 설정할 수도 있습니다. 예를 들어, 메세지를 클릭하면, 유저를 대시보드로 리디렉션하고 로그인 시킨다. 라는 꽤 복잡한 구조의 로직 설정도 가능합니다.

버블의 특징

이렇게 버블의 기능 몇 가지에 대해 알아보았는데요, 다른 노코드툴과 비교되는 버블의 특징을 일목요연하게 정리해본다면 어떤 것들이 있을까요?

높은 자유도

버블은 유저가 직접 커스텀할 수 있는 부분이 많습니다. 워크플로우, 데이터 구조 설계 등 다양한 비주얼 프로그래밍 도구를 제공하죠. 이를 통해 좀 더 고급의 앱을 개발 할 수 있고, 직접 만든 앱에 대한 컨트롤 정도를 높일 수 있습니다. 다른 노코드툴은 사용하기 쉬운 반면, 앱을 커스텀하는 데 있어서 제한이 큽니다.

복잡성

버블은 방금 말한 것처럼, 다양한 기능과 커스텀 가능한 옵션들을 제공하기에 다른 노코드툴들에 비해서 복잡하다고 할 수 있습니다. 그래서 오히려 버블에 익숙해지면 고급 기능들을 활용해서 앱을 설계하고, 앱의 유연성을 높일 수가 있죠.

하지만 다른 말로 하자면, 배우고 숙달하는 데 더 오랜 시간이 걸릴 수가 있다는 단점이 있습니다. 비개발자를 위한 것이 노코드툴인데, 여기에서도 러닝커브가 가파르다니?! 🤔 그래서 필자의 지인들은 버블이 너무 어려워서, 같은 기간에 차라리 리액트나 파이썬을 배우겠다고 하시는 분들도 계신답니다.

확장성

버블은 더 크고 복잡한 앱을 처리할 수 있도록 클라우드 기반의 인프라를 통해 확장성이 뛰어나도록 설계되었습니다. 따라서 시간이 지남에 따라 앱을 좀 더 확장할 가능성이 있다고 보시는 개인이나 기업들에게 더 적합합니다.

비용

버블은 소규모 프로젝트를 위한 무료 플랜부터 대기업을 위한 엔터프라이즈 플랜까지 다양한 플랜을 제공합니다. 다른 노코드툴에 비해서도 가격이 저렴한 편이기도 합니다. 무료 플랜이더라도 기능을 추가하는 데 있어서 한계를 많이 느끼지는 않았으나, 계정별 결제가 아니라 앱 하나당 결제를 해야한다는 점이 아쉽습니다.

가파른 러닝 커브

언급한 바와 같이 버블은 일반적으로 다른 노코드툴에 비해 가파른 학습곡선을 갖고 있습니다. 더 다양한 기능과 유저의 자유도가 높기 때문입니다. 그러나 버블은 유저가 이런 부분에서 문제를 덜 가질 수 있도록 튜토리얼 및 커뮤니티 지원을 포함한 다양한 교육 자료를 제공하고 있습니다. 다른 노코드툴에 비해 훨씬 학습 및 개발을 위한 리소스를 제공하고 있죠!

커뮤니티 지원

버블은 앱을 구축하고 확장하기 위한 지원과 자원을 제공할 수 있는 개발자 커뮤니티를 갖고 있습니다. 여기에는 사용자가 문제를 해결하고, 새로운 기술을 배우는 데 도움이 되는 포럼, 웹 세미나 및 기타 리소스에 대한 액세스까지 포함됩니다. 다른 노코드툴의 커뮤니티들은 이것보다 더 작거나 덜 활성화되어 있어서 도움을 구하기가 어려워요.

즉, 버블은 다양한 기능과 커스텀 할 수 있는 옵션을 제공하고 있는 노코드툴입니다. 가파른 러닝 커브를 갖고 있으며, 갈수록 개발자 지향적인 모습을 보이고 있기는 하지만 툴의 자유도가 높기에 더 정교한 어플을 만들고자 하시는 분들께 추천드립니다. 버블이나 다른 노코드툴의 사용을 고려하신다면, 어떤 목적으로 앱을 구축하고자 하시는지에 따라 각 툴의 실익을 잘 판단하시길 바라겠습니다!

버블 사용 예시

버블은 정교한 데이터 기반의 앱을 만드는 데 유용한 노코드 플랫폼이라고 했는데, 구체적으로 어떤 어플을 만드는 데 좋은 것일까요?

MVP 제작

버블은 코딩 기술이나 대규모의 개발 팀 없이도 유저들을 통해 프로덕트를 테스트하고 검증할 수 있기에, 제품의 초기 단계 버전을 제작하는 데 종종 사용됩니다.

기업 내부 툴 제작

버블의 정교한 데이터 구조와 워크플로우는 프로젝트 관리용 소프트웨어 제작이나 기업/팀의 특정 니즈에 맞춘 CRM 시스템 제작에 용이합니다. 예를 들어, 마케팅팀이라면 버블을 활용해서 캠페인 퍼포먼스나 소셜 미디어 메트릭, 웹사이트 트래픽을 한 번에 추적하는 대시보드를 만들 수도 있겠죠!

초기 스타트업 프로덕트

버블은 노코드툴이기에 대규모의 개발팀 없이도 정교한 데이터 기반의 프로덕트를 만들 수 있습니다. 그래서 스타트업에 적격이라고 할 수 있어요! 예를 들어, 새로운 소셜 네트워크 앱을 론칭하고자 하는 스타트업의 경우, 버블의 훌륭한 데이터 기능을 이용해서 서로의 취향이나 지역에 기반을 두고 추천 친구를 뜨도록 하는 알고리즘을 개발할 수도 있겠죠!

그렇다면 이제 실제로 버블을 활용해서 성공적인 프로덕트를 만든 기업들을 살펴보겠습니다!

버블을 활용하여 만든 프로덕트

Codemap

코드맵은 전 세계 최초로 노코드 전문가, Saas 전문가와 창업자, 스타트업, SME들을 연결시켜주는 플랫폼입니다. 온디맨드 방식으로 코드에 대한 전문적인 지식 없이 학습, 자동화 및 개발 프로세스를 간소화하는 동종 업계 최초의 플랫폼이죠. 지금까지 코드맵은 미국, 유럽 등 전 세계 5천개 이상의 프로젝트를 성사시켰으며 현재 이 플랫폼에는 노코드 전문가/팀이 약 1천명 이상 있다고 합니다.

GoodCourse

YCombinator로부터의 투자, 18개월의 개발 기간. Goodcourse의 창업자들은 현재 비즈니스 교육에서 가장 큰 두 가지 특징점을 찾았습니다.

첫째로, 우리들이 365시간 함께 하는 이 핸드폰때문에 우리는 끊이지 않는 정보의 홍수 속에서 항상 자극적인 삶을 살고 그에 따라 갈수록 성인들의 집중력이 떨어진다는 것이었습니다. 둘째로, MZ 세대들은 교육 경험에 관해서 높은 기대를 갖고 있다는 것이었는데요. 그래서 이 창업자들은 “중요한 주제들은 학습자들이 더 지루해하는 경우가 있다. 우리는 그래서 틱톡 스타일의 컨텐츠를 제작함으로써 현재의 성인 교육 문제를 해결할 것이다” 라고 말했습니다.

또한 그 중 한 명은, "프로그래밍 언어로 제작하는 것도 고려를 해보았지만, Bubble이 여러 도구를 일시적으로 이어 붙이는 대신에 웹 애플리케이션을 종단간에 호스팅할 수 있는 유일한 플랫폼이었다"라고 까지 말했습니다.

버블은 유연성, 확장성, 복잡한 데이터 구조를 처리할 수 있는 능력을 가진 플랫폼입니다. 또한 러닝 커브가 가파르지만 커뮤니티가 활발하게 운영되고 있고, 리소스가 많기에 노력만 있다면 쉽게 배울 수 있습니다. 또한 비용적으로도 다른 노코드 플랫폼과 비교했을 때 경쟁력이 있으며, 내장형 호스팅 서비스를 통해 쉽게 앱을 배포할 수 있다는 장점도 있습니다.

더 많은 사례를 보고 싶으시다면 버블의 App of the Day나 쇼케이스 페이지를 참고해주세요!

버블로 만들 수 있는/없는 앱

그렇다면 버블로 어떤 앱을 만들 수 있고, 어떤 앱을 만들지 못할까요?

만들 수 있는 것

• 소셜 네트워크 앱 : 유저 프로필, 뉴스 피드, 채팅 기능 등을 추가해서 본인만의 소셜 네트워크 앱을 만들어보세요!
• 이커머스 플랫폼 : 버블로도 유저들이 상품을 구매하고, 주문을 추적하고, 계정 정보를 관리할 수 있는 이커머스 플랫폼을 제작할 수 있답니다.
• 마켓플레이스 플랫폼 : 단순히 구매만 하는 것이 아니라, 유저들이 물건을 팔기도 하고 그들의 거래를 관리할 수 있는 마켓플레이스 플랫폼을 구축해보세요
• 생산성 관리 툴 : 버블로, 팀 협업 툴, 프로젝트, 혹은 관리용 툴을 직접 제작해보세요!
• 하드웨어 기반의 앱 제작 : 버블을 외부 api 커넥터와 연결해서 하드웨어 기반의 앱을 제작할 수 있습니다. 예를 들어, 이 기능을 통해 이미지를 분류하거나 사물 인터넷을 제어하는 AI 엔진 등을 연결할 수도 있죠.

만들 수 없는 것

• 고성능 게임 : 버블은 기본적인 그래픽과 애니메이션이 구현된 간단한 게임을 만드는 데 사용될 수는 있지만, 복잡한 그래픽과 역동적인 애니메이션 제작을 위한 고 성능 게임 개발에는 적합하지 않습니다. 버블은 게임보다는 데이터 기반의 웹 앱 제작용으로 디자인 되었습니다.
• 복잡한 알고리즘과 계산 : 버블은 광범위한 데이터 관련 기능을 제공하고 있지만, 복잡한 알고리즘이나 데이터 처리와 관련해서는 최선의 선택이 아닐 수도 있습니다. 버블은 빠르게 간단한 워크플로우를 가진 데이터 기반의 앱을 제작할 수 있도록 만들어졌기 때문이죠.
• 실시간 앱 : 버블은 금융 거래 플랫폼처럼 즉각적인 업데이트를 필요로 하는 실시간 앱에는 적합하지 않습니다. 버블은 폴링 메커니즘으로 작동하는 event 기반의 플랫폼입니다. 즉 업데이트가 실시간이 아니라, 정기적인 간격으로 발생하기에 실시간 업데이트 및 처리가 필요한 앱에는 적합하지 않다고 할 수 있죠.

이런 한계들이 있다고 해서, 버블이 웹 앱 개발에 대한 능력이 부족하다는 것을 의미하지는 않습니다. 그저 버블이 데이터 중심의 웹 앱을 구축하는 데 최적화된 노코드 개발 플랫폼으로서 설계되었다는 것을 반영할 뿐이죠. 따라서 어떤 노코드 플랫폼을 사용할지 결정하는 데 앞서, 플랫폼의 강점과 한계를 이해한 후 자신의 프로젝트에 적합한지 아닌지를 판단할 필요가 있겠습니다!

버블은 웹 앱 제작이 최적화된 노코드툴입니다. 드래그 앤 드롭 인터페이스, 풍부한 UI 요소와 플러그인들, 복잡한 데이터 처리가 가능한 데이터베이스 시스템, 외부 API 연동까지! 버블은 복잡한 데이터 기반의 앱을 제작하는 데에도 사용할 수 있도록 다양한 심화 기능을 제공하지만 기술적인 경험이 없는 유저들도 쉽게 사용할 수 있도록 디자인 되었습니다. 버블의 이런 요소들은 레드 오션이 된 노코드 개발 시장에서도 독특한 노코드툴로서 버블의 위상을 톡톡히 보여주고 있죠.

버블과같은 노코드툴은 비개발자들도 자신만의 웹 앱을 더 쉽게 만들 수 있도록 함으로써 소프트웨어 개발 산업에 큰 파장을 불러일으키고 있습니다. 노코드툴을 이용하면, 유저들은 코딩이나 인프라같은 기술적인 디테일에 매몰되기보다 앱에 대한 유저들의 경험의 질을 향상시키는 데 집중할 수 있습니다. 나아가서 개발 시간을 단축시키고, 더 적은 비용으로 더 혁신적이고 창의적인 앱을 만들 수 있죠.

하지만 그럼에도 이런 노코드툴이 전통적인 코딩 기술과 개발자들을 완벽히 대체할 수는 없답니다. 버블과 같은 노코드툴은 많은 개발 업무들을 대체할 수 있도록 설계되었지만, 위에 언급한 것처럼 특정 종류의 앱들, 특히 고도의 기술적 전문 지식을 요하는 것들에 대해서는 아직 한계점이 분명해요.

나아가, 노코드툴은 비교적 생긴지 얼마 되지 않았고, 이 산업이 성숙해지기까지에는 더 많은 도전들이 남아있을 것이라 생각됩니다. 앱 제작의 자유도를 높이기 위해 난이도를 높일 것이냐, 아니면 비개발자 지향적인 플랫폼으로 갈 것이냐도 많은 노코드툴 제작사들이 고민하고 있는 부분이기도 합니다. 특히 버블은 기능적 한계가 거의 없지만 개발 지식이 아예 없는 사람들이 배우기는 조금 어려울 수 있어요.

그럼에도 버블같은 노코드툴은 엄청난 기술에 대한 지식 없이도 자신만의 웹 앱을 빠르고 쉽게 만들 수 있도록 해줍니다. 이러한 툴들이 계속해서 발전하며, 소프트웨어 개발의 대중화와 수많은 혁신가들의 힘이 될 그 날을 기대하며! 오늘의 글 마치도록 하겠습니다 😝

언어 장벽때문에 한국의 노코드툴을 찾으시거나, 간단하고 심플한 마케팅 콘텐츠, 랜딩페이지를 만드시려면 웨이브온을 체험 해보세요!

참고할 만한 다른 아티클

• 해외 노코드툴 완벽 분석 1 - 소프터 (Softr)
• 나만의 웹사이트 만들기 - 국내 노코드(Nocode) 툴 추천
• 문과생이 추천하는 노코드(Nocode) 툴 탑 5
• 비용을 획기적으로 줄일수 있는 5가지 노코드(Nocode)툴 소개
• 2023 기술 혁신의 핵심, 노코드(Nocode) 툴 완벽 정리