불필요한 부하 없는 정적 사이트: Quesby의 현대 웹 개발 접근법
Source: Dev.to
현대 도구의 문제점
대부분의 개발자는 간단한 웹사이트를 시작하고, 자신이 선호하는 도구를 열면 갑자기 번들러, 설정 파일, 의존성, 그리고 프로젝트와 무관한 기능들을 다루게 됩니다.
이 도구들 자체가 잘못된 것은 아니며, 야심찬 애플리케이션을 위해 만들어졌습니다. 하지만 순수하게 HTML 페이지만 생성한다면, 이 생태계는 불필요한 오버헤드가 될 수 있습니다.
Quesby의 철학
Quesby는 다른 접근 방식을 취합니다: 정적 사이트에 꼭 필요한 것만 사용하고, 워크플로우를 예측 가능하게 유지하며, 사용되지 않을 도구는 가져오지 않습니다.
핵심 아이디어
- Eleventy 기반 – 정적 사이트에 맞는 철학을 가지고 있습니다: 템플릿으로부터 HTML을 생성하고, 별다른 요구가 없으면 그 이상은 하지 않습니다.
- 런타임이 없음 – 프런트엔드 프레임워크에 대한 가정이 없습니다.
- 불필요한 도구 배제 – 분석, 외부 폰트, 클라이언트‑사이드 라이브러리는 기본적으로 제외됩니다.
- 사용하지 않는 것을 배포하거나 유지하지 않음 – 목표는 미학적 최소주의가 아니라 실용적인 부피 감소입니다.
- 투명한 레이어 – 콘텐츠, 템플릿, SEO, 자산이 모두 검토하고 커스터마이즈할 수 있는 위치에 존재합니다.
SEO를 간단하게
프론트 매터가 메타 태그, OpenGraph, Twitter Cards, JSON‑LD, 정규화 URL, 언어 대체 등을 위한 단일 소스가 됩니다. 별도의 플러그인을 뒤섞어 쓰는 대신, Quesby는 로직을 예측 가능한 모듈로 통합합니다.
---
title: "Static Sites Without the Bloat"
description: "How Quesby trims modern tooling down to what static sites actually need."
image: "/assets/images/posts/static-sites-without-the-bloat/cover.jpg"
---Quesby는 이를 일관된 마크업으로 변환합니다:
Static Sites Without the Bloat | Example Site이미지 처리
Eleventy Image는 강력하지만 잡음이 많습니다. Quesby는 WebP/AVIF 출력, 폴백, 최신 마크업, 레이지‑로드, 결정적인 파일명 등을 다루는 합리적인 기본값으로 래핑합니다. 좋은 부분만 얻고 마찰은 없게 됩니다.
템플릿에서 일반적인 이미지 사용 예시(Nunjucks 문법)는 다음과 같습니다:
{% image "src/assets/images/posts/static-sites/cover.jpg", "Cover image for the article", "article-cover" %}Quesby는 자동으로 반응형 소스, 최신 포맷, loading="lazy"와 같은 속성을 추가합니다.
콘텐츠 워크플로우
Quesby는 구조화된 콘텐츠 디렉터리, 자동 슬러그, ULID‑기반 ID, 미리 정의된 컬렉션, 간단한 프론트‑매터 규칙을 제공합니다. 새 글을 추가하는 것은 파일을 만드는 것만큼 직관적입니다:
src/content/posts/01HXYZABCD1234567890--my-first-post/index.md
---
id: 01HXYZABCD1234567890
title: "My First Post"
slug: "my-first-post"
description: "Short summary used for meta tags and previews."
date: "2025-12-09T10:00:00.000Z"
image: "/assets/images/posts/my-first-post/cover.jpg"
category: "guide"
tags: ["static-site", "eleventy", "seo"]
---Markdown 콘텐츠는 프론트 매터 뒤에서 시작합니다.
단축키가 필요하면 다음 헬퍼를 실행하세요:
npx quesby new post "title-of-the-article"디렉터리 구조
구조는 의도적으로 단순하고 이해하기 쉽습니다:
src/
├─ _data/
│ └─ site.json
├─ _includes/
│ ├─ layouts/
│ └─ partials/
├─ assets/
│ ├─ css/
│ ├─ js/
│ └─ images/
├─ config/
│ ├─ collections.js
│ └─ taxonomies.js
├─ content/
│ ├─ media/
│ └─ posts/
└─ themes/
└─ quesby-core-theme/숨겨진 파이프라인도, 마법 같은 디렉터리도 없습니다—6개월 뒤에 레포를 열어도 여전히 이해가 됩니다.
성능 및 프라이버시
- 불필요한 JavaScript 제로
- 최소 CSS
- 이미지 최적화
- 쿠키 없음
- 추가하지 않는 한 외부 요청 없음
성능은 판매 포인트가 아니라, 경량 설정의 자연스러운 결과입니다. Quesby는 제3자 통합을 전혀 포함하지 않으므로 외부 호출이 줄어들고, 법적 요구사항도 감소하며, 성능 페널티와 감사 시 서프라이즈도 최소화됩니다. 분석이나 임베드를 추가하고 싶을 때만 명시적으로 설치하면 됩니다.
개발자 경험
Quesby는 두 극단을 피합니다:
- 방대한 설정 – 모든 것이 모듈화되고 예측 가능합니다.
- “한 번에 모든 것을 해결한다”는 마법 명령 – 각 레이어를 직접 보고 제어합니다.
얻는 것:
- 안정적이고 이해하기 쉬운 코드베이스
- 모듈형 설정
- 예측 가능한 빌드 동작
- 추상화에 파묻히지 않고 확장할 자유
DX는 개발을 지원해야지, 절차를 늘려서는 안 됩니다.
Quesby를 사용해야 할 사람
- 정적 혹은 콘텐츠‑주도 사이트를 구축하는 개발자
- 관습에 얽매인 자동화보다 명시적인 구조를 선호하는 사람
- 플러그인 미로 없이 SEO와 이미지 처리를 해결하고 싶은 팀
- Eleventy 팬이면서 그 주변 생태계를 찾는 사람
- 워크플로우를 감사하고 직접 오버라이드하고 싶은 모든 사람
전체 웹 애플리케이션을 만들고 있다면 다른 스택이 필요할 수 있습니다. 웹사이트라면 Quesby가 더 자연스럽게 느껴집니다.
시작하기
다음 프로젝트에 적절한 균형을 찾았다면, 아래 명령으로 새 사이트를 부트스트랩하세요:
npm create quesby@latest결론
정적 사이트는 복잡한 도구가 필요 없지만, 구조와 좋은 기본값은 큰 도움이 됩니다. Quesby는 그 중간 지점에 자리합니다: 가볍고, 안정적이며, 정적‑사이트 개발에서 반복되는 문제를 전체 생태계를 끌어들이지 않고 해결하는 데 집중합니다. 웹 개발을 재정의하려는 것이 아니라, 웹사이트 제작을 다시 합리적으로 만들려는 것입니다.