빠른 시작#

이 가이드에서 Snapkit으로 이미지 업로드와 실시간 최적화를 시작하는 방법을 배울 수 있습니다.

1. 이미지 업로드#

이미지를 업로드하는 방법은 두 가지입니다:

• 웹 대시보드: 파일을 드래그 앤 드롭하거나 업로드 버튼을 클릭하세요
• Figma 플러그인: Figma를 사용하는 팀은 Figma 플러그인에서 직접 업로드할 수 있습니다

2. 실시간 변환 적용#

URL에 변환 파라미터를 추가하면 실시간으로 이미지를 최적화할 수 있습니다.

아래 예시는 다음과 같이 이미지를 최적화합니다:

• format=webp: WebP 포맷으로 변환하여 용량 최대 80% 절약
• w=200: 너비를 200픽셀로 리사이징
• dpr=3: 고해상도 디스플레이를 위해 픽셀 밀도 3배 적용

결과적으로 원본 대비 3배 이상 빠른 로딩 속도와 선명한 화질을 동시에 제공합니다.

https://snapkit-cdn.snapkit.studio/landing-page/fox.jpg?format=webp&w=200&dpr=3

원본 이미지

JPG, 1920px

2.5초 로딩, 346KB

최적화된 이미지

(format=webp&w=200&dpr=3)

WebP, 200px, 고해상도

0.05초 로딩, 35.4KB

10배 작은 크기, 50배 빠른 속도

더 많은 변환 옵션은 이미지 변환 가이드에서 확인하세요.

다음 단계#

• 통합 가이드에서 프론트엔드에 Snapkit 통합하기
• 이미지 변환 가이드에서 고급 변환 옵션 살펴보기

도움이 필요한가요?#

궁금한 점이 있으시면 언제든지 문의해주세요:

• 채팅 상담: 채널톡 열기 (우측 하단 채팅 버튼)
• 디스코드 커뮤니티: https://discord.com/invite/RM6QgTW8↗
• GitHub 이슈: https://github.com/snapkit-studio/snapkit-js↗
• 이메일 지원: contact@snapkit.studio

축하합니다! 이제 Snapkit으로 빠르고 최적화된 이미지를 제공할 준비가 완료되었습니다.