웹개발 기초 정리 - 프론트엔드와 백엔드, 그리고 웹의 동작 원리

1. 프론트엔드와 백엔드란?

웹 서비스는 크게:

• 프론트엔드(Frontend)
• 백엔드(Backend)

로 나뉜다.

 

레스토랑으로 비유하면

프론트엔드

→ 손님이 직접 보는 공간

백엔드

→ 주방

손님 눈에는 보이지 않지만 실제 요리가 만들어지는 핵심 공간이다.

 

 

---

2. 프론트엔드(Frontend)

프론트엔드는 "사용자가 직접 보고 조작하는 화면" 

 

 

예를 들어 네이버에 접속했을 때:

• 버튼 클릭
• 검색창 입력
• 메뉴 이동

같은 모든 화면 요소들이 프론트엔드이다.

 

사용자가 직접 사용하는 프로그램을:

클라이언트(Client) 라고 부른다.

 

대표적으로:

• 웹 브라우저
• 모바일 앱

등이 있다.

---

프론트엔드의 역할

1) 화면 디자인(UI)

사용자가 보기 편하도록 디자인하고 배치한다.

주로 사용하는 기술: HTML, CSS

 

2) 사용자 반응 처리(UX)

사용자의 행동에 반응하도록 만든다.

 

예시:

• 버튼 클릭 시 팝업창 열기
• 메뉴 펼치기
• 화면 애니메이션

주로 사용하는 기술: JavaScript

---

3. 백엔드(Backend)

백엔드는 "사용자 눈에는 보이지 않지만 서비스가 실제로 동작하게 만드는 영역"

 

레스토랑으로 비유하면 셰프(주방) 같은 역할이다.

 

백엔드는 보이지 않는 곳에서:

• 데이터 처리
• 서버 운영
• 회원 관리
• 로그인 처리

같은 핵심 기능을 담당한다.

 

 

---

백엔드의 역할

1) 비즈니스 로직 처리

프론트엔드에서 요청이 들어오면 그에 맞는 작업을 처리한다.

 

예시:

• 로그인 확인
• 주문 처리
• 결제 처리

즉 "서비스의 핵심 동작" 을 만드는 부분이다.

 

2) 데이터베이스 관리(DB)

데이터를 저장하고 관리한다.

 

예시:

• 회원 정보
• 게시글
• 주문 내역

 

3) API 응답 처리

백엔드는 처리한 결과를 다시 프론트엔드에 전달한다.

 

예시:

프론트엔드 → 로그인 요청

백엔드 → 로그인 성공 응답

 

 

---

4. 왜 프론트엔드와 백엔드가 나뉘었을까?

예전에는:

웹마스터(Webmaster) 라는 사람이 모든 것을 담당했다고 한다.

 

즉 디자인, 서버, 개발, 관리 등을 전부 혼자 처리했다는 것이다.

 

하지만 웹 서비스 규모가 커지면서:

• 디자인 전문성
• 서버 전문성
• 데이터 처리 기술

등이 훨씬 중요해졌다.

 

그래서 프론트엔드 개발자, 백엔드 개발자로 분야가 나뉘게 되었다.

 

풀스택 개발자란?

풀스택 개발자는 프론트엔드와 백엔드를 모두 다룰 수 있는 개발자를 의미한다.

 

단순히 둘 다 조금 아는 것이 아니라, 양쪽을 전문적으로 다룰 수 있는 사람이라고 한다.

 

 

---

5. 왜 백엔드 개발자도 프론트엔드를 알아야 할까?

백엔드 개발자는 서버만 만드는 사람이 아니다.

프론트엔드와 협업해야 하기 때문에:

• 화면이 어떻게 동작하는지
• 사용자가 무엇을 원하는지
• 어떤 데이터가 필요한지

를 이해해야 한다.

즉 "프론트엔드를 알아야 더 좋은 백엔드를 만들 수 있다"라는 의미이다.

 

 

---

웹(Web)이란?

웹(Web)은:

인터넷을 통해 전 세계 컴퓨터들이 데이터를 공유하는 공간이다.

 

웹은 크게 3가지 요소로 이루어진다.

1) URL

URL은 웹 데이터의 주소이다.

 

예시:

https://www.naver.com

URL을 통해 원하는 웹사이트에 접속할 수 있다.

 

2) HTTP

HTTP는 웹에서 데이터를 주고받는 통신 규칙(프로토콜)이다.

 

웹에서는 요청(Request), 응답(Response) 방식으로 통신한다.

 

예시:

브라우저 → 페이지 요청

서버 → HTML 응답

 

3) HTML

HTML은 웹 페이지를 만드는 언어이다. 웹 페이지의 구조를 담당한다.

 

 

 

---

인터넷(Internet)이란?

인터넷은 전 세계 컴퓨터를 연결하는 거대한 네트워크이다.

 

즉 웹은 서비스 공간, 인터넷은 연결망이라고 이해할 수 있다.

 

 

---

웹 서비스 동작 원리

웹 서비스는 클라이언트와 서버가 HTTP 통신을 하면서 동작한다.

 

 

흐름은 다음과 같다.

클라이언트 요청
→ 서버 처리
→ 서버 응답
→ 화면 출력

 

 

---

클라이언트(Client)란?

클라이언트는 서버에 요청하는 프로그램이다.

 

대표적인 예시는 웹 브라우저, 모바일 앱 등이 있다.

 

 

1) 웹 브라우저

웹 브라우저는 웹에 접속하는 프로그램이다.

 

예시: Chrome, Edge. Safari

 

브라우저는 HTML, CSS, JavaScript를 해석해서 화면에 보여준다.

 

2) 모바일 앱

모바일 앱도 서버와 통신할 수 있다.

즉, "앱도 결국 서버와 데이터를 주고받는다" 라는 점은 웹 브라우저와 비슷하다.

 

---