내 친구가 프론트엔드에 API 키를 넣었다가 하룻밤 만에 1000달러를 날렸습니다. 보안에 대해 이야기해 봅시다.

지난달에 제 친구에게 일어난 일입니다. 친구가 Vibe-coded로 이미지 생성 앱을 만들고, 초기 사용자들을 위해 API 제공업체 계정에 1000달러를 충전한 뒤 배포하고 기분 좋게 잠들었습니다. 아침에 일어나 보니 잔액이 0원이었습니다. 누군가 프론트엔드 JS에서 API 키를 탈취해 하룻밤 사이에 전부 써버린 것이죠.

친구는 수익은커녕 출시 예산만 전부 날렸습니다. 앱은 이제 죽었습니다.

이런 일이 Vibe-coder들에게 계속 일어나고 있는데, 왜 그런지 혹은 어떻게 하면 안 되는지 제대로 설명해 주는 사람이 없습니다. 그래서 제가 설명해 드립니다.

"비밀(Secret)"이란 무엇인가

비밀이란 앱이 작동하는 데 필요하지만 사용자가 절대 봐서는 안 되는 민감한 설정 정보를 말합니다. API 키, 데이터베이스 비밀번호, 웹훅 서명 키 등이 여기에 해당합니다. 문자열 자체가 돈입니다. 키를 가진 사람은 누구나 돈을 쓸 수 있습니다.

Vibe-coder들이 비밀을 유출하는 세 가지 방법 (고통스러운 순서대로)

1. 키가 프론트엔드에 있는 경우. 앱이 브라우저에서 OpenAI/Replicate/Stripe를 직접 호출하면, 키는 JS 번들 안에 들어갑니다. 우클릭해서 소스 보기 하면 끝입니다. 거기서는 숨길 방법이 전혀 없습니다. 코드 축소(minification)는 아무런 도움이 안 됩니다.

2. 키가 리포지토리에 하드코딩되어 GitHub에 푸시된 경우. GitGuardian 같은 스캐너는 새 커밋이 올라오면 몇 분 안에 훑어봅니다. 봇을 돌리는 사람들은 새로운 키를 낚아채서 여러분이 알아차리기도 전에 자동으로 잔액을 털어갑니다. 커밋을 삭제해도 소용없습니다. 이미 깃 히스토리에 남아있고 스크래핑된 상태니까요.

3. 키를 코딩 에이전트에 붙여넣는 경우. 이건 비교적 최근에 생긴 문제라 사람들이 충분히 이야기하지 않습니다. Claude Code / Codex / Cursor 채팅창에 원본 키를 던져주면, 에이전트는 종종 그걸 설정 파일이나 .env, 혹은 더 나쁘게는 소스 코드 안에 직접 써넣습니다. 그 상태로 코드를 푸시하면 바로 2번 문제로 돌아가는 거죠. 에이전트는 여러분이 시킨 대로 했을 뿐인데, 그게 잘못된 방법이었던 겁니다.

실제로 해야 할 일

핵심은 키를 클라이언트에서 완전히 분리하는 것입니다. 키를 서버 측에 보관하고 백엔드를 통해 호출을 라우팅하세요. 거창한 게 아닙니다.

백엔드 구성은 수준에 따라 몇 가지 옵션이 있습니다:

Cloudflare Workers의 Worker Secrets나 Supabase의 Vault + Edge Functions를 사용하는 것이 정석입니다. 무료 티어만으로도 충분합니다. 문서를 조금 읽어볼 의지만 있으면 됩니다.

문서가 어렵게 느껴지는 초보자라면 Claude Code / Codex와 연동되어 비밀 관리를 대신 해주는 EdgeSpark 같은 가벼운 도구도 있습니다. 무료이고 Cloudflare만큼 기능이 많지는 않지만 온보딩이 쉽습니다. 한 가지 좋은 점은, 에이전트에 API 키를 붙여넣으려 하면 실제로 막아주고 웹 UI를 통해 입력하게 만든다는 점입니다. 사소하지만, 대부분의 유출이 바로 그 순간에 일어납니다.

결론은 좋은 도구라면 안전한 경로를 기본값으로 만들어야 한다는 것입니다. 키를 유출하지 않으려고 애쓸 필요가 없어야 합니다. 제품 자체가 애초에 유출하기 어렵게 만들어야 합니다.

TL;DR

프론트엔드에 키를 두면 = 낯선 사람에게 공짜 돈을 주는 것

GitHub에 키를 올리면 = 봇에게 공짜 돈을 주는 것

에이전트 채팅에 키를 넣으면 = 결국 위 두 가지 상황이 발생함

백엔드를 사용하세요. 제대로 배우고 싶다면 Cloudflare나 Supabase를, 그냥 간단히 처리하고 싶다면 더 가벼운 도구를 쓰세요.

친구의 이야기가 너무 안타까웠고, 똑같은 실수를 하기 직전인 사람들을 계속 보게 되어 이 글을 공유합니다.