'음식사진 칼로리 분석 앱' 제작+웹 배포 완전정복

인터넷

'음식사진 칼로리 분석 앱' 제작+웹 배포 완전정복｜FlutterFlow & Gemini API

idcjw 2025. 9. 1. 18:43

코딩 없이 AI 앱 서비스를 완성하고 출시하는 방법은?

노코드 앱 빌더인 플러터 플로우(FlutterFlow)로 앱을 만들고, 구글의 제미나이 비전 API를 활용 하면 코딩 없이도 음식 사진 칼로리 분석 앱과 같은 AI 앱 서비스를 구현하고 웹에 배포할 수 있습니다

플러터 플로우를 이용한 AI 앱 서비스 개발 및 배포 과정은?

화면 구성: 위젯(텍스트, 버튼, 이미지 뷰 등)을 활용하여 앱의 첫 화면과 분석 결과 화면을 디자인합니다 .
액션 설정: 카메라 버튼 클릭 시 사진 업로드, 분석 요청 버튼 클릭 시 페이지 이동 등 앱의 동작을 정의합니다 .
API 연동: 구글 AI 스튜디오에서 제미나이 API 키를 발급받아 플러터 플로우 프로젝트에 연동하고, 이미지 분석 요청 및 응답 처리를 위한 액션을 설정합니다 .
데이터 처리: 제미나이 API 응답값을 활용하기 위해 데이터 타입과 커스텀 함수를 생성하여 데이터를 가공하고, 페이지 스테이트를 업데이트하여 다음 화면으로 데이터를 전달합니다 .
웹 배포: 플러터 플로우 앱 세팅에서 웹 플랫폼을 활성화하고, 웹 디플로이먼트 설정을 통해 웹에 서비스를 배포합니다 .

이 영상은 코딩 없이 AI 앱을 개발하고 웹에 배포하는 과정을 상세히 안내하며, 누구나 아이디어를 현실로 만들 수 있다는 자신감을 불어넣습니다. 월 200만 달러 수익을 내는 '칼 AI' 앱을 예시로 들어, flutterflow와 Gemini API를 활용해 음식 사진 칼로리 분석 앱을 직접 만들어보는 과정을 단계별로 보여줍니다. 복잡한 코딩 지식 없이도 위젯, 액션, 데이터 타입, 커스텀 함수 등 핵심 개념을 이해하고 적용하여 나만의 AI 서비스를 구축하고, 나아가 웹에 배포하여 실제 사용자에게 선보이는 방법을 배울 수 있습니다. 개발 문턱을 낮춰 아이디어를 가진 사람이라면 누구나 AI 기술을 활용한 서비스 개발에 도전할 수 있도록 돕는 실용적인 가이드입니다.

1. AI 앱 개발 및 웹 배포 소개

칼 AI 앱 소개
1. 2024년 4월 출시 이후 총 500만 건 이상 다운로드되었다.
2. 2025년 3월 기준 월 매출 200만 달러를 기록하고 있다.
3. 음식 사진을 찍으면 AI가 칼로리와 영양 정보를 분석하여 제공하는 서비스이다.
4. 18세 고등학생 두 명이 직접 개발하여 출시하였다.

코딩 없이 AI 앱 구현 가능성
1. 인공지능 API 활용 및 간단한 앱 제작 능력만 있다면 칼 AI의 핵심 기능을 구현할 수 있다.

칼 AI 앱의 주요 기능 동작 원리
1. 스마트폰으로 찍은 음식 사진을 AI로 분석하여 음식 이름을 알아낸다.
2. 음식 이름을 바탕으로 데이터베이스에서 칼로리와 영양 정보를 검색한다.
3. 검색된 정보를 앱에서 사용자에게 보여준다.

노코드 앱 빌더와 API 활용
1. 복잡한 코딩 없이 노코드 앱 빌더 플러터 플로우(FlutterFlow)로 앱을 만들 수 있다.
2. 제미나이 비전 API(Gemini Vision API)를 활용하여 칼 AI와 유사한 서비스를 구현할 수 있다.

2. 서비스 핵심 기능 정리 및 구현 원리

