앱을 만들다 보면 OpenAI API 키, 데이터베이스 비밀번호, 카카오 소셜 로그인 Secret 같은 민감한 정보를 코드에서 써야 할 때가 옵니다. 이것들을 코드에 직접 쓰면 안 됩니다. 환경변수(environment variable)가 그 해답입니다.
API 키란 무엇인가
API 키(API key)는 외부 서비스가 '이 요청이 어디서 왔는지'를 식별하는 비밀번호 같은 것입니다. OpenAI의 API 키를 가지면 ChatGPT 기능을 내 앱에서 쓸 수 있고, 사용량에 따라 내 카드에 요금이 청구됩니다. 따라서 키가 유출되면 다른 사람이 내 돈으로 API를 쓸 수 있습니다.
실수로 API 키를 GitHub에 올리면, 수십 초 안에 자동화 봇이 발견하고 도용합니다. 실제로 GitHub에서 키가 노출된 개발자들이 수백만 원의 요금 폭탄을 맞은 사례가 많습니다. 절대 코드에 직접 키를 쓰지 마세요.
.env 파일 — 비밀을 담는 금고
프로젝트 루트 폴더에 .env(점 env)라는 파일을 만들어 거기에 비밀 값을 저장합니다. 파일 이름이 점으로 시작해서 Finder 같은 파일 탐색기에서는 기본적으로 숨겨집니다.
.env 파일 예시
# .env 파일 (프로젝트 루트에 위치)
# OpenAI API 키
OPENAI_API_KEY=sk-proj-xxxxxxxxxxxxxxxxxxxxxxxx
# Supabase 연결 정보
NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxxxxxxx
# 데이터베이스 URL (절대 공개 금지)
DATABASE_URL=postgresql://user:password@host:5432/dbname코드에서 환경변수 사용하기
코드에서는 실제 키 값을 쓰는 대신, 환경변수 이름을 씁니다. process.env.변수이름 형태로 접근합니다. Next.js에서 브라우저에서도 접근 가능하게 하려면 변수 이름 앞에 NEXT_PUBLIC_을 붙입니다.
코드에서 환경변수 사용 (올바른 방법)
// 잘못된 방법 — 키를 코드에 직접 쓰면 절대 안 됩니다
const client = new OpenAI({ apiKey: 'sk-proj-abc123...' }); // 위험!
// 올바른 방법 — 환경변수에서 읽기
const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
// 환경변수가 없으면 시작 시 에러를 던져서 빠르게 알아채기
if (!process.env.OPENAI_API_KEY) {
throw new Error('OPENAI_API_KEY 환경변수가 설정되지 않았습니다.');
}.gitignore — Git이 추적하지 않을 파일 목록
.gitignore 파일에 .env를 추가하면 Git이 이 파일을 추적하지 않아 GitHub에 올라가지 않습니다. 프로젝트를 처음 만들 때 AI가 자동으로 만들어 주기도 하지만, 반드시 확인하세요.
.gitignore에 .env 추가하기
# .gitignore 파일
.env
.env.local
.env.production
node_modules/
.next/
dist/
# .env가 gitignore에 있는지 확인하는 명령
cat .gitignore | grep .env.env.example 파일을 만들어서 실제 값 없이 어떤 변수가 필요한지 예시만 담아 GitHub에 올리면, 팀원이나 미래의 자신이 어떤 환경변수를 설정해야 하는지 알 수 있습니다. 예: OPENAI_API_KEY=여기에_실제_키_입력
바이브코딩할 때: AI에게 외부 API를 연동하는 코드를 요청할 때 '환경변수에서 키를 읽도록 작성해줘'라고 명시하면 AI가 처음부터 안전하게 작성합니다. 또한 Vercel이나 Netlify 같은 배포 플랫폼에서는 대시보드의 'Environment Variables' 메뉴에 .env 내용을 따로 입력해야 합니다.