프론트엔드의 과거와 현재 – 웹 개발의 진화

프론트엔드의 과거와 현재 – 웹 개발의 진화를 살펴보세요. 웹 개발의 발전과 현대적인 도전에 대한 통찰력 제공.

들어가며…

안녕하세요 OPENMARU의 프론트엔드 개발자 손상준 입니다.

SPA(Single Page Application) 프레임워크들을 활용하여 일상적으로 개발을 하며, 문득 프론트엔드는 어떻게 발전해 왔고 지금처럼 개발을 하고 있을까? 에 대한 궁금증이 생겨 해당 게시글을 포스팅 하게 되었습니다.

생각했던것보다 내용이 길어 1부와 2부를 나누어 포스팅 하려 합니다. 1부에서는 HTML과 CSS Javascript 의 등장과 Jquery 에 대해서 그리고 2부에서는 Ajax 와 SPA 의 등장 과 SPA 프레임워크들에 대해서 소개하려 합니다.

참고로 해당 게시글은 철저하게 검증하여 작성한 게시글 아님으로 틀린 부분이 있더라도 너그러운 마음으로 이해해주시면 감사하겠습니다.

프론트엔드(Front-end) 개발이란?

웹개발에서 프론트엔드를 개발자가 하는 일은 UI/UX 디자인,HTML/Javascript/CSS 코딩, 반응형 처리,웹 성능 최적화, 사용자 인터페이스 구현 등 다양한 일들을 합니다. 그리고 최근에는 React 나 Vue 와 같은 웹 프레임워크를 활용하여 UI 를 구현하고 반응형 처리를 하는등의 업무가 어느정도 보편화 되어 있는 듯 합니다.

때문에 오랫동안 개발을 해온 개발자가 아니라면, 너무나도 당연히 쓰고 있는 이 프로그래밍 언어들, 프레임워크 들을 왜 쓰고 있는지, 어쩌다 이러한것들이 탄생 하였는지 잘 모르는 개발자도 많을 것입니다.

왜 쓰고있는지, 어떤한 과정을 통해서 탄생했는지 를 알고 개발을 한다면, 업무에 대한 더 높은 이해도를 얻을 수 있을것이며, 다양한 호기심과 관심을 불러일으켜 더욱 흥미롭게 개발을 해 나갈 수 있을것입니다.

프론트엔드(Front-end) 개발의 중요성

프론트엔드 개발은 사용자와 직접적으로 연관된 부분을 개발합니다. 사용자와 어떠한 연관성을 가지는지를 알아보기 위해 두가지 예시를 들어보겠습니다.

자료출처: https://imfloresta.tistory.com/186

첫번째 사진은 초창기 네이버의 홈페이지이며 두번째 사진은 현재의 네이버 홈페이지 입니다. 일반적인 사용자라면 첫번째 네이버 홈페이지 보다는 두번째 네이버의 홈페이지의 세련된 UI를 더욱 선호할것입니다.

예쁘고 세련된 UI 뿐만 아니라 편리함과 안정감 또한 중요합니다.

자료출처: https://www.core77.com/posts/122301/Intentionally-Terrible-UIUX-Designs-for-Worst-Volume-Slider

자료출처: https://www.core77.com/posts/122301/Intentionally-Terrible-UIUX-Designs-for-Worst-Volume-Slider

위 첫번째 사진의 컴포넌트를 통해 볼륨을 조절하는 사용자는 자신이 찾는 선택지를 찾아야하는 불편함과 답답한 UX에 불편한 감정을 느낄것입니다. 반면 두번째 사진의 컴포넌트는 볼륨을 늘렸다 줄이는 방법이 직관적이고 편리하게 보입니다.

뿐만아니라 두번째 컴포넌트를 사용할 때 버벅거림 혹은 깜빡임을 느낀다면, 사용자는 불편한 감정을 느낄 수 있습니다.

결론적으로 프론트엔드 개발을 통해 개발자는 사용자에게 호기심을 불러일으킬 수 있어야 하며, 편리함 과 안정감 또한 제공할 수 있어야 합니다.

