[가이드] Google AI Studio 앱 소스 다운로드부터 배포용 빌드까지 완벽 정리|올씽 워드프레스

Google AI Studio에서 멋진 AI 앱을 설계했다면, 이제 이를 내 개인 서버나 Hostinger에 올려 실제로 운영해 볼 차례입니다. 하지만 AI Studio에서 제공하는 파일은 바로 웹사이트가 되는 것이 아니라, ZIP 형태의 소스 코드입니다.

오늘은 AI Studio에서 소스 코드를 안전하게 다운로드하고, 배포 가능한 상태인 dist 폴더로 빌드하는 구체적인 방법을 알아보겠습니다.

---

1. Google AI Studio에서 앱 소스 코드(ZIP) 다운로드하기

AI Studio는 개발자가 만든 설정을 실제 코드로 변환해주는 Download App 기능을 제공합니다. 이 버튼을 통해 전체 프로젝트 구조를 한 번에 내려받을 수 있습니다.

• 정확한 다운로드 위치:

  1. AI Studio 대시보드 내 Build 섹션으로 이동하여 Apps 목록을 선택합니다.

  2. 배포하고자 하는 앱의 프리뷰(Preview) 페이지로 진입합니다.

  3. 화면 우측 상단에 위치한 Download App (또는 Download ZIP) 버튼을 클릭합니다.

• 파일 수령: 클릭 후 몇 초가 지나면 자동으로 ZIP 파일 다운로드가 시작됩니다. 이 과정은 PC뿐만 아니라 모바일 환경에서도 동일하게 진행할 수 있습니다.

2. ZIP 파일 구성 요소와 로컬 환경 설정

내려받은 ZIP 파일의 압축을 풀면, 현대적인 웹 개발에 필요한 필수 파일들이 포함되어 있습니다.

• 주요 파일 리스트:

  • index.html: 앱의 메인 진입점입니다.

  • src/ 폴더: React, Vue 또는 Vanilla JS로 작성된 실제 로직 코드가 들어있습니다.

  • package.json: 빌드에 필요한 라이브러리 정보가 담겨 있습니다.

  • vite.config.js: 빌드 도구인 Vite의 설정 파일입니다.

• 환경변수 체크: 소스 코드 내에는 Gemini API 호출 코드가 포함되어 있습니다. 보안을 위해 API 키는 별도의 환경변수 설정이 필요하므로, 빌드 전 반드시 체크해야 합니다.

---

3. 실전 빌드: npm run build로 dist 폴더 완성하기

이제 내 컴퓨터(로컬)에서 서버에 올릴 수 있는 최종 결과물을 만들 차례입니다. VS Code와 같은 에디터를 활용하면 간편합니다.

1. 프로젝트 열기: VS Code에서 압축을 푼 폴더를 엽니다.

2. 의존성 설치: 터미널을 열고 npm install을 입력하여 필요한 라이브러리를 설치합니다.

3. 빌드 실행: 터미널에 아래 명령어를 입력합니다. npm run build

4. 결과 확인: 명령어가 끝나면 프로젝트 폴더 내에 dist 폴더가 생성됩니다. 이 안에 있는 파일들이 바로 Hostinger hPanel에 업로드할 최종 완성본입니다.

---

요약 및 주의사항

Google AI Studio에서 받은 소스는 원석과 같습니다. 이를 빌드(Build)라는 과정을 통해 다듬어야만 실제 웹사이트로서 기능을 하게 됩니다. 만약 AI Studio 화면에서 다운로드 버튼이 보이지 않거나 빌드 중 오류가 발생한다면, 프로젝트 스크린샷과 함께 상태를 점검해 보시기 바랍니다.

빌드가 완료된 파일을 Hostinger에 올리는 다음 단계가 궁금하신가요? 

이 포스팅은 쿠팡 파트너스 활동으로, 블로그제작에 도움을 제공합니다.

이전 포스팅인 [Hostinger 배포 가이드]를 참고하여 나만의 AI 웹사이트를 전 세계에 공개해 보세요!