음식 인식 기능 구현
1. 문제점: 코딩으로 이미지 분석 알고리즘을 직접 짜는 것은 어렵다.
2. 해결책: 제미나이 비전 API와 같은 외부 이미지 분석 기술을 활용한다.
3. 동작 원리:
  1. 앱에서 사진을 찍어 API에 사진 정보를 담아 제미나이 서버로 전달한다.
  2. 제미나이 서버의 인공지능 엔진이 사진을 분석한다.
  3. 분석 완료 후 음식 이름 결과값을 API로 다시 전달받아 활용한다.
4. 장점: 수천만 달러의 이미지 분석 기술을 API 키 하나만으로 사용할 수 있다.

칼로리 및 영양 정보 분석 기능 구현
1. 기존 칼 AI 서비스: 복잡한 딥러닝 기술과 데이터베이스가 필요하다.
2. 간단한 구현 방법: 제미나이에게 "영양 성분을 분석해 줘"와 같은 프롬프트 명령어를 통해 칼로리와 영양 정보를 받도록 구현한다.

최종 결과값 제공
1. 앱에 최종 결과값을 적절하게 구현하여 사용자에게 제공한다.

3. 플러터 플로우(FlutterFlow) 화면 제작: 위젯 이해 및 첫 화면 구성

3.1. 위젯(Widget) 개념 이해

위젯의 정의: UI 개발에서 중요하고 포괄적인 개념으로, 화면을 구성하는 모든 구성 요소를 의미한다.
위젯의 종류:
1. 기본 위젯: 텍스트, 버튼, 아이콘 등.
2. 레이아웃 위젯:
  - 컬럼(Column) 위젯: 화면 영역을 세로 방향으로 나누는 프레임을 만든다.
  - 로우(Row) 위젯: 화면 영역을 가로 방향으로 나누는 프레임을 만든다.
UI 구성 방법: 컬럼이나 로우 위젯을 기본으로 깔고, 그 위에 텍스트나 버튼 같은 다른 위젯들을 배치하여 UI를 만든다.

3.2. 앱 첫 화면(사진 등록 화면) 만들기

프로젝트 생성 및 초기 설정
1. 플러터 플로우 페이지에 접속하여 로그인한다.
2. 대시보드에서 'Create New'를 클릭하여 프로젝트를 생성한다.
3. 프로젝트 이름을 'MyCal Project'로 설정한다.
4. 빈 페이지에서 위젯 트리에서 컬럼 위젯만 남기고 나머지는 삭제한다.

위젯 추가 및 배치
1. 컬럼 위젯 위에 타이틀용 텍스트 위젯을 추가한다.
2. 그 밑에 분석할 음식 사진을 보여줄 이미지 뷰 위젯을 추가한다.
3. 그 아래 버튼 두 개를 가로로 배치하기 위해 로우 위젯을 추가한다.
4. 로우 위젯 위에 아이콘 버튼 위젯 두 개를 추가한다.
5. 맨 밑에 분석 요청 버튼 위젯을 추가한다.

위젯 속성 수정 및 디자인
1. 타이틀 텍스트: 내용을 "사진을 등록해 주세요"로, 폰트 사이즈는 25, 굵기는 볼드로 설정한다.
2. 이미지 뷰:
  - 'Expansion' 속성에서 '꽉 차게'를 선택하여 세로 방향으로 늘린다.
  - 'Width'에서 무한대 버튼을 클릭하여 가로 방향으로도 꽉 차게 늘린다.
  - 양쪽에 패딩을 25로 설정한다.
  - 'Border Radius' 속성을 16으로 설정하여 꼭짓점을 라운드 처리한다.
  - 사진 위쪽에 간격을 준다.
3. 아이콘 버튼 (카메라/갤러리):
  - 버튼들을 가로로 균일하게 배치한다.
  - 아이콘을 카메라 및 갤러리 이미지로 변경한다.
  - 로우 방향으로 두 버튼이 꽉 차게 설정한다.
  - 양쪽에 패딩을 25로 설정한다.
  - 버튼 위쪽에 간격을 25로 설정한다.
  - 버튼들 사이 간격을 각각 5씩 띄운다.
