에어빌드 노코드 부트캠프 2기 3주차가 끝났습니다. 1~2주차에서 기초와 핵심 기능을 다졌다면, 이번 주는 인스타그램 클론을 완성하는 주였어요.

팔로우/팔로잉, 프로필, 게시글 작성 기능까지. 이제 정말 내가 만든 SNS라고 부를 수 있는 수준이 됐습니다 :)

그리고 이번 주부터는 각자의 서비스를 만들기 시작했습니다. 앞으로 3주 동안 자신만의 MVP를 완성해야 하는데요, 어떻게 시작해야 할지 막막한 분들을 위해 우선순위 설정과 디자인 접근법도 함께 다뤘어요.

인스타그램 팔로우/팔로잉 기능 만들기

리스트에 100개 이상 넣으면 느려집니다.

팔로우 기능은 SNS의 핵심이죠. 인스타그램처럼 다른 유저를 팔로우하고, 그 사람의 게시글을 피드에서 보는 기능을 만들어봤습니다.

간단한 방법: User에 리스트로 저장

강의에서는 입문자들을 위해 더 쉬운 방법으로 진행했어요.

User: 
- following (list of Users): 내가 팔로우하는 사람들 
- followers (list of Users): 나를 팔로우하는 사람들 
 

팔로우 버튼 클릭 시 양쪽 리스트에 추가하면 끝. 구현이 정말 간단하죠?

하지만 스케일업을 고려한다면?

리스트에 100개 이상의 데이터가 들어가면 앱이 느려질 수 있어요요. 인플루언서처럼 팔로워가 수천, 수만 명이라면? 그 리스트를 불러오는 것만으로도 엄청난 시간이 걸립니다.

확장 가능한 방법: 별도 데이터 타입 생성

Follow 데이터 타입: 
- follower (User): 팔로우하는 사람 
- following (User): 팔로우 받는 사람 
- created_date (date): 팔로우한 시간 
 

이렇게 하면 각 팔로우 관계가 독립적인 레코드로 저장되어, 검색할 때 필요한 데이터만 불러올 수 있습니다. 팔로워가 몇만 명이어도 빠르게 작동해요.

같은 원리로 Like(좋아요)도 별도 데이터 타입으로 만들면 좋습니다.

입문 단계에서는 리스트로 해도 괜찮지만, 실제 서비스를 만들 때는 이 방식을 추천합니다 :)

게시글 작성 기능 만들기

중간에 작성하던 거 날아가면 진짜 짜증나죠.

게시글 작성 기능에서 중요한 건 임시저장입니다. 요즘 서비스들은 대부분 중간 중간 자동으로 저장해주거든요.

임시저장 상태로 DB에 저장

Post 데이터 타입에 필드 추가: 
- status (option set): published, draft 
 

만들기 버튼 클릭 시 draft(임시저장) 상태로 게시글이 생성되고, 작성 페이지로 이동합니다. 10초마다 자동 저장하게 할 수도 있고, "임시저장"을 클릭했을 때 저장을 하게 해도 괜찮아요.

최종 게시 버튼을 누르면 status를 published로 바꾸고, 피드에는 published 상태인 게시글만 보이도록 조건을 걸면 됩니다.

이제 각자의 서비스를 만들 시간

인스타그램 클론이 완성됐습니다. 이제부터는 각자가 만들고 싶은 서비스를 만들 차례예요. 하지만 3주라는 시간은 생각보다 짧습니다.

3주 동안 MVP를 완성해야 합니다. 시간이 촉박하죠.

수강생들도 막상 시작하려니 막막해하더라고요. 어디서부터 시작하지? 이것도 만들고 싶고 저것도 만들고 싶은데…

우선순위를 정하자

일단 크게 기획을 해보되, 1, 2, 3순위를 잡으세요.

머릿속에 있는 모든 기능을 다 만들 수는 없습니다. 특히 3주라는 짧은 시간에는요.

1순위: 핵심 가치를 전달하는 기능

• 이 기능이 없으면 서비스의 의미가 없는 것
• 예: 배달 앱이면 주문하기, 커뮤니티면 글 작성

2순위: 사용성을 높이는 기능

