.env와 API 키,바이브 코딩 비밀번호 관리 실전 가이드— 바이브 코딩 시즌1 #5

📍 시리즈 위치

3편: 배포 ✓

→

4편: 백업 ✓

→

▶ 5편: .env (지금)

→

6편: Supabase

→

7편: OpenAI API

📄 .env가 뭔지부터 — 메모장 비유로 이해하기

6편에서 Supabase를, 7편에서 OpenAI API를 연결하려면 API 키가 필요합니다. 그 API 키를 어디에, 어떻게 보관해야 하는지가 이 편의 전부입니다.

.env 파일은 "코드 밖에 따로 두는 비밀 메모장"입니다.
코드에는 "메모장에서 가져와"라고만 쓰고,
실제 비밀 정보는 메모장(= .env)에만 보관합니다.

❌ 위험한 방식

API 키를 코드에 직접 작성

const key = "sk-proj-abc123..."
// 이 파일이 GitHub에 올라가면
// API 키도 같이 공개됩니다

코드 파일이 GitHub에 올라가면 API 키도 같이 전 세계에 공개됩니다.

✅ 안전한 방식

.env에 보관하고 코드에서 참조

const key = process.env.OPENAI_KEY
// 실제 키는 .env 파일에만 있음
// .env는 GitHub에 올라가지 않음

코드는 GitHub에 올라가도 실제 키는 .env 파일에만 있어 안전합니다.

💬 이런 질문이 드실 수 있습니다

"코드 안에 써도 되는 거 아닌가요? 거기다 API 키 쓰면 편한데요."

편합니다. 하지만 GitHub에 push하는 순간 그 키는 인터넷에 공개됩니다.
OpenAI 같은 서비스는 API 사용량에 따라 비용이 청구됩니다.
타인이 내 키를 쓰면 그 비용이 내 카드에 청구됩니다! 그래서 정말 중요합니다.

처음 한 번 .env 습관을 만들면 이후로는 자연스럽게 됩니다. 이 편이 6·7편보다 먼저인 이유입니다.

😌

처음엔 무섭게 느껴질 수 있습니다 — 하지만 실제로는 간단합니다

공포 사례가 강렬하게 느껴지셨다면, 안심하셔도 됩니다.
실제로는 딱 두 가지 습관만 만들면 대부분의 문제를 예방할 수 있습니다.

① .env 파일에 API 키 보관
② .gitignore에 .env 추가

이 글은 그 두 가지 습관을 만드는 과정입니다. 어렵지 않습니다.

🚨 API 키를 코드에 직접 쓰면 생기는 일

🤖 GitHub 스캔 봇의 속도

push 후 수 분 안에 봇이 API 키를 찾아냅니다

GitHub에는 자동으로 코드를 스캔하는 봇이 있습니다. OpenAI, AWS, Google Cloud 등 주요 서비스의 API 키 패턴을 알고 있어서 push하는 즉시 탐지합니다. 가장 확실한 방법은 처음부터 .env에 보관하는 것입니다.

✅ 만약 이미 노출됐다면 → 즉시 해당 서비스에서 키 삭제 → 새 키 발급 → .env에 새 키 저장

🚨 이미 GitHub에 올라갔다면 — 지금 당장 이 순서로 행동하세요

API 키 노출 시 실제 행동 순서

1

해당 서비스(OpenAI 등) 접속 → API Keys 메뉴에서 노출된 키 즉시 삭제

2

같은 메뉴에서 새 API 키 발급

3

로컬 .env 파일에 새 키 저장

4

GitHub 저장소에서 노출된 키가 있는 코드 파일 수정 (키 제거 또는 process.env로 교체)

5

git add . → git commit -m "API 키 보안 수정" → git push

6

Vercel 환경변수도 새 키로 업데이트 → 재배포

핵심: 노출된 키는 절대 계속 사용하면 안 됩니다. 삭제가 먼저, 새 키 발급이 두 번째입니다. 이 순서를 바꾸면 안 됩니다.

