새로운 Google Gemini 2.0 + Bolt DIY: 미친 기능 (무료)!

Julian Goldie SEO 구독자 165,000명

요약

해당 영상은 Google Gemini 2.0의 최신 업데이트와 Bolt DIY를 활용해 무료로 다양한 AI 기반 웹사이트와 도구를 자동으로 생성하는 방법을 소개합니다. 프롬프트를 통한 맞춤형 랜딩 페이지와 다중 페이지 웹사이트 제작, API 전환 및 문제 해결 기능 등 다양한 사용 사례를 상세히 보여줍니다. 또한, GitHub와 Netlify를 이용한 배포 과정과 추가 제공되는 SEO, 마케팅 전략 자료에 대한 안내로 실무에 바로 적용 가능한 팁을 담고 있습니다. 영상은 사용자가 직접 실습하며 체험할 수 있도록 단계별 데모와 실제 사례 중심으로 진행됩니다.

주요 키워드

Google Gemini 2.0 Bolt DIY API 전환 프롬프트 랜딩 페이지 Vision 기능 GitHub Netlify SEO 전략 자동화

하이라이트

🚀 Gemini 2.0와 Bolt DIY를 활용해 무료로 강력한 AI 웹사이트 및 도구를 제작할 수 있음을 강조합니다.
💡 상세한 프롬프트를 통해 맞춤형 랜딩 페이지 및 다중 페이지 사이트를 단 한 번의 입력으로 자동 생성하는 방법을 보여줍니다.
🔄 Open Router 기능을 이용하여 다양한 AI API 간 전환이 가능하며, Gemini 2.0, Gemini Pro, 그리고 3.5 Sonic 등 여러 모델을 비교 설명합니다.
🛠️ Vision 기능을 활용해 코드 오류 및 디자인 문제를 실시간으로 감지, 해결하는 자동화 프로세스를 시연합니다.
🌐 GitHub와 Netlify를 통한 코드 배포 및 커스텀 도메인 설정 과정을 소개하여 실제 웹사이트 운영에 도움이 되는 정보를 제공합니다.
🎯 추가로 SEO 전략, AI 자동화 도구, 그리고 커뮤니티 지원 등 부가 혜택을 제공하며 실무 적용 사례를 들어 활용도를 높입니다.

용어 설명

Bolt DIY

웹사이트와 도구를 자동으로 생성할 수 있는 무료 플랫폼으로, 프롬프트 기반 제작 및 API 연동 기능을 제공합니다.

Google Gemini 2.0

구글의 최신 AI 모델로, 실시간 웹 개발과 다양한 AI 애플리케이션 제작에 활용되며 무료 및 유료 모델로 제공됩니다.

Open Router

여러 AI API(예: Gemini, 3.5 Sonic 등) 간 전환을 가능하게 하여 상황에 맞는 최적의 결과를 얻도록 지원하는 기능입니다.

ChatGPT 4.0

고급 프롬프트 생성 및 맞춤형 컨텐츠 제작에 사용되는 인공지능 도구로, Bolt DIY용 상세 명령어 생성을 위해 활용됩니다.

UTM

웹 트래픽과 캠페인 성과를 추적하기 위한 URL 매개변수로, 마케팅 자료에 포함되어 웹사이트 방문자 분석에 사용됩니다.

영상은 Gemini 2.0과 Bolt DIY의 무료 접근법을 소개하며 시작됩니다. Bolt DIY 설치 방법과 GitHub 페이지를 통한 초기 설정 안내를 포함합니다.

[00:00] Bolt DIY와 Gemini 2.0의 놀라운 기능을 소개하며, 두 도구 모두 무료로 사용할 수 있다고 설명합니다.

[00:08] Bolt DIY의 설치 방법과 GitHub 페이지를 통한 상세한 설치 가이드를 안내합니다.

[00:24] 다양한 API와 실험적 AI 모델들을 소개하며, 특히 Google Gemini 2.0의 무료 실험 버전을 활용하는 방법을 설명합니다.

프롬프트를 이용해 단 한 번의 입력으로 SEO 최적화된 랜딩 페이지를 만드는 과정을 상세히 보여줍니다. 색상, 브랜드 정보 등이 반영된 페이지 제작 과정을 설명합니다.

[01:16] 새로운 프롬프트 방식을 활용해 단 1분 만에 랜딩 페이지를 만드는 과정을 시연합니다.

[01:39] 자동 이미지 생성, 콘텐츠 커스터마이제이션, UTM 추적 기능이 포함된 랜딩 페이지의 특징을 설명합니다.

