Bubble 사용법: 2025년 단계별 튜토리얼

앱을 만들고 싶은데 코드를 많이 알아야 한다고 생각하시나요?

그건 큰 문제예요.

많은 사용자들이 자신만의 콘텐츠를 만들고, 페이지를 디자인하고, 심지어 앱을 출시하고 싶어하지만, 어려움을 느끼고 있습니다.

그들은 AI 기능을 사용하고 동영상 튜토리얼을 보면서 방법을 배우고 싶어하지만, 그 모든 것이 너무 먼 미래의 일처럼 느껴집니다.

자, 해결책은 바로 버블입니다. 

버블 사용법을 알려드리겠습니다.

거품

복잡한 데이터베이스 때문에 고생하지 마세요. Bubble을 사용하면 앱 데이터를 시각적으로 관리할 수 있습니다. 지금 바로 데이터 기반 앱 개발을 시작하세요!

Bubble을 무료로 사용해 보세요 전체 리뷰 읽기

버블 계정 설정하기

버블 웹사이트로 이동하기

앱 개발의 첫 번째 단계는 Bubble 웹사이트에 접속하는 것입니다.

즐겨 사용하는 웹 브라우저, 즉 웹사이트를 볼 때 사용하는 프로그램을 여세요.

일반적으로 사용하는 브라우저는 Chrome, Firefox, Safari 또는 Edge입니다. 상단의 주소 표시줄에 'bubble.io'를 입력하고 Enter 키를 누르세요.

이렇게 하면 버블 홈페이지로 바로 이동합니다.

'가입하기', '시작하기', 또는 '계정 만들기'와 같은 문구가 적힌 버튼을 찾아보세요.

이것이 바로 당신이 제작을 시작할 수 있는 티켓입니다.

무료 계정 등록하기

해당 버튼을 클릭하면 회원가입 절차가 시작됩니다.

이메일이나 게임 계정을 만들 때처럼 몇 가지 정보를 제공해야 합니다.

Bubble은 연락을 위해 이메일 주소가 필요하며, 계정 보안을 위해 비밀번호를 설정해야 합니다.

강력한 비밀번호를 선택하세요. 문자, 숫자, 기호를 조합하는 것이 가장 좋습니다. 그리고 잊어버리지 않도록 안전한 곳에 적어 두세요.

Bubble은 Bubble을 어떤 용도로 사용할 계획인지와 같은 몇 가지 추가 질문을 할 수도 있습니다.

걱정하지 마세요. 원하시는 것과 가장 비슷한 옵션을 선택하시면 됩니다.

버블 인터페이스 이해하기

로그인하시면 버블 인터페이스가 표시됩니다.

이 화면은 앱을 개발하는 메인 화면입니다. 처음에는 다소 복잡해 보일 수 있지만, 섹션별로 잘 정리되어 있습니다.

가장 중요한 부분은 다음과 같습니다.

• 디자인 탭: 이곳에서 앱의 페이지를 시각적으로 만들 수 있습니다. 버튼과 같은 요소를 드래그 앤 드롭하여 배치할 수 있습니다. 텍스트 상자와 이미지를 이 영역에 배치합니다.
• 워크플로 탭: 여기서는 앱에 무엇을 해야 할지 알려줍니다. 사용자가 버튼을 클릭하거나 무언가를 입력할 때 앱이 따라야 할 지침과 같은 '워크플로우'를 만듭니다.
• 데이터 탭: 이곳에서 앱의 데이터베이스를 관리합니다. 데이터베이스는 정보를 저장하는 디지털 서류함과 같습니다.
• 요소 트리: 이 화면에는 페이지에 추가한 모든 요소가 목록 형태로 정리되어 표시됩니다.
• 부동산 에디터: 요소를 클릭하면 이 영역에 해당 요소의 모양과 동작을 변경할 수 있는 모든 방법이 표시됩니다.

앱의 첫 페이지 만들기

비주얼 에디터 알아보기

