바이브 코더를 위한 보안 기초
코딩을 모르더라도, 보안 실수는 큰 피해로 이어질 수 있습니다. 여기서는 바이브 코딩을 할 때 반드시 알아야 할 보안 개념과, 직접 확인할 수 있는 방법들을 알려드립니다.
API 키가 노출되면 하룻밤에 수백만원이 청구될 수 있습니다
10분이면 예방할 수 있는 내용입니다. 이 페이지만 읽으면 기본적인 보안 사고를 막을 수 있어요.
꼭 알아야 할 3가지
이것만 기억하면 대부분의 보안 사고를 막을 수 있습니다
Request URL:
https://api.openai.com/v1/chat/completions
Request Headers:
Authorization: Bearer sk-proj-abc123...xyz789
F12를 누르면 누구나 이 화면을 볼 수 있습니다. API 키가 그대로 노출!
// page.tsx
const apiKey = "sk-proj-abc123";
fetch(url, {headers: {
Authorization: apiKey
}})
// .env.local (비공개)
API_KEY=sk-proj-abc123
// page.tsx
const apiKey = process.env.API_KEY;
왼쪽처럼 하면 코드가 공개될 때 비밀번호도 노출됩니다. 오른쪽처럼 .env 파일에 보관하세요.
API 키 = 집 열쇠
API 키(API key)는 외부 서비스(AI, 결제, 지도 등)에 접속하는 비밀번호입니다. 이걸 GitHub(코드 저장소)에 올리면 누구나 볼 수 있고, 자동 봇이 몇 분 안에 도용해서 요금을 청구합니다.
실제 사고 예시
AWS 키(클라우드 서비스 비밀번호)를 GitHub(코드 저장소)에 실수로 올린 뒤 하룻밤 사이에 수백만원 청구된 사례가 수도 없이 보고되고 있습니다.
브라우저에서 보이면 = 전 세계가 본다
웹사이트를 만들 때, 코드는 두 곳에서 실행됩니다:
서버 (안전)
app/api/ 폴더 안의 코드. 사용자가 볼 수 없음. API 키(비밀번호)를 여기서만 사용.
브라우저 (노출)
화면에 표시되는 코드. 개발자 도구(F12 키)로 누구나 읽을 수 있음. API 키 절대 금지!
API 키는 코드에 직접 쓰면 안 됩니다
코드 파일 안에 API 키를 직접 적으면, GitHub에 올리는 순간 전 세계에 공개됩니다. 반드시 .env 파일(비밀번호 보관함)에 따로 보관하세요.
const apiKey = "sk-abc123..."코드에 직접 적으면 유출!OPENAI_API_KEY=sk-abc123....env 파일에 보관 (안전)Claude에게 시키면 됩니다
API 키 = 비밀번호 / .env 파일에 보관 / 코드에 직접 적지 않기
보안 설정하기
AI에게 맡기면 30초면 끝납니다
Claude Code에게 맡기기 (가장 쉬운 방법)
Claude Code에 이렇게 말하면 자동으로 설정해줍니다:
CLAUDE.md에 보안 룰 넣기
AI가 코드를 만들 때 보안 실수를 하지 않도록, CLAUDE.md에 보안 규칙을 적어두면 자동으로 지킵니다.
## 보안 규칙
- API 키는 반드시 .env.local에 저장하고, 코드에 직접 적지 않는다
- NEXT_PUBLIC_ 접두사에는 비밀번호를 절대 넣지 않는다 (Supabase secret / service_role 키 포함)
- API 호출(외부 서비스 요청)은 반드시 app/api/ 폴더(서버 전용 코드 영역)에서만 한다
- 사용자 입력은 반드시 검증한 뒤 사용한다
- console.log에 민감한 정보를 출력하지 않는다
- .env 파일은 반드시 .gitignore에 포함되어야 한다이걸 적어두면 Claude Code가 코드를 만들 때 이 규칙을 자동으로 따릅니다.
로그인은 구글 로그인으로 — 비밀번호를 내가 안 가지는 게 안전
내 앱에 로그인 기능이 필요할 때, 이메일·비밀번호를 직접 받아서 저장하면 그 비번을 지키는 책임이 나한테 생겨요(유출 시 큰일). 구글 로그인(소셜 로그인)을 붙이면 비밀번호는 구글이 관리하고 나는 안 가지니 훨씬 안전합니다. 방법은 두 갈래예요.
쉬운 길 (추천) — Supabase Auth의 구글 로그인
이 강의처럼 Supabase를 쓰면, Supabase에 내장된 소셜 로그인을 켜는 게 제일 쉬워요. 구글 클라우드에서 키 2개(클라이언트 ID·시크릿)를 받아 Supabase에 붙여넣으면 끝 — 리다이렉트 주소 같은 까다로운 설정을 Supabase가 많이 대신해줍니다.
직접 붙이는 길 — 생짜 구글 OAuth
Supabase 없이 붙일 수도 있지만 리다이렉트 주소·동의 화면등 손볼 게 더 많아요. AI에게 “구글 OAuth(로그인) 붙여줘”라고 하면 “구글 클라우드에서 이거 이거 하세요”라고 단계별로 안내해줘요.
Supabase Auth로 구글 로그인을 붙여줘. - 구글 클라우드에서 뭘 만들어야 하는지(클라이언트 ID·시크릿), 어디에 붙여넣는지 단계별로 알려줘. - 로그인한 사람만 볼 수 있는 페이지와, 로그아웃 버튼도 같이 만들어줘.
보안 체크하는 4가지 방법
쉬운 것부터 — 전부 할 필요 없이 1번만 해도 충분합니다
Claude Code에게 점검 요청
가장 쉬움Claude Code가 파일을 스캔하고 문제가 있으면 알려줍니다.
Claude Code에게 보안 검사 시키기
추천Node.js에 기본으로 들어 있는 npm audit와 Claude Code에 내장된 /security-review를 쓰면 돼요. 따로 설치할 게 없어요. 아래처럼 말하면 됩니다:
npm audit 돌려서 취약한 패키지가 있는지 알려줘. 그리고 /security-review로 이 프로젝트 보안 검사도 해줘
Claude가 알아서 실행하고, 결과를 한국어로 설명해줍니다.
Claude가 사용하는 도구
/security-review
Claude Code에 내장된 보안 점검 명령어. 내가 작성한 코드에서 키 노출, 권한 누락 같은 위험한 부분을 찾아 알려줍니다.
npm audit
Node.js에 기본 내장된 패키지 보안 검사 도구. 사용 중인 라이브러리에 알려진 취약점이 있는지 확인합니다.
더 구체적으로 시킬 수도 있습니다:
이 프로젝트에 API 키가 코드에 직접 적혀있는지 찾아줘
.env 파일이 .gitignore에 포함되어 있는지 확인해줘
GitHub 무료 보안 기능 활용하기
자동으로 대신공개(Public) 저장소에 코드를 올리면, GitHub이 무료로 제공하는 보안 기능이 자동으로 작동합니다. 별도 설정 없이 바로 사용할 수 있어요.
Secret Scanning — 코드에 API 키나 비밀번호가 포함되면 자동 감지하고 경고
Dependabot — 사용 중인 패키지에 보안 취약점이 발견되면 자동으로 알림 + 업데이트 PR 생성
즉, 공개 저장소에선 실수로 API 키를 올려도 GitHub이 자동으로 잡아서 알려줍니다. 레포지토리 Settings → Security 탭에서 활성화 여부를 확인할 수 있어요.
비공개(Private) 저장소는 달라요. 자동 감지·push 차단은 유료(GitHub Advanced Security)라서, 무료로는 키가 올라가도 아무도 안 알려줘요. 그러니 비공개든 공개든 .env는 절대 커밋하지 않는다가 기본이에요.
배포 전 수동 체크리스트
배포하기 전에 아래를 눈으로 한 번 확인하세요:
가장 쉬운 건 1번(Claude에게 물어보기), 가장 확실한 건 2번(스캐너).
도메인 사서 내 주소로 연결하기
vercel.app 주소를 내 이름·브랜드 주소로 — 어디서 사고, 어떻게 붙이는지
도메인이 뭐고, 왜 사나요?
Vercel로 배포하면 기본 주소가 my-app.vercel.app처럼 나와요. 쓰는 데는 문제없지만, 명함에 넣거나 손님에게 보여주기엔 아쉽죠. 도메인(domain)은 인터넷 주소예요 —mint-design.com이나event.ybm.co.kr처럼요. 연 1~3만원이면 내 이름·브랜드 주소를 살 수 있고, 한 번 사면 그 주소는 온전히 내 것입니다.
① 먼저 도메인을 삽니다 — 어디서?
도메인은 ‘등록처(레지스트라)’에서 사요. 파는 곳은 많은데, 같은 .com이라도 곳마다 가격과 편의성이 다릅니다. 2026년 기준으로 정리하면:
| 등록처 | .com 첫해 | 갱신(다음 해부터) | 한 줄 특징 |
|---|---|---|---|
 Cloudflare | 약 1.4만원 | 똑같음 (원가) | 최저가·평생 같은 값. WHOIS 비공개 무료. 영어 UI. Cloudflare DNS를 쓰는 조건(Vercel 연결엔 오히려 편함) |
