- 요즘 글이 뜸했습니다. 사실 뉴스레터 서비스가 유료로 전환되고 나니, 예전처럼 손이 잘 안 가게 되네요. (한 번 발송할 때 마다 치킨 한 마리값이 사라집니다..ㅠㅠ)
- 그래서 역사 콘텐츠를 텍스트가 아닌 다른 방식으로 즐길 수 있는 방법을 알아보고 있는데요. 그 중 하나가 웹사이트였습니다. 그렇게 코딩을 시작하게 되었는데요. 코딩을 하며 배우는 웹의 기술들이 어떤 배경으로 탄생했는지가 궁금해지더라구요. 그래서 역사를 조사해보았습니다.
- 최대한 개발 지식이 없는 분들도 이해하실 수 있도록 글을 구성해보았지만, 아무래도 다루는 내용이 조금 전문적이다 보니 쉽지는 않네요. 그리고 웹의 역사는 정말 방대하더라구요. 덕분에 분량 조절에는 완전히 실패했습니다. 시간 나실 때 천천히 읽어주시면 감사하겠습니다.



Fig.1 웹의 기반 - 하이퍼텍스트

웹의 출발점은 "하이퍼텍스트"라는 개념에서 시작됩니다. 하이퍼텍스트는 1963년, 테드 넬슨*Ted Nelson* 가 책이나 문서처럼 선형적으로만 정보를 읽는 방식에서 벗어나 인간 사고처럼 자유롭게 연결되고 탐색 가능한 정보 구조를 만들고자 진행했던 ‘제너두*Xanadu*’라는 프로젝트에서 처음 사용됩니다. 이를 위해 모든 문서를 상호 연결하고, 문서의 부분 인용과 출처·변경 기록까지 영구적으로 추적할 수 있는 하이퍼텍스트 네트워크를 목표로 했습니다. 이후 1967년, 브라운대학교의 앤드리스 반 댐*Andries van Dam* 과 함께 실제로 하이퍼텍스트 편집 시스템을 구현하면서, 컴퓨터 기반의 하이퍼텍스트 시스템이 현실화되기 시작했습니다.

1980년대에는 워드프로세서처럼 문서를 다루는 프로그램이 점점 발전하면서, 하이퍼텍스트 기능을 포함한 다양한 소프트웨어가 등장했습니다. 특히 1987년 애플이 발표한 '하이퍼카드*HyperCard*'는 프로그래밍 지식이 없어도 사용자가 직접 인터페이스를 만들고 멀티미디어 요소를 넣을 수 있는 환경을 제공하며 하이퍼텍스트 기술의 대중화를 이끌었습니다.



Fig.2 웹과 HTML의 등장

1991년, 유럽입자물리연구소(CERN)의 물리학자 팀 버너스 리*Tim Berners-Lee* 는 연구자들 간 정보 공유를 위해 새로운 시스템을 제안합니다. 이 시스템은 인터넷 위에 하이퍼텍스트 기술을 얹는 형태로, 논문과 데이터를 연결하고 접근할 수 있게 만드는 것이 목적이었습니다. 바로 오늘날 우리가 사용하는 월드 와이드 웹(World Wide Web, WWW)의 시작입니다. 기존 인터넷은 이메일, 파일 전송 등 통신 기능에 초점을 맞췄지만, 웹은 처음으로 콘텐츠 중심의 구조를 인터넷에 도입하며 인터넷 사용자의 범위와 목적을 크게 넓히는 계기가 되었습니다.

이 웹 시스템의 핵심 구성 요소는 HTML(HyperText Markup Language)이었습니다. HTML은 웹페이지의 구조를 기술하는 언어로, 하이퍼링크를 포함한 텍스트, 이미지, 레이아웃 등의 요소를 브라우저에 표시할 수 있게 합니다.



Fig.3 WWW vs 고퍼