[01:55] SEO에 최적화된 랜딩 페이지 생성을 위한 상세 프롬프트 작성법과 Google Gemini Flash 활용 방법을 안내합니다.

[02:22] 웹사이트 구축 방법과 설정에 대해 상세히 설명하며, 맞춤형 접근으로 최상의 결과물을 얻을 수 있음을 강조합니다.

[02:31] 기존 웹사이트 디자인 에이전시와 비교하여, 시간과 비용 면에서 큰 절약이 가능함을 설명합니다.

[02:55] Bolt.new의 무료 크레딧 시스템과 이미지 생성 기능을 소개하고, Google Gemini 2.0 API를 활용한 로컬 구축 방법을 설명합니다.

[03:25] 5페이지로 구성된 AI 에이전트 웹사이트 구축을 위한 700단어 프롬프트의 복잡성과 중요성을 설명합니다.

다섯 페이지로 구성된 AI 에이전트 웹사이트 제작을 예시로 들며, 복잡한 프롬프트와 음성 명령을 통한 자동화 프로세스를 시연합니다. 각 페이지의 역할과 디자인 요소가 강조됩니다.

[04:04] Flash experimental과 Google Gemini flash 2.0의 장점으로 무료 사용, 빠른 응답속도, Vision 기능을 통한 문제해결 능력을 강조합니다.

[04:37] 개발 과정에서 발생할 수 있는 이미지 관련 문제와 해결 방법에 대해 설명합니다.

[04:49] 웹사이트 디자인과 구성 요소에 대한 설명. 사용자가 직접 이미지를 삽입해야 하며, 페이지 간 이동이 원활하게 작동함을 시연.

[05:07] OpenRouter를 통한 다양한 AI API 전환 기능 소개. Gemini와 Claude 3.5 Sonic 등 다양한 모델 간의 전환과 각각의 특징 설명.

Vision 기능을 활용한 코드 오류 수정과 디자인 문제 해결 과정을 설명합니다. Gemini 2.0 외에도 다른 AI 모델 간 전환 및 비교 방법을 소개합니다.

[05:39] 프롬프트 생성 방법론 설명. ChatGPT 4.0을 활용한 효과적인 프롬프트 작성 과정과 랜딩 페이지 자동화 방법 소개.

[06:14] 웹사이트 자동화의 효율성 강조. 단 몇 초 만에 완성되는 웹사이트 제작 과정과 다양한 API 활용 방법 설명.

[06:40] AI Profit Boardroom 도구 소개와 활용법. 프롬프트 자동화 도구의 실제 사용 예시와 Gemini Pro 실험 버전 적용 방법 설명.

[07:16] AI 도구의 무한한 가능성과 간단한 앱 개발에 대해 설명하면서, 할 일 목록 앱을 예시로 들어 기본적인 기능을 시연합니다.

[07:39] 온라인 프롬프트의 한계점을 설명하며, 맞춤형 결과를 얻기 위해서는 더 많은 상호작용이 필요함을 강조합니다.

[08:01] Bolt DIY의 장점을 설명하며, 무료로 로컬 호스팅이 가능하고 채팅 기록도 보관할 수 있다는 특징을 강조합니다.

[08:31] 음성 명령 기능을 소개하며, SEO 비용 계산기 웹사이트 제작을 예시로 들어 AI의 뛰어난 음성 인식 능력을 시연합니다.

[09:15] 도구, 앱, 웹사이트 제작 방법을 정리하고, 실험적인 기능을 통한 게임 개발 가능성을 소개합니다.

[09:43] 볼트 프롬프트를 사용해 자바스크립트와 HTML 캔버스 API로 자동 플레이되는 스네이크 게임을 구현했습니다.

[09:50] AI가 빠른 속도로 게임을 완벽하게 플레이하는 모습을 시연했습니다.

코드 다운로드, GitHub 연동, Netlify를 통한 호스팅과 커스텀 도메인 설정 방법을 안내합니다. 실제 배포 과정을 통해 웹사이트 운영에 필요한 실질적인 팁이 제공됩니다.

[10:07] AI 프로핏 보드룸을 위한 세일즈 랜딩 페이지 제작을 시작했습니다.

[10:35] 생성된 랜딩 페이지의 반응형 디자인과 모바일 최적화를 확인했습니다.

[11:10] 프로젝트 배포 과정을 설명하며 Netlify를 통한 호스팅 방법을 보여주었습니다.

[11:58] SEO 투자 계산기 등 실제 배포된 프로젝트들을 소개하고 테스트 도메인 호스팅 방법을 설명했습니다.

