3. 버블로 첫 번째 앱 만들기 (기초) : 앱 개발의 단계적 튜토리얼

이 장에서는 Bubble를 사용하여 첫 번째 웹 애플리케이션을 구축하는 과정을 안내합니다.

자신의 첫 번째 앱을 만들 준비가 되셨나요?

 

단계별 튜토리얼을 따라가며 앱 개발의 기본 원칙을 배워보세요.

 

이 장을 마치면 Bubble.io의 작동 방식과 작동하는 웹 애플리케이션을 만드는 방법에 대한 기본적인 이해를 갖게 됩니다.

 

(1) 애플리케이션 정의

 

1. 목적과 기능 정의

애플리케이션 구축을 시작하기 전에 애플리케이션의 목적과 기능을 정의해야 합니다.

 

• 당신의 애플리케이션이 어떤 문제를 해결하고 있습니까?
• 타깃 청중은 누구입니까?
• 애플리케이션에 어떤 기능이 필요합니까?
• 어떤 기능과 기능을 포함시키고 싶나요?

  이러한 질문에 답하여 앱 개발의 견고한 기반을 마련하세요.

 

2. 초안 작성

종이에 시각적 구조 초안을 작성하세요

 

• 일반적으로 앱이 어떻게 보일지와 무엇을 할지에 대한 초안을 종이에 작성하는 것이 좋은 아이디어입니다.

 

경험상, 시각적 구조의 주요 화면 몇 개를 종이에 그리고 각각에 필요한 요소(element)를 포함하여 초안을 작성한 후, 워크플로우를 단계별로 작성하는 것이 시간을 아낄 수 있고 자연스러운 애플리케이션 설계를 할 수 있습니다.

 

(2) 사용자 인터페이스 설계

 

1. 시각 구조를 확립

• 애플리케이션의 목적과 기능을 정의했으면 사용자 인터페이스 설계를 시작할 수 있습니다.
• 요소편집기(element editor)의 요소 패널과 속성 패널을 사용하여 애플리케이션의 레이아웃을 만들고 해당 스타일을 사용자 지정할 수 있습니다.

 

2. 워크플로우 정의

• 일반적인 접근 방식은 앱의 시각적 구조를 먼저 확립한 다음, 프로그램화하는 워크플로우를 정의하는 것입니다.
• 시각적 구조는 사용자가 상호작용해야 하는 페이지 및 핵심 요소들인 입력란, 버튼 등으로 구성됩니다.

 

(3) 데이터 구조 설정

애플리케이션에서 데이터를 저장하고 조작하려면 데이터 구조를 설정해야 합니다.

• 왼쪽 사이드 편집기의 데이터 탭을 사용하여 데이터 유형, 필드 및 관계를 생성할 수 있습니다.
• 앱을 실행하기 위해서는 사용자와 함께 데이터를 생성, 읽기, 업데이트 및 삭제할 수 있는 데이터 구조가 필요합니다.
  • 예시) Instagram의 기본 버전을 만든다고 가정해 보면, 사용자와 게시물이 있을 것입니다. 사용자는 이름, 설명 및 위치를 가질 수 있고, 게시물은 제목, 설명 및 사진을 가질 수 있습니다.

 

(4) 워크플로 구축

 

1. 워크플로는 애플리케이션의 중추입니다.

• 응용 프로그램의 여러 요소가 서로 상호 작용하는 방식과 작업이 자동화되는 방식을 결정합니다.
• workflow 탭에서 Bubble Logic 비주얼 프로그래밍 언어를 사용하여 애플리케이션의 다양한 요소를 연결하고 작업을 자동화하는 워크플로를 생성할 수 있습니다.

 

2. 워크플로우는 일련의 Action(동작)을 트리거하는 이벤트입니다.

• 버튼을 클릭하는 것은 하나의 이벤트입니다.
• 페이지에 필요한 버튼과 입력란을 이미 알고 있다면 이러한 이벤트와 동작에 대해 생각하는 것이 더 쉬워집니다.

 

