이틀 만에 노코드 툴, 버블로 서비스 만들기 (1)
사전 작업을 어떻게 하느냐에 따라, 빌드 효율성이 달라진다.
목차
1. 높은 퀄리티 + 빠른 구현 = Bubble!
2. 먼저 큰 그림을 그려야 한다.
3. 프론트와 백엔드 뼈대 작업하기
4. 효율을 높이는 스타일 시스템
높은 퀄리티 + 빠른 구현 = Bubble!
1. 경험 교류의 생태계를 위해!
투두몰은 전문가의 투두리스트를 제공하는 서비스다. 기존 학습 솔루션은 초보자보다 높은 전문성을 요구하는 사람에게 포커스가 됐고, 첫 시작을 하는 분들에게 적합하지 않다는 문제가 있다. 우리 마이플랜잇 팀은 "세상의 모든 도전이 쉬워지도록"이란 미션 아래에 초보자들의 새로운 영역에서의 도전을 더 쉽고, 빠르고, 재미있게 느끼도록 만들고자 한다.
경험을 얻고자 하는 수요자로 '초보자'가 있다면, 경험을 제공할 수 있는 공급자로 '전문가'가 있다. 초보자들이 다양한 영역에서 도전을 하기 위해선, 이에 상응하는 공급자가 있어야 한다. 클래스를 수강할 수 있는 CBT 앱을 만들었지만, 아직까지 전문가를 위한 프로덕트를 만들지 못했다. 우리의 미션을 위해서 경험을 쉽게 소비하고, 제공할 수 있는 생태계가 필요하며, 생태계 가설 검증을 위해서 공급자를 위한 프로덕트가 있어야 했다.
수요와 공급, 모두가 충족되야 한다.2. 퀄리티와 속도, 모두 만족하기
경험을 제공할 수 있는 전문가를 위한 프로덕트가 필요한 상황이지만, 그렇다고 무작정 개발을 들어가기에 위험했다. 초보자와 다르게, 전문가측에서 많은 가설 검증이 이루어지지 않았기 때문에, 자칫 삽질을 할 수도 있기 때문이다. 결국, 개발에 의존하지 않고 이번에도 노코드로 프로덕트를 만들어서 검증하기로 했다.
프로덕트를 빠르게 만들어서 가설을 검증할 때, 너무 "빠르게"만 집중해서 프로덕트의 퀄리티를 낮추는 사태가 벌어지면 안 된다. 프로덕트 퀄리티가 어느 정도 보장되야 유저가 프로덕트가 제공하는 핵심 가치를 완벽히 느낄 수 있고, 가설을 성공적으로 검증할 수 있다.
높은 퀄리티와 빠른 프로덕트 구현, 이 둘을 모두 가져가기 위해 노 코드 빌더인, 버블(Bubble)을 사용하기로 했다. 버블만 있다면, 개발자 없이도 고퀄리티 프로덕트를 혼자서 만들 수 있다. 그래서 FameLee가 이번에도 혼자서 만들었습니다.
3. 진정한 노코드 툴, 버블
버블은 프론트와 백엔드, 모두를 코드 없이 커버한다. 프론트는 마치 피그마를 다루는 것처럼, UI 컴포넌트를 픽셀 단위로 조정할 수 있고, 디자인 시스템을 적용해서 쉽게 관리가 가능하다. 백엔드는 노션에서 데이터베이스를 만드는 것처럼, 다양한 테이블을 빠르게 만들고 옵션값도 설정할 수 있다. 또한, 비즈니스 로직은 자피어에서 워크플로우를 만드는 것처럼, 트리거와 액션 이벤트를 설정만 해주면 끝이다.
버블의 가장 큰 장점은 "매우 높은 자유도"다. 프론트와 백엔드, 모두 직접 하나하나 자유롭게 다룰 수 있기에 러닝 커브가 높지만, 한 번 배워놓으면 생각한 프로덕트의 대다수가 구현이 가능하다.
버블로 만든 전문가용 프로덕트먼저 큰 그림을 그려야 한다.
버블이 노코드 툴이라지만, 무턱대고 버블에 접속해서 프로덕트를 만드는 건 추천하지 않는다. 비록 버블이 노코드 툴이라지만, 사실상 프론트와 백엔드를 코드 없이 구현하는 것이기에, 프로덕트 빌드와 관련한 기본 개념은 동일하다. 큰 그림을 그리지 않고 버블로 바로 프로덕트를 만든다면, 어느 순간부터 꼬이는 부분이 발생해서 다 뜯어고칠 수도 있다. 따라서 기반 스케치를 한 후에 프로덕트를 빌드하는게 더 효율적이다. 해당 영역의 지식과 경험이 전무해도, 여기서 필요한 수준은 매우 낮기에 걱정하지 말자!
1. IA = Front의 큰 그림
IA는 Information Architecture의 줄임말로, 정보 구조도를 의미하는데, 프로덕트를 구성하는 각 화면의 정보를 구조화한 문서라고 보면 된다. 더 풀어서 말하자면, 유저가 프로덕트를 사용하는 과정에서 어떤 화면을 보는지 나타내는 문서로 이해하면 쉽다. IA를 작성하면 (1) 프로덕트에서 어떤 화면을 구현해야 하는지 파악이 용이하고 (2) 각 화면의 상하 관계가 어떻게 되는지를 빠르게 파악할 수 있다.
IA를 직접 그려본다면, 버블에서 어떤 페이지를 만들어야 하는지 감을 잡을 수 있다. 어차피 개발 문서를 작성하는 것도 아니고, 버블로 프로덕트를 만들 때 큰 그림을 그리기 위함이므로 자신의 취향에 맞춰 그리면 된다. 나 같은 경우, 페이지, 팝업과 핵심 컴포넌트만으로 대충 피그마에 스케치한다.
버블 클래스에서 사용한 IA 예시2. ERD = Backend의 큰 그림
ERD는 Entity-Relation Diagram, 즉 개체 관계도를 의미한다. 데이터베이스에서 존재하는 개체를 정의하고, 각 개체들 간의 관계를 보여주는 문서로 이해하면 된다. 여기서 개체(Entity)는 존재하는 실체로 사람, 사물, 대상 등을 뜻하며, 각 개체는 속성(Property)를 가진다. 예를 들어, '이명성'이란 사람은 하나의 개체고, 키, 몸무게, 나이 같은 속성이 따라붙는다.
ERD를 직접 그려본다면 (1) 어떤 데이터 테이블이 필요하고 (2) 각 테이블은 어떻게 구성해야 하는지 감을 잡을 수 있다. IA와 마찬가지로, 큰 그림을 그리기 위한 용도이니 개념적 수준의 ERD만으로 충분하다.
버블 클래스에서 사용한 개념 ERD 예시프론트와 백엔드 뼈대 작업하기
1. 프론트 : 구성 페이지 생성하기
IA와 ERD로 프로덕트의 큰 그림을 스케치했다면, 이제 본격적으로 버블을 시작할 차례다. 먼저 환경을 세팅해주면 좋은데 (1) 구성 페이지, (2) 데이터 테이블과 (3) 요소 스타일을 세팅하면, 작업이 훨씬 편해진다.
버블에서 앱을 생성해서 접속하면, GNB에서 [Design] 페이지로 이동된다. [Design] 페이지에서는 프로덕트의 화면을 만들 수 있으며, 각 영역은 아래와 같다. GNB의 각 탭에서 어떤 기능을 제공하는지는 해당 링크에서 상세히 적어놓았으니 참고하자!
[Design] 페이지의 좌측 상단을 클릭하면 (1) 프로덕트를 구성하는 페이지와 (2) 재사용 요소로 이동할 수 있는 팝업이 뜬다. 여기서 새로운 페이지를 생성할 수 있다. 앞서 스케치한 IA를 참고해 프로덕트의 구성 페이지를 모두 생성하면 된다.
UI 빌더에서 각각의 요소를 드래그 앤 드랍하여 화면을 만들어 갈 수 있다. 예를 들어, 버튼을 화면에 구현하고자 하는 경우에 UI 빌더에서 [Button] 요소를 드래그해서, 디자인 화면에 드랍하면 된다. 생성한 요소를 더블 클릭하면, 해당 요소의 설정창이 나오며 여기서 세부 값을 설정할 수 있다.
2. 백엔드 : 데이터 테이블 생성하기
프로덕트를 구성하는 데이터 테이블을 만드려면, 좌측 GNB에서 [Data] 페이지로 이동하면 된다. 여기서 (1) 새로운 테이블을 생성하고, (2) 각 테이블의 속성을 추가 및 수정할 수 있다. 마찬가지로, 스케치한 ERD를 참고해 테이블을 구성하면 된다.
테이블에서 속성 타입이 카테고리라면, 옵션 기능을 활용하면 좋다. [Data] 페이지에서 [Option sets] 탭으로 이동하고, 데이터 테이블을 생성할 때와 마찬가지로 (1) 옵션 세트(a.k.a 카테고리)를 생성하고, (2) 해당 세트를 구성하는 옵션 값을 추가 및 수정하면 된다. 또한, 각 옵션마다 속성을 종속시킬 수 있다. 예를 들어 아이콘을 모아놓은 옵션 세트가 있다고 해보자. 여기에 다양한 아이콘이 옵션으로 있을 것이며, 각 옵션에는 (1) 아이콘 이름, (2) 아이콘 URL, (3) 아이콘 분류 태그 등이 속성으로 종속된다.
효율을 높이는 스타일 시스템
버블은 스타일 기능을 제공하는데, 각 요소마다 스타일 값을 만들고 상황에 맞춰 바로 적용시킬 수 있다. 스타일 기반으로 구성 요소를 관리하면 (1) 동일한 디자인 톤을 가져갈 수 있고 (2) 유지 보수 측면에도 훨씬 좋다. 아래 이미지를 보면 버튼 요소의 설정창에 [Style] 선택란에 [Button - Primary]가 선택된 걸 볼 수 있따. 이는 "Button - Primary"라는 스타일 값을 적용했음을 뜼한다.
GNB의 [Styles]에서 각각의 구성 요소에 적용할 스타일을 설정할 수 있다. [Design] 페이지에서 제공하는 각각의 요소마다 여러 스타일을 만들고, 상황에 따라 적용하면 된다.
[스타일 설정란]에서 [Appearance]와 [Conditional] 탭이 있다. [Appearance] 탭에서는 요소에 기본적으로 적용할 디자인 값을 설정하고, [Conditional] 탭에서는 특정 조건을 만족했을 때 다른 디자인 값을 적용할 수 있다. 예를 들어 버튼이 파란색으로 보이다가, 마우스가 버튼 위로 행오버 되는 경우에 그림자를 띄우게 만들 수 있다.
오프라인에서 함께 노코드 전문가로 거듭나요!
( ~23년 8월 말까지 모집 )
온라인 클래스로 빠르게 공부하는 방법
