에어빌드 노코드 부트캠프 2기 1주차 - 버블 레이아웃, 데이터, 페이지 (Bubble.io)

"코딩 한 줄 없이 내 MVP 서비스 만들기"

25년 11월 3일 에어빌드 노코드 부트캠프 2기가 시작되었습니다. 이번 기수에는 특별한 수강생들이 있었어요. 퇴사를 결심하고 창업에 도전하는 분 2명, 그리고 대학생 창업 동아리 팀까지. 모두 한 가지 공통점이 있더라고요.

"개발자 없이도 우리 아이디어를 직접 만들어보고 싶다."

점점 많은 창업자분들이 노코드 버블을 선택하는 것 같아서 개인적으로는 기쁩니다 ㅎㅎ 그만큼 버블이 높은 자유도로 인해서 생각한 것들을 만들 수 있기 때문에 선택하는 것 같아요.

6주 후 이분들은 각자의 MVP를 완성할 예정입니다. 첫 3주는 노코드 버블을 같이 공부하고, 남은 3주는 공부한 내용을 바탕으로 자신만의 서비스를 만들어요.

그 여정의 첫 주, 가장 중요한 기초를 다지는 시간을 함께했습니다.

지난 9월에는 1기를 진행했었는데, 기록을 안 남긴 것이 아쉽더라고요. 이 글을 통해서 더 많은 사람들이 노코드 버블에 대해서 알기를 바라면서 핵심 개념들을 간단히 정리했습니다.

1주차, 왜 '건축'에 비유했을까?

오늘 라이브 세션에서 저는 이렇게 말했습니다.

"Bubble.io로 앱을 만드는 건 건물을 짓는 것과 같습니다. 화려한 인테리어보다 중요한 게 뭘까요? 바로 기초 공사와 철근 구조죠."

많은 노코드 입문자들이 실수하는 부분이 바로 이겁니다. 예쁜 UI부터 만들려고 하다가, 나중에 유저가 늘어났을 때 앱이 느려지거나 데이터가 꼬이는 문제를 겪게 되거든요.

그래서 1주차에는 페이지와 데이터의 중요성에 대해서 열심히 언급했어요.

1. 레이아웃: 블록 쌓듯이 화면 만들기

"Row와 Column만 알아도 80%는 해결됩니다."

Bubble.io에서 화면을 구성하는 방법은 생각보다 간단합니다. 레고 블록처럼 요소들을 가로(Row)와 세로(Column)로 쌓아가는 거예요.

실전 팁 3가지

Row와 Column을 번갈아 사용하기

가로로 배치하고 싶으면 Row 컨테이너 안에, 세로로 배치하고 싶으면 Column 컨테이너 안에 넣으면 됩니다. 이 둘을 중첩하면서 원하는 구조를 만들어가는 거죠.

Align to parent는 '겹쳐서 보여줄 때'

대부분의 경우 Row/Column으로 해결됩니다. 요소를 겹쳐서 쓸 때만 Align to parent를 사용하면 되고요. 때로는 하단 메뉴바 등을 만들 때 쓰기도 합니다. Fixed는 거의 쓰지 않습니다.

Responsive 탭은 당신의 친구

모바일, 태블릿, 데스크톱에서 어떻게 보일지 항상 확인하세요. min-width, max-width, fit width to content 옵션을 적극 활용하고, 실시간으로 확인하면서 만드는 습관이 중요합니다.

Responsive 탭 외에도 크롬 등의 개발자 도구를 열어서 직접 사이즈가 어떻게 달라지는지 확인하는 것도 좋아요.

2. Workflow: 앱이 '생각'하는 방법

"버튼을 누르면 뭔가 일어나죠? 그게 바로 Workflow입니다."

이 부분에서 가장 많이 받은 질문이 있었습니다.

"Backend Workflow는 뭐가 다른가요?"

쉽게 설명해드릴게요.

일반 Workflow (우리가 주로 쓰는 것)

• 유저가 버튼을 누르면 뭔가 실행됨
• 유저가 인터넷에 접속해 있어야 작동
• 예시: 로그인 버튼, 게시글 작성, 좋아요 클릭

Backend Workflow (서버가 자동으로 하는 것)

