프론트엔드와 백엔드 (Frontend & Backend)
프론트엔드는 사용자가 보고 상호작용하는 화면(브라우저) 부분이고, 백엔드는 데이터 처리와 비즈니스 로직을 담당하는 서버 부분입니다. 이 구분을 이해해야 바이브코딩에서 보안 사고를 방지할 수 있습니다.
🤔 혹시 이런 경험 있나요?
AI에게 "OpenAI API로 챗봇 만들어줘"라고 했더니, 코드를 만들어주면서 이렇게 경고합니다.
"이 API 호출은 반드시 서버 사이드에서 해야 합니다. 클라이언트에서 직접 호출하면 API 키가 노출됩니다."
서버 사이드? 클라이언트? 프론트엔드? 백엔드? 대체 뭐가 다른 건지, 왜 중요한 건지 잘 모르겠다면 이 글이 도움이 될 것입니다.
🔑 프론트엔드와 백엔드, 한마디로 뭘까요?
프론트엔드(Frontend)는 사용자가 직접 보고 상호작용하는 부분입니다. 웹 브라우저에서 보이는 화면, 버튼, 입력창, 애니메이션 등이 모두 프론트엔드입니다.
백엔드(Backend)는 사용자 눈에 보이지 않는 뒷단에서 작동하는 부분입니다. 데이터 저장, 로그인 인증, 결제 처리, 외부 API 호출 등을 담당합니다.
🍽️ 레스토랑으로 이해하기
레스토랑에 비유하면 명확해집니다.
| 구분 | 레스토랑 | 웹 서비스 |
|---|---|---|
| 프론트엔드 | 홀 (메뉴판, 테이블, 인테리어) | 브라우저 화면 (버튼, 디자인, 애니메이션) |
| 백엔드 | 주방 (요리, 식자재 관리, 레시피) | 서버 (데이터 처리, 인증, API 호출) |
| 소통 방식 | 웨이터가 주문을 전달 | API가 요청을 전달 |
손님(사용자)은 홀(프론트엔드)만 볼 수 있습니다. 주방(백엔드)에서 무슨 일이 일어나는지, 레시피(로직)가 어떤지는 알 수 없습니다. 그래서 비밀 레시피(API 키)는 반드시 주방(백엔드)에 보관해야 합니다.
⚠️ 바이브코딩에서 이게 왜 중요한가요?
이 구분을 모르면 바이브코딩에서 심각한 보안 문제가 발생합니다.
프론트엔드 코드는 누구나 볼 수 있습니다
브라우저에서 F12(개발자 도구)를 누르면, 프론트엔드의 모든 코드가 보입니다. 여기에 API 키, 비밀번호, 관리자 로직 같은 것이 있으면 누구나 가져갈 수 있습니다.
// 절대 하면 안 되는 것 (프론트엔드에 API 키 노출)
const response = await fetch('https://api.openai.com/v1/chat', {
headers: { 'Authorization': 'Bearer sk-abc123...' } // 누구나 볼 수 있음!
});// 올바른 방법 (백엔드 API를 거쳐서 호출)
const response = await fetch('/api/chat', {
method: 'POST',
body: JSON.stringify({ message: '안녕하세요' })
});
// API 키는 서버(백엔드)에만 존재, 사용자는 볼 수 없음AI가 코드를 만들 때 확인해야 할 것
AI에게 코드를 요청했을 때, 다음을 꼭 확인하세요.
- API 키가 프론트엔드 코드에 직접 들어가 있지 않은지
- 데이터베이스 접근이 프론트엔드에서 직접 이루어지지 않는지
- 민감한 로직(결제, 인증)이 백엔드에 있는지
⚙️ 파일 위치로 구분하는 방법
Next.js 같은 프레임워크에서는 파일 위치로 프론트엔드와 백엔드를 구분할 수 있습니다.
my-project/
├── app/
│ ├── page.tsx # 프론트엔드 (브라우저에서 실행)
│ ├── layout.tsx # 프론트엔드
│ └── api/
│ └── chat/
│ └── route.ts # 백엔드 (서버에서 실행)
├── components/
│ └── ChatBox.tsx # 프론트엔드
└── lib/
└── openai.ts # 백엔드에서만 import해야 함app/api/폴더 안의 파일 → 백엔드 (서버에서 실행)- 나머지 page, component 파일 → 프론트엔드 (브라우저에서 실행)
Next.js가 바이브코딩에서 많이 쓰이는 이유: 프론트엔드와 백엔드를 하나의 프로젝트에서 관리할 수 있기 때문입니다. AI가 "Next.js로 만들어줄게"라고 하는 이유가 여기에 있습니다.
🛠️ 프론트엔드와 백엔드의 역할 정리
| 항목 | 프론트엔드 | 백엔드 |
|---|---|---|
| 실행 환경 | 브라우저 | 서버 |
| 사용 언어 | HTML, CSS, JavaScript | Node.js, Python 등 |
| 사용자 접근 | 코드를 볼 수 있음 | 코드를 볼 수 없음 |
| 담당 역할 | 화면 표시, 사용자 입력 처리 | 데이터 저장, 인증, API 호출 |
| 보안 민감 정보 | 절대 두면 안 됨 | 여기에 보관 |
| 예시 | 버튼 디자인, 폼 입력 | 회원가입 처리, 결제 로직 |
💡 바이브코딩 실전 체크리스트
AI가 만든 코드를 확인할 때, 이 질문들을 던져보세요.
- "이 API 키는 어디에 있지?" → 프론트엔드 파일에 있으면 위험합니다.
- "이 로직은 누가 실행하지?" → 브라우저에서 실행되면 사용자가 조작할 수 있습니다.
- "데이터베이스에 직접 접근하는 코드가 어디에 있지?" → 반드시 백엔드에 있어야 합니다.
확신이 없으면 AI에게 "이 코드가 서버에서 실행되는 거야, 브라우저에서 실행되는 거야?"라고 물어보세요.
📋 30초 요약
-
프론트엔드는 사용자가 보는 화면(브라우저), 백엔드는 눈에 보이지 않는 서버입니다. 레스토랑의 홀과 주방의 관계와 같습니다.
-
프론트엔드 코드는 누구나 볼 수 있습니다. 따라서 API 키, 비밀번호, 민감한 로직은 반드시 백엔드에 두어야 합니다. 이 규칙을 어기면 보안 사고가 발생합니다.
-
Next.js에서는
app/api/폴더가 백엔드, 나머지가 프론트엔드입니다. AI가 만든 코드에서 API 키가 어디에 있는지 항상 확인하고, 의심되면 AI에게 "이거 서버에서 실행되는 거 맞아?"라고 꼭 물어보세요.
이 글이 도움이 되셨다면 공유해 주세요
메신저로 바로 보내거나 링크를 복사할 수 있습니다.
바이브코딩으로 OpenAI API를 사용하는 챗봇을 만들었습니다. 다음 중 보안상 올바른 구현 방식은 무엇일까요?
이어서 배우면 좋은 개념
패키지 매니저 (npm)
다른 개발자가 만든 코드(패키지)를 쉽게 설치하고 관리할 수 있는 도구입니다. AI가 프로젝트를 만들면 가장 먼저 'npm install'을 실행하라고 하는데, 이것이 바로 필요한 패키지를 설치하는 명령어입니다.
REST API
서로 다른 프로그램이 인터넷을 통해 데이터를 주고받을 수 있도록 정해진 규칙으로 소통하는 방식입니다.
데이터베이스 (Database)
데이터를 체계적으로 저장하고, 필요할 때 빠르게 찾아 쓸 수 있도록 정리해주는 디지털 저장소입니다.
배포 (Deployment)
내 컴퓨터에서만 돌아가던 프로젝트를 인터넷에 올려서 누구나 접속할 수 있게 만드는 과정입니다.
관련 인사이트
- Qwen3.8 27B 로컬 실행 결과: 24GB 맥에서는 CPU로 떨어집니다Qwen3.8 27B는 알리바바 Qwen 팀이 2026년 8월 공개한 Apache 2.0 오픈 웨이트 모델입니다. 메모리 24GB 맥미니 M4 프로에 직접 설치해 돌려 보니 GPU에 올라가지 못하고 CPU로 실행됐고, 그때 측정한 속도를 그대로 정리했습니다.
- 코덱스 CLI와 클로드 코드 비교 (같은 도구를 만들게 해 봤습니다)코덱스 CLI와 클로드 코드는 터미널에서 파일을 직접 읽고 만드는 코딩 도구입니다. 두 도구에 똑같은 규격서를 주고 같은 도구를 만들게 해서 걸린 시간, 결과물 규모, 안전장치가 어떻게 다른지 측정했습니다.
- 코덱스 CLI 사용법: 초보 블로거를 위한 GEO 인용 검사 도구 만들기 과정코덱스 CLI는 터미널에서 파일을 직접 읽고 만드는 코딩 도구입니다. 빈 폴더에서 시작해 내 글이 AI 답변에 인용되기 쉬운지 확인하는 GEO 점검 도구가 나올 때까지, 시킬 말 전문과 명령을 그대로 정리했습니다.
- 구글 픽셀 11, Qwen3.8, 커서 인수로 본 AI 배포 경쟁AI 배포 경쟁은 같은 모델을 몇 개의 화면에 넣어 두느냐로 우열이 정해지는 경쟁입니다. 2026년 8월 12일부터 15일 사이에 나온 발표 다섯 건을 놓고, 각 회사가 모델을 어디까지 밀어 넣었는지 공식 자료 기준으로 정리했습니다.
- VS Code에서 클로드 코드 실행하기 (윈도우 화면 그대로 따라하기)클로드 코드를 설치했는데 검은 PowerShell 창이 부담스러운 분을 위해, VS Code를 설치하고 그 안 터미널에서 클로드 코드를 실행하는 순서를 화면 그림과 함께 정리했습니다. 승인 질문을 건너뛰는 bypass 모드까지 담았습니다.
- 챗GPT 리눅스 데스크톱 앱 프리뷰 정리: 설치 패키지와 지원 기능챗GPT 리눅스 데스크톱 앱은 오픈AI가 2026년 8월 11일 프리뷰로 공개한 리눅스용 공식 앱으로, ChatGPT와 Work, Codex를 하나의 앱에서 쓸 수 있습니다. 설치 패키지 4종과 테스트된 배포판, 요금 조건에서 확인된 것과 아직 확정되지 않은 것을 구분해 정리했습니다.
