Fun

노코드툴 Bubble.로 생일파티 초대 반응형 페이지 개발기(1)

냅도야 2023. 12. 10. 20:58

 

왜? 

개인적으로 올해는 떠들썩한 생일을 계획하고 있습니다. 약 30명 정도가 참여하는 파티를 준비중인데요. 

RSVP를 어떤 식으로 하는 게 좋을까 하다가 Haypay에서 만져보고 있던 버블을 활용해보자!싶어서 버블로 생일파티를 위한 반응형 홈페이지를 개발했습니다. 홈페이지는 초대장으로써 파티에 관련된 사항을 안내하고, 입금내역 확인 및 응답을 받는 용도인데요. 회의 당일엔 게임과 이벤트를 위한 용도로도 사용될 예정입니다. 초대장을 그냥 구글폼으로 할까?도 고려해봤지만, 여러가지 확장성을 고려해봤을 때 좋은 선택이었던 것 같아요. 일단 멋이 있어서 기분이 좋습니다. 하하

 

Bubble이 뭔데?

버블은 코드 없이 비주얼 인터페이스만을 이용하여 웹사이트나 웹 애플리케이션을 만들 수 있는 노코드 플랫폼입니다. 프로그래밍 지식이 없어도 간단하게 직관적으로 웹을 제작할 수 있다는 점이 아주 매력적이라고 생각합니다. 특히 요즘 생성형 AI의 강세가 되면서 예전에는 기술 자체의 숙련도가 중요했다면 요새는 툴을 얼마나 잘 사용하는지도 기술이 될 수 있다고 생각하는데요. 사실 이용자는 이게 진짜 한땀한땀 코드를 써내려서 만든 페이지인지 노코드툴로 만들었는지 알게 뭐람 이잖아요? 그래서 아무래도 직접 개발하는 것보다는 한계가 있겠지만, 빠르게 MVP를 검증한다던가 아니면 저처럼 이벤트성의 간단한 작업을 할 때는 좋은 선택이라고 생각합니다.  


장점

  1. 커스터마이즈 할 수 있는 자유도가 높다. 컴포넌트의 위치를 픽셀단위다, 반응형으로도 하나하나 지정 가능하고, 복잡한 로직도 워크플로우로 구현 가능하다.
  2. 다양한 플러그인이나 API를 사용해서 쉽게 다른 서비스와도 통합할 수 있다. 구글이나 카카오같은 소셜 로그인 인증라던지, 스포티파이에서 노래 가져온다 던지 이미 만들어진 플러그인으로 쉽게 확장가능하다.
  3. 자체적으로 발생하는 데이터에 대한 관리가 용이하다. 따로 데이터베이스를 생성할 필요없이 그때그때 생성되는 데이터를 정의해서 저장하기만 하면 된다. 심지어 유저별로 관리할 수도 있고 접근성도 관리할 수 있다. 
  4.  커뮤니티가 활발하다. 배울 수 있는 튜토리얼과 교육자료가 잘 준비되어있다.

 

단점

  1. 유료다. 심지어 앱마다 따로 결제해야 합니다. 
  2. 자유도가 높다는 게 양날의 검입니다. 반대로 말하면 할일이 많아진다는 단점이 될 수도 있습니다. 단순히 배치를 어디에 할 것인가 뿐 아니라 모양 크기, 폰트 사이즈까지 설정하다 보면 아무래도 시간이 더 많이 걸리죠. 

 

뭘 만드는데?

일단 초대장의 역할을 해줘야해서 파티에 대한 기본 정보를 알려주고 컨셉을 소개하는 메인 페이지, 그리고 RSVP(올꺼야? 말꺼야?)를 위한 폼이 필요합니다. 추가로 원래는 리플렛으로 제작하려고 했지만, 해보니까 해볼만 한 것 같아서 추가로 행사에서 쓸 빙고보드와 익명폼 페이지도 추가로 제작할 예정입니다. 오늘 포스팅에서는 메인 페이지와 RSVP폼 페이지를 제작한 내용에 대해 기록하겠습니다.

 

