버블로 프로덕트를 만들기 전 알아두면 좋을 7가지
노코드 툴 버블(bubble.io)로 혼자서 프로덕트를 만든 뒤 느낀 점
이 글은 버블의 기능을 알려드리는 콘텐츠는 아닙니다.
오히려 버블의 기능을 조금 알고, 제작을 막 시작한 분들에게 도움이 되는 글 입니다.
기능 활용에 대한 콘텐츠도 준비중이니 기대해 주세요
이전 회사에서 PM으로 일 할 땐, 복잡한 프로덕트를 관리하는 지휘자 같은 역할보단 인간 맥가이버 칼, 디지털 잡부에 가까웠습니다.
초기 스타트업이라 디자이너도, 개발자도 없었고 마케터도 부족했기에 하나부터 열까지 스스로 다 해내야 했기 때문이죠.
그 덕분에(?) 다양한 노코드 툴을 학습하며, Notion(+oopy), Typedream, Webflow 등을 활용해 홈페이지도 만들고, Glide와 Zapier를 이용해 사내에 자체 CRM도 구축하는 경험을 할 수 있었습니다. 자연스럽게 혼자서도 많은 것을 할 수 있겠다는 깨달음과 근거없는자신감을 얻을 수 있었던 것 같습니다.
이런 경험 때문에 백엔드, 프론트엔드에 API연동까지 가능한, 노코드의 끝판왕 Bubble을 배우고 활용하고 싶다는 욕구는 자연스러운 것이었던 것 같아요.
bubble.io 의 홈페이지버블로 프로덕트를 만들 때, 미리 알았다면 좋았을 7가지
제가 버블로 만든 프로덕트는 어시스트(assist) 라는 프로덕트였습니다.
어시스트 소개 페이지 (링크)
어시스트 서비스 페이지 (링크)
혼자서 작업하긴 했지만, 볼륨이 큰 프로젝트가 아니었는데도 제작에 7주라는 꽤 많은 시간이 소요되었습니다. 디자인을 2번 갈아 엎었고, DB구조도 1번 갈아 엎었죠.
제 역량이 부족한 문제가 가장 컸지만, 버블의 특성에 대해 잘 몰랐던 이유도 있었습니다.
그래서 버블로 프로덕트를 제작할 마음이 있는 분들께, 이 글을 빌어 저의 시행착오로 알게 된 제작 전에 알면 도움 될 7가지 사실을 전달 드리려고 합니다.
그냥 만들면 시간을 낭비하게 됩니다.
#1
배움에 시간, 노력(+돈)을 아끼지 말 것
관심 있는 분들이라면 들어보셨겠지만, 버블은 어렵습니다.
노코드 툴로 개발 하는 것도, 코딩을 통해 하는 개발과 같습니다. Python, Java 같은 하나의 언어와 같다고 저는 생각합니다.
버블은 한국어로 된 학습 콘텐츠도 많지 않아, 러닝커브가 더 가팔라 보이기도 합니다. 물론 익숙해지고, 배우고 나면 쉽습니다.
"나는 Airtable도, Zapier도, Glide도, Webflow도 금방 배웠으니 버블도 금방 배울거야" 라는 잘못된마인드로 접근했다가 큰 코 다쳤습니다. 각 기능에 대한 공식 도움말 문서가 잘 정리되어 있지만, 사전지식 없이 도움말 문서만 믿고 덤벼들었다가 시간이 녹아내리는 경험을 했기 때문입니다. 기능이 무진장 많거든요 ㅎㅎ
그래서 강의를 들으면서 버블을 먼저 학습 하시는걸 추천드립니다.
저도 처음에 혼자 해 보려다가 결국 Gregory John 선생님의 강의와 모노데이, 해치하이커 님의 유튜브 영상을 보며 배웠습니다. 강의와 함께 학습하니 훨씬 빠르게 배울 수 있어요.
1. 유료 : Gregory John - Bubble biginner's bootcamp (링크)
- 영어 강의 (자막있음)
- 15,000원
- 서비스 빌딩과 함께 기능을 학습합니다.
2. 무료 : Matt Neary - Bubble Crash Course (링크)
- 영어 강의 (유튜브 자동자막)
- 유료강의가 부담스러우시다면 Matt선생님의 무료 영상도 괜찮습니다.
- 다만 빠르게, 제대로 만들고 싶다면 Gregory 선생님의 유료 강의를 듣는게 더 좋다고 생각합니다.
3. 유료 : 모노데이 (6월 이벤트 링크)
- 한국어 강의
- 10,000원
- 모두의노코드 운영자이자, 버블 커뮤니티 오픈채팅 방장님이신 희철님께서 운영하는 초급자 강의 입니다.
- 만약 영어에 자신이 없고, 빠르게 핵심 기능을 배우고 싶다면 모노데이 참가를 추천 드립니다.
4. 무료 : 해치하이커 - 버블 기본기 강의 (링크)
- 한국어 강의
- 강의 별 학습 목표에 따라 버블 기능을 하나씩 실습합니다.
- 라이브 강의를 녹화한 버전입니다. 기능 하나하나를 자세히 설명하고 수강생이 실습 하는 모습도 볼 수 있기 때문에 직접 따라하면서 기능을 익히기 좋습니다.
위 강의는 제가 버블을 배울 때 실제 들었던 강의입니다.
최근에 한국어로 된 버블 초보자 강의를 런칭하신(하실) 분들이 더 계신 것으로 알고 있어, 위 3가지 방법 외에도 본인에게 필요한 강의를 찾아보고 들으시는 걸 추천합니다.
#2
각 요소(엘리먼트)의 이름을 잘 지을 것
출처 : ITWORLD
버블로 제품을 만드는 과정도 일반적인 코딩과 비슷합니다. 마우스를 좀 많이 써서, 그래픽 인터페이스로 한다는 차이가 있을 뿐이죠.
버블에도 엘리먼트(Element) 이름, 상태(State), 스타일(Style), DB와 Field, Option Set 등 명명 해야 할 것들이 상당히 많습니다.
그러면 이름을 그냥 지으면 될까요?
아니요. "반드시" 일정한 규칙을 정해서 이름을 지어야 합니다.
기능(특히 Workflow)을 구현할 때 이름을 기반으로 탐색하고 참조하는 경우가 많기 때문에, 정말 정말 이름을 잘 지어줘야 합니다. 버튼이라고 죄다 Button A, Button B 같이 두어 버리면, 무슨 버튼이 어디 있는건지, 어떤 기능을 하는건지 알기 어려워 집니다.
비단 이름 뿐만 아니라 Text, Input, Group, Roundness, Padding 등 제작에 필요한 모든 요소에 규칙이 필요합니다. “State를 설정할 때 페이지 내의 어떤 요소에 넣을 것이냐?” 처럼 이름 외 규칙들도 필요해요.
규칙이 없으면 변화가 있을 때 마다 모든 요소를 고려해서 작업해야 하는데, 이는 매우 비효율적이기 때문이죠.
규칙이 모여 바로 "제작 시스템"이 되고, “제작 시스템”은 개발/유지보수 최적화에 도움이 됩니다.
같은 기능의 [시작하기] 버튼이지만, 요소의 위치정보를 포함해 이름을 지정했습니다.#3
개발언어는 몰라도 되지만, 개발과정은 알고 있을 것
너무 당연한 이야기 이지만, 버블을 통한 개발도 결국은 "개발"이기 때문에 개발 프로세스와 동일하게 제품을 만드는 것이 좋습니다.
출처 : 매일경제
만약 저 처럼 혼자서 버블로 A-Z를 하신다면, 개발 과정의 세부 단계들을 "순서대로" 잘 이행하시는 것을 권장 드립니다. 위 사진은 예시일 뿐이지만, 본인만의 사이클이 있다면 그걸 꼭 정의하고 작업을 시작하세요.
저는 기능정의 > 디자인 > DB설계 > 테스트 > 배포 > 피드백 > (반복)기능정의 > ... 과정으로 작업을 진행했습니다.
나만의 제작 프로세스를 정해 두지 않으면, 디자인하다가 기획 수정하고, DB 작업하다 디자인 수정하게 되는 일이 엄청 많아질거에요. 이런 잘못된 습관은 개발 기간을 늘리는 요인이 됩니다.
예를 들어, 어떤 기능을 구현하고 싶은지 제대로 기획하지 않은 상태에서 '유명한 개발자 블로그에서 봤던 DB구조를 적용하면 좋겠는데?' 라는 마음으로 DB를 먼저 설계하면, 나중에 다른 좋은 기능을 적용할 때 먼저 적용한 DB를 뒤엎어야 하는 상황이 발생할 수 있는거죠.
갑자기 좋은 아이디어가 떠올랐나요? 그럼 일단 메모 해 두세요. 그리고 다시 하던 일에 집중하세요!
이번 배포가 마무리 된 뒤에 새로운 아이디어를 기획-디자인-DB설계해서 업데이트 하시면 됩니다.
#4
완벽할 필요는 없지만, 섬세하게 기획할 것
압니다. 머릿 속에 구현하고픈 수만가지 멋진 기능이 있다는걸요.
하지만 모든 기능을 원샷으로 구현할 수는 없습니다. 시간이 부족하기 때문입니다.
기능은 꼭 필요한 것만 최소한으로... / 출처 : gaylealdenrobbins.com우리가 버블이라는 툴을 100% 아는게 아니라면, 학습과 구현을 병행해야 합니다. 기능이 많을 수록 학습량이 늘어나니 시간은 오래 걸리겠죠. 때문에 처음에는 프로덕트로 풀고자 하는 문제의 핵심 솔루션만 기획하고 구현하는 것을 추천 드립니다.
다만, 일단 구현하기로 결정했다면, 개발 전 필요한 사항을 섬세하게 정의하는 것은 꼭 필요합니다. 기획이 완료 되어야 비로소 디자인과, 구조설계를 할 때 막힘이 없기 때문이죠.
예를 들어, 회원가입 기능을 개발한다고 해도 최소 아래 요소들에 대한 생각(기획)이 먼저 정리 되어야 합니다.
- 회원가입 화면을 팝업에 띄울지, 모달에 띄울지, 새 창으로 띄울지
- 수기로 ID와 비밀번호를 받을지, 소셜 로그인을 할지?
- 이메일 인증을 할 건지?
- 비밀번호의 규칙은 어떻게 할건지?
- 계정정보 외에 회원정보를 받을 것인지?
- 회원정보를 받는다면, 입력 창은 계정 등록 후에 띄울건지, 등록 전에 띄울건지?
- 회원정보 입력창은 모달/팝업/새창/기존화면 중 어디에 어떻게 띄울건지
등
만약 기획이 제대로 되지 않고, 일단 디자인(혹은 DB설계)만 먼저 한다면 어떻게 될까요?
이메일을 받는 인풋(input)을 디자인 하다가, “인풋 만들기 귀찮은데 그냥 소셜로그인 만들자”처럼 될 수 있습니다.
그렇게 되면 인풋을 만들기 위해 투자한 모든 나의 시간은 매몰됩니다.
처음부터 “이번 버전에서는 카카오로 소셜 로그인하는 것만 구현 하자” 라고 명확하고 섬세하게 기획했다면, 훨씬 시간을 아낄 수 있었을텐데 말이죠.
시간과 노력을 아끼기 위해서는 꼭 필요한 기능만, 섬세하게 기획하는 것이 중요합니다.
#5
시간을 아끼려면, 간단하게라도 디자인 시스템을 만들 것
디자인 시스템이라고 하면 뭔가 거창해 보이지만, 디자인에 필요한 최소한의 요소와 그 규칙을 정해두는 것에 가깝습니다.
적어도 아래 요소에 대한 간단한 규칙은 정해두시고, 정한 것만 써 보세요.
- 폰트 : 서체(1종류만), 사이즈와 굵기 (제목 용, 소제목용, 본문 용 각각 정해두기)
- 컬러 : 메인, 서브, 배경, 글자색, 회색
- 그룹속성 : Padding, Roundness, 그룹 간 여백
이미 나와있는 버블 템플릿을 사용해도 좋습니다.
대신 템플릿을 커스텀을 많이 하지 않는걸 추천드려요. 조금 더 버블 기능에 익숙해지고, 일단 프로덕트를 배포한 뒤에 피드백을 바탕으로 템플릿을 수정하는게 더 빠릅니다.
프로덕트를 개발하다 보면, 처음에 생각 못했던 요소가 갑작스레 필요한 경우가 생기기 마련입니다. 이 때 디자인 원칙이 없다면 각 요소마다 이런 고민을 해야 할 거에요.
“폰트 뭘로하지?”
“크기는 어떻게 하지?”
“색깔은 어떻게 하지?”
당연히 시간과 에너지가 많이 필요하겠죠. 하지만 미리 규칙을 정해두면, 규칙 안에서 조합만 하면 되기 때문에 시간을 절약할 수 있습니다.
“회원가입 버튼이 배경은 메인색상 + 글자는 흰색에 16px니까,
탈퇴하기 버튼은 눈에 덜 띄게 배경은 흰색 + 글자는 메인색상에 16px로 만들어야겠다.”
제가 디자인 시스템을 만들땐, 똑똑한개발자의 디자인 시스템 페이지를 많이 참고했어요.
디자인 시스템의 개념부터 어떤 요소들이 있어야 하는지 잘 설명 해 둔 자료라, 한 번 쯤 읽어 보시는걸 추천 드립니다!
#6
반복 노가다(?) 작업에 익숙해 질 것
코딩에 키보드로 하는 반복 작업이 많다면, 버블은 마우스를 사용하는 반복 작업이 많습니다.
1번에서 소개드렸던, 구성요소의 이름을 바꾸는 행위도 키보드 만으로는 불가능해요. 마우스로 요소를 선택하고, 옆에 뜨는 Property Editor의 제목 표시줄을 클릭해서 바꿔야 하죠.
GUI기반의 노코드 툴이 가지는 어쩔 수 없는 한계이기도 한데, 제작하다보면 이런 부분 때문에 스트레스를 받는 일들이 생길 수 있습니다.
마우스와 키보드를 함께 사용해야 하는 특성상, 별 것 아닌 작업에 시간이 더 걸릴 수도 있다는 점 미리 알고 계세요!
#7
모를 때는 적극적으로 검색하고, 쉽게 포기하지 말 것
여러분이 만드려는 것과 완전히 똑같은 프로덕트는 없을 수 있어요. 하지만 동일한 세부 기능은 있을 수 있죠. “소셜 로그인” 같은 것이 대표적입니다. 버블로 만든 프로덕트 중 소셜로그인 기능을 가진 경우는 많으니까요.
버블은 글로벌한 툴이고, 유저가 꽤 많기 때문에 원하는 기능(또는 문제가 생긴 부분)을 검색 해 보면 선배(?)들이 업로드한 많은 콘텐츠를 확인하실 수 있을거에요. 물론, 영어로 제작된 것이 대부분이긴 하지만요.
왠만한 건 찾아보면 나옵니다. 절대 포기하지 말고 조금만 시간을 내어 찾아보세요!
Chrome 번역과 Papago만 있으면, 어디든 갈 수 있어 / 출처 : KBS드라마 꽃보다남자모르는 것, 막히는 것이 생겼을 때 제가 추천하는 방법입니다.
1) 구글 검색 (영어)
원하는 기능을 구글에 영어로 검색하면 생각보다 많은 자료가 나옵니다. 크롬 번역기를 켜고, 그 중에 내가 원하는 답이 있을 것 같은 콘텐츠를 잘 찾아보세요!
특정 페이지를 pdf로 export 하는 기능을 만들고 싶을 때
2) 버블 공식 포럼 (영어)
많은 버블 유저 분들이 사용하고 계실 버블 공식 포럼입니다. 전 세계 버블 유저들이 다양한 질문을 올리기 때문에, 왠만한 문제들은 여기서 검색하면 다 나왔던 것 같아요.
막히는 부분이 있다면 버블 공식 포럼에 검색해서 찾아 보는 것도 강력하게 추천합니다!
3) 한국 버블 사용자모임 (한국어, 카카오오픈채팅)
4) 모두의 노코드 (한국어)
3번은 국내 최대의 버블 오픈채팅, 4번은 국내 최대의 버블 커뮤니티 입니다. 여기에 모르는걸 여쭤보면 버블 고수 분들께서 질문에 친절하게 답해 주실거에요.
한국 유저들이 모여있는 공간이라, 한글로 소통할 수 있다는게 가장 큰 장점이라고 생각합니다. 정기적으로 행사도 주최하고 계시기 때문에 양질의 정보를 얻을 수 있는 좋은 기회도 많이 있구요!
---
저는 위 7가지에 대해 잘 모른 채(알고 싶지 않았…)로 시작해서, 생각보다 버블로 프로덕트를 만드는데 많은 시간이 걸렸어요.
만들면서 학습하다가 기능 자체를 잘못 알고 있었던 경우도 있었고, 이름을 생각 안하며 만들다가 원하는 기능을 어떤 요소에 연결해야 할 지 햇갈려 수많은 엘리먼트를 클릭하며 이름을 바꿔주기도 했습니다.
디자인 규칙을 정해놓지 않아서 조금만 다른 요소를 집어 넣을 때 마다 폰트는? 컬러는? 사이즈는? 등을 다시 고민하면서 시간을 쓰기도 했구요. 기획을 섬세히 하지 않아 전체적인 DB구조를 갈아엎어야 하기도 했습니다.
이제 막 버블을 시작한 분들이나, 버블에 대해 공부하고 계신 분들 중 자신만의 프로덕트를 버블로 만들고자 하는 분들이 있다면, 제 오답노트를 바탕으로 더 효율적으로 더 완성도 높은 프로덕트를 제작 할 수 있었으면 좋겠습니다.
앞으로는 제작하면서 마주쳤던 실무적인 문제와 꿀팁도 공유하도록 할게요.
읽어주셔서 감사합니다 :)
---
p.s.
혹시 버블로 프로덕트를 개발하는 과정에서 잘 안풀리거나 궁금한 부분이 있다면 댓글 남겨주세요. 제가 아는 선에서 최대한 도와드리도록 하겠습니다 :)
만약 외부에 공개하기 어려운 문제라면 제 오픈채팅(링크)으로 편하게 연락 주셔도 좋아요!
