[240923 TIL] 모노레포 테일윈드 font 설정

next font 와 tailwind 로 모노레포에 폰트 적용하기

모노레포 구성은 다음과 같은 상황입니다.

 

/apps/admin => nextjs app
/apps/invitation => nextjs app
/apps/www => nextjs app
/apps/storybook => storybook app
/packages/config-tailwind => 테일윈드 공용 설정들 모여 있는 곳
/packages/shared => 공용 컴포넌트 디렉토리(nextjs 아님)

 

이때 같은 폰트들을 각 app 들이 모두 사용합니다.

처음에 생각한 것은 shared 에만 폰트를 설정하고
각 app 에서 임포트 해서 쓰는 방법이었는데
shared는 nextjs가 아니어서 next font를 사용할 수 없었습니다.

 

또한 storybook 의 경우는 폰트가 필요 없기도 하고요.
그래서 그냥 각 nextjs 앱마다 font 설정 파일을 생성하고
woff 파일은 shared 에 저장한 뒤 상대경로로 참조하는 것이 좋겠다고 생각했습니다.

 

// src/fonts/fonts.ts
import { Noto_Serif_KR as NotoSerifKr } from 'next/font/google';
import localFont from 'next/font/local';

export const pretendard = localFont({
    src: '../../../../packages/shared/fonts/PretendardVariable.woff2',
    weight: '45 920',
    style: 'normal',
    display: 'swap',
    variable: '--font-pretendard',
});

export const notoSerifKr = NotoSerifKr({
    subsets: ['latin'],
    weight: ['200', '300', '400', '500', '600', '700', '900'],
    variable: '--font-notoSerifKr',
});

export const gowunBatang = localFont({
    src: '../../../../packages/shared/fonts/GowunBatangRegular.woff',
    style: 'normal',
    display: 'swap',
    variable: '--font-gowunBatang',
});

 

woff 파일도 각 app 마다 저장해야하는지,
packages/config-tailwind 에 public 을 만들고 여기에 넣는 방법은 없는지
등등이 궁금해서 o1 선생님에게 물어본 내용을 첨부합니다.
(참고만 했습니다 gpt가 알려준대로 하면 안됨)

GPT질의응답

모노레포(monorepo) 환경에서 Turborepo를 사용하고 계시며, packages/config-tailwind 경로에 Tailwind CSS 설정을 공유하는 패키지인 @repo/tailwind-config가 있다고 하셨습니다. 이 패키지의 package.json은 다음과 같습니다:

{
  "name": "@repo/tailwind-config",
  "version": "0.0.0",
  "private": true,
  "exports": {
    ".": "./tailwind.config.ts"
  },
  "devDependencies": {
    "@repo/typescript-config": "workspace:*",
    "tailwindcss": "^3.4.1"
  }
}

이 상황에서 packages/config-tailwind 디렉토리에 public 폴더를 생성해야 하는지 궁금하신 것이군요.

---

결론부터 말씀드리자면, packages/config-tailwind에 public 디렉토리를 생성하는 것은 권장되지 않습니다.

---

이유 및 자세한 설명

1. public 디렉토리는 각 애플리케이션별로 존재해야 합니다:
   • public 디렉토리는 일반적으로 웹 애플리케이션의 루트 디렉토리에 위치하며, 정적 자산(이미지, 폰트, 기타 파일 등)을 제공하는 역할을 합니다.
   • 공유 패키지(@repo/tailwind-config)는 정적 자산을 직접 제공하는 역할을 하지 않으며, 따라서 public 디렉토리를 갖는 것이 일반적이지 않습니다.
2. 공유 패키지에서 정적 자산을 관리하는 것은 복잡성을 증가시킵니다:
   • 공유 패키지에 public 디렉토리를 만들고 폰트 파일을 포함시키면, 각 애플리케이션에서 해당 파일에 접근하기 위한 경로 설정과 빌드 설정이 복잡해집니다.
   • 또한, 공유 패키지의 변경이 모든 애플리케이션에 영향을 미칠 수 있어 관리가 어려워집니다.
3. Tailwind CSS의 @font-face에서 경로는 애플리케이션의 public 디렉토리를 기준으로 합니다:
   • @font-face에서 src: url(/fonts/Roboto.woff2)와 같이 절대 경로로 지정하면, 이는 웹사이트의 루트 경로(즉, 애플리케이션의 public 디렉토리)를 기준으로 합니다.
   • 따라서 폰트 파일은 각 애플리케이션의 public/fonts 디렉토리에 위치해야 합니다.

권장되는 해결 방법

