우커머스 PDF 인보이스에서 한글 등 비영문 글자가 깨지는 문제가 발생하는 경우

Last Updated: 2024년 08월 01일 댓글

워드프레스 우커머스 쇼핑몰에서 인보이스를 생성하고 싶은 경우 무료 플러그인인 PDF Invoices & Packing Slips for WooCommerce를 사용할 수 있습니다. 고급 기능을 원하는 경우에는 YITH의 WooCommerce PDF Invoices & Packing Slips 플러그인이나 엔바토 마켓의 PDF 송장 플러그인을 사용할 수 있습니다.

PDF Invoices & Packing Slips for WooCommerce 플러그인을 활성화하면 주문에 대한 인보이스 생성/발송이 가능하지만, 한국어, 일본어, 중국어 등 비영문 글자가 포함될 경우 문자가 깨지는 현상이 발생합니다. 이는 한글 폰트 등 해당 언어의 폰트가 지정되지 않았기 때문입니다.

우커머스 PDF 인보이스에서 한글 등 비영문 글자가 깨지는 문제가 발생하는 경우

PDF 송장 플러그인을 설치하여 활성화하면 인보이스 내의 한글이 깨지는 현상이 발생할 것입니다.

워드프레스 우커머스 PDF 송장 플러그인 한글 깨짐 현상

이 경우 다음과 같은 과정으로 한글 폰트를 설치하여 지정할 수 있습니다.

  1. PDF 인보이스를 위한 커스텀 템플릿을 만듭니다.
  2. fonts 폴더에 한국어, 일본어, 중국어 등 해당 언어의 폰트 파일을 업로드합니다.
  3. 테마 함수 파일에 폰트를 로드하는 코드를 추가합니다.
  4. 템플릿 내의 스타일시트 파일에서 폰트 스타일을 적절히 변경하거나 추가합니다.

사용자 정의 PDF 송장용 템플릿 만들기

우커머스 » PDF Invoices » General 페이지에 템플릿을 만드는 방법에 대하여 언급되어 있습니다.

Want to use your own template? Copy all the files from wp-content/plugins/woocommerce-pdf-invoices-packing-slips/templates/Simple to your (child) theme in wp-content/themes/flatsome-child/woocommerce/pdf/yourtemplate to customize them

플러그인 폴더 아래에 있는 기본 템플릿(Simple 템플릿)을 활성화된 테마의 폴더 아래로 복사하여 사용자 정의 템플릿을 만들 수 있습니다. 저는 테스트로 Flatsome 테마의 차일드 테마를 이용하고 있기 때문에 wp-content/themes/flatsome-child/woocommerce/pdf 디렉터리 아래로 기본 템플릿을 업로드하도록 안내하고 있습니다.

다음과 같은 과정으로 커스텀 템플릿을 만들 수 있습니다.

  1. FTP/SFTP에 접속하여 wp-content/plugins/woocommerce-pdf-invoices-packing-slips/templates/Simple 폴더를 PC로 다운로드합니다.
  2. 다운로드한 폴더의 이름을 변경합니다(예: NewTemplate).
  3. 템플릿 폴더를 wp-content/themes/flatsome-child/woocommerce/pdf 디렉터리로 업로드합니다.
  4. 우커머스 » PDF Invoices » General 페이지에서 템플릿을 변경합니다.
  5. 템플릿 디렉터리에서 템플릿 파일들을 커스터마이징할 수 있습니다.

FTP/SFTP 접속 방법에 대하여 다음 글을 참고해보시기 바랍니다.

FTP 클라이언트를 사용하여 서버에 접속하여 템플릿 폴더를 업로드합니다.

PDF 인보이스 템플릿 만들기

워드프레스 알림판에서 PDF 송장 템플릿을 변경하도록 합니다.

PDF 송장 템플릿 지정하기

한글 폰트 등 해당 언어의 폰트 파일 업로드

PDF 송장에 적용할 폰트 파일을 다운로드하도록 합니다. 한국어의 경우 나눔고딕 폰트를 사용할 수 있습니다. 나눔고딕 글꼴은 네이버에서 제공하고 있으며 네이버 사이트에서 다운로드가 가능합니다.

