소개
HTML5, CSS3, JavaScript를 통해 프론트엔드 웹 인터페이스를 제작해보신 적이 있으신가요? 물론, 지금의 날에는 크게 어려운 일은 아닐겁니다. 필요한 기능을 제공하는 것은 복잡하지 않고, 작은 프로젝트는 비교적 쉽게 끝낼 수도 있기 때문이죠. 중간 ~ 큰 프로젝트의 경우에는, 사용자 요구 사항으로 인해 적용될 복잡한 것들을 처리하려면 적어도 한 개 이상의 프레임워크를 고민해봐야할 것입니다.
오늘날, 초보 개발자들은 훨씬 복잡한 프론트엔드 인터페이스를 20년전에 가능했던 기술보다 훨씬 더 빠르게 제작할 수 있습니다.
이 글에서는, 현대의 프론트엔드 프레임워크가 이러한 수준의 정교함을 제공하기 위해 어떻게 발전됐는지 알아볼 것 입니다.
기초적인 기술 타임라인
먼저 웹을 구성하는 기본적인 기술들을 빠르게 알아볼 것 입니다.
HTML, CSS 그리고 JavaScript의 역사는 굉장히 방대하고 이는 한 권의 책을 뚝딱 만들어 낼 수 있는 분량입니다.
저는 지난 30년 동안 일어난 가장 중요한 순간들 중 일부만을 집중적으로 다룰 것 입니다.
Tim Berners-Lee at CERN (CERN 소속 팀 버너스 리)
최초의 HTML 설계는 1991년에 팀 버너스 리에 의해 공식적으로 제작되었습니다.
당시에는 오직 텍스트만 지원했고 18개의 태그가 존재했었죠.
이후 1994년 10월에 Hakon Wium Lie에 의해 CSS가 세상에 나오게 됩니다.
그리고 2년 뒤, HTML 4.0이 CSS를 지원하는 첫 번째 사양으로 출시하게 됩니다.
Internet Explorer 3는 CSS를 지원하는 첫 상업적 브라우저가 됐습니다.
이 시기는 CSS1이 World Wide Web Consortium의 권장사항이 되기 전이었습니다.
1995년에는 Brendan Eich가 단 10일 만에 Mocha라는 새로운 브라우저 스크립팅 언어를 만들었습니다.
후에는 LiveScript라는 이름으로 개명이 됐었고 몇 달 뒤에 현재 우리가 잘 알고 있는 JavaScript라는 이름으로 다시 개명을 하게 됩니다.
Ecma International은 현재 자바스크립트 기술 개발을 담당하고 있습니다.
HTML과 CSS 기술은 W3C라고도 불리는 World Wide Web Consortium 산하에 속해있습니다.
CSS의 문제점
저는 우리가 프론트엔드 프레임워크에 대해 논하기 전 CSS에 관한 중요한 내용을 먼저 논하고 싶습니다.
웹 초기에는, 대부분의 브라우저가 CSS 표준사양을 준수하지 않았습니다.
한 브라우저에서는 CSS가 정상적으로 동작했다면, 다른 브라우저에서는 완전히 엉망인 경우가 많아 개발자들이 웹을 개발하는데 엄청난 좌절을 겪게 만들었습니다.
여러 브라우저에 대응하는 코드를 짜는것은 악몽과 같았죠. 당시, Internet Explorer는 가장 인기 있는 브라우저였지만, Box-Model과 같은 여러 CSS 기능을 제대로 구현하지 못했습니다. 때문에 특정 브라우저들의 다양한 문제들을 고치기 위해 다양한 CSS 편법들이 만들어졌었죠.
이러한 문제점들 속에서 Web Standard Projects로 알려진 그룹이 ACID tests라고 불리는 CSS 테스트 시리즈를 만들게 됩니다.
브라우저에서 CSS가 올바르게 구현된 경우, 다음에 올 이미지는 아래와 같아야 합니다.
<대충 잘 나오는 사진>
하지만 이 사진을 Internet Explorer 7 에서 보면 다음과 같이 보이게 됩니다.
<대충 못생기게 나오는 사진>
여러분들은 이전 버전에서는 얼마나 구렸는지 보고싶지 않을테죠.
모든 주요 브라우저들은 어떤 식으로든 영향을 받게 돼있습니다.
Web Standards Project와 온라인 커뮤니티의 노력 덕분에 이제 대부분의 CSS 문제가 주요 브라우저들에서 해결되었습니다.
2011년 4월, CSS 2.1이 권장사항으로 제안되었을 때, 이 때까지 걸린 시간이 무려 13년이나 됩니다.
CSS Level 2 (이하 CSS2)는 W3C의 1998년도 권장사항이었습니다.
CSS2에서 CSS2.1로 오기까지 이렇게 오래 걸렸던 이유는 새로운 개정판의 완성을 지연시키는 몇 가지 CSS 기능 때문이었습니다.
CSS3의 경우 모든 CSS2.1의 레벨들이 모듈 단위로 분류됩니다.
각각의 모듈은 이제 독립적으로 개발이 가능하게 됐습니다.
사양의 세분화는 브라우저 개발자들이 모듈 수준에서 최신 권장 사항을 더 빨리 따라잡는데 엄청난 도움이 되게 됩니다.
오늘날, CSS4 수준으로 제작된 몇 가지 모듈이 있습니다. 다른 것들은 모두 CSS3 수준이며 만약 새로운 CSS 기능이 추가 된다면 이는 처음인 CSS1이 되겠죠. 만약 당신의 브라우저가 각기 다른 CSS 모듈들을 잘 지원하고 있는지 알고 싶다면
https://css3test.com 다음의 사이트를 참조하시면 될 겁니다.
CSS 프레임워크
2000년대 중반쯤, CSS 라이브러리와 프레임워크들이 막 나오기 시작했습니다.
이 프레임워크들은 웹 디자이너가 컨텐츠를 레이아웃하는 데 도움이 되는 그리드 시스템을 도입했으며 대부분의 브라우저를 지원했어요.
초기 CSS 프레임워크에는 Blueprint, 960, YUI Grids 및 YAML 등이 있었습니다.
Blueprint CSS 프레임워크의 UI 요소
모바일 휴대폰 제조업체들이 기기에 웹 브라우저를 장착하기 시작했을 때, 아직 모바일을 위한 웹 사이트를 만들기 위한 노력이 부족했습니다.
다행히도 모바일 브라우저 자체는 웹 페이지를 작은 화면에 맞게 다시 포맷할 수 있었어요.
그렇게 시간이 지나가면서, 휴대폰의 하드웨어는 급속도로 발전이 되기 시작합니다.
2006년에는 오페라 모바일이 ACID2 테스트를 통과하는 첫번째 모바일 브라우저가 됐으며 Safari는 이를 통과하는 첫번째 웹 브라우저가 됩니다.
2007년, 스티브 잡스에 의해 첫 iPhone이 세상에 알려지게 됩니다.
지금까지의 폰들보다 월등히 큰 스크린 사이즈를 자랑했습니다.
그리고 곧 아이폰과 사이즈가 비슷하거나 조금 더 커진 안드로이드 폰들이 등장하게 됩니다.
스마트폰의 인기와 함께 모바일 브라우징의 사용도 증가하게 되면서 인터넷 사용량을 대폭 증가시키게 됐습니다.
그리고 곧, 많은 회사들이 자사의 웹 사이트를 모바일에 맞게 제작해야겠다는 중요성을 알아차리게 됐죠.
2011년, 트위터가 Bootstrap CSS 프레임워크를 오픈 소스 기반 형태로 내놓게 됩니다.
2012년, Bootstrap2가 다른 많은 새로운 기능들과 함께 12열 반응형 그리드 레이아웃 시스템을 선보이며 출시 됐습니다.
2013년, Bootstrap3가 구성 요소를 재설계하고 모바일 우선 설계 철학을 기반으로 출시 됩니다.
그로부터 4년 뒤, 2017년에 Bootstrap4가 출시되게 됩니다. 현재까지도 Bootstrap은 전 세계적으로 가장 사랑받고 있는 CSS 프레임워크 입니다.
자바스크립트 프레임워크들
CSS와 마찬가지로 자바스크립트는 브라우저 호환성이 문제인 약간의 거친 과정을 거쳤습니다.
당신이 사용하는 모든 브라우저에서 JavaScript 코드가 올바르게 실행되도록 하려면 약간의 추가적인 노력을 기울여야 할 겁니다.
또한 강력한 타입 언어를 사용하다가 JavaScript를 접하게 되는 것이라면, 다음 사진과 같이 JavaScript의 몇 가지 단점을 알고 있어야 합니다.
JavaScript 작업을 재미나게 해준 초기 라이브러리 중 하나는 jQuery 였습니다. jQuery는 2006년 8월에 출시됐습니다.
이는 개발자들이 브라우저 호환성에 대한 걱정 없이 자바스크립트 코드를 작성할 수 있게 도와줬으며 웹 사이트를 동적으로 사용하게 만들 수 있는 유용한 기능이 많이 포함되어 있었습니다.
그 이전에는 1996년부터 존재했던 AJAX라고 불리는 기술이 있었습니다.
그 때는 이름이 달랐는데 IE와 Mozilla에 의해 처음 구현되었습니다.
하지만, 이 기술은 잘 사용되지 않았습니다.
2004년, 구글이 자사의 Gmail과 Google Maps 기술에 표준 버전의 AJAX 기술을 도입했습니다.
그리고 곧, 그들은 자신의 웹 어플리케이션에도 이 기술을 도입하기 시작합니다.
이후 jQuery 와 같은 프레임워크나 라이브러리들은 AJAX를 지원하기 시작했죠.
프론트엔드 프레임워크와 라이브러리의 수가 증가하게 됐고,이에 따라 의존성을 관리하는 것을 고려하게 되었습니다.
2012년, 트위터가 프론트엔드 의존성 패키지 매니저인 Bower를 런칭하게 됩니다.
Bower는 Bower가 위치한 모든 웹에 의존성을 다운로드하고 적용했습니다.
2014년, npm 레지스트리라고 불리는 프론트엔드 패키지용 중앙 저장소가 만들어지게 됩니다.
이는 현재까지 350,000 개가 넘는 패키지를 보유하고 있습니다.
jQuery가 가장 인기있는 자바스크립트 라이브러리로 활동할 때 쯤, 화면을 공유할 때 데이터를 일관되게 처리하는 기능이 부족하다는 것이 대두되기 시작합니다.
이 문제를 해결하기 위해 여러 프레임워크들이 등장하게 됩니다. Backbone, Knockout, Ember는 이 때 빠르게 인기를 얻은 초기의 자바스크립트 기반 라이브러리입니다.
AngularJS가 2010년 10월에 이 시장에 합류하게 됩니다.
AngularJS는 자바스크립트 MVC 프레임워크로써 빠르게 인기를 얻어갔죠.
양방향 데이터 바인딩과 의존성 주입, 라우팅 패키지와 그 외의 것들이 주 핵심요소였습니다.
AngularJS는 개발자들이 웹 프로젝트를 제작할 때 마주하는 많은 문제들을 해결해줬습니다.
하지만 AngularJS의 프로젝트 복잡성이 증가함에 따라 웹 개발자들은 이 프레임워크에 좌절감을 느끼기 시작합니다.
이에 따라 AngularJS 팀은 프레임워크 전체의 디자인을 다시 만들기로 결정했고 이것이 Angular2 입니다.
하지만 불행하게도, 이 새로운 버전은 기존의 AngularJS 와는 완벽히 달랐습니다.
새로운 버전에는 이전 버전으로 돌아갈 수 있는 것이 아예 제공되지 않았고 이에 많은 AngularJS 개발자들이 격노했습니다. 그리고 이는 많은 개발자들이 이 프레임워크를 떠나게 하는 계기가 됐죠.
그 이후로 Angular는 예전의 영광에 도달할 수 없었습니다.
2013년 6월 경 미국에서 개최된 자바스크립트 협의에서 이 시장을 바꿀 새로운 라이브러리가 소개되었는데 이것의 이름은 React 였습니다.
React는 페이스북에서 소프트웨어 엔지니어로 일하던 Jordan Walke에 의해 개발되었죠. 많은 관중들은 React의 Virtual DOM, 단방향 데이터 흐름과 Flux 디자인 패턴과 같은 많은 혁신적인 기술들에 놀라움을 감출 수 없었습니다.
React 팀은 이 기술이 Facebook의 버그를 고칠 때 직면했던 가장 큰 반복적인 형태의 문제들을 어떻게 해결해 나가게 해주었는지 설명해주었습니다.
컨퍼런스가 끝나고 난뒤, React는 엄청난 인기 속에 빠르게 성장해나갔습니다.
2015년, Redux 라이브러리가 Dan Abramov 와 Andrew Clarke 에 의해 탄생하게 됩니다.
Redux는 Facebook의 Flux 기술에 영감을 받은 혁신적인 데이터 흐름 기술이 되었습니다.
여러분들도 아시다시피, 현재 라이브러리를 위한 엄청난 규모의 생태계와 툴들은 리액트를 위해 제작된겁니다.
심지어 Bootstrap와 같은 기존 CSS 프레임워크도 React를 위한 버전을 개발했을 정도면 말 다했죠.
오늘날, 리액트는 세계적으로 가장 인기있는 자바스크립트 기술입니다. 당신이 만약 리액트를 사용한다면 당신의 프로젝트에 필요한 라이브러리를 찾는 건 그다지 어려운 일이 아닐 겁니다.
AngularJS의 몰락에서, Angular와 React 두 기술을 닮은 듯한 새로운 프레임워크가 떠오르게 됩니다.
2014년 2월에 Evan You에 의해 처음으로 공개 된 진보한 형태의 자바스크립트 프레임워크인 Vue.js가 그 주인공입니다.
Evan You는 이전에 Google과 Meteor에서 근무했습니다. React의 유연성도 싫으면서 Angular의 고집스러움 또한 싫다면, Vue는 그 중간에 위치하려고 합니다.
Vue.js는 Vue 팀에서 공식적으로 유지보수하는 생태계로 둘러싸인 가벼운 프레임워크를 제공합니다.
지금까지의 타임라인 요약
표준화 과정은 마치 모든 레이어를 하나로 묶는 접착제와 같습니다.
이 과정이 없다면, 프론트엔드 기술은 더 흩어지게 되고, 사용할 수 없게 되겠죠.
오늘날, 이 기술 스택들은 어느정도 압축 되어있습니다.
보다 큰 그림을 보기 위해, 위 과정들을 빠르게 요약해보겠습니다.
1990-1995: HTML, CSS, JavaScript 가 세상에 나옵니다.
1996-1999: 표준화를 위한 노력이 시작됩니다. 브라우저의 규약은 엉망이었습니다. 그리고 브라우저 전쟁에 불이 붙기 시작합니다.
2000-2004: CSS 프레임워크가 세상으로 나옵니다. jQuery 가 탄생했구요. 프론트엔드 패키지 관리 시스템도 나왔습니다.
2005-2009: W3C 사양 준수가 완성됐습니다. Chrome 브라우저가 이를 적극적으로 주도했죠. 반응형 디자인과 프레임워크들이 소개되기 시작합니다.
2010-2015: i.e, Backbone, Ember, AngularJS, React, Angular, Vue와 같은 자바스크립트 프레임워크들이 등장하게 됩니다.
HTML5 또한 이 시기에 나옵니다.
2016-2018: GraphQL 기술이 등장하게 됩니다. HTML, CSS, JS는 더욱 강력해졌죠. StoryBook, Motion UI, Gatsby, Next.js와 같이 기존 자바스크립트 프레임워크를 기반으로 한 새로운 플랫폼들이 탄생하게 됩니다.