하지만 웹이 처음 등장했을 때는 생각보다 큰 주목을 받지 못했습니다. 논문 중심의 정보 공유라는 목적은 대중에게는 와 닿지 않았기 때문입니다. 대신, 1991년 미국 미네소타주립대학에서 만들어진 ‘고퍼*Gopher*’라는 다른 서비스가 인기 끌고 있었죠. 고퍼는 텍스트 기반 메뉴를 통해 원하는 정보를 찾아가는 구조로, 네트워크 속도가 느린 당시 환경에서도 빠르고 안정적인 성능을 제공했습니다.

반면 웹은 이미지 기반의 인터페이스라서 느린 연결 환경에서 비효율적이었습니다. 특히 웹은 고성능 워크스테이션 ‘넥스트*NeXT*’ 컴퓨터의 운영체제인 ‘넥스트스텝*NeXTSTEP*’에서만 구현되었는데, 문제는 NeXT 컴퓨터가 많이 팔리지 않았다는 것이었죠. 웹이 널리 쓰이기 위해서는 다양한 운영체제에서 동작할 수 있도록 해야했습니다.



Fig.4 웹브라우저의 등장과 서버의 탄생

1993년, 시카고의 NCSA(국립 슈퍼컴퓨터 응용센터)에서 아르바이트를 하던 마크 앤드리센*Marc Andreessen*은 NCSA 소속 프로그래머인 에릭 비나*Eric Bina* 와 함께 유닉스를 지원하는 웹 브라우저 ‘모자이크*Mosaic*’를 개발합니다. 모자이크는 마우스를 이용해 인터넷을 탐색할 수 있는 클릭 인터페이스를 제공한 최초 브라우저로, 일반 사용자들도 손쉽게 웹을 사용할 수 있도록 만든 획기적인 프로그램이었습니다. 모자이크의 가능성을 확인한 NCSA는 인력을 보강해 같은 해 윈도우와 매킨토시 버전도 출시했습니다. 그 결과 단 두 달 만에 100만 건이 넘는 다운로드를 기록하며 큰 성공을 거두었습니다. 이로써 웹은 고퍼를 제치고 대중화의 길에 들어서게 됩니다.

웹이 대중에게 퍼지기 시작하면서 사람들은 단순히 문서를 읽는 데 그치지 않고, 직접 글을 남기거나 검색을 하는 등 웹과의 상호작용을 원하게 됩니다. 이렇게 사용자의 요청을 받아 서버가 실시간으로 처리해주는 기능이 필요해졌고, 그에 따라 웹 서버에서 정보를 처리해 다시 웹페이지에 반영하는 ‘백엔드 기술’이 등장하게 됩니다.

이때 등장한 기술이 NCSA에서 만들어진 CGI(Common Gateway Interface)입니다. 사용자가 웹페이지에서 입력을 보내면, 서버는 그 정보를 받아 CGI 프로그램을 실행해 결과를 만든 뒤 다시 웹페이지로 돌려보내는 방식이었죠.



Fig.5 1차 브라우저 전쟁 넷스케이프 vs 익스플로러 - CSS, Javascript, DOM

모자이크의 성공에도 불구하고 모자이크 개발을 주도했던 아르바이트생 앤드리센은 정식 개발팀에 포함되지 못했고, 앤드리센은 NCSA를 떠나 넷스케이프*Netscape* 를 창업합니다. 그리고 1994년 10월, ‘넷스케이프 네비게이터*Netscape Navigator*’라는 웹 브라우저를 출시합니다. ‘넷스케이프 네비게이터’는 상업적인 용도가 아니라면 누구나 무료로 사용할 수 있었습니다. 덕분에 출시한 지 3개월도 채 되지 않아 200만 건이 넘는 다운로드를 기록하며 폭발적인 반응을 일으켰고, 넷스케이프 네비게이터는 웹의 상징이 되었죠.