폰트 파일을 다운로드하면 나눔고딕과 나눔명조, 나눔손글씨 등 3종의 폰트 파일이 있습니다. 모두 업로드해도 되고, 원하는 폰트만 업로드해도 됩니다. 중국어(번체) 폰트가 필요한 경우에는 Noto Sans TC 글꼴을 다운로드할 수 있습니다.

글꼴 파일들은 wp-content/themes/flatsome-child/woocommerce/pdf/Template_Name/fonts 폴더로 업로드합니다.

한글 글꼴 업로드

폰트를 로드하는 코드 추가하기

이제 가장 중요한 단계가 남았습니다. 바로 업로드한 폰트를 템플릿에서 인식할 수 있도록 차일드 테마의 함수 파일에 코드를 추가하는 것입니다. (차일드 테마가 없는 경우 차일드 테마를 만들어서 작업해야 추후 테마 업데이트 시 추가한 코드가 사라지지 않고 유지됩니다.)

테마 함수 파일에 다음 코드를 추가합니다.

// PDF 인보이스 폰트 지정
// Specifying fonts to apply to PDF invoices in a WooCommerce shop

add_action('wpo_wcpdf_custom_styles', function($type, $pdf) {
    $template_path = $pdf->get_template_path();
    $css = <<<CSS
@font-face {
    font-family: 'NanumGothic';
    font-style: normal;
    font-weight: normal;
    src: url($template_path/fonts/NanumGothic.ttf) format('truetype');
}
@font-face {
    font-family: 'NanumGothic';
    font-style: normal;
    font-weight: bold;
    src: url($template_path/fonts/NanumGothicBold.ttf) format('truetype');
}
@font-face {
    font-family: 'NanumGothic';
    font-style: normal;
    font-weight: 800;
    src: url($template_path/fonts/NanumGothicExtraBold.ttf) format('truetype');
}
@font-face {
    font-family: 'NanumGothic';
    font-style: normal;
    font-weight: light;
    src: url($template_path/fonts/NanumGothicLight.ttf) format('truetype');
}

CSS;
    echo $css;
}, 10, 2);

템플릿의 스타일시트 파일에 폰트 스타일 추가하기

마지막으로 템플릿의 스타일시트 파일(style.css)에 폰트 스타일을 수정하거나 추가합니다. 템프릿 폴더 아래에 있는 기본 스타일시트 파일을 열어보면 다음과 같이 body 요소에 Open Sans 폰트 패밀리가 적용되어 있습니다.

body {
	background: #fff;
	color: #000;
	margin: 0cm;
	font-family: 'Open Sans', sans-serif; 
...
}

위의 코드에서 font-family 부분을 다음과 같이 변경합니다.

font-family: 'NanumGothic', 'serif';

이제 PDF 인보이스에서 한글 등 비영문 글자가 깨지지 않고 제대로 표시될 것입니다.

우커머스 PDF 인보이스에서 한글 등 비영문 글자가 깨지는 문제가 발생하는 경우 해결 방법

마치며

이상으로 우커머스용 PDF 인보이스 플러그인을 사용하여 송장을 생성하면 한글 등 비영문 글자가 깨지는 문제가 발생할 경우 폰트를 지정하는 방법에 대하여 살펴보았습니다.

만약 다국어가 사용되는 경우에는 여러 언어의 폰트를 업로드하고 CSS를 사용하여 PDF 인보이스 내의 글꼴 스타일을 지정해야 합니다. 이를 위해서는 기본적인 CSS를 이해하면 도움이 됩니다.

PDF 인보이스의 푸터에 약관, 정책 등을 입력할 수 있습니다. 문구를 입력할 때 HTML 태그 입력이 가능합니다.

다국어로 푸터에 반품 정책 등을 입력하는 경우에 HTML/CSS를 활용하여 글꼴을 정교하게 지정할 수 있을 것입니다.

참고


댓글 남기기

Leave a Comment