Vercel로 AI 앱 배포, 이렇게 쉬울 줄이야?! | 바이브코딩 9편

Описание: AI Studio Build로 멋진 앱을 만들었는데, 공유하려니 소스 코드가 전부 노출되고 API 키 유출까지 걱정되셨죠? 심지어 사용자가 구글 로그인을 해야 해서 불편하셨나요?

이 영상 하나로 이 모든 고민이 해결됩니다! 코딩을 전혀 몰라도 여러분이 만든 AI 앱을 '진짜 웹사이트 주소'로 만들어 전 세계에 배포하는 방법을 알려드립니다.

오늘 배울 '버셀(Vercel)' 플랫폼을 활용하면, 사용자는 로그인 없이 링크 클릭 한 번으로 여러분의 앱을 사용할 수 있고, 여러분의 소중한 소스 코드와 아이디어는 안전하게 보호됩니다.

🔽 영상에 사용된 앱 무료 링크
https://muzbox.tistory.com/483682

📌 공지
제가 올린 콘텐츠에 대한 사용법, 추가 질문에 대해 대응해 드리기엔 댓글에 한계가 있습니다.

이에 좀 더 빠른 대응을 해드리기 위해
GPT PARK'S AI FACT 라는 오픈 채팅방을 개설하였으니
영상 댓글에는 격려와 사랑을....
영상 뿐아니라 AI 활용에 대한 다양한 질문과 정보공유는 아래 오픈 채팅방을 이용해 주세요!!

https://open.kakao.com/o/gsuILHyh

🔔 구독과 알림 설정을 통해 AI 블로깅 최신 팁과 도구를 놓치지 마세요!


#AIStudioBuild #Vercel #GitHub #앱배포 #웹사이트만들기 #코딩없이 #API키보안 #소스코드보호 #AI앱개발

1. 인트로 (Opening) (00:00)

2. AI Studio Build 공유 시 3가지 불편사항 (00:22)
구글 로그인 필수
사용법 숙지 필요
소스 코드 노출 문제
오늘 배울 내용 개요

3. GitHub 튜토리얼 (02:05)
GitHub 소개 및 개념 설명
회원가입 절차
Repository 생성 방법
파일 업로드 및 편집 방법
index.html 파일명 규칙 설명

4. Vercel 튜토리얼 (04:49)
Vercel 서비스 소개
무료 플랜(Hobby) 안내
회원가입 절차
GitHub와 Vercel 연동
첫 배포 실습

5. 수정사항 자동 반영 (06:47)
자동 배포 시스템 설명
코드 수정 후 자동 재배포 실습

6. 실전 앱 배포 1 - 모바일 배경화면 생성기 (07:39)
AI Studio Build에서 앱 생성
GitHub 저장 과정
Vercel 배포
React 기반 앱의 특징

7. 실전 앱 배포 2 - 경주마 레이싱 게임 (09:14)
Gee Wiz 게임 소개
GitHub 등록
Vercel 배포
API 미사용 앱의 특징

8. API 키 관리 문제 해결 (09:59)
첫 번째 앱의 문제점 (API 사용으로 인한 미작동)
내장형 vs 외장형 API 키 관리
사용자 로컬 저장 방식으로 변경

9. Google Cloud API 키 발급 (10:59)
Google Cloud Console 접속
프로젝트 생성
AI Studio에서 API 키 생성
API 키 테스트 및 확인
버셀 배포 앱에서 API 키 테스트
모바일 환경 동작 확인

10. 아웃트로 (Closing) (12:33)
강의 내용 요약
핵심 포인트 재강조 (외장형 API 관리)