필독! 버블 AI 앱 제작 가이드 & 영상 튜토리얼

안녕하세요. 합리적인 외주개발의 가치를 더하는 리트머스입니다.
어제 버블 AI에 대한 영상이 공개되며, 버블 AI 피쳐를 테스트할 수 있는 링크도 공개되었습니다!

버블 AI 피쳐 테스트 링크 바로가기 🫧

버블의 AI 앱 생성기는 사용자의 아이디어를 빠르고 쉽게 앱으로 만들어주는 버블의 야심찬 툴입니다.
이러한 버블 AI가 무엇인지, 어떻게 사용하는 것인지 많은 분들이 궁금해 하실 것 같은데요.
누구보다 빠르게 버블 AI 가이드를 정리한 글과 실제 버블 AI를 이용해 앱을 제작한 영상을 가져왔습니다!
이번 리트머스의 글을 읽고, 버블 AI를 효과적으로 활용하기 위한 필수 개념과 프롬프트 작성 방법을 익히시는데 도움이 되길 바랍니다!
더 많은 정보를 알고 싶다면, 아래의 버블 공식 문서를 참고해보세요!

버블 가이드 원본 문서 바로가기 📄

버블 AI 필수 개념 정리

프롬프트란?

프롬프트는 Bubble AI가 앱을 만들기 위해 입력받는 텍스트 명령입니다.
앱의 유형, 목적, 핵심 기능, 스타일을 간결히 담아 작성하면 되죠.

User Story란?

User Story는 최종 사용자의 관점에서 앱의 목적과 기능을 간단히 설명한 것입니다.
User Story의 예시

• 사용자로서 지역 장인의 수공예품을 검색하고 구매하고 싶다.
• 사용자로서 관심 있는 상품을 위시리스트에 추가하고 싶다.

샘플 데이터란?

샘플 데이터는 실제 데이터를 대체한 가상 데이터인데요.
앱의 구조와 기능을 테스트하는 데 사용되며, 이후 실제 데이터로 교체할 수 있습니다.

버블 AI 앱 생성 과정

버블 AI는 다음 3단계로 앱을 생성합니다.

1. 초기 프롬프트 입력: 만들고자 하는 앱의 주요 내용을 명확히 작성합니다.
2. 블루프린트 확인 및 수정: 제공된 블루프린트를 확인하고 기능 추가 및 삭제 등 수정 작업을 합니다.
3. 최종 앱 생성: 수정된 블루프린트를 바탕으로 실제 앱이 몇 분 내에 자동으로 생성됩니다.

생성된 앱은 버블로 자유롭게 수정 및 추가가 가능해요.

프롬프트 작성 가이드

프롬프트는 짧고 명확하게 작성하는 것이 좋아요.
1~2문장으로 구성하며, 최대 500자를 넘기지 않는 게 좋습니다.

프롬프트 작성 시 포함할 사항

• 앱의 유형
• 타겟 사용자
• 앱의 주요 목표
• 사용자가 수행할 작업
• 원하는 스타일 (색상, 테마 등)

권장 사항

• 앱의 색상과 스타일을 구체적으로 언급하세요.
• • 예시) 다크모드, 미니멀리즘
• 앱 이름이 있다면 적어주세요.

주의 사항

• 구체적인 페이지 레이아웃 요청은 현재 반영되지 않을 수 있어요.
• 플러그인, API 호출 요청은 별도로 추가해야 합니다.

프롬프트 예시

• 예시 1: 뉴욕 지역 소비자를 위한 장인의 수공예품 마켓플레이스 앱.
• 예시 2: 파란색 기반의 미니멀한 금융 관리 앱으로, 계좌 관리 및 지출 현황을 확인할 수 있는 앱.
• 예시 3: 학생들이 강의 자료를 공유하는 보라색 테마의 다크모드 커뮤니티 플랫폼.

버블 AI 참고 사항

현재 버블 AI는 플러그인, API, 결제 및 파일 업로드는 자동으로 지원되지 않는데요.
AI로 생성된 앱 내에서 추가 기능으로 추가하면 되겠습니다.
또한, 현재 베타 단계에서는 한 달에 10개 제작으로 개수에 제한이 있으니 유의하세요!