API 키 코드 직접 작성 위험 vs .env 파일 안전 보관 비교

📝 .env 파일 만들고 API 키 넣기

.env 파일은 특별한 형식의 파일이 아닙니다. 텍스트 파일인데 이름이 .env인 것뿐입니다.

📁 반드시 이 위치에 만들어야 합니다 — package.json과 같은 폴더

my-project/ ← 프로젝트 최상단 폴더 ├── .env ← 여기에 만들어야 함 ├── .gitignore ← 여기에 만들어야 함 ├── package.json ← 이 파일과 같은 위치 ├── server.js └── public/

가장 많이 하는 실수: public 폴더 안이나 src 폴더 안에 만드는 것입니다. 반드시 server.js, package.json과 같은 최상단에 만들어야 합니다.

1

VS Code에서 .env 파일 만들기 — 정확한 방법

프로젝트 폴더 최상단에 만들어야 합니다. 파일 이름이 정확히 .env여야 합니다. .env.txt가 아닙니다.

VS Code에서 정확하게 만드는 순서

1

VS Code 왼쪽 탐색기에서 프로젝트 폴더명 우클릭 또는 새 파일 아이콘(📄+) 클릭

2

파일 이름 입력창에 .env 입력 → Enter

3

왼쪽 탐색기에 .env 파일이 생성된 것을 확인

⚠️ Windows에서 .env가 이상하게 보일 때: 파일 탐색기에서는 안 보일 수 있지만 VS Code 탐색기에는 정상 표시됩니다. VS Code 기준으로 확인하세요.

⚠️ .env.txt로 저장되지 않도록 주의하세요. 확장자가 없는 파일명 그대로여야 dotenv가 읽습니다.

✅ 확인: VS Code 왼쪽 탐색기에 .env가 package.json과 같은 위치에 보이면 완료

2

API 키 넣기 — KEY=VALUE 형식

.env 파일 안에는 KEY=VALUE 형태로 한 줄씩 씁니다. 등호(=) 앞뒤에 공백이 없어야 합니다. 따옴표는 있어도 없어도 작동하지만, 특수문자가 있으면 따옴표로 감싸세요.

.env 파일 내용 예시

# OpenAI API 키 OPENAI_API_KEY=sk-proj-여기에실제키입력 # Supabase (6편에서 사용) SUPABASE_URL=https://abcdef.supabase.co SUPABASE_KEY=eyJhbGciOiJ... # 포트 설정 (선택) PORT=3000

✅ KEY 이름은 대문자 + 언더스코어가 관례입니다. 소문자도 작동하지만 대문자로 쓰는 것이 표준입니다.

🚫 .gitignore 설정 — GitHub 차단 필수

.env 파일을 만들었다면 반드시 .gitignore에 추가해야 합니다. 이걸 빠뜨리면 git push 시 .env도 함께 GitHub에 올라갑니다.

1

.gitignore 파일 확인 또는 생성

3편(GitHub)에서 이미 만들었다면 그 파일에 추가하면 됩니다. 없다면 프로젝트 최상단에 .gitignore 파일을 새로 만듭니다.

.gitignore 파일 내용

# 환경변수 — 절대 GitHub에 올라가면 안 됨 .env .env.local .env.*.local # 무거운 패키지 폴더 node_modules/ # Mac 시스템 파일 .DS_Store

⚠️ .gitignore에 .env를 추가한 후에도 이미 커밋된 .env가 있다면 git rm --cached .env를 실행해야 합니다.

2

.env가 제외됐는지 확인

git add . 후 어떤 파일이 포함되는지 확인할 수 있습니다.

확인 명령어

git status # 결과에 .env가 없으면 정상 (제외됨) → .env가 목록에 없으면 GitHub에 올라가지 않습니다

✅ git status 결과에 .env가 없으면 안전하게 제외된 것입니다

