개츠비 대 11ty: 어느 것이 더 낫나요?

Gatsby 대 11ty 논쟁은 정적 사이트로 계속될 것입니다. 정적 사이트 생성기 Drupal과 WordPress와 같은 보다 전통적인 플랫폼에 비해 인기가 높아졌습니다.

Gatsby는 많은 작업을 쉽게 수행할 수 있는 강력한 시스템인 반면 11ty는 모든 것을 간단하고 효율적으로 유지합니다. 두 시스템 모두 JavaScript로 구동됩니다. 그러나 Gatsby는 JavaScript를 기반으로 하지만 반응, 11ty는 Node.js를 기반으로 구축되었습니다.

두 플랫폼을 비교해보면서 주요 기능을 살펴보고, 다음 프로젝트에 어느 플랫폼이 가장 적합한지 결정하는 데 도움을 얻으세요.

개츠비 vs 11ty 비교

	개츠비	11ty
개발 플랫폼:	React.js	Node.js를
렌더링된 페이지:	HTML 및 JS	HTML
로딩 시간:	빠른	빠른
사용자 친근성:	인기	평균
이미지 처리:	인기	평균
템플릿 유연성:	평균	인기
커뮤니티 및 플러그인:	확대	작게
API 통합:	베스트셀러	높음
추가 서비스:	개츠비 클라우드	없음
학습 곡선:	더 높은	낮 춥니 다

개발 플랫폼

두 프레임워크 모두 JavaScript에서 실행되지만, 11ty는 Node.js에서 직접 개발된 반면, Gatsby는 React에서 유래되었습니다.

Node.js는 Chrome V8 렌더링 엔진을 기반으로 하는 런타임 환경입니다. 설치된 모든 플랫폼에서 JavaScript 코드를 실행할 수 있으므로 JavaScript가 더 이상 웹 브라우저에만 국한되지 않습니다.

React.js는 매우 직관적이고 상호 작용적인 앱과 웹사이트를 만드는 데 도움이 되는 UI 개발 프레임워크입니다. 이 프레임워크의 기능은 Gatsby 렌더링 사이트에서 매우 분명하게 나타나며 큰 장점입니다.

따라서 11ty 사이트를 생성하려면 Node.js만 필요한 반면, Gatsby 웹사이트를 렌더링하려면 Node.js와 React.js가 모두 필요합니다.

렌더링된 페이지

여기에 두 시스템 간의 주요 차이점이 있습니다. Gatsby는 기본적으로 HTML 및 JS 사이트를 렌더링하는 반면 11ty는 기본적으로 일반 HTML 사이트를 렌더링합니다.

물론, 원하는 대로 11ty 템플릿에 JavaScript를 추가할 수는 있지만, 이 패키지는 단순성을 위해 설계되었습니다. 예를 들어, 기본 11ty 설치는 마크다운 파일에 작성한 내용만 출력하고 다른 것은 출력하지 않습니다.

반면 Gatsby는 React.js 루트를 활용하여 단순한 HTML 출력 이상을 생성합니다. 예를 들어 최적화되고 점진적으로 로딩되는 이미지와 유동적인 페이지 전환을 위한 링크 사전 페칭 및 전반적으로 풍부한 사용자 경험을 제공합니다.

로딩 시간

React.js는 클라이언트 측 JavaScript입니다. 따라서 이를 포함하는 모든 웹사이트는 사이트의 콘텐츠와 포함된 다른 JS 기능을 표시하기 전에 먼저 프레임워크를 로드하고 방문자의 브라우저에서 실행해야 합니다.

간단히 말해서, Eleventy로 생성된 표준 정적 HTML 사이트는 React.js 기능을 갖춘 Gatsby 사이트보다 항상 더 빨리 로드됩니다.

사용자 친근성

프런트엔드나 사이트 방문자가 보는 부분 측면에서 볼 때, Gatsby는 통합된 React.js 기능 덕분에 11ty보다 유리합니다.

11ty보다 사용자 경험에 더 중점을 둡니다. 여기에는 사전 페치된 페이지와 이미지 관리, 사이트 관리자를 위한 더 쉬운 사이트 마이그레이션이 포함됩니다.

Gatsby를 사용하면 WordPress 사이트를 정적 사이트로 마이그레이션하는 데 필요한 것은 gatsby-source-wordpress 플러그인뿐이며 다른 모든 것은 자동으로 처리됩니다. Gatsby는 선택할 수 있는 다른 플러그인이 2,000개 이상 있지만 11ty는 근접도 하지 못합니다.

이미지 처리

Gatsby는 이미지 처리에 있어서 11ty보다 많은 장점을 제공합니다. 여기에는 외부 데이터의 초기 소싱과 정적 페이지의 렌더링, 그리고 웹사이트 방문자에게 제공되는 방식이 포함됩니다.

