다듬고 테스트하고 마무리
앞 레슨에서 프롬프트 하나로 1차 완성본을 만들었습니다. 이번에는 그 결과물을 실제로 써 보면서 어색한 부분을 고치고, 기능이 제대로 도는지 하나씩 확인합니다. 만드는 것보다 이 단계가 훨씬 길고, 사실 바이브 코딩의 실력은 여기서 갈립니다.
이번 레슨의 핵심은 “고칠 곳을 어떻게 찾고, 어떻게 AI에게 넘기느냐”입니다. 소스 코드를 직접 읽지 않아도, 화면을 눌러 보고 · 에러 메시지를 그대로 넘기고 · 말로 요청하는 것만으로 대부분의 문제가 정리됩니다.
1. 사이트 문구를 전부 한글로 바꾸기
1차 완성본은 버튼과 안내 문구가 영어로 나와 있습니다. 채팅창에 “사이트를 모두 한글로 바꿔라” 정도로만 요청하면 됩니다. 어떤 파일의 어떤 문장을 바꿔야 하는지는 AI가 알아서 찾습니다.
2. 프로젝트 전체를 뒤져서 바꾸는 과정 지켜보기
AI가 LoginForm, ChatInput, 메인 페이지, 레이아웃의 제목·설명까지 순서대로 고쳐 나갑니다. 개발 서버가 떠 있는 상태라 파일이 저장되는 즉시 브라우저에 반영됩니다. 왼쪽 브라우저를 보면 이메일 · 비밀번호 · 초대 코드 · 회원가입까지 모두 한글로 바뀌어 있습니다.
소스 코드를 한 줄도 들여다보지 않고 개발이 진행되고 있습니다. 이게 좋다 나쁘다를 따지자는 게 아니라, 지금 어떤 방식으로 일하고 있는지는 알고 있어야 한다는 뜻입니다. 코드를 몰라도 만들 수는 있지만, 무엇이 왜 바뀌었는지 감각은 계속 챙겨 두세요.
3. 일부러 틀려 보기 — 초대 코드 검증 테스트
테스트는 잘 되는 경우가 아니라 잘못된 경우부터 해 봐야 합니다. 이메일과 비밀번호를 넣고 초대 코드를 일부러 틀리게 입력해 봅니다. Invalid invite code 오류가 제대로 뜨네요. 초대 코드로 가입을 막는 장치가 작동하고 있다는 뜻입니다.
다만 오류 문구는 아직 영어입니다. 급한 부분이 아니니 지금은 넘어가고, 나중에 시간이 날 때 “오류 메시지도 한글로 바꿔 줘”라고 요청하면 됩니다.
4. 제대로 입력했더니 나오는 권한 오류
이번엔 초대 코드를 정확히 입력했습니다. 그런데 Missing or insufficient permissions 라는 오류가 뜹니다. Firebase로 작업하면 정말 자주 만나게 되는 오류입니다. 데이터베이스인 Firestore에 쓰기 권한이 없다는 뜻으로, 앞 레슨에서 만들어 배포한 firestore.rules 보안 규칙이 필요한 동작까지 막고 있는 상태입니다.
5. 오류 메시지를 그대로 채팅창에 넘기기
원인을 직접 파헤칠 필요는 없습니다. 어떤 상황에서 났는지와 오류 메시지를 함께 적어 주면 됩니다. 여기서는 “회원가입하려고 하니 Missing or insufficient permissions” 정도로 넘겼습니다. 상황 한 줄 + 에러 원문, 이 조합이 가장 잘 먹힙니다.
6. AI가 보안 규칙을 고치고 직접 배포
AI가 firestore.rules를 수정한 뒤, 스스로 firebase deploy --only firestore:rules 를 실행하겠다고 합니다. 물론 파란 박스에서 여러분의 승인을 받아야 실행됩니다. Deploy complete! 가 뜨면 새 규칙이 서버에 올라간 것입니다.
파란 박스를 매번 묻지 않고 자동 승인하도록 설정할 수도 있습니다. 하지만 AI가 무슨 명령을 실행하는지 확인하지 않고 넘기는 건 위험합니다. 익숙해지기 전까지는 하나씩 읽고 누르는 습관을 유지하세요.
7. AI가 알려 주는 재시도 순서 확인
수정이 끝나면 AI가 무엇을 어떤 순서로 다시 해 보라고 정리해 줍니다. 이메일 입력 → 비밀번호 입력 → 초대 코드 입력 → 회원가입 버튼, 그리고 가입이 완료되면 자동으로 채팅방으로 이동한다는 설명까지 붙습니다.
8. 실패하면서 생긴 계정 먼저 지우기
바로 다시 가입하면 또 에러가 납니다. 아까 실패했을 때 Authentication에는 계정이 이미 만들어졌기 때문입니다. 즉 인증 계정은 생겼는데 Firestore 쪽 사용자 문서만 못 만든 상태라, 같은 이메일로 다시 가입할 수 없습니다.
브라우저에서 Firebase 콘솔로 가서 왼쪽 메뉴의 Authentication → 사용자 탭을 엽니다. 조금 전 만들어진 계정의 오른쪽 점 세 개 메뉴에서 삭제를 누르세요.
9. 다시 회원가입 시도하기
Authentication 목록이 비었으면(“이 프로젝트에는 아직 사용자가 없습니다”) 준비가 끝난 것입니다. 다시 서비스 화면으로 돌아가 같은 정보로 회원가입을 눌러 봅니다.
10. 가입 성공 → 대화방 자동 진입 → 메시지 전송
이번엔 잘 됩니다. 가입이 끝나면 로그인 화면을 거치지 않고 곧바로 대화방으로 들어갑니다. 메시지를 입력하고 전송을 눌러 보면 정상적으로 올라갑니다. 여기까지가 채팅의 기본 동작 확인입니다.
11. 거슬리는 개발 도구 버튼 치우기
화면 구석에 떠 있는 동그란 버튼이 눈에 거슬립니다. 이건 우리가 만든 게 아니라 Next.js가 개발 중에만 띄워 주는 개발 도구 버튼입니다. 클릭하면 Preferences가 열리는데, Position에서 위치를 옮기거나 Hide Dev Tools로 잠시 숨길 수 있습니다. 배포한 사이트에는 나오지 않으니 안심하세요.
12. 시크릿 창을 하나 더 열기
채팅은 혼자서는 테스트가 안 됩니다. 다른 사람인 척할 창이 하나 더 필요합니다. 브라우저에서 시크릿 모드 창을 새로 열면 로그인 상태가 공유되지 않아 다른 계정으로 접속할 수 있습니다.
13. 시크릿 창에서 다른 이메일로 가입하기
시크릿 창 주소창에 localhost:3000 을 입력해 접속한 뒤, 다른 이메일로 회원가입을 합니다. 이번에도 초대 코드가 필요합니다. 가입이 끝나면 이 창도 바로 단톡방으로 들어갑니다.
14. 두 창에서 실시간 전송 확인하기
이제 두 계정이 준비됐습니다. 한쪽 창에서 메시지를 보내면 다른 창에 곧바로 나타납니다. 새로고침을 하지 않아도 올라오는 것, 이게 Firestore 실시간 동기화가 작동한다는 증거입니다. 보낸 사람 이름과 사용자별 색상도 프롬프트에서 요청한 대로 구분되고 있습니다.
15. 자동 스크롤이 안 되는 문제 발견하고 요청하기
쓰다 보니 불편한 점이 보입니다. 메시지가 쌓여도 화면이 마지막 메시지로 따라 내려가지 않습니다. 이런 건 코드를 볼 필요 없이 말로 요청하면 됩니다. “대화가 길어지면 자동으로 스크롤되게 해 줘” 정도면 충분합니다.
직접 써 보면서 불편한 지점을 찾는 것이 이 단계의 핵심입니다. AI는 사용자가 아니라서 “쓰기 불편하다”는 건 스스로 알아채지 못합니다. 그 판단만큼은 여러분의 몫입니다.
16. AI가 고치고, 무엇을 바꿨는지 정리해 주기
AI가 코드를 분석해 수정하고, 무엇을 바꿨는지 정리해서 알려 줍니다. 메시지 목록 맨 아래를 가리키는 지점을 만들고, 목록이 바뀔 때마다 그쪽으로 부드럽게 스크롤하도록 처리했다는 설명입니다. 이렇게 요약을 읽어 두면 코드를 안 봐도 구조가 어렴풋이 잡힙니다.
17. 스크롤 동작 확인하기
개발 서버가 떠 있으므로 이미 브라우저에 반영되었을 겁니다. 메시지를 몇 개 더 보내 보면 화면이 새 메시지를 따라 아래로 내려갑니다. 두 창 모두에서 잘 동작합니다.
18. 비밀번호 재설정 테스트 시작하기
아직 안 써 본 기능이 남았습니다. 비밀번호 재설정입니다. 먼저 로그아웃을 하고 로그인 화면에서 “비밀번호를 잊으셨나요?”를 누릅니다. 이메일을 입력하고 재설정 버튼을 누르면 메일이 발송됩니다.
19. 메일함에서 재설정 메일 확인하기
메일함으로 가 보면 재설정 링크가 담긴 메일이 도착해 있습니다. 우리가 메일 서버를 만들지 않았는데도 메일이 오는 이유는 Firebase Authentication이 이 과정을 대신 처리해 주기 때문입니다. 다만 지금은 내용이 영어로 와 있습니다.
20. 새 비밀번호 설정하기
메일의 링크를 누르면 비밀번호 재설정 페이지가 열립니다. 새 비밀번호를 입력하고 저장합니다. 이 페이지도 우리가 만든 것이 아니라 Firebase가 제공하는 화면입니다.
21. 예전 비밀번호로는 안 되는지 확인하기
다시 로그인 화면으로 돌아와 기존 비밀번호로 로그인해 봅니다. 실패하네요. 잘 바뀌었다는 뜻입니다. 이번엔 새로 설정한 비밀번호로 시도하면 정상적으로 로그인됩니다. 바뀌었는지 확인할 때는 이렇게 “안 되어야 하는 것이 안 되는지”까지 봐야 확실합니다.
22. 메일 템플릿을 한글로 — Authentication 템플릿 탭
영어로 오던 재설정 메일도 한글로 바꿔 봅시다. 이건 코드가 아니라 Firebase 설정입니다. Firebase 콘솔에서 Authentication으로 이동한 뒤 상단의 템플릿 탭을 클릭하고, 왼쪽에서 “비밀번호 재설정”을 선택합니다.
23. 템플릿 언어를 한국어로 바꾸기
화면 아래쪽의 “템플릿 언어”에서 한국어를 고르고 저장합니다. “템플릿 언어를 업데이트했습니다”가 뜨면 제목과 본문이 곧바로 한글로 바뀝니다. 문구를 직접 손보고 싶다면 연필 아이콘으로 편집할 수도 있습니다.
24. 한글 메일과 한글 재설정 페이지 확인하기
다시 로그아웃한 뒤 비밀번호 재설정을 요청해 봅니다. 메일함에 가 보면 이번엔 한글로 메일이 와 있습니다. 링크를 눌러 보면 재설정 페이지도 한글로 나옵니다. 여기까지가 1차 채팅 기능의 다듬기와 테스트입니다.
이번 레슨에서 몸에 익힐 것
- 잘 되는 경우보다 틀린 경우를 먼저 테스트한다. 초대 코드를 일부러 틀려 보는 것처럼, 막혀야 할 것이 막히는지부터 확인하세요.
- 상황 한 줄 + 에러 원문을 그대로 넘긴다. 원인을 직접 분석하려 애쓸 필요가 없습니다. 언제 났는지만 덧붙이면 됩니다.
- 실패한 흔적을 먼저 치운다. 가입이 중간에 깨졌다면 Authentication에 남은 계정을 지우고 다시 시도해야 합니다.
- 불편함은 사용자만 안다. 자동 스크롤처럼 “쓰기 불편하다”는 판단은 직접 써 봐야 나옵니다. AI는 알아서 못 찾습니다.
- 코드로 풀 문제와 설정으로 풀 문제를 구분한다. 메일 문구는 코드가 아니라 Firebase 콘솔의 템플릿 설정이었습니다.
다음 레슨에서는 내 컴퓨터에서만 돌던 이 서비스를 실제 인터넷 주소로 배포해서, 누구나 접속할 수 있게 만듭니다.
영상으로 보고 싶다면
같은 과정을 처음부터 끝까지 촬영한 원본 영상은 인프런 유료 강의로 제공됩니다. 테스트하면서 오가는 판단과 화면 조작을 그대로 보고 싶다면 아래 강의를 참고하세요.
