{"id":896,"date":"2026-05-20T09:53:13","date_gmt":"2026-05-20T01:53:13","guid":{"rendered":"https:\/\/junai.ai\/blog\/nextjs-image-font-optimization-15\/"},"modified":"2026-05-20T09:53:13","modified_gmt":"2026-05-20T01:53:13","slug":"nextjs-image-font-optimization-15","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/nextjs-image-font-optimization-15\/","title":{"rendered":"Image\u00b7Font \ucd5c\uc801\ud654 \u2014 Next.js Ch.15"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 841 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#4f46e5;--color-accent:#6366f1;--color-bg:#fafbfc;--color-bg-card:#fff;--color-text:#1a202c;--color-text-muted:#64748b;--hero-start:#1e1b4b;--hero-end:#4338ca;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#a78bfa;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#c7d2fe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#eef2ff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#4338ca;}\n.databox{background:#eef2ff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#f1f5f9;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#4f46e5 0%,#6366f1 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#c7d2fe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">Next.js \uad50\uc7ac \u00b7 15\ud3b8 \u00b7 \ubbf8\ub514\uc5b4 \ucd5c\uc801\ud654<\/span>\n  <h1>Image\u00b7Font \ucd5c\uc801\ud654 \u2014 next\/image\u00b7next\/font \uc2e4\uc804<\/h1>\n  <p>\ud55c \uc904 \ucef4\ud3ec\ub10c\ud2b8 \uad50\uccb4\ub85c \ub77c\uc774\ud2b8\ud558\uc6b0\uc2a4 \uc810\uc218\uac00 \uadf8\ub0e5 \uc624\ub978\ub2e4.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-74.jpg\" alt=\"\uc774\ubbf8\uc9c0 \uc555\ucd95\uacfc \ud3f0\ud2b8 \ud504\ub9ac\ub85c\ub4dc \ucee8\uc149 \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>\uc6f9 \ud398\uc774\uc9c0 \ubb34\uac8c\uc758 70% \uc774\uc0c1\uc740 \ubcf4\ud1b5 \uc774\ubbf8\uc9c0\u00b7\ud3f0\ud2b8. 4MB JPG \ud55c \uc7a5\uc5d0 1MB Google Font \ub450 \uac1c\uba74 \u2014 \ubaa8\ubc14\uc77c\uc5d0\uc11c \uccab \ud654\uba74 \uadf8\ub9ac\ub294 \ub370 10\ucd08\uac00 \uc6b0\uc2b5\ub2e4. \ub77c\uc774\ud2b8\ud558\uc6b0\uc2a4\uac00 \ube68\uac1b\uac8c \ub5a0\ub3c4 \uc5b4\ub514\uc11c \uc190\ub300\uc57c \ud560\uc9c0 \ub9c9\ub9c9.<\/p>\n\n<p>Next.js \uac00 \uc774 \ub458\uc5d0 \ud2b9\ud654\ub41c \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud45c\uc900 \uc81c\uacf5\ud55c\ub2e4. <code>next\/image<\/code> \uc640 <code>next\/font<\/code>. \ud55c \uc904 \uad50\uccb4\ub85c \uc790\ub3d9 \ucd5c\uc801\ud654. \uc190\uc4f0\ub294 \uc2dc\uac04 0, \ud6a8\uacfc \uc989\uc2dc.<\/p>\n\n<h2>1. next\/image \u2014 \uc790\ub3d9 \uc555\ucd95\u00b7\ubc18\uc751\ud615\u00b7lazy<\/h2>\n\n<p>\uae30\ubcf8 \uc0ac\uc6a9\uc740 <code>&lt;img&gt;<\/code> \uc640 \uac70\uc758 \uac19\ub2e4.<\/p>\n\n<div class=\"code-block\">\/\/ app\/page.tsx\nimport Image from &#8216;next\/image&#8217;;\nimport hero from &#8216;.\/hero.jpg&#8217;;\n\nexport default function HomePage() {\n  return (\n    &lt;Image\n      src={hero}\n      alt=&#8221;hero&#8221;\n      placeholder=&#8221;blur&#8221;   \/\/ \uc635\uc158\n      priority             \/\/ \uccab \ud654\uba74\uc774\uba74 priority\n    \/&gt;\n  );\n}<\/div>\n\n<p>\uc774 \ud55c \uc904\uc774 \uc790\ub3d9\uc73c\ub85c \ud574 \uc8fc\ub294 \uc77c \u2014 <strong>WebP\/AVIF \ubcc0\ud658<\/strong>, <strong>\ud654\uba74 \ud06c\uae30\ubcc4 \ub2e4\ub978 \uc0ac\uc774\uc988 \uc81c\uacf5<\/strong>(srcset), <strong>lazy \ub85c\ub529<\/strong>, <strong>blur placeholder<\/strong>, <strong>\uac00\ub85c\/\uc138\ub85c \uc790\ub3d9 \uc124\uc815<\/strong>(CLS 0). <code>&lt;img&gt;<\/code> \ub85c \uc9c1\uc811 \ud558\uba74 30\ubd84 \uac78\ub9ac\ub294 \uc77c.<\/p>\n\n<div class=\"databox\">\n<strong>\ub85c\uceec import vs \uc678\ubd80 URL<\/strong> \u2014 <code>import hero from '.\/hero.jpg'<\/code> \ucc98\ub7fc import \ud558\uba74 Next \uac00 \ube4c\ub4dc \ud0c0\uc784\uc5d0 \ud06c\uae30\ub97c \uc54c\uc544\ub0b4 \uc790\ub3d9 \ucc98\ub9ac. <strong>\uc678\ubd80 URL<\/strong> \uc774\uba74 <code>width<\/code>\u00b7<code>height<\/code> \uba85\uc2dc \ud544\uc218 + <code>next.config.js<\/code> \uc758 <code>remotePatterns<\/code> \uc5d0 \ub3c4\uba54\uc778 \ub4f1\ub85d.\n<\/div>\n\n<h2>2. \uc678\ubd80 \uc774\ubbf8\uc9c0 + \ubc18\uc751\ud615 sizes<\/h2>\n\n<p>\uc678\ubd80 CDN\u00b7CMS \uc5d0\uc11c \ubc1b\ub294 \uc774\ubbf8\uc9c0\ub294 \uc57d\uac04 \ub354 \uc801\ub294\ub2e4.<\/p>\n\n<div class=\"code-block\">\/\/ next.config.mjs\nexport default {\n  images: {\n    remotePatterns: [\n      { protocol: &#8216;https&#8217;, hostname: &#8216;cdn.example.com&#8217; },\n    ],\n  },\n};\n\n\/\/ page.tsx\n&lt;Image\n  src=&#8221;https:\/\/cdn.example.com\/photo.jpg&#8221;\n  alt=&#8221;&#8230;&#8221;\n  width={1200}\n  height={800}\n  sizes=&#8221;(max-width: 768px) 100vw, 50vw&#8221;\n\/&gt;<\/div>\n\n<p><code>sizes<\/code> \uac00 \ud575\uc2ec \u2014 \ubaa8\ubc14\uc77c\uc5d0\uc120 \uc804\uccb4 \ub108\ube44, \ub370\uc2a4\ud06c\ud0d1\uc5d0\uc120 \uc808\ubc18. \ube0c\ub77c\uc6b0\uc800\uac00 \uc774 \uc815\ubcf4\ub85c \uc801\uc808\ud55c \ud06c\uae30 \uc774\ubbf8\uc9c0\ub97c \ubc1b\uc544 \ub370\uc774\ud130 \uc808\uc57d. \ud070 \ud654\uba74\uc5d0 3MB, \uc791\uc740 \ud654\uba74\uc5d4 200KB.<\/p>\n\n<h2>3. \ud754\ud55c \ud568\uc815 4\uac00\uc9c0<\/h2>\n\n<div class=\"warnbox\">\n<strong>\uc2e4\uc218 1\uc704 \u2014 fill \ubaa8\ub4dc\uc640 \ubd80\ubaa8 position<\/strong> \u2014 <code>fill<\/code> prop \uc73c\ub85c \ubd80\ubaa8 \ucee8\ud14c\uc774\ub108\ub97c \uaf49 \ucc44\uc6b8 \ub550 \ubd80\ubaa8\uc5d0 <code>position: relative<\/code> \ud544\uc218. \ube60\ub728\ub9ac\uba74 \uc774\ubbf8\uc9c0\uac00 \ud398\uc774\uc9c0 \ubc16\uc73c\ub85c \ud280\uc5b4\ub098\uac04\ub2e4.\n<\/div>\n\n<p>\ub2e4\ub978 \ud568\uc815 3\uac00\uc9c0:<\/p>\n\n<ul>\n<li><strong>priority \ub0a8\ubc1c \uae08\uc9c0<\/strong> \u2014 <code>priority<\/code> \ub294 \uccab \ud654\uba74 LCP \uc774\ubbf8\uc9c0 <strong>\ud55c \uc7a5<\/strong>\ub9cc. \ub098\uba38\uc9c0\uc5d0 \ubd99\uc774\uba74 lazy \ubb34\ud6a8\ud654\ub418\uc5b4 \uc624\ud788\ub824 \ub290\ub9bc.<\/li>\n<li><strong>alt \ube44\uc6b0\uc9c0 \ub9d0 \uac83<\/strong> \u2014 SEO\u00b7\uc811\uadfc\uc131 \ub458 \ub2e4 \uae4e\uc778\ub2e4. \uc758\ubbf8 \uc5c6\ub294 \uc7a5\uc2dd\uc774\uba74 <code>alt=\"\"<\/code> \ub77c\ub3c4.<\/li>\n<li><strong>animated GIF<\/strong> \u2014 next\/image \uac00 GIF \ub97c \uc815\uc801 \uccab \ud504\ub808\uc784\uc73c\ub85c \ubcc0\ud658\ud560 \uc218 \uc788\ub2e4. \uc560\ub2c8\uba54\uc774\uc158 \ud544\uc694\ud558\uba74 <code>unoptimized<\/code> \ub610\ub294 WebM \uc601\uc0c1\uc73c\ub85c \uad50\uccb4.<\/li>\n<\/ul>\n\n<h2>4. next\/font \u2014 \uc140\ud504 \ud638\uc2a4\ud305 \uc790\ub3d9<\/h2>\n\n<p>\uc61b \ubc29\uc2dd\uc740 <code>&lt;link href=\"https:\/\/fonts.googleapis.com\/...\"&gt;<\/code> \u2014 \uc678\ubd80 \uc694\uccad + \uce90\uc2f1 \uc815\ucc45 \ub2e4\ub984 + \ud3f0\ud2b8 \uae5c\ube61\uc784(FOUT).<\/p>\n\n<p>Next \uc758 <code>next\/font\/google<\/code> \uc740 \ube4c\ub4dc \ud0c0\uc784\uc5d0 \ud3f0\ud2b8\ub97c \ubc1b\uc544 <strong>\uc140\ud504 \ud638\uc2a4\ud305<\/strong>\ud55c\ub2e4. \uac19\uc740 \ub3c4\uba54\uc778\uc5d0\uc11c \uc11c\ube59 \u2192 \uc678\ubd80 \uc694\uccad 0, CSP \uce5c\ud654\uc801, \ud3f0\ud2b8 \uae5c\ube61\uc784 \uac70\uc758 \uc5c6\uc74c.<\/p>\n\n<div class=\"code-block\">\/\/ app\/layout.tsx\nimport { Inter, Noto_Sans_KR } from &#8216;next\/font\/google&#8217;;\n\nconst inter = Inter({\n  subsets: [&#8216;latin&#8217;],\n  display: &#8216;swap&#8217;,\n});\n\nconst notoKR = Noto_Sans_KR({\n  subsets: [&#8216;latin&#8217;],   \/\/ \ud55c\uae00\uc740 \ubcc4\ub3c4 \ucc98\ub9ac\n  weight: [&#8216;400&#8217;, &#8216;700&#8217;],\n  display: &#8216;swap&#8217;,\n  variable: &#8216;&#8211;font-noto-kr&#8217;,\n});\n\nexport default function RootLayout({ children }) {\n  return (\n    &lt;html lang=&#8221;ko&#8221; className={`${inter.className} ${notoKR.variable}`}&gt;\n      &lt;body&gt;{children}&lt;\/body&gt;\n    &lt;\/html&gt;\n  );\n}<\/div>\n\n<p><code>className<\/code> \uc73c\ub85c \uc9c1\uc811 \uc801\uc6a9 \ub610\ub294 <code>variable<\/code> \ub85c CSS \ubcc0\uc218 \ub4f1\ub85d \ud6c4 Tailwind\/CSS \uc5d0\uc11c <code>var(--font-noto-kr)<\/code> \uc0ac\uc6a9. \ub458 \ub2e4 \uac00\ub2a5.<\/p>\n\n<div class=\"databox\">\n<strong>\ud55c\uae00 \ud3f0\ud2b8 \uc8fc\uc758<\/strong> \u2014 Noto Sans KR \uac19\uc740 \ud55c\uae00 \ud3f0\ud2b8\ub294 \uae00\ub9ac\ud504\uac00 \ub9ce\uc544(7000+) <strong>subset \uc801\uc6a9\uc774 \uae4c\ub2e4\ub86d\ub2e4<\/strong>. Google \uc81c\uacf5 subset \uc635\uc158\uc774 \ub77c\ud2f4 \uae30\ubc18\uc774\ub77c \ud55c\uae00\uc774 \ube60\uc9c8 \uc218 \uc788\ub2e4. \uadf8 \uacbd\uc6b0 <code>display: 'swap'<\/code> + <code>preload: false<\/code> \ub85c \ub450\uace0 fallback \ud3f0\ud2b8 \uc798 \uc124\uc815. \ub610\ub294 <code>next\/font\/local<\/code> \ub85c \uc9c1\uc811 .woff2 \ud30c\uc77c \ud638\uc2a4\ud305.\n<\/div>\n\n<h2>5. \ub85c\uceec \ud3f0\ud2b8 \u2014 next\/font\/local<\/h2>\n\n<p>\ucee4\uc2a4\ud140 .woff2 \ud30c\uc77c\uc774 \uc788\uc744 \ub54c.<\/p>\n\n<div class=\"code-block\">\/\/ app\/fonts.ts\nimport localFont from &#8216;next\/font\/local&#8217;;\n\nexport const pretendard = localFont({\n  src: [\n    { path: &#8216;..\/public\/fonts\/Pretendard-Regular.woff2&#8217;, weight: &#8216;400&#8217; },\n    { path: &#8216;..\/public\/fonts\/Pretendard-Bold.woff2&#8217;,    weight: &#8216;700&#8217; },\n  ],\n  display: &#8216;swap&#8217;,\n  variable: &#8216;&#8211;font-pretendard&#8217;,\n});<\/div>\n\n<p>Pretendard \ucc98\ub7fc \ud55c\uad6d\uc5b4 \ub514\uc790\uc774\ub108\uac00 \ub9ce\uc774 \uc4f0\ub294 \ubb34\ub8cc \ud3f0\ud2b8\ub294 \uc774 \ubc29\uc2dd\uc774 \ud45c\uc900. Google Fonts \ubcf4\ub2e4 \ud6e8\uc52c \ube60\ub974\ub2e4 (\uc678\ubd80 \uc694\uccad 0).<\/p>\n\n<h3>\uc694\uc57d \u2014 15\ud3b8 \uc88c\ud45c<\/h3>\n\n<p>\uc5ec\uae30\uae4c\uc9c0 \uc815\ub9ac. <strong><code>next\/image<\/code><\/strong> \u2014 WebP\/AVIF\u00b7\ubc18\uc751\ud615\u00b7lazy\u00b7blur \uc790\ub3d9, \ub85c\uceec import \uac00 \uac00\uc7a5 \ud3b8\ud568. <code>priority<\/code> \ub294 \uccab \ud654\uba74 LCP \ud55c \uc7a5\ub9cc. <code>sizes<\/code> \ub85c \ud654\uba74\ubcc4 \ub2e4\ub978 \ud06c\uae30 \uc81c\uacf5. <strong><code>next\/font<\/code><\/strong> \u2014 Google Fonts \ub97c \ube4c\ub4dc \ud0c0\uc784\uc5d0 \ubc1b\uc544 \uc140\ud504 \ud638\uc2a4\ud305, \uc678\ubd80 \uc694\uccad 0. \ud55c\uae00\uc740 subset \uc8fc\uc758, Pretendard \uac19\uc740 \ub85c\uceec .woff2 \ub294 <code>next\/font\/local<\/code>. \ub450 \ucef4\ud3ec\ub10c\ud2b8\ub9cc \uc81c\ub300\ub85c \uc368\ub3c4 \ub77c\uc774\ud2b8\ud558\uc6b0\uc2a4 LCP\u00b7CLS \uc810\uc218\uac00 \uc790\ub3d9 \uc0c1\uc2b9. \ub2e4\uc74c \ud3b8\uc5d0\uc11c \ub80c\ub354\ub9c1 \ubaa8\ub4dc \u2014 <strong>ISR\u00b7SSG\u00b7SSR<\/strong> \ucc28\uc774.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \ud3b8 \uc608\uace0 \u2014 ISR\u00b7SSG\u00b7SSR \ucc28\uc774<\/h3>\n<p>\uc5b8\uc81c \uc5b4\ub5a4 \ub80c\ub354\ub9c1\uc744 \uace0\ub974\ub098. 16\ud3b8.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\n\uc2dc\ub9ac\uc988 \u00b7 <a href=\"https:\/\/junai.ai\/blog\/category\/nextjs\/\">\uc27d\uac8c \ubc30\uc6b0\ub294 Next.js<\/a> \u00b7 \uc774\uc804: <a href=\"https:\/\/junai.ai\/blog\/nextjs-api-routes-14\/\">Ch.14 Route Handlers<\/a>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>next\/image \uc790\ub3d9 WebP\u00b7AVIF\u00b7lazy\u00b7sizes, next\/font \uc140\ud504 \ud638\uc2a4\ud305. CLS 0 \ub77c\uc774\ud2b8\ud558\uc6b0\uc2a4 \uc0c1\uc2b9. \uad50\uc7ac 15\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":841,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-896","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nextjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=896"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/896\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/841"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}