[12:09] Netlify 서브도메인으로 테스트가 가능하며, 커스텀 도메인 구매 후 쉽게 호스팅 설정이 가능함을 설명합니다.

추가적으로 제공되는 AI 자동화 도구, SEO 전략 세션, 및 커뮤니티 지원에 관한 정보를 전달합니다. 시청자에게 무료 체험과 1:1 상담 기회도 안내합니다.

[12:17] Google Gemini 2.0 플래시 씽킹 실험 버전이 최고의 API라고 평가하며, 폰트 개선 기능의 즉각적인 효과를 시연합니다.

[12:34] AI 프로핏 보드룸의 SB 섹션에서 제공되는 프롬프트, 커스텀 GPT, 설정 가이드 등 다양한 리소스를 소개합니다.

[12:51] AI 자동화 속성 과정과 주간 코칭, 커뮤니티 지원 등의 추가 혜택을 설명합니다.

[00:00] Gemini 2.0 업데이트와 함께하는 Bolt DIY가

[00:02] 정말 놀랍습니다. 게다가 두 가지 모두

[00:04] 무료로 사용할 수 있어요. 어떻게 하는지 보여드리죠.

[00:06] 기본적으로 여러분이 해야 할 것은

[00:08] Bolt DIY를 설치하는 건데

[00:08] 설치 방법을 모르시겠다면

[00:10] Bolt DIY GitHub 페이지의

[00:11] 설치 안내를 따라하시면 됩니다.

[00:14] 제가 어떻게 설정했는지

[00:15] 자세한 영상 노트가 필요하시다면

[00:17] 댓글과 설명란의 AI Profit Bard 링크를 확인하세요

[00:18] 여기서부터 설치를 완료하고

[00:20] 로컬에서 실행하면

[00:22] 페이지에 접속한 다음

[00:24] 이 드롭다운 목록을 클릭하고

[00:25] 라우터 열기를 선택하면

[00:27] 이렇게 다양한 API에 접근할 수 있고

[00:29] 원하는 API로 전환하면서

[00:31] AI를 활용해 원하는 것을 만들 수 있습니다

[00:32] 도구, 웹사이트, 앱 등 무엇이든 만들 수 있죠

[00:35] 정말 놀라운 기능입니다

[00:36] 또한 여기서 구글이 이번 주에 출시한

[00:39] 새로운 실험적 AI 모델들도

[00:42] 선택할 수 있습니다

[00:44] 예를 들어 Google Gemini 2.0 Flash를 보면

[00:45] 2월 5일에 만들어졌는데

[00:48] 이건 유료 모델이지만

[00:50] 무료 모델도 사용할 수 있습니다

[00:51] Google 2.0을 입력하면 2025년 2월에 출시된

[00:54] 이 모든 업데이트를 볼 수 있죠

[00:56] 예를 들어 Google Gemini Pro 2

[00:58] 실험 버전은 무료이며 Bolt에 연결할 수 있습니다

[01:01] 사용하고 싶다면

[01:03] 목록을 아래로 내려서

[01:05] Google Flash 2.0 실험 버전을 선택하면 됩니다

[01:08] 완전히 무료로 말이죠

[01:10] Bolt DIY도 무료이고 Google Gemini 2.0도 무료라

[01:12] 원하는 것을 마음껏 만들 수 있습니다

[01:14] 이제 제가 보여드릴 것은

[01:16] 정말 잘 작동하는

[01:17] 새로운 프롬프트 방식입니다

[01:20] 예시를 보여드리죠

[01:21] 단 1분 만에 만든

[01:23] 이 랜딩 페이지를 보시면

[01:25] 제가 만든 새로운 방식으로

[01:27] 여기 보시는 것처럼

[01:29] 완전히 새로운 랜딩 페이지를 만들었는데

[01:31] 제 퍼널과 직접 연결되어 있고

[01:32] UTM도 포함되어 있어서

[01:35] 페이지 방문자와 응답 제출을

[01:37] Bolt로 만든 웹사이트에서 추적할 수 있습니다

[01:39] 게다가

[01:40] 이미지도 생성해서

[01:42] 콘텐츠에 삽입했고

[01:44] 단 하나의 프롬프트로

[01:46] 제 에이전시와 제 정보에 맞게

[01:48] 모든 콘텐츠를 커스터마이즈했으며

[01:51] 아주 멋진 랜딩 페이지를 만들었죠

[01:52] 여러분도 이걸 따라하고 싶다면

