# 벤치마킹 Track 3: GitHub 광고 디자인 리소스/템플릿

> 조사일: 2026-03-28 | 작업: task-1203.1 | 팀: dev4-team
> 12개 키워드로 GitHub 오픈소스 프로젝트 28개 발견, 중복 제거 후 20개 고유 프로젝트 분석

---

## 1. 프로젝트 분석 (상위 15개, 스타 수 + Satori 호환성 기준 정렬)

### 1-1. penpot/penpot
- **URL**: https://github.com/penpot/penpot
- **스타**: 45,071 | **마지막 커밋**: 2026-03-28 (매우 활성)
- **기술 스택**: ClojureScript, SVG 기반, 셀프호스팅
- **디자인 품질**: 최고급 (Figma 수준 협업 디자인 도구)
- **템플릿 구조**: SVG + CSS 컴포넌트 기반
- **라이선스**: MPL-2.0 (상용 가능, 수정 코드 공개 의무)
- **한글 지원**: 시스템 폰트 + 사용자 지정 폰트 업로드 지원
- **Satori 호환**: SVG 출력 → Satori 연동 파이프라인 가능
- **활용 포인트**: 배너 디자인 작업 후 SVG Export → Satori 렌더링 파이프라인. 레이아웃/폰트 시스템 참고

### 1-2. GrapesJS/grapesjs
- **URL**: https://github.com/GrapesJS/grapesjs
- **스타**: 25,668 | **마지막 커밋**: 2026-03-04 (활성)
- **기술 스택**: JavaScript/TypeScript, 드래그앤드롭 HTML/CSS 빌더
- **디자인 품질**: 프로급 (블록 시스템, 반응형 레이아웃)
- **템플릿 구조**: 블록 기반 컴포넌트 조합 → HTML 출력
- **라이선스**: BSD-style (상용 가능)
- **한글 지원**: CSS font-family 설정으로 가능
- **Satori 호환**: HTML/CSS 출력 → Satori 연동 파이프라인 가능
- **활용 포인트**: 배너 편집 UI 구축 시 기반 프레임워크. MJML 플러그인 포함

### 1-3. resend/react-email
- **URL**: https://github.com/resend/react-email
- **스타**: 18,299 | **마지막 커밋**: 2026-03-27 (매우 활성)
- **기술 스택**: React, TypeScript, JSX → HTML/CSS 렌더링
- **디자인 품질**: 프로급 (30+ 사전 제작 이메일 템플릿)
- **템플릿 구조**: JSX 컴포넌트 → 바로 사용 가능
- **라이선스**: MIT
- **한글 지원**: CSS fontFamily 설정으로 가능
- **Satori 호환**: **직접 호환** — 동일한 JSX + inline CSS 패러다임
- **활용 포인트**: Section/Column/Text/Button 컴포넌트를 Satori 배너 템플릿에 직접 포팅 가능. 가장 빠른 고품질 템플릿 확보 경로

### 1-4. mjmlio/mjml
- **URL**: https://github.com/mjmlio/mjml
- **스타**: 17,969 | **마지막 커밋**: 2026-03-27 (매우 활성)
- **기술 스택**: Node.js, `<mj-*>` 마크업 → 반응형 HTML 이메일
- **디자인 품질**: 산업 표준 이메일 렌더링 프레임워크
- **템플릿 구조**: XML-like 마크업 → HTML 변환
- **라이선스**: MIT
- **한글 지원**: mj-font 태그로 Google Fonts 로딩 가능
- **Satori 호환**: 간접 — MJML → HTML → Satori 변환 파이프라인 구성 가능
- **활용 포인트**: 컬럼/섹션/텍스트 블록 구조가 배너 레이아웃 설계에 응용 가능

### 1-5. vercel/satori
- **URL**: https://github.com/vercel/satori
- **스타**: 13,190 | **마지막 커밋**: 2026-03-20 (활성)
- **기술 스택**: TypeScript, JSX → SVG 변환, Yoga Layout 엔진
- **디자인 품질**: 코어 렌더링 라이브러리 자체
- **템플릿 구조**: JSX 컴포넌트 형태, 재사용 구조 우수
- **라이선스**: MPL-2.0 (상용 가능, 수정 파일 소스 공개 의무)
- **한글 지원**: fonts 옵션으로 TTF/OTF/WOFF 직접 지정 → Noto Sans KR, Pretendard 적용 시 완벽 지원
- **Satori 호환**: 우리 시스템의 기반 라이브러리 자체
- **활용 포인트**: Discussion #173에 커뮤니티 OG 이미지 쇼케이스 100여 개 수록 — 템플릿 영감 소스