이에 비해 11ty는 많은 이미지 처리 기능을 제공하지 않습니다. 빌드 타임 이미지 변환 및 출력 크기 처리를 돕는 간단한 이미지 플러그인이 있습니다. 그래도 Gatsby가 제공하는 것과 비교하면 초라합니다.

템플릿 유연성

여기가 11ty가 빛나는 곳입니다. 사용자 경험에 초점을 맞춘 Gatsby와 달리 11ty는 단순함과 자유에 초점을 맞춥니다.

11개의 다른 템플릿 언어를 사용하여 10ty 템플릿을 만들 수 있습니다. 게다가, 이 다른 언어 중 하나만 사용하거나 두 개, 세 개 또는 모든 언어를 하나의 프로젝트에 결합할 수 있습니다. 문제 없습니다.

Gatsby는 Markdown과 JavaScript 템플릿 파일만 허용하는 반면, 11ty는 HTML, Markdown, Nunjucks, Liquid, JavaScript, Haml, EJS, Mustache, Handlebars를 허용합니다.

Eleventy는 또한 원하는 사이트 구조를 만들기 위해 외부 데이터와 전면 자료를 잘 결합합니다. 게다가, Gatsby를 사용하면 템플릿을 만드는 것이 비교적 힘든 작업인 반면, 모든 것이 너무 쉬워 보입니다.

커뮤니티 및 플러그인

커뮤니티와 플러그인에 관해서라면, Gatsby 커뮤니티는 11ty 커뮤니티보다 훨씬 더 크고 수완이 풍부합니다.

11ty 프로젝트를 확장할 수 있는 템플릿과 플러그인은 몇 개뿐이지만, Gatsby는 2,000개가 넘는 플러그인을 자랑합니다. 검색, 데이터 소싱, 전자 상거래, 분석 및 콘텐츠 관리에 이르기까지 가장 광범위한 작업을 수행합니다.

Gatsby는 상업적인 지원도 받고 있으므로 앞으로 더 많은 활동과 개선을 기대할 수 있습니다.

API 통합

더 크고 활기찬 커뮤니티를 감안할 때, Gatsby는 현재 11ty보다 웹에서 더 많은 API와 서비스에 연결됩니다. 더 성숙한 프로젝트이며, 이는 광범위한 통합에서 매우 분명하게 드러납니다.

Gatsby의 API 플러그인 목록에는 전자상거래를 위한 Shopify, Snipcart, Bigcommerce, 검색을 위한 Algolia, 호스팅을 위한 Netlify, Amazon S3, 그리고 콘텐츠 소싱을 위한 Drupal, Airtable, WordPress가 포함됩니다.

물론, 훨씬 더 많은 서비스가 있으며, 가장 인기 있는 온라인 서비스도 지원됩니다. 필요한 것을 검색하기만 하면 됩니다.

추가 서비스

정적 페이지를 직접 쉽게 호스팅할 수도 있고, 라이브 웹 서버를 관리하는 번거로움을 피하기 위해 저렴한 서비스를 많이 사용할 수도 있습니다. 가장 인기 있는 서비스로는 Netlify, Azure, AWS Amplify 등이 있습니다.

게다가 Gatsby는 Gatsby 사이트의 원활한 빌드, 협업 및 배포를 위한 Gatsby Cloud도 제공합니다. 그리고 성능 보고서, 증분 빌드, 실시간 CMS 및 배포 미리보기가 함께 제공됩니다.

이는 11ty에 없는 또 다른 특징입니다.

두 프레임워크 모두 다음과 함께 작동합니다. GitHub의, 모든 JAMstack 프로젝트가 그래야 하듯이요. 그러니까 Strapi 같은 헤드리스 CMS를 사용해서 Git에서 프로젝트를 관리하고 렌더링 후 Netlify 같은 서비스에 배포할 수 있어요.

학습 곡선

Gatsby는 11ty보다 학습 곡선이 더 높습니다. 배워야 할 규칙이 너무 많고 분야도 너무 많기 때문입니다. 하지만 Gatsby가 여러분에게 완벽한 도구라면 추가적인 노력이 보람 있을 것입니다.

결론

Gatsby와 11ty 비교를 마치면 두 패키지가 얼마나 비슷하면서도 다른지 쉽게 알 수 있습니다.

훌륭한 사용자 경험을 갖춘 정적 웹사이트를 원한다면 Gatsby가 적합합니다. 11ty는 독특한 것을 만들고 싶어하는 고급 사용자에게 적합합니다.

물론, 그 사이에 다른 사용 사례가 있습니다. 두 가지 중 어느 것이 완벽한 솔루션인지 결정하려면 프로젝트 목표를 숙고해야 합니다.