프론트엔드와 백엔드, 뭐가 달라?

식당의 홀과 주방으로 이해하는 앱의 두 얼굴

한 줄로 말하면

프론트엔드는 사용자 눈앞에 보이는 화면, 백엔드는 뒤에서 데이터와 중요한 판단을 처리하는 곳이야.

네가 쓰는 거의 모든 서비스(인스타, 배민, 은행 앱)가 이 두 부분으로 나뉘어 있어. 이 구분을 알면 AI가 만든 코드가 어디에서 돌아가는지 보이기 시작해.

프론트엔드: 손님 테이블 위의 모든 것

프론트엔드는 사용자의 기기(브라우저나 폰) 안에서 실행돼. 버튼 모양, 화면 이동, 입력창, 애니메이션이 다 여기 담당이야.

• 화면을 그리고 예쁘게 꾸미기
• 버튼 누름, 글자 입력 같은 사용자 행동 받기
• 백엔드에 "이 데이터 줘", "이거 저장해 줘" 요청 보내기
• 받은 결과를 화면에 보여주기

백엔드: 주방에서 일어나는 일

백엔드는 회사가 관리하는 서버에서 실행돼. 사용자는 코드를 볼 수도, 고칠 수도 없어. 그래서 믿을 수 있는 판단은 전부 여기서 해야 해.

• 로그인 확인: "이 사람 진짜 본인 맞아?"
• 권한 검사: "이 사람이 이 글을 지워도 돼?"
• 데이터 저장·조회: 데이터베이스에 넣고 꺼내기
• 돈과 관련된 계산: 가격, 포인트, 결제 확인
• 비밀 키 사용: AI·결제 같은 외부 서비스 호출

1. 프론트엔드 — 하트를 빨갛게 바꾸고, 백엔드에 "좋아요 눌렀어" 요청
2. API — 정해진 형식으로 요청 전달
3. 백엔드 — 로그인 확인 → 이미 눌렀는지 확인 → 저장
4. 데이터베이스 — 좋아요 기록이 영구 저장됨

어디에 둬야 할까? 바이브 코더의 핵심 판단

AI에게 기능을 시키면, AI는 종종 제일 빨리 동작하는 쪽인 프론트엔드에 다 넣어버려. 화면에선 잘 돌아가니까 눈치채기 어려워. 그래서 이 질문을 습관처럼 던져야 해: "이거 사용자가 조작하면 큰일 나?"

확인 퀴즈

무료 · 카카오로 바로 시작 · 레슨 243개