### 1-6. 11cafe/jaaz
- **URL**: https://github.com/11cafe/jaaz
- **스타**: 6,038 | **마지막 커밋**: 2026-03-02
- **기술 스택**: React, TypeScript, 멀티모달 AI
- **디자인 품질**: 중급 (AI 생성 + 캔버스 편집 조합)
- **라이선스**: 기타 (상용 여부 확인 필요)
- **Satori 호환**: 비호환 (AI 이미지 생성 파이프라인)
- **활용 포인트**: AI + 캔버스 편집 조합 개념 참고용

### 1-7. unlayer/react-email-editor
- **URL**: https://github.com/unlayer/react-email-editor
- **스타**: 5,097 | **마지막 커밋**: 2026-03-23 (활성)
- **기술 스택**: React, 드래그앤드롭 편집기
- **디자인 품질**: 프로급 UI
- **템플릿 구조**: JSON 스키마 기반 템플릿 정의
- **라이선스**: MIT (단, 렌더링 엔진 자체는 상용)
- **Satori 호환**: 비호환 (Unlayer 독자 렌더러)
- **활용 포인트**: JSON 기반 템플릿 스키마 구조 설계 참고

### 1-8. vercel/og-image
- **URL**: https://github.com/vercel/og-image
- **스타**: 4,058 | **마지막 커밋**: 2023-01-20 (아카이브 수준)
- **기술 스택**: TypeScript, Next.js, Puppeteer 기반
- **디자인 품질**: OG 이미지 서비스 템플릿 (Twitter, Facebook, Slack)
- **라이선스**: MIT
- **Satori 호환**: 구세대 방식 (Satori 이전). @vercel/og로 대체됨
- **활용 포인트**: 파라미터 기반 URL → 이미지 생성 패턴 레퍼런스

### 1-9. zalify/easy-email-editor
- **URL**: https://github.com/zalify/easy-email-editor
- **스타**: 2,322 | **마지막 커밋**: 2026-02-27
- **기술 스택**: React + MJML, 드래그앤드롭, TypeScript
- **디자인 품질**: 프로급 (SaaS 이메일 에디터 수준)
- **라이선스**: MIT
- **Satori 호환**: React 컴포넌트 구조 참고 가능
- **활용 포인트**: React + MJML 조합의 완성형 에디터. 배너 에디터 UI 설계 시 컴포넌트 구조 참고

### 1-10. usewaypoint/email-builder-js
- **URL**: https://github.com/usewaypoint/email-builder-js
- **스타**: 1,615 | **마지막 커밋**: 2026-02-09
- **기술 스택**: TypeScript, 블록 기반 이메일 빌더
- **라이선스**: MIT
- **활용 포인트**: 블록 기반 JSON 템플릿 구조 설계 참고. 아키텍처가 깔끔

### 1-11. leviarista/github-profile-header-generator
- **URL**: https://github.com/leviarista/github-profile-header-generator
- **스타**: 1,223 | **마지막 커밋**: 2025-12-24
- **기술 스택**: HTML
- **라이선스**: MIT
- **활용 포인트**: 폼 입력 → 배너 즉시 생성 UX 패턴

### 1-12. presenta-software/presenta-lib
- **URL**: https://github.com/presenta-software/presenta-lib
- **스타**: 709 | **마지막 커밋**: 2023-03-05
- **기술 스택**: JavaScript, JSON 설정 기반 슬라이드/포스터 자동화
- **라이선스**: BSD-3-Clause (상용 가능)
- **활용 포인트**: JSON 설정 → 이미지 렌더링 패턴. 카드/슬라이드 자동화 레퍼런스

