웹폰트는 웹 사이트에서 사용되는 글꼴 파일입니다. 웹폰트를 사용하면 웹페이지에서 일관된 디자인과 스타일을 유지할 수 있습니다. Grunt는 자바스크립트 빌드 도구로, 웹폰트 파일을 처리하고 최적화하는 데 도움이 됩니다. 아래에서는 Grunt를 사용하여 웹폰트 파일을 처리하는 방법을 알아보도록 하겠습니다.

1. Grunt 설치하기 Grunt를 사용하기 위해 먼저 Node.js를 설치해야 합니다. Node.js가 설치되어 있다면, 명령 프롬프트나 터미널에서 다음 명령어를 실행하여 Grunt를 전역으로 설치합니다:

npm install -g grunt-cli

1. 프로젝트에 Grunt 관련 패키지 설치하기 프로젝트 디렉토리로 이동한 후에는, 다음 명령어를 실행하여 프로젝트에 필요한 Grunt 관련 패키지를 설치합니다:

npm install grunt --save-dev

1. Gruntfile 작성하기 프로젝트의 루트 디렉토리에 Gruntfile.js라는 이름의 파일을 생성합니다. 이 파일은 Grunt 작업을 설정하는 역할을 합니다. 아래의 코드를 복사하여 Gruntfile.js에 붙여넣기합니다:

module.exports = function (grunt) {
    grunt.initConfig({
        webfont: {
            icons: {
                src: 'path/to/source/fonts/*.svg',
                dest: 'path/to/destination',
                destCss: 'path/to/destination/style.css',
                options: {
                    syntax: 'bem',
                    types: 'woff2,woff',
                    stylesheets: ['css'],
                    templateOptions: {
                        baseClass: 'icon',
                        classPrefix: 'icon-'
                    }
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-webfont');
    grunt.registerTask('default', ['webfont']);
};

• src: 웹폰트로 변환할 SVG 파일의 경로를 지정합니다.
• dest: 웹폰트 파일을 저장할 경로를 지정합니다.
• destCss: 생성된 CSS 파일이 저장될 경로를 지정합니다.
• options: 웹폰트 변환 설정을 정의합니다. 예를 들어, types는 생성할 웹폰트 파일의 형식을 지정하고, stylesheets는 생성할 CSS 파일 형식을 지정합니다.

1. Grunt 실행하기 터미널에서 프로젝트 루트 디렉토리로 이동한 후에는 다음 명령어를 실행하여 Grunt 작업을 실행합니다:

grunt

Grunt는 Gruntfile.js에 설정된대로 웹폰트 파일을 변환하고 최적화하며, CSS 파일을 생성합니다.

여기까지 세 가지 단계를 따라하면 Grunt를 사용하여 웹폰트 파일을 처리할 수 있습니다. Grunt를 통해 웹폰트 파일을 처리하면 웹 사이트의 성능을 향상시키고, 효율적으로 디자인과 스타일을 관리할 수 있습니다.

참고자료:

• Grunt 공식 사이트
• Grunt-webfont