웹 개발 트렌드 5가지
- July 13, 2023
2023년 웹 개발 트렌드 5가지
번역된 출처 기반으로 정리해본 웹 개발 트렌드 5가지입니다.
1. 메타 프레임워크의 등장
단일 페이지 애플리케이션(SPA) 과 각각의 프레임워크 (예: React.js, Vue.js, Svelte.js) 는 선풍적인 인기를 끌며 수년 동안 사용되어 왔습니다.
그러나 이러한 솔루션 위에 메타 프레임워크가 등장하면서 애플리케이션이 클라이언트 측(CSR) 에서
서버 측 렌더링(SSR) 으로 전환하는 추세를 볼 수 있습니다.
요즘은 작업할 때 자바스크립트 프레임워크로 SSR을 많이 사용합니다.
(1) Next.js : React 기반으로 제공되는 오픈소스 자바스크립트 메타 프레임워크
Next.js의 기능
-
서버 사이드 렌더링 (SSR, Server-Side Rendering)
서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법입니다. -
정적 사이트 생성 (SSG, Static Site Generation)
빌드 시 리액트 앱을 HTML로 미리 렌더링 합니다. -
증분 정적 재생성 (ISR, Incremental Static Regeneration)
트래픽이 들어올 때 백그라운드에서 다시 렌더링해서 기존 페이지를 업데이트 합니다.
(2) Remix : 앳지 우선 풀 스택 메타 프레임워크
- Remix는 React.js를 메타 프레임워크로 전환하는 데 있어 다른 접근 방식을 취합니다.
(예: 웹 표준을 일급 객체로 사용) - Next.js와 경쟁 관계에 있지만 중첩 라우팅 같은 공통된 기능도 있습니다.
(3) 이 외 프레임워크들
- Sveltekit(Svelte.js로 만들어짐) : 최근 1.0 릴리스에서 Vercel의 지원을 받습니다.
- SolidStart(Solid.js 로 만들어짐) : React.js에 비해 향상된 DX를 제공합니다.
2. 세밀한 렌더링 패턴
렌더링이란, 데이터와 코드를 유저에게 보여주기 위한 HTML로 변환하는 과정입니다.
올바른 렌더링 패턴이란, 우리의 어플리케이션의 특성에 맞고, UX 와 DX 를 모두 높여주는 패턴을 말합니다.
(1) 지난 10년 (2010-2020)
- 클라이언트 측 렌더링(CSR) 을 사용하는 단일 페이지 애플리케이션(SPA) 가 주를 이루었습니다.
(2) 현재
- 서버 측 렌더링(SSR) 에 대한 흥미가 높아지면서 다시 다중 페이지 애플리케이션(MPA) 이 주목받기 시작하고 있습니다.
- 더 나아가 증분 정적 재생성(ISR) 과 Streaming SSR 같은 보다 세밀한 렌더링 기법이 유행 중입니다.
(3) 다른점
- 과거에는 Java나, Ruby on Rails 기반 의 SSR 이었다면, 현재는 JavaScript 중심의 SSR이라는 것입니다.
3. 엣지에서 서버리스
서버리스란, 개발자가 서버를 관리할 필요 없이 애플리케이션을 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델입니다.
SSR 및 SSG와 같은 렌더링 기술은 브라우저에서 원활한 사용자 경험을 제공한다는 목표 하에 성능에 의해 구동되기 때문에 엣지에서의 서버리스 트렌드와 밀접한 관련이 있습니다. 사용자에게 더 빠른 웹사이트와 웹 애플리케이션을 제공하려는 욕구가 엣지에서의 서버리스에 대한 관심을 불러일으켰습니다.
(1) 서버리스의 장점
- 서버 관리가 필요 없습니다.
- 필요한 만큼만 서버를 사용하기에 비용을 절감할 수 있습니다.
- 서버리스 아키텍처는 기본적으로 확장이 용이합니다.
- 빠른 배포 및 업데이트가 가능합니다.
- 코드가 엔드 유저에게 가까운 곳에서 실행될 수 있어 지연 시간이 줄어듭니다.
(2) 서버리스의 단점
- 테스팅과 디버깅이 어려워질 수 있습니다.
- 보안에 대한 새로운 고민이 필요합니다.
- 오래 실행되는 프로세스에는 적합하지 않습니다.
- 성능 관련 문제가 발생할 수 있습니다.
- 특정 CSP(클라우드 공급 업체)에 종속될 수 있습니다.
(3) 그래도..
서버리스의 이런 단점들로 인해 많이 사용하지 않을 것으로 생각되지만, 이런 서버리스 기능의 단점을 보완할 수 있는 툴들이 나오고 있는 점을 비추어 볼 때 앞으로 더 유용한 방식으로 적용되지 않을까 하는 생각이 듭니다.
많은 클라우드 제공업체가 이 분야에서 경쟁하고 있으며, 모두가 최종 사용자를 위한 최상의 TTI(Time to Interactive) 경험을 위해 최적화하고 있습니다. 엣지 기능은 최종 사용자와의 연결이 짧기 때문에 SSG/SSR 콘텐츠를 더 빠르게 제공할 뿐만 아니라 결과를 사용자에게 더 가깝게 캐시 할 수도 있습니다.
4. 데이터베이스 르네상스
서버리스(엣지)의 등장으로 데이터베이스도 르네상스를 경험하고 있습니다. 다음은 데이터베이스의 주요 트렌드 중 일부입니다:
(1) 클라우드 네이티브 데이터베이스
기업들은 클라우드 기반의 데이터베이스 서비스를 채택하는 경향이 있습니다. 클라우드 네이티브 데이터베이스는 클라우드 환경에서 원활하게 작동하도록 설계되어 스케일링, 가용성, 유연성 등을 강조합니다. AWS의 Amazon Aurora, Google Cloud의 Spanner, Microsoft Azure의 Cosmos DB 등이 대표적인 클라우드 네이티브 데이터베이스 솔루션입니다.
(2) 분산형 데이터베이스
대규모 데이터 처리를 위해 분산형 데이터베이스 시스템이 중요성을 갖고 있습니다. 이러한 시스템은 데이터를 여러 노드에 분산하여 처리하고 병렬 처리를 통해 성능을 향상시킵니다. Apache Cassandra, Apache Hadoop, Apache HBase 등은 분산형 데이터베이스 시스템의 예시입니다.
(3) 그래프 데이터베이스
그래프 데이터베이스는 데이터 간의 관계와 네트워크를 효율적으로 모델링하고 쿼리하기 위해 사용됩니다. 이는 소셜 네트워크, 추천 시스템, 지식 그래프 등에서 유용합니다. Neo4j, Amazon Neptune, JanusGraph 등이 인기 있는 그래프 데이터베이스입니다.
(4) 탄력적 스키마와 스키마리스 데이터베이스
스키마리스 데이터베이스는 데이터의 유연성을 제공하며, 스키마 변경이나 유형 변환에 유연하게 대응할 수 있습니다. NoSQL 데이터베이스인 MongoDB, CouchDB, Firebase 등이 스키마리스 데이터베이스의 대표적인 예시입니다.
(5) 인메모리 데이터베이스
인메모리 데이터베이스는 데이터를 주기억장치(RAM)에 저장하여 데이터 접근 속도를 향상시킵니다. 이는 실시간 분석, 실시간 처리, 캐싱 등에 유용합니다. Redis, Memcached, Apache Ignite 등이 인메모리 데이터베이스의 예시입니다.
데이터베이스 분야는 지속적으로 진화하고 변화하며, 새로운 기술과 솔루션이 등장하고 있습니다. 이러한 트렌드들은 데이터베이스 시스템이 기업들의 요구에 대응하고 더욱 효율적이고 유연한 데이터 관리를 지원하는 데 기여하고 있습니다.
5. AI 주도 개발의 현실화
(1) GitHub Copilot : GitHub가 2021년 출시한 자동 코드 완성 인공지능
개발자는 선호하는 IDE에서 AI 프로그래머와 짝을 이룰 수 있게 되었습니다. 코드를 작성하거나 코딩하려는 내용을 설명하는 코멘트를 작성하는 것만큼이나 간단하며, 구현 세부 사항을 가장 잘 이해할 수 있도록 자동으로 완성해줍니다.
GitHub Copilot은 개발자들에게 생산성을 향상시키고 반복적이고 번거로운 작업을 줄여주는 강력한 도구입니다. 그러나 완벽한 코드를 작성하지는 않으며, 사용자는 항상 제안된 코드를 검토하고 필요에 맞게 수정해야 합니다.
주요 특징
1. AI 기반 코드 제안
고급 기계 학습 알고리즘을 사용하여 코드 작성을 도와줍니다. 즉, 코드 작성 중에 자동 완성, 코드 조각, 함수 시그니처, 클래스 구조 등을 제안합니다.
2. 다양한 언어 지원
다양한 프로그래밍 언어를 지원합니다. C++, Python, JavaScript, TypeScript, Go, Ruby, Java, 등의 언어에서 코드 도움을 제공할 수 있습니다.
3. 통합 개발 환경 (IDE) 지원
인기있는 통합 개발 환경 (IDE)과의 통합을 지원합니다. Visual Studio Code, Visual Studio, JetBrains IntelliJ IDEA 등에서 사용할 수 있습니다.
4. 학습과 사용자 피드백
GitHub의 공개 코드 저장소에서 수집한 대규모 코드베이스를 학습하고, 사용자들의 피드백을 통해 지속적으로 개선됩니다. 사용자들은 Copilot에서 제안된 코드를 사용하거나 수정하여 피드백을 제공할 수 있습니다.
5. 개인화된 추천
개발자의 작성 스타일과 프로젝트에 맞는 코드를 추천하기 위해 개인적인 문맥을 이해합니다. 이를 통해 개발자들은 보다 효율적이고 일관된 코드를 작성할 수 있습니다.
(2) ChatGPT : OpenAI에서 개발한 대화형 인공지능 서비스
GPT는 “Generative Pre-trained Transformer”의 약자로, 트랜스포머(Transformer) 아키텍처를 기반으로 한 사전 훈련된 생성 모델을 의미합니다.
ChatGPT는 큰 양의 텍스트 데이터를 학습하여 다양한 자연어 이해와 생성 작업을 수행할 수 있습니다. ChatGPT는 대화형 상황에서 사람과 대화하는 것처럼 자연스러운 대답을 생성하고, 질문에 응답하며, 지식을 공유하는 데 사용될 수 있습니다.
물론, ChatGPT는 인공지능 모델이기 때문에 가끔 오류나 부적절한 응답을 할 수 있습니다. 사용자는 항상 모델의 출력을 검토하고 필요에 따라 수정하거나 검증해야 합니다.
주요 특징
1. 대화형 인터페이스
대화형 인터페이스를 통해 자연어로 이루어진 대화를 처리할 수 있습니다. 사용자의 질문이나 입력에 대해 응답을 생성하며, 대화의 흐름을 유지할 수 있습니다.
2. 자연어 이해와 생성
사전 훈련된 모델로써, 다양한 자연어 이해와 생성 작업을 수행할 수 있습니다. 문장을 이해하고 의미를 해석하여 적절한 응답을 생성할 수 있으며, 자연스러운 대화를 구성할 수 있습니다.
3. 다양한 주제와 도메인 지식
다양한 주제와 도메인에 대한 지식을 포괄하는 대규모 데이터셋을 통해 학습됩니다. 이를 통해 다양한 주제에 대한 질문에 응답하고, 지식을 공유하며, 정보를 제공할 수 있습니다.
4. 유연한 활용 가능성
다양한 용도로 활용될 수 있습니다. 개인적인 도움, 정보 검색, 일상적인 질문에 대한 답변, 창의적인 문제 해결, 교육 및 학습 도구, 언어 모델 등 다양한 분야에서 사용될 수 있습니다.
5. 사용자 경험 개선을 위한 피드백
OpenAI는 사용자들의 피드백을 수집하여 모델의 개선과 보완을 진행하고 있습니다. 사용자들의 피드백을 통해 모델의 성능과 신뢰성을 높이고, 윤리와 안전성 측면에서 지속적인 발전을 이루고 있습니다.
- 원문: https://www.robinwieruch.de/web-development-trends/
- 출처: https://ykss.netlify.app/translation/10_web_development_trends_in_2023/
참고글
