M

MLOG

한국어

글로벌 사용자를 위해 스트리밍 서버 측 렌더링 기능을 통해 고성능 웹 애플리케이션을 구축하도록 설계된 선언적 UI 프레임워크인 Marko를 살펴보세요.

Marko: 스트리밍 서버 측 렌더링을 사용한 선언적 UI

오늘날 빠르게 변화하는 디지털 환경에서 웹사이트 성능은 매우 중요합니다. 로딩 속도가 느리거나 응답이 없는 웹사이트는 사용자의 불만을 야기하고, 이탈률을 높이며, 결국 수익 손실로 이어질 수 있습니다. 선언적 UI 프레임워크인 Marko는 고성능 웹 애플리케이션 구축에 대한 고유한 접근 방식을 제공하여 이러한 문제를 해결합니다. 이 기사에서는 Marko의 핵심 기능, 특히 스트리밍 서버 측 렌더링(SSR) 기능에 대해 자세히 알아보고, 글로벌 사용자를 위해 웹사이트 및 웹 애플리케이션을 구축하는 개발자에게 Marko가 매력적인 선택인 이유를 설명합니다.

Marko란 무엇인가?

Marko는 eBay에서 제작하여 현재 Marko 팀에서 관리하는 오픈 소스 UI 프레임워크입니다. 성능, 단순성 및 확장성에 중점을 둔다는 점에서 다른 프레임워크와 차별화됩니다. 클라이언트 측 렌더링을 우선시하는 일부 프레임워크와 달리 Marko는 특히 스트리밍 SSR과 같은 서버 측 렌더링을 강조합니다. 즉, 서버는 애플리케이션의 HTML을 사전 렌더링하고 사용할 수 있게 되면 청크(스트림)로 브라우저에 전송하여 FCP(First Contentful Paint)를 빠르게 하고 사용자 경험을 향상시킵니다.

Marko의 주요 기능 및 이점

스트리밍 서버 측 렌더링에 대한 자세한 내용

스트리밍 SSR의 이점을 자세히 살펴보겠습니다.

향상된 FCP(First Contentful Paint)

FCP는 웹사이트 성능을 측정하는 핵심 지표입니다. 화면에 첫 번째 콘텐츠(텍스트, 이미지 등)가 나타나는 데 걸리는 시간을 나타냅니다. 스트리밍 SSR은 브라우저가 클라이언트 측 렌더링보다 훨씬 먼저 HTML을 수신하여 렌더링하기 시작하므로 FCP를 크게 줄입니다. 전체 JavaScript 번들을 다운로드하여 실행할 때까지 기다리는 대신 브라우저는 페이지의 초기 콘텐츠 표시를 즉시 시작할 수 있습니다. 제품 목록을 표시하는 전자 상거래 웹사이트를 상상해 보세요. 스트리밍 SSR을 사용하면 사용자는 대화형 요소가 완전히 로드되기 전에도 제품 이미지와 설명을 거의 즉시 볼 수 있습니다. 이는 훨씬 더 매력적이고 반응적인 사용자 경험을 만듭니다.

더 나은 사용자 경험

더 빠른 FCP는 더 나은 사용자 경험으로 이어집니다. 사용자는 콘텐츠를 빨리 볼 수 있으면 웹사이트를 이탈할 가능성이 줄어듭니다. 스트리밍 SSR은 특히 느린 네트워크나 장치에서 더욱 원활하고 반응적인 경험을 제공합니다. 이는 인터넷 연결이 불안정할 수 있는 개발도상국의 모바일 사용자에게 특히 중요합니다. 예를 들어, 스트리밍 SSR을 사용하는 뉴스 웹사이트는 대역폭이 제한된 사용자에게도 속보 헤드라인과 요약을 즉시 제공할 수 있습니다.

SEO 이점