[01:54] 정확히 어떻게 하는지

[01:55] 보여드리겠습니다

[01:57] 여기 보시는 것처럼

[01:58] 전환율이 높은 모델을 만들고

[02:00] SEO에 최적화된 랜딩 페이지를

[02:02] 제 SEO 에이전시를 위해 만드는데

[02:04] 브랜드 색상과

[02:05] 포함할 정보들

[02:07] 전체 레이아웃이 있는 상세한 프롬프트입니다

[02:08] 이 프롬프트를 선택하면 2.0 버전인데

[02:12] 이렇게 잘 작동하는

[02:13] Bolt용 프롬프트 만드는 법을 곧 보여드리겠지만

[02:15] Google 2.0 Gemini Flash를 사용해

[02:17] 웹사이트를 생성하려면 보내기를 누르세요

[02:19] 그러면 프로젝트 코딩을 시작하고

[02:21] 우리가 매우 구체적으로 지정했기 때문에

[02:22] 어떻게 구축하고 설정하는지 등에 대해 구체적으로 안내할 것이기 때문에

[02:24] 모든 구축 과정과 설정 방법 등을 안내할 거예요. 그리고 이것이

[02:27] 나에게 맞춤화되어 있기 때문에, 우리는

[02:29] 최상의 결과물을 얻을 수 있죠. 그리고 다시 말하지만

[02:31] 이건 무료예요. 웹사이트 디자인 에이전시에

[02:33] 얼마나 많은 비용을 지불해야 했는지 생각해보세요

[02:36] 그들은 몇 주가 걸렸을 거고

[02:38] 수많은 의견 조율이 필요했을 거예요.

[02:39] 수시간 동안 브리핑을 해야 했을 것이고

[02:41] 그들의 사무실에 앉아서 차를 마시면서 시간을 보내야 했겠죠

[02:43] 하지만 이제는 이런 식으로 웹사이트를

[02:45] 바로 사용할 수 있게 만들 수 있고

[02:47] 우리의 퍼널 페이지와 직접 연결됩니다.

[02:49] 모두 우리에게 맞춤화된 멋진

[02:51] 랜딩 페이지죠. 물론 이미지는 직접

[02:53] 삽입해야 하지만 정말 놀라운 기능이에요

[02:55] 또한 예를 들어 Bolt.new로 가서 같은 프롬프트를 사용할 수 있고

[02:57] 매월 무료 크레딧을 받을 수 있어요

[03:00] 실제로 저는 지금 무료 플랜을 사용 중이에요

[03:02] 보시다시피 프로 플랜이 아닌

[03:03] 무료 계정을 사용하고 있어요

[03:05] 프로 플랜이 아닌데도 bolt.new에서

[03:07] 같은 프롬프트를 사용할 수 있어요

[03:10] 보시는 것처럼 완전히 무료로요

[03:11] 심지어 이미지까지 만들어줄 거예요

[03:12] 하지만 Google Gemini 2.0 API를 사용해서

[03:14] 로컬에서 구축하고 싶다면, Bolt DIY를 사용하면 됩니다

[03:17] 정말 간단하고 쉽게 할 수 있어요

[03:19] 우리는 웹사이트를 만들 수 있고, 이건 단지 하나의

[03:21] 예시일 뿐이에요.

[03:22] 오늘 여러 가지 다른 예시들을

[03:23] 보여드릴 텐데요. 이제

[03:26] 두 번째 프롬프트로 넘어가보겠습니다

[03:27] 이번에는 더 복잡한 것을 만들어볼 거예요

[03:29] 5페이지로 구성된 AI 에이전트 웹사이트를

[03:31] 만들어볼 건데요, 보시다시피 프롬프트가 매우 상세하고

[03:33] 복잡합니다. 정확히 무엇을 해야 하는지

[03:35] 버튼 색상을 어떻게 사용할지 등을 보여주고 있어요

[03:38] 버튼의 색상 등을 사용하는 방법을 들어가볼 건데

[03:39] 이것은 제가 Bolt를 위해 직접 만든

[03:42] 가장 복잡한 프롬프트 중 하나일 거예요

[03:43] 이건 700단어로 된 프롬프트로 Bolt DIY에서

[03:46] 최상의 결과물을 얻기 위한 것입니다

[03:49] 왜냐하면 더 복잡한 지시사항을 제공할수록

[03:51] 첫 시도에서 성공할 가능성이

[03:53] 더 높아지기 때문이에요

[03:54] 잠시 후에 이러한 프롬프트를

[03:56] 어떻게 자동화하는지 보여드리겠습니다

