프론트엔드와 백엔드 (Frontend & Backend)

🤔 혹시 이런 경험 있나요?

AI에게 "OpenAI API로 챗봇 만들어줘"라고 했더니, 코드를 만들어주면서 이렇게 경고합니다.

"이 API 호출은 반드시 서버 사이드에서 해야 합니다. 클라이언트에서 직접 호출하면 API 키가 노출됩니다."

서버 사이드? 클라이언트? 프론트엔드? 백엔드? 대체 뭐가 다른 건지, 왜 중요한 건지 잘 모르겠다면 이 글이 도움이 될 것입니다.

🔑 프론트엔드와 백엔드, 한마디로 뭘까요?

프론트엔드(Frontend)는 사용자가 직접 보고 상호작용하는 부분입니다. 웹 브라우저에서 보이는 화면, 버튼, 입력창, 애니메이션 등이 모두 프론트엔드입니다.

백엔드(Backend)는 사용자 눈에 보이지 않는 뒷단에서 작동하는 부분입니다. 데이터 저장, 로그인 인증, 결제 처리, 외부 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로 만들어줄게"라고 하는 이유가 여기에 있습니다.

🛠️ 프론트엔드와 백엔드의 역할 정리

💡 바이브코딩 실전 체크리스트

AI가 만든 코드를 확인할 때, 이 질문들을 던져보세요.

1. "이 API 키는 어디에 있지?" → 프론트엔드 파일에 있으면 위험합니다.
2. "이 로직은 누가 실행하지?" → 브라우저에서 실행되면 사용자가 조작할 수 있습니다.
3. "데이터베이스에 직접 접근하는 코드가 어디에 있지?" → 반드시 백엔드에 있어야 합니다.

확신이 없으면 AI에게 "이 코드가 서버에서 실행되는 거야, 브라우저에서 실행되는 거야?"라고 물어보세요.

📋 30초 요약

1. 프론트엔드는 사용자가 보는 화면(브라우저), 백엔드는 눈에 보이지 않는 서버입니다. 레스토랑의 홀과 주방의 관계와 같습니다.

2. 프론트엔드 코드는 누구나 볼 수 있습니다. 따라서 API 키, 비밀번호, 민감한 로직은 반드시 백엔드에 두어야 합니다. 이 규칙을 어기면 보안 사고가 발생합니다.

3. Next.js에서는 app/api/ 폴더가 백엔드, 나머지가 프론트엔드입니다. AI가 만든 코드에서 API 키가 어디에 있는지 항상 확인하고, 의심되면 AI에게 "이거 서버에서 실행되는 거 맞아?"라고 꼭 물어보세요.