2022년 웹 개발의 기준

안녕하세요.

 

좋은 글 발견해서 번역하여 (by papago) 글을 작성하려합니다.

 

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

The baseline for web development in 2022 - LINE ENGINEERING

 

---

다양한 기기와 웹 브라우저, 네트워크 등 웹을 좌지우지하는 요소들이 많은데, 우리는 어떤 걸 기준으로 삼아서 개발을 해야할까요 ?

 

그 방향성을 한 번 알아봅시다.

 

IE의 은퇴

2021년 IE가 은퇴했습니다.

 

야호 !

 

MS는 2021년 5월에 이 발표를 했고, MS 365를 포함한 많은 MS 제품들도 공식적으로 IE를 버리기 시작했습니다. 2022년 공식적인 은퇴를 하지만, 사실 현재 많은 웹 사이트들이 이를 당기고 있는 중입니다.

 

구글 검색도 IE의 지원을 중단했더랬죠.

 

신난거 보십쇼 엌ㅋㅋ

 

일본에서도 yahoo japan이 IE를 "비권장 브라우저"라고 설정했다 합니다.

 

대략 배척하겠다는 뜻

 

나아가 웹의 약 33%에서 사용되고 있는 워드프레스도 IE에 대한 지원을 중단하겠다고 합니다.

 

키키킼ㅋ키키킼ㅋ킼ㅋㅋㅋ 넘 좋아

 

IE의 시장 점유율

 

근데 문득 든 생각이 이런식으로 급하게 IE를 왕따시킨다고 생각을 해봤었는데요.

 

사실, 그러지 않습니다. IE의 시장점유율은 계속해서 떨어지고 있었습니다.

 

보이진 않지만, 0.5%가 IE이다.

 

이 쯤되면 ... 놓아줍시다 !!

 

웹 개발을 위한 새로운 기준

시장 점유율 때문에 IE를 지지했지만, 위에서 봤듯이 모두가 왕따시키고 있는 IE가 기준이 되기엔 정당성이 없습니다.

 

근데, 이러면 우리는 길을 잃어버리는데 도대체 어떤걸 기준으로 다시 삼아야하는지가 궁금해지기 때문인데요.

 

과연 어떻게 기준을 삼으면 될까요 ?

 

사용자 장치 및 브라우저

브라우저 시장 점유율 차트의 경우엔 Chrome이 많은 지분을 차지하고 있습니다.

 

Chrome이 쬬 같네요.

 

브라우저 엔진으로 구분을 지어보면, Chrome / Webkit / Gecko 정도가 있는데요.

 

이 세 개를 아우르는 기준이 필요해보입니다.

 

CPU 성능의 차이

OS의 차이는 SW 뿐만 아니라 HW에서도 확인할 수 있는데, 가장 큰 건 CPU 성능이라고 볼 수 있습니다.

 

그 중 iOS가 매년 최고의 CPU 성능 점수를 받았는데,

 

 

높은 성능을 지닌 애를 기준으로 삼으면 안되겠죠. 여기서 뭐 중저가형 모델을 잡아서 기준을 삼아야겠죠 ?

 

웹 표준

위에서 저희가 신경써야 할 브라우저 엔진이 3개가 있음을 확인했습니다. (Chrome / Firefox / Safari)

 

이 중 Safari의 경우엔 다른 두 가지 브라우저보다 웹 표준이 적게 구현이 되어 있는데요.

 

갓롬

게다가 Safari와 iOS의 관계를 이해해야하는데, iOS의 모든 브라우저는 webkit을 기반으로 합니다. 애플의 가이드라인이 그렇대요

 

게다가 Safari는 iOS로의 업데이트가 있을 때마다 업데이트 되는데, 이 말은 즉슨 이에 발 맞춰서 우리가 이를 지원하게 만들면 된다는 뜻입니다.

 