이 상황을 지켜보고 있던 마이크로소프트는 모자이크 브라우저에 라이선스 비용을 지불하고 ‘인터넷 익스플로러*Internet Explorer* ’를 개발하여 1995년 브라우저 경쟁에 뛰어들죠. 인터넷 익스플로러 2.0부터는 브라우저를 무료 제공을 하며 공격적으로 마케팅합니다.

넷스케이프도 이에 맞서며 경쟁이 치열해집니다. 특히 1996년에는 웹사이트에서 사용자와 상호작용할 수 있게 해주는 JavaScript를 개발해 넷스케이프 네비게이터 2에 탑재합니다. 이에 질세라 MS도 같은해 Jscript를 개발해 인터넷 익스플로러 3.0에 탑재하고, 뿐만 아니라 CSS(Cascading Style Sheets)라는 웹 디자인 기술을 도입해 주목받았죠. CSS는 HTML 내부에 직접 스타일을 입력하던 비효율적인 구조를 해결하며 웹의 시각적 표현을 풍부하게 만들어 주었습니다.

JavaScript와 JScript 덕분에 웹사이트는 버튼 클릭, 마우스 오버 같은 간단한 인터랙션을 구현할 수 있게 되었습니다. 그러나 이때까지는 웹페이지의 구조나 내용 자체를 자유롭게 제어하긴 어려웠습니다. 이를 해결하기 위한 기술로 등장한 것이 바로 DOM(*Document Object Model*)입니다. DOM은 웹페이지의 내용을 계층적 구조로 표현하여, 자바스크립트가 특정 요소를 선택하고 조작할 수 있도록 해주었습니다. 덕분에 사용자가 글자를 입력하면 그 값을 검사하거나, 버튼을 누르면 화면 구성이 바뀌거나, 필요한 부분만 서버에서 불러오는 기능도 가능해졌습니다.

1997년 넷스케이프와 마이크로소프트가 각각 DOM 기능이 확장된 새로운 브라우저(Netscape Navigator 4.0과 IE 4.0)를 출시하면서 동적인 웹(DHTML)이 본격화됩니다. 하지만 두 회사가 DOM을 각기 다르게 만들었기 때문에, 한 웹사이트가 브라우저마다 다르게 보이거나 제대로 작동하지 않는 문제가 있었죠. 이런 문제를 ‘크로스 브라우징 이슈’라고 부릅니다. 이러한 혼란은 웹 표준화의 필요성을 절감하게 했고, 이후 W3C와 같은 기구가 등장해 HTML, CSS, DOM 등의 명확한 명세를 정립하게 되는 계기로 작용합니다.

익스플로러와 넷스케이프의 대결은 1997년에 종지부를 찍게 됩니다. MS가 Windows 98에 기본 브라우저로 인터넷 익스플로러를 탑재했습니다. 이미 브라우저가 깔려 있는 컴퓨터 사용자들은 굳이 다른 브라우저를 다운로드할 이유가 없기 때문에 넷스케이프의 점유율은 급감합니다. 넷스케이프는 익스플로러와의 경쟁에서 밀려 결국 1998년, 미국의 큰 통신회사인 AOL에 42억 달러에 회사를 넘깁니다. 이후 인터넷 익스플로러는 독주를 이어가며 2002년에는 점유율 96%까지 올라가게 됩니다.



Fig.6 야후, 아마존 등의 등장 - PHP, JSP

웹이 단순한 문서 공유의 도구를 넘어 일상 속 서비스 플랫폼으로 진화한 결정적인 전환점은 포털과 전자상거래의 등장입니다. 1994년 스탠퍼드 대학의 제리 양*Jerry Yang* 과 데이빗 파일로*David Filo* 는 인터넷 상의 수많은 웹사이트를 주제별로 분류한 디렉토리인 Jerry and David's Guide to the World Wide Web를 만들었고, 이는 곧 ’야후(Yahoo!)’로 발전합니다. 야후는 단순한 링크 모음이 아닌, 정보를 분류하고 검색할 수 있는 웹의 첫 포털 개념을 대중에게 선보였죠.

같은 시기 제프 베조스가 창업한 아마존은 책을 판매하는 온라인 쇼핑몰로 시작해, 웹을 통해 상품을 사고팔 수 있다는 인식을 확산시켰습니다. 이베이, 알리바바 같은 플랫폼도 비슷한 시기에 출범하며 웹은 정보 탐색에서 ‘상거래와 사용자 서비스’ 중심으로 패러다임을 바꾸기 시작합니다.

이런 변화는 웹이 단순히 정적인 문서를 보여주는 수준에서 벗어나, 사용자 계정, 장바구니, 검색, 결제 등 실시간 데이터 처리가 필요해졌다는 의미였습니다. 즉, 웹의 동작 방식은 ‘프론트엔드’뿐 아니라, 사용자의 요청을 받아 처리하는 ‘서버 기술(백엔드)’의 발전이 필수였죠.

기존에는 CGI*Common Gateway Interface* 를 통해 이러한 요청을 처리했지만, CGI 방식은 매 요청마다 외부 프로그램을 새로 실행해야 했기에 서버에 부담이 컸고, 대규모 서비스 확장에도 적합하지 않았습니다. 이런 제약을 극복하기 위해 등장한 대표적인 기술이 바로 PHP와 Java Servlet입니다.

PHP는 1995년 라스무스 러도프*Rasmus Lerdorf* 가 개인 홈페이지 방문자 수를 집계하려 만든 도구에서 출발했습니다. HTML에 직접 프로그래밍 코드를 삽입할 수 있다는 특징 덕분에 빠르게 확산되었고, 설치가 간편하고 학습 난이도가 낮아 개인 블로그나 중소형 웹사이트에서 널리 쓰였습니다. 특히 WordPress와 같은 콘텐츠 관리 시스템(CMS)의 기반 언어로 채택되면서 웹의 보편적 도구로 자리잡게 됩니다.

반면, 기업이나 금융권 등에서는 더 정교하고 안정적인 웹 기술이 필요했습니다. 이에 선 마이크로시스템즈*Sun Microsystems* 는 1997년 Java 언어를 바탕으로 Java Servlet을 발표합니다. Servlet은 CGI 방식의 비효율을 극복해, 서버 메모리를 효과적으로 관리하고 요청에 빠르게 응답할 수 있는 구조를 제공했습니다. 이후 JSP(Java Server Pages)가 등장하면서 Java 기반의 웹 서비스 구축도 본격화됩니다.

이 같은 서버 측 기술의 발전으로 웹은 사용자의 요청에 따라 실시간으로 콘텐츠를 생성하고 처리할 수 있게 되었습니다. 하지만 서버에서 데이터를 만들어도, 그것을 사용자 화면에 효율적으로 반영하는 방법이 미흡했죠. 당시 웹에서는 사용자의 요청이 있을 때마다 전체 페이지를 새로 불러왔기 때문에, 화면이 깜빡이거나 로딩 시간이 길어지는 등 사용자 경험이 크게 저하되었습니다. 특히 빠른 반응이 핵심인 전자상거래나 검색 서비스에서는 치명적인 한계로 작용했습니다.



Fig.7 구글 맵이 보여준 혁신 - Ajax

이러한 문제를 해결하고, 서버에서 생성된 데이터를 더 효율적으로 브라우저에 전달하기 위해 1999년에 등장한 기술이 Ajax(*Asynchronous JavaScript and XML*)였습니다. Ajax는 기존처럼 페이지 전체를 새로 고치지 않고도, 서버와 주고받는 데이터를 바탕으로 화면의 일부만을 바꿀 수 있게 해주는 기술입니다. 즉, 매번 전체 페이지를 갱신하는 것이 아닌 특정 영역만을 빠르게 바꿀 수 있게 되 것이죠. 이로 인해 부드러운 전환과 빠른 반응이 가능한 웹이 열린 것입니다.

Ajax는 2005년 Google Maps를 통해 전 세계 사용자에게 각인됩니다. Google Maps는 웹 기반임에도 데스크탑 소프트웨어처럼 자연스러운 스크롤과 빠른 줌 기능, 실시간 탐색을 제공해, Ajax의 혁신을 보여주었죠.



Fig.8 브라우저 춘추전국시대 - Flash, JQuery

인터넷 익스플로러는 브라우저 시장을 장악했지만, 표준을 무시한 독자적인 구현, 잦은 보안 문제, 기능 업데이트 중단 등으로 비판을 받기 시작합니다. 이에 따라 대안 브라우저들이 등장합니다.

2004년, 모질라 재단은 오픈소스 기반의 Firefox를 출시해 빠른 속도, 탭 브라우징, 확장 기능 등으로 주목을 받았고, 애플도 WebKit 엔진을 기반으로 Safari를 개발해 Mac OS에 기본 탑재했죠. 그 결과, Firefox, Safari, Opera 등 다양한 브라우저들이 공존하는 ‘브라우저 춘추전국시대’로 접어들게 됩니다.

하지만 각 브라우저가 HTML, CSS, JavaScript를 해석하고 실행하는 방식이 제각각이었습니다. 이 시기에 주목받은 것이 Flash였습니다. Flash는 독립 실행 환경으로 브라우저와 상관없이 일관된 사용자 경험을 보장했고, 복잡한 애니메이션, 음악, 동영상 등을 손쉽게 구현할 수 있어 웹 기반 게임, 광고, 멀티미디어 사이트 등에서 널리 사용되었습니다.

하지만 Flash는 검색 엔진에 노출되지 않았고, 보안 취약점과 높은 리소스 소비로 비판을 받았습니다. 특히 모바일 기기와 호환이 떨어졌고, 결국 2010년 애플이 iPhone에서 Flash를 공식적으로 지원하지 않겠다고 선언하며 Flash는 역사 속으로 사라지게 됩니다.

브라우저 간의 호환성 문제를 보다 근본적으로 해결한 것은 jQuery입니다. 2006년 존 레식*John Resig* 에 의해 만들어진 jQuery는 복잡한 자바스크립트 기능을 간단한 문법으로 사용할 수 있게 해주었고, 브라우저마다 다른 DOM, 이벤트 처리, Ajax 방식의 차이를 통일된 방식으로 다룰 수 있게 해주는 API(기능 호출 방식)를 제공했습니다. 이를 통해 개발자는 복잡한 크로스 브라우징 문제를 걱정하지 않고, 웹의 동작을 더 쉽게 제어할 수 있게 되었습니다.



Fig.9 빠르고 간편해지는 백엔드 개발

웹 개발은 점점 복잡해졌고, 이에 따라 웹 개발자들은 더 많은 기능을 더 빠른 시간 안에 구현해야 했죠. 이 과정에서 PHP는 개발 속도는 빠르지만 유지보수가 어렵고, Java는 안정성은 뛰어나지만 설정이 복잡하고 개발 속도가 느린 구조적인 한계에 부딪히게 됩니다.

이런 상황에서 새로운 접근을 제시한 것이 바로 Ruby on Rails입니다. 2004년 데이비드 하이네마이어 한슨*David Heinemeier Hansson* 이 만든 Rails는 Ruby 언어를 기반으로, 반복적인 코드를 줄이고 구성 요소를 표준화하며, 데이터베이스와의 연동까지 자동화하는 기능을 제공합니다. GitHub, Shopify, Twitter 같은 서비스들이 초기에 Rails를 채택하면서 그 영향력은 더욱 커졌습니다.