요즘엔 사람들이 주로 폰으로 접속을 하기 때문에 모바일 화면을 기준으로 반응형 페이지를 제작했고, 사이트에 가입하세요^^ 하면 넘 귀찮을 것 같아서 로그인 없이 서비스를 이용할 수 있도록 했습니다. 

 

완성된 사이트가 궁금하시다면 아래에서 접속가능합니다.

 
 

https://hayoungparty.bubbleapps.io/

 

The most powerful no-code platform

Bubble introduces a new way to build a web application. It’s a no-code point-and-click programming tool. Bubble hosts all applications on its cloud platform.

hayoungparty.bubbleapps.io

메인 페이지(상) 로고와 파티의 테마가 되는 영화의 유투브 클립이 삽입됨
메인페이지(하) 초대글과 파티에 대한 안내, 그리고 RSVP 페이지로 이어지는 버튼
RSVP 폼 - 응답에 따라 다음 컴포넌트가 달라짐

 

 

 

탭별 기본 기능 소개

 

버블의 앱을 생성하고, Editor 모드는 위 그림과 같이 7가지 탭으로 구성되어있습니다. 

1. Design 

  • 기능: Design 탭에서는 웹 애플리케이션의 시각적 요소를 구성하고 디자인합니다. 이곳에서는 버튼, 텍스트 박스, 이미지, 그리고 기타 UI 요소들을 페이지에 드래그 앤 드롭으로 배치할 수 있습니다.
  • 활용: 애플리케이션의 레이아웃을 설정하고, 다양한 요소들을 조합하여 사용자 인터페이스를 디자인할 수 있습니다. 예를 들어, 로그인 폼, 네비게이션 바, 이미지 슬라이더 등을 쉽게 추가하고 구성할 수 있습니다.

2. Workflow 

  • 기능: Workflow 탭에서는 애플리케이션의 기능적 측면을 다룹니다. 사용자는 여기서 버튼 클릭, 데이터 입력 등의 사용자 행동에 대한 반응을 프로그래밍합니다.
  • 활용: 사용자 상호작용에 대한 로직을 구현할 수 있습니다. 예를 들어, 사용자가 '로그인' 버튼을 클릭했을 때 로그인 프로세스를 실행하거나, 폼을 제출했을 때 데이터를 데이터베이스에 저장하는 등의 작업을 설정할 수 있습니다.

3. Data 

  • 기능: Data 탭은 애플리케이션의 데이터베이스를 관리하는 곳입니다. 여기서 데이터 유형을 정의하고, 각 데이터 유형에 어떤 필드가 필요한지 설정할 수 있습니다.
  • 활용: 필요한 데이터 구조를 생성하고 관리합니다. 예를 들어, 사용자 프로필, 상품 정보, 주문 기록 등 다양한 종류의 데이터를 저장하고 관리할 수 있습니다.

4. Style 

  • 기능: Style 탭에서는 애플리케이션의 전반적인 스타일과 테마를 설정합니다. 글꼴, 색상, 버튼 스타일 등 전역적으로 적용되는 디자인 요소들을 관리할 수 있습니다.
  • 활용:애플리케이션의 일관된 룩 앤 필을 구축할 수 있습니다. 예를 들어, 기업의 브랜드 색상을 적용하거나, 전체적인 디자인 테마를 설정할 수 있습니다.

5. Plugin 

  • 기능: Plugin 탭에서는 다양한 추가 기능과 통합을 위한 플러그인을 설치하고 관리할 수 있습니다. 이를 통해 애플리케이션의 기능을 확장할 수 있습니다.
  • 활용: 구글 애널리틱스, 지도, 소셜 미디어 통합 등 다양한 외부 서비스와의 연동을 구현할 수 있습니다.

6. Settings 

  • 기능: Settings 탭에서는 애플리케이션의 전반적인 설정을 관리합니다. 이에는 호스팅 설정, 도메인 연결, SEO 설정, 보안 옵션 등이 포함됩니다.
  • 활용: 이 탭에서는 애플리케이션의 기술적인 측면을 조정하고 최적화할 수 있습니다. 예를 들어, 고유한 도메인을 설정하거나, 애플리케이션의 검색 엔진 최적화를 위한 설정을 할 수 있습니다.

 

 