그렇다면 그러한 사용자 경험을 제공하기위해 프론트엔드는 어떠한 과정을 통해 발전해 왔을까요? 지금부터 하나둘 파헤쳐보도록 하겠습니다.

HTML의 등장과 웹(WEB)의 시작

HTML의 등장

모든 것의 시작은 이사람이였습니다.

우리가 사용하는 전기는 발명의 아버지 에디슨이 있었듯이 웹에는 팀 버너스 리(Tim Berners-Lee) 라는 사람이 있었습니다.

대부분의 발명이 그렇듯이 ‘팀 버너스 리’ 또한 불편함을 개선하는 방법으로 고안해낸 것이 HTML 이였습니다. 1989년 CERN(유럽입자물리연구소)에서 근무를 하던 팀 버너스 리 는 대규모 연구원들 간에 문서를 손쉽게 공유할 수 있는 방법이 필요했습니다.

요즘은 노션, Confluence 등 정보를 공유하는 다양한 문서 공유 플랫폼들이 있지만 이것이 없었던 당시에 인터넷을 활용해 문서를 공유하자는 생각은 어쩌면 자연스럽게 떠올랐을 아이디어 였을 것입니다.

초기의 HTML

Team Berners Lee 와 WWW 팀이 최초로 온라인에 올린 웹 사이트는 다음과 같습니다.

자료출처: https://lorelleteaches.com/2013/09/25/the-first-website-revived/

당시에는 획기적이 였겠지만 지금에 보면 굉장히 단조롭다는 느낌을 줍니다. 당시에 html 의 역할은 단순히 문자를 보여주거나 링크를 연결해주는 기능 밖에는 없었습니다. 때문에 위와 같은 단조로운 느낌의 문서와 같은 형식의 웹 사이트 가 만들어졌을겁니다.

그러한 단조로움에서 벗어나고자 HTML은 색을 입히고 블럭을 배치하고 폰트를 바꾸는 등 스타일에 발전이 이루어졌으며, 이후에 개발된 CSS 는 스타일에 날개를 달아주었습니다.

CSS의 부상과 스타일링의 진화

CSS란?

CSS(Cascading Style Sheets)는 1996년에 , HTML에 스타일 및 레이아웃을 정의하기 위해 개발된 언어로 이후 애니메이션도 추가되면서 HTML을 스타일링 하는데 중요한 역할을 한 기술입니다.

CSS의 역할

누가 뭐래도 CSS의 주된 역할은 HTML 태그들에 이름을 매기고 이름에 따라 styling 할 수 있게 도움을 주는 역할일 것입니다.

이 기술 덕분에 개발자들은 홈페이지의 UI 를 효율적으로 개발 할 수 있게 되었으며, UI 는 획기적인 발전을 이루게 되었습니다.

다음과 같은 예시를 통해 그 역할을 확실히 느낄 수 있습니다.

CSS 가 있기 이전 HTML은 Inline 으로 스타일링 해야 했습니다. 예를들어 다음과 같은 메뉴를 만들고 싶을 수가 있습니다.

이것이 CSS가 없이 만들기 위해서는 다음과 같은 HTML 작성이 필요합니다.

〈ul〉
    〈li style="float:left;list-style-type: none;width:50px;height:30px;background-color:aqua;text-align:center;vertical-align: middle; line-height: 30px; border:1px solid"〉 메뉴1〈/li〉
    〈li style="float:left;list-style-type: none;width:50px;height:30px;background-color:aqua;text-align:center;vertical-align: middle; line-height: 30px; border:1px solid"〉 메뉴2〈/li〉
    〈li style="float:left;list-style-type: none;width:50px;height:30px;background-color:aqua;text-align:center;vertical-align: middle; line-height: 30px; border:1px solid"〉 메뉴3〈/li〉
〈/ul〉

[ inline style의 HTML 코드 ]

위 코드를 보면 반복되는 같은 스타일을 여러 li 에 중복 입력 해 주어야 한다는 것을 알 수 있습니다.

단순히 세개의 메뉴를 스타일링 하는 대도 위와 같은 복잡한 형태의 코드가 생기는대, 홈페이지 하나가 만들어지기 위해서 만들게 된다면 태그들의 관리가 쉽지 않을것입니다.