4. 분석 요청 버튼:
  - 위에 10 정도 간격을 준다.
  - 가로 방향으로 꽉 차게 'Width'를 변경한다.
  - 양쪽에 간격을 25로 설정한다.
  - 텍스트를 "분석 요청"으로 변경한다.
  - 버튼 아래쪽에 간격을 25로 설정한다.

테스트 및 프리뷰 기능 활용
1. 테스트 모드: 가상 환경에서 실제 앱처럼 테스트하며 기능 동작 및 오류 로그를 확인할 수 있다. (다음 앱 기능 구현 시 활용 예정)
2. 프리뷰 기능: 디자인이나 간단한 동작을 빠르게 확인할 수 있다.
3. 이미지 변경: 현재는 화면을 만드는 단계이므로, 이미지 뷰의 사진을 음식 사진으로 변경하여 프리뷰로 확인한다.

4. 분석 결과 화면(리포트 페이지) 만들기

새 페이지 생성 및 초기 설정
1. 페이지 트리에서 '+' 버튼을 클릭하여 새 페이지를 생성한다.
2. 페이지 이름을 'Report Page'로 설정한다.
3. 빈 페이지에서 컬럼 위젯만 남기고 나머지는 삭제한다.

스택(Stack) 위젯 이해 및 활용
1. 스택 위젯: 여러 위젯을 쌓아 올려 배치할 수 있게 해주는 위젯이다.
2. 활용 예시: 이미지 위에 뒤로 가기 버튼을 올릴 때 스택 위젯을 사용한다.

위젯 추가 및 배치
1. 컬럼 위젯 아래 스택 위젯을 추가한다.
2. 스택 위에 분석할 사진을 띄울 이미지 뷰 위젯을 추가한다.
3. 뒤로 가기 화살표를 추가하기 위해 아이콘 위젯을 추가한다.
4. 이미지 뷰: 가로를 꽉 차게 늘리고, 높이는 400으로 설정한다.
5. 아이콘:
  - 뒤로 가기 화살표 아이콘으로 변경하고, 잘 보이는 색상으로 변경한다.
  - 아이콘 사이즈를 50으로 설정한다.
  - 위쪽 패딩과 왼쪽 패딩을 각각 15로 설정한다.
6. 세이프 에어리어(Safe Area): 이미지 위쪽 공간을 없애기 위해 'Safe Area'를 비활성화한다.
7. 이미지 변경: 우선 음식 사진으로 변경한다.
8. 스택 길이 조정: 스택의 길이를 이미지 크기에 맞게 'Expansion'을 기본으로 선택한다.

음식 이름 및 칼로리 정보 표시
1. 스택 아래 텍스트 위젯을 추가하여 음식 이름을 표시한다. (예: "치즈 샐러드")
2. 폰트 사이즈는 25, 굵기는 볼드로 설정하고, 위쪽 간격을 25로 띄운다.
3. 컬럼 위에 로우 위젯을 추가한다.
4. 로우 위젯 안에 아이콘 위젯 하나와 텍스트 위젯 두 개를 추가한다.
5. 아이콘을 음식 아이콘으로 변경하고 크기를 크게 한다.
6. 텍스트 위젯은 칼로리 표시용으로 변경하고, 폰트 사이즈 23, 굵기는 볼드로 설정한다.
7. 나머지 텍스트들도 내용과 폰트를 알맞게 변경하여 완성한다.

영양소 카드 뷰 만들기
1. 레이아웃 설정:
  1. 세로로 만들기 위해 컬럼을 선택하고, 가로로 꽉 차게 만든다.
  2. 로우 위젯을 선택하여 각 열에 카드를 배치한다.
  3. 두 개씩 배치하고 각각을 가로로 꽉 차게 만든다.
  4. 간격을 조정한다.
2. 카드 디자인: 'Elevation' 속성을 수정하여 카드를 띄워준다.
3. 영양소 텍스트 배치:
  1. 영양소를 표시할 로우 위젯을 텍스트 밑에 추가한다.
  2. 수치와 단위를 표시할 텍스트 뷰 위젯 두 개를 추가한다.
  3. 첫 번째 카드는 탄수물을 표시하고, 수치와 그램 단위를 표시한다.
  4. 간격과 폰트를 조정한다.
  5. 오른쪽 카드는 왼쪽 카드를 복제하여 사용하고, 패딩으로 간격을 조정한다.
  6. 나머지 행은 로우 위젯을 복제하여 사용하고, 로우끼리 간격 조정을 한다.
  7. 영양소 텍스트를 모두 수정한다.

