img-toolkit
개발 인원
1명
담당 역할
프론트엔드
사용 기술
JavaScriptCanvas APITypeScriptViteRustWebAssembly
프로젝트 설명
JavaScript의 Canvas API를 활용해 실시간으로 이미지 크기를 압축하는 기능을 제공하는 라이브러리입니다. 프론트엔드에서 사용자가 업로드한 이미지를 서버에 전송하기 전에 즉시 용량을 줄여 업로드 및 로딩 속도를 크게 개선할 수 있도록 돕습니다. 사용자는 간단한 API로 이미지 압축률을 설정하고, 브라우저 환경에서 즉시 결과물을 확인할 수 있습니다.
핵심 기능 및 성과
Canvas API를 활용 이미지 압축 구현
- Canvas API를 활용하여 이미지 압축 기능 구현
Rust WebAssembly를 활용한 이미지 품질 최적화
- Rust WebAssembly 기반 고품질 이미지 압축 기능 구현
회고
라이브러리 개발을 통해 범용적으로 재사용 가능한 코드를 작성하고 유지보수하는 경험을 쌓았습니다. 처음으로 npm에 직접 라이브러리를 배포하면서, 오픈소스로 프로젝트를 관리하고 사용자와 소통하는 과정의 중요성을 배웠습니다.
특히 기존 JavaScript 기반 라이브러리의 인터페이스를 그대로 유지한 채 Rust WebAssembly로 재작성하면서, 언어 간 호환성과 설계 일관성에 대한 이해를 넓힐 수 있었고, 이미지 압축 과정에서 성능과 품질 모두를 최적화할 수 있었습니다.
구현 이미지
