Bolt.new 핵심 요약
- 큰 방향과 원하는 기능 몇 개로 시작하세요 — "작업 세션 기록, 태스크 추가, 세션 저장". 스펙 문서는 필요 없습니다. 1분쯤 지나면 돌아가는 앱이 생깁니다.
- 짧은 프롬프트로 한 번에 하나씩: 종료 버튼, 애널리틱스 탭, 파이 차트, 다크 모드. 빗나가면 다르게 표현해 다시 보내세요 — 두 번째엔 보통 맞습니다.
- 변경은 서로 부딪힐 수 있습니다. 버튼이 죽으면 버그를 평범한 말로 설명하거나 마지막 정상 버전으로 되돌려 달라고 하세요. 대부분 한 번의 프롬프트로 해결됩니다.
- Google 로그인에는 Firebase가 필요합니다. 프로젝트 생성, Google 공급자 사용 설정, firebaseConfig를 Bolt에 붙여넣기, Firebase 설정에서 배포 도메인 승인까지.
Building an App from Scratch with Bolt.new
원본 영상:Brock Mesarich · AI for Non Techies16:02
스크린샷은 원본 영상에서 가져왔으며 타임스탬프 출처 링크를 함께 표시합니다. 본문은 전체 자막을 기반으로 우리가 직접 작성한 해설로, 사실 관계는 영상과 일치합니다.
이 튜토리얼은 글로 배우고 싶은 독자를 위한 독립적인 그림 해설서입니다. 창작자를 응원하려면 위에 링크된 AI for Non Techies 채널의 원본 영상을 시청해 주세요.
Bolt.new로 앱 만들기, 단계별 가이드
- 1
아이디어를 한 줄 프롬프트로
bolt.new를 열고 큰 방향과 원하는 기능 몇 개를 적습니다. 풀 스펙이 아니라도 됩니다. 예시: "작업 세션을 기록하는 앱을 만들어줘. FocusFlow라고 부르자. 작업 블록을 추적하고, 세션 중 완료한 태스크를 추가하고, 세션을 저장하는 게 목적이야." 처음부터 너무 자세하면 첫 빌드가 느려집니다.
bolt.new에 입력한 첫 FocusFlow 프롬프트.0:30 지점 보기 - 2
첫 버전이 나오면 스크린샷으로 다듬기
1분쯤 지나면 Bolt가 코드를 쓰고 실행까지 마친 상태: 타이머, 태스크 폼, 통계 카드. 마음에 안 드는 부분을 스크린샷으로 첨부하고 "이 부분을 좀 더 단순하게 만들어줘"라고 말하세요. 픽셀 위치를 말로 설명하는 것보다 시각 피드백이 훨씬 잘 먹힙니다.
첫 미리보기와 스크린샷을 첨부한 개선 프롬프트.1:40 지점 보기 - 3
태스크에 카테고리 추가
구체적인 예시와 함께 카테고리 열을 요청하세요 — admin, 콘텐츠 제작, 재무, 리서치, 앱 빌딩. Bolt가 이를 버튼 그리드로 만들고 각 태스크에 색상 태그를 붙입니다. 나중에 애널리틱스가 의미 있어지는 근거입니다.
여덟 개 카테고리 버튼 그리드와 색상 태그.2:30 지점 보기 - 4
세션 종료 버튼 요청하기
타이머는 도는데 저장은 안 되죠. "세션을 끝낼 수 있는 기능을 추가해줘"라고 프롬프트하세요. Bolt가 SessionControls, SessionSummary 컴포넌트를 만들어 앱에 연결하고, 세션을 끝낼 때 소요 시간·완료 태스크·최다 카테고리 요약을 보여줍니다.
Bolt가 세션 종료 컴포넌트를 계획·생성합니다.3:00 지점 보기 - 5
요약을 대시보드에 남기기
기본값으로는 세션 종료 시 별도 페이지로 이동합니다. 이 흐름이 싫으면 솔직히 말하세요. "세션이 끝나면 새 페이지로 가는 게 싫어. 메인 대시보드에 그대로 보여줘." 요약 카드가 메인 화면에 인라인으로 나타납니다.
Session Complete 카드가 메인 대시보드로 돌아왔습니다.4:00 지점 보기 - 6
애널리틱스 탭 추가
날짜별 전체 태스크와 하루 합계를 보여주는 Session Analytics 탭을 요청하세요. Bolt가 Current Session 옆에 추가하고, 끝낸 세션을 펼치면 태스크 히스토리가 보입니다. 카테고리 태그가 여기서 빛을 발합니다.
Current Session 옆에 생긴 Analytics 탭.4:30 지점 보기 - 7
태스크별 시간 기록
분석에는 입력이 필요합니다. 태스크를 기본 완료로 표시하고 태스크별 소요 시간 입력을 추가하세요. Bolt가 시간·분 입력(나중엔 최대 1시간의 드래그 슬라이더로 교체)을 더하고 그 수치를 애널리틱스로 흘려보냅니다.
소요 시간 입력이 태스크 폼에 추가됐습니다.6:00 지점 보기 - 8
파이 차트로 시간 시각화
프롬프트: "모든 작업에 시간이 얼마나 들었는지 파이 차트로 보여주는 애널리틱스를 추가하자." 첫 차트는 터무니없이 큽니다 — "조금 smaller 하게"가 두 번째 시도에서 해결. 이런 자잘한 UI 수정이야말로 Bolt의 빠른 반복이 빛나는 지점입니다.
크기 수정 후의 일별 파이 차트.6:25 지점 보기 - 9
쉬운 말로 회귀 버그 고치기
빌드 중간에는 변경이 충돌합니다. 버튼이 죽거나 재미로 넣은 커서 트레일 효과가 레이아웃을 망치죠. 버그를 평범하게 설명하고, 싫어진 건 지워 달라고 하거나 Undo를 쓰세요. Bolt 자체의 수정 목록 — 이번엔 6개 항목 — 이 보통 한 번에 다 끝냅니다.
6개 항목 수정 목록: 타이머 복구, 글로우 효과 제거.9:30 지점 보기 - 10
Google 로그인 추가
진짜 제품이 되려면 계정이 필요합니다. "Google로 로그인하는 기능을 추가해줘"라고 프롬프트하세요. Bolt는 작업 카드(package.json 업데이트, 의존성 설치, auth 컨텍스트 생성)와 Bolt 밖에서 진행할 Firebase 단계별 안내를 돌려줍니다.
Bolt의 Add Google Authentication 작업 카드.11:00 지점 보기 - 11
Firebase 프로젝트 만들기
Bolt가 준 링크로 Firebase 콘솔을 열고 새 프로젝트를 만듭니다(이름 짓기, 계정 선택). 준비가 되면 콘솔로 계속. 무료 Spark 플랜이면 이 튜토리얼에 충분합니다.
Firebase 프로젝트 준비 완료 — 콘솔로 계속.11:30 지점 보기 - 12
로그인 방법에서 Google 사용 설정
콘솔에서 Build → Authentication → Sign-in method. Google 공급자를 사용 설정하고, Email/Password도 켜서 두 가지 방식 모두로 가입할 수 있게 합니다. Bolt 체크리스트가 시킨 그 설정입니다.
Google이 사용 설정된 로그인 공급자가 됐습니다.12:00 지점 보기 - 13
firebaseConfig를 Bolt에 붙여넣기
Project settings → Your apps에서 웹 앱을 등록하고 firebaseConfig 블록을 복사해, Bolt의 체크리스트가 만들어 둔 설정 파일에 붙여넣습니다. 그다음 "Firebase 설정 추가했어"라고 말하면 Bolt가 전부 연결하고 동작하는 가입 버튼이 생깁니다.
Bolt 설정 파일에 복사할 firebaseConfig 블록.12:30 지점 보기 - 14
배포 도메인 승인하기
Firebase가 URL을 신뢰할 때까지 Google 로그인은 "팝업이 차단됨"으로 죽습니다. Bolt에서 앱을 배포하고, Firebase → Authentication → Settings → Authorized domains에 localhost, IDE 도메인, 배포 URL을 추가하세요(물어보면 정확한 도메인을 알려줍니다).
Firebase 설정의 Authorized domains.14:00 지점 보기 - 15
라이브로 전환하고 로그인
배포 URL을 열고 Sign in에서 Google로 계속 — 팝업이 동작하고, 아바타가 오른쪽 위에 뜨고, 로그아웃도 됩니다. 코드를 한 줄도 쓰지 않고 실제 계정 시스템을 갖춘 배포된 앱이 완성됐습니다.
배포된 FocusFlow에서 로그인 성공.15:00 지점 보기