프리뷰 확인
1. 분석 결과 화면이 잘 완성되었는지 프리뷰로 확인한다.

5. 액션(Action) 기능 활용: 사진 선택 및 페이지 이동 구현

갤러리 버튼 삭제 및 카메라 버튼 액션 설정
1. 사진 등록 화면에서 갤러리 버튼을 삭제하고 카메라 버튼 하나만 남긴다.
2. 카메라 버튼 클릭 시 갤러리 또는 카메라 촬영 중 사용자가 선택할 수 있도록 설정한다.

액션(Action) 개념 이해
1. 액션의 정의: 앱의 특정 동작을 만들어 주는 기능이다.
2. 액션의 종류: 버튼 클릭 시 사진 촬영, 페이지 이동, API 요청 실행 등 앱의 모든 동작을 가능하게 한다.

이미지 업로드 액션 만들기
1. 카메라 버튼에 'Add Action'을 클릭하여 액션을 추가한다.
2. 'Define Action'에서 클릭 시 동작하도록 설정한다.
3. 'Upload, Save, Media' 액션을 선택한다.
4. 'Media Source'를 '사용자가 둘 중 하나를 선택'하도록 설정한다.

선택한 사진을 이미지 뷰에 표시하기
1. 이미지 뷰의 속성에서 기존 네트워크 이미지를 업로드한 이미지로 변경한다.
2. 버튼 위젯에 액션을 추가했으므로 'Widget State'에서 'Uploaded Local File'을 선택한다.
3. 기본 이미지 설정:
  1. 앱 세팅의 'App Assets'에서 에러 이미지(기본 이미지)를 설정한다.
  2. 이미지 뷰 속성에서 'Show Error Image on Failure'를 활성화하여 기본 이미지가 보이도록 한다.

테스트 실행 및 확인
1. 앱을 테스트 모드로 실행하여 기본 이미지가 잘 나오는지 확인한다.
2. 카메라 버튼을 클릭하여 갤러리에서 음식 사진을 선택하고 등록한다. (웹 환경에서는 갤러리만 선택 가능)
3. 사진이 이미지 뷰에 잘 등록되어 표시되는 것을 확인한다.

분석 요청 버튼 클릭 시 페이지 이동 액션 만들기
1. 분석 요청 버튼에 'Add Action'을 클릭한다.
2. 페이지 이동 액션인 'Navigate To'를 선택한다.
3. 영양소 분석 페이지인 'Report Page'를 선택한다.
4. 기존 테스트 모드 창에서 'Instant Reload'를 실행하여 구현된 기능을 바로 적용한다.
5. 사진 등록 후 분석 요청 버튼을 클릭하여 다음 페이지로 잘 이동하는지 확인한다.

6. 제미나이(Gemini) API 연동 및 데이터 처리

6.1. 제미나이 API 키 생성 및 플러터 플로우 연동

구글 AI 스튜디오 접속 및 API 키 생성
1. 구글 AI 스튜디오에 접속하여 동의 메시지에 응답한다.
2. 'Get API Key'를 클릭하여 API 키 만들기를 시작한다.

구글 클라우드 콘솔 프로젝트 생성
1. API 키 생성을 위해 구글 클라우드 콘솔에 접속한다.
2. 개인 정보 및 결제 정보를 입력한다. (결제는 사용량에 비례하며, 초기에는 무료 티어이므로 걱정할 필요 없다.)
3. '새 프로젝트'를 눌러 'MyCal Project'라는 이름으로 프로젝트를 생성한다.
4. 생성된 프로젝트를 클릭하여 정보들을 확인한다. (구글 API 및 서비스 적용 시 대시보드에서 사용량 등 관리 가능)

API 키 생성 완료 및 복사
1. 다시 구글 AI 스튜디오로 돌아와 'API 키 만들기'를 클릭한다.
2. 방금 만든 'MyCal Project'를 선택하고 '기존 프로젝트에서 API 키 만들기'를 클릭한다.
3. 생성된 API 키를 복사한다.

플러터 플로우 프로젝트에 API 키 등록
1. 플러터 플로우 프로젝트의 'App Settings'로 이동한다.
2. 'Gemini' 섹션을 클릭하고 'Gemini 활성화'에 복사한 API 키를 붙여 넣는다.
3. 이로써 제미나이 API를 사용할 준비가 완료된다.

6.2. 이미지 사이즈 고정 및 분석 요청 액션 설정

이미지 사이즈 고정: 업로드한 이미지의 분석 속도를 위해 가로세로 최대 1024로 크기를 고정한다.

분석 요청 버튼 액션 설정
1. 기존 분석 요청 버튼의 액션을 모두 삭제한다.
2. 'Add Action'을 클릭하여 새로운 액션을 추가한다.
3. 'Gemini'를 검색하여 'Gemini의 Text From Image'를 선택한다.
  - 이 액션은 사진과 프롬프트 메시지를 조합하여 제미나이에게 API 요청을 간편하게 해주는 플러터 플로우 자체 지원 기능이다.
4. 고정 댓글에 있는 프롬프트 메시지를 복사하여 'Text Prompt'의 'Value'에 붙여 넣는다.
5. 'Image Type'은 'Uploaded Local File'을 선택하여 업로드한 이미지를 프롬프트 메시지와 함께 보낸다.
6. 'Widget State'에서 해당 이미지를 선택한다.
7. 'Action Output' 이름은 'Gemini Response'로 설정한다.

페이지 스테이트(Page State) 업데이트의 필요성
1. 목표: 제미나이 API 응답을 받아 분석 요청 페이지의 상태(State)를 업데이트한다.
2. 스테이트(State) 개념: 앱의 기억으로, 좋아요 버튼 클릭 시 하트 표시나 숫자 증가처럼 앱이 특정 정보를 기억하고 화면에 반영하는 것을 의미한다.
3. 업데이트 이유: 제미나이에서 받은 응답값을 원하는 형태로 가공하여 기억해 뒀다가 다음 화면으로 넘겨줘야 분석 결과 화면에서 필요한 정보를 표시할 수 있기 때문이다.

6.3. 데이터 타입 및 커스텀 함수 생성

데이터 가공의 필요성:
1. 제미나이 API 요청 시 프롬프트 메시지 마지막에 JSON 오브젝트 형태로 분석 결과 응답을 요청한다.
2. 제미나이로부터 받은 JSON 오브젝트 형태의 글자 덩어리에서 음식 이름, 칼로리 등 필요한 데이터를 자유롭게 사용하고 표시하기 위해 문자열(String) 데이터 타입으로 변환(파싱)해야 한다.
3. 이 변환을 돕는 파싱 함수(커스텀 함수)가 필요하다.

데이터 타입(Data Type) 만들기
1. 플러터 플로우 프로젝트로 돌아와 'Data Types'를 클릭한다.
2. 'Create Data Type from JSON'을 선택한다.
3. 데이터 타입 이름을 'NutritionInfo'로 지정한다.
4. JSON 오브젝트를 붙여 넣으면 자동으로 데이터 타입들이 String 자료형으로 생성된다.

페이지 스테이트 변수 만들기
1. 필드 이름은 'nutritionResult'로 설정한다.
2. 타입은 방금 만든 'NutritionInfo' 데이터 타입을 선택한다.

커스텀 함수(Custom Function) 만들기
1. 'Custom Functions'를 클릭한다.
2. 제미나이로부터 받은 JSON 데이터를 'NutritionInfo' 데이터 타입으로 변환하는 커스텀 함수를 만든다.
3. 코드 작성:
  1. 'Function Settings'에서 'Data Type'을 선택하고 'NutritionInfo'를 선택한다.
  2. 'Define Arguments'에서 함수에 넣을 인자를 정의한다. 제미나이 API로 받은 JSON String을 넣어주면 'NutritionInfo' 데이터 타입을 반환받을 수 있도록 설정한다.
  3. 수동으로 함수 코드를 작성하고 'Save Function'을 누른다. (에러 발생 시 새로 고침으로 해결)
  4. 고정 댓글에 있는 나머지 함수 코드를 복사하여 붙여 넣고 다시 'Save'를 누른다. (에러 발생 시 새로 고침으로 해결)

6.4. 페이지 스테이트 업데이트 및 파라미터 전달

페이지 스테이트 업데이트
1. 'Action Flow Editor'로 돌아와 페이지 스테이트를 업데이트한다.
2. 'Add Field'를 눌러 아까 만든 페이지 스테이트 로컬 변수 'nutritionResult'를 선택한다.
3. 'Update Type'은 'Set Value'를 선택한다.
4. 'Value to Set'에 아까 만든 커스텀 함수 'jsonToNutritionInfo'를 선택한다.
5. 'Function Arguments'에 제미나이가 준 JSON 데이터인 'Action Output'의 'Gemini Response'를 선택한다.
6. 이 과정을 통해 제미나이 API로 받은 JSON 오브젝트가 'NutritionInfo' 데이터 타입으로 변환되어 페이지 스테이트에 업데이트된다.

페이지 파라미터(Page Parameter) 생성 및 설정
1. 목표: 분석한 음식 사진과 결과 데이터들을 파라미터를 활용하여 다음 페이지로 넘겨준다.
2. 홈페이지(첫 페이지) 파라미터 설정:
  1. 데이터를 넘길 첫 페이지인 홈페이지로 이동한다.
  2. 우측 상단 'Page Parameter' 클릭 후 'Add Parameter'를 클릭한다.
  3. 이미지 파라미터: 이름은 'uploadedImage', 타입은 'Uploaded File', 'Required'는 해제한다.
  4. 분석 결과 데이터 파라미터: 이름은 'analysisData', 타입은 'Data Type', 'Required'는 해제하고, 데이터 타입은 'NutritionInfo'로 설정한다.
3. 리포트 페이지(결과 페이지) 파라미터 설정:
  1. 분석 요청 버튼의 액션으로 돌아가 'Navigate To' 액션에서 'Parameter'의 'Define'을 누른다.
  2. 이동할 페이지인 리포트 페이지에서 파라미터를 받아줄 수 있도록 동일하게 파라미터들을 정의한다.
  3. 이미지 파라미터: 'uploadedImage', 타입은 'Uploaded File', 'Required'는 해제한다.
  4. 분석 결과 데이터 파라미터: 'analysisData', 타입은 'Data Type', 데이터 타입은 'NutritionInfo'로 설정한다.

파라미터에 값 담아 보내기
1. 다시 분석 요청 버튼의 'Action Flow Editor'로 돌아가 'Navigate To' 액션의 'Parameter' 부분에 활성화된 'Pass' 버튼을 클릭한다.
2. 홈페이지와 리포트 페이지에서 만든 파라미터들이 자동으로 세팅된다.
3. 실제 값 선택:
  1. 'uploadedImage'에는 'Widget State'의 'Uploaded Local File'을 선택한다.
  2. 'analysisData'에는 아까 업데이트한 페이지 스테이트의 'nutritionResult'를 선택한다.

분석 결과 화면 위젯에 데이터 연결
1. 분석 결과 화면(리포트 페이지)으로 이동한다.
2. 음식 이름 텍스트 위젯에 넘겨받은 페이지 파라미터의 'foodName'을 연결하고 기본값을 설정한다.
3. 나머지 칼로리, 영양소 등 모든 위젯에 페이지 파라미터로 받아온 데이터들을 연결한다.

테스트 실행 및 확인
1. 앱을 테스트 모드로 실행한다.
2. 갤러리에서 피자 사진을 선택하고 '분석 요청'을 클릭한다.
3. 로딩 후 '페퍼론이 피자'라는 음식 이름과 칼로리(300), 요청한 영양소 정보들이 정상적으로 표시되는 것을 확인한다.
4. 제미나이 API로 받았던 JSON 로우 데이터도 확인할 수 있다.

7. 웹 배포 및 모바일 환경 테스트

웹 배포의 이점
1. 구글 플레이 스토어(25달러 1회)나 앱 스토어(99달러/년)에 배포하는 비용을 절감할 수 있다.
2. 플러터 플로우를 처음 시작하는 경우, 웹 배포를 통해 구현한 서비스가 잘 동작하는지 충분히 확인할 수 있다.

