통합 개요#

Snapkit은 인기 있는 JavaScript 프레임워크와의 원활한 통합을 위한 공식 패키지를 제공합니다. 기술 스택에 가장 적합한 패키지를 선택하세요.

사용 가능한 통합#

빠른 비교#

핵심 기능#

모든 Snapkit 통합에서 제공하는 핵심 기능들:

🚀 자동 최적화#

• 포맷 선택: 브라우저 지원에 따라 WebP, AVIF 또는 원본 포맷을 자동으로 제공
• 품질 조정: 네트워크 상태에 따른 동적 품질 조정
• 반응형 이미지: 다양한 화면 크기를 위한 자동 srcset 생성

🎨 이미지 변환#

• 크기 조정 & 자르기: 다양한 맞춤 옵션을 갖춘 동적 크기 조정
• 시각적 효과: 블러, 그레이스케일, 샤프닝 등
• 포맷 변환: 즉석에서 포맷 간 변환
• 영역 추출: 이미지에서 특정 영역 추출

⚡ 성능#

• 지연 로딩: 내장된 Intersection Observer 지원
• 우선순위 로딩: 우선순위 이미지로 LCP 최적화
• 점진적 향상: 지원되지 않는 브라우저를 위한 fallback
• CDN 전송: 전 세계 엣지 네트워크 배포

🛠️ 개발자 경험#

• TypeScript 지원: 완전한 타입 안전성과 IntelliSense
• 간단한 API: 친숙한 컴포넌트 API
• 유연한 설정: Provider 패턴 또는 이미지별 설정
• 오류 처리: 우아한 fallback과 오류 상태

설치#

프레임워크를 선택하고 해당 패키지를 설치하세요:

# React 애플리케이션용
npm install @snapkit-studio/react
 
# Next.js 애플리케이션용
npm install @snapkit-studio/nextjs

기본 사용 예시#

두 패키지 모두 유사한 사용 패턴을 따릅니다:

// React
import { Image } from '@snapkit-studio/react';
 
// Next.js
import { Image } from '@snapkit-studio/nextjs';
 
// 사용법 (두 경우 모두 동일)
<Image
  src="/hero.jpg"
  alt="히어로 이미지"
  width={800}
  height={600}
  priority
  transforms={{
    format: 'auto',
    quality: 85
  }}
/>

Provider 설정#

Provider 패턴으로 설정을 중앙화하세요:

// React 또는 Next.js
import { SnapkitProvider } from '@snapkit-studio/[react|nextjs]';
 
<SnapkitProvider
  baseUrl="https://your-cdn.snapkit.studio"
  organizationName="your-org"
  defaultQuality={85}
  defaultFormat="auto"
>
  <YourApp />
</SnapkitProvider>

어떤 통합을 사용해야 할까요?#

React 통합을 선택하는 경우:#

• React SPA(Single Page Application)를 구축하는 경우
• Create React App를 사용하는 경우
• Vite + React로 작업하는 경우
• React 라이브러리나 컴포넌트를 구축하는 경우
• 최소한의 번들 크기가 필요한 경우 (~9KB 최적화)

Next.js 통합을 선택하는 경우:#

• Next.js로 구축하는 경우 (당연히!)
• SSR/SSG/ISR 지원이 필요한 경우
• 빌드 타임 최적화를 원하는 경우
• App Router 또는 Pages Router를 사용하는 경우
• 정적 이미지 import가 필요한 경우
• next/image에서 원활한 마이그레이션을 원하는 경우

출시 예정#

다음을 위한 공식 통합을 작업 중입니다:

• Vue.js - 완전한 Vue 3 Composition API 지원
• Angular - 네이티브 Angular 컴포넌트
• Svelte - SvelteKit 최적화 패키지
• Remix - 완전한 Remix loader 지원
• Gatsby - GraphQL 및 빌드 타임 최적화

리소스#

• GitHub Repository↗
• API 문서
• React 라이브 데모↗
• Next.js 라이브 데모↗
• React 데모 소스↗
• Next.js 데모 소스↗

도움이 필요하신가요?#

• 시작하기 가이드 확인하기
• 이미지 변환 문서 보기
• GitHub Discussions↗ 방문하기