그래서 태그에 이름을 매기고 한꺼번에 스타일링을해보자

이것이 CSS를 낳게 한 핵심 아이디어 일 것입니다. CSS를 활용해 코드를 수정해 보면 다음과 같습니다.

〈style〉
.menu{
     float:left;
     list-style-type: none;
     width:50px;
     height:30px;
     background-color:aqua;
     text-align:center;
     vertical-align: middle;
     line-height: 30px;
     border:1px solid"
}
〈/style〉
〈ul〉
     〈li class="menu"〉메뉴1〈/li〉
     〈li class="menu"〉메뉴2〈/li〉
     〈li class="menu"〉메뉴3〈/li〉
〈/ul〉

li 태그에는 menu 라고하는 클래스명을 주었으며 〈style〉〈/style〉 이라는 태그에 menu 라는 이름의 클래스명을 가지는 태그에 공통적으로 스타일링 해줄 속성들을 작성해주었습니다.

덕분에 ‘menu’ 라고 하는 클래스명을가지는 li 태그들은 모두 공통적인 스타일 속성을 가질 수 있게 되었습니다.

만약 같은 스타일의 메뉴를 추가하고자 한다면 계속해서 ‘menu’라는 클래스명을 가지는 li 태그들을 추가하기만 하면됩니다.

〈style〉
.menu{
     float:left;
     list-style-type: none;
     width:50px;
     height:30px;
     background-color:aqua;
     text-align:center;
     vertical-align: middle;
     line-height: 30px;
     border:1px solid"
}
〈/style〉
〈ul〉
     〈li class="menu"〉메뉴1〈/li〉
     〈li class="menu"〉메뉴2〈/li〉
     〈li class="menu"〉메뉴3〈/li〉
     〈li class="menu"〉메뉴4〈/li〉
     〈li class="menu"〉메뉴5〈/li〉
     〈li class="menu"〉메뉴6〈/li〉
〈/ul〉

이처럼 CSS 가 있기에 중복되는 스타일 코드를 정리 할 수 있게 되었으며, 추후 CSS를 작성한 코드만 별도로 분리하여 관리 할 수 도 있게 되었습니다.

이는 개발의 편의성과 유지보수성을 비약적으로 향상시켜 지금에는 스타일링을 하기위해 사용하는 당연한 코드들이 되었습니다.

뿐만아니라 추후 추가된 기능으로 인해 에니메이션 처리나 반응형 처리 또한 가능하게 되었습니다.

CSS의 등장으로 인해 달라진 웹

CSS가 처음 등장하였던것은 1996년 이였습니다. 하지만, 브라우저 호환 문제로 보편화 되지는 않다가 2000년대 중반에 들어서야 본격적으로 인기를 얻기 시작했습니다.

2000년대 중반의 웹사이트들의 인기는 굉장히 폭발적 이였습니다.

자료출처: https://www.inven.co.kr/board/webzine/2097/1604206

자료출처: https://www.inven.co.kr/board/webzine/2097/1604206

자료출처: https://blog.naver.com/dryks/40180270383

자료출처: https://onikaze.tistory.com/528

당시 위 와같은 각종 포털 및 커뮤니티성 사이트들이 인기를 얻기 시작했고 한눈에 보아도 초창기 HTML로 작성된 홈페이지와는 비교도 되지 않을 정도로 복잡한 내용들이 규칙성을 가지고 스타일링이 되어 한층더 UI 가 예뻐졌음을 확인 할 수 있습니다.

그 중심에는 일관된 메뉴와 게시판의 스타일링을 손쉽게 할수 있도록 도와준 CSS가 있었습니다.

JavaScript의 혁신과 동적 웹

JavaScript의 탄생

예쁜것만으로 사람들은 만족할 수 없었습니다. 이제는 다양한 인터렉션을 주어 홈페이지에 생동감을 불어넣고 싶은 욕구가 생겼습니다.

홈페이지의 요소들에 다양한 인터렉션을 주어서 생동감을 불어넣는것 그것이 Javascript 을 탄생하게 한 핵심 아이디어 였을 것이라 생각합니다.