• 정해진 시간에 자동으로 실행
• 유저가 없어도 24시간 작동 가능
• 예시: 매일 밤 12시 통계 데이터 계산, 정기 결제 처리

언제 Backend Workflow를 써야 할까?

자동화가 필요할 때

• 매일 밤 유저 활동 데이터를 정리해주세요
• 매주 월요일 뉴스레터를 발송해주세요

무거운 작업을 처리할 때

• 수천 개의 데이터를 한 번에 처리
• 유저가 기다리지 않아도 되는 작업

아직 버블에 입문하시는 분들은 바로 Backend workflow까지 쓸 일은 당장은 없을 꺼에요. 그러나 특정 시간에 어떤 액션이 실행되기를 원할 때나 복잡한 데이터 처리가 필요한 경우, 그 때 Backend workflow를 활용해보세요.

3. 페이지와 데이터: 모든 것의 시작

"페이지와 데이터 설계가 엉망이면, 나중에 다 뜯어고쳐야 합니다."

페이지와 데이터가 중요한 이유

페이지는 하나 하나의 건물이고, 데이터 구조는 각 건물을 구성하는 철근 구조물이에요.

페이지가 너무 많아지면, 페이지와 페이지를 오갈 때, 건물과 건물 사이를 오가는 것처럼 시간(딜레이)가 오갈 수 있어요. 그래서 페이지는 너무 많이 만들지 않도록 하는 것이 좋아요.

데이터 구조는 철근 구조물과 같아요. 철근이 부실하면 건물이 무너지듯, 데이터 설계가 엉망이면 유저가 늘어났을 때 앱이 느려지고 오류가 생깁니다.

데이터 설계 핵심 원칙

"자주 보이는 값은 따로 저장하라"

예를 들어볼게요.

나쁜 예:

게시글에 '좋아요 수'를 저장 안 함
→ 페이지 로드할 때마다 좋아요 목록을 세어야 함
→ 유저 1000명이면? 엄청 느려짐

좋은 예:

게시글에 'like_count' 필드를 만들어 숫자를 저장
→ 좋아요 누를 때마다 +1만 해주면 됨
→ 페이지는 저장된 숫자만 보여주면 끝
→ 빠름!

막막할 땐? AI한테 물어보세요.

요즘 AI(ChatGPT, Claude 등)는 데이터 구조 설계를 정말 잘 도와줍니다.

"Bubble.io로 인스타그램 같은 SNS를 만들려고 해. User, Post, Comment 데이터 타입의 필드 구조를 추천해줘."

이렇게 물어보면 상당히 괜찮은 구조를 제안해줍니다. 물론 맹신하지 말고, 우리 서비스에 맞게 조정하는 게 필요하지만요.

초기 입문하시는 분들은 AI의 도움을 받는 것도 좋을 것 같아요.

보너스: 너무 많은 페이지를 만들지 마세요.

"페이지 100개 만들지 마세요."

초보자들이 자주 하는 실수가 있습니다. 너무 많은 페이지를 만들어버리는 경향이 있어요.

• 프로필 보기 페이지
• 프로필 수정 페이지
• 프로필 삭제 페이지
• 프로필 ...

이렇게 기능별로 페이지를 나누면 관리가 정말 힘들어집니다.

대신 이렇게 하세요:

• 하나의 '프로필 페이지'
• Popup이나 Group으로 보기/수정 모드 전환
• URL 파라미터로 상태 구분

성격에 맞게 페이지를 묶어서 만들면, 나중에 수정할 때도 한 곳만 고치면 됩니다.

1주차에 가장 많이 나온 질문들

Q. "Device 설정은 언제 쓰나요?"

수업에서는 안 씁니다. 모바일 에디터에서 기기 정보를 다룰 때 쓰는 건데, 우리는 웹페이지 (웹앱)이므로 안 씁니다. 현재 아직 모바일 에디터는 베타 기능이라서 개인적으로는 약 1년 후쯤부터 다룰려고 합니다.

Q. "Bubble 요금 구조가 어떻게 되나요??"

앱 하나당 과금되는 구조입니다. 그리고 워크로드(Workload)는 데이터를 다루는 Workflow에서만 소모됩니다.

