웹 애플리케이션 아키텍처의 구성과 흐름

웹 브라우저의 주소창에 URL을 입력하고 사용자가 원하는 페이지를 보기까지 여러 단계의 통신이 이루어진다.

이러한 동작에 필요한 각 요소와 그 사이의 상호 작용을 정의해 놓은 것을 웹 애플리케이션 아키텍쳐라고 부른다.

 

위 그림은 웹 애플리케이션 아키텍쳐를 도식화한 것이다.

다양한 웹 애플리케이션 아키텍쳐가 존재하며, 각 요소의 역할과 상호작용을 이해해 웹의 규모와 목적에 따라 적절한 웹 애플리케이션 아키텍처를 설계할 수 있다.

적합한 아키텍처를 통해 실제 웹 구현 단계에서 발생할 수 있는 위험을 줄이고 안정적으로 웹을 운영할 수 있게 된다!

 

아키텍처를 구성하는 대표적인 요소들을 정리해보자

 

 

웹 애플리케이션 아키텍쳐

웹 클라이언트

웹 클라이언트는 사용자의 요청(Request)을 서버로 보내고, 서버의 응답(Response)을 받아 처리하는 프로그램이다.

많은 경우 웹 브라우저를 통해 클라이언트와 소통한다.

지메일(웹 애플리케이션)을 예시로 설명하자면,

- 웹 클라이언트: 지메일에서 이메일을 주고받는 UI, 서버와 통신을 담당하는 부분

- 웹 브라우저: 웹 클라이언트를 실행하는 환경

이라고 할 수 있다.

 

웹 브라우저를 기반으로 하는 클라이언트 외에도 모바일 앱, 개발자용 API 클라이언트 (Postman 등) 등 웹 서버와 통신하는 다양한 클라이언트들이 있다.

 

웹서버

웹 서버는 웹 클라이언트의 요청을 받아 필요한 데이터를 처리하고 응답을 반환하는 프로그램이다.

 

웹 클라이언트와 통신하는 예시는 아래와 같다.

- 사용자가 https://www.google.com  에 접속하면 웹 클라이언트가 웹 서버에 '구글 페이지'를 달라고 요청

- 웹 서버가 그 페이지에 필요한 HTML, CSS, JS, 이미지 등을 응답

 

웹 애플리케이션과 웹 서버의 관계도 다양할 수 있다.

- 하나의 애플리케이션에 하나의 서버

- 하나의 애플리케이션에 여러 서버

- 여러 애플리케이션에 하나의 서버

 

대규모 서비스의 경우 하나의 웹 서버로 처리량을 감당할 수 없기 때문에 로드 밸런서를 사용해 트래픽을 여러 개의 웹 서버로 분리한다.

 

웹 서버의 예시

- Apache HTTP Server, Nginx, LiteSpeed, IIS 등

 

WAS (Web Application Server)

WAS는 비즈니스 로직을 처리하고 동적인 데이터를 생성하는 서버다.

 

웹 클라이언트가 웹 서버에 요청하는 컨텐츠는 크게 두가지로 구분할 수 있다.

- 정적 컨텐츠: 바로 전달 가능 (ex. HTML, CSS 파일 등)

- 동적 컨텐츠: 추가적인 로직 처리가 필요 (ex. 데이터베이스에서 데이터 조회)

 

정적 컨텐츠의 경우 웹 서버가 웹 클라이언트에게 바로 전달하며, 동적 컨텐츠의 경우 WAS에 처리를 요청한다.

(* 이 때 정적 컨텐츠는 성능 최적화를 위해 CDN에 캐싱될 수 있으며, 웹서버는 CDN에 저장된 리소스를 클라이언트에 전달할 수도 있다.)

즉, WAS는 웹 서버가 전달한 요청을 받아 비즈니스 로직을 처리하고 동적인 데이터를 생성한 뒤 응답하는 역할을 수행한다.

웹 서버가 해야하는 일을 나눠가지며 서버의 부담을 줄이고 전체 웹 통신의 효율을 높이는 것이다.

 

지메일에 접속한 경우를 예를 들어 설명하면,

- 웹 서버: 지메일의 HTML, CSS, JS 파일을 클라이언트에 응답

- WAS: 사용자가 받은 이메일 목록을 DB에서 조회하고, 받은 메일을 데이터로 만들어 반환

 

WAS의 예시

- Tomcat, JEUS, IBM WebSphere 등

 

데이터베이스

데이터베이스는 데이터를 조직적이고 체계적으로 저장하며, 필요할 때 효율적으로 조회/수정/삭제할 수 있게 관리하는 시스템이다.

WAS의 예시로 받은 메일을 조회한 것처럼 WAS에서 동적 콘텐츠를 제공하기 위해 접근하기도 한다.

 

데이터베이스의 예시

- MySQL, Oracle, MongoDB 등

 

 

요청의 흐름

사용자가 브라우저에서 지메일에 접속한다면, 웹 애플리케이션은 다음과 같은 순서로 동작한다.

 

1) 웹 클라이언트 -> DNS 서버 요청

- 사용자가 브라우저 주소창에 https://mail.google.com을 입력하고 엔터를 누름

- 브라우저는 해당 도메인의 IP 주소를 찾기 위해 DNS 서버에 요청을 보냄

- DNS 서버는 mail.google.com에 해당하는 IP 주소를 반환

 

2) DNS 조회 및 서버 연결

- 브라우저는 HTTPS 요청을 웹 서버로 전송해 지메일 페이지를 요청

- 만약 사용자의 브라우저 캐시에 페이지 데이터가 저장되어 있다면, 캐시된 데이터를 먼저 사용하기도 함

 

3) 웹 서버에서 정적 컨텐츠 제공

- 웹 서버는 지메일의 정적 파일 (HTML, CSS, JS, 이미지 등)을 클라이언트에게 반환

- 이때 정적 파일이 CDN에 캐싱되어있다면, 웹서버가 아닌 CDN 서버에서 더 빠르게 제공될 수도 있음

 

4) 동적 데이터 요청 (WAS 연동)

- 웹 브라우저가 지메일 UI를 로드한 후, 사용자의 받은 메일 목록을 가져오기 위해 추가적인 API 요청을 보냄

- 이 요청은 웹 서버를 거쳐 WAS로 전달

 

5) WAS에서 비즈니스 로직 처리

- 사용자 인증 정보 확인 등 필요한 로직을 처리

- 받은 메일 데이터를 가져오기 위해 데이터베이스에 쿼리 실행

 

6) 데이터베이스에서 데이터 조회 및 반환

- 사용자의 이메일 데이터를 조회해 WAS에 반환

- WAS는 받은 데이터를 가공해 클라이언트에 응답

 

7) 브라우저에서 데이터 출력

- 브라우저는 WAS로부터 받은 데이터를 필요에따라 파싱해 JavaScript로 UI 업데이트

- 사용자의 받은 이메일 목록이 화면에 표시됨

 

8) 추가 동작 처리

- 사용자가 새로운 이메일을 열거나 작성하는 등 새로운 요청을 하는 경우 위와 같은 과정을 반복