📰 Top 14 Cutting-Edge Web Development Trends in 2023

yellow 의
Top 14 Cutting-Edge Web Development Trends in 2023
⚠️ 글을 읽고 작성자 편한대로, 이해한 대로, 기억하고 싶은 부분만 번역했습니다. 믿지 마시고, 되도록이면 위의 원문을 봐주세요.

✒️ 느낀 점

웹 개발 분야는 정말 유달리 변화가 빠르고, 트렌드가 휙휙 바뀌는 것 같다. 벌써 2022년의 10월 중순이 된 만큼, 2023년에 무엇이 트렌드가 될지 살펴봐야 겠다는 생각에 글을 읽기 시작했다.

🔤 번역

글을 시작하며

최초의 웹 페이지가 라이브로 제공된 것은 1991년이다. 그 시작을 이후로 우리의 삶은 영원히 바뀌게 되었다. 오늘날, 수백만의 전 세계 사람들은 인터넷에서 몇 시간이고 서핑을 하고, 돈을 벌고, 쓰며, 반쪽을 찾고 대학 학위를 얻고, 영화를 보고, 노래를 듣고, 음모론을 파헤치고 그 이외에 많은 것들을 한다. 그 내용은 끝이 없을 정도이다.

웹 개발은 단순한 웹 페이지에서 컴퓨팅 파워없이는 불가능했을 새로운 경험을 제공하여 다양한 주제로 유저를 끌어당기는 복잡한 웹사이트로까지 발전하고 있다. 빌 게이츠의 상징적인 명언: "당신의 비즈니스가 인터넷에서 이루어지지 않고 있다면 당신의 사업은 망하게 될 것이다."을 기억하는 사람도 있을 것이다.

웹이 비즈니스 역량에 미치는 영향은 마치 밤에 이어 낮이 오는 것과도 같이 명확하다. 좋은 웹사이트는 기업으로 하여금 고객을 끌어당기고, 그들의 행동과 무엇을 원하는지를 알게 되며 결과적으로 돈을 벌수 있게 한다.

하지만 모든 웹사이트가 비즈니스에 도움이 되는 것은 아니다. 사실, 유저 친화적이지 않고, 느리며, 반응형이지 못한 사이트는 기업이 이루어둔 것들마저 무너뜨릴 수 있다.

“Citius, Altius, Fortius”(라틴어로 빠르게, 높게, 강하게) 는 올림픽 게임의 모토이다. "더 역동적이고, 상호적이며, 빠르게"는 2022년 웹 개발의 신념이다.

떠오르는 스택에 대한 개요

사람들이 트렌드 보고서를 좋아하는 이유는 그들로 하여금 빠르게 바뀌는 웹 개발의 세계를 따라갈 수 있도록 해주며 무엇을 기대해야 될지 이해할 수 있기 때문이다. Yellow 팀에서 2022년 트렌드 레포트 뭉치를 다 읽어왔기 때문에 독자까지 그 모든 것을 읽을 필요는 없다. 당연히, 그럼에도 불구하고 하고 싶다면, 우리는 Adobe, Google, Blue Corona, 그리고 SocPOB 레포트를 읽어볼 것을 추천하다. 현재 드러나는 것은, 불확실성의 시대이긴 하지만, 당신의 웹사이트는 예쁘고, 빠르며, 모바일 친화적이어야 한다는 것이다. 그렇지않으면 이용자는 떠날 것이다. 고객이 없다면 당신의 비즈니스는 굶게 될 것이다.

5초 정도면 방문자가 당신의 사이트에 대한 의견을 가지게 된다고 구글리서치가 발표했다. 그것이 왜 보기 좋고, 유저 친화적인 디자인이 중요한지 말해준다. Blue Corona 는 38%의 사람들이 레이아웃이 매력적이지 않다면 참여를 하지 않는다고 말한다. 당신은 "38%"면 나쁘지 않은데라고 생각할 수도 있다. 기다려라. 소비자의 90%가 열악한 유저 경험을 겪은 뒤에 경쟁자의 물건을 구매하게 된다. (Web FX)

