코딩 1도 몰라도 OK! 노코드 툴 버블(Bubble)로 1시간 만에 웹사이트 뚝딱 만들기

노코드(No-Code)의 대표주자, 버블(Bubble)을 이용하면 코딩 한 줄 없이도 강력한 기능을 갖춘 웹사이트를 만들 수 있습니다. 복잡한 이론은 모두 걷어내고, 지금 당장 여러분의 아이디어를 현실로 만들어 줄 실전 가이드를 1시간 코스로 알려드립니다.

 

### # 1단계: 버블(Bubble) 회원가입과 새 프로젝트 생성 (5분)

 

가장 먼저 할 일은 버블 공식 홈페이지([bubble.io](http://bubble.io))에 접속해 회원가입을 하는 것입니다. 이메일이나 구글 계정으로 간편하게 가입할 수 있습니다.

 

1. 가입 후 로그인하면 대시보드가 나타납니다. 여기서 `[New app]` 버튼을 클릭하세요.

2. 앱(웹사이트)의 이름을 정하고 몇 가지 기초 설문(목적, 종류 등)에 답합니다. 처음에는 어떤 것을 선택해도 괜찮으니 부담 없이 진행하세요.

3. 'Start with a template' 또는 'Start from scratch' 중 'Start from scratch'(빈 페이지에서 시작)를 선택하면, 드디어 여러분만의 웹사이트 만들기 프로젝트가 생성됩니다.

 

### # 2단계: 버블 에디터 핵심 3총사 파악하기 (10분)

 

버블 에디터 화면은 처음 보면 조금 복잡해 보일 수 있지만, 딱 3가지만 기억하면 됩니다. 이 세 가지가 코딩 없이 웹 개발을 가능하게 하는 핵심입니다.

 

* 🎨 Design (디자인) 탭: 웹사이트의 화면을 꾸미는 곳입니다. 텍스트, 버튼, 이미지, 입력창 등 모든 시각적 요소를 마우스로 끌어다 놓는(Drag & Drop) 공간이죠. 마치 파워포인트 슬라이드를 꾸미는 것과 비슷합니다.

* ⚙️ Workflow (워크플로우) 탭: 웹사이트의 '동작'을 정의하는 곳입니다. "만약 사용자가 이 버튼을 클릭하면, 팝업을 띄워라" 와 같은 논리를 만듭니다. 이것이 바로 코드를 대체하는 버블의 마법입니다.

* 🗂️ Data (데이터) 탭: 회원 정보, 게시글, 상품 목록 등 웹사이트에 필요한 데이터를 저장하고 관리하는 데이터베이스(DB)입니다. 엑셀 시트를 다루는 것처럼 직관적으로 구성할 수 있습니다.

 

### # 3단계: '디자인' 탭에서 나만의 랜딩 페이지 꾸미기 (25분)

 

이제 본격적으로 화면을 만들어 보겠습니다. 가장 기본적인 회사 소개 랜딩 페이지를 만든다고 가정해 봅시다.

 

1. 제목 넣기: 왼쪽 'Visual elements'에서 'Text'를 끌어다 화면 상단에 놓습니다. 나타나는 편집 창에 "세상을 바꾸는 우리 회사"와 같은 멋진 문구를 입력하고, 폰트 크기와 색상을 조절하세요.

2. 이미지 넣기: 'Image' 요소를 끌어다 제목 아래에 배치합니다. 'Static image' 옵션을 선택하고 여러분의 로고나 제품 이미지를 업로드하세요.

3. 핵심 버튼 만들기: 'Button' 요소를 끌어다 이미지 아래에 놓습니다. 버튼 텍스트를 "더 알아보기"로 변경하고, 눈에 잘 띄는 색으로 디자인합니다.

 

이것만으로도 그럴듯한 웹페이지의 '뼈대'가 완성되었습니다. 버블은 반응형 웹을 지원하므로, 상단의 'Responsive' 탭에서 모바일 화면에서는 어떻게 보일지 확인하고 조절할 수도 있습니다.

 

### # 4단계: '워크플로우' 탭으로 웹사이트에 생명 불어넣기 (15분)

 

정적인 화면은 웹사이트가 아니죠. 방금 만든 "더 알아보기" 버튼에 기능을 넣어봅시다.

 

1. 디자인 탭에서 "더 알아보기" 버튼을 선택한 후, `[Start/Edit workflow]` 버튼을 클릭합니다.

2. 자동으로 워크플로우 탭으로 이동되며, `When Button 더 알아보기 is clicked` (더 알아보기 버튼이 클릭되었을 때) 라는 이벤트 상자가 보일 겁니다.

3. `Click here to add an action...` 을 클릭하고, `Navigation` -> `Open an external website`를 선택합니다.

4. 'Destination URL'에 여러분의 회사 블로그 주소나 더 자세한 정보가 있는 페이지의 URL을 입력합니다.

 

이제 사용자가 이 버튼을 클릭하면 지정된 웹사이트로 이동하는 기능이 완성되었습니다. 놀랍죠? 로그인, 데이터 저장 등 더 복잡한 기능도 이런 '워크플로우' 방식으로 코딩 없이 모두 구현 가능합니다.

 

### # 5단계: 미리보기(Preview)로 최종 점검 및 배포 (5분)

 

모든 준비가 끝났습니다. 우측 상단의 `[Preview]` 버튼을 클릭해 보세요. 지금까지 만든 웹사이트가 실제 웹 브라우저에서 어떻게 보이는지 실시간으로 확인할 수 있습니다. 버튼도 직접 클릭해서 설정한 대로 잘 동작하는지 테스트해보세요.

 

버블은 기본적으로 무료 테스트용 도메인을 제공합니다. 이 `Preview` 화면의 주소 자체가 이미 온라인에 배포된 여러분의 첫 노코드 웹사이트입니다. 친구에게 링크를 공유하고 자랑해보세요! (나만의 도메인을 연결하려면 유료 플랜이 필요합니다.)

 

---

 

### # 코딩 한 줄 없이, 당신의 아이디어가 현실로

 

축하합니다! 여러분은 방금 1시간 만에 버블(Bubble)이라는 강력한 웹 빌더를 이용해 직접 웹사이트의 기본을 만들고 배포까지 완료했습니다. 여기서 멈추지 말고 다양한 기능들을 추가하며 여러분의 아이디어를 마음껏 펼쳐보세요. 코딩을 배우는 시간 대신, 여러분의 비즈니스와 아이디어를 성장시키는 데 시간을 쏟을 수 있습니다.