[TIR] 2022년 웹 개발 Baseline

우연히 LINE 테크 블로그에서 2022년 웹 개발의 경향과 변화를 분석한 글을 읽게 되었다. 분석적이고 논리적이여서 개인적으로 기술 관련 글쓰기를 할 때 자주 참고할 것 같은 글이었다. 읽다가 새롭게 알게 되거나 기억해야할 부분을 발췌해보려고 한다.

우선 가장 중요한 사건은 역시나 IE의 은퇴였다. 이것은 단순히 이제 IE를 쓰지 않는 것을 넘어 웹 개발 전반의 발전 방향과 변화를 의미한다. 그러한 맥락에서 기존의 웹 표준이었던 IE가 은퇴했으니 새로운 베이스라인을 세워보자는 것이 이 글의 요지이다.

새로운 베이스 라인

사용자 기기(CPU 성능), 각 브라우저의 웹 표준 구현 수준, 모바일 네트워크 가용 상황(4G, 5G)을 근거로 삼아 베이스 라인을 도출하고 정의한 것이 인상적이었다. 차례대로 Android 하위 기종, Safari, 4G를 기준으로 삼는다.

이런 기준이 있다면 가능한 한 많은 유저나 환경 같은, 단순하고 막연한 조건에서 개발을 하지 않아도 되며, 다른 팀과 일을 할 때에도 팀원들을 설득하고 합의할 근거를 제시할 수 있다. 무엇을 기준으로 삼고 이를 위해 어떤 데이터가 필요한지 알 수 있어서 앞으로도 많은 도움이 될 것 같다.

현재 웹 점검

이어서 현재 웹 생태계와 현실에 대한 설명이 이어진다. 주로 Alex Russel의 글과 Web Almanac 자료를 기반으로 제시한다. HTML, CSS 사용 실태도 인상적이었는데 역시나 JS와 성능에 대한 설명이 많은 부분을 차지했다.

앞서 말한 베이스라인을 기준으로 좋은 성능을 유지하는 데 적절한 JS의 크기는 최대 350KB임에도 불구하고 JQuery를 제외한, 프론트엔드에서 가장 인기가 많고 널리 쓰이는 React, Angular, Vue 등을 사용하는 웹 사이트는 저 크기를 가뿐히 넘기고 있다고 한다.

또한 SPA가 아닌 SSG를 사용하는 웹 사이트의 경우에도 JS 프레임워크 기반인지(Next.js, Nuxt.js, Gatsby) 아닌지(Go - Hugo, Ruby - Jekyll)에 따라 JS의 크기가 크게 차이가 났다.

2015년, IE와 React의 상관 관계

이처럼 JS 프레임워크, 라이브러리를 사용하는 웹 사이트가 여러 지표에서 하위권을 차지하는 원인이 정말 흥미로웠는데 결국 IE와 관련이 있었다. 2015년을 기점으로 IE는 새로운 개발이 중단되었고, 다른 한편으로 JS에는 더 적은 코드를 작성할 수 있는 기능과 구문이 추가된 ES6이 등장했다. 위에서 비교된 JS 프레임워크와 라이브러리 중에서 2015년 이전에 처음 릴리즈된 건 Angular, React, Vue 이 셋이다. 즉, 이 라이브러리와 프레임워크들은 IE의 지원을 고려해야했고 이것이 성능 문제로 이어진 것이다.

이 글을 쓴 Alan Davalos는 Solid, Preact와 React를 비교함으로써 이를 뒷받침한다. Solid, Preact는 React에서 파생되었음에도 불구하고 여러 성능 지표에서 React를 능가하는데, 이는 "React의 성능이 근본 철학이나 코드 작성 방식이 아니라 React 내부에 있다"고 볼 수 있는 근거가 된다. 리액트가 IE를 지원하기 위해 내부적으로 가상 DOM, 합성 이벤트 시스템 등을 마련한 반면, Preact와 Solid는 기본값으로 모던 브라우저에서 사용할 수 있는 API들을 사용한다고 한다. (이 부분은 IE와 리액트의 구현체들의 상관관계를 정확하게 파악하지 못해서 대략적으로 이해했다.)

결론

결론은 글의 일부를 그대로 옮겨왔다.

• 무언가를 CSS로 할 수 있다면 CSS를 사용하세요. 예전에는 JS로만 할 수 있었던 많은 일들을 요즘에는 CSS로도 할 수 있습니다. 이를 통해 JS 코드를 부분적으로 줄일 수 있습니다.
• 사용하고 있는 툴셋을 평가해 보세요. 최신의 많은 툴들은 예전 툴보다 성능 베이스라인을 높였으며, 또한 모든 프로젝트가 SPA일 필요는 없습니다. Hugo와 Jekyll, 11ty와 같은 프레임워크 기반이 아닌 SSG들이 이런 경우에 아주 적합합니다.
• 최신 브라우저를 대상으로 빌드하세요. IE 지원을 중단하고 빌드 대상을 ES 2017 혹은 ES 2018로 설정합니다. 이렇게 하면 번들 크기를 최대 20%까지 줄일 수 있습니다.
• 접근성을 처음부터 고려하세요. 계획 및 설계 단계에서부터 염두에 두는 것이 가장 이상적인 시나리오입니다. 명암비와 폰트 크기, 시멘틱 HTML 사용, 키보드 내비게이션과 같은 항목을 개선하는 것부터 시작하면 큰 차이를 만들어 낼 수 있습니다.

 

FE 쪽의 개발 트렌드와 환경이 괜히 빠르게 변한다는 말이 나온 게 아니라는 생각이 든다. 코드 작성 뿐만 아니라 웹 생태계나 브라우저, 유저 환경, 성능에 대한 지식과 인사이트 등은 결코 소홀히 하면 안 되는 부분인 것 같다. 이런 요소들을 고려해야하는 것이 부담스럽다기보다 단순히 좋은 코드 이상으로 유저와 맞닿는 현실에 변수가 있다는 점으로 느껴져서 (아직까지는) 재미있다.

그리고 이 글을 읽으면서 IE 지원 중단의 의미가 생각보다 크다는 점이 여러 맥락 속에서 깊이 이해되었고, 더불어 그간 웹 생태계와 관련해서 보고 읽은 자료들이 몇 가지 생각났다. 모던 브라우저를 써야하는 이유에 관한 Google Dev Summit Transitioning to modern JavaScript 영상, 바로 얼마 전에 본 IO 2022 What's new for the web platform, 최근 CSSDAY 컨퍼런스 등.

최근 웹 관련 컨퍼런스나 소식 등을 반추해봐도 - 결론에도 언급되었듯이  - 앞으로 CSS의 활용 능력이 중요해질 것 같고, React 기반이지만 모던 브라우저 환경에 초점을 맞춘 Solid.js 같은 프레임워크나 라이브러리가 큰 인기를 얻을 것 같다. 

 

---

https://engineering.linecorp.com/ko/blog/the-baseline-for-web-development-in-2022/