노 코드 툴, 버블(Bubble) A to Z
이것만 보면, 나도 버블할 수 있어!
목차
1. 구현하지 못하면 죽도 밥도 못 된다.
2. 왜 버블인가?
3. 버블 기능 맛보기!
4. 버블로 이런 것도 돼?
5. Famelee와 함께 버블 공부하기
하나라도 해당되면, 재밌게 읽을 수 있어요
1. 사이드 프로젝트를 진행하고 싶다.
2. 아이디어를 상상만 하는 게 아니라, 직접 구현하고 싶다.
3. 진취적인 기획자가 되고 싶다.
구현하지 못하면 죽도 밥도 못 된다.
필자는 데이터 분석 용도로 어느 정도 파이썬을 다룰 줄 알지만, 웹이나 앱 개발을 위한 코딩은 전혀 해본 적이 없다. 개발자와 협업 및 커뮤니케이션을 위한 지식은 갖추고 있지만, '커뮤니케이션을 위한 코딩 지식'과 '개발을 위한 코딩 지식'은 전혀 다름을 누구나 알고 있을 것이다. 주변 지인이 개발 코딩을 배워보라고 권유하지만 아직까지 배울 생각은 딱히 없다. 개발자만큼 코딩을 잘할 수 없음을 알고 있고, 그 시간에 내가 할 수 있는 일에 더 집중하는 게 효율적이라고 생각하기 때문이다.
HTML을 다룰 줄 알면, 개발자 ㄱㄴ?아이디어를 '생각'하는 것과 '구현'하는 것은 완전히 별개의 영역이다. 기획자가 제 아무리 고객과 시장을 치밀하게 분석해서 훌륭한 앱을 기획했다고 해보자. 근데, 앱을 개발할 사람이 마지막에 없다면? 이 프로덕트는 상상 속 동물일 뿐이다. 더군다나, 기획자의 상상 속에서만 존재한다. 이 상상 속 동물을 현실로 끄집어내기 위해선 디자인과 개발이 필요하다. 디자인과 개발은 무형의 아이디어를 유형의 프로덕트로 바꿔주는 수단이다.
앞서 말했듯이 기획자는 기획을 하는 사람이지 디자인이나 개발을 하는 사람이 아니다. 제 아무리 기획자가 개발 공부를 열심히 해도, 결과적으로 개발자의 손을 빌릴 수밖에 없다. 그렇다면, 기획자는 영원히 개발자에게만 매달릴 수밖에 없을까? 기획자 스스로 아이디어를 내고, 이걸 프로덕트로 구현할 수 있는 방법이 없을까?
이렇게라도 상상 속 동물을 만들 수 있다면!왜 버블(Bubble)인가?
노 코드 툴을 사용하는 이유
우선,"기획자는 개발자에게 매달릴 수밖에 없다."이다. 그렇다고 너무 실망하지 말자! 기획자도 특별한 방법을 이용하면, 어느 수준까지는 개발자에 매달리지 않을 수 있다. 이 특별한 방법이 바로 '노 코드 툴'이다. 노 코드 툴은 이름 그대로, 코딩 없이 프로덕트를 만들게 돕는 툴이다. 아직까지 국내에서 노 코드 툴 보급이 활성화가 안 됐지만, 이미 해외에서는 다양한 노 코드 툴이 사용되고 있다. Glide, Webflow 등 다양한 툴이 있다. 사실, 이 글을 쓴 이유도 구글링에서 노 코드 툴을 검색해보면, 관련된 국내 이야기를 찾기 어려웠기 때문이다.
앞선 답에 '어느 수준까지'란 말을 붙인 이유는 노 코드 툴의 한계 때문이다. 노 코드 툴은 MVP, beta 버전 등 작은 규모의 프로덕트를 만드는 데 적합하다. 프로덕트의 규모가 일정 수준을 넘어간다면, 노 코드 툴이 거대한 규모를 감당하지 못한다. 노 코드 툴은 '거대한 프로덕트'를 완벽하게 만들기 위해 쓰는 게 아니라, '간단한 프로덕트'를 빠르게 만들기 위해서 사용된다.
어찌 됐든, 노 코드 툴이 코딩(진)을 이길 순 없다.자유도가 뛰어난 노 코드 툴, 버블
노 코드 툴에 관심을 갖게 된 이유는 나홀로 사이드 프로젝트 덕분이었다. 혼자서 사이드 프로젝트를 자주 했는데, '사이드'라는 말처럼 큰 규모의 프로덕트를 필요로 하지 않았다. 그 대신, 일종의 린 프로세스 같이 작은 프로덕트를 만들고 이 아이디어를 검증 및 개선하는 과정을 반복하는 과정이 요구된다. 물론, '작은 프로덕트여도 충분하다'라고 말했지만, 그럼에도 코딩 능력의 부재는 큰 장벽이었다. 이때, 지인으로부터 노 코드 툴을 소개받았고, 현재는 다양한 노 코드 툴 중에서 '버블(Bubble)'을 사용하고 있다.
버블은 웹앱 빌더이다. 흡사 하이브리드 앱과 같이, 모바일 랩 래퍼(Wrapper)를 사용해 웹앱을 덮어서 모바일 앱도 구현할 수 있다. 다양한 노 코드 툴 중에서 버블을 선택한 이유는 높은 자유도 때문이다. 가령, Glide의 경우, 구글 스프레드 시트와 연동되어 쉽게 사용할 수 있지만 미리 설정된 레이아웃을 따라야만 한다. 반대로 Bubble은 요소(element)를 자유롭게 배치할 수 있지만, 그만큼 신경 써야 하는 부분이 많다. 결국, 어떤 노코드 툴을 선택할지는 trade-off의 영역이다. 자유도가 높지만 그만큼 설정할 게 많은 툴을 쓸지 아니면, 자유도가 낮은 대신에 쉽고 간편한 툴을 쓸지 개인의 취향에 달려있다.
지금까지 버블로 2가지 사이드 프로젝트를 진행해봤다. '대학교 친구들끼리 책을 교환하는 플랫폼'을 구현 및 배포했고, 최근에 '크루를 만들어서 운동 기록으로 경쟁하는 플랫폼'을 구현했다. 사실 첫 번째 프로젝트는 폭망 해서 문을 닫은 상태고, 현재는 하나만 진행하고 있다. 창업 팀 합류로 모두 중단했습니다. 아래 링크에서 디버그 모드로만 확인할 수 있습니다.
버블 기능 맛보기!
버블에 접속하면, 7개의 탭을 볼 수 있다. 각 탭에서 어떤 것을 할 수 있는지 짧고 굵게 알아보자!
[Design] : 웹앱의 요소(element)를 배치 및 수정
[Workflow] : 각 페이지마다 워크 플로우(Trigger - Action)를 설정
[Data] : 데이터 속성 값을 설정 + 생성된 데이터가 모인 DB를 확인
[Styles] : 요소(element)에 범용적으로 적용 가능한 스타일을 설정
[Plugins] : 웹앱에 적용할 플러그인 탐색 및 설정
[Settings] : 도메인, 웹앱 언어, HTML Header 및 Body 등을 설정
[Logs] : 서버 상태, 워크 플로우 로그 확인
1. Design Tab
웹앱의 요소(element)를 배치 및 수정
텍스트, 버튼, 아이콘 등의 시각 요소(Visual Elements)를 생성 및 배치할 수 있다. 컨테이너(Containers)를 활용해 각기 다른 요소를 그룹핑해서 관리할 수도 있다. 유저로부터 인풋 값을 받는 인풋 폼(Input Fomrs)도 만들 수 있다.
[Data] 탭에 있는 특정 데이터를 불러와서 텍스트의 일부분으로 바로 사용할 수도 있다. 예를 들어, 유저의 닉네임이 FameLee라고 해보자. "안녕하세요 [불러온 유저의 닉네임]님!"을 입력하면, "안녕하세요 FameLee님!"을 출력할 수 있다.
특정 요소의 클릭을 바로 워크플로우의 트리거(Trigger)로 설정할 수 있다. 트리거가 작동되면, 이후에 설정된 액션(Action)이 자동 실행된다. 아래 이미지를 보면, 유저가 '경쟁전 참가하기' 버튼을 클릭하면, 바로 팝업을 보여줌을 알 수 있다. 이 워크 플로우는 [Workflow] 탭에서도 확인 가능하다.
워크 플로우와 별개로, 아예 요소 자체적으로 if 설정 값을 가질 수 있다. 각 요소의 설정 창에 있는 [conditonal] 탭에서 특정 조건마다 서로 다른 설정 값을 적용할 수 있다. 왼쪽 아래의 이미지를 보면, 텍스트 내 '홈트'가 포함되지 않을 경우에 배경 색이 #E3E3E3로 변경됨을 볼 수 있다. 반대로, 해당 값을 포함했다면, 기존 헥사 코드가 적용된다. 디자인 말고도 작동 설정 값을 바꿀 수 있다. 가령, 로그인을 하지 않는 유저는 버튼을 클릭하지 못하게 만들 수도 있다.
[Style] 탭에서 설정한 요소별 스타일을 바로 적용해 쉬운 유지 보수도 가능하다. 텍스트, 버튼, 아이콘 등 각각의 요소 별로 스타일을 설정할 수 있다.
2. Workflow Tab
각 페이지마다 워크 플로우(Trigger - Action)를 설정
이곳에서는 트리거와 액션으로 구성된 워크 플로우를 페이지마다 생성 및 관리할 수 있다. 트리거 이벤트가 발생될 때, 후속의 액션들이 자동 집행된다. 가령, 어떤 버튼을 클릭했을 때 팝업을 보여준다고 할 때, 여기서 '버튼 클릭'이 트리거가 되고 '팝업 출력'이 액션이 된다.
요소와 무관한 트리거를 설정할 수 있는데 유저의 로그인 유무, 페이지 로딩, 에러 발생 등이 있다. 반대로 클릭, 팝업 생성/제거 등 요소와 관련된 트리거를 설정할 수도 있다.
액션은 보다 다양한 설정 값을 제공한다. 단순히 페이지 이동이나 팝업창 생성/제거뿐 만 아니라, 로그인, 회원가입, 이메일 전송 등 계정 관련 액션도 가능하다. DB에 있는 특정 데이터를 수정 및 제거하거나, 새로운 데이터를 추가할 수도 있고 심지어 외부 플러그인과 관련된 액션도 가능하다.
3. Data Tab
데이터 속성 값을 설정 + 생성된 데이터가 모인 DB를 확인
웹앱에서 발생하는 데이터의 설정 및 관리가 가능하다. 유저 DB, 프로덕트 로그 DB 등 각각의 DB를 자유롭게 만든 후, 용도에 맞게 각 DB의 필드를 생성 및 관리할 수 있다. 관계형 데이터베이스처럼 서로 다른 DB끼리 연결도 가능하다. 물론 쿼리 기반이 아니라서, SQL 급으로 높은 자유도를 보장하지는 않는다.
DB 내 데이터를 직접 확인할 수도 있다. 그렇다고, 모든 데이터를 볼 수 있는 건 아니다. 버블은 DB 필드 타입 중 '패스워드'가 있는데, 이 타입의 데이터는 확인이 불가능하다. 번외로, 각 DB마다 별도의 데이터 정책을 설정할 수 있다.
4. Style Tab
요소(element)에 범용적으로 적용 가능한 스타일을 설정
[Design] 탭에서 생성한 요소(element) 별 스타일을 설정 및 관리할 수 있다. UXUI 작업을 하신 분들이라면 알겠지만, 이렇게 한 번 스타일을 만들고 재사용을 함으로써 작업 시간을 크게 단축할 수 있다.
디자인뿐만 아니라, 작동 값도 설정할 수 있다. Figma, XD의 컴포넌트 기능과 비슷하다고 생각하면 될 듯하다.
5. Plug-in Tab
웹앱에 적용할 플러그인 탐색 및 설정
외부 플러그인을 자유롭게 다운 받아서 사용할 수 있고, 이를 통해 버블이 갖고 있는 기본 기능 외의 것을 구현할 수 있다. 무료 플러그인도 있지만, 유료 플러그인도 존재한다. 유료 플러그인의 경우, 보통 구독제로 요금이 차감된다.
생각보다 많은 플러그인을 제공한다. 플러그인을 활용해 기존에 없는 요소(element)를 추가할 수 있다. 예를 들어, 기존 버블에는 1개의 항목을 선택 가능한 'Dropdown element'는 있지만, 2개 이상의 항목을 선택 가능한 'Multiselect Dropdown Element'는 존재하지 않는다. 이때, Multiselect Dropdown 플러그인을 추가해 기존에 없는 'Multiselect Dropdown Element'를 생성할 수 있다.
외부 서드 파티 툴과 연동해 새로운 기능을 부여할 수도 있다. 예를 들어, GA, GTM 플러그인을 추가하면 별도의 HTML 코드 수정 없이 쉽게 웹앱에 데이터 분석 툴을 추가할 수 있다.
6. Settings Tab
도메인, 웹앱 언어, HTML Header 및 Body 등을 설정
[Setting] 탭에서 웹앱의 기본 설정의 변경 및 관리가 가능하다. 웹앱의 기본 언어를 설정하거나, 특정 케이스에서의 출력 메시지를 한 번에 설정할 수 있다. 참고로 한국어도 지원된다! UI 작업을 편하게 하기 위해, 개별 폰트를 추가하거나 컬러 팔레트 설정도 가능하다.
meta Title, meta Description을 바로 설정해 간단한 SEO 작업이 가능하고, 아예 HTML의 <head>와 <body> 값도 설정할 수 있다.
버블이 bubbleapps.io라는 도메인을 기본으로 제공하지만, 자신이 소유한 도메인을 직접 연결할 수도 있다. 도메인 연결 말고도, API를 설정해서 서드 파티 툴과 직접 연동시킬 수 있다. 사실 이 기능은 코린이라서 아직 써보지는 않았다.
7. log tab
서버 상태, 워크 플로우 로그 확인
[log] 탭에서 서버의 안정성(capacity)을 확인하거나, [Workflow] 탭에서 생성한 워크플로우의 작동 기록을 확인할 수 있다.
버블로 이런 것도 돼?
탭(Tab)을 기준으로 버블이 어떤 기능을 제공하는지를 간략하게 훑어봤다. 위의 내용만 어느 정도 숙지하면, 버블이 어떤 툴이고, 무엇을 할 수 있는지 짐작할 수 있을 것이다. 위에서 다룬 것 외에도, 버블에서 꽤나 도움이 된 기능을 몇 가지를 더 소개하고자 한다. 이 기능은 특히 핫픽스 이슈로 고생하는 개발자나, UI를 중요하게 여기는 디자이너에게 꿀 기능이다.
이제 버블이 어떤 툴인지 파악이 끝났다! (출처 : <원피스>)모바일, 태블릿, 데스크탑 모두 가아아아능!
width, margine 등을 설정해 반응형 UI를 설정할 수 있다. 이를 통해 화면 크기가 다른 모바일, 태블릿, 데스크탑 모두 대응 가능한 프로덕트를 만들 수 있다. 단, 각 기기별로 width를 설정하는 형식이 아니라, 기존 요소의 width에서 비율이 적용되는 식이라서 어느 정도 제한이 있다.
아이고! 이번 버전에 큰 버그가 있었어요!
배포한 프로덕트의 History 기능을 제공한다. 프로덕트를 배포했는데 예상치 못한 버그나 이슈가 발생했을 경우, 빠르게 이전 버전을 복원해서 재배포할 수 있다.
재사용이 얼-마나 편하게요~
피그마, XD의 컴포넌트 - 인스턴트 기능처럼, 재사용 가능한 요소(Reusable elements)를 만들 수 있다. 컴포넌트를 수정하면, 복제된 인스턴트 요소들 모두 수정이 반영되서 유지 보수가 편하다.
태그 느낌을 추가하고 싶다면?
식당 추천 서비스를 구현 중인데, 식당 정보를 '한식', '일식', '중식', '일식'으로 분류해서 제공하고 싶다고 해보자. 식당 DB에 식당 종류('한식', '일식' etc) 필드를 추가했을 때, 어떤 타입의 데이터를 설정해야 할까? 이렇게 유한한 선택지가 있는 경우에 문자열 데이터가 아니라, 범주형(=카테고리) 데이터를 쓰는 게 좋으며, 버블에서는 범주형 데이터 셋을 따로 관리하는 공간이 있다. GNB의 [Data] 탭에 들어가보면, LNB에 [Option sets] 탭을 볼 수 있는데, 이곳에서 여기서 범주형(카테고리형) 데이터 셋을 생성 및 관리할 수 있다.
Famelee와 함께 버블 공부하기
1. 버블 활용 백서
(+24.08에 추가된 내용입니다)
최근 버블에 관심 있는 분들이 많아져서 버블을 더 심도 깊게 공부할 수 있도록 “버블 활용 백서”를 꾸준히 발행하고 있습니다. 버블을 더 깊게 이해하고 싶다면, 버블박스 사이트를 확인해주세오
2. 국내 유저를 위한 버블 플러그인
(+24.03에 추가된 내용입니다)
버블의 가장 큰 장점은 플러그인입니다. 버블을 심도 깊게 다루지 못해서 구현하기 어려운 기능들이 있는 경우, 다른 사람들이 만든 플러그인을 불러와 사용할 수 있습니다.
예를 들어 키카오 채널 추가를 바로 유도하거나, 카카오톡 공유 기능이 있습니다. 해당 기능을 이용하려면 카카오 API나 카카오 SDK를 불러와서 사용해야 합니다. 이런 기능들은 버블에서 직접 코드를 추가 작성해서 구현해야 하는데, 노코드 툴 버블을 다루기도 막막한데 코드까지 뜯아봐야 한다니…
버블은 해외에 시작한 서비스라 아직까지 국내에 다양한 서비스를 활용할 수 있는 플러그인이 부재합니다. 그래서 사이드 프로젝트로 한국 유저들이 쉽게 사용할 수 있는 플러그인 개발을 시작했습니다. 아래 링크에서 제가 직접 만든 다양한 국내 플러그인을 만나보세요!
다른 아티클 보러가기