팀원이나 다른 기기에서 작업할 때:
.env 파일은 GitHub에 없으므로 직접 전달해야 합니다. 카카오톡보다는 1:1 메시지나 비밀 메모 앱을 사용하세요. 이메일도 평문 전송이므로 권장하지 않습니다.

💻 코드에서 .env 값 읽어오기

.env 파일을 만들었다면 코드에서 그 값을 읽어오는 방법을 알아야 합니다. Node.js에서는 두 가지 방법이 있습니다.

💡 왜 dotenv라는 걸 또 설치해야 하나요?

Node.js는 기본적으로 .env 파일을 자동으로 읽지 못합니다.
그래서 dotenv라는 작은 도구를 추가해서 "비밀 메모장을 읽어오는 기능"을 연결합니다.
딱 한 줄(npm install dotenv)로 설치하고, 코드 첫 줄에 한 줄만 추가하면 됩니다.
AI에게 "dotenv로 .env 읽도록 수정해줘"라고 요청하면 나머지는 AI가 다 해줍니다.

Node.js에서 .env 값 읽는 두 가지 방법

dotenv 패키지

npm install dotenv 후 코드 상단에 require('dotenv').config() 한 줄 추가. 가장 많이 쓰는 방법. AI에게 "dotenv로 .env 읽도록 코드 수정해줘"라고 요청하면 됩니다.

Node 20+ 내장

Node.js 20 이상에서는 --env-file 플래그로 별도 패키지 없이 .env를 읽을 수 있습니다. AI에게 물어보면 현재 환경에 맞는 방법을 알려줍니다.

server.js — dotenv 사용 예시

# 파일 최상단에 추가 require('dotenv').config(); # 이후 어디서든 process.env.키이름으로 사용 const apiKey = process.env.OPENAI_API_KEY; const port = process.env.PORT || 3000;

✅ .env가 제대로 연결됐는지 확인하기 — 성공 체험

설정이 끝났다면 실제로 값이 읽히는지 확인해봅니다. 이 순간이 ".env가 작동하는구나"를 처음 체감하는 순간입니다.

server.js에 테스트 코드 추가 → 터미널에서 확인

# server.js 맨 위에 임시로 추가 require('dotenv').config(); console.log('키 확인:', process.env.OPENAI_API_KEY);
# 터미널에서 실행 node server.js
# ❌ 이렇게 나오면 연결 안 된 것 키 확인: undefined
# ✅ 이렇게 나오면 연결 성공 키 확인: sk-proj-여기에실제키가보임...

✅ 실제 값이 터미널에 보이면 — .env와 dotenv 연결이 완전히 성공한 것입니다

⚠️

확인 후 console.log는 반드시 삭제하세요

터미널에서 확인이 됐다면 console.log('키 확인:', ...) 줄은 지워야 합니다.
이 줄이 남아 있으면 서버 실행 시마다 API 키가 터미널에 출력됩니다.

AI에게 요청하는 가장 쉬운 방법:
"내 server.js에서 .env 파일의 OPENAI_API_KEY를 읽어서 사용하도록 코드를 수정해줘. dotenv 패키지 사용해줘."

.env 파일과 server.js 코드 연결 구조 — dotenv, .gitignore 관계

▲ Vercel 배포 환경에 적용하기

3편에서 Vercel 배포를 완성했습니다. .env 파일은 .gitignore로 차단되어 GitHub에 없습니다. 그러므로 Vercel도 그 값을 알 수 없습니다. 따로 입력해야 합니다.

▲ Vercel 환경변수 입력 순서

1

vercel.com → 해당 프로젝트 클릭

2

상단 탭 "Settings" 클릭

3

왼쪽 메뉴 "Environment Variables" 클릭

4

.env 파일의 KEY와 VALUE를 한 줄씩 입력 → "Save" 클릭

5

저장 후 git push → Vercel 자동 재배포 → 환경변수 적용 완료

