AI 튜토리얼

Puter AI Builder로 웹사이트 제작 및 게시

Puter AI Builder를 로컬에 설치하고 실행하는 방법, 자연어 지시로 웹사이트와 애플리케이션을 만드는 방법, 채팅과 시각적 편집으로 결과물을 개선하는 방법, 완성된 프로젝트를 게시하는 방법을 알아보세요. 이 튜토리얼에서는 플랫폼에 통합된 서비스, 버전 기록, 지원 채널 및 라이선스도 다룹니다.

2026년 9월 22일약 7분 소요

AI Builder 로고

AI Builder는 코드를 작성하는 대신 자연어 지시를 사용해 웹사이트와 애플리케이션을 만드는 오픈 소스 도구입니다. 브라우저 기반 워크플로에서 AI 지원 제작, 실시간 미리 보기, 시각적 편집, 게시 기능을 결합합니다.

이 프로젝트는 Lovable, Replit, v0와 같은 도구의 오픈 소스 대안으로 소개됩니다. Apache License 2.0에 따라 배포되므로 프로젝트를 포크하고, 사용자 지정하며, 필요에 맞게 수정할 수 있습니다.

AI Builder의 기능

AI Builder는 아이디어를 실제로 작동하는 웹사이트나 애플리케이션으로 바꿉니다. 원하는 것을 설명한 다음 빌더에서 결과를 검토하고 변경을 요청한 뒤, 준비가 되면 프로젝트를 게시할 수 있습니다.

이 플랫폼은 Puter.js를 사용해 인증, 스토리지, 데이터베이스, AI, 네트워킹, 실시간 기능, 서버리스 함수, 호스팅 등 통합 애플리케이션 서비스를 제공합니다. README에 따르면 프로젝트에 추가 설정을 하지 않아도 이러한 서비스를 통합해 사용할 수 있습니다.

주요 기능

AI 지원 빌드: 코딩이나 기술 지식 없이 자연어로 웹사이트 또는 애플리케이션을 설명할 수 있습니다.
실시간 미리 보기: 프로젝트가 만들어지는 과정을 확인하고 변경하면서 직접 사용해 볼 수 있습니다.
채팅 기반 편집: 대화를 통해 AI에 프로젝트의 특정 부분을 업데이트하도록 요청할 수 있습니다.
시각적 편집: 미리 보기에서 요소를 선택하고 원하는 변경 사항을 AI에 정확히 전달할 수 있습니다.
통합 서비스: Puter.js를 통해 인증, 스토리지, 데이터베이스, AI, 네트워킹, 실시간 기능, 서버리스 함수 등의 기능을 사용할 수 있습니다.
게시: 공유할 준비가 되면 프로젝트를 공개 URL에 게시할 수 있습니다.
버전 기록: 저장된 버전을 다시 확인하고 실험 중 이전 상태로 복원할 수 있습니다.

AI Builder 로컬 설치

소스 저장소에서 프로젝트를 실행하려면 개발 환경에 Git, Node.js, npm이 설치되어 있는지 확인하세요. 그런 다음 저장소를 복제하고 디렉터리로 이동한 뒤 의존성을 설치하고 개발 서버를 시작합니다.

git clone https://github.com/HeyPuter/builder
cd builder
npm install
npm run dev

git clone 명령은 저장소를 다운로드합니다. npm install은 의존성을 설치하고, npm run dev는 로컬 개발 프로세스를 시작합니다. 개발 서버에 표시된 URL로 이동해 브라우저에서 빌더를 여세요.

라이브 데모 사용

먼저 프로젝트를 설치하고 싶지 않다면 공식 AI Builder 라이브 데모를 사용하세요. 제작, 편집, 미리 보기, 게시 워크플로를 가장 빠르게 살펴볼 수 있습니다.

첫 프로젝트 만들기

