노코드 풀스택 툴,

버블(Bubble)

아임웹, 카페24, 워드프레스 등 세상에 다양한 노코드 툴이 존재합니다. 하지만, 최근에 많은 노코더가 자신이 사용하는 툴이 아닌, 버블을 찾기 시작했습니다. 왜 이렇게 많은 사람이 버블에 관심을 가지고 있을까요?

버블은 프론트와 백엔드를 모두 대체하는

풀스택 노코드 툴이기 때문입니다

다른 노코드 툴과 다르게, 버블은 프론트와 백엔드 작업을 모두 코딩 없이 진행할 수 있습니다. 풀스택 노코드 툴이라 불릴 정도로 압도적인 자유도와 다양한 기능 덕분에 기존 노코드 툴에서 구현하기 어려운 기능을 모두 버블에서 구현할 수 있습니다.

1️⃣ UI를 픽셀 단위로 조작해 내가 생각한 서비스 화면을 그대로 구현할 수 있습니다.

2️⃣ PC, 테블릿과 모바일 모두 대응하는 반응형 서비스를 만들 수 있습니다.

3️⃣ 클릭 몇 번으로 데이터베이스를 구축하고, 에디터에서 저장된 데이터도 직접 확인할 수 있습니다

4️⃣ 복잡하고 다양한 기능도 코드 1줄 없이 구현할 수 있습니다.

5️⃣ 전세계 사람들이 만든 플러그인을 언제든지 설치해 바로 사용할 수 있습니다 (ex. 카카오 로그인, 네이버 지도, 토스페이먼츠 결제 등)

자타공인 버블 전문가가 준비한

버블 입문자 강의

국내 최초이자 유일한 버블 저자가 함께 합니다

버블은 해외 서비스이고, 최근에 국내에 알려지고 있기에 아직까지 국내 학습 자료가 많지 않습니다. 노코더스는 버블 공인 에이전시이자 버블 전문 교육업체입니다. 더 많은 사람들에게 버블을 알리고자 다양한 온라인 강의를 운영하고 있으며, 여러 기관 및 단체와 제휴를 맺고 버블을 알려드리고 있습니다. 무엇보다 국내 최초이자 유일한 버블 학습서, <풀스택 노코드 툴 with 버블>을 출판해 많은 분에게 사랑을 받고 있습니다. 다양한 교육 활동 경험과 노하우를 집약해 이번 클래스 101 강의에 담아냈습니다.

3개월 동안 30개 이상의 서비스를 출시한

노하우를 담아냈습니다.

노코더스는 설립 3개월 만에 30개 이상의 서비스를 제작했습니다. 많은 고객사가 노코더스가 제작해 드린 서비스를 활용해 예비창업패키지 선정, 청년창업사관학교 입교, 아산나눔재단 최우수상 등 다양한 스타트업 대회 및 행사에서 수상을 거머쥐었습니다. 다양한 서비스의 출시와 성공 경험을 가지고 있지만, 노코더스도 버블을 처음 시작한 순간이 있었습니다. 입문자의 관점에서 가장 좋은 강의가 무엇일지, 지난 시간을 고민하면서 강의를 준비했습니다.

'진짜 서비스'를 만드는 전과정을 알려드립니다

서비스 기획부터 탄탄하게

"내가 아닌, 고객이 원하는 것을 만들어야 한다", 서비스를 만들 때 가장 중요한 원칙입니다. 하지만 서비스 기획 경험이 없으신 분이라면, 어디서부터 어떻게 기획을 해야 하는지 막막할 수 밖에 없습니다. 그렇다고 기획 없이 서비스를 개발하면, 오랜 시간을 공들여 만든 서비스가 유효하지 않을 수 있습니다. IT 비경험자도, 기획자가 아닌 분도 나만의 서비스를 만드실 수 있도록 기획부터 차근차근 알려드립니다.

1️⃣ 타겟 고객이 겪는 문제 파악하기

2️⃣ 문제의 진짜 원인으로부터 솔루션 도출하기

3️⃣ 정보구조도(IA)로 서비스의 전체 구조 기획하기

4️⃣ 와이어프레임으로 개별 페이지 기획하기

5️⃣ 데이터베이스 설계하기

스타일로 서비스 아이덴티티까지 확실하게

버블로 서비스를 제대로 만들려면, 스타일 기능을 제대로 활용해야 합니다. 스타일 기능은 디자인 설정 값을 미리 등록하고, 필요할 때마다 바로 불러와서 사용하는 기능입니다. 이를 활용하면, 서비스의 브랜드 톤과 아이덴티티를 일관적으로 가져갈 수 있습니다. 또한, 개발을 할 때마다 매번 새로 설정하는 게 아닌, 등록된 스타일을 바로 불러와 개발 시간을 크게 단축할 수 있습니다.

