[Vercel]💸 클라우드 요금 폭탄 맞기 싫다면? Vercel에서 API Key 안전하게 관리하는 법

 

 

안녕하세요!

지난 포스팅에서 Vercel로 프로젝트를 배포하는 방법을 알아봤는데요. 배포를 하려다 보면 이런 고민이 생깁니다.

 

"구글 맵이나 GPT API를 쓰는데, 이 Key를 코드에 적어서 올려도 되나요?"

 

 

정답부터 말씀드리면 "절대 안 됩니다."

하지만 배포는 해야 하니 Key를 서버에 등록은 해야겠죠? 오늘은 내 소중한 지갑과 데이터를 지키기 위해, Vercel에서 API Key를 안전하게 다루는 정석적인 방법을 알려드립니다.

 

---

🛑 1. 절대 하면 안 되는 행동 (하드코딩)

코드 파일(index.js, page.tsx 등) 안에 API Key를 직접 적는 것을 '하드코딩'이라고 합니다.

    // ❌ 위험! 이렇게 작성해서 GitHub에 올리면 큰일 납니다.
const apiKey = "AIzaSyD-1234567890abcdefg";
  

 

왜 위험한가요?

GitHub에 코드를 Push하는 순간, 전 세계 해커들의 봇(Bot)이 3초 안에 당신의 Key를 발견하고 탈취합니다. 자고 일어났더니 클라우드 요금이 수백만 원 결제되어 있었다는 괴담의 주인공이 될 수 있습니다.

---

✅ 2. 해결책: Vercel 환경 변수 (Environment Variables)

Vercel은 비밀스러운 값들을 코드와 분리해서 보관해 주는 디지털 금고 기능을 제공합니다. 바로 환경 변수입니다.

Step 1. Vercel 대시보드에 등록하기

1. Vercel 대시보드에서 내 프로젝트를 클릭합니다.
2. 상단 탭의 [Settings]로 들어갑니다.
3. 좌측 메뉴의 [Environment Variables]를 클릭합니다.
4. Key와 Value를 입력하고 [Add]를 누릅니다.
   • Key: 변수 이름 (예: GOOGLE_MAPS_KEY)
   • Value: 실제 API Key 값 (예: AIzaSyD...)

 

Step 2. 코드에서 불러오기

이제 코드에서는 실제 Key 값 대신 변수 이름을 사용합니다. GitHub에는 이 코드만 올라가니 안전하죠!

    // ✅ 안전! GitHub에는 변수 이름만 올라갑니다.
const apiKey = process.env.GOOGLE_MAPS_KEY;
  

---

🧐 3. 잠깐! 키의 용도에 따라 이름이 다릅니다 (중요)

Google API Key는 용도에 따라 설정법이 조금 다릅니다. 특히 Next.js를 쓰신다면 주목하세요!

 

Case A. 브라우저에서 보여야 하는 키 (예: Google Maps, Firebase)

지도를 띄우려면 브라우저(프론트엔드)가 구글 서버와 통신해야 합니다. 즉, 이 키는 어쩔 수 없이 사용자에게 노출됩니다.

• 변수명 규칙: NEXT_PUBLIC_ 접두사를 꼭 붙여야 합니다.
  • 예: NEXT_PUBLIC_GOOGLE_MAPS_API_KEY
• 보안 대책: 아래 **[4번 챕터]**의 구글 콘솔 설정을 반드시 해야 합니다.

 

Case B. 절대 노출되면 안 되는 키 (예: OpenAI, Google Gemini, Admin SDK)

AI 모델이나 데이터베이스 관리자 키는 서버 내부에서만 써야 합니다.

• 변수명 규칙: 접두사 없이 씁니다.
  • 예: GOOGLE_GEMINI_API_KEY
• 이렇게 하면 브라우저에서는 이 값을 읽을 수 없고(undefined), 오직 **서버 사이드(API Routes 등)**에서만 접근 가능해 안전합니다.

---

🛡️ 4. 마지막 방어선: 구글 클라우드 콘솔 설정

Case A처럼 브라우저에 노출되는 키(NEXT_PUBLIC_...)는 환경 변수로 숨겨도, 개발자 도구(F12)를 열면 누구나 볼 수 있습니다.

"그럼 훔쳐 가서 쓰면 어떡해요?"

그래서 **구글 클라우드 콘솔(Google Cloud Console)**에서 사용처 제한을 걸어야 합니다.

1. Google Cloud Console 접속 -> API 및 서비스 -> 사용자 인증 정보 이동.
2. 사용 중인 API Key 클릭.
3. 애플리케이션 제한사항 설정에서 [웹사이트] 선택.
4. 웹사이트 제한 항목에 내 도메인을 등록합니다.
   • https://my-project.vercel.app/*
   • https://www.custom-domain.com/*
   • http://localhost:3000/* (개발용)

이렇게 설정하면 해커가 키를 훔쳐 가도, 여러분의 도메인 외의 사이트에서는 작동하지 않습니다.

 

---

📝 3줄 요약

1. GitHub에 올리는 코드에는 절대 Key를 적지 마세요.
2. Key는 무조건 Vercel Settings > Environment Variables에 등록해서 쓰세요.
3. 브라우저에 노출되는 키(Maps 등)는 구글 콘솔 사이트에서 도메인 제한을 꼭 거세요.

보안은 귀찮지만, 사고가 터지면 되돌릴 수 없습니다. 지금 바로 내 프로젝트의 Key 관리가 잘 되어 있는지 확인해 보세요! 🔒