각 애플리케이션의 public/fonts 디렉토리에 폰트 파일을 복사하고, 공유 Tailwind 설정에서는 해당 경로를 참조하도록 합니다.

1. 폰트 파일을 애플리케이션의 public/fonts 디렉토리에 복사:
   • 각 애플리케이션(apps/my-app 등)의 public/fonts 디렉토리에 필요한 폰트 파일(Roboto.woff2 등)을 복사합니다.
   • 이렇게 하면 src: url(/fonts/Roboto.woff2) 경로가 올바르게 해당 파일을 참조할 수 있습니다.
2. 공유 Tailwind 설정에서 @font-face 정의 유지:
   • @repo/tailwind-config 패키지의 Tailwind 설정에서 @font-face를 정의할 때 경로를 그대로 사용합니다.

   /* packages/config-tailwind/tailwind.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   @layer base {
     @font-face {
       font-family: 'Roboto';
       font-style: normal;
       font-weight: 400;
       font-display: swap;
       src: url(/fonts/Roboto.woff2) format('woff2');
     }
   }

3. 추가적인 설정 없이 폰트 적용 가능:
   • 각 애플리케이션은 공유 Tailwind 설정을 사용하면서도, 폰트 파일을 public 디렉토리에 포함함으로써 폰트가 정상적으로 적용됩니다.

대안 방법

만약 폰트 파일을 공유 패키지에서 관리하고 싶으시다면, 다음과 같은 방법을 고려할 수 있습니다:

1. 폰트 파일을 NPM 패키지로 배포하고 애플리케이션에서 복사:
   • 폰트 파일을 포함하는 별도의 패키지를 만들고, 애플리케이션에서 해당 패키지를 설치합니다.
   • 빌드 스크립트나 설정을 통해 폰트 파일을 애플리케이션의 public/fonts 디렉토리로 복사합니다.
2. CDN이나 외부 경로 사용:
   • 폰트 파일을 CDN이나 외부 서버에 호스팅하고, @font-face에서 해당 URL을 사용합니다.
   • 예:
   • @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://your-cdn.com/fonts/Roboto.woff2') format('woff2'); }
3. 상대 경로 사용 및 빌드 설정 조정:
   • @font-face에서 상대 경로를 사용하고, 빌드 도구(Webpack 등)의 설정을 조정하여 폰트 파일을 번들링합니다.
   • 그러나 이 방법은 설정이 복잡해질 수 있으며, 공유 패키지에서 정적 자산을 관리하는 것은 권장되지 않습니다.

권장 방안 요약

• 폰트 파일은 각 애플리케이션의 public/fonts 디렉토리에 포함시킵니다.
• 공유 Tailwind 설정은 폰트의 경로를 /fonts/Roboto.woff2와 같이 절대 경로로 유지합니다.
• 애플리케이션별로 별도의 설정이나 추가 작업 없이 폰트가 정상적으로 적용됩니다.

---

추가적인 고려 사항

• 모노레포 환경에서의 정적 자산 관리:
  • 모노레포에서 공유 패키지는 일반적으로 코드나 설정을 공유하며, 정적 자산(이미지, 폰트 등)은 각 애플리케이션에서 관리하는 것이 좋습니다.
  • 이는 애플리케이션별로 필요한 자산만 포함할 수 있고, 빌드 및 배포 과정에서 불필요한 파일을 제외할 수 있기 때문입니다.
• 빌드 도구 및 프레임워크의 특성 고려:
  • Next.js나 CRA(Create React App) 등 사용 중인 프레임워크의 정적 자산 처리 방식을 이해하고, 그에 맞게 폰트 파일을 배치합니다.
  • 빌드 설정을 복잡하게 변경하지 않고도 폰트가 적용되도록 하는 것이 유지보수에 유리합니다.
• 폰트 파일의 라이선스 확인:
  • 사용하는 폰트 파일이 라이선스상 재배포나 공유에 문제가 없는지 확인하시기 바랍니다.

---

결론

• packages/config-tailwind 디렉토리에 public 폴더를 생성하지 않는 것이 좋습니다.
• 폰트 파일은 각 애플리케이션의 public 디렉토리에 포함시키고, 공유 Tailwind 설정에서는 해당 경로를 참조하도록 합니다.
• 이렇게 하면 모노레포 환경에서의 복잡성을 줄이고, 각 애플리케이션에서 폰트가 정상적으로 적용될 수 있습니다.

---

도움이 되었길 바랍니다! 추가적인 질문이나 더 자세한 설명이 필요하시면 언제든지 말씀해 주세요.