Google AI Studio로 웹사이트 만들고 SiteDrop으로 게시하기

Google AI Studio는 AI로 웹사이트를 만들 수 있는 무료 도구 중에서도 가장 기대되는 도구예요. Gemini를 기반으로 하고, 원하는 내용을 일상적인 말로 설명하면 HTML, CSS, JavaScript까지 모두 갖춘 완성된 웹사이트를 만들어 줘요. 그런데 멋진 결과물을 만들었다면 이제 세상 사람들이 볼 수 있게 어떻게 온라인에 올릴까요?

그럴 때 필요한 게 SiteDrop이에요. 이 가이드에서는 전체 과정을 안내해요. Google AI Studio에서 웹사이트를 만들고, 내려받고, SiteDrop으로 60초 안에 인터넷에 게시하는 방법이에요.

Google AI Studio란?

Google AI Studio(aistudio.google.com)는 Google의 무료 브라우저 기반 도구로, 가장 강력한 AI 모델인 Gemini를 직접 쓸 수 있게 해 줘요. 대부분 채팅이나 글 생성 용도로 알고 있지만, 간단한 프롬프트만으로 완성된 웹사이트를 만드는 데도 정말 뛰어나요.

웹사이트 아이디어를 자연스러운 말로 설명하면 Gemini가 코드를 모두 작성해 줘요. 프로그래밍 지식은 필요 없어요. 수정하거나, 섹션을 추가하거나, 일부를 다시 디자인해 달라고 요청할 수도 있어요. 모두 대화로 할 수 있어요.

1단계: Google AI Studio에서 웹사이트 만들기

1. aistudio.google.com에 접속해서 Google 계정으로 로그인하세요.
2. Gemini와 새 채팅을 시작하고 자세한 프롬프트를 입력하세요. 예를 들면 이래요.
   "Bean & Brew라는 커피숍의 현대적이고 완성도 높은 랜딩 페이지를 만들어 줘. 따뜻한 배경의 히어로 섹션, 가격이 있는 메뉴 섹션, 소개 섹션, 영업시간, Google 지도 삽입 자리, 문의 양식을 넣어 줘. 반응형으로 만들고 최신 CSS를 사용해 줘. 모든 코드를 HTML 파일 하나로 줘."
3. Gemini가 웹사이트에 필요한 HTML, CSS, JavaScript 코드를 모두 만들어 줘요.
4. 수정하고 싶다면 그냥 요청하세요. 예를 들면 "색상을 더 어둡게 해 줘" 또는 "후기 섹션을 추가해 줘."

2단계: 웹사이트 파일 내려받기

만들어진 코드가 마음에 들면 컴퓨터에 파일로 저장해야 해요.

1. Google AI Studio에서 생성된 코드를 복사하세요.
2. 간단한 텍스트 편집기(Windows는 메모장, Mac은 텍스트 편집기)를 여세요.
3. 코드를 붙여 넣고 index.html로 저장하세요. 파일 확장자가.txt가 아니라 .html인지 확인하세요.
4. Gemini가 CSS나 JavaScript 파일을 따로 만들었다면 그것도 같은 폴더에 저장하세요.
5. 모든 파일을 폴더 하나에 넣으세요. 폴더 이름은 my-website처럼 아무거나 괜찮아요.

꿀팁: Gemini에게 인라인 CSS와 JavaScript를 포함해 모든 내용을 HTML 파일 하나에 넣어 달라고 요청해 보세요. 저장할 파일이 하나뿐이라 훨씬 간단해져요.

3단계: SiteDrop에 업로드하고 게시하기

이제 쉬운 부분이에요. SiteDrop은 바로 이런 결과물, 즉 웹사이트 파일이 담긴 폴더를 받아서 즉시 게시하도록 만들어졌어요. Git도, 터미널도, 빌드 단계도 필요 없어요.

1. sitedrop.live에 접속해서 로그인하세요(또는 무료 계정을 만드세요).
2. 대시보드에 업로드 영역이 보여요. 웹사이트 폴더를 끌어다 놓기만 하세요(먼저 ZIP으로 압축한 뒤 ZIP 파일을 놓아도 돼요).
3. SiteDrop이 파일을 자동으로 감지하고 구조를 파악해서 사이트를 접속 가능한 URL로 배포해요.
4. 몇 초 안에 전 세계 누구에게나 공유할 수 있는 접속 링크가 생겨요.

4단계: 맞춤 도메인 추가하기(선택 사항)

사이트에는 yoursite.sitedrop.live 같은 무료 SiteDrop 서브도메인이 생기지만, 맞춤 도메인도 연결할 수 있어요.

• SiteDrop 대시보드에서 바로 도메인을 검색하고 구매하세요. GoDaddy나 Namecheap에 따로 갈 필요가 없어요.
• SiteDrop이 모든 DNS 설정을 자동으로 처리해요. A 레코드도, CNAME도, 전파를 기다릴 일도 없어요.
• 몇 분 안에 맞춤 도메인으로 사이트가 게시돼요.

이 방식이 이렇게 강력한 이유

Google AI Studio와 SiteDrop의 조합이 잘 통하는 이유는 각 도구가 한 가지를 아주 잘하기 때문이에요.

• Google AI Studio는 웹사이트를 만드는 데 놀라워요. Gemini를 무료로 쓸 수 있고, 간단한 설명만으로 실제 서비스 수준의 코드를 만들어 줘요.
• SiteDrop은 그 웹사이트를 호스팅하는 가장 빠른 방법이에요. Git도, 터미널도, 빌드 파이프라인도 없이 끌어다 놓기만 하면 바로 게시돼요.

GitHub를 배울 필요가 없어요. Vercel이나 Netlify를 설정할 필요도 없어요. CI/CD 파이프라인이나 DNS 레코드를 이해할 필요도 없어요. Google AI Studio에서 만들고, 파일을 저장하고, SiteDrop에 끌어다 놓기만 하면 돼요.

나중에 사이트 업데이트하기

내용을 바꿔야 하나요? 과정은 똑같이 간단해요.

1. Google AI Studio로 돌아가서 Gemini에게 코드를 업데이트해 달라고 요청하세요.
2. 업데이트된 HTML 파일을 저장하세요.
3. SiteDrop에 있는 기존 사이트에 새 파일을 끌어다 놓으세요. 이전 버전이 자동으로 교체돼요.

맞춤 도메인과 설정은 그대로 유지돼요. 업데이트는 바로 게시돼요.

요약

아이디어에서 게시된 URL까지 이렇게 쉬웠던 적은 없어요. Google AI Studio는 Gemini로 웹사이트를 만들고, SiteDrop은 번거로움 없이 호스팅을 맡아요. 전체 과정이 몇 시간이 아니라 몇 분이면 끝나고, 기술 지식은 전혀 필요 없어요.