프론트엔드(Frontend)
• 사용자가 눈으로 보고 직접 조작하는 모든 영역을 개발하는 분야이다.
• 웹 브라우저나 앱에서 사용자에게 보여지는 화면을 구현하며,
• 사용자가 편리하게 서비스를 이용할 수 있도록 사용자 경험(UX)을 개선한다.
프론트엔드에서 하는 일
UI 제작
• HTML과 CSS 등을 사용하여 사용자가 볼 수 있는 화면의 구조와 디자인을 구현한다.
> HTML → 화면 구조
> CSS → 색상, 배치, 디자인
• 비유하면:
> HTML은 건물의 뼈대
> CSS는 인테리어와 디자인
UX 제작
• JavaScript 등을 사용하여 버튼 클릭, 메뉴 열기, 데이터 변경 같은 사용자와의 상호작용 기능을 구현한다.
• 사용자가 서비스를 더 편리하고 자연스럽게 사용할 수 있도록 만든다.
> 버튼 클릭 시 팝업 열기
> 로그인 실패 메시지 출력
> 장바구니 수량 변경
• 비유하면:
> JavaScript는 “움직임과 반응”을 담당하는 역할
백엔드(Backend)
• 사용자 눈에는 보이지 않지만, 서비스가 실제로 동작하는 영역이다.
• 핵심 기능(비즈니스 로직)과 데이터가 처리되며,
• 서버에서 요청을 받아 기능을 수행하고 결과를 반환한다.
백엔드에서 하는 일
비즈니스 로직
• 프론트엔드에서 요청이 들어오면 Java를 사용하여 핵심 기능과 로직을 처리한다.
> 로그인 처리
> 회원가입
> 예약 기능
> 결제 처리
• 비유하면:
> 프론트엔드는 “주문받는 직원”,
> 백엔드는 “실제로 요리하는 주방”과 비슷하다.
데이터베이스(Database)
• 사용자 정보나 게시글 같은 데이터를 안전하게 저장하고 관리하는 공간이다.
> 회원 정보 저장
> 게시글 저장
> 주문 내역 저장
• 비유하면:
> 데이터베이스는 “창고” 역할이라고 생각하면 이해하기 쉽다.
API 응답
• 백엔드에서 처리한 결과를 프론트엔드에게 전달하는 역할을 한다.
• 주로 JSON 형태의 데이터를 반환한다.
> 로그인 성공 여부 전달
> 게시글 목록 전달
> 사용자 정보 전달
프론트엔드와 백엔드가 나눠진 이유
과거 (초기 웹 개발)
• 초기의 웹 개발에서는 웹마스터 한 사람이 프론트엔드와 백엔드 업무를 모두 처리하였다.
• 이 당시에는 웹사이트 규모가 크지 않았고, 기능도 단순했기 때문에 혼자 개발이 가능했다.
현재 (업무 분할)
• 시간이 지나면서 웹 서비스 규모와 기술이 크게 발전하였다.
프론트엔드의 변화
• 프론트엔드는 단순한 화면 제작을 넘어:
> CSS를 통한 디자인
> JavaScript를 이용한 동적 기능
> 모바일 앱 및 반응형 웹 대응
> 사용자 경험(UX) 개선
백엔드의 변화
• 백엔드는:
> 대량의 데이터 처리
> 데이터베이스 관리
> 서버 운영
> 보안 처리
> API 제공
• 예를 들어:
> 로그인 인증
> 결제 처리
> 사용자 데이터 관리
업무 분할 이유
• 서비스 규모가 커지면서 한 사람이 모든 영역을 담당하기 어려워졌다.
• 그 결과 프론트엔드와 백엔드가 분리되었다.
• 현재는 더욱 세분화되어:
> 데이터 엔지니어링
> 클라우드
> AI
> DevOps
> 보안
같은 전문 분야로 발전하고 있다.
백엔드 개발자가 프론트엔드를 알아야 하는 이유
• 백엔드 개발자의 전문 분야는 서버, 데이터베이스, 비즈니스 로직을 구현하는 것이다.
• 하지만 백엔드에서 만든 기능과 데이터는 결국 프론트엔드와 클라이언트에서 사용된다.
• 따라서 프론트엔드의 동작 방식과 사용자가 서비스를 어떻게 이용하는지 이해하지 못하면 좋은 백엔드 시스템을 만들기 어렵다.
• 예를 들어:
> 어떤 데이터가 필요한지
> 어떤 형태로 응답해야 하는지
> 사용자가 어떤 흐름으로 기능을 사용하는지
등을 이해해야 효율적인 API와 기능을 설계할 수 있다.
• 결국 백엔드 개발자도 프론트엔드를 이해해야 프론트엔드와 원활하게 협업하고, 사용자에게 더 좋은 서비스를 제공할 수 있다.