직면과제와 해결 

 플랫폼이 직관적이고 기본적인 내용은 이미 공유된 자료가 많아서 오늘 포스팅에는 구체적으로 제 생일파티 홈페이지에서 어떤 문제가 있었고 어떤 식으로 해결했는지 구체적인 사례를 소개해보려고 합니다. 

 

1. 모바일 페이지에 최적화된 반응형 페이지를 만들고 싶다. 

아주 바보같지만, 처음에 앱을 만들면 웹페이지 크기로 페이지가 생성됩니다. 하지만 저는 주로 사람들이 모바일로 페이지에 접속할 거라 모바일을 기준으로 반응형 페이지를 제작하고 싶었어요. 기본 화면 사이즈를 스마트폰 화면에 적합하도록 만들고 싶은데 화면 크기를 어떻게 줄이는지는 너무 당연한거라 그런지 어디에도 안알려주더라고요. 하지만 알고보면 아주 간단한데 가끔 바보짓 할 때가 있잖아요, 저만 그런가요? 

 

화면크기 모바일에 맞도록 설정하는 법

 

Design 탭의 Elements Tree 혹은 맨 윗줄에 Page:index -> index 를 선택해서 인덱스 설정창을 띄워줍니다.

 

그럼 이런식으로 레이아웃 탭에서 크기를 조정할 수 있습니다. 저는 이런 쪽은 잘 몰라서 그냥 구글링해서 안드로이드 화면 크기.. 이런식으로 했더니 360*640이 나오더라고요. 근데 저는 메인페이지 화면이 좀 스크롤이 있는 편이라 740으로 설정했습니다. 어차피 반응형으로 요소를 배치해서 띄우는 화면에 따라 크기가 달라질 거지만, 기본 크기를 이렇게 설정해두면 모바일 환경을 고려해서 배치하기가 더 용이해집니다! 

 

 

반응형으로 요소 배치하기

 

버블에서 반응형으로 요소를 배치하려면 일단 그룹화를 잘해야합니다. 

왜나하면 그룹별로 하위 요소들을 어떻게 배치할 지를 선택할 수 있기 때문이죠.

 

Container layout 옵션으로는 Fixed, Align to parent, Row, Column 이 있습니다. 각 옵션을 표로 비교하여 정리하면 아래와 같습니다. 

Option Description Use Cases Responsive Behavior
Fixed 고정된 크기를 유지하며, 화면 크기나 부모 컨테이너에 영향을 받지 않음. 로고나 버튼과 같이 일관된 크기가 필요한 요소에 이상적. 화면 크기 변화에 반응하지 않고 설정된 크기를 유지함.
Align to Parent 부모 컨테이너에 대해 크기와 위치를 상대적으로 조정함. 반응형 헤더와 같이 부모 컨테이너에 따라 크기나 위치를 조절해야 하는 요소에 유용. 부모 컨테이너 크기 변화에 따라 상대적인 크기와 위치를 조정하여 반응함.
Row 자식 요소들을 수평적인 행으로 배열하며, 가용한 가로 공간에 따라 너비를 조정함. 내비게이션 메뉴나 이미지 갤러리와 같은 수평 레이아웃에 최적. 가용한 수평 공간에 따라 행 내의 자식 요소 크기가 조정됨.
Column 자식 요소들을 수직적인 열로 배열하며, 가용한 세로 공간에 따라 높이를 조정함. 리스트나 폼 필드와 같이 요소들을 수직적으로 쌓아야 할 경우에 적합. 가용한 세로 공간에 따라 열 내의 자식 요소 크기가 조정됨.

 

일반적으로  Row는 가로  Column은 세로의 이미지라 이미지를 한 줄씩 넣고 싶을 때  Row를 써야 할 것 같았는데, Row는 수평 배치, Column은 수직 쌓기라고 해서 처음엔 좀 헷갈렸습니다. 

 

 

