🖋️ NextJS Pretendard Safari 글꼴 굵기 렌더링 오류 해결

scripts/sharp-api.ts

@@ -35,7 +35,7 @@ export type SharpFileType = keyof typeof SHARP_OPTIONS_TYPE_MAPPER
 const CONFIG = {
   imageGlobPattern: 'public/images/**/*.{png,jpg,jpeg,webp,gif}',
   mdxGlobPattern: 'src/content/post/**/*.mdx',
-  ignoreList: ['og.png', 'thumbnails/'],
+  ignoreList: ['og.png'],
 }
 
 export type ProcessedResult = {
@@ -83,7 +83,7 @@ export const sharpImages = async () => {
     try {
       const filename = path.basename(filePath)
 
-      if (CONFIG.ignoreList.includes(filename)) {
+      if (CONFIG.ignoreList.includes(filename) || filePath.includes('thumbnails/')) {
         console.log(`::✧:: Skipping ignored file ${filename}`)
         continue
       }

src/content/post/notes/pretendard-safari.mdx

@@ -0,0 +1,56 @@
+---
+title: NextJS Pretendard Safari 글꼴 굵기 렌더링 오류 해결
+date: 2025-03-04
+updatedDate: 2025-03-04
+tags: [pretendard safari, nextjs pretendard]
+category: cross-browsing
+image: ''
+---
+
+:::note
+PretendardVariable 폰트를 사용했을 때 발생한 문제입니다.
+:::
+
+NextJS에서 Pretendard 폰트를 적용했을 때, Semibold 이상의 굵기가 **유독 굵게 렌더링 되는 문제**가 발생했다.
+
+![좌 Chrome 우 Safari](/images/pretendard-safari/weight-before.avif)
+
+구글링을 통해 다음 방법으로 해결할 수 있다는 걸 알게 되었다.
+
+```css
+html,
+body {
+  font-synthesis: none;
+}
+```
+
+`font-synthesis: none;`을 적용하면 **브라우저의 강제 합성을 막아** 폰트 굵기가 정상적으로 표시된다.
+하지만, 폰트에 특정 굵기(weight)나 italic 스타일이 없으면 브라우저가 합성해 주는 기능도 막혀서 **디자인이 달라질 위험**이 있다.
+
+![좌 Chrome 우 Safari](/images/pretendard-safari/italic-before.avif)
+
+`font-synthesis: none;` 적용 후 italic을 테스트해 보니 Chrome과 Safari 모두에서 적용되지 않는 걸 확인할 수 있었다.
+
+## Pretendard 공식 문서에서 권장하는 방식
+
+[Pretendard Github README](https://github.com/orioncactus/pretendard)를 살펴보면, NextJS에서 Pretendard를 사용할 경우 `weight` 속성을 추가하라는 안내가 있다.
+
+> weight 옵션을 지정하지 않으면 WebKit 기반의 브라우저에서 굵기가 잘못 렌더링 될 수 있으니 주의해 주세요.
+
+```jsx
+import localFont from 'next/font/local'
+
+const pretendard = localFont({
+  src: './fonts/PretendardVariable.woff2',
+  display: 'swap',
+  weight: '45 920', // [!code highlight]
+})
+```
+
+![좌 Chrome 우 Safari](/images/pretendard-safari/weight-after.avif)
+
+`weight` 값을 추가해 주니 Safari에서의 굵기 렌더링 이슈가 해결되었다.
+
+![좌 Chrome 우 Safari](/images/pretendard-safari/italic-after.avif)
+
+italic 역시 정상적으로 적용된다.