비주얼 편집기는 앱의 외관을 실제로 디자인하는 곳입니다.

마치 빈 캔버스 같아요. 화면 왼쪽에는 '요소'라고 불리는 여러 도구들이 있습니다.

이것들은 페이지에 끌어다 놓을 수 있는 요소들입니다. 디지털 빌딩 블록이라고 생각하시면 됩니다.

텍스트를 입력할 텍스트 상자, 클릭할 버튼, 그림을 표시할 이미지 등 다양한 요소가 있습니다.

텍스트 및 버튼 추가

간단한 것부터 시작해 봅시다.

텍스트를 추가하려면 '텍스트' 요소를 클릭하고 페이지 중앙으로 드래그하세요.

이제 원하는 내용을 무엇이든 입력할 수 있습니다. 

"제 앱에 오신 것을 환영합니다!" 또는 "아래 버튼을 클릭하세요."와 같은 문구가 좋을 것 같습니다.

다음으로 버튼을 추가해 보겠습니다.

'버튼' 요소를 클릭하고 텍스트 아래로 드래그하세요. 버튼 안의 텍스트 상자에 입력하여 버튼에 표시될 내용을 변경할 수 있습니다.

'시작'이나 '여기를 클릭하세요'와 같은 문구를 사용해 보세요.

페이지 레이아웃 디자인하기

지금 보시면 아시겠지만, 상황이 조금 어수선합니다.

걱정하지 마세요. 저희가 해결해 드리겠습니다. 요소를 클릭하고 드래그하여 이동할 수 있습니다.

드래그할 때 나타나는 파란색 선 보이시죠?

그들은 당신이 일렬로 정렬하는 데 도움을 줍니다. 

텍스트와 버튼의 위치를 ​​조정하여 보기 좋게 만들어 보세요.

모서리에 있는 작은 사각형을 클릭하고 드래그하여 요소의 크기를 변경할 수도 있습니다. 텍스트의 크기를 키우거나 줄이거나, 버튼의 길이를 늘릴 수 있습니다.

기본 기능 추가

워크플로우 이해하기

좋아요, 이제 우리 앱이 보기 좋게 만들어졌어요.

하지만 우리는 어떻게 그것을 만들어낼까요? 하다 무엇?

바로 여기서 워크플로우가 등장합니다. 워크플로우는 일련의 지침과 같습니다.

앱이 버튼을 클릭하거나 다른 작업을 수행할 때 어떤 동작을 해야 하는지 알려줍니다.

버튼이 특정 기능을 수행하도록 만들기

우리 버튼이 간단한 기능을 하도록 만들어 봅시다.

방금 만든 버튼을 클릭하세요. 그런 다음 '워크플로우'라고 표시된 탭을 찾으세요.

�8221; 그걸 클릭하세요. 그러면 "이벤트를 추가하려면 여기를 클릭하세요"라는 버튼이 보일 겁니다.

"안 이벤트 이것이 워크플로를 시작하는 부분입니다. 해당 버튼을 클릭하세요.

"요소 작업"을 선택한 다음 "클릭"을 클릭합니다.

이제 버튼을 클릭했을 때 앱이 어떤 작업을 수행해야 하는지 알려줘야 합니다.

메시지를 표시하도록 설정해 보겠습니다. "작업 추가"를 클릭하세요.

앱에서 할 수 있는 작업 목록이 표시됩니다. '알림'을 찾아 클릭하세요. 텍스트 상자에 표시할 메시지를 입력합니다. 예를 들어, '버튼을 클릭하셨습니다!'와 같이 입력할 수 있습니다.

이제 누군가 버튼을 클릭하면 메시지가 담긴 작은 상자가 팝업으로 나타납니다. 이것이 바로 첫 번째 워크플로입니다!

입력 필드 추가

입력 필드는 사용자가 정보를 입력할 수 있는 곳입니다.

사람들이 이름, 이메일 또는 기타 정보를 입력할 수 있는 텍스트 상자라고 생각하면 됩니다.

