여러분이 어렵게 만든 AI 앱, 혹시 여전히 AI Studio 빌드 링크로만 공유하고 계셨나요? 물론 편리하긴 하지만, 저는 그 방법이 항상 아쉬웠어요. 로그인해야 볼 수 있고, 무엇보다 내 소스 코드가 그대로 노출된다는 점이 너무 신경 쓰였거든요. 아이디어가 고스란히 공개되는 기분이라고 해야 할까요? 게다가 API 키 유출 걱정까지… 정말 답답한 부분들이 많았죠.
하지만 걱정 마세요! 오늘은 이 모든 고민을 한 번에 날려버릴 수 있는 아주 특별한 방법을 알려드리려고 해요. 코딩을 전혀 몰라도, 여러분이 만든 AI 앱을 진짜 전문가처럼 독립적인 웹사이트 형태로 전 세계에 공개하는 방법! 그것도 단 몇 분 만에 가능하답니다. 지금 보고 계신 이런 멋진 웹사이트도 이 방법으로 만들 수 있어요. 어때요, 정말 놀랍지 않나요?
이 강의 하나면 여러분의 앱은 더 이상 구글 로그인도, AI Studio 빌드 사용법 숙지도 필요 없이 그저 링크만 클릭하면 바로 사용할 수 있게 됩니다. 무엇보다 소스 코드까지 안전하게 보호되니, 이제 마음 놓고 여러분의 멋진 아이디어를 세상에 보여줄 수 있을 거예요.
📚 GitHub: 내 코드의 안전한 온라인 저장소
먼저, 우리의 소스 코드와 파일들을 안전하게 보관하고 관리해 줄 든든한 온라인 저장소, GitHub(깃허브)에 대해 간단히 알아볼게요. 사실 깃허브는 개발자들에게는 거의 필수적인 서비스라고 할 수 있어요. 쉽게 말해 우리가 만든 코드나 파일을 안전하게 저장하고 관리할 수 있는 온라인 저장소라고 보시면 됩니다. 마치 구글 드라이브나 네이버 클라우드처럼 파일을 올려두는 공간인데, 특히 개발자들이 코드를 저장하고 공유하는 데 특화되어 있죠. 전 세계 개발자들이 모여 함께 작업하고 공유하는 공간, 그렇게 이해하면 좀 더 쉽지 않을까 싶어요.
깃허브 계정 생성하기
깃허브 계정을 만드는 건 정말 간단해요. 이미 많은 분이 구글 계정을 가지고 계실 테니, 그걸 활용하면 1분도 채 걸리지 않을 거예요. 정말 편해졌죠!
- github.com에 접속 후 메인 화면 중앙의 'Sign Up' 버튼을 클릭합니다.
- 다음 화면에서 'Continue with Google'을 선택하고 사용할 구글 아이디를 클릭하세요.
- 깃허브 로그인 화면에서 '계속'을 클릭한 후, 깃허브에서 사용할 사용자명(Username)을 확인하고 'Create account'를 클릭합니다.
- 잠시 기다리면 바로 여러분의 깃허브 사용자 화면으로 이동할 거예요.
첫 번째 저장소(Repository) 만들기
깃허브에서는 코드나 파일을 저장하는 공간을 '저장소(Repository)'라고 부르는데요. 이 저장소를 만드는 것부터 시작해볼게요.
- 왼쪽에 있는 'Create Repository' 버튼을 클릭합니다.
- 'Repository name'과 'Description'을 입력하세요. 간단한 HTML 랜딩 페이지를 예시로 든다면, 이름과 설명을 'first-homepage'로 지정할 수 있겠죠.
- 참고로, 깃허브에서는 이 저장소명이 여러분의 웹페이지 주소 일부가 됩니다 (예: github.com/사용자명/first-homepage). 나중에 소스 공유할 때 요긴하게 쓰이니 기억해두세요.
파일 업로드 및 관리
이제 저장소가 생겼으니 파일을 추가해야겠죠? 깃허브에서는 직접 코드를 입력하거나 소스 파일을 업로드할 수 있어요.
- 화면 중앙의 'creating a new file'을 클릭하면 코드 편집 화면에서 직접 소스를 입력할 수 있습니다.
- 'uploading an existing file'을 클릭하면 외부 파일을 업로드할 수 있어요. 우리는 미리 만들어 둔 HTML 파일을 등록해 봅시다.
- 파일 업로드가 끝나면 'Commit changes' 란에 간단한 변경사항과 설명을 입력하고 'Commit changes' 버튼을 클릭하면 업로드가 완료됩니다.
아, 그리고 중요한 점! 메인 HTML 파일명은 반드시 'index'로 변경해주세요. 대부분의 웹 서버는 기본적으로 `index.html` 파일을 해당 디렉터리의 메인 페이지로 인식하거든요. 이 부분은 꼭 기억해야 할 핵심 포인트예요.
🚀 Vercel: 내 앱을 전 세계로 배포하는 마법
자, 이제 깃허브에 잘 올려둔 우리의 소중한 파일들을 실제 웹사이트로 만들어주는 Vercel(버셀)이라는 서비스를 사용해 볼 시간입니다. 버셀은 우리가 만든 웹사이트를 전 세계 누구나 접속할 수 있는 실제 인터넷 주소로 만들어주는, 정말 고마운 서비스예요. 특히 개인 프로젝트나 비상업적 용도에 적합한 무료 요금제(Hobby 플랜)를 제공하는데, 신용카드 등록 없이도 사용할 수 있을 정도로 상당히 관대한 한도를 제공합니다. 부담 없이 시작할 수 있다는 거죠! 제가 직접 써보니 개인 개발자에게 이만한 서비스가 없었어요.
버셀 계정 생성 및 깃허브 연결
버셀 계정 생성도 깃허브만큼이나 간단해요. 그리고 무엇보다 중요한 건 깃허브와 연동하는 과정이죠.
- 주소창에 vercel.com을 입력하고 접속합니다. 메인 페이지 오른쪽 위의 'Sign Up' 버튼을 클릭하세요.
- 구독 플랜 중 무료인 'Hobby'를 선택하고 사용자명(Username)을 입력한 후 'Continue' 버튼을 클릭합니다.
- 여기서 중요! 반드시 'GitHub' 버튼을 클릭하세요. 팝업창 아래 'Authorize Vercel'을 클릭하면 버셀 가입이 완료됩니다.
- 다음으로 깃허브 설치를 위해 중앙의 'Install' 버튼을 클릭합니다. 팝업창에서 'All repositories'를 선택하고 'Install' 버튼을 다시 클릭하면, 깃허브와 버셀의 연동 작업이 끝납니다.
첫 앱 배포하기
이제 깃허브와 버셀이 연결되었으니, 우리가 깃허브에 올려둔 프로젝트를 배포해 볼 차례예요.
- 연결이 완료되면 좀 전에 깃허브를 통해 작업한 저장소 목록이 보일 거예요. 여기서 우리가 배포하고 싶은 저장소 옆의 'Import' 버튼을 클릭합니다.
- 버셀은 정말 똑똑해서 프로젝트에 포함된 소스를 자동으로 분석해요. '아, 이건 HTML 파일이네!' 하고 다 파악한 후 최적화된 설정을 보여주니, 우리는 그저 'Deploy' 버튼만 클릭하면 끝! 정말 쉽죠?
- 잠시 후 '축하합니다!' 메시지와 함께 미리보기 화면이 나타나면, 정상적으로 배포(Deploy)가 완료된 겁니다. 화면 아래 버튼을 클릭하여 대시보드로 이동하세요.
- 'Production Deployment' 화면에서 'Domains' 섹션을 보면 방금 배포가 완료된 우리 앱(웹페이지)의 주소가 보입니다. 이 주소를 공유하면 다른 사람들이 바로 접속해서 사용할 수 있어요.
CI/CD: 지속적인 통합과 배포의 마법
그럼 배포한 앱에 수정사항이 발생하면 앞서 알려드린 연결에서 배포까지의 모든 과정을 다시 거쳐야 할까요? 물론 아니죠! 여기서 깃허브와 버셀 연동의 진짜 마법이 펼쳐집니다.
이제 깃허브는 우리가 코드를 수정할 때마다 버셀에게 “방금 코드를 수정했어요!”라고 자동으로 알려줍니다. 그러면 버셀이 알아서 새로운 버전으로 다시 배포를 시작하고요. 이걸 바로 개발자들이 말하는 CI(Continuous Integration)/CD(Continuous Delivery), 즉 지속적 통합과 지속적 배포라고 해요. 제가 직접 테스트해 보니 정말 신기하고 편했어요. 한 번 예시를 통해 볼까요?
- 깃허브에서 앞서 배포한 HTML 파일의 제목을 "유용한 에이아이 도구 모음"으로 수정합니다.
- 'Commit changes'의 변경사항을 '제목 수정'이라고 입력하고 저장합니다.
- 그러면 버셀로 이동해서 보면, 수정된 내용이 반영되어 자동으로 재배포가 진행되고, 실제 실행을 해보면 변경사항이 제대로 적용된 것을 확인할 수 있습니다. 정말 편리하지 않나요?
⚙️ AI Studio 앱 배포: API 유무에 따른 전략
이제 단순 HTML 파일이 아닌, AI Studio 빌드에서 작업한 실제 AI 앱을 깃허브에 업로드하고 버셀로 배포하는 방법을 알려드릴게요. 이때 중요한 건, 앱이 API를 사용하는지 여부에 따라 접근 방식이 조금 달라진다는 점이에요.
AI Studio 앱 깃허브 업로드
AI Studio에서 만든 앱을 깃허브에 올리는 과정은 놀랍도록 간편합니다.
- 먼저 AI Studio 빌드 채팅창에서 여러분이 만들었던 앱을 띄워놓습니다. 예를 들어, 휴대폰 배경화면을 생성하는 모바일 전용 한글 웹 앱을 만들어 달라고 요청했던 앱이 될 수 있겠죠.
- 우측 상단의 깃허브 아이콘('GitHub에 저장' 버튼)을 클릭하고 '깃허브에 로그인하여 계속하기'를 클릭합니다.
- 팝업창에서 아래로 스크롤하여 '설치 및 승인' 버튼을 클릭합니다.
- 저장소 이름과 설명을 입력하고 'Public'을 선택한 후 'Create Git Repo'를 클릭합니다.
- 다음 화면에 업로드할 파일 목록이 보일 거예요. 화면 아래 'Stage and commit all changes' 버튼을 클릭하면 깃허브로 업로드하는 과정이 완료됩니다.
버셀을 통한 AI Studio 앱 배포 (API 유무)
이제 깃허브에 올라간 AI Studio 앱을 버셀로 배포해봅시다. 여기서 중요한 차이점을 발견할 수 있을 거예요.
- 버셀로 가서 우측 상단에 'Visit'를 클릭해서 프로젝트를 선택한 후, 조금 전에 업로드한 깃허브 프로젝트를 'Import'하면 됩니다.
- 우리가 앞서 배포한 건 단순한 HTML 파일이라 `index.html` 파일명이 중요했어요. 하지만 지금 배포한 AI 앱은, 버셀이 '이건 React 기반 앱이구나!' 하고 자동으로 인식합니다. 그래서 파일명 같은 것을 전혀 신경 쓸 필요 없이 'Import'와 'Deploy' 버튼만 누르면 배포가 완료돼요. 정말 똑똑하죠!
- 이런 식으로 경주마 레이싱 게임 'Gee Wiz' 같은 AI를 사용하지 않는 (즉, API가 필요 없는) 앱은 에러 없이 제대로 배포되고 발행된 주소를 통해서도 잘 접속되며 정상 작동하는 것을 확인할 수 있습니다. 저도 배포하고 나서 바로 게임을 플레이해봤는데 정말 만족스러웠어요.
🔒 API 키 보안: 사용자에게 키 관리 맡기기
결국, 앱은 여러분이 만들어 배포하고 API는 사용자들의 것으로 사용하게 해야겠죠. 이게 가장 이상적인 방법입니다. 그래야 여러분의 API 키가 안전하게 보호되고 불필요한 비용 발생을 막을 수 있어요. 이제 AI Studio 앱을 수정하여 사용자 로컬 드라이브에 API 키를 암호화하여 저장하고 테스트하는 기능을 추가해볼게요.
AI Studio 앱 수정: 외장형 API 키 관리로 전환
AI Studio 빌드의 강력한 기능을 활용해 앱에 외장형 API 키 관리 기능을 추가해봅시다.
- AI Studio 빌드에서 첫 번째 앱(모바일 배경화면 생성기)을 다시 불러옵니다.
- 채팅창에 "API key 관리를 내장형이 아닌 외장형으로 변경해야 해. 버튼을 클릭하면 이 앱에 사용된 모든 API 키를 사용자 로컬 드라이브에 암호화해서 저장하고, 연결 테스트를 하는 팝업창을 생성해"라고 요청합니다.
- 요청이 완료되면, 완성된 앱에는 API 키를 입력하고 연결 테스트 한 후 저장하는 기능이 추가된 것을 확인할 수 있을 거예요. 이러면 앱 개발자도 내장된 API가 아닌, API 키를 발급받아 사용하게 됩니다.
- 기능이 추가되었으니, 수정된 소스를 깃허브에 다시 업로드하는 것을 잊지 마세요!
Google Cloud에서 API 키 발급받기
이제 사용자에게 제공할 API 키를 Google Cloud에서 발급받는 방법을 알아볼게요. 이 키를 통해 사용자가 직접 자신의 환경에서 AI 모델을 활용할 수 있게 됩니다.
- Google Cloud Console (https://console.cloud.google.com/)에 접속합니다.
- '프로젝트 만들기 또는 선택' 버튼을 클릭합니다. 이미 다른 프로젝트가 있다면, 화면처럼 순서대로 클릭해서 새 프로젝트를 만들 수 있어요.
- 새 프로젝트에서 '프로젝트 명'을 입력하고 '만들기'를 클릭합니다.
- 프로젝트가 제대로 생성이 되었는지 좌측 상단의 프로젝트 버튼을 클릭, 방금 생성된 프로젝트 명을 선택한 후 계정이 활성화된 것을 확인하세요.
- 다시 AI Studio 빌드로 가서 우측 상단에 'Switch to API key' 아이콘을 클릭합니다.
- 그다음 'Create a new key'를 선택하고 '프로젝트 가져오기'에서 좀 전에 만든 프로젝트를 체크하고 가져오기 합니다.
- 가져온 프로젝트를 선택한 후, 키 이름을 입력하고 '키 만들기'를 클릭하세요. 이러면 API 키가 만들어지긴 하지만, 키 값을 바로 확인할 수는 없습니다.
- 키 값을 얻기 위해 AI Studio 첫 화면에서 좌측 하단에 'Get API key'를 선택하면 보이는 프로젝트 목록 우측에, 복사 아이콘을 클릭하면 키 값이 복사됩니다. 이제 이 키를 여러분의 앱 사용자에게 제공할 수 있습니다.
API 키 테스트 및 최종 확인
발급받은 API 키가 제대로 작동하는지 확인하는 과정도 중요해요. 저는 제 스마트폰에서도 직접 확인해봤는데, 정말 뿌듯했어요.
- 다시 앱으로 돌아와 우측 상단의 키 관리 창을 열고 방금 복사한 키 값을 넣고 '연결 테스트'를 합니다. 문제가 없다면 성공!
- 마지막으로 버셀에서 배포된 앱의 주소로 가서 API 키 값을 테스트해도 아무런 문제가 없음을 확인합니다. 제 스마트폰에서도 완벽하게 동작하는 것을 확인했습니다. 이제 여러분의 AI 앱은 완벽한 독립 웹사이트로 전 세계에 서비스될 준비를 마친 겁니다!
1. GitHub는 코드와 파일을 안전하게 관리하고 협업하는 온라인 저장소입니다.
2. Vercel은 GitHub와 연동하여 웹 앱을 전 세계에 무료로 배포할 수 있는 강력한 플랫폼입니다.
3. AI 앱 배포 시, `index.html` 파일명과 CI/CD 자동 배포 기능을 활용할 수 있습니다.
4. API 키 보안을 위해 AI Studio 앱을 수정하여 사용자가 직접 API 키를 관리하도록 설정해야 합니다.
❓ 자주 묻는 질문 (FAQ)
Q1: 코딩을 전혀 몰라도 정말 AI 앱을 배포할 수 있나요?
네, 물론입니다! AI Studio 빌드에서 앱을 만들고, GitHub와 Vercel은 직관적인 인터페이스를 제공하기 때문에 코딩 지식이 없어도 충분히 배포할 수 있습니다. 오늘 배운 가이드라인을 따라하면 누구든 가능해요.
Q2: Vercel의 무료 요금제(Hobby 플랜)는 어느 정도까지 사용할 수 있나요?
Vercel의 Hobby 플랜은 개인 프로젝트 및 비상업적 용도에 매우 관대한 한도를 제공합니다. 월별 빌드 시간, 대역폭, 함수 실행 등 대부분의 개인 개발자가 충분히 사용할 수 있는 수준이에요. 신용카드 등록 없이 시작할 수 있다는 점도 큰 장점입니다.
Q3: AI Studio 앱의 API 키 보안이 왜 그렇게 중요한가요?
API 키는 여러분의 계정과 연결되어 AI 모델 사용에 대한 비용이 발생할 수 있습니다. 만약 키가 노출되면 다른 사람이 무단으로 사용해 예상치 못한 과금이 발생하거나, 여러분의 API 사용 한도가 소진될 수 있기 때문에 철저한 보안이 필수적입니다. 사용자가 직접 키를 관리하게 하는 것이 가장 안전한 방법입니다.
오늘 강의 내용을 다시 한번 정리해드리면서 마무리할까 합니다. 여러분은 오늘 AI Studio 빌드에서 만든 앱을 깃허브에 저장하고, 버셀을 통해 누구나 접속할 수 있는 실제 웹사이트로 배포하는 전 과정을 배우셨습니다. 정말 많은 것을 해내신 거예요!
이 방법을 통해, 이제 여러분은 구글 로그인이나 소스 코드 노출 걱정 없이 안전하게 자신의 AI 앱을 공유할 수 있게 되었습니다. 특히 중요한 점은, 제미나이 API를 사용하는 앱의 경우, 여러분의 API 키를 보호하기 위해 반드시 '외장형'으로 관리 방식을 변경해야 한다는 것이었죠. 사용자가 직접 자신의 API 키를 입력하게 만들어, 보안과 비용 문제를 모두 현명하게 해결했습니다.
🔽 이 기사에서 사용된 2개의 앱 무료링크
🔽 AI 모바일 배경화면 생성기
공유용 : https://ai.studio/apps/drive/1tuSsk3Vc1ZNMDPwjzLZh_PYoKHQmrig1
배포용 : https://mobile-wallpaper-generator.vercel.app/
🔽 GEE WIZ 경마게임
공유용 : https://ai.studio/apps/drive/1whAHjrX-Wg7n4jWwjZZ3rVbGMsyU3nVz
배포용 : https://gee-wiz.vercel.app/