안녕하세요. 저는 최근 6개월간 Vue 3 기반 SaaS 프로젝트를 진행하면서 AI API 통합 작업을 여러 차례 맡아온 개발자입니다. 그 과정에서 가장 자주 받는 질문이 정확히 이것입니다. "Vue나 React 같은 프런트엔드에서 AI API를 직접 호출해도 안전할까요?" 솔직한 대답은 명확합니다. 절대 권장하지 않습니다. 이번 글에서는 제가 직접 경험한 API 키 노출 사고와, 지금 가입할 수 있는 HolySheep AI 게이트웨이를 안전하게 통합하는 전 과정을 단계별로 설명드리겠습니다.
이 튜토리얼은 API를 한 번도 호출해본 적 없는 완전 초보자도 따라 할 수 있도록 구성했습니다. 전문 용어는 가능한 한 풀어서 설명하고, 코드 복사 후 바로 실행할 수 있는 실용적인 예시 위주로 작성했습니다.
프런트엔드에서 API를 직접 호출하면 안 되는 3가지 핵심 이유
먼저 가장 중요한 부분부터 짚고 넘어가겠습니다. 많은 초보 개발자가 "로컬에서 잘 되니까 배포해도 되겠지"라고 생각하지만, 브라우저에서 실행되는 모든 JavaScript 코드는 사용자가 개발자 도구로 열어 볼 수 있습니다. 이것은 단순한 이론이 아니라 실제 제가 겪은 사고의 시작점이었습니다.
이유 1: API 키가 코드 그대로 노출됨
Vite로 빌드한 Vue 프로젝트에서 .env 파일에 API 키를 넣어도,