1️⃣ 폰트 스타일 등록하기

2️⃣ 컬러 스타일 등록하기

3️⃣ 요소 스타일 등록하기

다양한 기능을 만들며 버블 개발 마스터하기

버블을 가장 빠르게 익히는 방법은 다양한 기능을 직접 만들어 보는 것입니다. 커뮤니티, AI, 결제 등 다양한 기능을 함께 구현하면서 버블을 제대로 사용하는 방법을 익힙니다.

1️⃣ 회원가입과 로그인

2️⃣ 게시물을 작성하고, 공유된 게시물에서 댓글 남기기

3️⃣ 다국어 번역, 메일 초안 작성과 카피라이팅 추천을 AI에게 요청하기

4️⃣ 토스페이먼츠를 연동해 유저가 결제를 진행하고, 포인트 충전하기

5️⃣ 충전된 포인트를 사용해 AI 기능을 사용할 때마다 차감시키기

서비스 배포부터 유지보수까지 한 번에

서비스를 만드는 것과 알리는 것은 별개의 영역입니다. 완성된 서비스가 검색 노출이나 링크 공유에서 더 높은 클릭율을 만드는 디테일한 설정도 함께 알려드립니다. 또한, 커스텀 도메인으로 연동해 나만의 서비스를 최종 배포하는 방법도 소개합니다.

서비스를 출시한 시점부터 유저에게 버그와 이슈 없이 서비스를 안정적으로 제공하는 과제가 주어집니다. 출시한 서비스를 문제 없이 관리할 수 있도록 (1) 효율적인 디버깅 방법과 (2) 비용을 줄여주는 유지보수 및 워크로드 관리 방법까지 함께 설명드립니다.

노코드 툴 + openAI로

코드 없이 AI 서비스 출시하기

대한민국 사람이라면 누구나 1번은 사용했을 chatGPT, 이를 활용해 나만의 AI 서비스를 비개발자도 만들 수 있습니다. openAI는 텍스트 생성 뿐만 아니라 이미지 생성, 음성 생성 등 다양한 API를 제공하고 있습니다

버블에 openAI API를 연동해 다양한 AI 기능을 만드는 방법을 알려드립니다. 비개발자라도 강의를 보고 그대로 따라한다면, 더 많은 API를 연동해 다양한 서비스를 완성할 수 있습니다.

1️⃣ AI를 활용해 영어, 일본어, 중국어 번역 기능 구현하기

2️⃣ 수신자, 메일에 들어갈 정보 등을 입력해 AI가 메일 초안을 대신 작성하기

3️⃣ 핵심 키워드를 전달해 AI가 카피라이팅을 대신 작성해주기

밀도 깊은 학습을 위한

학습 보조 자료

강사님의 버블 에디터를 직접 보며

내 작업과 비교하기

강의에서 사용한 에디터를 확인할 수 있는 링크를 제공합니다. 실습 도중에 막히거나 궁금한 부분이 있다면, 첨부된 에디터 링크를 통해 강사님의 작업물을 직접 확인하실 수 있습니다.

피그마 UI 파일을 보며

디자이너와 협업하듯이 개발하기

강의에서 사용한 피그마 원본 UI 파일을 제공합니다. 해당 파일을 실행해 각 페이지 별 디자인을 확인할 수 있습니다. 텍스트의 폰트 크기, 사용한 컬러의 핵사코드, 요소 사이의 마진과 패딩 등을 직접 보면서 버블 개발을 진행해보세요! 마치 디자이너와 협업하는 느낌으로 버블 개발을 진행할 수 있습니다.

기획 PPT에 필기하면서

IT 기획 마스터하기

기획 파트 강의에서 설명한 PPT 원본 파일을 제공합니다. 해당 PPT를 다운 받아 필기하면서 공부하시면, 기획 개념과 프로세스를 밀도 깊게 학습하실 수 있습니다.

수강 전 참고 사항

✅ 버블 에디터는 모바일에서 사용이 어렵습니다. 해당 강의를 PC에서 들으면서 버블로 함께 실습하시길 추천드립니다.

✅ 무료 플랜으로 서비스를 만들 수 있지만, 실제로 배포하기 위해서 유료 플랜을 사용해야 합니다.

✅ openAI를 연동해 기능을 구현할 때, 크레딧 충전이 필요할 수 있습니다.

✅ 버블 에디터의 UI가 강의 촬영일과 다를 수 있습니다.