웹 기술의 진화 (이동석 코치님)

Devkty·2025년 5월 1일
post-thumbnail

프로토콜이란?

컴퓨터끼리 통신하기 위한 규약입니다. 컴퓨터끼리 데이터를 주고받을때 지켜야합니다.


초기 웹

최초에는 텍스트 기반, 단순한 HTMl 문서만 표시 가능했다.

사용자 인터페이스는 매우 제한 적이었고, 단순한 하이퍼링크를 눌러 문서를 탐색하는 것만 가능했다.

최초의 웹 서버 CERN httpd는 정적인 html파일만 제공했다.

서버는 단순한 파일 저장소 역할만 했고, 동적인 콘텐츠 없이 브라우저가 요청하면 HTML을 그대로 전송하는 방식이었다.


Http란?

웹브라우저와 웹서버 사이의 약속이다.

http는 stateless 프로토콜이다.

request,response 메시지로 구성했다.

현재 Http/1.0, http/1.1, http/2.0이 현재 사용중이다.

→ Stateless Protocol이란?

  • 요청 하나가 끝나면 그걸 기억하지 않는다.
  • 마치 매번 새로운 손님처럼 서버가 클라이언트를 대한다.
  • 장점: 딘순하고 빠르다.
  • 단점: 로그인 상태 유지나 장바구니 같은 ‘기억’이 어렵다.
    이를 보완하기 위해 쿠키, 세션의 개념이 등장 했다.
  • UDP

웹 초기에는 stateless라는 새로고침되는 과정을 없애기 위해 노력했다.


웹 대중화

클라이언트 사이드

  • mosaic 등장으로 웹이 그래픽 중심으로 발전
  • HTML에 <b>,<i> 같은 간단한 서식 태그 추가
  • 이미지와 텍스트를 함께 볼 수 있게 됐다. 시각적으로 매력적인 웹 경험 시작
  • 하지만 여전히 스크립트나 동적 업데이트는 사용 불가

서버 사이드

  • HTTP/1.0 도입: 응답 코드(404)와 헤더 지원 → 풍부한 콘텐츠 가능
  • Apach 웹 서버의 등장: CGI요청도 처리 가능하며, 정적 파일도 효율적으로 제공
  • EC2등의 서비스들이 나왔다.

상호작용하는 웹

클라이언트 사이드

  • JavaScript 등장: 폼 유효성 검사, 팝업 등 간단한 상호작용 구현가능
  • CSS 도입: HTML에서 디자인을 분리, 색상, 폰트 등 시각 표과 제어 가능
  • 브라우저 전쟁: netscrape, internet - 비표준 경쟁으로 혼란

서버 사이드

  • HTTP/1.0도입: 지속 연결 지원 → 성능 향상
  • CGI등장: 서버가 스크립트를 실행해 동적인 컨텐츠 생성가능 → DB 연결가능 → 사용장 맞춤 정보 제공가능
  • PHP, ASP등 동적 웹페이지 생성을 쉽게하는 스크립트 언어 등장.
  • Fast CGI지원: CGI의 문제점을 해결하기 위해 지속가능한 프로세스 개념과 바이너리 프로토콜로 등장
  • 본격적으로 3-tire 아키텍처 도입(java-ee, asp, pgp등의 등장으로 어플리케이션 계층 분리)

CGI가 앵간 많이 쓴다. 우리는 CGI 기반의 웹서버 구현한다.


3-Tire와 3-Layer의 차이는?(문제)

→ 웹 서버 아키텍처에서 3-Tier(3계층)3-Layer(3레이어) 는 비슷한 개념처럼 들릴 수 있지만, 실제로는 약간의 차이가 있다.

3-Tier Architecture (3계층 아키텍처)

  • 'Tier'는 물리적인 배치를 의미합니다.
  • 일반적으로 서버나 시스템이 실제로 분리되어 운영되는 구조입니다.

구성
1. Presentation Tier (프레젠테이션 계층): 사용자 인터페이스 (예: 웹 브라우저, 모바일 앱)
2. Application Tier (애플리케이션 계층): 비즈니스 로직 처리 (예: WAS - Web Application Server)
3. Data Tier (데이터 계층): 데이터베이스 서버 (예: MySQL, Oracle 등)

예시

  • 클라이언트는 웹 브라우저
  • 애플리케이션 서버는 Tomcat
  • 데이터베이스 서버는 Oracle DB처럼 물리적으로 서버가 나뉘어 있음

3-Layer Architecture (3레이어 아키텍처)

  • 'Layer'는 논리적인 분리를 의미합니다.
  • 하나의 애플리케이션 안에서 기능별로 코드 구조를 나누는 것입니다.

구성
1. Presentation Layer: UI 처리 (HTML, JSP, Controller 등)
2. Business Logic Layer: 서비스, 비즈니스 규칙
3. Data Access Layer: DB 연결, DAO 등

예시

  • 하나의 WAS 안에서 코드만 레이어별로 분리 (MVC 패턴처럼)
  • 물리적으로 서버를 나누지 않아도 구현 가능

