바이브 코딩 입문15 / 60
3장 서비스 가입과 AI 편집기

각 서비스 실제 가입 및 설정 하기

실습 영상(약 5분)을 화면 캡처와 설명으로 재구성했습니다. Firebase 프로젝트 생성부터 GitHub·Vercel 가입까지 순서대로 따라 해보세요. 준비물은 구글 계정과 이메일 주소뿐입니다.

아래는 이 실습을 그대로 촬영한 원본 영상(약 5분)입니다. 먼저 전체 흐름을 한 번 보고, 그 아래 캡처 화면과 설명을 따라가며 실습하세요.

1. Firebase 프로젝트 만들기

Firebase는 우리가 만들 서비스의 로그인(인증)과 데이터 저장(데이터베이스)을 담당합니다. 구글 계정만 있으면 무료로 시작할 수 있습니다.

1. Firebase 홈페이지로 이동

Firebase 홈페이지로 이동

구글에서 "파이어베이스"를 검색해 홈페이지로 이동합니다. 우측 상단의 Go to console(콘솔로 이동)을 클릭합니다.

2. 프로젝트 이름 입력

프로젝트 이름 입력

"프로젝트 만들기"를 클릭하고 원하는 프로젝트 이름(예: talkie-chat)을 입력합니다. 입력하면 아래에 회색 글씨로 프로젝트 ID가 자동으로 생성됩니다.

3. 프로젝트 ID 확인 및 약관 동의

프로젝트 ID 확인 및 약관 동의

프로젝트 ID는 전 세계에서 고유해야 해서 이상한 문자열로 자동 생성되는 경우가 많습니다. 마음에 들지 않으면 연필 아이콘을 눌러 뒤에 -kr 같은 접미사를 붙여 나만의 ID로 바꿀 수 있습니다. 이름을 정했다면 Firebase 약관에 동의하고 계속 진행합니다.

4. Gemini(AI) 지원 설정

Gemini(AI) 지원 설정

Firebase의 Gemini 사용 설정 화면이 나오면 기본값(권장, 켜짐) 그대로 두고 계속을 클릭합니다.

5. Google 애널리틱스 설정

Google 애널리틱스 설정

Google 애널리틱스 사용 설정 화면입니다. 기본값 그대로 두고 계속 진행하면 이어서 애널리틱스 위치를 묻는 화면이 나옵니다 — 대한민국을 선택하고 약관에 동의한 뒤 진행합니다.

6. 프로젝트 생성 완료

프로젝트 생성 완료

잠시 기다리면 "Firebase 프로젝트가 준비되었습니다" 메시지가 나타납니다. 계속을 눌러 대시보드로 이동합니다.

7. 프로젝트 대시보드

프로젝트 대시보드

프로젝트 대시보드가 열립니다. 화면에 Gemini 챗봇 안내창이 함께 뜨면 지금은 필요 없으니 오른쪽 위 X를 눌러 닫아줍니다.

8. 빌드 메뉴에서 Authentication 선택

빌드 메뉴에서 Authentication 선택

왼쪽 메뉴에서 빌드를 클릭하면 Authentication(인증), Cloud Firestore, Storage, Hosting 등의 항목이 나타납니다. 먼저 Authentication을 클릭합니다.

9. Authentication 시작하기

Authentication 시작하기

Authentication 소개 화면에서 시작하기 버튼을 클릭합니다.

10. 로그인 방법: 이메일/비밀번호 선택

로그인 방법: 이메일/비밀번호 선택

로그인 제공업체 목록이 나타납니다. 기본 제공업체 중 이메일/비밀번호를 클릭합니다.

11. 이메일/비밀번호 사용 설정 켜기

이메일/비밀번호 사용 설정 켜기

"이메일/비밀번호" 항목의 사용 설정 토글을 켜고 저장을 클릭합니다.

12. 인증 설정 완료

인증 설정 완료

이메일/비밀번호 로그인이 사용 설정됨 상태로 바뀌었습니다. 이제 왼쪽 빌드 메뉴에서 다음 항목인 Firestore로 이동합니다.

13. Cloud Firestore 시작하기

Cloud Firestore 시작하기

Cloud Firestore(데이터를 저장하는 데이터베이스) 소개 화면에서 데이터베이스 만들기를 클릭합니다.

14. 데이터베이스 위치: 서울 선택

데이터베이스 위치: 서울 선택

데이터베이스 위치를 선택합니다. 한국에서 서비스한다면 asia-northeast3 (Seoul)을 선택하는 것이 좋습니다.

이 위치는 한 번 설정하면 나중에 변경할 수 없으니 신중하게 선택하세요.

15. 보안 규칙 선택

