Google AI Studio로 완성형 웹사이트 만들기 — 코딩 없이!

첫 콘셉트 생성하기

Google AI Studio를 열고 메인 프롬프트를 작성해 「AI Life Planner」 사이트의 첫 버전을 생성합니다.

사용한 프롬프트 – 사이트 제작

「AI Life Planner」라는 이름의 모던하고 깔끔하며 시각적으로 인상적인 사이트를 만들어 주세요…

Create a modern, clean, and visually impressive website called "AI Life Planner". The website should help users organize their goals, daily routines, habits, and personal growth. You have full creative freedom to choose the layout, colors, and visual style. Include: • Hero section • User input form • Personalized plan section Make the website fully responsive. Return everything in a single HTML file with embedded CSS and JavaScript.

디자인과 레이아웃 다듬기

디자인을 개선하고 히어로 섹션을 수정하며, 고급스러운 느낌의 글래스모피즘 헤더를 추가합니다.

사용한 프롬프트 – 다크 테마와 주간 플래너

사이트 전체를 모던한 다크 테마로 바꿔 주세요…

Change the entire website to a modern dark theme with premium gradients. Add a "Weekly Planner" section below the Personalized Plan section. Ensure everything remains responsive and visually consistent.

사용한 프롬프트 – 글래스모피즘 헤더

모던한 글래스모피즘(리퀴드 글래스) 헤더를 추가해 주세요…

Add a modern glassmorphism (liquid glass) header at the top of the website. Include: • "AI Life Planner" text logo on the left • Blurred glass background with soft shadows • Menu items on the right: Home, Features, Plans, Contact • Smooth hover animations • Sticky behavior on scroll Ensure full responsiveness.

사용한 프롬프트 – 히어로 섹션 리뉴얼

크고 강렬한 헤드라인으로 히어로 섹션을 새로 디자인해 주세요…

Redesign the hero section with a large bold headline, subtle gradient shapes, and a modern premium call-to-action button. Keep the design clean and consistent with the site.

기능 강화하기

할 일 목록 같은 구성 요소를 추가해 앱을 더 쓸모 있게 만듭니다.

사용한 프롬프트 – 할 일 목록 기능

간단한 할 일 목록 섹션을 추가해 주세요…

Add a simple To-Do List section below the hero section with checkboxes to mark tasks as completed. Keep the design minimal and clean.

Hostinger로 배포

사이트 파일을 내려받아 Hostinger에 올리고 사이트를 공개합니다.

🎥 Google AI Studio 사이트와 웹 앱 배포하기

Google AI Studio 사이트와 웹 앱 배포하기

https://youtu.be/HGs-4QjyjHQ?si=Cs4oHKURdxp6J70E

탄탄한 오류 처리 구현하기

배포 중 오류가 나도 매끄럽게 처리하고, 사용자에게 명확히 알려 주도록 만듭니다.

사용한 프롬프트 – 오류 처리와 피드백

배포할 때 자주 생기는 문제에 대비해 탄탄한 오류 처리를 추가해 주세요…

Implement a comprehensive error handling system for the website. If a user encounters an error (e.g., network failure, form submission error), display a friendly, clearly visible error message instead of a generic browser alert. Provide suggestions for fixing the issue (e.g., "Check your internet connection"). Also, ensure that successful actions display a confirmation message.

프롬프트 작성 마스터클래스

AI에서 최고의 결과를 얻기 위해 간단하지만 효과적인 프롬프트를 쓰는 법을 배웁니다.

🎥 프롬프트 작성 튜토리얼

프롬프트 작성 튜토리얼

https://youtu.be/UlkdOrr3RKM?si=rKQvhMqWmO1HakUp