프롬프트로 웹앱 1차 완성하기
앞 레슨에서 배운 프롬프트를 실제로 던져서, 동작하는 웹 서비스의 1차 완성본까지 만들어 봅니다. 실습 영상을 화면 캡처와 설명으로 재구성했으니 순서대로 따라 하면 됩니다. 만들 서비스는 Firebase를 백엔드로 쓰는 가족 단톡방 채팅 웹앱 “Talkie”입니다.
화면은 Windows + Cursor 기준입니다. macOS나 다른 AI 편집기(Kiro 등)를 써도 화면 배치만 조금 다를 뿐, 프롬프트를 넣고 · 승인하고 · 에러를 넘겨 주는 흐름은 똑같습니다.
1. 강의 노트에 준비해 둔 프롬프트 열기
바이브 코딩은 프롬프트에서 시작합니다. 화면은 이번 실습에 사용할 프롬프트 전문입니다. “파이어베이스로 가족 단톡방 만들어 줘” 한 줄로도 결과물은 나옵니다. 실제로 그렇게 해서 꽤 잘 나온 적도 있습니다. 다만 그렇게 진행하면 의도와 다르게 나온 부분을 고치느라 질문 수가 계속 늘어나고, AI가 엉뚱한 방향으로 빠지기도 합니다. 그래서 처음부터 가이드라인을 담은 조금 긴 프롬프트를 준비했습니다. 이 프롬프트를 복사해 두세요.
프롬프트에 담긴 항목을 뜯어보면 이렇습니다.
- 무엇을: Firebase를 이용한 가족 단톡방 채팅 웹서비스라고 목적과 백엔드를 먼저 알려 줍니다. 그래야 AI가 구체적인 계획을 세웁니다.
- 어떻게 보이게: 모바일 웹에 최적화된 예쁜 디자인. ‘예쁘게’라고 하면 디자인에 신경을 쓰고, ‘모바일 웹’을 빼면 PC 화면 기준으로 만들어 버리기도 합니다.
- 인증: Firebase Authentication의 이메일 로그인을 이미 켜 놨다는 현재 상태를 알려 주고, 로그인 · 가입 · 비밀번호 찾기를 구현하게 합니다.
- 최소한의 보안: 아무나 가입하지 못하게 초대코드를 입력해야 가입되도록 합니다.
- 데이터: 가입하면 Firestore에 users 컬렉션을 만들고 사용자별 색상을 자동 지정해 저장하게 합니다. 그냥 ‘가입되게 해 줘’라고만 하면 사용자 정보를 담을 DB를 아예 안 만들 수도 있어서 저장소를 명시했습니다.
- 환경의 현재 상태: Firebase 프로젝트는 만들어 놨지만 웹 앱은 아직 안 만들었다고 알려 주고, Firebase CLI로 웹 앱을 생성해 구성값을 앱에 적용하라고 시킵니다.
- 마무리: Firestore 보안 규칙은 수정한 뒤 배포까지 하라고 합니다. 에이전트 모드에서는 AI가 배포까지 직접 할 수 있습니다.
2. Cursor에서 작업할 폴더 열기
Cursor의 Open Folder(프로젝트 열기) 버튼을 눌러 C 드라이브로 이동합니다. 여기에 앞으로 만들 프로젝트들을 모아 둘 폴더를 하나 만듭니다. 예제에서는 Project라는 이름으로 만들었습니다.
3. 서비스 이름으로 폴더를 만들고 그 안에서 열기
Project 폴더 안에 이번에 만들 서비스 이름으로 폴더를 하나 더 만듭니다. 예제 이름은 talkie-chat입니다. 첫 글자는 반드시 소문자로 하세요. 새로 만든 폴더를 더블클릭해 안으로 들어간 다음 “폴더 선택”을 누릅니다. 여담이지만 talkie는 무전기 ‘워키토키’에서 따온 이름입니다. 여러분은 원하는 이름으로 지으세요.
4. 채팅창에 프롬프트 붙여넣기
빈 프로젝트가 열리면 오른쪽 AI 채팅창에 아까 복사한 프롬프트를 붙여넣습니다. 붙여넣기 전에 입력창 아래가 Agent 모드인지 확인하세요. 에이전트 모드여야 AI가 파일 생성과 명령 실행까지 직접 합니다.
5. 전송하고 Generating 확인하기
입력창 오른쪽의 위로 향하는 화살표 버튼을 눌러 명령을 전송합니다. Generating이라는 글자가 보이면 AI가 계획을 세우고 일을 하고 있다는 뜻입니다. 화면에서는 프로젝트 구조를 먼저 살펴본 뒤, 새 Next.js 프로젝트를 만들고 필요한 패키지를 설치하겠다고 알려 주고 있습니다.
6. 파란 박스 = AI가 실행 허락을 구하는 화면
잠시 뒤 파란 테두리 박스가 뜨면서 진행이 멈춥니다. 무엇을 할 것인지 설명하고 여러분의 승인을 기다리는 상태입니다. 여기서는 Next.js 프로젝트를 만드는 npx create-next-app 명령입니다. 내용을 읽어 보고 Run 버튼을 누르세요.
7. 흰 박스 = 내가 직접 답해야 하는 터미널
Run을 누르면 이번엔 흰 박스가 뜨면서 Ok to proceed? (y) 처럼 되묻습니다. 이건 AI가 묻는 게 아니라 실제로 실행 중인 명령이 묻는 것입니다. 흰 바탕을 한 번 클릭해 키보드 입력이 가능한 상태로 만든 다음 y를 입력하고 Enter를 치세요.
두 박스를 구분해서 기억하세요. 파란 박스는 “이 명령을 실행해도 될까요?”라는 AI의 승인 요청이라 Run만 누르면 됩니다. 흰 박스는 실행 중인 명령이 나에게 던지는 질문이라, 박스 안을 클릭한 뒤 키보드로 직접 답해야 합니다.
8. 만들어진 package.json 열어 보기
왼쪽 파일 목록에 파일들이 생기기 시작합니다. 그중 package.json은 Node 기반 웹 서비스의 신분증 같은 파일로, 어떤 라이브러리를 쓰는지와 실행 명령이 적혀 있습니다. 여기서는 React 19, Next.js 15.3.3 기반으로 만들어졌음을 확인할 수 있습니다.
참고로 이 과정 중간에 yarn 관련 에러가 한 번 났습니다. 그런데 AI가 스스로 원인을 확인하고 npm으로 방법을 바꿔 계속 진행했습니다. 우리가 한 일은 Run 버튼을 다시 누른 것뿐입니다.
9. Firebase 도구 설치 승인하기
다음 승인 요청은 npm install -g firebase-tools입니다. Firebase를 명령어로 다룰 수 있게 해 주는 CLI 도구를 설치하겠다는 뜻입니다. 파란 박스 내용을 읽고 Run을 누릅니다.
10. 코드가 만들어지는 과정 구경하기
AI가 src/lib/firebase.ts, AuthContext.tsx 같은 파일을 차례로 만들어 나갑니다. 파일명을 클릭하면 가운데 편집기에 그 파일이 열립니다. 초록색은 새로 추가된 코드, 빨간색은 지워진 코드입니다. 여러분은 구경하며 기다리면 됩니다.
커서 같은 편집기가 나오기 전에는, 개발자가 브라우저로 챗봇에 접속해 질문하고 나온 결과물을 자기 소스의 적절한 위치에 붙여넣고 테스트하고, 안 되면 다시 소스를 복사해 붙여넣고 고쳐 달라고 하는 일을 반복했습니다. ‘내가 복사·붙여넣기 기계인가’ 싶은 그 반복을 편집기가 대신해 준 것이고, 소스 코드를 일일이 들여다보지 않고 전반적인 맥락만으로 개발하는 이 방식에 누군가 ‘바이브 코딩’이라는 이름을 붙인 것입니다.
11. AI가 다른 길로 가면 말로 방향을 알려 주기
잘 진행되던 중 AI가 firebase init hosting을 실행하겠다고 합니다. Firebase Hosting은 웹사이트를 배포하는 서비스인데, 이번 실습은 속도 때문에 Vercel에 배포할 계획이었습니다. 이럴 때는 채팅창에 “원래 나는 이 서비스를 Vercel로 배포하려고 했다”고 알려 주면 됩니다. 그러자 AI는 환경 변수 파일은 보안상 자기가 만들 수 없으니 사용자가 넣어 달라고 안내하고, Firestore 보안 규칙부터 배포하겠다고 계획을 바꿉니다.
12. 보안 규칙 배포에서 나는 오류 확인하기
firebase deploy --only firestore:rules를 실행하자 Not in a Firebase app directory 오류가 납니다. 이 폴더가 아직 Firebase 프로젝트와 연결되지 않았다는 뜻입니다. AI는 firebase.json 파일을 만들어 다시 시도하지만, 근본적으로는 firebase init을 한 번 거쳐야 합니다. 보안 규칙 배포는 잠시 미루고 초기화부터 하겠습니다.
13. 터미널을 열어 firebase init 직접 실행
화면 아래(또는 오른쪽 위)의 터미널 탭을 엽니다. 터미널에 다음 명령을 입력합니다.
firebase initAI에게 계속 시켜도 되지만, 명령 하나하나가 곧 비용입니다. 이렇게 간단한 것은 직접 하는 편이 낫습니다.
14. firebase login으로 구글 계정 인증하기
로그인이 필요하다는 안내가 나오면 화면에 나온 대로 로그인 명령을 실행합니다.
firebase login브라우저가 열리면서 계정 선택 화면이 뜹니다. Firebase 프로젝트를 만든 구글 계정을 고르고 권한을 허용하세요. “Firebase CLI Login Successful” 메시지가 보이면 다시 Cursor로 돌아옵니다.
15. 다시 firebase init 실행하고 Firestore 선택하기
터미널에 Success! Logged in as ... 가 찍혀 있으면 로그인이 끝난 것입니다. 다시 firebase init을 실행하면 이 디렉터리에서 초기화를 진행할지 묻습니다(Are you ready to proceed?). Enter를 칩니다. 이어서 사용할 기능 목록이 나오면 위아래 화살표로 Firestore로 이동해 스페이스바로 선택하고, 다 골랐으면 Enter를 칩니다.
16. 기존 프로젝트 선택하고, 규칙 파일은 덮어쓰지 않기
프로젝트를 고르는 단계에서는 앞서 만들어 둔 Firebase 프로젝트가 있으므로 Use an existing project를 선택하고 Enter를 칩니다. 프로젝트가 하나뿐이면 그대로 Enter입니다. 이어서 firestore.rules 파일을 덮어쓸지 묻는데, AI가 방금 작성한 규칙을 지켜야 하므로 그냥 Enter를 눌러 No로 넘어갑니다. 검색을 빠르게 해 주는 인덱스 파일 질문도 Enter로 기본값을 씁니다.
17. 초기화 완료 후 보안 규칙 배포하기
Firebase initialization complete! 이 보이면 폴더와 Firebase 프로젝트가 연결된 것입니다. 이제 채팅창에서 대기 중이던 firebase deploy --only firestore:rules를 Run으로 실행합니다. Deploy complete! 가 나오면, 아무나 읽고 쓸 수 없도록 하는 Firestore 보안 규칙이 실제 서버에 적용된 것입니다.
18. 남은 일 세 가지 정리하기
채팅창의 안내를 요약하면 남은 일은 세 가지입니다.
- Firebase 콘솔에서 웹 앱 구성값을 복사한다.
- .env.local 파일에 붙여넣는다.
- npm run dev 로 실행해 본다.
처음 프롬프트에서는 구성값까지 AI가 직접 가져오라고 했지만, 환경 변수 파일은 보안상 만들 수 없다며 사용자에게 넘기는 경우가 많습니다. 여러분의 AI가 알아서 가져와 준다면 그대로 화면을 따라가면 됩니다.
19. .env.local 파일 만들기
Cursor 왼쪽 위의 새 파일 버튼을 눌러 프로젝트 루트에 .env.local 파일을 만듭니다. 이름 앞의 점을 빠뜨리지 마세요. 점으로 시작하면 숨김 파일이라는 뜻입니다. 파일이 만들어지면 채팅창이 알려 준 형식(NEXT_PUBLIC_FIREBASE_ 로 시작하는 항목들)을 그대로 복사해 붙여넣습니다. 값은 아직 your_api_key 같은 자리표시자입니다.
20. Firebase 콘솔에서 웹 앱 등록하기
브라우저에서 Firebase 콘솔로 갑니다. 프로젝트 개요 옆 톱니바퀴 → 프로젝트 설정으로 이동해 일반 탭을 아래로 내려 보면 “프로젝트에 앱이 없습니다”라고 나옵니다. 플랫폼 아이콘 중 세 번째에 있는 </> 가 웹입니다. 이 버튼을 누르고 앱 닉네임을 적당히 입력한 뒤 “앱 등록”을 누릅니다.
21. 구성값 복사해서 .env.local 채우기
앱을 등록하면 firebaseConfig 코드가 나타납니다. apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId 값을 .env.local의 대응하는 항목에 하나씩 채워 넣고 저장합니다. Firebase를 익힐 겸 손으로 옮겼지만, 자동으로 가져오라고 AI에게 시켜도 됩니다.
22. 빨간 밑줄에서 Fix in Chat 누르기
왼쪽 파일 목록에 빨간 점과 빨간 글씨로 표시된 파일이 보이면 그 파일에 에러가 있다는 뜻입니다. 해당 파일을 열어 빨간 밑줄 위에 마우스를 올리면 Fix in Chat 버튼이 뜹니다. 누르면 에러 내용이 오른쪽 채팅창으로 자동으로 넘어가고 AI가 원인을 분석합니다.
23. AI가 원인을 찾아 고치게 하기
여기서는 ChatInput 컴포넌트가 아직 만들어지지 않아 생긴 에러였습니다. AI가 컴포넌트를 새로 만들어 문제를 해결합니다. 수정이 끝나면 Accept를 눌러 반영합니다.
24. npm run dev 로 실행하기
이제 앱을 실행해 봅니다. 명령어는 다음과 같습니다.
npm run dev기억이 안 나면 package.json의 scripts 항목을 보면 됩니다. npm run 은 고정이고 뒤에 dev 같은 스크립트 이름을 붙이는 구조입니다. 잘 모르겠으면 채팅창에 “어떻게 실행하는지 알려 줘”라고 물어봐도 됩니다. Ready 와 함께 http://localhost:3000 이 뜨면 내 컴퓨터가 서버가 되어 웹 서비스가 돌고 있다는 뜻입니다. Ctrl 키를 누른 채 그 주소를 클릭하면 브라우저가 열립니다.
25. 에러 메시지는 그대로 복사해서 넘기기
첫 실행에서 브라우저에 에러가 떴습니다. Cursor로 돌아와 터미널을 보면 같은 에러가 찍혀 있습니다. useState를 쓰는 컴포넌트인데 파일 맨 위에 'use client' 표시가 없다는 내용입니다. 이 메시지를 그대로 복사해 채팅창에 붙여넣고 해결해 달라고 하면 됩니다. 에러 메시지는 AI에게 가장 좋은 힌트입니다.
26. 로그인 화면 확인하기
수정이 끝나고 브라우저로 돌아가면 Talkie 로그인 화면이 에러 없이 떠 있습니다. 개발 서버는 코드가 바뀌면 자동으로 반영되므로 매번 다시 실행할 필요가 없습니다. 여기까지가 프롬프트 하나로 만든 1차 완성본입니다.
이번 레슨에서 몸에 익힐 것
- 파란 박스와 흰 박스를 구분한다. 파란 박스는 Run만 누르면 되고, 흰 박스는 내가 키보드로 답해야 합니다.
- 에러는 그대로 넘긴다. Fix in Chat을 누르거나 터미널 메시지를 복사해 붙여넣으면 됩니다. 직접 해석하려고 붙잡고 있을 필요가 없습니다.
- AI가 딴 길로 가면 말로 잡아 준다. “나는 Vercel로 배포할 계획이다” 한마디로 계획이 바뀝니다.
- 간단한 명령은 직접 친다. 로그인이나 init 같은 건 내가 터미널에서 치는 편이 빠르고 비용도 아낍니다.
다음 레슨에서는 이 1차 완성본을 실제로 써 보면서 어색한 부분을 다듬고 테스트합니다.
영상으로 보고 싶다면
같은 과정을 처음부터 끝까지 촬영한 원본 영상은 인프런 유료 강의로 제공됩니다. 화면 조작 속도나 중간 대기 시간까지 그대로 보고 싶다면 아래 강의를 참고하세요.