비슷한 시기, Python 기반의 Django도 등장합니다. 원래는 지역 신문사의 콘텐츠 관리 시스템을 위해 개발되었지만, 빠른 개발과 보안 중심 설계 덕분에 교육기관, 언론사, 콘텐츠 서비스 등에서 널리 사용됩니다. Django는 기본적으로 관리자 화면이 자동 생성되며, 복잡한 SQL문을 직접 작성하지 않고 파이썬 문법으로 데이터를 조작할 수 있었고, 템플릿 시스템까지 제공하며 웹 전반의 구조를 깔끔하게 정리할 수 있었습니다.

이처럼 Ruby on Rails와 Django는 복잡한 서버 개발을 간결하게 만들었고, 웹 개발이 ‘빠른 프로토타입 제작 → 반복적 개선’이라는 새로운 문화로 변화하는 데 핵심적인 역할을 했습니다.



Fig.10 브라우저 시장을 제패한 크롬

2000년대 중반, 구글은 더 이상 단순한 검색 서비스 기업이 아니라, 웹 자체를 하나의 운영체제처럼 만들겠다는 비전을 세우게 됩니다. 사용자 대부분이 웹 브라우저를 켜고 제일 먼저 방문하는 곳이 구글이었기에, 웹이 OS처럼 작동한다면 구글은 그 출발점에 설 수 있었죠.

이를 위해 구글은 문서 작성(Google Docs), 이메일(Gmail), 캘린더 같은 웹 기반 소프트웨어를 차례로 개발합니다. 하지만 웹 애플리케이션을 제대로 작동시키기 위해서는 당시 브라우저의 성능으로는 한계가 있었습니다. 이에 구글은 스스로 브라우저를 만들기로 결정하고, 브라우저의 핵심 구성 요소인 자바스크립트 엔진도 직접 새로 개발하기로 합니다.

그렇게 2008년 V8 JavaScript 엔진이 등장합니다. V8은 기존 엔진들과 달리 코드를 한 줄씩 해석하는 방식이 아니라, 전체 코드를 기계어로 바꿔 실행하는 JIT(Just-In-Time) 컴파일 방식을 채택합니다. 이로써 자바스크립트의 실행 속도가 획기적으로 빨라졌고, 브라우저에서 실제 데스크톱 앱에 가까운 복잡한 기능도 가능해졌습니다. 또한 멀티코어 CPU 환경에 최적화된 병렬 처리 기술도 적용되었죠.

V8 엔진은 애플의 오픈소스 렌더링 엔진인 WebKit과 결합되어 같은 해 ‘크롬*Chrome*’ 브라우저로 완성됩니다. 크롬은 빠른 속도와 강력한 디버깅 도구, 간결한 사용자 인터페이스로 개발자와 일반 사용자 모두에게 큰 인기를 끌었고, 당시 인터넷 익스플로러가 독점하던 브라우저 시장에서 속도와 안정성, 개발 친화성을 무기로 빠르게 점유율을 확보해나갑니다. 2012년에는 세계 브라우저 점유율 1위로 올라서며 웹 개발의 새로운 표준 환경을 만들어갑니다.



Fig.11 JavaScript할 줄 알죠? 이제 서버도 개발하세요 - Node.js

2009년, 라이언 달*Ryan Dahl* 은 구글의 V8 JavaScript 엔진을 기반으로 서버에서도 JavaScript를 실행할 수 있는 기술인 ‘Node.js’를 발표합니다. 이전까지는 브라우저(클라이언트)는 JavaScript, 서버는 PHP, Java, Python 같은 언어로 나뉘어 개발하는 것이 일반적이었지만, Node.js의 등장으로 한 명의 개발자가 프론트엔드와 백엔드를 모두 자바스크립트로 개발할 수 있는 시대가 열립니다. 따라서 빠른 개발과 인력 절감이 중요한 스타트업 환경에서 특히 큰 주목을 받게 됩니다.

Node.js의 또 다른 혁신은 서버 작동 방식 자체를 바꿨다는 점입니다. 기존 서버는 요청이 들어올 때마다 새로운 프로세스나 스레드를 생성해 처리했지만, 이는 많은 사용자가 동시에 접속하면 서버에 과부하를 일으키기 쉬웠습니다. Node.js는 하나의 프로세스로 수천 개의 요청을 효율적으로 처리할 수 있도록 했습니다. 이 구조는 채팅, 알림, 실시간 데이터 처리 등 동시성이 중요한 서비스에 최적화되어 있었습니다.

이러한 구조적 혁신과 함께 Node.js 생태계를 탄탄하게 만든 또 하나의 요소는 npm(Node Package Manager)이었습니다. 개발자는 자신이 만든 라이브러리나 도구를 npm에 등록하고, 다른 개발자는 이를 간편하게 설치해 사용할 수 있었죠. 이로 인해 JavaScript 기반의 수많은 유틸리티와 프레임워크가 빠르게 확산되었습니다.



Fig.12 복잡한 UI의 페이스북 - React

2000년대 후반, 페이스북은 전 세계 수억 명의 사용자를 확보하며 빠르게 성장합니다. 사용자가 늘어날수록 웹사이트가 처리해야 할 데이터도 많아지고, 사용자의 행동에 따라 화면을 실시간으로 반응시키는 일이 중요해졌습니다. 그러나 당시 주류였던 jQuery 기반의 방식은 화면 구성 요소를 일일이 제어해야 했고, 복잡한 UI에서는 유지보수와 성능 모두에 한계가 있었습니다.

이 문제를 해결하기 위해 페이스북은 2013년, React라는 UI 라이브러리를 오픈소스로 공개합니다. React는 웹 화면을 ‘컴포넌트’라는 작은 단위로 나눠서 개발할 수 있게 만들었고, 각 컴포넌트는 상태(state)와 전달받은 데이터(props)를 바탕으로 화면을 그리도록 설계되었습니다. 가장 혁신적인 점은 실제 화면(DOM)을 직접 조작하지 않고, 가상의 화면 구조인 Virtual DOM을 사용한다는 점이었습니다. Virtual DOM은 실제 DOM보다 훨씬 가볍기 때문에 빠르게 화면의 변화를 계산할 수 있었고, 변경이 필요한 부분만을 선별해 실제 DOM에 반영함으로써 효율적인 렌더링이 가능했습니다. 이를 통해 React는 복잡한 UI를 다루는 데 필요한 속도와 관리 편의성을 모두 갖추게 되었고, 곧 프론트엔드 개발의 새로운 표준으로 자리잡게 됩니다.



Fig.13 React, Angular, Vue 삼국지

페이스북이 React를 공개하기 전, 2010년에 구글은 이미 AngularJS라는 혁신적인 프레임워크를 선보였습니다. AngularJS는 기존 웹 개발에서 사용자가 입력하면 자바스크립트로 직접 DOM을 찾아서 내용을 바꿔야 했던 것과 달리 화면에 보여줄 내용을 미리 템플릿화해두고, 사용자가 그 안에 넣을 데이터만 바꾸면, 알아서 화면이 갱신되는 구조였어요. 이런 방식을 ‘양방향 바인딩’이라고 부릅니다. 하지만 이를 위해 AngularJS는 화면이 바뀌었는지를 주기적으로 계속 확인해야 했기에 페이지가 복잡해질수록 느려지고, 성능 문제도 생겼습니다.

이런 한계를 극복하려고, 구글은 2016년 완전히 새롭게 만든 Angular 2를 발표합니다. Angular 2는 React의 컴포넌트 방식을 도입합니다. 그리고 Zone.js라는 기술을 이용해 변화가 생길 가능성이 있는 순간에만 화면의 변화를 감지해 성능 문제도 해결하죠. 하지만 기존 AngularJS와 호환되지 않아 기존 사용자들이 이탈했고, 구조가 복잡하고 배우기도 어려워 신규 유저 유입도 쉽지 않았습니다.