차이점을 표로 나타내면 다음과 같습니다.

항목3-Tier (계층)3-Layer (레이어)
분리 기준물리적(서버)논리적(코드 구조)
목적분산 시스템, 확장성유지보수, 구조적 코드 작성
예시웹 서버 + WAS + DB 분리Controller, Service, DAO 분리
독립 실행 가능 여부예 (서버 간 통신)아니요 (같은 앱 내 코드 분리)

동적 컨텐츠 처리방식 - 웹 서버 내장 스크립트 엔진


동적 컨텐츠 처리 방식 - CGI

CGI는 웹서버와 동적 컨텐츠를 생성하는 프로세스 사이에 stdin/stout으로 통신.
요청이 있을 때마다 새로운 프로세스 생성.


동적 컨텐츠 처리 방식 - Fast CGI

Fast CGI에서는 웹서버와 외부 어플리케이션 (PHP, Python 등) 사이의 고속 통신을 위한 바이너리 프로토콜.

요청이 올 때마다 프로세스를 새로 실행시키는 것이 미리 실행 중인 프로세스 풀에서 하나에 할당하는 방식.


Web 2.0과 동적 웹 애플리케이션

클라이언트 사이드

  • AJAX(기술이 아닌 비동기 패러다임이다.): 전체 페이지 새로 고침 없이 일부만 업데이트 가능
    HTML, CSS, Document Object Model, JSON, XML, XMLHttpRequest, JS
  • jQuery: JS 사용을 간단하게 만들어 애니메이션, 메뉴 등 쉽게 구현 가능
  • 브라우저 표쥰화 진행: firfox, chrome등 등장 → HTML4, CSS2 호완성 개선

서버 사이드

  • Rudy onRails, Django: 동적 웹사이트 개발을 빠르게 할 수 있는 프레임워크
  • Nginx: 등장: 수많은 동시 접속을 효율적으로 처리, 성능 강화(대폭적인 도약)
  • 로드밸런서, 클러스터링 도입 → 유튜브 같은 대규모 서비스 지원
  • MVC 프레임워크(Spring, Rails 등) 기반의 구조화된 3-Tier 아키테거 확산
  • 2000년에 RST 개념 논물 발표 후 2008년부터 활성화

Apach → Nginx로 개선이 되었다.


비동기 처리 구성도


3 Layer architecture

효율적인 어플리케이션 개발, 배포, 관리를 위해 웹서비스를 3가지 layer로 나눔
presentaion + Business + Data layer


가벼운 웹 서버 등장


Restful API 등장

Restful API: URL와 HTTP method 그리고 response code로 서비스를 정의


API 게이트 웨이의 필요성

API 게이트웨이가 필요

  • 부하 분산 제어
  • API 버전 관리
  • 인증, 접근 제어
  • 문서


트래픽이 많아지면…

Load balancer(L4, L7)으로 분산


현대 웹과 모바일의 부상

클라이언트 사이드

  • HTML5, CSS3: 비디오 재생, 애니메이션, 반응형 디자인 지원 → 모바일 환경 최적화.
  • React, Angular, Vue.js: 대규모 앱 개발 가능(SPA: Gmail처럼)
  • 브라우저가 자체적으로 무거운 연산 처리 → 서버 의존도 감소

서버 사이드

  • Node.js: JS를 서버에서도 사용 → 실시간 채팅, 스트리밍 등 가능.
  • “클라우드 플랫폼과 CDN → 빠르고 안전적인 글로벌 서비스 가능.
  • HTTP/2: 멀티플렉싱 지원으로 속도 향상

CDN 서비스

나라 곳곳에 서버를 분산해서 그 지역서버에서 뿌려줌.(본래 서버에서 뿌리면 늦으므로)

똑같은 컴텐츠를 캐시로 지역 서버에 둬서, 본서버를 안갖다와도 지역 서버에서 가져와서 클라이언트가 빠르게 볼 수 있게 한다.


미래의 웹

클라이언트 사이드

  • WebAssembly: 브라우저에서 게임이나 복잡한 앱도 거의 네이티브 속도로 실행가능
  • Next.js, Sveite 등: 빠르고 검색엔진 친화적인 앱 개발을 쉽게 지원
  • PWA: 설치 없이 작동하는 웹앱 → 푸시 알림, 오프라인 실행 가능.

서버 사이드

  • serless: 서버 관리 없이 코드 실행 → 자동 확장가능
  • HTTP/3: 더 빠를고 보안이 강화된 연결 (QUIC기반)
  • Microservice architecture
  • Edge Computing: 사용자와 가까운 곳(엣지)에서 서버 동작 → 지연 시간 초소화

이동석 코치님이 네트워크 관련된 지식이 굉장히 풍부하신 것 같다. 웹에 대해 알아가는 유익한 시간이었다.
나중에 커피챗을 신청해서 네트워크 관련된 내용도 말씀을 나누고 싶다.

profile
모든걸 기록하며 성장하고 싶은 개발자입니다. 현재 크래프톤 정글 8기를 수료하고 구직활동 중입니다.

0개의 댓글