입력 필드를 추가하려면 '입력' 요소를 클릭하고 페이지로 드래그하세요.

텍스트나 버튼처럼, 이것도 이동시키고 크기를 조절할 수 있습니다.

입력 필드가 요구하는 정보의 종류도 변경할 수 있습니다.

속성 편집기를 살펴보세요. 텍스트, 숫자, 이메일 또는 비밀번호 중 어떤 것을 저장할지 선택할 수 있습니다.

페이지 연결 및 탐색

여러 페이지 만들기

대부분의 앱에는 여러 페이지가 있습니다.

홈페이지, 프로필 페이지 또는 설정 페이지가 있을 수 있습니다.

새 페이지를 만들려면 '새 페이지' 또는 이와 유사한 문구가 있는 버튼이나 링크를 찾으세요.

그것을 클릭하면 새 빈 페이지가 나타납니다.

'프로필' 또는 '설정'과 같은 이름을 지정하세요.

버튼을 사용하여 페이지 연결하기

자, 이제 사람들이 페이지 사이를 이동할 수 있도록 만들어 봅시다.

버튼을 이용하면 됩니다. 첫 페이지로 돌아가기

페이지에 버튼을 드래그하여 추가합니다. 버튼의 워크플로에 새 액션을 추가합니다.

이번에는 "탐색"을 선택한 다음 "페이지로 이동"을 선택하세요.

다음으로, 버튼을 클릭했을 때 이동할 페이지를 선택하세요. 

이제 누군가 저 버튼을 클릭하면 다른 페이지로 이동하게 됩니다.

내비게이션 메뉴 만들기

페이지 수가 많으면 탐색 메뉴를 사용하는 것이 유용할 수 있습니다.

이는 앱의 상단이나 하단에 있는 버튼 모음으로, 사용자가 페이지 간 이동을 쉽게 할 수 있도록 해줍니다.

내비게이션 메뉴를 만들려면 페이지 상단에 '그룹' 요소를 추가하세요.

그다음, 그룹 안에 버튼 몇 개를 추가하세요.

이전처럼 각 버튼이 서로 다른 페이지로 연결되도록 만드세요. 이제 앱 내에서 쉽게 이동할 수 있는 방법이 생겼습니다.

페이지 간 데이터 전달

때로는 한 페이지에서 다른 페이지로 정보를 전달하고 싶을 때가 있습니다.

예를 들어 프로필 페이지가 있는 경우 홈페이지에서 프로필 페이지로 사용자 이름을 보내고 싶을 수 있습니다.

이를 위해서는 '페이지 매개변수'라는 것을 사용해야 합니다.

다른 페이지로 이동하는 버튼을 만들 때 URL에 매개변수를 추가할 수 있습니다. 

이것은 페이지에 어떤 정보를 보여줄지 알려주는 작은 태그를 추가하는 것과 같습니다.

데이터를 전송하는 페이지에서 해당 매개변수를 사용하여 정보를 표시할 수 있습니다.

예를 들어 텍스트 요소를 추가하고 매개변수에서 사용자의 이름을 표시하도록 지정할 수 있습니다.

이제 프로필 페이지에 올바른 이름이 표시될 것입니다.

앱 테스트 및 미리보기

작업 미리보기 방법

좋아요, 이제 몇 가지 페이지를 만들고 몇 가지 액션을 추가했군요. 

이제 여러분은 앱의 외관과 작동 방식을 확인하고 싶을 것입니다.

Bubble을 사용하면 이 작업을 쉽게 할 수 있습니다. '미리 보기' 또는 이와 유사한 버튼을 찾아보세요.

보통 재생 버튼처럼 생겼습니다.

클릭하면 Bubble이 브라우저에 새 탭을 열어 앱을 보여줍니다.

앱이 실제로 작동하는 모습을 보는 것과 같습니다. 버튼을 클릭하고 입력란에 텍스트를 입력하여 모든 기능이 계획대로 작동하는지 확인할 수 있습니다.