검색 엔진 봇은 HTML 콘텐츠에 의존하여 웹사이트의 구조와 콘텐츠를 이해합니다. 서버 측 렌더링은 쉽게 사용할 수 있는 HTML을 제공하여 검색 엔진이 사이트를 더 쉽게 크롤링하고 색인화할 수 있도록 합니다. 이를 통해 검색 엔진 순위가 향상되고 유기적인 트래픽이 증가합니다. Google은 JavaScript를 렌더링하는 데 더 능숙해졌지만 SSR은 복잡한 JavaScript 중심 애플리케이션이 있는 웹사이트에 특히 상당한 이점을 제공합니다. SSR을 사용하는 여행사 웹사이트는 목적지 페이지가 적절하게 색인화되어 관련 검색 결과에 표시되도록 합니다.

향상된 접근성

SSR은 화면 판독기 및 기타 보조 기술에서 쉽게 구문 분석할 수 있는 HTML 콘텐츠를 제공하여 더 나은 접근성에 기여합니다. 이를 통해 웹사이트를 장애가 있는 사람이 사용할 수 있습니다. 서버에서 초기 콘텐츠를 렌더링하면 JavaScript가 완전히 로드되기 전에도 접근성을 위한 견고한 기반을 제공합니다. 예를 들어, SSR을 사용하는 정부 웹사이트는 모든 시민이 자신의 능력에 관계없이 중요한 정보에 액세스할 수 있도록 합니다.

Marko 대 다른 프레임워크

Marko는 React, Vue, Angular와 같은 다른 인기 있는 UI 프레임워크와 어떻게 비교될까요?

Marko 대 React

React는 사용자 인터페이스를 구축하는 데 널리 사용되는 라이브러리입니다. React는 서버 측 렌더링(Next.js 또는 유사한 프레임워크 사용)과 함께 사용할 수 있지만 기본적으로 클라이언트 측 렌더링에 의존합니다. Marko의 스트리밍 SSR은 React의 기존 SSR 방식보다 성능상의 이점을 제공합니다. React의 생태계는 방대하여 많은 라이브러리와 도구를 제공하지만 이는 복잡성을 초래할 수도 있습니다. Marko는 단순성과 성능에 중점을 두어 더욱 간소화된 개발 경험을 제공합니다. 복잡한 대시보드 애플리케이션을 생각해 보세요. React는 컴포넌트 기반 방식을 제공하지만 Marko의 스트리밍 SSR은 특히 대규모 데이터 세트를 표시할 때 초기 페이지 로드에 대한 성능 향상을 제공할 수 있습니다.

Marko 대 Vue

Vue는 사용 편의성과 점진적 접근 방식으로 유명한 또 다른 인기 프레임워크입니다. Vue는 또한 서버 측 렌더링(Nuxt.js 사용)을 지원합니다. Marko와 Vue는 단순성 및 컴포넌트 기반 아키텍처 측면에서 몇 가지 유사점을 공유합니다. 그러나 Marko의 스트리밍 SSR은 특히 트래픽이 많거나 UI가 복잡한 웹사이트에 대해 뚜렷한 성능상의 이점을 제공합니다. Vue는 최적의 성능을 얻기 위해 서버 측 렌더링에 대해 더 많은 수동 최적화가 필요한 경우가 많습니다. 예를 들어, 소셜 미디어 웹사이트는 Marko의 스트리밍 SSR을 사용하여 사용자 피드와 업데이트를 빠르게 표시할 수 있습니다.

Marko 대 Angular

Angular는 복잡한 웹 애플리케이션 구축을 위한 포괄적인 솔루션을 제공하는 완전한 프레임워크입니다. Angular는 Angular Universal을 통해 서버 측 렌더링을 지원합니다. 그러나 Angular는 Marko 및 Vue에 비해 배우고 사용하는 것이 더 복잡할 수 있습니다. Marko의 단순성과 성능 중심성은 성능이 최우선 순위인 프로젝트에 매력적인 대안이 됩니다. 대규모 엔터프라이즈 애플리케이션은 강력한 기능과 확장성을 위해 Angular를 선택할 수 있지만, 더 작은 스타트업은 Marko의 속도와 개발 편의성을 선택할 수 있습니다.