플러터 플로우 앱 웹 배포 시작
1. 플러터 플로우 프로젝트의 'App Settings'로 이동한다.
2. 'Platforms' 섹션에서 'Web'이 비활성화되어 있다면 반드시 활성화한다.
3. 'Web Deployment'를 클릭한다.
4. 'Publish' 버튼을 클릭하면 웹 배포가 시작된다. (이전에 배포한 이력이 없다면 'Latest Message N/A'만 표시됨)

웹 배포 정보 입력
1. 사이트 URL: 플러터 플로우에서 기본 제공하는 '. FlutterFlow.app' 도메인을 사용한다. (추후 커스텀 도메인사용 가능)
2. 서브 도메인: 사용자에게 맞게 입력한다. (기본 제공 도메인 사용 가능)
3. SEO 타이틀: 구글 등 검색 시 노출되는 서비스 타이틀을 입력한다. (예: "This is very nice Food AI App")
4. 사이트 디스크립션: 검색 사이트에서 노출되는 상세 설명을 입력한다.
5. 페이지 타이틀: 웹사이트 탭에 표시되는 타이틀을 입력한다.
6. 파비콘(Favicon): 웹사이트 탭 아이콘을 의미한다. (유료 버전에서 자유롭게 설정 가능하며, 무료 버전은 플러터 플로우 로고가 기본)
7. 쇼 워터마크(Show Watermark): 모바일/웹 실행 시 우측 하단에 'This is a FlutterFlowservice' 워터마크가 표시된다. (유료 버전에서만 제거 가능)
8. 소셜 쉐어 이미지: URL 공유 시 대표 이미지로 표시될 이미지를 설정한다.

웹 배포 완료 및 모바일 테스트
1. 모든 정보 입력 후 'Publish' 버튼을 누르면 웹 배포가 완료된다. (약 5분 소요)
2. 배포 완료 후 생성된 URL을 스마트폰으로 보내 테스트한다.
3. 카카오톡 등으로 보낸 링크를 클릭하여 서비스가 실행되는지 확인한다.
4. 카메라 버튼을 클릭하여 사진 보관함에서 음식 사진을 선택한 후 '분석 요청'을 누른다.
5. 음식에 대한 분석 정보가 잘 표시되는 것을 확인한다.

비전공자 코딩 독학 노코드 툴 버블io 기초 AtoZ 초보자필독 바로가기

비전공자 코딩 독학 노코드 툴 버블io 기초 AtoZ 초보자필독 - 하나이프 블로그

노코드 툴 버블(Bubble.io)을 활용하여 아이디어를 실제 서비스로 구현하고 싶은 비전공자 및 초보 개발자를 위한 완벽 가이드입니다. 회원가입부터 페이지 구성, 데이터베이스 설계, 엘리먼트 및

hanaif.co.kr

'인터넷' 카테고리의 다른 글

구글 나노바나나 사용법 및 프롬프트 공유(gemini 2.5 flash image) 피규어 만들기 (1)	2025.09.01
나노바나나 활용해 만화 캐릭터를 피규어로 만드는 사용법 (0)	2025.09.01
아임웹 홈페이지 만들기 기초 강의, 모든 위젯 총정리 (초보자 필수 시청)아임웹으로 홈페이지를 만드는 방법은? (1)	2025.09.01
인스타그램으로 수익을 창출할 수 있는 8가지 방법은 무엇인가요? (2)	2025.09.01
너무 쉬운 ai 상세페이지 만들기, 왕초보도 10분컷 기획부터 모델컷, 디자인까지 복사 + 붙여넣기!! (1)	2025.09.01

현재글'음식사진 칼로리 분석 앱' 제작+웹 배포 완전정복｜FlutterFlow & Gemini API

하나이프 l 지식보관소

idcjw 님의 블로그 입니다. https://litt.ly/idcjw

유튜브, 키워드, AI, 포토샵, 어도비, 파이썬, 워드프레스, 수익화, 자동화, 영상, 옵시디언, 제미나이, 네이버, 블로그, 자바스크립트, 나노바나나, 챗GPT, GPT, 코딩, 애드센스,

Today :
Yesterday :

하나이프 l 지식보관소