다양한 시나리오 테스트

앱을 미리 볼 때는 아무렇게나 클릭하지 마세요.

사람들이 앱을 사용할 수 있는 다양한 방법을 생각해 보세요.

모든 버튼을 클릭해 보세요. 모든 입력란에 입력해 보세요. 다양한 작업을 수행했을 때 어떤 결과가 나타나는지 확인해 보세요.

예를 들어 로그인 페이지가 있다면 잘못된 비밀번호를 입력해 보세요.

앱에 오류 메시지가 표시되는지 확인해 보세요.

데이터를 저장하는 버튼이 있다면 데이터베이스를 확인하여 데이터가 올바르게 저장되고 있는지 확인하십시오.

일반적인 문제 디버깅

때로는 일이 잘 풀리지 않을 수도 있어요. 괜찮아요.

누구에게나 일어날 수 있는 일이죠. 문제를 발견하면 그걸 '버그'라고 부릅니다. 버그를 수정하려면 '디버깅'을 해야 합니다.

Bubble에는 버그를 찾는 데 도움이 되는 몇 가지 도구가 있습니다.

'디버거'라는 도구를 찾아보세요.

앱이 실행될 때 백그라운드에서 어떤 일이 일어나는지 보여줄 수 있습니다. 이를 통해 특정 기능이 제대로 작동하지 않는 이유를 파악하는 데 도움이 될 수 있습니다.

흔히 발생하는 문제점은 다음과 같습니다.

• 버튼이 아무런 작동도 하지 않습니다.
• 데이터가 제대로 저장되지 않습니다.
• 페이지가 로드되지 않습니다.
• 오류 메시지.

버블의 대안

다른 것을 찾고 있습니다 버블 대체품 노코드 및 로우코드 앱 개발 분야에서요?

다음은 몇 가지 인기 있는 옵션입니다.

• 소프트: 이 플랫폼은 스프레드시트와 데이터베이스(Airtable, Google Sheets 등)를 웹 앱 및 고객 포털로 신속하게 전환하는 데 탁월합니다. 사용 편의성과 다양한 사전 제작 템플릿으로 잘 알려져 있습니다.
• 버지: 고도의 맞춤 설정이 가능한 복잡한 웹 애플리케이션을 구축할 수 있는 강력한 노코드 플랫폼입니다. 풍부한 플러그인 생태계를 갖추고 있지만 학습 곡선이 다소 가파를 수 있습니다.
• 활주: This tool focuses on simplicity, allowing you to create mobile apps directly from Google Sheets. It’s great for быстро creating internal tools and simple applications.
• 소프트젠: 이 AI 기반 플랫폼은 사용자 설명을 해석하고 애플리케이션을 생성하여 앱 개발을 간소화하는 것을 목표로 합니다. 신속한 프로토타이핑과 반복적인 개선을 위해 설계되었습니다.
• 아달로: 코딩 없이 네이티브 모바일 앱을 구축할 수 있도록 설계된 플랫폼으로, 사용하기 쉬운 드래그 앤 드롭 인터페이스와 사전 제작된 구성 요소를 제공하는 마켓플레이스를 갖추고 있습니다.

결론

잘하셨습니다! 이제 버블의 기본 사용법을 이해하셨습니다.

이 가이드는 여러분에게 속성 강좌를 제공했지만, 여러분이 할 수 있는 일은 아직 훨씬 더 많습니다.

코드를 한 줄도 작성할 필요가 없습니다.

다음 프로젝트에 바로 뛰어들고 싶다면 다음 팁을 기억하세요: 꾸준히 연습하세요.

검색하는 것을 두려워하지 마세요 유튜브 더 자세한 설명은 Bubble.io 튜토리얼을 참조하세요.

초보자를 위한 수많은 자료와 모범 사례를 찾아볼 수 있습니다.

버블 마켓플레이스는 도움을 찾기에 아주 좋은 곳입니다.

자주 묻는 질문