[03:57] 페이지들을 구축하고 있는데

[03:59] 회사 소개, 사례 연구

[04:00] 홈, 서비스 섹션

[04:02] 그리고 연락처 페이지가 있습니다

[04:04] Flash experimental과 Google Gemini flash 2.0 experimental의

[04:06] 가장 좋은 점 중 하나는 무료라는 것뿐만 아니라

[04:09] 로컬에서 구축할 수 있고

[04:11] 응답 속도가 매우 빠르다는 거예요

[04:13] 게다가 뭔가 작동하지 않으면

[04:15] 미리보기를 스크린샷으로 찍어서

[04:17] Google Gemini flash의 Vision 기능으로

[04:19] 상황을 파악하고 수정할 수 있어요

[04:21] 만약 우리가 스크린샷 이미지를 첨부해서

[04:23] 문제 해결을 요청하면, 다시 구축해줄 거예요

[04:25] 자, 이렇게 수정이 되었네요

[04:28] Vision 옵션을 사용하면 정말 강력한데

[04:30] 스크린샷을 찍어서 다시 넣고

[04:32] 문제 해결을 요청하면 되죠

[04:34] 아, 이미지가 사용 불가능하다고 나오네요

[04:37] 이는 코드에 오류가 있거나

[04:39] 개발 서버가 제대로 실행되지 않았다는 뜻이에요

[04:40] 개발 서버가 실행 중인지

[04:42] 그리고 콘솔에 다른 오류가 없는지

[04:43] 확인해봐야겠네요

[04:45] 그러면 이런 깔끔하고 모던한

[04:47] 디자인의 페이지가 만들어질 거예요

[04:49] 여기서 보시는 것처럼

[04:50] 직접 이미지를 삽입하셔야 하고

[04:52] 로고는 자동 생성되지 않습니다.

[04:54] 페이지들을 클릭해보시면

[04:56] 모든 것이 잘 작동하는 걸 보실 수 있습니다.

[04:58] 연락처 페이지에도 우리 에이전시의

[05:00] 정보가 모두 포함되어 있죠.

[05:02] 단 한 번의 클릭으로 자동화했습니다.

[05:04] 예를 들어 사례 연구 섹션도

[05:05] 바로 사용할 수 있도록 되어있습니다.

[05:07] OpenRouter를 사용하면

[05:09] 다양한 API 간에 전환도 가능합니다.

[05:11] 만약 Gemini로 기본 작업을 하고

[05:13] 더 발전된 작업을 위해

[05:15] Claude 3.5 Sonic과 같은

[05:16] 더 강력한 모델을 사용하고 싶다면

[05:19] 여기서 선택할 수 있습니다.

[05:22] 동일한 프롬프트로

[05:23] Claude와 Gemini의 결과를 비교해볼 수 있죠.

[05:27] 참고로 Gemini 3.5 Sonic은 유료 API이므로

[05:30] 더 나은 결과를 얻을 수 있지만

[05:32] 무료는 아닙니다.

[05:35] 어느 쪽이든

[05:36] 로컬에서 구축하고 미리보기가

[05:38] 매우 간단합니다.

[05:39] 혹시 이런 프롬프트와

[05:41] 방법을 어떻게 만들었는지 궁금하시다면,

[05:43] 제가 실제로 한 것은

[05:45] ChatGPT 4.0에 가서

[05:47] '완벽한 랜딩 페이지를 만드는

[05:49] 프롬프트를 만들어줘, 여기 브랜드 컬러가 있고

[05:50] 내 개인 정보를 포함해줘' 등을 요청했습니다.

[05:52] 그러면 보시는 것처럼

[05:54] 모든 세부 사항이 포함된

[05:55] 상세한 프롬프트를 제공받았죠.

[05:57] UTM 트래픽 유도도 요청했더니

[05:59] 보시는 것처럼 좋은 프롬프트를 만들어줬고

[06:01] AI 에이전트 웹사이트도 마찬가지로

[06:03] 매우 간단하게 만들 수 있었습니다.

[06:05] Bolt DIY에서 Claude 3.5 Sonic을 사용하면

[06:09] 출력되는 페이지들이

[06:10] 약간 더 나아 보이지만

[06:12] 어느 쪽을 사용해도 좋은 결과를 얻을 수 있고

[06:14] 이 웹사이트는 말 그대로

[06:16] 몇 초 만에 단 한 번의 클릭으로 자동화되었죠.

[06:19] 정말 놀라운 일입니다.

[06:20] 오늘 더 많은 것을 만들어볼 텐데