### 1-13. nuxt-modules/og-image
- **URL**: https://github.com/nuxt-modules/og-image
- **스타**: 531 | **마지막 커밋**: 2026-03-28 (최활성)
- **기술 스택**: TypeScript, Vue, Nuxt (Satori 기반)
- **라이선스**: MIT
- **한글 지원**: Google Fonts Noto Sans KR 자동 로딩 가능
- **Satori 호환**: Satori 기반 래퍼
- **활용 포인트**: Satori 기반 프로덕션급 래퍼 구현 레퍼런스. Tailwind/UnoCSS 지원 패턴

### 1-14. Akshay090/svg-banners
- **URL**: https://github.com/Akshay090/svg-banners
- **스타**: 398 | **마지막 커밋**: 2020-10-13 (비활성)
- **기술 스택**: HTML/CSS in SVG — 런타임 없음
- **라이선스**: 미지정 (상용 사용 주의)
- **활용 포인트**: SVG 태그에 텍스트 교체만으로 배너 생성. glitch/luminance/typewriter 효과 CSS 기법

### 1-15. svycal/og-image
- **URL**: https://github.com/svycal/og-image
- **스타**: 309 | **마지막 커밋**: 2025-08-07
- **기술 스택**: Elixir + Tailwind CSS
- **라이선스**: MIT
- **활용 포인트**: SavvyCal 프로급 디자인 템플릿 참고. 플러그인형 템플릿 시스템 아키텍처

---

## 2. 상위 5개 프로젝트 디자인 패턴에서 추출한 5개 컨셉

### 컨셉 1: JSX 컴포넌트 기반 선언적 템플릿 시스템
- **출처**: resend/react-email + vercel/satori
- **패턴**: React JSX + inline CSS로 배너 레이아웃을 선언적으로 정의
- **핵심 구조**: `<Section>`, `<Column>`, `<Text>`, `<Button>` 등 시맨틱 컴포넌트 조합
- **장점**: 재사용성 높음, 타입 안전, 프리뷰 용이
- **우리 시스템 적용**: react-email의 컴포넌트를 Satori 렌더러에 직접 넣을 수 있음. 30+ 이메일 템플릿을 배너 템플릿으로 포팅하는 것이 가장 빠른 확보 경로
- **예시 코드 패턴**:
  ```jsx
  <div style={{ display: 'flex', flexDirection: 'column', background: 'linear-gradient(135deg, #667eea, #764ba2)', padding: 40 }}>
    <h1 style={{ color: '#fff', fontSize: 48, fontFamily: 'Pretendard' }}>헤드라인</h1>
    <p style={{ color: '#e0e0e0', fontSize: 20 }}>서브텍스트</p>
  </div>
  ```

### 컨셉 2: 블록 기반 모듈러 레이아웃
- **출처**: GrapesJS/grapesjs + unlayer/react-email-editor + usewaypoint/email-builder-js
- **패턴**: JSON 스키마로 템플릿을 정의하고, 블록 단위로 조합
- **핵심 구조**: 각 블록(헤더, 본문, CTA, 푸터)이 독립적으로 교체 가능
- **장점**: 비개발자도 블록 조합으로 배너 생성 가능, A/B 테스트 용이
- **우리 시스템 적용**: 배너 템플릿을 JSON 블록으로 정의 → Satori JSX로 변환하는 중간 레이어 구축
- **JSON 스키마 패턴**:
  ```json
  {
    "type": "banner",
    "blocks": [
      { "type": "gradient-bg", "colors": ["#667eea", "#764ba2"] },
      { "type": "headline", "text": "보험료 30% 절약", "size": 48 },
      { "type": "cta-button", "text": "무료 상담 신청", "color": "#FF6B35" }
    ]
  }
  ```

### 컨셉 3: CSS Flexbox + 그래디언트 기반 반응형 배너
- **출처**: vercel/satori (Yoga Layout) + Akshay090/svg-banners + nuxt-modules/og-image
- **패턴**: Flexbox로 레이아웃, CSS 그래디언트로 배경, 이미지 없이 프로급 배너 구현
- **핵심 기법**: linear-gradient, radial-gradient, 메시 그래디언트 효과
- **장점**: 이미지 없이 빠른 렌더링, 다양한 사이즈 대응, 파일 크기 최소화
- **우리 시스템 적용**: Satori가 CSS Flexbox와 그래디언트를 네이티브 지원하므로 즉시 적용 가능
- **그래디언트 팔레트 패턴**:
  - 신뢰감: `#0F2027 → #203A43 → #2C5364` (다크 블루)
  - 에너지: `#FF6B35 → #F7931E → #FCB900` (오렌지-골드)
  - 전문성: `#667eea → #764ba2` (퍼플)
  - 성장: `#11998e → #38ef7d` (그린)
  - 안정감: `#2C3E50 → #4CA1AF` (네이비-틸)