아래 5가지의 눈을 뜨게 만드는 웹 개발 관련 통계를 한 번 알아둘 가치가 있다.

• 47% 의 사용자는 일반적으로 웹사이트의 로딩 시간을 최대 2초 정도로 기대한다. (Curatti)
• 소매업자들은 웹 사이트의 로딩 속도가 느리기 때문에 매년 26억 달러를 잃는다.(Inside Design)
• 2021년 전체 소매 전자상거래의 31%가 모바일 기기를 통해 발생했다.(Statista)
• 소비자의 75%는 웹사이트 디자인에 따라 회사의 신용을 판단한다고 인정한다.(Kinesis)
• 노섬브리아 대학의 과학자 그룹은 이 연구에서 46%의 소비자들이 시각적 매력과 미학을 기반으로 웹사이트의 신뢰성에 대한 결정을 내렸다는 것을 발견했다.

이 모든 것들은 왜 뛰어난 디자인, UX/UI, 반응형이 중요한지 이해할 수 있도록 해줄 것이다. 그들은 분명 매우 중요하지만, 이는 시작일 뿐이다. 따라서 프론트엔드, 백엔드, 기술, 프로그램 언어에 대한 최신의 웹 개발 트렌드에 대해서 얘기해보겠다.

프론트엔드 개발 트렌드

프론트엔드 개발자가 HTML, CSS, 자바스크립트만 알면 되는 세상은 이미 한참 전에 끝났다. 따라서 빠르게 바뀌는 환경과 발 맞추기 위해서 최신의 프론트엔드 기술을 살펴봐야 한다.

지금 이 부분에서는 2022년과 그 이후의 산업을 다룰 프론트엔드 개발 트렌드에 대해서 설명하겠다.

Javascript

자바스크립트는 여전히 웹 개발에서 가장 넓게 사용되는 프로그래밍언어이다. Statista 에 따르면, 2021년 가장 자주 쓰인 프로그래밍언어로써 전 세계 65%의 응답자가 업무에서 사용한 경험이 있다고 답했다. 왜 그럴까?

• 객체 기반의 역동적인 언어로서 클라이언트와 서버 모두에서 사용되고 있다.
• 사파리, 크롬, 파이어폭스, IE 와 같은 수많은 브라우저가 지원하고 있다
• 자바스크립트는 웹페이지 구조와 스타일을 쌍방향에서 다룰 수 있는 우수성을 가지고 있다.
• 수 많은 라이브러리와 프레임워크 사용이 가능하다.

한 동안은 자바스크립트는 계속 유행할 것으로 보인다. 그럼에도 몇 가지 변형이 이루어질 것인데, 다음 섹션에서 살펴보겠다.

Jamstack

2015년에 등장한 Jamstack 의 정의를 살펴보면, JAM 은 각각 Javascript, API, Markup 의 줄임말인데, 요즘은 "Jamstack" 이 널리 사용되고 있다. Netlify 의 공동 창업자이자 CEO 인 Mathias Biilmann은 이 용어를 다음과 같이 정의한다.

클라이언트-사이드의 자바스크립트, 재사용가능한 API들, 미리 만들어진 마크업에 기반한 웹 개발의 인프라를 말하는 것이다.

이 세가지의 시너지는 개발자로 하여금 더 단순하고, 빠르고, 저렴한 업무 환경을 제공해준다. 더 나아가 Jamstack 기반의 아키텍처는 웹사이트를 더욱 안전하게 만들어주는데, 왜냐하면 데이터베이스나 서버의 보안과 같은 것에 대해 고민할 필요가 없기 때문이다. 확장성도 가지고 있다. 따라서 프로젝트가 입소문을 얻기 시작하면, CDN 이 바뀔(적응할)것이다.

모바일 우선 웹 개발

