15분 안에 AI로
실제 앱을 만드는 방법:
지난주에
http://Bolt.new
에서 이를 테스트했습니다.
제가 만든 결과물은 다음과 같습니다:
↳ 프리랜서를 위한 인보이스 (Invoicing) 대시보드
↳ 상태 필터가 포함된 결제 추적기 (Payment tracker)
↳ 모든 인보이스에 대한 PDF 내보내기
↳ 검색 기능이 포함된 클라이언트 관리
↳ 다크 모드 (Dark mode) 토글
이 모든 것이 단 하나의 프롬프트 (Prompt)로 이루어졌습니다. 코드는 전혀 쓰지 않았습니다.
동일하게 수행하는 방법은 다음과 같습니다:
1단계: 앱을 명확하게 설명하세요.
bolt.new로 이동하세요. 프롬프트 박스를 엽니다.
원하는 내용을 평이한 영어로 정확하게 입력하세요.
앱의 이름을 정하고, 모든 기능을 나열하세요.
디자인 스타일을 선택하세요.
저는 다음과 같이 입력했습니다: "프리랜서를 위한 대시보드, 결제 추적기, PDF 내보내기, 클라이언트 관리 및 다크 모드가 포함된 인보이스 앱을 구축해줘."
'Enhance'를 클릭하여 프롬프트를 정교하게 만드세요.
'Build now'를 누르세요.
2단계: Bolt가 모든 것을 구축하는 과정을 지켜보세요.
즉시 코드 작성을 시작합니다.
프로젝트 구조를 생성합니다.
패키지 (Packages)를 설치하고 모든 것을 구성합니다.
라이브 프리뷰 (Live preview)가 실시간으로 업데이트됩니다.
저는 터미널 (Terminal)을 건드리지 않았습니다.
로컬 (Locally)에 아무것도 설치하지 않았습니다.
그저 앱이 조립되는 것을 지켜보기만 했습니다.
먼저 전체 빌드 (Build)가 완료되도록 두세요.
빌드 중간에 중단하면 오류가 발생하고 토큰 (Tokens)을 낭비하게 됩니다.
3단계: 평이한 영어로 다듬으세요.
저는 다음과 같이 후속 변경 사항을 입력했습니다:
"사이드바를 접을 수 있게 만들어줘."
"클라이언트 페이지에 검색창을 추가해줘."
"포인트 컬러를 파란색으로 바꿔줘."
Bolt가 플랜 모드 (Plan Mode)를 활성화했습니다.
각 요청을 단계별로 나누었습니다.
그것들을 하나씩 실행했습니다.
초록색 체크 표시가 각 단계를 확인해 주었습니다.
저는 Bolt가 수정하지 못하도록 인보이스 템플릿 파일을 잠갔습니다.
단순한 변경 사항들은 하나의 메시지로 묶어서 처리하세요.
메시지마다 토큰이 소모됩니다.
하나로 결합된 프롬프트가 더 저렴합니다.
4단계: 클릭 한 번으로 게시하세요.
오른쪽 상단에 있는 'Publish'를 클릭했습니다.
앱은 무료 bolt.host URL과 함께 즉시 라이브 상태가 되었습니다.
저는 'Public'으로 설정했습니다.
커스텀 도메인 (Custom domain)은 유료 플랜에서 연결 가능합니다.
조기에 게시하고 라이브 URL을 테스트했습니다.
프리뷰 패널에서는 보이지 않던 레이아웃 버그를 하나 발견했습니다. 수정했습니다.
클릭 한 번으로 다시 게시했습니다.
총 소요 시간: 14분.
제가 작성한 코드 라인 수: 0줄.
이를 위한 개발자 비용: $1,500 이상.
누구나 따라 할 수 있는 4단계입니다.
설명하기 (Describe). 구축하기 (Build). 개선하기 (Refine). 출시하기 (Ship).
직접 시도해 보세요
Muhammad Ayan 팔로우하기
다른 사람들에게 도움이 되도록 재게시(Repost)해 주세요.
지금 바로 시도하기: