환경 변수와 .env (Environment Variables)
프로그램이 실행될 때 참조하는 설정값으로, API 키나 비밀번호 같은 민감한 정보를 코드와 분리하여 안전하게 관리하는 방법입니다.
🤔 혹시 이런 경험 있나요?
AI에게 "OpenAI API 연동해줘"라고 했더니, 코드를 만들어주면서 이렇게 말합니다.
".env 파일에
OPENAI_API_KEY=sk-xxxxx를 추가하세요."
.env 파일? 환경 변수? 왜 코드에 직접 안 넣고 따로 파일을 만들라는 걸까요?
이걸 제대로 이해하지 않으면, 바이브코딩으로 만든 프로젝트를 GitHub에 올렸다가 API 키가 전 세계에 공개되는 사고가 벌어질 수 있습니다. 실제로 매우 흔하게 일어나는 일입니다.
🔑 환경 변수, 한마디로 뭘까요?
환경 변수(Environment Variable)는 프로그램이 실행될 때 참조하는 외부 설정값입니다.
코드 안에 직접 적지 않고, 별도의 장소에 보관해두는 비밀 메모장 같은 것입니다. 프로그램이 실행되면 "비밀 메모장에서 이 값을 읽어와"라고 요청하는 방식으로 작동합니다.
🔐 사물함 비밀번호와 같습니다
학교 사물함을 생각해보세요.
- 나쁜 방법: 사물함 비밀번호를 사물함 문 앞에 포스트잇으로 붙여놓는 것 → 코드에 API 키를 직접 적는 것
- 좋은 방법: 비밀번호를 자기 지갑에 따로 보관하는 것 → .env 파일에 API 키를 저장하는 것
두 경우 모두 사물함을 열 수 있지만, 포스트잇 방식은 지나가는 누구나 비밀번호를 볼 수 있습니다.
📄 .env 파일이란?
.env는 환경 변수를 모아놓은 파일입니다. 프로젝트 폴더의 최상위에 만들며, 형식은 매우 간단합니다.
# .env 파일 예시
OPENAI_API_KEY=sk-abc123def456
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
NEXT_PUBLIC_SITE_URL=https://mysite.com코드에서는 이렇게 사용합니다.
// 코드에서 환경 변수 읽기
const apiKey = process.env.OPENAI_API_KEY;이렇게 하면 코드에는 비밀번호가 전혀 남지 않습니다. .env 파일만 안전하게 관리하면 됩니다.
⚠️ .gitignore가 왜 중요한가요?
바이브코딩의 가장 흔한 보안 사고는 이런 순서로 일어납니다.
- AI가 .env 파일을 만들라고 안내합니다.
- API 키를 .env에 저장합니다.
git add .→git commit→git push를 합니다.- .env 파일까지 GitHub에 올라갑니다.
- 전 세계 누구나 여러분의 API 키를 볼 수 있게 됩니다.
이걸 방지하는 것이 .gitignore 파일입니다.
# .gitignore 파일에 이 한 줄을 추가하세요
.env이렇게 하면 git이 .env 파일을 무시해서, GitHub에 올라가지 않습니다.
중요: 대부분의 프로젝트 템플릿(create-next-app 등)은 .gitignore에 .env가 이미 포함되어 있습니다. 하지만 반드시 확인하세요. AI가 만든 프로젝트에서 .gitignore가 빠져있는 경우도 있습니다.
🛠️ 바이브코딩에서 자주 만나는 환경 변수
| 환경 변수 | 용도 | 예시 |
|---|---|---|
OPENAI_API_KEY | AI API 호출 | sk-abc123... |
DATABASE_URL | 데이터베이스 연결 | postgresql://... |
NEXTAUTH_SECRET | 인증 암호화 키 | my-secret-key |
NEXT_PUBLIC_* | 브라우저에서도 사용 가능한 값 | 사이트 URL 등 |
주의:
NEXT_PUBLIC_으로 시작하는 환경 변수는 브라우저에서도 보입니다. 여기에 비밀 키를 넣으면 안 됩니다.
💡 실수를 방지하는 체크리스트
바이브코딩으로 프로젝트를 만들 때, 이 체크리스트를 따르세요.
- 프로젝트 시작 시:
.env파일이.gitignore에 포함되어 있는지 확인 - API 키 입력 시: 코드 파일이 아닌
.env파일에만 입력 - GitHub에 올리기 전:
git status로 .env가 추적 목록에 없는지 확인 - 이미 올려버렸다면: API 키를 즉시 재발급하고, 이전 키를 폐기
- 배포할 때: Vercel, Netlify 등 배포 플랫폼의 환경 변수 설정에 별도로 입력
🚀 배포할 때 환경 변수는 어떻게 하나요?
.env 파일은 여러분의 컴퓨터에만 존재합니다. 프로젝트를 Vercel이나 Netlify에 배포할 때는 배포 플랫폼의 대시보드에서 환경 변수를 별도로 설정해야 합니다.
- Vercel: Settings → Environment Variables
- Netlify: Site settings → Environment variables
- Railway: Variables 탭
이렇게 하면 코드에는 비밀이 없고, 실행 환경에서만 안전하게 값을 읽어올 수 있습니다.
📋 30초 요약
-
환경 변수는 API 키, 비밀번호 같은 민감한 정보를 코드와 분리하여 저장하는 방법입니다.
.env파일에KEY=VALUE형식으로 작성하고, 코드에서는process.env.KEY로 읽어옵니다. -
.gitignore에 .env를 반드시 추가하세요. 이걸 빠뜨리면 API 키가 GitHub에 공개되어 과금 사고나 보안 침해가 발생할 수 있습니다. 바이브코딩에서 가장 흔한 실수입니다.
-
배포할 때는 배포 플랫폼(Vercel, Netlify 등)의 환경 변수 설정에 별도로 입력해야 합니다. .env 파일은 여러분의 컴퓨터에만 존재하므로, 서버에는 직접 전달해야 합니다.
바이브코딩으로 프로젝트를 만들고 GitHub에 올리려고 합니다. 다음 중 반드시 확인해야 할 사항은 무엇일까요?
연관 개념
터미널과 CLI (Terminal & CLI)
컴퓨터에게 텍스트 명령어를 입력해서 작업을 수행하는 도구입니다. AI 코딩 도구가 '이 명령어를 실행하세요'라고 할 때 사용하는 바로 그 검은 화면입니다.
Git과 버전 관리 (Version Control)
파일의 변경 이력을 기록하고 관리하는 시스템입니다. AI가 코드를 대량으로 수정해도, 이전 상태로 되돌리거나 변경 내역을 추적할 수 있게 해줍니다.
패키지 매니저 (npm)
다른 개발자가 만든 코드(패키지)를 쉽게 설치하고 관리할 수 있는 도구입니다. AI가 프로젝트를 만들면 가장 먼저 'npm install'을 실행하라고 하는데, 이것이 바로 필요한 패키지를 설치하는 명령어입니다.
관련 인사이트
바이브코딩 vs AI 에이전트 다른점 알아보기
바이브코딩과 AI 에이전트(Claude Code 등)를 모두 실무에 사용해 본 경험을 바탕으로, 둘의 작업 방식·코드 이해 수준·적합한 상황이 어떻게 다른지 비유와 비교표로 정리했습니다.
초보자를 위한 OAuth 2.0 이해하기
바이브코딩과 AI 에이전트로 빠르게 서비스를 만들 수 있는 시대입니다. 하지만 인증 구조를 이해하지 못하면 비밀번호가 코드에 그대로 노출되는 사고가 일어납니다. 인증의 기본 개념부터 OAuth 2.0까지, 비개발자도 이해할 수 있도록 정리했습니다.
Claude Code 커뮤니티에서 찾은 커스텀 Skill 세 가지 패턴
Claude Code의 핵심은 코드 생성이 아니라 Skill 시스템입니다. TDD 강제, 팀 맞춤 코드 리뷰, 실행 가능한 런북까지 — 전 세계 커뮤니티에서 실제로 쓰이는 3가지 커스텀 Skill 패턴을 정리했습니다.