• 있으면 좋지만 없어도 핵심은 전달 가능
• 예: 검색 필터, 알림, 프로필 편집

3순위: 나중에 추가해도 되는 것

• 이쁜 애니메이션, 통계 대시보드, 관리자 페이지 등

MVP는 Minimum Viable Product입니다. 최소한으로 작동하는 제품이에요. 완벽하지 않아도 됩니다. 핵심 가치만 전달하면 돼요.

1순위 기능만 100% 완성하는 게, 1~3순위를 모두 50%씩 만드는 것보다 낫습니다.

AI로 디자인 시작하기

버블은 자유도가 높아서 디자인까지 하기는 어려웠죠.

예전에는 디자이너한테 외주를 주는 식으로 했습니다. 하지만 비용도 만만치 않고, 수정할 때마다 또 요청해야 하고요.

요새는 AI가 디자인을 너무 잘합니다. ChatGPT, Claude, V0, Lovable 등 AI 도구들이 디자인을 정말 잘 만들어줍니다. 특히 프로토타입 단계에서는 충분히 활용 가능해요.

저는 수강생들에게 4단계 프롬프트 방식을 알려드렸습니다. 실제 제가 수강생분들에게 준 가이드북에는 바로 쓸 수 있는 상세한 프롬프트를 작성해드렸고, 아래는 예시입니다.

0단계: 우선순위 정하기 프롬프트

먼저 AI한테 우선순위를 정리해달라고 합니다.

프롬프트 예시:

나는 지역 맛집 리뷰 서비스를 만들려고 해. 
생각하는 주요 기능은: 
- 맛집 등록 및 검색 
- 리뷰 작성 및 평점 
- 맛집 북마크 
- 유저 프로필 
- 맛집 주인 인증 및 답글 
- 포토 리뷰 갤러리 
- 맛집 랭킹 
- 푸시 알림 

3주 안에 MVP를 만들어야 해. 
이 기능들을 1순위(필수), 2순위(중요), 3순위(나중에)로 분류하고 
각각 왜 그 순위인지 설명해줘. 
 

AI가 기능의 중요도를 판단해주고, 어떤 게 핵심이고 어떤 게 부가 기능인지 정리해줍니다.

이걸 보면서 내 생각과 비교해보세요. 생각보다 많은 기능이 3순위로 분류될 거예요 :)

1단계: 기획 프롬프트

우선순위가 정해졌으면, 1순위 기능 중심으로 서비스 구조를 잡습니다.

프롬프트 예시:

지역 맛집 리뷰 서비스의 MVP를 기획해줘. 
1순위 기능만 포함: 
- 맛집 검색 (위치 기반) 
- 리뷰 작성 및 평점 
- 맛집 상세 정보 보기 

이 기능들로 필요한 페이지 목록과 각 페이지의 주요 요소를 정리해줘. 
그리고 유저 플로우도 간단히 설명해줘. 
 

AI가 필요한 페이지 리스트, 각 페이지에 들어갈 요소, 유저가 어떤 순서로 페이지를 이동하는지 정리해줍니다.

2단계: 디자인 시스템 프롬프트

다음은 디자인의 일관성을 위해 디자인 시스템을 만듭니다.

프롬프트 예시:

맛집 리뷰 서비스의 디자인 시스템을 만들어줘. 노코드 버블로 쉽게 만들 수 있도록 해야 해. 
톤앤매너: 따뜻하고 친근한 느낌, 음식 사진이 돋보이도록 

다음 요소들을 정의해줘: 
- 컬러 팔레트 (Primary, Secondary, Background, Text 색상) 
- 타이포그래피 (제목, 본문, 캡션 폰트 크기) 
- 버튼 스타일 (Primary, Secondary, Outline) 
- 카드 스타일 (그림자, 라운딩, 패딩) 
- 간격 시스템 (여백 규칙) 
 

AI가 색상 코드, 폰트 사이즈, 스타일 가이드를 제시해줍니다. 이걸 Bubble의 Style 탭에 그대로 적용하면 돼요.

3단계: HTML 프로토타이핑 프롬프트

이제 실제 페이지를 만들어달라고 합니다.

프롬프트 예시:

우리가 완성한 디자인 시스템을 기반으로 맛집 리뷰 서비스의 홈 화면을 HTML/CSS로 만들어줘. 

