Google AI Studio 프로젝트 배포하기
Google AI Studio 프로젝트를 GitHub에 연결하고 Hostinger로 배포해 실제로 공개하는 단계별 가이드.
로드맵과 자료
프로젝트 만들기
Google AI Studio 열기
사이트 또는 웹 앱 생성하기
이 단계에서 사용하는 프롬프트
프롬프트 1 — AI SaaS 사이트 프롬프트
어둡고 영화 같은 분위기의 고급스러운 미래형 AI SaaS 랜딩 페이지를 만들어 주세요…
Create a premium futuristic AI SaaS landing page with a dark cinematic aesthetic, inspired by high-end modern startup websites. Style direction: - Ultra premium - Minimal but visually striking - Dark black background with deep purple / blue glow accents - Clean glassmorphism elements - Soft gradients, subtle reflections, and ambient lighting - Apple / Vercel / Stripe level polish - Smooth spacing, strong typography, and luxury tech feel Main hero section: - Large bold headline on the left - Make the headline visually dynamic by mixing clean bold sans-serif with one elegant italic/emphasized word - Add a short supporting paragraph below - Add 2 CTA buttons: 1. Primary solid button 2. Secondary ghost button with icon - On the right side, create a premium 3D AI robot or futuristic assistant object, placed on a pedestal or floating platform - Add subtle floating UI status cards around the robot, such as: - CORE_ONLINE - LATENCY: 12ms - AI ACTIVE - LIVE SYNC - Add a small badge above the headline like: “Introducing [Product Name] OS v2.0” Navbar: - Clean transparent/dark glass navbar - Logo on the left - 3 to 4 nav links in the center - Rounded CTA button on the right - The navbar should feel elegant and slightly floating Visual quality: - Use cinematic lighting - Add subtle grain/noise texture for depth - Use soft radial glows in the background - Strong contrast for readability - Make the whole page feel alive and premium, not flat - Use smooth hover states and micro-interactions - Rounded corners everywhere - Add depth using shadows and blurred glow layers Page sections after hero: 1. Features section with 3 premium cards 2. AI capabilities / platform section 3. Product demo or interface preview section 4. Testimonials or trust section 5. Pricing section 6. Final CTA section 7. Premium footer Typography: - Very large hero text - Clean sans-serif for most text - Elegant contrasting accent style for one keyword in hero - Modern spacing and hierarchy Color palette: - Black / near-black base - Purple, violet, blue neon accents - White text - Soft gray secondary text Technical requirements: - Build this as a fully responsive modern website - Ensure excellent desktop and mobile layout - Use smooth animations on scroll - Keep everything polished and production-ready - Do not make it look generic or template-like - Focus on premium SaaS conversion-oriented design Product concept: The product is an advanced AI assistant platform that feels intelligent, luxurious, futuristic, and human-friendly. Give the brand a strong modern name and create all copy accordingly.
GitHub에 저장하기
GitHub 계정 연결하기
프로젝트용 저장소 만들기
프로젝트를 GitHub에 푸시하기
Hostinger로 배포하기
Hostinger에 배포하기
영상과 똑같은 구성으로 이 프로젝트를 공개합니다.
RECOMMENDED
https://www.hostg.xyz/SHJF8
Hostinger에서 Node.js 웹 앱 만들기
GitHub 저장소 연결하기
필요한 환경 변수 추가하기
API_KEY GOOGLE_API_KEY GEMINI_API_KEY VITE_GOOGLE_API_KEY VITE_GEMINI_API_KEY
API_KEY
Gemini API 키
GOOGLE_API_KEY
Gemini API 키
GEMINI_API_KEY
Gemini API 키
VITE_GOOGLE_API_KEY
Gemini API 키
VITE_GEMINI_API_KEY
Gemini API 키
이 키는 Google AI Studio에서 발급받으세요
API 키 열기
https://aistudio.google.com/app/apikey