웹(Web)

웹(Web, WWW - World Wide Web)

• 인터넷(Internet)을 통해 전 세계의 컴퓨터들이 서로 연결되어 정보를 공유하는 서비스이다.

• 웹 브라우저를 통해 문서, 이미지, 영상 등 다양한 정보를 확인할 수 있다.

• 웹(Web)과 인터넷(Internet)은 비슷해 보이지만 다른 개념이다.

  > 인터넷 → 전 세계 컴퓨터를 연결하는 네트워크

  > 웹 → 인터넷 위에서 동작하는 정보 서비스

• 즉, 인터넷이라는 도로 위에서 웹이 움직인다고 이해하면 쉽다.

---

웹의 3가지 요소

주소(URL)

• 웹에 존재하는 다양한 데이터(문서, 이미지, 영상 등)의 고유 주소이다.

• URL을 통해 원하는 웹페이지와 웹 서비스에 접근할 수 있다.

  > https://www.google.com

• 비유하면:

  > URL은 집 주소와 비슷하다.

---

규칙(HTTP)

• 웹에서 데이터를 주고받기 위한 통신 규약(Protocol)이다.

• 브라우저와 서버는 HTTP 규칙을 사용하여 요청(Request)과 응답(Response)을 주고받는다.

  > 브라우저가 페이지 요청

  > 서버가 HTML 응답

• 최근에는 HTTPS, HTTP/2 같은 발전된 방식도 사용되고 있지만, HTTP는 여전히 웹의 기본 통신 규칙이다.

• 비유하면:

  > HTTP는 도로의 교통 법규와 비슷하다.

---

콘텐츠(HTML)

• 웹에서 실제로 전달되는 콘텐츠를 구성하는 언어이다.

• 웹페이지의 구조를 만들며, 텍스트, 이미지, 버튼 등의 요소를 표현한다.

• 대부분의 웹페이지는 HTML 문서를 기반으로 동작한다.

• 비유하면:

  > HTML은 웹페이지의 뼈대 역할이다.

---

웹(Web) 서비스의 작동 원리

• 클라이언트와 서버간에 HTTP 통신을 통해 콘테츠을 요청하고 응답 받으며 작동한다.

---

클라이언트(Client)

• 서버에 요청(Request)을 보내고, 서버로부터 받은 응답(Response)을 사용자에게 보여주는 프로그램이다.

• 주로 프론트엔드 영역에서 사용되며, 대표적인 클라이언트로는 웹 브라우저와 모바일 앱이 있다.

• 비유하면:

  클라이언트는 “손님”

  서버는 “주방”

---

웹 브라우저(Web Browser)

• 웹에 접속할 수 있도록 도와주는 프로그램이다.

• 브라우저는:

  > HTML을 화면에 출력하고

  > CSS를 적용하여 디자인을 표현하며

  > JavaScript를 실행하여 동적인 기능을 처리한다.

이를 통해 다양한 웹페이지를 사용자에게 보여준다.

 

• 대표적인 브라우저:

  > Google - Chrome

  > Apple - Safari

  > Microsoft - Edge

---

웹 브라우저의 핵심 역할

1. 서버에 요청 보내기

• 브라우저는 URL 주소를 이용하여 웹 서버에 HTTP 요청(Request)을 보낸다.

  > 사용자가 Google 주소 입력

  > 브라우저가 서버에 요청 전송

---

2. 서버 응답 해석

• 웹 서버로부터 받은 HTML, CSS JavaScript 파일을 읽고 해석한다.

---

3. 화면 출력

• 해석한 결과를 화면에 출력하여 사용자가 웹페이지를 볼 수 있도록 만든다.

---

모바일 앱(Mobile App)

• 휴대폰이나 태블릿에 설치하여 사용하는 응용 프로그램(Application)이다.

• 모바일 앱은 인터넷을 통해 백엔드 서버와 데이터를 주고받으며 동작한다.

• 모바일 개발자가 앱을 개발하며, 백엔드 서버와 API 통신을 수행한다.

 

• 대표적인 모바일 앱:

  > KakaoTalk

  > Baemin

---

브라우저와 공통점

• 브라우저와 모바일 앱 모두 서버와 데이터를 주고받기 위해 HTTP 요청(Request)과 응답(Response)을 사용한다.

  > 로그인 요청

  > 게시글 조회

  > 사용자 정보 요청

---

브라우저와 차이점

• 브라우저는 주로 HTML,  CSS, JavaScript 파일을 받아 화면을 구성한다.

• 반면 모바일 앱은 대부분의 화면 구성 코드가 앱 내부에 포함되어 있다.

  > 브라우저 → 서버가 화면(HTML)을 전달

  > 모바일 앱 → 앱 내부 코드로 화면 구성

---

클라이언트(Client)의 작동 원리

1. 주소 해석 (DNS 조회)

• 브라우저는 도메인 주소(URL)는 알지만, 실제 서버의 IP 주소는 알지 못한다.

• 따라서 DNS(Domain Name System) 서버에 요청하여 도메인에 연결된 IP 주소를 전달받는다.

  • DNS란?

    > DNS는 인터넷의 주소록과 같은 역할을 하는 시스템이다.

    > 도메인 이름과 실제 IP 주소를 연결(Mapping)하며, 요청이 들어오면 해당 IP 주소를 응답한다.

    > google.com → 142.xxx.xxx.xxx

  • IP 주소란?

    > 인터넷에 연결된 기기를 식별하기 위해 사용하는 고유한 주소이다.

    > 192.168.0.1

---

2. 서버 접속 (IP 주소로 요청)

• 브라우저는 DNS로부터 전달받은 IP 주소를 이용하여 웹 서버에 접속한다.

• 연결이 완료되면 브라우저는 웹 서버에 HTTP 요청(Request)을 보낸다.

  > HTML 파일 요청

  > 로그인 요청

---

3. 추가 리소스 요청 (CSS, JS, Image)

• 브라우저는 전달받은 HTML 파일을 읽는다.

• HTML 내부:

  > CSS 파일

  > JavaScript 파일

  > 이미지(Image)

---

4. 추가 리소스 수신 및 렌더링(Rendering)

• 브라우저는 필요한 파일들을 다시 서버에 개별적으로 요청한다.

• 서버는 요청받은 파일들을 브라우저에 전달한다.

• 브라우저는:

  > HTML로 구조를 만들고

  > CSS로 디자인을 적용하며

  > 이미지를 표시하고

  > JavaScript를 실행하여 동적인 기능을 처리한다.

---

5. 렌더링 완료

• 데이터를 해석하여 사용자가 볼 수 있는 화면으로 출력하는 과정을 렌더링(Rendering)이라고 한다.

• 이 과정이 모두 완료되면 사용자가 요청한 웹페이지가 화면에 표시된다.