Javscript의 활용

그렇다면 Javascript를 활용해 인터렉션을 주어서 생동감을 불어넣는다는 것은 어떤것일까요? 다음 세가지 방법이 있습니다.

이벤트의 발생
데이터의 저장
데이터의 표현

이해를 돕기 위해 다음 예시를 들어보겠습니다.

버튼을 눌렀을때(이벤트의 발생)
〈input〉에 있는 데이터를 저장해서(데이터의 저장)
〈span〉에 표현하고싶어(데이터의 표현)

위 예제에서 입력 칸에 아무값이나 입력 한 후 입력버튼을 눌렀을 때 입력버튼 우측에 입력한 값이 표현되는 것을 확인 할 수 있습니다.

이처럼 인터렉션과 함께 데이터를 저장하고 표현 할 수 있게 된 것은 Javascript 가 있기에 가능하게 된것입니다.

JavaScript의 탄생 후, 달라진 웹 환경

Javascript의 등장하고서야 사람들은 홈페이지를 활용해 비로소 무언가를 입력하고 저장할 수 있게 되었습니다.

여기에 서버라는 공간에 데이터를 저장하면서 부터 회원가입과 로그인 이라는 것이 가능하게 되었고, 게시물을 작성할 수 있게 되었으며, 본격적으로 웹에서는 다양한 커뮤니케이션이 가능한 세상이 펼쳐지기 시작하였습니다.

자료출처: https://onikaze.tistory.com/528

뿐만 아니라 복잡한 형태의 인터렉션을 가지는 코드(HTML, CSS, Javascript)를 모아 모듈화하여 이제는 단순히 태그단위가 아닌 태그 들의 모임인 컴포넌트단위의 모듈의 라이브러리들이 생겨나기 시작하였습니다.

JQuery의 등장과 컴포넌트 라이브러리들의 인기

JQuery의 등장

JQuery는 2006년에 존 레식(John Resig)이 개발한 JavaScript 라이브러리로, 당시 DOM 조작의 어려움과 크로스 브라우징 문제를 해결하기 위해 만들어졌습니다.

JQuery란?

DOM이란?

DOM이란 Document Object Model 의 약어로 여기서 Document란 HTML 을 말하고 Object model은 객체 모델을 말합니다. 즉 해석하자면 HTML 태그들을 Object 형태 로 관리하자 라는 의미가 됩니다.

이해를 돕기위해 다음과 같은 예시를 들어보겠습니다.

〈ul〉
     〈li〉메뉴1〈/li〉
     〈li〉메뉴2〈/li〉
     〈li〉메뉴3〈/li〉
〈/ul〉

위 HTML을 Object model 로 관리한다는건 트리형태의 자료구조로 데이터를 관리한다는 이야기입니다.

Object로 관리하는것이 왜 트리형태가 되는거지? 라고 생각한다면 Object 가 어떤 구조로 되어있는지를 생각해보면 됩니다. 객체지향 프로그래밍 언어에서 Object 는 field 와 method 로 구성됩니다.

만약 어떤 Object가 children field로 다른 Object 들을 가지게된다면 이는 트리형태의 자료구조가 될것입니다.

따라서 위 예제를 DOM 형태로 추상화 해보면 다음과 같을 것입니다.

이 DOM들을 JavaScript로 조작하기에는 몇가지 어려움이 있었습니다.

JavaScript를 활용한 DOM 조작의 어려움

다음과 같은 예제를 보겠습니다.

위 예제는 JQuery 가 있기 이전 Javascript 를 활용해 메뉴를 선택 했을 때 메뉴가 활성화 되었음을 active 클래스를 추가하여 표현한 예제입니다.

Javascript 코드를 살펴보겠습니다.

// menu 클래스를 가지는 dom 객체를 가져옴
var menus = document.getElementsByClassName("menu");

function handleClick() {
 // 'active' 클래스를 모든 요소에서 제거
 for (var i = 0; i < menus.length; i++) {
 menus[i].classList.remove('active');
 }

 // 클릭한 요소에만 'active' 클래스 추가
 this.classList.add('active');
}

