에어빌드 노코드 부트캠프 2기 2주차 - 로그인부터 인스타그램 피드까지

에어빌드

23 Nov 2025 — 13 min read

에어빌드 노코드 부트캠프 2기 2주차가 끝났습니다. 1주차에서 레이아웃, 데이터, Workflow의 기초를 다졌다면, 이번 주는 본격적으로 인스타그램 클론의 핵심 기능들을 만들기 시작했어요.

로그인 화면부터 홈 피드, 댓글 기능까지. 이번 주 VOD 강의를 듣고 온 수강생들은 본격적으로 인스타그램의 핵심 기능을 만들었어요. 지난 주차까지만 해도 이론 위주로 다루다가 본격적으로 하려니 약간의 어려움을 느낀 분도 있을 것 같습니다!

오늘은 2주차에서 다룬 핵심 내용들을 정리해봤습니다. 특히 Bubble.io 로그인 구현, State 활용법, 애니메이션 효과 등 실무에서 바로 쓸 수 있는 팁들을 담았어요.

기타 :
운영진인 저도 부트캠프 수강생에 맞추어서 새로운 서비스 프로젝트를 출시하였어요!

증명한컷 서비스로, 단 1장의 사진으로 제출용 증명 사진을 만들어드립니다 😄

👉 바로 써보기 : https://idcut.kr (증명한컷)

Bubble.io로 로그인 시스템 구현하기

많은 분들이 처음 회원가입 기능을 만들 때 헷갈려하는 부분이 있습니다. 일반 웹사이트처럼 '아이디’를 따로 만들어야 하나?

Bubble.io에서는 이메일이 기본 식별자예요.

회원가입과 로그인의 기본 구조

회원가입 Workflow:

1. 유저가 이메일, 비밀번호 입력
2. "Sign the user up" 액션 실행
3. 자동으로 User 데이터 타입에 저장
4. 로그인 상태로 전환

로그인 Workflow:

1. 유저가 이메일, 비밀번호 입력
2. "Log the user in" 액션 실행
3. 입력한 정보와 DB의 User 정보 대조
4. 일치하면 로그인 상태로 전환

복잡한 인증 로직과 기본 보안은 Bubble이 알아서 처리해줍니다.

비밀번호 조건 설정하기

보안을 위해 비밀번호 조건을 설정할 수 있습니다. 두 가지 방법이 있어요.

방법 1: Password Policy 설정

Settings > General > Password Policy에서:

최소 길이 (예: 8자 이상)
특수문자 포함 여부
숫자 포함 여부
대문자 포함 여부

전역으로 적용되어 모든 회원가입에 자동 적용됩니다.

방법 2: Input Value 직접 검사

Workflow에서 조건을 걸어서:

When Button is clicked
Only when: Input Password's value:length >= 8

이렇게 하면 특정 페이지에서만 다른 조건을 적용할 수 있어요.

input의 value의 값 검증 로직을 우리가 원하는 대로 자유롭게 구성하여 우리만의 비밀번호 구성을 할 수 있어요.

저 같은 경우는 간편 로그인으로 유도하거나, 이런 비밀번호 로직은 최대한 간소화하고 있어요. (유저 유입을 늘리기 위해서)

소셜 로그인 추가하기

카카오, 구글, 애플 로그인도 됩니다.

Bubble 플러그인을 사용하면 소셜 로그인도 쉽게 붙일 수 있습니다.

주요 플러그인:

Google OAuth
Kakao Login
Apple Sign In
Facebook Login

각 플러그인 문서를 보면서 필요한 키만 설정하면 됩니다. 생각보다 어렵지 않아요 :)

홈 화면 만들기: 구조부터 잡자

“큰 틀을 먼저 잡고, 디테일은 나중에.”

인스타그램 같은 피드 화면을 만들 때, 처음부터 예쁘게 만들려고 하면 시간이 낭비될 수있습니다. 먼저 전체 구조를 잡는게 좋아요.

기본 스타일 먼저 설정하기

본격적으로 화면을 만들기 전에, 자주 쓰는 요소들의 기본 스타일을 정해둡니다.

Style 탭에서 설정:

Input 기본 스타일 (테두리, 패딩, 폰트)
Text 기본 스타일 (크기, 색상, 줄간격)
Button 기본 스타일 (배경색, hover 효과)

