버블(Bubble.io) 에디터 화면 소개
버블(Bubble.io) – 초보자를 위한 가이드
Bubble.io를 처음 접하셨나요?
처음 보면 복잡해 보일 수 있지만,
한 번 익숙해지면 정말 직관적인 도구랍니다.
오늘은 Bubble.io 에디터 화면을
쉽게 이해할 수 있도록 설명해 드릴게요.
특히, 웹사이트 화면을 디자인할 때
가장 많이 사용하는 Design 탭을 중점적으로 다뤄보겠습니다.
Bubble.io 에디터 화면 구성
Bubble.io 에디터는 좌측 사이드바를 중심으로
다양한 기능을 가진 탭들로 구성되어 있습니다.
각각의 역할을 간단히 살펴볼까요?
Design 탭: 화면을 구성하는 요소(버튼, 이미지, 텍스트 등)를 배치하는 곳
Workflow 탭: 버튼 클릭, 데이터 저장 등 특정 이벤트가 발생했을 때 실행할 동작을 설정하는 곳
Backend Workflows 탭: 사용자가 페이지를 이탈해도 실행되는 이벤트를 설정하는 곳
Data 탭: 데이터베이스를 관리하는 곳
Styles 탭: 글꼴, 색상, 요소 스타일 등 디자인 스타일을 설정하는 곳
Plugins 탭: 추가 기능을 구현할 수 있도록 도와주는 플러그인들을 관리하는 곳
Settings 탭: 요금제, 도메인 설정, 보안 설정 등을 관리하는 곳
Logs 탭: 앱의 작업 내역과 성능을 확인할 수 있는 곳
이 중에서 오늘은 가장 많이 사용하게 될 Design 탭을 자세히 살펴보겠습니다.
Design 탭 – 웹사이트 디자인의 핵심
① Visual Elements (시각적 요소)
화면에 보이는 요소들을 추가하는 영역입니다.
Text: 글자를 추가하는 요소
Image: 이미지를 추가하는 요소
Button: 버튼을 추가하여 사용자 클릭을 유도하는 요소
이외에 나머지 요소들도 이름 맞는 요소들을 화면에 보이게 합니다.
Visual Elements요소들의 사용법은 간단합니다.
예를 들어, "환영합니다!"라는 문구를 추가하고 싶다면
Text 요소 클릭 -> 화면 클릭 -> 에디터에서 문구를 입력하면 됩니다.
이처럼 Bubble.io Design 탭에서 시각적 요소를 쉽게 추가할 수 있습니다.
② Containers (레이아웃 정렬 요소)
여러 요소를 감싸 정렬할 수 있는 그룹 요소입니다.
자식 요소들을 정렬하는 방식은 다음과 같습니다.
Fixed: 자식 요소들을 고정된 위치에 배치 (잘 사용되지 않음)
Row: 자식 요소들을 가로로 정렬
Column: 자식 요소들을 세로로 정렬
Align-to-Parent: 자식 요소들을 앞뒤로 정렬 (포토샵 레이어 개념과 유사)
컨테이너는 말로 설명하는 것보다
앱을 만들며 익숙해지는 것이 빨라서
오늘은 그냥 이런게 있다는 것만 인지하고 넘어가세요! �
③ Input Forms (사용자 입력 요소)
사용자와 상호작용하는 요소들을 추가할 수 있습니다.
Input: 텍스트 입력란
Dropdown: 선택 옵션을 제공하는 드롭다운 메뉴
Checkbox: 체크박스
예를 들어, 회원가입 폼을 만들 때는
Input 요소를 사용하여 사용자 정보를 입력받을 수 있습니다.
마무리하며
이외에도 여러 요소들이 있지만 한 번에 다 외우기보다는
다음 주부터 같이 간단한 웹 사이트를 만들어보면서 익숙해져 봅시다!
Bubble.io에 대해 궁금한 점이 있다면?
댓글로 남겨주세요! 여러분의 프로젝트가 돋보일 수 있도록 도와드릴게요.