// 선택된 모든 요소에 클릭 이벤트 추가
for (var i = 0; i < menus.length; i++) {
 menus[i].addEventListener('click', handleClick);
}

첫번째 문제는 지금에는 document.querySelector 를 활용하면 되지만, 그것이없던 초기 Javascript 로는 menu 라는 클래스명을 가지는 DOM을 변수로 가져오기 위해서는 document.getElementsByClassName("menu") 라는 심히 불편한 함수명을 가진 함수를 활용하였어야 했습니다.(함수명이 길수록 직관적이지 못합니다.)

두번째 문제가 가장 큰 문제이지만 만약 ul 의 자식인 menu 클래스에 접근 하려 한다고 생각한다면 다음과 같이 굉장히 불편한 코드가 발생합니다.

var navigator = document.getElementsByTagName("ul");

// 예시: 첫 번째 메뉴 아이템의 자식 중 'child' 클래스를 가진 요소를 선택
var menus = navigator.getElementsByClassName('menu')

첫번째로 ul 태그에 접근하는 코드를 작성하고 해당 값이 저장된 변수를 활용해서 menu 태그에 접근해야 합니다. 만약 트리가 깊어진다면 위와 같은 코드는 더욱 복잡해질것입니다.

JQuery 를 활용한 DOM 조작

JQuery 는 이러한 문제를 CSS의 선택자와 같은 컨셉으로 DOM 에 접근하도록 하여 해결하였습니다.

// menu 클래스를 가진 모든 요소 선택
var menus = $(".menu");

// 클릭 이벤트 처리
function handleClick() {
 // 'active' 클래스를 모든 요소에서 제거
 menus.removeClass('active');

 // 클릭한 요소에만 'active' 클래스 추가
 $(this).addClass('active');
}

// 선택된 모든 요소에 클릭 이벤트 추가
menus.on('click', handleClick);

menu DOM에 접근하기위해 document.getElementsByClassName("menu") 와 같은 복잡한 명의 함수를 사용하기보다는 $(".menu") 와 같은 CSS선택자와 같은 친근 코드만 작성하여 가능하도록 한것이 JQuery 의 기본컨셉입니다.

뿐만아니라 ul 태그를 의 자식인 menu 클래스에 접근 하려 한다고 한다면

var menus = $("ul > .menu");

와 같은 굉장히 직관적이고 간단한 코드 만으로도 해결이 가능해집니다. 만약 tree 가 깊어진다고 하더라도 CSS 선택자와 같은 규칙으로 DOM에 탐색 할 수 있기 때문에 코드가 복잡해질 우려는 하지 않을 수 있습니다.

JQuery 라이브러리들의 인기

JQuery 의 등장으로인한 생산성 향상과 인기로 이때부터 JQuery 를 활용한 각종 컴포넌트 라이브러리들이 인기를 얻기 시작했습니다. 대표적으로 아직도 자주 사용되고 있는 carousel 이나, datepicker 와 같은 라이브러리 들이 있습니다.

마치며...

이처럼 프론트엔드는 단순하게 문서를 보여주고 문서간의 링크만이 가능한 HTML 에서부터 시작하여 이를 손쉽게 꾸밀수 있게 해주는 CSS가 탄생하였고, 사용자 인터렉션이 가능하게하는 Javascript가 생겨나며, 인터넷을 통해 홈페이지에서 다양한사람들이 커뮤니케이션이 가능하게 되었습니다.

그리고 JQuery 가 생겨나 DOM 조작이 편리해지고 크로스 브라우징 문제가 해결되며 좀더 복잡한 구조의 컴포넌트들이 웹에서 사용되기 시작합니다.

이때부터 웹에서 사용되는 기능들이 복잡해지며 ‘홈페이지’ 라는 개념보다는 ‘웹 애플리케이션’ 이라는 개념이 인기를 얻기 시작합니다.

이는 이후 Ajax 를 활용한 비동기의 적극적인 활용을 통해 SPA 라는 개념의 웹 애플리케이션들이 생겨나게된 배경이 되었습니다.

이와 관련된 내용은 2부에서 다루도록 하겠습니다.