브라우징의 대부분이 모바일에서 이루어지기 때문에 기업은 이와 같은 접근의 중요성을 무시할 수 없다. 더 나아가 모바일에서 볼 수 있는 웹 사이트 개발수준이 아닌, 반응성이 뛰어난, 즉 어느 크기의 디스플레이에서든 동일하게 잘 동작하도록 만드는 것이 필요하다. 반응형 웹 디자인의 중요성은 웹 개발 트렌드의 최상단을 차지하도록 했으며 아래의 룰을 따라하면 달성할 수 있는 것으로 여겨진다.

• 가로 보다는 세로 기준으로 만들어지며 터치스크린에서 작동해야 한다.
• meta viewport 를 사용하여 브라우저가 페이지의 크기를 조절할 수 있도록 해야한다.
• 다른 레이아웃 방법을 사용해야 한다. 예를 들어 Grid, Multi-Column, Flexbox 같은 것들을 사용하여 viewport 에 맞춰야 한다.
• CSS 쿼리를 사용하여 디바이스가 할 수 있는 것에 따라서 요소의 크기를 바꿔야 한다.

컨텐츠 관리를 위한 헤드리스 아키텍처

이와 같은 컨텐츠 구성은 넥플릭스가 도입하기 시작한 이후 유명해지기 시작했따. 이것이 어떤 것인지 이해하기 위해서, 기존에 사용되던 CMS 에 대해서 살펴보자.

기존의 컨텐츠 관리의 접근 방식은 모든 컨텐츠들 - 사진, 비디오, 텍스트, 코드 - 모두를 하나의 박스안에 담는 것이다. 즉, 프론트엔드와 백엔드가 같이 묶여있도록 하여 컨텐츠 업데이트가 어려웠다는 것이다.

사람들은 수 많은 기기를 통해 동시에 정보를 소비한다. 바구니를 사려는 소비자를 떠올려보자. 그 또는 그녀는 폰에서 바구니를 검색해보고, PC 에서 리뷰를 비교해보며, 최종적으로 타블렛에서 구매를 한다. 사용된 모든 디바이스에서 컨텐츠는 보기 좋게 보여야 하며, 이 부분에서 컨텐츠 관리를 위한 헤드리스 아키텍처가 필요해진다. 이 방법은 기존의 CMS 를 나쁘게 만드는 것이 아니다. 단순히 컨텐츠 소모 방식이 진화했으며 이에 발맞춰 웹 개발도 바뀌는 것일 뿐이다.

헤드리스 CMS 를 사용하는 것은 컨텐츠를 빠르고 쉽게 전달할 수 있도록하여 컨텐츠 생성자가 코드를 다루지 않도록 하기 위해서이다. 헤드리스 CMS 에서는 프론트와 백이 같이 묶여있지 않으며, 각자 다른 시스템을 대표하게 된다. 하나는 컨텐츠 생성과 저장을 맡고 다른 하나는 컨텐츠를 보여준다. 한 번 컨텐츠가 생성되면, 헤드리스 아키텍처는 API 를 사용하여 전달하고 어느 기기에서든 보기 좋도록 만든다.
(읽을수록 기존의 RESTFful API 와 뭐가다른지 모르겠다. 추가적으로 알아봐야 될듯)

아래는 기존의 CMS 와 헤드리스 CMS 를 비교한 것이다.

기준	기존 CMS	헤드리스 CMS
호스팅	인하우스	클라우드
지원하는 디바이스 개수	제한됨	무제한
업데이트	스케줄링됨	연속적으로 가능함
워크플로우	폭포수 모델	Agile

이어지는 백엔드의 트렌드는 다음 게시물에서 다루겠습니다.

단어

conspiracy theory: 음모론
immerse: 담그다
iconic: 상징적인
out of business: 폐업하다, 망하다
presence: 존재
unresponsive: 무반응의
credo: 라틴어로 신용하다의 뜻
viral: 입소문이 나다
consumption: 소모