환경변수를 추가하거나 수정했다면:
Vercel에서 Settings → Environment Variables 업데이트 후 반드시 재배포(git push)를 해야 새 값이 적용됩니다. 저장만 하고 재배포를 안 하면 이전 값이 계속 사용됩니다.

📌 핵심 요약

• 📄.env 파일은 API 키를 코드 밖에 따로 보관하는 비밀 메모장입니다. 코드에는 "메모장에서 가져와(process.env.키이름)"라고만 쓰고 실제 값은 .env에만 있습니다.
• 🚨API 키를 코드에 직접 쓰고 GitHub에 push하면 수 분 안에 봇이 발견합니다. OpenAI 키라면 타인이 내 계정으로 사용하고 비용이 내 카드에 청구됩니다.
• 🚫.gitignore 파일에 .env를 반드시 추가해야 합니다. git status로 .env가 목록에 없는지 확인한 후 push하세요.
• 💻Node.js에서 .env 값을 읽으려면 dotenv 패키지를 설치하고 코드 상단에 require('dotenv').config()를 추가합니다. AI에게 요청하면 자동으로 설정해줍니다.
• ▲Vercel 배포 환경에서는 .env가 없으므로 Vercel 대시보드 → Settings → Environment Variables에서 직접 입력해야 합니다. 입력 후 재배포 필수.
• ➡️이제 6편 Supabase와 7편 OpenAI API를 연결할 준비가 됐습니다. 두 편 모두 .env에 API 키를 보관하는 이 방식을 사용합니다.

❓ 자주 묻는 질문

.env 파일이 뭔가요? 왜 필요한가요?

.env 파일은 API 키처럼 공개되면 안 되는 비밀 정보를 코드 밖에 따로 보관하는 파일입니다. 코드 안에 API 키를 직접 써넣으면 GitHub에 올릴 때 전 세계에 공개됩니다. .env 파일에 보관하고 .gitignore로 GitHub 업로드를 차단하면 코드는 공개되어도 API 키는 안전합니다.

API 키가 GitHub에 올라가면 어떤 일이 생기나요?

GitHub에 올라간 API 키는 수 분 내에 자동 스캔 봇이 발견합니다. OpenAI API 키라면 타인이 내 계정으로 API를 사용하고 그 비용이 내 카드에 청구됩니다. 하루 만에 수십만 원이 청구된 사례도 있습니다. 키가 노출되면 즉시 해당 서비스에서 키를 삭제하고 새 키를 발급받아야 합니다.

.env 파일을 만들었는데 .gitignore에 추가하는 방법을 모르겠어요

프로젝트 폴더 최상단에 .gitignore라는 이름의 파일을 만들고, 그 안에 '.env'를 한 줄 추가하면 됩니다. 이후 git add .를 해도 .env 파일은 포함되지 않습니다. 이미 GitHub에 .env가 올라갔다면 즉시 API 키를 삭제하고 재발급받아야 합니다.

Vercel에 배포할 때 .env 파일의 내용은 어떻게 적용하나요?

.env 파일은 .gitignore로 GitHub에 올라가지 않으므로 Vercel도 그 내용을 알 수 없습니다. Vercel 대시보드 → 프로젝트 → Settings → Environment Variables에서 .env 파일의 키와 값을 직접 입력해야 합니다. 입력 후 재배포(git push)하면 Vercel 환경에서도 API 키가 작동합니다.

API 키 보안 준비 완료 — 이제 진짜 AI 기능을 붙입니다 🤖

.env 습관이 생겼습니다.
이제 실제 외부 서비스를 안전하게 연결할 수 있습니다.

6편에서는 Supabase로 데이터베이스를 연결합니다.
"DB가 뭔지 몰라도 데이터를 저장하는 경험"이 생깁니다.

▶ 다음 편 — 6편

Supabase 입문 — DB 몰라도 데이터 저장하는 법

Supabase 연동, 로그인·저장·테이블 첫 경험

이전 편

GitHub 백업 흐름, commit·push 실전