버블 AI 실사용 영상

리트머스도 실제로 버블 AI 베타 버전을 사용해 보았는데요!
단계별로 설명해 드릴게요.

1.프롬프트 작성

간단한 기능과 구조도가 명확한 프롬프트를 버블 AI가 잘 처리하기 때문에,
투두 리스트를 정리해주는 간단한 프롬프트를 넣어보았습니다.
프롬프트 : “Create a simple to-do list web app where users can add, check off, and delete tasks. No login required.”

2.블루프린트 생성

블루프린트는 어떤 구조와 기능을 포함할지 미리 알려주는 프롬프트 기반의 지침인데요.
기능 명세서 같은 개념으로 생각하시면 될 것 같아요.
저는 프롬프트 그대로 블루프린트를 생성했습니다.

3.블루프린트 수정

원한다면 블루 프린트의 내용의 수정 및 추가가 가능한데요.
수정하지 않고 그대로 Generate를 진행해보았습니다.

4.버블 AI 앱 생성

앱을 만드는데 5분에서 7분이 소요된다고 하는데요.
간단한 프롬프트를 넣어서 그런지, 약 1분밖에 소요되지 않았어요.

5.앱 생성 완료

1분만에 이렇게 앱이 만들어졌는데요!

6.이슈 해결

5개의 이슈가 발생해서 해결해 보았습니다.
4개의 이슈는 아이콘 위치 설정에 대한 버그였는데요. 아이콘 위치를 조정해주니 바로 해결되었구요.
마지막 이슈는 클릭을 해서 해당 레이어로 들어가니 곧바로 사라졌습니다.

7.최종 앱 모습

최종적으로 만들어진 앱의 형태인데요!
1분만에 뚝딱 앱이 만들어지고 기본 형태가 잡히는 모습이었습니다.

다만, 디자인적으로 리스트들 간격이 없는 부분이 아쉬웠구요.
기능적으로도 매우 기초적인 수준에 불과했습니다.
물론, 이는 프롬프트 자체가 단순한 원인도 있을 것이라 파악됩니다.
버블 AI를 어떻게 똑똑하게 쓸 수 있을지, 앱 빌더로 버블 AI가 얼마만큼 구현이 가능한지는 앞으로 프롬프트 및 블루프린트 등을 고도화하는 방법으로 체득해야 할 것 같습니다.

버블 AI를 어떻게 사용할 것인가

버블 AI는 현재 베타 단계입니다.
버블 AI의 비전은 누구나 쉽고 빠르게 자신만의 앱을 만들 수 있도록 하는 것이며, ‘사업에 쓸 수 있을 정도로 견고한’, ‘지속적 업데이트가 가능한’ 앱을 만들 수 있도록 하는 것이라고 포부를 밝힌 바 있는데요.
다음 번에는 프롬프트를 고도화해서 버블 AI를 구현하는 소식으로 찾아오겠습니다.
리트머스를 통해 자세한 정보와 업데이트 소식을 누구보다 빠르게 알아보세요!

📌 버블 외주 개발 맡기기 전, 3가지만 꼭 확인하세요!

✅ 버블 공식 에이전시인지 확인하세요.

리트머스는 전 세계 337곳 중 28위,

동아시아권에서는 1위입니다 🏆 (공식 순위 보기)

✅ 버블 공식 자격증이 있는지 체크하세요.

리트머스는 전 세계 약 600명뿐인 버블 공식 자격증 보유자 중

6명의 전문가가 함께합니다 🎖️ (글로벌 TOP 10 규모!)

✅ 유사한 프로젝트 경험이 있는지 꼭 살펴보세요.

리트머스는 SaaS, ERP, AI, 마켓플레이스 등

다양한 웹과 앱을 성공적으로 구축한 경험이 있습니다 💻 (포트폴리오 보기)

버블 개발은 "할 수 있다"보다 "제대로 하는 게" 더 중요합니다.

리트머스가 실력과 경험으로 완성도 높은 결과를 약속드립니다!

언제든지 무료 문의 해보세요 ☺️

문의하러 가기 🚀