### 컨셉 4: SVG-first 렌더링 파이프라인
- **출처**: penpot/penpot + vercel/satori + Akshay090/svg-banners
- **패턴**: SVG를 중간 출력 포맷으로 사용, 최종 PNG/WebP로 변환
- **핵심 구조**: JSX/HTML → SVG (Satori) → PNG (resvg-js/sharp)
- **장점**: 벡터 기반으로 해상도 독립적, 고DPI 디스플레이 대응, 편집 가능한 중간 산출물
- **우리 시스템 적용**: Penpot에서 디자인 → SVG Export → Satori 템플릿 참고 워크플로우
- **기술 스택**:
  - SVG 렌더링: vercel/satori
  - SVG → PNG: resvg-js (Rust 기반, 고속)
  - 폰트 임베딩: TTF/OTF 바이너리 직접 주입

### 컨셉 5: CJK 타이포그래피 중심 미니멀 디자인
- **출처**: vercel/satori Discussion #173 쇼케이스 + nuxt-modules/og-image + svycal/og-image
- **패턴**: 큰 텍스트 + 그래디언트 배경의 미니멀 구성. 이미지 없이 타이포그래피만으로 임팩트 전달
- **핵심 기법**:
  - 폰트 로딩: `fonts: [{ name: 'NotoSansKR', data: fontBuffer, weight: 400 }]`
  - 텍스트 강조: font-weight 700+, letter-spacing -1px
  - 여백 활용: padding 40px+, 텍스트 간 충분한 margin
- **장점**: 가장 빠르게 프로급 결과물 생성 가능, 한글 렌더링 안정적
- **우리 시스템 적용**: 보험 광고에서 "월 3만원부터" 같은 숫자 강조 + 미니멀 배경 조합에 최적
- **추천 한글 폰트**:
  - Pretendard (SIL OFL, 고딕계열, 가독성 최고)
  - Noto Sans KR (SIL OFL, 구글 공식)
  - Source Han Sans / 본고딕 (SIL OFL, Adobe+Google 공동, 16,440★)

---

## 3. 우리 시스템에 즉시 적용 가능한 템플릿/기법

### 3-1. react-email 컴포넌트 → Satori 배너 포팅 (난이도: 낮음)
- **방법**: resend/react-email의 JSX 컴포넌트를 Satori 렌더러에 그대로 삽입
- **호환성**: react-email과 Satori 모두 JSX + inline CSS 패러다임 → 100% 구조 호환
- **즉시 활용 가능한 템플릿**: 30+ 이메일 템플릿의 레이아웃 구조 (Section/Column/Text)
- **예상 작업량**: 템플릿 1개당 포팅 30분 이내
- **참고**: https://react.email/templates

### 3-2. Satori Discussion #173 커뮤니티 쇼케이스 (난이도: 낮음)
- **방법**: vercel/satori Discussion #173에서 커뮤니티가 공유한 OG 이미지 JSX 코드 참고
- **내용**: 100여 개의 실제 프로덕션 OG 이미지 디자인 + JSX 코드
- **참고**: https://github.com/vercel/satori/discussions/173

### 3-3. CSS 그래디언트 배경 팔레트 라이브러리 (난이도: 낮음)
- **방법**: auroral의 CSS 그래디언트 기법 + 보험 브랜드 컬러 조합
- **즉시 적용**: Satori의 `background: 'linear-gradient(...)'` 속성에 바로 적용
- **예시**: 다크 그래디언트 배경 + 화이트 텍스트 = 신뢰감 있는 보험 광고

### 3-4. Noto Sans KR / Pretendard 폰트 주입 패턴 (난이도: 낮음)
- **방법**: TTF 파일을 Buffer로 읽어 Satori fonts 옵션에 전달
- **코드 패턴**:
  ```typescript
  const fontData = await readFile('./fonts/PretendardVariable.ttf');
  const svg = await satori(jsx, {
    width: 1200, height: 630,
    fonts: [{ name: 'Pretendard', data: fontData, weight: 400 }]
  });
  ```

