새로운 코덱 지원, 업데이트된 디자인, CLI 지원!
Squoosh는 Google팀에서 빌드하여 Chrome Dev Summit 2018에서 데뷔한 이미지 압축 앱입니다. 다양한 이미지 코덱을 쉽게 실험하고 최신 웹의 기능을 보여주기 위해 빌드했습니다.
오늘 Google은 더 많은 코덱 지원, 새로운 디자인, Squoosh CLI라는 명령줄에서 Squoosh를 사용하는 새로운 방법을 제공하는 앱의 주요 업데이트를 출시합니다.
새로운 코덱 지원
이제 브라우저에서 기본적으로 지원되는 코덱 외에도 OxiPNG, MozJPEG, WebP, AVIF를 지원합니다. WebAssembly를 사용하여 새로운 코덱을 다시 사용할 수 있게 되었습니다. 코덱 인코더와 디코더를 WebAssembly 모듈로 컴파일하면 사용자가 선호하는 브라우저에서 지원하지 않더라도 최신 코덱에 액세스하고 실험할 수 있습니다.
명령줄 Squoosh 출시!
2018년 최초 출시 이후 일반적인 사용자 요청은 UI 없이 Squoosh와 프로그래매틱 방식으로 상호작용하는 것이었습니다. Google은 앱이 명령줄 기반 코덱 도구 위에 있는 UI였기 때문에 이 경로에 대해 약간의 갈등을 느꼈습니다. 하지만 여러 도구 대신 전체 코덱 패키지와 상호작용하려는 요구를 이해합니다. Squoosh CLI는 바로 그 작업을 실행합니다.
npm i @squoosh/cli를 실행하여 Squoosh CLI의 베타 버전을 설치하거나
npx @squoosh/cli [parameters]를 사용하여 직접 실행할 수 있습니다.
Squoosh CLI는 Node로 작성되며 PWA에서 사용하는 것과 동일한 WebAssembly 모듈을
사용합니다. 작업자를 광범위하게 사용하여 모든 이미지가 병렬로 디코딩, 처리, 인코딩됩니다.
또한 Rollup을 사용하여 모든 항목을 하나의 JavaScript 파일로 번들링하여
npx을 통한 설치가 빠르고 원활하게 이루어지도록 합니다. CLI는 시각적 충실도를 저하시키지 않고(
Butteraugli 측정항목 사용) 이미지의
품질을 최대한 줄이려고 하는 자동 압축도 제공합니다.
Squoosh CLI를 사용하면 웹 앱의 이미지를 여러 형식으로 압축하고
<picture> 요소
를 사용하여 브라우저에서 최적의 버전을 선택하도록 할 수 있습니다. 또한 이미지 압축을 빌드 프로세스의 자동 부분으로 만들기 위해 Webpack, Rollup, 기타 빌드 도구용
플러그인을 빌드할 계획입니다.
Webpack에서 Rollup으로 빌드 프로세스 변경
Squoosh를 빌드한 동일한 팀이 올해 도구 보고서를 위해 빌드 도구를 살펴보는 데 상당한 시간을 할애했으며 빌드 프로세스를 Webpack에서 Rollup으로 전환하기로 결정했습니다.
이 프로젝트는 팀으로 사용해 보고 싶었기 때문에 Webpack으로 시작되었으며, 당시인 2018년에 Webpack은 원하는 방식으로 프로젝트를 설정할 수 있는 충분한 제어 기능을 제공하는 유일한 도구였습니다. 시간이 지남에 따라 Rollup의 간편한 플러그인 시스템과 ESM의 단순함이 이 프로젝트에 자연스러운 선택이 되었습니다.
업데이트된 UI 디자인
또한 시각적 요소로 blobs가 포함된 앱의 UI 디자인을 업데이트했습니다. 코드에서 데이터를 처리하는 방식에 대한 작은
말장난입니다. Squoosh는 이미지 데이터를 blob으로 전달하므로
디자인에 blob을 포함하는 것이 자연스럽게 느껴졌습니다.
색상 사용도 개선되어 색상이 강조 색상 이상으로 옵션에 대한 컨텍스트에 있는 이미지를 구별하고 강화하는 벡터가 되었습니다. 전반적으로 홈페이지가 좀 더 생생해지고 도구 자체가 좀 더 명확하고 간결해졌습니다.
다음 단계
Squoosh 작업을 계속할 계획입니다. 새로운 이미지 형식이 출시되면 사용자가 많은 작업을 하지 않고도 코덱을 사용할 수 있는 공간을 제공하고자 합니다. 또한 Squoosh CLI의 사용을 확대하고 웹 애플리케이션의 빌드 프로세스에 더 많이 통합하고자 합니다.
Squoosh는 항상 오픈소스였지만 커뮤니티 성장에 집중한 적은 없습니다. 2021년에는 기여자 기반을 확대하고 프로젝트에 더 나은 온보딩 프로세스를 마련할 계획입니다.
Squoosh에 대한 아이디어가 있으신가요? Issue Tracker에서 알려주세요 . 팀은 긴 겨울 휴가를 떠나지만 새해에 다시 연락드리겠습니다.