본문 바로가기
AI

코딩 몰라도 웹사이트 만들 수 있다?! 무료 AI 코딩 툴 Bolt.DIY

by 프로랑 2025. 4. 4.
728x90
반응형

“코딩을 못하는데 웹사이트를 만들 수 있을까?”
“프로그래밍 배우기엔 너무 어렵고 시간이 없어요…”
“디자인도 개발도 외주 주려면 너무 비싸요.”

이런 고민, 해보신 적 있나요?
2026년 지금은 AI 덕분에 '코딩을 몰라도 웹사이트를 만들 수 있는 시대'가 되었습니다.
그리고 오늘 소개해 드릴 툴은 완전 무료로 사용할 수 있는 AI 코딩 툴, Bolt.DIY입니다.




✅ AI 코딩 툴이란? 쉽게 말하면 ‘개발 도우미’

AI 코딩 툴이란, **사람이 말하는 언어(자연어)**를 이해해서 코드로 바꿔주는 도구입니다.

예를 들어 이런 식이에요:

  • ❌ 내가 직접 코딩:
function hello() {
  console.log("안녕하세요");
}
 
  • ✅ AI에게 요청:

“Hello 출력하는 자바스크립트 코드 만들어줘”
→ AI가 자동으로 위 코드를 만들어 줍니다!

 

즉, 복잡한 문법을 몰라도
“하고 싶은 걸 말하기만 하면 AI가 알아서 만들어 주는 시대가 된 거예요.


🤖 대표적인 AI 코딩 툴들

툴 이름 설명 무료 여부
Cursor AI 채팅하듯이 코드 요청 부분 무료
Lovable 디자인 중심 툴 유료
Bolt 강력하지만 유료 크레딧 필요 ❌ 무료 아님
Bolt.DIY 오픈소스, 무료 설치 가능 ✅ 완전 무료

이 중에서 Bolt.DIY는 정말 특별합니다.
기존 유료 툴을 누구나 설치해서 무료로 사용할 수 있도록 만든 버전이거든요.


🔧 Bolt.DIY의 핵심 기능

🧠 1. 말로 코드 만들기

프롬프트만 입력하면 AI가 자동으로 코드를 생성합니다.
예: “온라인 마케팅 랜딩페이지 만들어줘”

🛠 2. 코드 자동 수정 기능

코드에 오류가 생겨도 AI가 자동으로 감지해서 수정해 줍니다.

🌐 3. 실시간 미리보기

웹사이트나 게임이 어떻게 보일지 바로 확인할 수 있어요.

🤖 4. 다양한 AI 모델 연동 가능

구글 Gemini, OpenAI GPT, Anthropic Claude 등 다양한 AI 연결 가능!


💸 유료 API? 무료로 해결하는 법 (구글 Gemini 활용)

대부분 AI 코딩 툴은 API 키를 통해 AI 모델과 연결해야 작동합니다.
그리고 이 API 키는 보통 유료입니다.

하지만!
구글은 실험적으로 ‘Gemini 2.5’ 모델을 무료로 제공하고 있어요.
우리는 이걸 이용해서 Bolt.DIY를 완전히 무료로 사용할 수 있습니다.

👉 API 키 받는 방법

  1. Google AI Studio 접속
  2. Gemini 2.5 Flash Thinking 선택
  3. API 키 생성
  4. Bolt.DIY에 복사해서 붙여넣기

💡 초록색 체크 마크가 뜨면 연결 성공!


728x90

🔍 실전 예제 ① : 지렁이 게임 만들기

프롬프트에 이렇게 입력합니다:

“스스로 움직이는 지렁이 게임 만들어줘”

 

그러면 Bolt.DIY가 아래 작업을 자동으로 진행합니다:

  1. 코드를 작성
  2. 코드가 중앙 패널에 자동 출력
  3. 좌측에서는 AI 작업 진행 현황 확인
  4. 에러 발생 시 자동 수정 요청 → 수정 후 재실행

결과: 정말로 작동하는 지렁이 게임이 완성됩니다!


🖥 실전 예제 ② : 랜딩페이지 웹사이트 만들기

이번에는 이렇게 입력해 볼게요:

“리액트를 베이스로 한 온라인 마케팅 랜딩페이지 만들어줘. 언어는 한글로.”

 

AI가 다음과 같은 작업을 자동으로 진행합니다:

  • 섹션별 구성 (히어로, 서비스 소개, 후기 등)
  • 메뉴 클릭 시 부드럽게 이동하는 원페이지 방식
  • 반응형 웹 구성

💬 추가 프롬프트 팁

웹디자인이 밋밋하다면 이렇게 입력해보세요:

“웹플로우, 피그마 스타일로 모던하고 세련된 애니메이션 추가해줘”

 

→ CSS, 애니메이션, 호버 효과 등 고급 기능까지 자동 적용!


🧩 디자인 완성도 높이는 팁

  • 이미지: 기본 사이트는 이미지가 없을 수 있어요. 회사 로고나 배경 이미지를 추가하면 더 깔끔해집니다.
  • 카피 문구: 기본 문구는 예시이므로, 나의 브랜드에 맞게 수정!
  • 푸터 추가: 하단에 회사 정보, SNS 링크 등 추가하면 완성도 ↑

 

마무리하며

AI 코딩 시대, 이제 프로그래밍은 더 이상 전문가의 영역이 아닙니다.
아이디어만 있다면, 누구나 만들 수 있는 시대가 된 거죠.

“코딩을 못 해도 괜찮아요.
프롬프트만 잘 쓰면 원하는 웹사이트는 AI가 만들어줍니다.”

 

오늘 소개해 드린 Bolt.DIY
여러분의 첫 번째 웹 프로젝트를 직접 만들어보세요!

 

 

 

출처: https://www.youtube.com/watch?v=aFmUtQvAVIc

728x90