[06:22] 지금은 프롬프트 생성 방법,

[06:23] Bolt DIY 사용법,

[06:25] 활용 사례들,

[06:27] API 연결 및 전환 방법을

[06:29] 보여드리는 예시였습니다.

[06:31] Google Gemini의 실험적 모델이나

[06:34] Flash 2.0 실험 모델을 사용한다면

[06:36] 정말 강력한 기능을

[06:38] 경험하실 수 있습니다.

[06:40] 모든 프롬프트를 자동화할 수 있는

[06:42] 무료 도구가 필요하시다면

[06:43] AI Profit Boardroom에 포함시켜 드리겠습니다.

[06:45] 시작하기를 클릭하면

[06:48] 어떤 도구를 프롬프트할지 물어보는데

[06:50] Bolt를 입력하면

[06:52] 세부 사항을 요청할 겁니다.

[06:54] 'AI 에이전시 고객 유치, 톤=재미있게,

[06:58] 브랜드 컬러는 이것'이라고 입력하면

[07:00] 보시는 것처럼 프롬프트를 생성하고

[07:02] 빠르게 프롬프트를 만들어서

[07:04] Bolt에 다시 넣을 수 있습니다.

[07:06] 여기 Bolt DIY로 가서

[07:08] Gemini Pro 실험 버전을 선택하면

[07:10] 코딩이 시작됩니다.

[07:11] 자체 앱과 도구 제작 방법도

[07:13] 보여드릴 텐데

[07:14] 가능성이 정말 무궁무진합니다.

[07:16] 가능성이 정말 무한하고 놀랍습니다.

[07:18] 이제 더 단순화하고 싶다면

[07:19] 예를 들어 이렇게 할 수 있습니다.

[07:20] 할 일 목록 앱을 만들고 싶다고 해보죠.

[07:22] 앱을 만들고 싶을 때

[07:23] 온라인에서 찾은 프롬프트를 사용할 수 있고

[07:25] 대부분 잘 작동하긴 합니다.

[07:27] 다만 한 가지 문제는

[07:28] 원하는 만큼 맞춤화된 결과를

[07:30] 얻기 어렵다는 점이죠.

[07:32] 채팅에서 더 많은 대화가 필요합니다.

[07:34] 예를 들어 우리가 받은

[07:36] 할 일 목록을 보면 당연히

[07:37] 제 브랜드 색상도 없고 콘텐츠도 없죠.

[07:39] 이런 것들은 보통 사전 프롬프트에서 지정하는데

[07:41] 그래서 채팅을 통해 실행하고 싶은 겁니다.

[07:43] 예를 들어

[07:44] Gemini 2.0으로 SEO 사이트를 만들어보죠.

[07:48] 추가 버튼을 누르면 작동이 시작됩니다.

[07:52] 그리고 여기서

[07:53] 삭제나 완료를 클릭할 수 있습니다.

[07:55] 완료를 클릭하면 처리되고

[07:56] 실행 취소하고 삭제를 클릭하면

[07:58] 할 일 목록에서 제거되는 걸 볼 수 있죠.

[08:01] 정말 간단하고 사용하기 쉽고 강력한

[08:02] Bolt DIY입니다. 그리고 이건 유료 도구가 아닙니다.

[08:04] 예를 들어

[08:06] Webflow나 Cursor, Windsurf 같은 도구들은

[08:11] 결국 프리미엄 요금제를 써야 하지만

[08:12] Bolt DIY는 로컬에서 호스팅하고

[08:16] 채팅도 로컬에서 접근할 수 있으며

[08:18] 모든 채팅 기록도

[08:19] 여기서 볼 수 있습니다.

[08:21] 2024년 11월까지 거슬러 올라가는

[08:23] 기록이 있죠.

[08:26] 시간이 지나면서 쌓인 모든 기록을

[08:28] 언제든 돌아와서 이전 프로젝트를 확인할 수 있습니다.

[08:31] 정말 간단하고, 음성 채팅에서도

[08:33] 다양한 명령을 내릴 수 있습니다.

[08:35] 예를 들어 이렇게 말해보죠.

[08:37] 줄리안 골디 SEO 에이전시에 최적화된

[08:39] SEO 비용 계산기 웹사이트를 만들어줘.

[08:44] 우리가 하는 일과 판매하는 것에 대해 설명하고

[08:45] 이전 사례 연구에 대한 정보도 포함해줘

[08:48] 엔터를 누르면

[08:50] 기본적으로 우리가 준 지시사항을 받아들여