이러한 Angular의 복잡함과 React의 JSX 문법에 익숙하지 않은 개발자들 사이에서 새로운 대안으로 떠오른 것이 Vue.js입니다. Vue는 구글의 개발자 에반 유*Evan You* 가 React와 Angular의 장점만을 취합해 만든 프레임워크입니다. React처럼 컴포넌트 기반 구조를 따르되, HTML 중심의 템플릿 문법을 사용해 진입 장벽을 낮췄고, 상태 관리, 라우팅, 빌드 도구 등을 공식적으로 지원하면서 점진적 도입이 가능한 구조로 설계되었습니다. 덕분에 Vue는 소규모 팀과 개인 개발자를 중심으로 빠르게 확산되며, Angular, React와 함께 프론트엔드 삼국지를 형성하게 됩니다.



Fig.14 메타 프레임워크의 시대 - Next.js

React, Angular, Vue는 화면을 구성하는 데 강력했지만, 웹 애플리케이션 전체를 구축하기에는 부족한 점이 있었습니다. 예를 들어, 화면 이동(라우팅), 서버에서의 데이터 처리, 검색엔진 최적화(SEO) 같은 기능은 따로 구현해야 했기 때문입니다.

이 문제를 해결하고자 등장한 것이 바로 Next.js입니다. 2016년 Vercel에서 발표된 Next.js는 React를 기반으로 하지만, 페이지 단위 라우팅, 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), 이미지 최적화, SEO 기능 등을 내장해, 복잡한 설정 없이 전체 웹사이트를 효율적으로 구성할 수 있게 해줍니다.

이처럼 UI 도구에 그치지 않고, 백엔드와 배포까지 포괄하는 프레임워크*를 ‘메타 프레임워크(meta-framework)’라고 부릅니다. Next.js 이후 Vue 기반의 Nuxt.js, Svelte 기반의 SvelteKit, Solid 기반의 SolidStart 등도 등장하며 웹 개발의 흐름은 ‘통합과 자동화’로 진화해가고 있습니다.

이 과정에서 또 하나 주목받은 기술이 있습니다. 바로 Svelte입니다. 기존 프레임워크들이 브라우저에서 Virtual DOM을 통해 DOM을 갱신한 반면, Svelte는 개발자가 작성한 코드를 컴파일 시점에 실제 DOM 조작 코드로 바꿔주는 방식입니다. 즉, 브라우저가 무겁게 계산하지 않아도 되고, Virtual DOM도 필요 없게 되는 것이죠. Svelte는 이런 점에서 프레임워크가 아니라 컴파일러에 더 가깝고, DOM을 ‘언제, 어떻게 바꿀지’에 대한 고민을 아예 없애버리는 접근으로 새로운 흐름을 만들어가고 있습니다.


*프레임워크 : 자주 사용하는 기능들을 미리 구조화해 놓은 일종의 도구 모음입니다. 즉, 개발자가 일일이 기본부터 만들 필요 없이, 정해진 틀 안에서 빠르고 일관되게 개발할 수 있도록 돕는 도구이죠. 이 글에서 언급된 프레임워크는 Ruby on Rails, Django, React, Angular, Vue, NEXT.js입니다.



Reference.
- 정지훈. (2014). 거의 모든 인터넷의 역사. 메디치미디어
- 정지훈. (2025). 거의 모든 IT의 역사. 메디치미디어
- 이동준. (2023). 자바스크립트(JavaScript)의 탄생 이유와 역사. URL: https://velog.io/@dongjun187/자바스크립트JavaScript의-탄생-이유와-역사
- 안정현. (2021). [Web] 웹 서비스의 역사와 발전. URL: https://velog.io/@ahnjh/Web-웹-서비스의-역사와-발전
- 김민정. (2022). 웹 브라우저의 역사. URL : https://www.howdy-mj.me/general/history-of-web
- 김민상. (2021). 짧게 써보는 웹 프론트엔드의 역사. URL : https://velog.io/@minsangk/짧게-써보는-웹-프론트엔드의-역사