아이디어로 시작하기: 로컬 애플리케이션이나 라이브 데모를 열고 만들고 싶은 웹사이트 또는 애플리케이션을 자연어로 설명합니다.
생성된 프로젝트 검토하기: 라이브 미리 보기를 사용해 아이디어가 작동하는 인터페이스로 어떻게 구현되었는지 확인합니다.
채팅으로 변경 요청하기: 추가, 삭제 또는 조정할 내용을 설명합니다. AI Builder는 대화를 통해 이러한 업데이트를 처리하도록 설계되었습니다.
시각적 편집 사용하기: 미리 보기에서 특정 요소를 선택하고 해당 요소에 집중한 지시를 입력합니다.
반복하면서 테스트하기: 변경할 때마다 라이브 미리 보기를 확인해 프로젝트를 단계적으로 다듬습니다.
필요할 때 이전 버전 복원하기: 버전 기록을 사용해 저장된 상태를 다시 확인하고 실험 중 이전 버전을 복구합니다.
결과 게시하기: 프로젝트가 준비되면 공개 URL에 게시하고 다른 사람과 공유합니다.

프롬프트 예시

다음과 같은 간단한 설명으로 시작할 수 있습니다.

명확한 헤드라인, 짧은 기능 소개 섹션, 클릭 유도 버튼이 있는 소규모 소프트웨어 프로젝트의 랜딩 페이지를 만들어 주세요.

초기 결과가 나타나면 더 구체적인 지시를 이어서 입력하세요. 예를 들어 빌더에 섹션을 수정하거나, 미리 보기에서 선택한 요소를 변경하거나, 레이아웃을 다듬도록 요청할 수 있습니다. README에는 특정 프롬프트 형식이 정해져 있지 않으므로 자연어를 사용하고 실시간 결과를 바탕으로 반복해서 개선하세요.

AI Builder 워크플로를 위한 고급 팁

작게 나누어 반복 작업하기

모든 변경을 한 번에 요청하는 대신 라이브 미리 보기를 참고해 집중된 업데이트를 순서대로 적용하세요. 이렇게 하면 어떤 지시가 특정 결과를 만들었는지 파악하기 쉽고 프로젝트가 발전하는 과정을 평가하는 데 도움이 됩니다.

채팅과 시각적 편집 결합하기

더 넓은 범위의 프로젝트 변경에는 채팅을 사용하고, 더 정밀한 업데이트가 필요할 때는 미리 보기에서 개별 요소를 선택하세요. 이 조합을 사용하면 대화형 제어와 요소별 지시를 모두 활용할 수 있습니다.

실험 중 버전 기록 사용하기

다양한 아이디어를 시도하면서 버전을 저장하고 다시 확인하세요. 실험으로 프로젝트가 원치 않는 방향으로 진행되면 작업을 수동으로 다시 만드는 대신 이전 상태를 복원할 수 있습니다.

통합 서비스 활용하기

정적 인터페이스 이상의 기능이 필요한 프로젝트라면 Puter.js를 통해 제공되는 서비스를 고려해 보세요. 이 플랫폼은 인증, 스토리지, 데이터베이스, AI, 네트워킹, 실시간 기능, 서버리스 함수를 통합하므로 Puter 기반 환경 안에서 이러한 요구 사항을 처리할 수 있습니다.

준비가 되었을 때만 게시하기

공개 URL을 공유하기 전에 미리보기를 사용해 변경 사항을 테스트하세요. 프로젝트가 원하는 결과와 일치하면 게시하여 다른 사람들이 액세스할 수 있도록 하세요.

지원 및 커뮤니티

버그나 기능 요청이 있으면 저장소에서 이슈를 등록하세요. X에서 프로젝트를 팔로우하거나 Puter 개발자 리소스를 방문할 수도 있습니다.

보안 문제 및 악용 신고는 security@puter.com으로 보내세요. 유지 관리자에게 일반적으로 문의하려면 hi@puter.com으로 이메일을 보내세요.

라이선스

AI Builder는 별도로 명시된 경우를 제외하고 Apache License 2.0에 따라 라이선스가 부여됩니다. 포함된 타사 라이브러리와 글꼴에는 자체 라이선스가 적용될 수 있으므로 자세한 내용은 저장소의 타사 고지 사항을 확인하세요.

결론

AI Builder는 자연어로 작성한 아이디어를 웹사이트와 애플리케이션으로 전환할 수 있는 완전한 AI 지원 워크플로를 제공합니다. npm으로 로컬에 설치하거나 라이브 데모를 사용해 본 다음, AI 채팅, 시각적 편집, 실시간 미리보기, 버전 기록 및 게시 기능을 활용하여 초기 개념을 공유 가능한 프로젝트로 발전시키세요.