크기설정은 요소별로 역시 layout 탭에서 설정할 수 있습니다. 화면크기에 따라 요소의 크기를 달라지게 하고 싶으면 단위를 px에서 %로 바꿔주면 됩니다. 여기서  %는 상위종속된 그룹의 크기 기준입니다. 위 그림의 Text Header는 100%로 설정되어있지만, Text Header가 속한 그룹의 크기가 90%라서 전체 화면의 크기의 90%에 꽉차게 제목 텍스트가 보입니다!

 

2. 동영상 삽입하기

생일파티의 제목과 전체적인 테마가 영화 Soul의 명대사에서 시작된 것이라 초대장에서 컨셉을 확실하게 전달하기 위해 해당 장면이 들어갔으면 좋겠다고 생각했습니다. Bubble에서  Video 엘리먼트를 제공하기 때문에 이 작업은 비교적 간단하게 할 수 있었습니다!

 

 

먼저 Design 탭의 Video를 필요한 위치에 drag&drop 해서 엘리먼트를 생성합니다. 비디오 소스에서 Youtube 옵션을 선택하면 바로 동영상을 첨부할 수 있습니다. "https://www.youtube.com/watch?v=KVIyJoxLQjg" 페이지의 동영상을 첨부하고 싶다면 ? 뒤에 파라미터만 Video ID로 입력해주시면 됩니다. 

 

 

 

 

3. 클릭 시 외부 페이지로 이동(카카오톡 송금코드) / 계좌번호 복사하기

파티에 참가비가 있어서 손님들에게 입금 정보를 알려드려야 했습니다. 이 과정이 번거롭지 않게 두 가지 옵션을 제공했습니다. 

 

카카오페이 -> 전체 -> 송금 - 송금코드 탭에 들어가면 자신의 송금코드를 공유할 수 있는 링크를 복사할 수 있습니다. 첫번째 버튼을 누르면 이 링크로 이동하도록 했습니다. 

 이때는 대상이 될 버튼의 속성에서 -> Edit Workflow를 클릭하신 뒤 위 이미지처럼 Navigation - Open an external website를 선택하시면 됩니다. 

Destination을 입력해 준 뒤 작성중인 폼의 정보가 날라가는 불상사를 막기 위해 새 탭에서 열기를 꼭 체크해줍니다. 

 

가끔 카카오페이를 사용하지 않는 사람들이 종종 있어서 따로 계좌번호를 제공하는 옵션도 만들었습니다. 이런거 복사할 때 범위 설정하고 복사하기 누르는 것도 은근히 귀찮잖아요? 그래서 버튼만 클릭하면 자동으로 클립보드에 링크가 복사가 되도록 하는 기능을 만들었습니다. 이 기능은 기본 기능이 아니기 때문에 플러그인이 필요합니다. 플러그인 탭에서 add plugiin 에 들어가 Clipboard를 검색해줍니다. 

 

저는 두번째 Copy to Clipboard를 설치했습니다. 사용법은 간단합니다. 역시 버튼에 Workflow를 추가해줍니다. 

플러그인을 새로 설치했으니 비어있던 플러그인 탭에  CopyToClipboard가 새로 생긴 것이 보입니다. 

복사할 텍스트를 CopyToClipboard에 추가해주기만 하면 됩니다. 

 

 

4. 폼의 질문을 조건에 따라 다르게 보이게 하기

처음부터 질문이 와다다 보이면 피곤합니다. 그리고 초대장을 받은 분 중에 못오시는 분들도 있을 수 있기 때문에 이전 응답에 따라 다음 질문을 보여주는 식으로 폼을 구성하고 싶었습니다. 이 부분은 Condition 탭에서 지정할 수 있습니다. 먼저 Layout에서 This element is visible on page load를 해제하여 나타나지 않게 설정해 주어야 합니다. 그리고 나서 Condition을 추가해 주는데 When RadioButtons attend's value is No 로 설정하고 이후 Select a property to change when true에 This element is visible을 추가하여 체크해주시면 됩니다. 이런 조건은 직접 타이핑 하는게 아니라 옵션을 하나씩 마우스로 클릭하게 해주어서 코딩을 아예 모르는 분들도 쉽게 접근하실 수 있을 것 같습니다. 

 

 

