에어빌드 노코드 부트캠프 2기 4주차 - 1순위 기능을 노코드로 구현하는 방법
에어빌드 노코드 부트캠프 2기 4주차가 끝났습니다. 지난 주까지 AI로 기획과 디자인을 완성했다면, 이번 주는 본격적으로 내 서비스를 개발하는 첫 주였어요.
수강생들의 표정이 조금씩 걱정하는 모습이 보였어요 ㅎㅎ.. 3주 전 인스타그램 클론 만들 때는 신났는데, 막상 내 서비스를 만들려니 약간 두려워하는 모습도 보였습니다.
우선 10시간에 달하는 VOD 강의를 끝까지 완강하는 것만으로도 상위 30% 안에 들어간다고 생각하고, 이제 남은 기간동안 각자만의 서비스를 완성해야 합니다.
실제 내 서비스를 만들 수 있을까? 남은 2주 동안 완성할 수 있을까?
이건 초기 창업자라면 누구나 겪는 딜레마예요. 그러나! 이미 3주 동안 훨씬 더 복잡한 인스타그램을 만들었기 때문에, 직접 본인의 서비스로 실습해나가면서 노코드로 어떻게 만드는 것인지 파악하게 됩니다.
이번 주 메인: AI 디자인을 버블로 옮기기
지난 주에 AI로 만든 기획과 디자인 결과물이 있는데요, 이제 그걸 실제 Bubble로 옮기는 게 이번 주 목표였습니다.
보통 노코드 버블 개발은 다음과 같은 순서로 하는 것으로 말씀 드리고 있어요.
개발 순서: 3단계
- 페이지와 데이터 설계
- 기본 스타일 설정
- 디자인 옮기기 (1순위 기능 구현)
이 순서가 중요합니다. 많은 분들이 기능 구현 및 디자인부터 옮기려고 하는데, 페이지랑 데이터 구조가 잘 안 잡혀있으면 나중에 대공사를 해야하는 아찔한 상황이 생길 수도 있습니다 ㅠ
1단계: 페이지와 데이터 설계
페이지 설계: 적절한 덩어리로 쪼개라
중요한 원칙: 너무 많은 페이지로 쪼개지 마세요.
1주차에도 말했지만, 페이지가 많아지면 페이지 간 이동할 때마다 딜레이가 생깁니다.
적절한 덩어리의 SPA(Single Page Application)로 만드는 게 좋아요. 유저의 성격에 맞추어서 페이지를 구분하세요.
나쁜 예:
- 맛집 리스트 페이지
- 맛집 상세 페이지
- 리뷰 작성 페이지
- 리뷰 수정 페이지
- 리뷰 삭제 페이지
- 프로필 보기 페이지
- 프로필 수정 페이지
→ 너무 많아요!
좋은 예:
- index (홈 + 맛집 리스트)
- restaurant (맛집 상세 + 리뷰 작성, Group으로 모드 전환)
- profile (프로필 보기 + 수정, Popup으로 전환)
이 정도면 1순위 기능은 충분합니다.
데이터 설계
1주차에 배운 것처럼, 데이터가 기초 공사입니다.
AI가 추천해준 데이터 구조를 참고하되, 우리 서비스에 맞게 조정하세요.
맛집 리뷰 서비스 예시:
Restaurant:
- name (text)
- category (option set)
- address (text)
- location (geographic address)
- images (list of images)
- rating_average (number)
- review_count (number)
- created_by (User)
Review:
- content (text)
- rating (number)
- restaurant (Restaurant)
- author (User)
- created_date (date)
자주 보여지는 값은 필드로 저장하는 거는 저번에 기억하시죠? rating_average, review_count 같은 건 미리 계산해서 저장해두는 게 빠릅니다.
2단계: 기본 스타일 설정
디자인을 옮기기 전에, AI가 만들어준 디자인 시스템을 Bubble에 먼저 설정합니다.
Style 탭에서:
- Primary, Secondary 색상 등록
- Text 기본 스타일 (제목, 본문, 캡션)
- Button 기본 스타일
- Input 기본 스타일
이렇게 해두면 나중에 일일이 색상 안 바꿔도 되고, 전체 디자인 변경도 쉬워요.
3단계: 디자인 옮기기 (1순위 기능 구현)
이제 본격적으로 AI가 만든 HTML 디자인을 Bubble로 옮기면서, 동시에 1순위 기능을 구현합니다.
수작업으로 하나하나 만들 수도 있지만, 요새는 더 빠른 방법이 있어요.
HTML to Design 플러그인
AI가 만든 HTML/CSS 코드를 Bubble 디자인으로 자동 변환해주는 플러그인입니다.
사용법:
- Plugins 탭에서 HTML to Design 플러그인 설치
- AI가 생성한 HTML 코드 업로드
3.플러그인 실행해서 붙여넣기 -> 이때 꼭 오토레이아웃을 활성화 시켜야합니다!
- 자동으로 Html 파일을 편집 가능한 피그마 파일로 변환 가능
완벽하진 않지만, 랜딩 페이지나 간단한 화면은 80% 정도 자동으로 만들어져요. 저도 랜딩페이지 구현은 AI로 만들어서 바로 버블로 옮겨요.
예전에 랜딩페이지 콘텐츠 구성만 해도 시간도 오래 걸리고 꽤 귀찮았는데, 요새는 확실히 좀 더 편해진 것 같아요.
Figma to Bubble 플러그인
이제 Figma에서 디자인했다면 이 플러그인을 씁니다.
사용법:
- Figma에서 Auto Layout 제대로 설정되어있는지 확인 (중요!)
- Figma to Bubble 플러그인 설치
- Figma 링크 연결
- 원하는 프레임 선택해서 가져오기
중요한 팁: Auto Layout이 핵심입니다
Figma에서 Auto Layout을 제대로 설정하지 않으면, Bubble로 가져왔을 때 엘리먼트들이 겹치거나 깨집니다.
Figma의 Auto Layout = Bubble의 Row/Column
이 개념만 이해하면 훨씬 쉬워요.
마법의 지팡이는 아닙니다
솔직히 말하면 이 플러그인들이 100% 완벽하게 변환해주진 않아요. 일부 깨지는 부분도 있고, 수동으로 고쳐야 하는 부분도 있습니다.
하지만 랜딩 페이지나 정적인 화면 만들 때는 진짜 유용합니다. 30분 걸릴 작업을 5분 만에 끝낼 수 있거든요.
수강생들의 진행 상황
이번 주부터 수강생들은 각자의 서비스를 만들기 시작했습니다.
우선은 벌써부터 딥다이브 질문들이 나와서 놀랐어요
우선은 놀랐던 것은 다들 본업이 따로 있음에도 진중하게 긴 시간동안 잘 따라와주고 있어서 감사했고, 질문도 실제 서비스를 위한 질문들이 나와서 놀랐어요.
토스페이먼츠 연동 질문
- 결제 기능이 필요한 서비스를 만드는 분이 계셨어요
- 어떤 식으로 연동되는지, API 키는 어떻게 받는지
- 테스트 결제와 실제 결제의 차이는 뭔지
앱스토어 제출 관련 질문
- 나중에 앱으로 배포하고 싶은데 어떻게 하는지
- 앱 패키징은 어떻게 하는지
- 제출 후 수정은 어떻게 하는지
아직 서비스도 안 만들었는데 벌써 이런 질문이 나오는 걸 보니, 수강생들이 진지하게 서비스를 생각하고 있다는 거겠죠 😃
앱 패키징은 다음 주에 다룰 예정입니다. 실제로 Bubble 앱을 iOS/Android 앱으로 만드는 방법을 함께 볼 거예요.
실전 팁: 1순위 기능 하나는 제대로 이쁘게
많은 분들이 헷갈려하는 부분인데, 명확히 말씀드려보겠습니다
우선순위:
- 작동하는 것 (기능)
- 사용 가능한 것 (UX)
- 예쁜 것 (UI)
이 순서는 맞습니다. 그런데 디자인이 안 중요하다는 게 아니에요.
실제로 디자인은 중요합니다.
제가 말하고 싶은 건:
- 1순위 기능 하나에 집중하고
- 2, 3순위 기능들은 일단 뒤로 미루고
- 그 1순위 기능 하나 정도는 어느 정도 이쁘게 만드는 게 중요합니다
왜냐하면 유저는 못생긴 서비스를 쓰기 싫거든요. 아무리 기능이 좋아도요.
다행히 AI가 디자인을 잘하기 때문에, 그나마 비개발자 입장에서
그렇지만 순서는 페이지, 데이터부터 버블로 잘 잡으셔야 해요.
디자인부터 하면 나중에 데이터 구조 바꿀 때 다 뜯어고쳐야 해요. 순서를 지키되, 1순위 기능만큼은 제대로 만드세요.
최근에 출시한 제 서비스 증명한컷(https://idcut.kr)도 그렇게 만들었어요. 처음엔 핵심 기능인 증명사진 생성 하나만 집중했고, 그 페이지는 디자인도 신경 써서 만들었습니다.
그래서 2일 만에 유료 고객이 생겼어요.
나머지 마이페이지, 히스토리 같은 건 나중에 추가했고요. 1순위 기능 하나만 제대로 만들어도 유저는 옵니다 😃
남은 2주, 어떻게 보내야 할까?
이제 2주 남았습니다. 시간이 촉박하고, 바로 초보자 입장에서는 심리적 압박감이 강할 수도 있어요.
하지만 수강생분들과 함께
- 3주 동안 인스타그램을 만들었고
- AI로 기획과 디자인을 완성했고
- 이번 주에 실제 개발을 시작했습니다
다음 주 목표:
- 1순위 기능 100% 완성
- 실제 데이터로 테스트
- 버그 수정
- 앱 패키징 배우기
화이팅입니다! 여러분의 서비스가 세상에 나오는 날이 곧 옵니다 😃
4주차를 마치며
이제 내 서비스를 만들어야 해서 두렵기도 하고, 설레기도 하고, 막막하기도 할 것 같습니다. 저도 예전에 제 첫 서비스를 만들 때, 똑같은 기분이 들었던 걸 기억해요
그래도 그동안 잘해오고 있으니, 마무리도 잘할 수 있을 거라고 생각합니다 ㅎㅎ
이번주 핵심 요약:
- 개발 순서: 페이지와 데이터 → 스타일 설정 → 디자인 옮기기 (1순위 기능 구현)
- 페이지는 적절한 덩어리의 SPA로 쪼개라, 너무 많이 만들지 마라
- HTML to Design, Figma to Bubble 플러그인 활용하면 빠름
- Figma Auto Layout 제대로 설정하는 게 핵심
- 1순위 기능 하나는 제대로 이쁘게 만들어라 (디자인 중요함)
- 하지만 순서는 페이지, 데이터부터!
다음 주는 1순위 기능을 완성하고, 앱 패키징 방법도 배웁니다. 막히는 부분 있으면 언제든 질문해주세요!
🎙️ 에어빌드와 함께 하세요
에어빌드는 노코드 대중화를 목표로 노코드 교육과 노코드 외주, 노코드 기반 자체 서비스를 운영하고 있습니다.
에어빌드는 국내 유일 노코드로 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개발 #에어빌드
