프론트엔드 vs 백엔드 한 줄 정의

• 프론트엔드 → 사용자가 직접 보는 화면(UI)
• 백엔드 → 화면 뒤에서 데이터를 처리하는 서버

쉽게 말해서,

프론트엔드는 ‘보이는 부분’
백엔드는 ‘보이지 않는 부분’
입니다.

2️⃣ 레스토랑 비유로 이해하기

웹사이트를 레스토랑이라고 생각해보세요.

• 프론트엔드 = 홀 직원 & 메뉴판
  • 손님(사용자)이 볼 수 있는 디자인, 버튼, 화면
  • “어떤 메뉴가 있는지, 어떻게 주문하는지” 보여줌
• 백엔드 = 주방
  • 손님이 못 보지만 주문을 처리하고 요리(데이터)를 만들어주는 곳
  • 주방장이 음식(결과)을 완성해서 홀 직원에게 전달

손님이 메뉴판(프론트엔드)에서 “파스타 주문” →
주방(백엔드)이 요리(데이터 처리) →
홀 직원이 손님에게 음식(결과) 전달

---

3️⃣ 실제 웹사이트 예시

예를 들어 네이버 검색을 해본다고 해볼까요?

• 프론트엔드
  • 검색창 UI
  • 검색 버튼
  • 검색 결과 화면
• 백엔드
  • 검색어를 받아서 데이터베이스에서 관련 정보 찾기
  • 검색 결과를 가공해서 프론트엔드에 보내기

프론트엔드는 보여주는 역할,
백엔드는 찾고 처리하는 역할

---

4️⃣ 프론트엔드에서 쓰는 기술

프론트엔드는 사용자가 직접 보는 화면을 만드는 기술이에요.

✅ HTML – 웹페이지 뼈대
✅ CSS – 디자인과 스타일
✅ JavaScript – 버튼 클릭, 애니메이션 같은 동작
✅ React, Vue, Angular – 더 효율적으로 만드는 프레임워크
✅ Tailwind CSS, Bootstrap – 빠르게 예쁜 UI 만들기

---

5️⃣ 백엔드에서 쓰는 기술

백엔드는 데이터를 저장·처리하고, 프론트엔드와 연결해주는 역할이에요.

✅ Node.js(Express), Python(Django, Flask)
✅ 데이터베이스(MySQL, MongoDB)
✅ 서버 & 배포(AWS, Vultr, Nginx, Docker)

---

6️⃣ 둘 다 알아야 할까?

• 프론트엔드만 해도 가능
  → 웹 디자인, UI 전문가
• 백엔드만 해도 가능
  → 데이터, 서버 전문가
• 둘 다 하면?
  → 풀스택 개발자!
  → 프론트엔드 + 백엔드를 모두 다룰 수 있는 만능 개발자 >> 물론 공부하기가 쉽진 않겠지요.

---

7️⃣ 간단 정리

✔ 프론트엔드 → 사용자가 직접 보는 화면(UI)
✔ 백엔드 → 보이지 않는 서버와 데이터 처리
✔ 둘이 협력해야 웹서비스 완성!

---

다음 글에서는
👉 API가 뭔지, REST API는 왜 필요한지
를 초보자도 이해할 수 있게 쉽게 풀어볼게요!

궁금한 점은 댓글로 남겨주세요 😊