이렇게 해두면 나중에 일일이 스타일 안 잡아도 되고, 디자인 일관성도 유지됩니다.

팁: 모든 엘리먼트의 스타일을 다 만들 필요는 없어요. 자주 쓰는 것들만 설정하세요. 저도 자주 쓰는 text, input, dropdown 위주로 기본 스타일만 설정합니다.

전체 컨테이너 구조 잡기

“큰 그룹부터 만들고, 안에 작은 그룹을 채워 넣어요.”

인스타그램 홈 화면을 예로 들어볼게요.

Group Main (전체 컨테이너, 기본 패딩 설정)
  ├─ Group Home (홈 피드 영역)
  │   ├─ Repeating Group Posts (게시글 목록)
  │   │   └─ Group Post_m (개별 게시글)
  │   │       ├─ Group Header (프로필 정보)
  │   │       ├─ Group Images (사진 영역)
  │   │       ├─ Group Actions (좋아요, 댓글 버튼)
  │   │       └─ Group Comments (댓글 영역)
  ├─ Group User_Profile (프로필 영역)
  └─ Group Navigation (하단 메뉴)

이렇게 큰 틀을 먼저 잡은 다음, 각 그룹 안에 세부 요소를 채워 넣습니다.

그룹 이름을 잘 짓는 것이 중요합니다

나쁜 예:

Group A, Group B, Group C
Container1, Container2
group_copy_1, group_copy_2

좋은 예:

Group Post_m (모바일 게시글)
Group Header_Profile (헤더의 프로필 영역)
RG_Posts_Feed (Repeating Group - 게시글 피드)

3개월 뒤에 봐도 “아, 이게 뭐였지” 바로 알 수 있게 지어야 합니다. 강의에서도 계속 강조했어요 :)

State로 이미지 스와이프 구현하기

“인스타그램처럼 좌우로 사진을 넘기려면?”

인스타그램에서 게시글에 사진이 여러 장이면, 좌우로 스와이프해서 넘기잖아요. Bubble.io에서도 구현할 수 있습니다.

좌우 슬라이딩도 가능합니다.

좌우 슬라이드 swipe 방식으로 가능한데요, 플러그인에 swipe를 검색하면 해당 기능을 추가해서 인스타그램처럼 만들 수 있어요 다만 부캠과 강의는 입문용이라 아래 방법을 활용했어요.

좌우 터치 영역 만들기

먼저 이미지 위에 투명한 영역 두 개를 만듭니다.

Group Images (이미지 컨테이너, Layout: Align to parent)
  ├─ Image Current (현재 보이는 사진)
  ├─ Group Left (왼쪽 터치 영역, 투명)
  └─ Group Right (오른쪽 터치 영역, 투명)

핵심: Align to parent 레이아웃을 사용해서 요소들을 겹쳐 놓습니다.

Group Left는 왼쪽에 배치 (width 50%)
Group Right는 오른쪽에 배치 (width 50%)

이렇게 하면 화면을 반씩 나눠서 터치 영역을 잡을 수 있어요.

State로 현재 사진 순서 저장하기

“State는 임시 값을 저장하는 공간입니다.”

여러 장의 사진 중 몇 번째 사진을 보여줄지 저장해야 하는데, 이걸 DB에 저장할 필요는 없죠. 이럴 때 State를 씁니다.

State 만들기:

Group Post_m 선택
Element Inspector (i 아이콘) 클릭
“Define custom states” 클릭
State 이름: current_photo_index, Type: number

이미지 표시 로직:

Image Current's image source = 
  This Post's photos:item #(Parent group's current_photo_index)

게시글의 사진 리스트에서, State에 저장된 순서(index)에 해당하는 사진을 보여주는 거예요.

좌우 터치로 사진 넘기기

Group Right 클릭 시:

Set state of Group Post_m
  current_photo_index = Group Post_m's current_photo_index + 1

Group Left 클릭 시:

Set state of Group Post_m
  current_photo_index = Group Post_m's current_photo_index - 1

이렇게 하면 클릭할 때마다 index가 1씩 증가하거나 감소하면서 다음/이전 사진이 보입니다.

추가 팁: 첫 사진이나 마지막 사진에서는 더 이상 넘어가지 않도록 조건을 걸어주세요.

Only when: Group Post_m's current_photo_index + 1 <= This Post's photos:count

State는 어디에 저장해야 할까?

저는 보통:

