노 코드 버블, 무작정 배워보기!
코드 없이 IT 서비스를 만들 수 있다고요?
개발을 모르지만 IT 서비스는 만들고 싶어!
이런 이야기를 여러 분야의 사람에게 종종 듣는다. 기획자, 마케터, 예비 창업자 등등 다양한 직군의 사람들이 가설을 빠르게 검증하고 싶어 할 때마다 그들을 찾아 부탁하는 것에는 여러 어려움이 있다.
이런 사람들에게 추천하고 싶은 서비스가 바로 버블이다. 버블을 활용하면 개발자 없이도 MVP, 웹사이트를 충분히 만들어낼 수 있다.
버블..? 그게 뭔가요?
버블(Bubble)은 자유도가 굉장히 높은 노코드 툴이다. 프론트엔드와 백엔드 모두 버블 내에서 개발이 가능하고 버블 자체 DB를 활용할 수 있으며 외부 API와 통신을 주고받을 수도 있다.
'코드를 단 한 줄도 못쓰는 사람도 할 수 있나요?'라는 질문을 받는다면 당연히 'Yes'라고 이야기할 것이다.(물론 방금 설명에 대한 이해가 어려운 사람도 직접 해보면서 배운다면 금방 사용이 가능할 것이다.)
무작정 시작해보자!
1. 버블 계정과 앱 만들기
백문이 불여일견이다. 코드를 짤 줄 모르지만 하고 싶은 게 있다면 일단 도전해보는 것을 추천한다. 우선 버블 웹 사이트(https://bubble.io/)에 접속해서 계정을 만들어보자.
심플한 버블 첫 화면첫 화면에 들어가면 코드 없이 build하기 좋은 서비스들을 보여주며 The best way라고 소개한다. 여기서 Get start for free버튼을 눌러 버블을 시작할 수 있다. (버블도 유료버전이 있다. 그러나 무료 버전으로도 꽤 많은걸 할 수 있다.)
로그인 또는 회원가입 후 보이는 화면첫 화면에 들어가면 다양한 메뉴들이 보인다. 'Create a new app' 버튼으로 새로운 앱을 바로 만들어볼 수 있다. (버블이 처음이고 어떤 구조로 이루어져 있는지, 어떻게 활용이 가능한지 알고 싶다면 이후에 버블이 제공하는 튜토리얼인 'Lessons'를 도전해보길 추천한다.) 이때 app이름이 중복될 수 없다는 점에 유의해야 한다.
앱은 여러 개 만들 수 있으니 연습용으로 만들어봅시다!
앱을 생성하면 나타나는 페이지이곳이 바로 앱을 만들고 수정할 수 있는 Editor다. 버블에서 제공하는 미리보기 페이지라고 생각해도 좋을 것 같다. 페이지에 나타나는 버튼 텍스트 등을 Element라고 부르는데 각 Element에 호버(hover)해보면 규격과 간격들을 볼 수 있다. 이런 페이지를 직접 만들기 위해 페이지를 생성해보자. 또는 현재 페이지에 있는 모든 Elemet를 지우고 만들어도 문제없다.
2. 페이지 추가하기와 Elemets 만들기
좌측 상단 버블 아이콘 옆 'page:index'를 클릭해서 페이지를 새로 만들거나 이동할 수 있다. 페이지 리스트 아래 'Add a new page'를 클릭해서 페이지를 하나 만들어주자. 페이지 이름은 언제든 변경이 가능하니 원하는 이름을 입력하고 clone from은 비워놓는다. (클론을 선택하면 이전에 만들었던 것과 동일한 페이지를 만들어준다.)
빈 페이지에 마우스를 호버 했을 때 생기는 파란 선이 페이지라고 생각하고 여러 Elements를 넣어주면 된다. 좌측 여러 UI Builder 중 원하는 것을 선택하고 드래그하여 Elemet를 넣어줄 수 있다.
텍스트 element를 편집할 수 있는 박스가 나타납니다.Appearance 탭 가장 위에 있는 박스의 content를 수정해서 텍스트 수정이 가능하다. 이런 방식으로 버튼도 똑같이 생성이 가능하다. 그렇다면 이제 이런 간단한 element로 동작을 만들어보자.
3. Pop up 만들기와 workflow 설정하기
위에서 만든 텍스트와 버튼들만으로도 페이지를 작동시켜주기에 충분하다. 우선 위에서 만든 element는 다음과 같다. 텍스트 메시지와 '메일 보기' 버튼이다. 이 버튼을 활용하여 팝업을 띄워주는 동작을 만들 수 있다.
이 화면에서 하고 싶은 동작은 두 개로 정의할 수 있다.
- '메일보기' 버튼을 클릭했을 때 mail이 적힌 팝업 띄워주기
- 작동된 팝업 끄기
첫 번째로 팝업을 띄워주기 위해 텍스트와 버튼처럼 좌측에서 popup을 선택하여 넣어주면 된다. 그러나 popup이 들어있는 토글에 적혀있듯 popup은 container로 분류된다. 따라서 popup 안에 텍스트와, 팝업 끄기 버튼(또는 아이콘, 이미지)등을 같이 넣어줘야 한다.
이제 팝업을 만들었으니 팝업이 나타나는 조건을 설정해서 완성할 수 있다. 현재까지는 UI 관련 내용을 Design탭에서 앱을 편집했다면, 동작과 관련한 거의 모든 내용은 Workflow탭에서 가능하다. 원하는 버튼(또는 element)을 더블클릭해서 워크플로우 생성이 가능하다.
TIP. 각 기능에 호버 하면 생기는 See reference를 활용해보자Element를 더블클릭해서 생긴 edit 박스 내에서 'Start/Edit workflow'버튼을 클릭하면 워크플로우 탭으로 이동하며 새로운 워크플로우가 생성된다.
메일보기 버튼을 클릭했을 때라는 워크플로우가 생성되었고, 'click here to add an action'을 클릭해서 Action을 추가해주면 된다. 현재는 버튼을 눌렀을 때 '팝업이라는 element를 보여준다'는 액션을 추가하고 싶기 때문에 Element Actions의 Show를 선택해준다.
이렇게 생성된 워크플로우 액션에 아까 만들어준 팝업을 Element에 설정해주면 완성이다. 이제 오른쪽 상단 'preview'를 눌러 만들어준 페이지가 제대로 작동하는지 확인할 수 있다.
직접 확인을 해보면 이상한 점이 있을 것이다. 바로 팝업에서 확인을 눌렀을 때 팝업이 사라지는 workflow를 설정해주지 않았다는 것이다. 아까 했던 것과 마찬가지로 워크플로우를 생성하여 hide 액션을 설정해주면 생각했던 모든 기능이 완성된다.
여기까지 따라왔다면 이미 코드 없이 팝업 기능을 구현할 수 있는 노코드 개발자가 된 것이라 할 수 있다. 버블을 활용한다면 비개발자도 직접적으로 프로토타입 또는 제품을 만들 기회를 가질 수 있다. 또한 코드를 쓰지 않기 때문에 구현까지 시간을 단축할 수 있다. 스타트업에서 노코드 개발자이자 기획자로 일하며 느꼈던 가장 큰 장점 또한 이것이다. 제품을 빠르게 선보이고 고객을 만날 수 있다는 것은 스타트업에서 매우 큰 이점으로 작용하기 때문이다. 그리고 이런 이점을 활용하고 싶은 모든 사람에게 버블을 추천하고 싶다.