결론적으로 업데이트 되는 Safari 버전만 지원한다면, 나머지 두 개는 지원이 된다... 이 말이겠죠.

 

모바일 네트워크

Wi-Fi에 연결하는 경우 대부분 연결 상태가 안정적이지만, 모바일 네트워크의 경우엔 말이 다릅니다.

 

4G 평균 가용성이 86.8% 이기에 이를 기준으로 삼고 웹 개발을 진행해야 할텐데 5G의 경우는 어떨까요.

 

한국이 가장 5G를 많이 사용하고 있는데, 겨우 29.1%에 불과했으니 4G를 삼으면 되겠죠.

 

결론

결론이 뭘까요.

 

1. Safari를 잘 챙겨주면 된다.

2. 낮은 Android 기기를 챙겨주자.

3. 4G를 기준으로 삼자.

 

주의

현대 웹을 구성하는 것 중 가장 크기를 많이 차지하는 부분이 무엇일까요 ?

 

1등은 Image이고, 2등은 JS입니다.

 

요게 복잡한게 Image는 그냥 보여주면 되지만, JS는 구문 분석 및 실행을 해야하는데, 더 많은 자원을 차지한다는 뜻이 되죠.

 

재밌는 사실은 CSS가 IE가 사장되고 나서 굉장히 날뛰기 시작했는데, 그리드 같은 많은 현대적인 CSS 기능을 사용할 수 있게 되면서, 시장의 흐름이 바뀔 수도 있음을 나타냅니다.

 

프레임워크

우얐든 솔삐 저희는 있는 프레임워크를 사용하지 뭐 만들어서 사용하지 않습니다.

 

그러면 프레임워크와 라이브러리 추세를 한 번 보고 넘어가야하는데

 

웹에서 가장 많이 쓰는 라이브러리가 jQuery로 84%의 이용율을 보여줍니다.

 

프레임워크 중에서는 React를 많이 사용하고요. (-앵-)

 

그 성능을 또 따질 수 밖에 없는데, 크기는 앵귤러가 가장 크고, 리액트와 뷰는 비슷비슷합니다. jQuery는 당연히 제일 작고요.

 

그렇다면 속도는 어떨까요 ?

 

jQuery와 Vue는 그 크기의 차이 만큼 속도차가 정직하게 나지만, Angular와 React... React가 더 느리게 나타납니다.

 

-앵-

 

우리 앵귤러 어때요 ?

 

즉, 프레임워크 크기가 중요한 요지가 아니라는 뜻이 되겠죠.

 

조금 전체적으로 봅시다.

 

Svelte 보소 ..

보시면 리액트와 -앵- 바닐라 JS보다 두 배 더 나쁜 성능을 냅니다.

 

생각보다 Vue가 빨랐고, 최근 각광받는 Svelte도 좋은 성능을 냅니다.

 

왜 그럴까요 ?

 

IE 얘기를 꺼내야겠는데요.

 

엣지가 탄생하면서 IE의 새로운 기능이 중단되었던 시점을 보시면, ES6가 탄생하던 시기와 맞물립니다.

 

ES6 이 전의 것들을 위해 개발된 것들은 ES6를 위해 개발된 것과 크게 다른 것을 알 수 있죠.

 

2015년 전에 탄생한 리액트와 앵귤러를 보시면 알 수 있고, 그 후에 탄생한 애들은 형님이든 누나든 그냥 다 자기들이 짱이라고 으스대고 있습니다.

 

결론2

1. JS에 너무 의존하고 있다.

2. HTML CSS를 적극 이용하자. 그 전엔 IE 때문이었는데, 이제는 얘 버리고 날개 달자

 

CSS를 사용할 수 있다면, JS 대신 CSS를 사용하자.

 

빌드 목표를 ES 2017 / 2018로 설정하여 번들 사이즈를 줄이자.

 

---

대충 적고 싶은 내용만 적었네요.

 

이상 2022년 웹 개발의 기준였습니다. ^0^