[08:52] 웹사이트를 만들기 시작합니다.

[08:54] 음성 명령으로도 가능하고

[08:56] AI가 여러분이 말하는 것을 거의 완벽하게 이해합니다.

[08:58] AI가 여러분의 말을

[08:59] 솔직히 알렉사보다 더 잘 이해하죠.

[09:01] 저처럼 영국 억양이 있어도

[09:03] 잘 알아듣고

[09:05] 보시다시피 웹사이트를 코딩할 겁니다.

[09:07] 터미널 에러가 좀 많이 보이지만

[09:08] 이건 코딩 과정의 일부입니다.

[09:10] 그리고 터미널 에러 수정을 클릭하면

[09:12] 계속해서 오류를 수정하고 설정을 진행합니다.

[09:15] 지금까지 도구 만드는 법을 보여드렸고

[09:17] 앱과 웹사이트 만드는 법도 보여드렸습니다.

[09:18] 잠시 후에 호스팅하는 방법도

[09:20] 보여드리겠지만, 예를 들어

[09:21] 비디오 게임을 만들고 싶다면

[09:23] 여기에 연결해서 실험해볼 수 있습니다.

[09:25] 실험적인 기능을 테스트해보죠.

[09:27] 비디오 게임도 만들 수 있고

[09:28] 여기에 연결해서

[09:30] 실험적인 플래시 씽킹을 테스트해보겠습니다.

[09:32] 이건 출력을 얻기 위한

[09:34] 추론 모델에 가깝습니다.

[09:36] 코드 생성은 좀 더 느릴 수 있지만

[09:38] 더 나은 결과를 얻을 수 있다면 괜찮죠.

[09:40] 그리고 여기서는

[09:43] 볼트 프롬프트로 자동 플레이되는 스네이크 게임을

[09:44] 스스로 플레이하는 스네이크 게임을

[09:46] 자바스크립트와 HTML 캔버스 API를 사용해서 만들었는데

[09:48] 보시다시피 게임이

[09:50] 빠른 모드에서 완벽하게 실행되고 있습니다

[09:53] 속도가 얼마나 빨라졌는지 보세요

[09:55] 제가 직접 하는 게 아닙니다. 저는

[09:57] 스네이크 게임을 그렇게 잘 못하거든요. 하지만

[09:59] 완벽하게 플레이되는 걸 볼 수 있죠

[10:01] 이렇게 자신만의

[10:02] 게임도 매우 빠르게

[10:03] 만들 수 있으며, 정말 놀라운

[10:05] 결과물을 얻을 수 있습니다. 또한

[10:07] 멋진 세일즈 페이지도 만들 수 있어요

[10:08] 예를 들어, 제 AI 프로핏 보드룸의 카피를

[10:12] 가져와서 작업해보겠습니다

[10:14] 채팅창에 들어가서 이렇게 입력해볼게요

[10:16] AI 프로핏 보드룸을 위한 프롬프트 생성

[10:20] 그러면 랜딩 페이지의

[10:22] 콘텐츠가 여기에 생성됩니다

[10:23] 이 프롬프트를 복사해서 볼트로 돌아가

[10:25] 웹사이트 생성을 요청할 건데

[10:27] 잠시 후에 생성된 파일을

[10:29] 호스팅하는 방법도 보여드리겠습니다

[10:31] 실제로 이 웹사이트를

[10:32] 커스텀 도메인에 올리는 방법도요

[10:35] 예를 들어 이 랜딩 페이지처럼

[10:36] 이것도 볼트로 만든 건데

[10:38] 정말 잘 나왔죠

[10:40] 보세요, 랜딩 페이지가 완성됐습니다

[10:43] 폼은 개선이 필요하지만

[10:44] 랜딩 페이지는 거의 다 됐다고 볼 수 있죠

[10:46] 이미지만 좀 더 추가하면 될 것 같아요

[10:48] 몇 가지 더 할 수 있는 게 있는데

[10:49] 예를 들어 이걸 클릭해서

[10:51] 반응형 모드로 테스트할 수 있고

[10:52] 팝업으로 열어볼 수도 있어요

[10:54] 이렇게 하면 모바일에서

[10:56] 웹사이트가 어떻게 보이는지 확인할 수 있죠

[10:58] 모바일에서도 정말 잘 보입니다

[11:01] 이걸 직접 디자인하려면 몇 시간이나

[11:02] 걸릴 거예요

[11:04] 반응형 디자인 작업은

[11:06] 정말 악몽 같거든요

[11:08] 솔직히 말씀드리면