요약: React, Vue, Angular 모두 서버 측 렌더링을 지원하지만 Marko의 내장 스트리밍 SSR은 상당한 성능상의 이점을 제공합니다. Marko는 성능과 단순성을 우선시하여 이러한 요소가 중요한 프로젝트에 적합한 선택입니다.

Marko 시작하기

Marko를 시작하는 것은 비교적 간단합니다. 기본 개요는 다음과 같습니다.

  1. Node.js 설치: 시스템에 Node.js가 설치되어 있는지 확인합니다.
  2. Marko CLI 설치: `npm install -g marko-cli`를 실행하여 Marko 명령줄 인터페이스를 전역적으로 설치합니다.
  3. 새 Marko 프로젝트 만들기: `marko create my-project` 명령을 사용하여 새 Marko 프로젝트를 만듭니다.
  4. 프로젝트 구조 탐색: 프로젝트에는 `index.marko`(기본 컴포넌트), `server.js`(서버 측 진입점) 및 `marko.json`(프로젝트 구성)과 같은 파일이 포함됩니다.
  5. 개발 서버 실행: `npm start` 명령을 사용하여 개발 서버를 시작합니다.
  6. 컴포넌트 구축 시작: 컴포넌트에 대한 새 `.marko` 파일을 만들고 기본 컴포넌트로 가져옵니다.

Marko 컴포넌트 예시 (index.marko):


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marko 예시</title>
  <!MARKUPROCESSED>
</head>
<body>
  <h1>안녕하세요, 세상!</h1>
  <p>이것은 간단한 Marko 컴포넌트입니다.</p>
</body>
</html>

서버 측 렌더링 예시 (server.js):


require('marko/node-require').install();
require('marko/compiler').configure({
  resolveCssUrls: true,
  cache: true
});

const express = require('express');
const marko = require('marko');
const template = marko.load(require.resolve('./index.marko'));

const app = express();

app.get('/', (req, res) => {
  template.render({}, res);
});

app.listen(3000, () => {
  console.log('서버가 포트 3000에서 시작되었습니다.');
});

이들은 시작하기 위한 기본적인 예시일 뿐입니다. Marko는 복잡한 웹 애플리케이션을 구축하기 위한 다양한 기능과 옵션을 제공합니다. 자세한 내용은 공식 Marko 문서를 참조하세요.

Marko의 실제 사용 예시

eBay가 원래 Marko를 개발했지만, 이제 다양한 산업의 여러 회사에서 사용하고 있습니다.

이러한 예시는 다양한 웹 애플리케이션에 대한 Marko의 다용도성과 적합성을 보여줍니다.

Marko 사용에 대한 모범 사례

Marko를 최대한 활용하려면 다음 모범 사례를 고려하십시오.

결론: Marko – 최신 웹 개발을 위한 강력한 선택

Marko는 고성능 웹 애플리케이션 구축을 위한 매력적인 솔루션을 제공하는 강력하고 다재다능한 UI 프레임워크입니다. 선언적 구문, 스트리밍 SSR 기능 및 단순성에 대한 집중은 웹사이트 성능을 개선하고, 사용자 경험을 향상시키고, SEO를 높이려는 개발자에게 탁월한 선택입니다. Marko를 채택함으로써 개발자는 전 세계의 사용자에게 빠르고, 반응적이며, 접근 가능한 웹사이트와 웹 애플리케이션을 만들 수 있습니다. 작은 개인 웹사이트를 구축하든 대규모 엔터프라이즈 애플리케이션을 구축하든, Marko는 UI 프레임워크로 고려할 가치가 있습니다. 콘텐츠를 빠르고 효율적으로 제공하는 데 중점을 둔다는 것은 오늘날의 글로벌화되고 성능 중심적인 디지털 환경에서 특히 중요합니다.

추가 자료: