🛠️ avif로 변환된 gif 이미지가 움직이지 않아 파일 수정

scripts/sharp-api.ts

@@ -28,7 +28,7 @@ export const SHARP_OPTIONS_TYPE_MAPPER = {
   jpeg: 'jpeg',
   webp: 'webp',
   avif: 'avif',
-  gif: 'gif',
+  gif: 'webp',
 } as const satisfies { [key: string]: SharpOptionType }
 export type SharpFileType = keyof typeof SHARP_OPTIONS_TYPE_MAPPER
 
@@ -93,7 +93,15 @@ export const sharpImages = async () => {
       const sharpOptionType = SHARP_OPTIONS_TYPE_MAPPER[fileType]
       const sharpOption = SHARP_OPTIONS[sharpOptionType]
 
-      const sharpedFilePath = filePath.replace(`.${fileType}`, `.sharp.${fileType}`)
+      const metadata = await sharp(filePath).metadata()
+      const isAnimatedWebp = fileType === 'webp' && metadata.pages && metadata.pages > 1
+
+      if (isAnimatedWebp) {
+        console.log(`::✧:: Skipping animated WebP file ${filename}`)
+        continue
+      }
+
+      const sharpedFilePath = filePath.replace(`.${fileType}`, `.sharp.${sharpOptionType}`)
 
       await sharp(filePath, fileType === 'gif' ? { animated: true } : {})
         [sharpOptionType](sharpOption)
@@ -111,14 +119,10 @@ export const sharpImages = async () => {
       }
 
       if (processedResult.percentChange > 0) {
-        await fs.writeFile(filePath, await fs.readFile(sharpedFilePath))
-
-        const avifPath = filePath.replace(`.${fileType}`, '.avif')
-        try {
-          await sharp(filePath, fileType === 'gif' ? { animated: true } : {})
-            .avif(SHARP_OPTIONS.avif)
-            .toFile(avifPath)
-
+        if (fileType !== 'gif') {
+          await fs.writeFile(filePath, await fs.readFile(sharpedFilePath))
+          const avifPath = filePath.replace(`.${fileType}`, '.avif')
+          await sharp(filePath).avif(SHARP_OPTIONS.avif).toFile(avifPath)
           const avifStats = await fs.stat(avifPath)
 
           if (avifStats.size < afterStats.size) {
@@ -132,16 +136,24 @@ export const sharpImages = async () => {
           } else {
             await unlink(avifPath)
           }
-        } catch (error) {
-          console.log('::error:: Failed to convert to AVIF:', error)
+        }
+
+        if (fileType === 'gif') {
+          const webpPath = filePath.replace('.gif', '.webp')
+          await fs.rename(sharpedFilePath, webpPath)
+          const webpFilename = path.basename(webpPath)
+          mdxUpdates += await updateMdxReferences(filename, webpFilename)
+          await unlink(filePath)
         }
 
         sharpedImageList.push(processedResult)
       } else {
         unSharpedImageList.push(processedResult)
       }
 
-      await unlink(sharpedFilePath)
+      if (fileType !== 'gif') {
+        await unlink(sharpedFilePath)
+      }
     } catch (error) {
       console.log('::error::', error)
     }

src/content/post/blog/cubeit-intranet-retrospect.mdx

@@ -73,7 +73,7 @@ SQLite3는 선택사항이었지만, 김민태 강사님께서 SQL 문을 사용
 디자인이 나와야 개발을 시작할 수 있어서 레퍼런스를 활용해 주말에 빠르게 작업했다.
 조장님(진짜 디자이너)이 레퍼런스도 구해주시고 피드백도 빠르게 주셔서 좀 더 수월하게 작업할 수 있었다.
 
-![반응형으로 구현한 모습](/images/cubeit-intranet-retrospect/mediaquery.avif)
+![반응형으로 구현한 모습](/images/cubeit-intranet-retrospect/mediaquery.webp)
 
 ## 역할