포함할 요소: 
- 상단 검색바 
- 카테고리 필터 (한식, 중식, 일식, 양식) 
- 맛집 카드 리스트 (이미지, 이름, 평점, 리뷰 수, 거리) 
- 하단 네비게이션 (홈, 검색, 북마크, 프로필) 

디자인 시스템: 
- Primary 컬러: #FF6B6B 
- 배경: #FFFFFF 
- 텍스트: #333333 
- 카드 라운딩: 12px 
- 그림자: 0 2px 8px rgba(0,0,0,0.1) 

모바일 화면 기준으로 만들어줘. 
 

AI가 작동하는 HTML/CSS 코드를 만들어줍니다. 브라우저에서 열어보면 실제로 돌아가는 프로토타입이 나와요.

이걸 보면서 Bubble에서 똑같이 만들면 됩니다. 색상, 간격, 폰트만 똑같이 하면 비슷한 느낌이 나오거든요 :)

실전 팁

저는 AI 디자인을 할 때, 젠스파크 AI 개발자를 주로 씁니다. 이유는:

• 한 번에 4단계를 연속으로 진행 가능
• 생성된 HTML을 바로 미리보기 가능
• 수정 요청도 대화로 바로 반영

제가 지난주 런칭한 증명한컷 서비스 (https://idcut.kr/) 도 젠스파크로 디자인을 완성하고, 그걸 버블로 옮겼어요.

예시용 사진 (실제로는 보라색 보다는 검은색 위주의 깔끔한 디자인으로 완성)

만약 젠스파크 가입이 필요하시다면 아래 레퍼럴 링크를 사용하시면 1000 크레딧을 추가로 받을 수 있어요.

링크 : https://www.genspark.ai/invite_member?invite_code=ODQzMzM1NmRMM2MxYUxlZTc5TGE2MzRMNTkxZDIyY2E0Mzg0

그 외에 기존 서비스를 참고하셔도 좋습니다. 커뮤니티 만든다면 당근마켓, 쇼핑몰이면 무신사, 예약 서비스면 야놀자 같은 곳 스크린샷 찍어서 AI한테 이런 느낌으로 만들어줘 하면 됩니다.

중요한 포인트:

• 완벽한 디자인을 추구하지 마세요
• 우선은 작동하는 것부터
• 디자인은 나중에도 얼마든지 바꿀 수 있어요

저도 제 서비스 증명한컷(https://idcut.kr)을 만들 때 초기 버전은 정말 단순했습니다. 기능이 작동하는 게 먼저였어요. 디자인은 유저 피드백 받으면서 점진적으로 개선했고요 😄

3주차를 마치며

인스타그램 클론이 완성됐습니다! 1주차에 레이아웃과 데이터를 배우고, 2주차에 로그인과 피드를 만들고, 3주차에 팔로우와 게시글 작성까지!

3주 만에 정말 많은 걸 배웠어요 :) 수강생분들도 대부분 본업이 따로 있는데, 열심히 시간 내서 강의 듣고 질문도 많이 해주셔서 고마웠어요.

이제부터는 각자의 여정을 따라 각자의 서비스를 만들게 됩니다. 어떤 분은 자녀분을 위한 교육 서비스를, 어떤 분은 간단한 게임 시스템이 탑재된 서비스를 만들고 싶다고 하셨어요.

핵심 요약:

• 팔로우는 리스트 방식이 쉽지만, 스케일업 고려하면 별도 데이터 타입 추천
• 게시글 작성은 임시저장 상태로 DB에 저장하면 안전
• MVP는 1순위 기능만 100% 완성하는 게 목표
• AI로 디자인할 때는 우선순위 정리 → 기획 → 디자인 시스템 → HTML 프로토타입 순서로
• 작동하는 것부터 만들고, 디자인은 점진적으로 개선

다음 주에는 AI가 만든 디자인을 버블로 옮기는 법, 그리고 각자 막히는 부분들을 함께 해결해볼 예정입니다.

화이팅입니다! 3주 후 여러분의 MVP를 기대할게요 :)

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

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

에어빌드는 국내 유일 노코드로 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개발 #에어빌드