보안 규칙 선택

보안 규칙 설정 단계입니다. 기본값인 프로덕션 모드로 두고 만들기를 클릭해 시작합니다. (테스트 모드는 30일간 누구나 읽고 쓸 수 있게 열어두는 방식으로, 개발 초기에만 임시로 쓰는 옵션입니다.)

16. Firebase 준비 완료

Firebase 준비 완료

"데이터베이스를 사용할 준비가 되었습니다" 메시지가 뜨면 Firestore 설정도 끝난 것입니다. 이것으로 Firebase 준비가 모두 끝났습니다.

2. GitHub 가입하기

GitHub는 우리가 작성할 소스 코드를 온라인에 저장해주는 서비스입니다. 나중에 Vercel에 배포할 때 이 코드 저장소와 연동하게 됩니다. 이미 계정이 있다면 이 단계는 건너뛰어도 됩니다.

1. GitHub 홈페이지에서 Sign up

GitHub 홈페이지에서 Sign up

새 탭에서 github.com에 접속합니다. 계정이 없다면 Sign up for GitHub 버튼을 클릭합니다.

2. 이메일·비밀번호·사용자 이름 입력

이메일·비밀번호·사용자 이름 입력

이메일, 비밀번호, Username(사용자 이름), 국가(Korea, South)를 입력하는 가입 화면입니다. 순서대로 입력합니다.

3. Username은 전 세계에서 고유하게

Username은 전 세계에서 고유하게

Username은 전 세계 GitHub 사용자 중에서 고유해야 합니다. 원하는 이름이 이미 사용 중이면 GitHub가 -commits, -ops 같은 대안을 제안해주니 그중 하나를 선택하거나 직접 변형해서 입력합니다.

4. 사람인지 확인 (퍼즐 인증)

사람인지 확인 (퍼즐 인증)

"Verify your account" 화면에서 안내에 따라 퍼즐을 풀어 사람임을 증명합니다.

5. 이메일 인증 코드 입력

이메일 인증 코드 입력

가입 시 입력한 이메일 주소로 전송된 8자리 인증 코드를 입력하는 화면입니다.

6. 메일함에서 인증 코드 확인

메일함에서 인증 코드 확인

Gmail 등 메일함에서 GitHub가 보낸 인증 코드 이메일을 열어 코드를 복사한 뒤, 이전 화면에 붙여 넣습니다.

7. 가입 완료 후 로그인

가입 완료 후 로그인

"Your account was created successfully"(계정이 성공적으로 생성되었습니다) 메시지와 함께 로그인 화면으로 이동합니다. 방금 만든 아이디와 비밀번호를 입력해 Sign in합니다.

8. GitHub 가입 완료

GitHub 가입 완료

로그인이 완료되면 GitHub 대시보드가 나타납니다. GitHub 가입은 여기까지입니다.

3. Vercel 가입하기

Vercel은 우리가 만든 웹 서비스를 실제 인터넷 주소로 배포해주는 서비스입니다. 반드시 GitHub 계정으로 가입해야 나중에 코드 저장소와 자동으로 연동되어 배포가 편리해집니다.

1. Vercel 홈페이지 접속

Vercel 홈페이지 접속

새 탭을 열어 vercel.com에 접속합니다.

2. Sign Up: 플랜과 이름 입력

Sign Up: 플랜과 이름 입력

Sign Up 화면입니다. Plan Type은 개인 프로젝트용인 "I'm working on personal projects"(Hobby)를 선택하고 이름을 입력한 뒤 Continue를 클릭합니다.

3. 반드시 GitHub로 연결

반드시 GitHub로 연결

Git 제공업체를 선택하는 화면이 나오면 Continue with GitHub를 선택합니다.

가장 중요한 단계입니다. GitLab이나 Bitbucket이 아니라, 앞서 만든 GitHub 계정으로 반드시 가입해야 나중에 GitHub 저장소와 Vercel을 연동해 배포할 수 있습니다.

4. GitHub 인증 허가

GitHub 인증 허가

GitHub 인증(Authorize) 팝업이 뜨면 내용을 확인하고 Authorize Vercel 버튼을 클릭해 권한을 허용합니다.

5. Vercel 가입 완료

Vercel 가입 완료

"Let's build something new" 화면이 뜨는 프로젝트 대시보드가 열리면 가입이 완료된 것입니다.

이것으로 Firebase · GitHub · Vercel 세 가지 서비스의 가입과 기본 설정이 모두 끝났습니다. 이제 AI 코드 편집기로 실제 서비스를 만들고, 완성되면 GitHub에 코드를 올린 뒤 Vercel로 배포하는 다음 단계로 넘어갈 수 있습니다.

목차