• 데이터 생성, 수정, 삭제 = 워크로드 사용
• 단순 UI 변경 = 워크로드 사용 안 함

입문자 분들은 걱정 안 하셔도 됩니다. 초기에는 무료 플랜 할당량도 다 못 채우거든요. 서비스를 잘 만들어서 유저를 모으는 데 집중하는 것이 좋아요.

Q. "데이터 구조 초기 설계 할 때, 임시 컬럼을 만들어서 구성하는 것이 좋나요?"

임시 컬럼을 만들 수는 없고, 향후에 필요한 데이터 타입과 필드는 새로 추가할 수 있어요. 물론 기존 유저들에 대해서 새로운 데이터 형식에 맞추어 데이터를 옮겨주거나 변환하는 작업이 필요하겠지만요. (Backend workflow가 이 때 유용합니다.)

예상대로 은근 머리가 아플 수 있으니, 초기에 데이터 설계를 잘 하는 것이 좋습니다.

Q. 숨고 같은 앱 만들 수 있나요? / 싸이월드 같은 앱 만들 수 있나요? / ~ 같은 앱 만들 수 있나요? 등

노코드 툴 버블은 자유도가 굉장히 높아서, 백지 상태에서부터 레고를 쌓아만드는 느낌이에요. 그만큼 시중에 있는 90%의 앱과 웹 서비스들은 만들 수 있다고 보시면 됩니다!

저 또한 교육용으로만 넷플릭스 클론, 인스타그램 클론 만들었고 AI 서비스들도 현재 3개 정도 만들어봤어요.

생각하시는 거, 일단은 다 된다고 보시면 됩니다!

Q. 카카오 로그인도 되나요? 구글 로그인도 되나요? 등등

카카오, 구글, 애플 로그인 등 다양한 플러그인이 이미 만들어져있어, 해당 플러그인 문서와 가이드를 보시면서 연동하시면 만들 수 있습니다.

1주차를 마치며

현재 첫 3주는 VOD 강의를 듣고 오면은, 제가 핵심 내용을 다시 설명해주고, 질의응답을 해주는 식으로 진행되고 있어요.

확실히 각자 어떤 목표가 있어서 다행히 잘 강의를 듣고 와주셨습니다.

노코드의 장점은 빠르게 만들 수 있다는 것이지만, 그렇다고 대충 만들어도 된다는 뜻은 아닙니다. 오히려 비개발자이기 때문에, 기초를 탄탄하게 다져야 나중에 유저가 늘어났을 때도 견딜 수 있는 서비스를 만들 수 있습니다.

다음 주에는 본격적으로 인스타그램의 핵심 기능을 만들어봅니다. 로그인, 게시글 작성, 피드 구성까지 진행할 예정입니다.

🎙️ 에어빌드와 함께 하세요

에어빌드는 노코드 대중화를 목표로 노코드 교육과 노코드 외주, 노코드 기반 자체 서비스을 운영하고 있습니다.

에어빌드는 국내 유일 노코드로 30만명 유저 달성 (외주 개발 해드렸어요), 노코드로 장관상 및 투자 유치, 국내 최초 노코드 버블 엠베세더 선정 등 노코드를 활용하고 알리는데 진심인 팀입니다.

노코드로 성공적인 비즈니스를 운영하고 싶다면, 아래 채널을 통해서 저희와 소통해주세요 😄

노코드 유튜브 보기 : https://www.youtube.com/@learn_nocode
한국 노코드 창업자 & 개발자 오픈채팅방 참여
(무료 노코드 가이드북 제공) :  https://open.kakao.com/o/giwtlNLg
노코드 전문 강의 및 교육 : https://airbuild.kr/course
노코드 부트캠프 신청 (종종 열립니다.) : https://class101.net/ko/products/67ac68caed6d9f7cc8737a7d?utm_campaign=pdp_share&utm_content=share_feature&utm_medium=referral&utm_source=link_share_share&utm_term=67ac68caed6d9f7cc8737a7d

감사합니다.
에어빌드 드림

#노코드 #Bubble.io #노코드부트캠프 #노코드교육 #노코드강의 #창업 #MVP개발 #에어빌드