Bolt.diy를 통한 AI 챗봇 풀스택 무료 웹개발

Bolt.DIY란?

로컬에서 챗봇과 대화하듯이 웹 애플리케이션을 만들 수 있습니다.

 

개발에 대한 기본 지식이 없어도 누구든지 대화로 웹 사이트를 구축할 수 있습니다.

 

그것도 다양한 언어로 말이죠

 

오늘 진행할 AI 모델은 Gemini 2.0 Flash Thinking Experimental 01-21 현재 테스트 기간으로 free로 사용할 수 있습니다.

 

 

필수 설치 및 API 키 발급등 해야 할 일들이 조금 있는대 천천히 따라오다 보시면 쉽게 구축 할 수 있으실 겁니다.

 

[1. 설치]

1. Node JS
https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

2. Docker
https://www.docker.com/

Docker: Accelerated Container Application Development

도커

3. Bolt.diy 다운로드

https://github.com/stackblitz-labs/bolt.diy

GitHub - stackblitz-labs/bolt.diy: Prompt, run, edit, and deploy full-stack web applications using any LLM you want!

 

3번 ZIP 파일 까지 다운로드하셨다면 특정 드라이브 위치에 압축을 풀어놓은 신 후 도커를 처음 설치하신 분이면 재부팅을 하고 도커 엔진을 시작해 줍니다.

 

[bolt diy 공식 문서]
https://stackblitz-labs.github.io/bolt.diy/

bolt.diy Docs

위 공식 문서를 통하여 자세한 설치 방법이 나와 있습니다.

 

4. 구글 api key
https://aistudio.google.com/app/apikey?hl=ko

로그인 - Google 계정

 

구글 API KEY를 발급 받습니다.

 

복사한 API KEY는 노출되지 않게 잘 가지고 있기를 바랍니다.

 

 

저희는 도커를 설치하였기에 도커로 이미지 빌드 후 컨테이너 실행하여 bolt.diy를 띄울 것입니다.

 

[도커 이미지 빌드]

CMD를 관리자 권한으로 열어 해당 폴더로 이동합니다.

 

도커 이미지 빌드

npm run dockerbuild

 

도커 컨테이너 실행

docker compose --profile development up

 

웹 브라우저를 연 후 주소창에 localhost:5173으로 접속하면 아래와 같은 화면이 나타나게 됩니다.

 

혹시 도커 컨테이너 실행 시 아래와 같다면

 

bolt.diy-main 폴더에. env.local 파일을 만든 신 후 빈내용으로 저장합니다.

 

위를 해도 안된다면 docker-compose.yaml 열어 API KEY를 직접 입력해 줍니다.

 

파일 내용 중 GROQ_API_KEY 부분을 찾아서 GROQ_API_KEY = "API KEY 입력" 채우  신후 저장 한 후 다시 컨테이너를 실행해 봅니다.

 

도중에 git 에러가 나도 상관없습니다.

 

정상적으로 떴다면 여기에 구글을 셀렉트 하시고 위에서 무료로 사용할 수 있는 Gemini 2.0 flash-thinking-exp를 선택하고 

API키를 입력해 줍니다.

올바르게 연결이 되었다면 아래와 같이 나오게 됩니다. 여기까지 오면 사용 준비 완료었습니다.

 

[웹사이트 만들기]

질문 창에 여러분이 원하시는 질문 프롬프트를 작성합니다. 아래는 예시이며 예시 글에도 알 수 있듯이

어떤 기반의 언어로 만들 것인지 명시해 주고 질문을 연속해서 프롬프트 규칙에 잘 만들어야 유료로 사용할 때는 비용을 아낄 수 있습니다.

 

하지만 한 번에 너무 많은 기능을 요구하면 에러가 많이 나니 처음엔 기초 틀만 잡고 업 버전 하는 형식으로 하면 될 것 같습니다.

 

[예시]

react 기반의 모던한 랜딩페이지 웹사이트를 만들어줘. 
주제는 회사 소개페이지야 언어와 카피 문구들은 모두 한글로 작성해 주고 메뉴구성은 서브메뉴도 있어야 해 배경은 파란 하늘이었으면 좋겠어

 

아래와 같이 리액트 기반으로 코드를 작성해 줍니다.

 

메뉴를 클릭하면 서브메뉴도 구성이 되었네요

 

배경과 백그라운드 이미지가 없어서 밋밋해 보입니다. 추가로 요청해 봅시다.

 

요청을 하고 파일을 생성하는 중에 에러가 났습니다. 저 에러를 질문에 그대로 복사 붙여 넣기 하면 스스로 에러를 잡습니다.

 

아래와 같이 백그라운드가 변경되었으며 회사 이미지도 들어갔습니다.

 

이렇게 작성된 페이지는 다운로드를 할 수도 있으며 다운로드하여 직접 띄워볼 수도 있습니다.

 

처음 실행 시 

다운로드한 zip파일을 압축을 푸신 후 CMD로 해당 폴더로 이동해 줍니다.

 

Vite를 설치해 줍니다.

npm install vite --save-dev

 

[실행]

npm run dev

실행하면 위와 같이 localhost:5174로 들어가면 동일한 화면이 나오게 됩니다.

 

 

여러분의 상상력과 질문으로 다양하고 다이나믹한 웹사이트를 만들어보시길 바랍니다.

 

오늘도 보람찬 생존 ^.^