글로벌한 State (현재 선택된 탭, 필터 조건 등) → Page
로컬한 State (현재 사진 순서, 펼침/접힘 상태 등) → 관련 그룹의 최상위 부모

이렇게 구분합니다 :)

댓글 기능 만들기

“보여주기만 하는 게 아니라, 보여주는 '방식’도 중요합니다.”

댓글 영역을 단순히 show/hide로 처리할 수도 있지만, 애니메이션 효과를 주면 훨씬 자연스럽습니다.

Animate 액션 활용하기

기본 Show/Hide:

Show Group Comments

이렇게 하면 댓글이 갑자기 나타납니다.

Animate로 부드럽게:

Show Group Comments
  With animation: Transition SlideDownOut
  Duration: 300ms

이렇게 하면 아래에서 위로 슬라이드되면서 나타나게 할 수 있어요.

추가 팁 : element inspector

엘리먼트를 클릭하고, (i)를 클릭하면 연관된 state, workflow를 한번에 볼 수 있습니다. 향후에 한 엘리먼트에 여러 개의 workflow가 생기면 이런 식으로 i를 클릭하여 특정 workflow를 쉽게 찾을 수 있습니다.

기타 질문들

Q. Unique id가 무엇인가요?

Unique ID는 데이터베이스의 각 레코드(Thing)에 자동으로 부여되는 고유 식별자입니다.

Bubble이 새로운 데이터를 생성할 때 자동으로 할당합니다
사용자가 직접 설정할 필요가 없습니다
각 레코드마다 절대 중복되지 않는 값입니다

주요 용도는 다음과 같아요.

데이터 참조 및 검색
- URL 파라미터로 전달하여 특정 레코드 페이지로 이동
- 예: myapp.com/product?id=1234567890abcdef
데이터 관계 설정
- 다른 테이블의 레코드와 연결할 때 사용

Q. 핸드폰 인증 번호 나가는 것도 할 수 있나요?

할 수 있습니다! 문자 메세지 발송이나 카카오 알림톡 발송을 할 수 있는데요, 에어빌드에서 직접 제작한 솔라피 플러그인을 활용하면 바로 솔라피와 연동하여 기능을 추가할 수 있어요.

2주차를 마치며

이번 주는 1주차보다 확실히 재밌고 조금 더 난도가 있었을 수도 있어요왜냐하면 진짜 앱이 나오기 시작했으니까요 :)

로그인 화면, 홈 피드, 댓글 기능. 이 세 가지만 있어도 SNS의 기본 골격은 완성됩니다. 물론 아직 갈 길이 멀지만, 벌써 절반은 온 거예요.

요약:

Bubble.io 로그인은 이메일 기반, 소셜 로그인은 플러그인으로 추가
화면 구조는 큰 틀부터 잡고, 그룹 이름 잘 짓기
State로 임시 값 저장해서 동적인 기능 구현
Animate로 부드러운 UX 만들기

다음 주에는 이제 남은 부분까지 완료하여 게시글 작성하는 부분을 완성합니다. 이제 비개발자도 인스타그램을 클론할 수 있게 됩니다.

🎙️ 에어빌드와 함께 하세요

에어빌드는 노코드 대중화를 목표로 노코드 교육과 노코드 외주, 노코드 기반 자체 서비스을 운영하고 있습니다.

에어빌드는 국내 유일 노코드로 30만명 유저 달성 (외주 개발 해드렸어요), 노코드로 장관상 및 투자 유치, 국내 최초 노코드 버블 엠베세더 선정 등 노코드를 활용하고 알리는데 진심인 팀입니다.

노코드로 성공적인 비즈니스를 운영하고 싶다면, 아래 채널을 통해서 저희와 소통해주세요 😄

노코드 유튜브 보기 : https://www.youtube.com/@learn_nocode
한국 노코드 창업자 & 개발자 오픈채팅방 참여
(무료 노코드 가이드북 제공) : https://open.kakao.com/o/giwtlNLg
노코드 전문 강의 및 교육 : https://airbuild.kr/course
노코드 부트캠프 3기 사전신청 : https://docs.google.com/forms/u/1/d/1ztXeyRfO2V9DHuwELnOc2_VFVwd3GP7jmJT81EEHhFk/edit

감사합니다.
에어빌드 드림

#노코드 #Bubble.io #노코드부트캠프 #노코드교육 #노코드강의 #창업 #MVP개발 #에어빌드