| Spaceship | 약 1.4만원 | 거의 똑같음 | 화면이 제일 깔끔하고 쉬움(네임칩 계열). 처음이면 여기부터. 영어 UI |
 Porkbun | 약 1.5만원 | 거의 똑같음 | 군더더기 없고 친절. 영어 UI |
| 가비아 (Gabia) | 1.98만원 (.co.kr 1.65만원) | 연장 시 정상가로 오름 | 국내 1위. 한국어·전화 상담, .co.kr 필요하면 여기. 후이즈도 비슷 |
 GoDaddy | 싼 척하는 첫해 | 약 2.9만원↑ (비쌈) | 가장 유명하지만 추천 안 함 — 갱신비가 비싸요. 결제 전에 갱신가와 약관을 꼭 확인하세요 |
※ 환율·행사에 따라 금액은 조금씩 바뀌어요. 핵심은 “첫해”가 아니라 “갱신가”를 보는 것.
오래 쓸 개인·브랜드 주소
→ Cloudflare. 원가라 갱신해도 값이 안 오르고, 뒤에서 배울 Vercel 연결도 제일 매끄러워요.
처음이라 쉬운 게 최고
→ Spaceship 또는 Porkbun. 화면이 친절해서 헤맬 일이 적어요.
한국어·전화 상담·.co.kr
→ 가비아. 회사 공식 .co.kr 주소가 필요하거나 영어가 부담되면 여기.
‘첫해 990원’ 함정을 조심하세요
② 산 도메인을 Vercel에 연결합니다
도메인을 샀으면, 그 주소가 내 Vercel 사이트를 가리키도록 이어주면 끝이에요.Cloudflare·가비아 어디서 샀든 방법은 같습니다— 산 곳의 ‘DNS 관리’ 화면에, Vercel이 알려주는 값 하나만 넣으면 돼요.
Vercel 대시보드에서 도메인 추가
vercel.com → 프로젝트 → Settings → Domains에서 사용하려는 도메인(예: event.ybm.co.kr)을 입력하고 Add를 클릭합니다.
DNS 레코드 설정
Vercel이 안내하는 DNS 레코드를 도메인 관리 업체(가비아, Cloudflare 등)에 추가합니다. 값은 프로젝트마다 달라서, Domains 화면에 나온 값을 그대로 복사해서 넣으세요.
Type: CNAME
Name: event (서브도메인)
Value: (Domains 화면에 나온 값을 그대로 복사)
루트 도메인(ybm.co.kr)을 연결할 때도 Domains 화면이 알려주는 레코드 종류와 값을 그대로 따라 하세요.
SSL 인증서 자동 발급 확인
DNS 설정 후 몇 분 기다리면 Vercel이 자동으로 SSL 인증서(https)를 발급합니다. Domains 탭에서 상태가 Valid Configuration으로 바뀌면 완료입니다.
DNS 전파에 시간이 걸릴 수 있어요
만약 사고가 나면
당황하지 말고 이 순서대로
API 키가 유출되었을 때 — 4단계 대응
해당 서비스 콘솔에서 유출된 키를 즉시 폐기(Revoke)
새 키를 발급받아서 .env.local에 교체
해당 서비스 Usage를 확인해서 부정 사용 여부 점검
깃 저장 기록에 옛 키가 남아있을 수 있어요. 1번에서 폐기했는지 한 번 더 확인하세요 (폐기하면 남은 기록은 쓸모없어져요)
GitHub(코드 저장소)에 한 번이라도 올라간 키는, 삭제해도 저장 기록에 남습니다. 반드시 키를 폐기하고 새로 발급받아야 합니다.
한 줄 요약
API 키는 .env.local에만. 코드에 직접 적지 않는다.
NEXT_PUBLIC_에 비밀번호 금지. 브라우저에서 보인다.
공개 전에 보안 스캐너를 돌려라. 코드를 훑어서 흔한 취약점을 대신 찾아준다.
코드를 올리면 자동으로 잡아준다. 하지만 내 컴퓨터에서 먼저 확인하는 습관을.