위코드 멘토 송은우님 세션 듣고 정리
위코드에 와서 들은 첫 번째 세션인 웹서비스 역사와 발전을 듣고 필기한 부분을 정리했습니다.
인터넷이라는 개념은 1950년대 한창 전쟁이 유행하던 무렵에 군사적인 목적으로 개발하여 만들어졌습니다. 당시의 인터넷은 우리가 지금 떠올리는 네이버와 같은 인터넷이 아니라 물리적으로 떨어져있는 곳에서 서로 정보를 주고 받기 위한 목적이 다분한 수단이었죠. 지금의 인터넷은 팀 버너스리가 1991년에 WWW(World Wide Web)이라는 개념으로 만들어냈다고 볼 수 있습니다.
인터넷의 발달로 인해 생겨난 변화로는 여러가지를 들 수 있지만 가장 큰 변화로는 유통의 혁신을 들 수 있습니다. 십여년 전만 하더라도 게임이나 운영체제와 같은 프로그램을 개발하고 이를 소비자들에게 배포를 하기 위해서는 물리적인 매개체인 플로피 디스크나 CD 등이 필요했습니다. 하지만 요즘은 CD롬이 있는 컴퓨터를 찾아보기 힘들뿐만 아니라 CD도 음반에서나 사용하는 매체가 되었고, 모든 소프트웨어의 유통은 온라인으로 이루어지고 있죠.
이 커다란 유통 혁신은 산업 자체를 바꿔놨습니다. 이전에는 소프트웨어를 개발하는 것 말고도 유통을 시키기 위해 엄청난 노력이 필요했지만, 극단적으로는 개발자 혼자서 소프트웨어를 개발해서 배포하고 사업적으로 성공하는 사례도 많이 나타나고 있습니다. 이러한 추세를 따라 2000년대에 들어서 닷컴버블이 불었습니다. 대부분 도태되어 사라지기는 했지만 구글, 아마존 등이 이 버블 시대에 태어나 현 시대를 지배하고 있죠. 그사이 산업 구조는 완전히 바뀌어 지금의 산업 구조를 이루게 되었습니다.
웹 서비스의 변천
1세대 웹 서비스
1세대 웹서비스는 HTML과 CSS로 대표되며, 매우 정적(static)이었습니다. HTML과 CSS 자체가 언어이긴하지만 로직이 존재하지 않은 언어로, 기존에 작성된 내용대로의 화면을 서비스하는게 다였습니다. 서버는 사용자가 요청한 저장된 웹 페이지를 보내게 되고, 사용자는 서버에 저장된 데이터가 변경되지 않는 이상은 고정된 화면을 볼 뿐이었습니다.
HTML(Hyper Text Markup Language) : 하이퍼텍스트를 마크업 해주는 언어로 링크를 기반으로 서비스가 이루어짐
2세대 웹 서비스
점차 인터넷이 발달하고, 사람들의 니즈가 발생하면서 웹 서비스에 동적(Dynamic)인 기능들이 필요하게 되었습니다. 동적인 웹 페이지는 서버에 있는 데이터들을 스크립트로 가공 처리한 후 사용자에게 전달하게 되며, 사용자는 상황, 시간, 요청 등에 따라 달라지는 화면을 볼 수 있게 됩니다. 넷스케이프가 자바스크립트를 개발해 이 니즈를 충족시킵니다.
기존에 존재하던 언어(C 등)를 사용하지 않고 새로 자바스크립트라는 언어를 개발한 배경에는, 기존 언어는 웹 브라우저를 이해시키지 못한 한계점에 있습니다. 기존 언어로도 할 수는 있었지만 효율성이 떨어졌던거죠.
네이버 실시간 검색어도 동적인 웹 서비스의 일부 입니다.
3세대 웹 서비스
3세대 웹 서비스에서는 주객이 전도되게 됩니다. 2세대까지는 HTML과 CSS 위에 자바스크립트가 얹혀진 느낌이었다면, 3세대에서는 자바스크립트 위주로 코드가 작성되고, 필요한 태그들은 자바스크립트에서 동적으로 생성해서 사용하기 시작했습니다.
여기서 SPA(Single Page Application)이라는 개념이 등장합니다. 단일 페이지 내에서 모든 것을 처리한다는 개념인데, 기본적으로 웹 서비스에 필요한 모든 정적 리소스를 최초 한 번에 다운로드 합니다. 이후 새로운 페이지 요청 시 갱신에 필요한 데이터만을 새로 전달 받아 갱신하므로 전체적인 트래픽이 감소하고, 전체 페이지가 다시 렌더링 되는게 아니라 변경 부분만 갱신되므로 네이티브 앱과 유사한 사용자 경험을 제공합니다.
기존의 방식은 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링해서 사용성이 좋지 않았죠. 때문에 모바일 퍼스트의 시대에는 SPA가 훨씬 더 부합한다고 볼 수 있습니다.
이때부터 UI와 UX를 담당하는 프론트엔드와 데이터를 처리하는 백엔드의 경계가 좀 더 명확해지게 되었습니다.
1~3세대 웹 서비스를 모두 경험하면 살아왔지만 구체적인 내용은 잘 몰랐는데 이번 세션을 통해 좀 더 깊게 이해하게 되었다.
참고 내용
- 송은우님 세션
- 5.36 SPA & Routing Single Page Application & Routing _ poiemaweb
