새로운 코덱 지원, 업데이트된 디자인, CLI 지원
Squoosh는 Google팀에서 빌드하여 Chrome Dev Summit 2018에서 공개한 이미지 압축 앱입니다. 다양한 이미지 코덱을 쉽게 실험하고 최신 웹의 기능을 보여줄 수 있도록 빌드되었습니다.
오늘은 더 많은 코덱 지원, 새로운 디자인, 명령줄에서 Squoosh CLI라는 Squoosh를 사용하는 새로운 방법이 포함된 앱의 주요 업데이트를 발표합니다.
새로운 코덱 지원
이제 브라우저에서 기본적으로 지원되는 코덱 외에도 OxiPNG, MozJPEG, WebP, AVIF가 지원됩니다. WebAssembly를 사용해 새로운 코덱이 다시 만들어졌습니다. 코덱 인코더와 디코더를 WebAssembly 모듈로 컴파일하면 사용자가 선호하는 브라우저에서 지원하지 않는 경우에도 최신 코덱에 액세스하여 실험할 수 있습니다.
명령줄 실행 Squoosh!
2018년 첫 출시 이후 일반적인 사용자 요청은 UI 없이 프로그래매틱 방식으로 Squoosh와 상호작용해 달라는 것이었습니다. 앱이 명령줄 기반 코덱 도구 위에 있는 UI였기 때문에 이 경로는 약간 충돌했습니다. 하지만 여러 도구가 아닌 전체 코덱 패키지와 상호작용하고 싶은 바람을 잘 알고 있습니다. Squoosh CLI가 바로 그런 역할을 합니다.
npm i @squoosh/cli를 실행하여 Squoosh CLI 베타 버전을 설치하거나 npx @squoosh/cli [parameters]를 사용하여 직접 실행할 수 있습니다.
Squoosh CLI는 Node로 작성되며 PWA에서 사용하는 것과 정확히 동일한 WebAssembly 모듈을 사용합니다. 광범위한 작업자 사용을 통해 모든 이미지가 동시에 디코딩, 처리 및 인코딩됩니다.
또한 npx을 통해 빠르고 원활하게 설치할 수 있도록 Rollup을 사용하여 모든 것을 하나의 JavaScript 파일로 묶습니다. 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를 통해 알려주세요. 저희 팀은 겨울 휴가를 연장할 계획이지만 새해에 다시 연락드리도록 하겠습니다.