+ 처음에 페이지가 너무 길어- 라는 피드백을 받았는데요. 숨겨진 그룹의 컨텐츠가 보이지는 않지만 자리는 차지하고 있어서 페이지의 길이를 차지하는 것이 문제였습니다. Layout에서 Collapse when hidden을 체크하여 이 문제를 해결할 수 있습니다. 

 

 

 

5. 제출된 폼 저장하기

앞서 언급한 대로 버블은 데이터를 관리할 수 있도록 지원합니다. 버블의 데이터베이스에서 "Thing"은 저장되는 정보의 핵심 단위로 사용됩니다. 여기서 "Thing"은 개체(Entity) 또는 객체(Object)라고도 할 수 있는데, 이는 버블에서 사용자가 생성하고 관리할 수 있는 데이터의 기본 형태입니다. 

 

"Thing"의 개념

  1. 데이터의 추상화: "Thing"은 버블에서 데이터를 추상화한 형태입니다. 예를 들어, "사용자(User)", "상품(Product)", "블로그 포스트(Blog Post)" 등이 모두 다른 종류의 "Things"가 될 수 있습니다.
  2. 사용자 정의 속성: 각 "Thing"은 여러 속성(Fields)을 가질 수 있으며, 이는 사용자가 정의합니다. 예를 들어, "상품"이라는 "Thing"은 가격, 설명, 사진 등의 속성을 가질 수 있습니다.
  3. 유연성: "Thing"은 매우 유연하여, 사용자는 필요에 따라 어떤 종류의 데이터든 "Thing"으로 만들고 관리할 수 있습니다.

"Thing"의 사용

  1. 데이터베이스 구조화: 버블에서 "Things"는 데이터베이스를 구조화하는 기본 단위입니다. 사용자는 복잡한 코딩 없이 "Thing"을 만들고 그 속성을 정의할 수 있습니다.
  2. 다양한 데이터 관리: "Thing"을 통해 사용자는 다양한 형태의 데이터를 저장하고 관리할 수 있습니다. 예를 들어, 고객 정보, 주문 내역, 제품 리뷰 등 다양한 형태의 정보를 "Thing"으로 구성하여 사용할 수 있습니다.
  3. 애플리케이션 로직 구현: "Things"는 웹 애플리케이션의 다양한 로직을 구현하는 데 사용됩니다. 예를 들어, 사용자가 제품을 구매할 때 "주문"이라는 "Thing"이 생성되고, 그 속성에는 구매자 정보, 구매한 상품, 결제 금액 등이 포함될 수 있습니다.
  4. 워크플로우와 상호작용: 웹 애플리케이션에서 사용자의 상호작용은 "Things"를 기반으로 처리됩니다. 예를 들어, 사용자가 블로그 포스트를 작성하면, 새로운 "블로그 포스트"라는 "Thing"이 생성되며, 이는 데이터베이스에 저장됩니다.

따라서 폼 응답내용라는 Thing을 저장하려면 이를 저장할 새로운 데이터 타입을 미리 정의해 두어야 합니다. 이것은  Data 탭의 New type을 이용해서 생성할 수 있습니다. 저는 아래와 같이 RSVP라는 새로운 타입을 생성했답니다. 

 

Submit 버튼을 눌렀을 때 Workflow를 추가해줍니다. 아래와 같이 Data(Things) - Create a new thing을 선택해주면 됩니다.

그리고 아래와 같이 새로운 Thing의 각 필드의 값을 지정해줍니다. 

 

이제 답변은 새로운 RSVP로 기록됩니다. 이는 Data - App data 탭에서 확인할 수 있습니다. 

처음에 링크를 공유하고나서 친구가 폼을 제출했다는데 안보이길래 망했다. 이랬는데요 실제 Live 앱의 데이터는 따로 저장되어있습니다. 우측의 빨간 글씨  Switch to live database를 선택하면 볼 수 있답니다! 

 

 

마무리

오늘은 최근 저의 생일파티 프로젝트에서 노코드툴 Bubble을 어떻게 사용했는지 포스팅 해봤습니다. 

노코드툴에 관심이 있는 분들, 버블 초보자에게 도움이 되면 좋겠습니다. 

2탄에서는 빙고게임을 어떤 식으로 구현했는지를 작성하겠습니다.