### 3-5. JSON 블록 스키마 → Satori JSX 변환 레이어 (난이도: 중간)
- **방법**: email-builder-js/easy-email-editor의 JSON 블록 정의 패턴을 차용
- **구현**: JSON 템플릿 정의 → Satori JSX 자동 변환 함수 구축
- **장점**: 비개발자도 JSON으로 배너 구성 가능, A/B 테스트 변형 자동 생성
- **예상 작업량**: 변환 레이어 구축 2-3일

---

## 4. 라이선스 요약

| 라이선스 | 프로젝트 | 상용 사용 |
|----------|----------|-----------|
| MIT | react-email, mjml, og-image, nuxt-modules/og-image, easy-email, email-builder-js, profile-header-generator, svycal/og-image | O (자유롭게 사용) |
| MPL-2.0 | satori, penpot, og-img | O (수정 파일만 공개 의무) |
| BSD-3 | presenta-lib | O |
| BSD-style | grapesjs | O (확인 필요) |
| Apache-2.0 | auto-poster-generator, vigenair | O |
| GPL-2.0 | designerzen/Animated-HTML5-Banner | X (상용 프로젝트 포함 불가) |
| 미지정 | svg-banners, HTML5-Banners, oxigen, banner-maker | X (상용 사용 위험) |

---

## 5. 한글(CJK) 지원 현황

대부분의 프로젝트가 CJK 폰트를 기본 내장하지 않음. 해결 방법:

1. **Satori 기반 프로젝트**: `fonts` 옵션에 TTF/OTF 직접 주입 (가장 안정적)
2. **nuxt-modules/og-image**: Google Fonts URL 지정으로 자동 로딩
3. **Chromium 기반 프로젝트** (og-image 레거시): 시스템 폰트 의존

**추천 한글 폰트 (모두 SIL OFL, 상용 무료)**:
- Pretendard (https://github.com/orioncactus/pretendard) — 가독성 최고, 가변 폰트 지원
- Noto Sans KR (Google) — 가장 범용
- Source Han Sans / 본고딕 (https://github.com/adobe-fonts/source-han-sans, 16,440★) — Adobe+Google 공동

---

## 6. 키워드별 오픈소스 공백 분석

| 키워드 | 오픈소스 현황 |
|--------|---------------|
| ad banner template HTML CSS | 소수 존재하나 대부분 비활성 (2021 이전) |
| social media image generator | Satori 생태계 중심으로 활발 |
| instagram ad template | **공백** — Instagram 전용 HTML 템플릿 오픈소스 부재 |
| meta ad carousel template | **공백** — Meta 캐러셀 전용 오픈소스 부재 |
| CSS gradient banner design | SVG/CSS 배너 소규모 프로젝트 다수 |
| typography-only poster | Python Pillow 기반 소수, AI 연구 프로젝트 일부 |
| satori banner | Satori 래퍼 프로젝트 활발 (nuxt-modules, x-satori 등) |
| og-image generator | **가장 활발** — Vercel 생태계 중심 |
| ad creative generator | 영상 광고 AI 위주, 정적 배너 오픈소스 드묾 |
| banner design system | GrapesJS 외 전용 시스템 부재 |
| react email template | **매우 활발** — react-email, mjml, easy-email 등 다수 |
| canva alternative | Penpot 독보적, 나머지는 AI 기반 실험적 |

---

## 7. 핵심 결론

1. **즉시 활용 가능한 최우선 프로젝트**: `resend/react-email` — JSX 컴포넌트가 Satori와 100% 구조 호환, 30+ 템플릿 즉시 포팅 가능
2. **핵심 엔진 레퍼런스**: `vercel/satori` Discussion #173 — 커뮤니티 쇼케이스에서 디자인 패턴 100여 개 즉시 참고
3. **배너 편집기 구축 시**: `GrapesJS/grapesjs` 블록 시스템 아키텍처 + JSON 스키마 패턴 차용
4. **디자인 작업 툴**: `penpot/penpot`에서 SVG 디자인 → Satori 렌더링 워크플로우
5. **Meta 광고/Instagram 전용 템플릿은 오픈소스 공백 지대** → Satori 기반 자체 구축이 현실적 대안