역사를 잊은 개발자에게 미래는 없다 - 1부

목적

오늘은 특별한 이유가 있다기보다는, 개발을 하던 중 문득 웹 개발의 역사가 궁금해져서 그 궁금증을 해결하고자 웹 개발의 역사를 주제로 블로그를 작성해봤다.

인터넷과 웹 브라우저의 등장

우선 웹과 인터넷의 정의를 살펴보자.

인터넷: 전 세계 컴퓨터들을 연결하는 물리적인 네트워크 인프라로, 통신 프로토콜(TCP/IP)을 사용하여 서로 정보를 주고받을 수 있게 한 연결망

웹: 인터넷을 기반으로 HTML, HTTP, URL 등의 기술을 사용하여 정보를 공유하는 시스템(인터넷 위에서 동작하는 서비스)

팀 버너스리는 1990년 최초의 웹 서버인 CERN httpd, 웹 브라우저인 WorldWideWeb, 그리고 HTML 1.0을 개발했으며, 1991년 8월 6일 세계 최초의 웹사이트 https://info.cern.ch을 공개했다.

이후 1993년에 웹의 소스 코드를 공개했고, 1994년에는 W3C(World Wide Web Consortium) 재단을 설립하여 HTML, CSS, XML 등 웹 기술의 표준을 개발하고 관리하기 시작했다.

이렇게 웹 서비스의 시대가 열렸지만, 당시의 콘텐츠는 정적 웹페이지 위주로 단순한 정보 제공에 그쳤다.

정적 웹페이지: 서버에 미리 저장된 HTML, CSS, JavaScript 등의 파일로 구성된 페이지(초창기에는 JavaScript가 존재하지 않았음). 모든 사용자에게 동일한 콘텐츠를 제공하며, 요청이나 상태에 따라 콘텐츠가 달라지지 않았다.

동적 웹페이지와 서버 사이드 렌더링의 등장

앞서 언급한 정적 페이지는 변하지 않는 정보성 페이지와 같이 한정적인 용도에서만 적합했다. 사용자의 요청이나 상태에 따라 다른 내용을 보여주려면 사전에 모든 경우의 수에 맞는 페이지를 만들어야 했고, 사용자가 입력한 값을 반영하기도 어려웠다.

이런 한계를 해결하기 위해 등장한 것이 바로 CGI(Common Gateway Interface) 이다. CGI의 동작 과정은 다음과 같다.

1. 웹 서버가 요청 URL을 분석하여 해당 요청이 CGI 프로그램을 실행해야 하는지 확인

2. 해당된다면 프로세스를 생성하고, HTTP 요청 정보를 환경 변수에 세팅하며, POST 요청의 경우 body를 CGI 프로그램의 표준 입력으로 전달

3. CGI 프로그램은 요청을 처리한 뒤, 결과를 HTTP response로 출력

4. 웹 서버는 이 결과를 사용자에게 전달

이 과정을 통해 최초의 서버 사이드 렌더링(SSR) 방식이 탄생했다.

SSR과 CSR의 차이

SSR과 CSR의 가장 큰 차이는 HTML이 어디서 완성되느냐이다.

SSR(Server Side Rendering): 사용자의 요청이 있을 때마다 서버에서 HTML을 동적으로 생성하여 완성된 상태로 전달

CSR(Client Side Rendering): 최소한의 HTML만 받아오고, 이후 JavaScript 등을 활용해 브라우저(클라이언트)에서 HTML 요소를 동적으로 생성하여 완성

CGI를 통해 최초의 동적 페이지 생성 방식이 가능해졌지만, 매 요청마다 새로운 프로세스를 생성해야 했기 때문에 성능 문제가 있었다. 이를 개선하기 위해 서버 사이드 스크립팅 언어들이 등장했다.

대표적인 서버 사이드 스크립팅 언어

• PHP (PHP: Hypertext Preprocessor)

  • 1995년 출시
  • 오픈 소스로 시작
  • 웹 서버 모듈로 동작하여 빠른 응답 속도 제공
  • 다양한 운영 체제와 웹 서버에서 지원
  • WordPress, Drupal 등 수많은 CMS에서 활용

• ASP (Active Server Pages)

  • 1996년 출시, Microsoft에서 개발
  • Windows 서버와 IIS 웹 서버에서 동작
  • VBScript나 JScript를 사용하여 동적 웹 페이지 생성
  • 이후 ASP.NET으로 발전

• JSP (JavaServer Pages)

  • 1999년 출시, Java 기반
  • Java의 강력한 기능과 개발 도구를 웹 개발에 활용
  • 서블릿 컨테이너에서 동작
  • 높은 성능과 확장성을 제공

이러한 서버 사이드 스크립팅 언어들은 데이터베이스 연동, 세션 관리, 사용자 인증 등 다양한 기능을 내장하여 웹 개발을 훨씬 쉽고 효율적으로 만들었다. 그 결과, 동적이고 데이터 중심적인 웹 애플리케이션 개발이 본격적으로 가능해졌다.

MVC(Model-View-Controller) 아키텍처의 도입

1990년대 후반, 웹 개발의 복잡성이 점점 증가하고 대규모 프로젝트가 많아지면서 코드의 유지보수성과 확장성이 중요한 과제로 떠올랐다. 이를 해결하기 위해 MVC 패턴이 웹 개발에 도입되었다.

MVC는 사용자 인터페이스, 데이터, 논리 제어를 분리하여 구현하는 소프트웨어 디자인 패턴으로, 비즈니스 로직과 화면을 구분하는 데 중점을 둔다. 즉, 관심사의 분리(Separation of Concerns)를 통해 결합도를 낮추는 것이 핵심이다.

웹 애플리케이션에서는 보통 서버 사이드(Model, Controller) 와 클라이언트 사이드(View) 로 나누어 적용된다.

MVC 구성 요소

• Model(모델)

  • 애플리케이션의 데이터와 비즈니스 로직 담당
  • 데이터베이스와 상호작용, 데이터 유효성 검사 및 처리 수행
  • 사용자 인터페이스(View)나 컨트롤러에 독립적이어야 함

• Controller(컨트롤러)

  • 사용자의 요청을 받아 처리
  • 모델과 뷰 사이의 상호작용을 관리
  • 사용자 입력을 받아 모델을 업데이트하고, 결과를 뷰에 전달
  • 애플리케이션의 흐름(Flow)을 제어

• View(뷰)

  • 사용자 인터페이스 담당
  • 모델로부터 데이터를 받아 사용자에게 표시
  • 사용자의 입력을 컨트롤러에 전달
  • HTML, CSS, JavaScript 등을 통해 구현

오늘날에도 MVC는 여전히 널리 사용되는 아키텍처 패턴이며, 많은 웹 프레임워크들이 이를 기반으로 설계되었다. 또한, MVP(Model-View-Presenter), MVVM(Model-View-ViewModel) 등 다양한 변형 패턴들이 등장할 정도로 사실상 표준적인 아키텍처 패턴으로 자리 잡았다.

CSS와 JavaScript의 등장

웹 페이지를 만든다면 누구나 화려하고 멋진 디자인을 원할 것이다. 하지만 초기의 HTML만으로는 한계가 분명했으며, 당시에는 태그와 태그 속성만으로 스타일링을 했다고 한다.

참고로, HTML에서 style 속성을 사용한 인라인 스타일링이나 <style> 태그를 활용한 내부 스타일링은 HTML4부터 지원되었다.

1996년 12월, CSS(Cascading Style Sheets) 가 발표되었다. CSS는 문서와 스타일을 분리하는 것을 목표로 했으며, HTML 문서의 구조와 콘텐츠는 그대로 두고, 별도의 스타일 시트에서 스타일을 선언하여 특정 태그에 적용할 수 있게 해주었다. 주요 기능으로는 선택자(selector) 문법과 박스 모델(box model) 이 있다.

CSS가 웹의 디자인을 담당하게 되었다면, JavaScript는 페이지에 동적인 요소를 추가하기 위해 등장했다.

1995년 12월, 당시 웹 브라우저 시장을 주도하던 넷스케이프는 Netscape Navigator 2.0에 자바스크립트를 최초로 탑재했다. 이를 통해 간단한 폼 검증이나 이미지 롤오버 효과 등을 구현할 수 있었고, 큰 성공을 거두었다.

이에 대응해 Microsoft는 자바스크립트와 호환되는 자체 구현체인 JScript를 개발하여, 1996년 8월 출시된 Internet Explorer 3.0에 탑재했다.

오늘날 모든 브라우저가 JavaScript를 지원하고 있고, 표준 스펙도 잘 맞춰지고 있지만, 여전히 개발하다 보면 크로스 브라우징 이슈를 마주한다. 만약 당시 브라우저마다 언어 자체가 달랐다면 상상만 해도 끔찍한 상황이었을 것이다.

1996년 11월, 넷스케이프는 자바스크립트의 표준화를 ECMA 인터내셔널에 제안했고, 1997년 6월 첫 번째 ECMAScript(ES1) 사양이 등장했다.

이후 Firefox, Opera, Safari 등 다양한 브라우저들이 생겨났지만, 특히 IE는 높은 점유율을 무기로 ECMA 표준을 따르지 않는 경우가 많았고, 다른 브라우저들도 스펙 지원이 제각각이었다. 이 시기만 해도 자바스크립트의 표준화는 멀게만 보였다.

사실상 크롬의 등장과 ES5 이전까지 자바스크립트의 표준으로 사용된 것은, 1999년 12월 발표된 ECMAScript 3(ES3) 이었다.

마무리

오늘은 이렇게 웹 개발의 역사 1부를 작성해봤다. 대부분 이미 알고 있던 내용이지만, 막상 정리해보니 생각보다 재미있었다. 글이 다소 길어져 부득이하게 1부와 2부로 나누게 된 점 양해 바란다. 금방 2부로 돌아오겠다.