[이슈 해결] 스토리북 로컬 폰트 적용이 안되는 이슈

스토리북 로컬 폰트 적용이 안되는 이슈

스토리북에서 로컬폰트가 로딩 안되는 이유

• NextJS App은 3000번 포트를 사용하는 반면, 스토리북은 6006번이라는 별도의 포트를 사용하고 있다.

  • 이 때문에 스토리 북에선 public 폴더에서 저장한 정적 파일들(이미지, 폰트 파일 등)을 제대로 불러오지 못한다.

• 한편, 또 하나 문제되는 점이 스토리북은 NextJS와 별개의 webpack 과 babel 설정을 기반으로 실행된다. 이 때문에 정적파일을 제대로 불러오기 위해선 별도의 설정들이 내부적으로 필요하다.

해결 방법

상황

• 폰트 파일들은 <root>/public/fonts 에 존재

1. webpack 설정

.storybook 폴더 내부에 webpack.config.js 를 생성하고 아래와 같이 작성한다.

const path = require('path');

module.exports = async ({ config }) => {
	// 1. style 로드 관련 설정
  config.module.rules.push({
    test: /\.(sass|scss)$/,
    use: ['resolve-url-loader'],
    include: path.resolve(__dirname, '../'),
  });
	// 2. 정적파일 로드 관련
  config.module.rules.push({
    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
    ],
    include: path.resolve(__dirname + '../'),
  });
  return config;
};

• style 로드 부분이 필요한 이유는 향후 폰트를 불러오는 부분이 css 형식으로 작성되기 때문이다.
• 그 아래는 폰트 정적 파일들을 불러오기 위해 필요한 설정이다.

  • 참고로 아래 참고문헌들에서는 웹팩설정 일부가 아래처럼 되어있다.

    use: [
        {
            loader: 'file-loader',
            query: {
              name: '[name].[ext]'
            }
        } 
    ],

    위와 같이 use 속성 안에 query 속성을 사용하여 파일이름을 표시하는데 이렇게 하면 에러가 발생한다. 이는 webpack 버전이 바뀌면서 규칙이 일부 수정이 된듯하다. 따라서 아래와 같이 수정해야 에러가 나지 않는다.

    use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
            },
          },
        ],

2. head HTML로 css 코드 작성하기

.storybook 폴더 안에 preview-head.html 을 생성하여 아래와 같이 코드를 작성한다.

<style type="text/css">
  @font-face {
    font-family: 'NanumSquareNeo';
    src: url('/fonts/NanumSquareNeo-Light.woff2') format('woff2');
    font-weight: 100;
  }
  @font-face {
    font-family: 'NanumSquareNeo';
    src: url('/fonts/NanumSquareNeo-Regular.woff2') format('woff2');
    font-weight: 300;
  }
  @font-face {
    font-family: 'NanumSquareNeo';
    src: url('/fonts/NanumSquareNeo-Bold.woff2') format('woff2');
    font-weight: 500;
  }
  @font-face {
    font-family: 'NanumSquareNeo';
    src: url('/fonts/NanumSquareNeo-ExtraBold.woff2') format('woff2');
    font-weight: 700;
  }
  @font-face {
    font-family: 'NanumSquareNeo';
    src: url('/fonts/NanumSquareNeo-Heavy.woff2') format('woff2');
    font-weight: 900;
  }
</style>

3. package.json 수정 하기

storybook 실행 관련 스크립트를 아래처럼 수정하는 것이 필요하다.

"scripts": {
	  ...
    "storybook": "start-storybook -p 6006 -c .storybook watch-css -s ./public",
		...
 },

참고로 나의 프로젝트는 폰트 파일들이 /public/fonts 에 있으므로 watch-css의 경로를 ./public 으로 향하도록 했다. (font-face에서 이미 /fonts/* 경로를 명시했으므로)

참고자료 1

참고자료 2