[11:10] 자, 이제 코드 섹션으로 돌아가서

[11:12] 코드 다운로드를 클릭하면

[11:14] 프로젝트 폴더를 받을 수 있습니다

[11:16] 이제 netlify로 가서

[11:19] 기존 프로젝트 가져오기를 선택하고

[11:21] 방금 볼트 DIY에서 다운로드한

[11:23] 폴더를 거기에 드래그앤드롭 하면 됩니다

[11:26] 업로드되는 동안 기다리세요

[11:28] 시간이 좀 걸릴 수 있는데

[11:29] 프로젝트 크기에 따라 다릅니다

[11:31] 준비가 됐네요. 이걸 리포지토리에

[11:33] 퍼블리시하고 리포지토리를

[11:35] 깃허브와 연결할 수도 있어요

[11:36] 볼트 DIY에서 깃허브로 푸시 버튼을 클릭해서

[11:39] 프로젝트를 깃허브에 푸시하고

[11:41] 리포지토리와 연결하면 되는데요

[11:43] 사이트가 배포되면

[11:45] 새 도메인 구매를 클릭해서

[11:48] 원하는 커스텀 도메인을

[11:50] 입력하면 됩니다

[11:51] 추천 목록이 나오고

[11:53] 원하는 걸 선택하면 되죠

[11:55] 첫해 비용과

[11:56] 갱신 비용도 확인할 수 있습니다

[11:58] 추가로 여기 배포된

[11:59] 여러 웹사이트들도 보실 수 있는데

[12:01] 예를 들어 이 SEO 투자

[12:03] 계산기 웹사이트를 열어보면

[12:05] 바로 사용할 수 있고

[12:06] 테스트 도메인에서 호스팅됩니다

[12:09] Netlify의 서브도메인으로

[12:11] 테스트해볼 수 있고,

[12:12] 커스텀 도메인을 구매하면

[12:14] 쉽고 간단하게 호스팅을

[12:15] 설정할 수 있습니다.

[12:17] 지금까지 경험해본 바로는

[12:19] Google Gemini 2.0 플래시 씽킹 실험 버전이

[12:22] 이러한 도구를 만드는데 가장 좋은 API인 것 같습니다.

[12:25] 그리고 폰트가 마음에 들지 않는다면,

[12:26] 이전에 보셨듯이 폰트가

[12:28] 그리 좋지 않았는데,

[12:30] 폰트 개선을 요청하니 바로 적용되어

[12:32] 훨씬 더 보기 좋아졌습니다.

[12:34] 시청해주셔서 감사합니다.

[12:36] 오늘 사용한 모든 프롬프트는

[12:38] AI 프로핏 보드룸의 SB 섹션에

[12:40] 업로드할 예정이며, 거기서

[12:42] Bolt 프롬프트를 만들기 위한 커스텀 GPT와

[12:44] 로컬 설정 방법, 그리고

[12:47] 웹사이트 제작을 위한 다양한

[12:49] 유용한 프롬프트들을 받으실 수 있습니다.

[12:51] 또한 빠른 AI 자동화 속성

[12:53] 과정도 포함되어 있어서

[12:55] 수백 시간을 절약할 수 있고,

[12:57] 주간 코칭 과정과 함께

[12:59] 도움을 요청할 수 있는 멋진 커뮤니티도 있습니다.

[13:02] 링크는

[13:03] 댓글과 설명란에 있으니

[13:04] 무료 1:1 SEO 전략 세션을

[13:06] 통해 우리가 어떻게 웹사이트를 0에서

[13:10] 이번 달 14만 5천 방문자로 늘리고

[13:12] 수십만 달러의

[13:13] 자동 판매를 달성했는지

[13:15] 확인해보세요. 링크는

[13:16] 댓글과 설명란에 있습니다.

[13:18] 무료 SEO 지배 계획을 받으실 수 있으며,

[13:19] 맞춤형 링크 빌딩 계획으로

[13:21] 더 많은 리드와 판매,

[13:23] 수익을 창출할 수 있습니다.

[13:25] 링크 빌딩의 비밀을 발견하고

[13:26] 1:1로 질문에 답변받으며,

[13:28] 귀하의 웹사이트에 가장 적합한

[13:29] 링크 빌딩 전략과 경쟁사를

[13:31] 앞서는 방법, 그리고 우리의

[13:33] 성공 사례를 바탕으로 한

[13:35] 트래픽 전환 방법을 배우실 수 있습니다.

[13:36] 시청해주셔서 감사합니다. 안녕히 계세요.