배경 및 목적
버블의 다양한 기능을 활용하고, AI를 접목할 수 있는 주제를 탐색했습니다.
근래 관심을 갖고 시도하고 있는 간헐적 단식에 도움이 되는 앱을 구상했습니다.
버블을 더 편하게 사용하고 싶었고, 제대로 된 MVP를 만들고자 했습니다.
참고 자료
스터디장님이 처음 소개해주신 Bubble.io의 튜토리얼 영상을 주로 참고했습니다.
활용 툴
Bubble: 노코드 앱 개발, 기본 Chart 플러그인, API 플러그인
Claude: 브레인 스토밍, 앱 기획, UI 제안, 메뉴명 및 카피라이팅 작성
ChatGPT: 앱 데이터 분석 후 인사이트 제공
LottiFiles: 무료 애니메이티드 GIF 사용
IF Timer MVP 개발 과정
1. 브레인 스토밍
간헐적 단식에 도움을 주는 앱이라는 큰 주제를 정하고 Claude와 대화를 하며 아이디어를 선별하고 정리하였습니다.
한국판 게임 스크린샷
2. 앱 기획
IF Timer 앱 개요
앱의 목표
사용자들이 건강한 생활 리듬을 찾고 균형 잡힌 식습관을 만들도록 지원
시간 관리를 통한 건강한 라이프스타일 촉진
전반적인 특징
'간헐적 단식' 용어 직접 사용 대신 긍정적, 건강 지향적 메시지 사용
사용자 친화적이고 동기 부여를 주는 디자인과 문구
반응형 디자인으로 데스크탑, 태블릿, 모바일에 최적화된 화면 제공
정보구조도
다양한 유형의 데이터가 포함된 데이터베이스 다이어그램
메뉴 구성
메인 화면 (인덱스 페이지)
앱 소개글과 대표 이미지 표시
주요 메뉴: IF Timer, Food Logger, IF Insights
사용자 메뉴: Log in, Sign up
IF Timer
사용자가 단식 시간을 설정하고 카운트다운하는 기능
단식 시작 전 사용자의 다짐을 기록하는 기능
타이머 종료 시 긍정적인 메시지 제
Food Logger
식사 이름과 시간을 간편하게 기록
최근 식사 목록 확인 기능
IF Insights
사용자의 식습관 데이터 분석 및 인사이트 제공
ChatGPT API를 활용한 개인화된 조언과 트렌드 분석 제공
UI 구성
휴대폰의 시간 추적 앱 스크린샷
카피라이팅 작성
한국어 메뉴 스크린샷
데이터베이스 구조도
웹 애플리케이션의 구조를 보여주는 다이어그램
Backend Workflow 구성: API로 ChatGPT 호출
Google 문서 페이지의 스크린샷
3. 앱 구현: 메인 화면
기본 화면
의자에 앉아 있는 여성이 있는 웹사이트의 스크린샷
Sign up 메뉴
남자와 여자의 이미지가 포함된 웹사이트의 스크린샷
모바일용 화면, 상단 바 메뉴
남자와 여자의 이미지가 포함된 웹사이트의 스크린샷
주요 기능
Timer, Foods, Insights 메뉴로 해당 페이지 연결
Log in(로그인)과 Sign up(회원 가입)은 팝업 화면으로 구성
Start 버튼은 IF Timer 페이지로 연결
반응형 디자인으로 모바일용 화면에서는 메뉴를 바 메뉴로 제공, 애니메이티드 포커싱 그룹 표시
4. 앱 구현: IF Timer 메뉴
기본 화면
타이머를 보여주는 웹사이트의 스크린샷
목표 시간을 설정하고 메시지를 입력한 후 카운트 다운 시작
시간을 보여주는 컴퓨터 화면의 스크린샷
주요 기능
간헐적 단식을 위한 식사 시간의 간격을 지키기 위해 사용
목표 시간(필수 설정)과 함께 자신을 위한 응원/다짐 메시지(선택 설정) 입력
타이머를 시작하면 시간이 카운트 다운되고, 리셋 버튼을 누르면 0으로 초기화
타이머를 한번 설정하면, 페이지를 리로드하거나 다른 메뉴를 사용하다가 돌아와도 지속하여 동작
5. 앱 구현: Food Logger 메뉴
기본 화면
음식 기록 페이지의 스크린샷
데이터 입력
음식 기록 페이지의 스크린샷
주요 기능
현재까지 기록된 전체 데이터를 테이블로 제공
식사 시간과 식사 내용을 새로 입력하면 테이블에 새로운 데이터를 즉시 표시
버블의 Food Logger 데이터 베이스에 저장되며 "저장 성공" 메시지 표시
테이블 하단에 전체 기간과 총 식사 횟수 표시
기간을 변경하면 그에 맞추어 테이블과 식사 횟수 변경
6. 앱 구현: IF Insights 메뉴
기본 화면
그래프를 보여주는 웹페이지의 스크린샷
인사이트 보기를 클릭
그래프를 보여주는 웹페이지의 스크린샷
ChatGPT 4-o가 데이터를 분석하여 인사이트 제공
한국어 텍스트가 포함된 웹페이지의 스크린샷
주요 기능
지정한 기간의 일수와 식사 횟수 표시(기본 설정은 일주일)
해당 기간에 날짜별 식사 시간을 라인 차트로 표시하여 간헐적 단식 간격을 확인
'인사이트 보기' 버튼을 누르면 ChatGPT를 API로 호출하여 해당 기간의 식사 시간과 식사 내용 데이터를 분석하고, 분석 결과와 개선점, 조언 등을 출력
결과 및 인사이트
버블은 노코딩 툴이지만 코딩같은 느낌도 들어요. 문제에 빠져 헤맬 때의 괴로움과 해결했을 때의 기쁨이 비슷하네요. 👀
Claude는 앱을 기획하고, 메뉴 및 UI를 구성하고, 내용과 카피라이팅을 작성할 때 크게 도움이 됩니다. 그러나 구체적인 버블의 사용법이나 액션 작성 등의 질문에는 정확한 답변을 할 수 없습니다. 따라서 스터디원들이 대화하는 오픈 채팅방👍과 Bubble Forum, 관련 YouTube 영상 등에서 답을 찾는 것이 빨랐습니다.
스터디 첫 시간에 목표로 했던 최소의 기능을 가진 앱 구현을 최소한으로 이루었다고 생각합니다. 시간과 관련한 버블의 플러그인들이 IF Timer 앱의 작동과 맞지 않아서 타이머를 직접 구성한 경험이 좋았습니다.
그러나 제대로 된 앱을 만들려면 아직 미완성인 부분과 추가해야 할 기능이 너무 많네요. ☠️ 회원 가입과 로그인에 대한 관리자와 대시보드 등을 만들어야 하고, 입력한 식사 기록을 편집하는 기능도 넣고 싶습니다아~
함께 해주신 스터디장님과 스터디원님들께 감사드립니다!😍