(5) 추가로 고려해야 할 것 들

 

1. 플러그인 추가 고려

• 앱은 결제 솔루션, 데이터 제공 업체 등 외부 서비스에 의존할 가능성이 매우 높습니다.
• 이는 플러그인이나 앱의 API를 통해 수행됩니다.
• 초기 visual 및 데이터 구조를 확립한 후에 이에 대해 걱정하면 됩니다.

 

2. 페이지 수 고려

• 앱이 필요로 하는 페이지 수는 얼마나 되나요?
• 예를 들어, Facebook은 홈 피드 페이지, 로그인하지 않은 상태의 홈 페이지, 프로필 페이지, 설정 페이지와 같은 여러 페이지를 가지고 있습니다.

 

3. 페이지 간의 이동 및 이동 상황 고려

• 사용자가 페이지 간에 어떻게 이동하는지 및 어떤 상황에서 이동하는지 고려해야 합니다.
• 앱이 저장할 데이터 종류는 어떤 것인가요? 아파트 임대 앱이라면 사용자 외에도 아파트, 리뷰 등이 있을 것입니다. 또는 아파트는 주소, 사진 등을 가질 수 있습니다.

 

(6) 진행하면서 반복할 것

애플리케이션을 구축하는 것은 반복적인 과정입니다.

• 대부분의 사용자는 첫 번째 요소와 간단한 레이아웃으로 페이지의 와이어프레임을 디자인한 후 워크플로우 부분으로 이동하고, 필요한 요소에 대한 더 나은 감각을 갖게 되면 다시 디자인 부분으로 돌아갑니다.
• 앱이 성장하고 제품을 개선하고 기능을 추가함에 따라 디자인, 워크플로우 및 데이터 구조도 수정하게 될 것입니다.

 

버블은 매우 유연하기 때문에 앱을 구축하는 동안 가끔씩 엑셀 수식에서 실수를 하는 것처럼 몇 가지 실수를 할 수도 있습니다. 이것은 프로그래밍 과정의 일부입니다. Bubble은 애플리케이션을 디버그 하고 수정하는 데 도움이 되는 몇 가지 도구를 제공합니다.

 

(7) 유료 기능 사용하기

일부 기능은 유료 요금제에서만 사용할 수 있습니다.

• 버블의 요금제 페이지에서 요금제의 차이점을 검토할 수 있습니다.
• 모든 기능은 접속이 가능할 수 있지만, 현재 요금제가 해당 기능을 지원하지 않으면 실행 모드에서 작동하지 않을 것입니다.

현재 구독에서 해당 기능을 지원하지 않는 경우 해당 기능 옆에 일반적으로 경고가 표시됩니다.

 

(8) 테스트 및 디버깅

애플리케이션을 빌드한 후에는 예상대로 작동하는지 철저히 테스트해야 합니다.

1. Bubble의 디버깅 도구를 사용하여 오류를 식별하고 수정할 수 있습니다.
2. 버블에서는 오류를 실시간, 자동으로 표시해 줍니다.

상단 오른쪽의 오류메시지를 확인할 수 있습니다. (붉은색) 오류메세지를 클릭하면 해당 페이지로 이동하여 오류를 수정할 수 있습니다. 오류메시지가 없어야만 배포가 가능합니다.

 

(9) 배포하기

1. 상단 오른쪽에서 deploy 메뉴에서 배포가 가능합니다.
2. 현재 버전을 저장하여 안전한 상태를 유지한 후에 배포하는 게 사용자 경험을 안전하게 유지할 수 있습니다.

 

 

첫 번째 앱을 구축하는 것은 어렵지만 보람 있는 경험이 될 수 있습니다.

이 장에 설명된 단계를 따르면 버블의 쉽고 간단한 규칙에 따라서 앱을 만드는 방법에 대한 기본적인 이해를 얻을 수 있습니다.

 

다음 장에서는 앱의 각 기능을 향상하고 최적화하는 다양한 방법을 살펴봅니다.

 

버블 배포하기 탭