diff --git a/assets/images-webp/home-background.webp b/assets/images-webp/home-background.webp new file mode 100644 index 0000000..460bc65 Binary files /dev/null and b/assets/images-webp/home-background.webp differ diff --git a/assets/images-webp/solution/solution_04_object.webp b/assets/images-webp/solution/solution_04_object.webp index c9ca91c..b861edb 100644 Binary files a/assets/images-webp/solution/solution_04_object.webp and b/assets/images-webp/solution/solution_04_object.webp differ diff --git a/assets/images/solution/solution_04_object.png b/assets/images/solution/solution_04_object.png index 89f3f5b..e3b9242 100644 --- a/assets/images/solution/solution_04_object.png +++ b/assets/images/solution/solution_04_object.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0c66723278419cb2c7ba3e4a63a29e00d93ce32d03c2b2986d958da212135ae7 -size 268350 +oid sha256:8f128024ca1e52e8776d6d812475a4189f656fff580bef2120f16935583a7879 +size 2156123 diff --git a/assets/thumbnails/automotive/automotive_01_background.jpeg b/assets/thumbnails/automotive/automotive_01_background.jpeg index 6c1e6c7..999201d 100644 Binary files a/assets/thumbnails/automotive/automotive_01_background.jpeg and b/assets/thumbnails/automotive/automotive_01_background.jpeg differ diff --git a/assets/thumbnails/automotive/automotive_04_background.jpeg b/assets/thumbnails/automotive/automotive_04_background.jpeg index 3e51109..3299ed3 100644 Binary files a/assets/thumbnails/automotive/automotive_04_background.jpeg and b/assets/thumbnails/automotive/automotive_04_background.jpeg differ diff --git a/assets/thumbnails/automotive/automotive_07_background.jpeg b/assets/thumbnails/automotive/automotive_07_background.jpeg index 4150d14..4b80999 100644 Binary files a/assets/thumbnails/automotive/automotive_07_background.jpeg and b/assets/thumbnails/automotive/automotive_07_background.jpeg differ diff --git a/assets/thumbnails/automotive/automotive_09_background.jpeg b/assets/thumbnails/automotive/automotive_09_background.jpeg index 4fce50d..dd3dc96 100644 Binary files a/assets/thumbnails/automotive/automotive_09_background.jpeg and b/assets/thumbnails/automotive/automotive_09_background.jpeg differ diff --git a/assets/thumbnails/patents/patents_01_object.jpg b/assets/thumbnails/patents/patents_01_object.jpg index eef30eb..eddf4b3 100644 Binary files a/assets/thumbnails/patents/patents_01_object.jpg and b/assets/thumbnails/patents/patents_01_object.jpg differ diff --git a/assets/thumbnails/patents/patents_01_object_02.jpg b/assets/thumbnails/patents/patents_01_object_02.jpg index b789fb9..4e0cbca 100644 Binary files a/assets/thumbnails/patents/patents_01_object_02.jpg and b/assets/thumbnails/patents/patents_01_object_02.jpg differ diff --git a/assets/thumbnails/si/si_01_background.jpeg b/assets/thumbnails/si/si_01_background.jpeg index 8089338..930b125 100644 Binary files a/assets/thumbnails/si/si_01_background.jpeg and b/assets/thumbnails/si/si_01_background.jpeg differ diff --git a/assets/thumbnails/si/si_02_background.jpg b/assets/thumbnails/si/si_02_background.jpg index 137a2dc..4738d06 100644 Binary files a/assets/thumbnails/si/si_02_background.jpg and b/assets/thumbnails/si/si_02_background.jpg differ diff --git a/assets/thumbnails/solution/solution_01_background.jpeg b/assets/thumbnails/solution/solution_01_background.jpeg index 714d46d..a47a484 100644 Binary files a/assets/thumbnails/solution/solution_01_background.jpeg and b/assets/thumbnails/solution/solution_01_background.jpeg differ diff --git a/assets/thumbnails/solution/solution_04_object.png b/assets/thumbnails/solution/solution_04_object.png index b45795a..27aa2f9 100644 Binary files a/assets/thumbnails/solution/solution_04_object.png and b/assets/thumbnails/solution/solution_04_object.png differ diff --git a/assets/thumbnails/solution/solution_06_background.jpeg b/assets/thumbnails/solution/solution_06_background.jpeg index cb6ec0b..0860335 100644 Binary files a/assets/thumbnails/solution/solution_06_background.jpeg and b/assets/thumbnails/solution/solution_06_background.jpeg differ diff --git a/assets/thumbnails/solution/solution_07_background.jpeg b/assets/thumbnails/solution/solution_07_background.jpeg index 365a9fa..56a9fbb 100644 Binary files a/assets/thumbnails/solution/solution_07_background.jpeg and b/assets/thumbnails/solution/solution_07_background.jpeg differ diff --git a/css/styles.css b/css/styles.css index 874ea3e..d7f8f3d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -376,7 +376,7 @@ body.mobile-navigation-open { background-image: linear-gradient(90deg, rgba(7, 9, 13, .94) 0%, rgba(7, 9, 13, .66) 38%, rgba(7, 9, 13, .18) 72%), linear-gradient(180deg, rgba(7, 9, 13, .1), rgba(7, 9, 13, .9)), - url("../assets/images/home-background.png"); + url("../assets/images-webp/home-background.webp"); animation: slow-zoom 18s ease-in-out infinite alternate; } diff --git a/js/capabilities-data.js b/js/capabilities-data.js index afac542..b1a3514 100644 --- a/js/capabilities-data.js +++ b/js/capabilities-data.js @@ -407,14 +407,6 @@ GPS 기반의 위치 정보를 활용하여 대중교통의 이동 상황을 실 output: "Web platform", image: "assets/images/solution/solution_04_background.png", objectImage: "assets/images/solution/solution_04_object.png", - objectLayout: { - x: "100%", - y: "calc(100% - 86px)", - anchorX: "-98%", - anchorY: "-100%", - height: "auto", - maxHeight: "none", - }, }, // P.32 { diff --git a/scripts/generate-capability-webp.mjs b/scripts/generate-capability-webp.mjs index 692467c..2a30979 100644 --- a/scripts/generate-capability-webp.mjs +++ b/scripts/generate-capability-webp.mjs @@ -1,5 +1,5 @@ // 기술 역량 원본 이미지를 웹 전송용 WebP로 변환합니다. -// 실행: node scripts/generate-capability-webp.mjs [--force] +// 실행: node scripts/generate-capability-webp.mjs [파일명 일부] [--force] import fs from "node:fs"; import path from "node:path"; import vm from "node:vm"; @@ -8,6 +8,7 @@ import { fileURLToPath } from "node:url"; const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), ".."); const force = process.argv.includes("--force"); +const filters = process.argv.slice(2).filter((argument) => !argument.startsWith("--")); const context = { window: {} }; vm.runInNewContext(fs.readFileSync(path.join(root, "js", "capabilities-data.js"), "utf8"), context); @@ -34,21 +35,31 @@ function optimizedPath(source) { .replace(/\.(?:png|jpe?g)$/i, ".webp"); } -let sourceBytes = 0; -let outputBytes = 0; -let generated = 0; - -for (const [relativeSource, type] of sources) { +const assets = Array.from(sources, ([relativeSource, type]) => { const source = path.join(root, relativeSource); const target = path.join(root, optimizedPath(relativeSource)); const sourceStat = fs.statSync(source); - sourceBytes += sourceStat.size; - fs.mkdirSync(path.dirname(target), { recursive: true }); + const targetStat = fs.existsSync(target) ? fs.statSync(target) : null; + return { relativeSource, type, source, target, sourceStat, targetStat }; +}).filter(({ relativeSource }) => + !filters.length || filters.some((filter) => relativeSource.includes(filter))); - if (!force && fs.existsSync(target) && fs.statSync(target).mtimeMs >= sourceStat.mtimeMs) { - outputBytes += fs.statSync(target).size; - continue; - } +if (!assets.length) { + throw new Error(`일치하는 기술 역량 이미지가 없습니다: ${filters.join(", ")}`); +} + +// 삭제된 결과물을 먼저 복구하고, 나머지는 데이터에 정의된 순서대로 처리합니다. +assets.sort((a, b) => Number(Boolean(a.targetStat)) - Number(Boolean(b.targetStat))); + +const pending = assets.filter(({ sourceStat, targetStat }) => + force || !targetStat || targetStat.mtimeMs < sourceStat.mtimeMs); +let sourceBytes = assets.reduce((total, { sourceStat }) => total + sourceStat.size, 0); +let outputBytes = assets.reduce((total, asset) => + pending.includes(asset) ? total : total + asset.targetStat.size, 0); + +for (const [index, { relativeSource, type, source, target }] of pending.entries()) { + fs.mkdirSync(path.dirname(target), { recursive: true }); + console.log(`[${index + 1}/${pending.length}] ${relativeSource}`); const { width, height } = dimensions(source); const maxWidth = type === "background" ? 2560 : 2400; @@ -61,11 +72,10 @@ for (const [relativeSource, type] of sources) { args.push(source, "-o", target); execFileSync("cwebp", args, { stdio: "inherit" }); outputBytes += fs.statSync(target).size; - generated += 1; } const savedPercent = Math.round((1 - outputBytes / sourceBytes) * 100); console.log( - `${generated ? `Generated ${generated}` : "Checked"} WebP assets: ` + + `${pending.length ? `Generated ${pending.length}` : "Checked"} WebP assets: ` + `${(sourceBytes / 1048576).toFixed(1)}MB -> ${(outputBytes / 1048576).toFixed(1)}MB (${savedPercent}% reduction)`, );