[javascript] MAC OS 파일 첨부시 자소 분리 현상 (No glyph for U+0000 in font 'fontName' )

MAC OS의 파일을 업로드하며 해당 파일의 파일명을 그대로 가져와 PDF에 목록화 시키는 기능 개발간 오류 (No glyph for U+1103 (ᄃ) in font fontname) 가 발생하여 확인해보니 한글이 자소 분리현상(한글 → ㅎ ㅏ ㄴ ㄱ ㅡ ㄹ)이 발생하여 해당 이슈를 확인해보았습니다.

​

오류내용&발생 원인

원인 :

Mac os에서의 NFD 정규화방식을 통하여 저장한 데이터를 추가적인 정규화 과정없이 바로 저장하게 되는경우 해당 현상이 발생하는 것으로 보여집니다.

​

오류내용 :

간단히 오류발생 내용을 확인해보면 아래와 같이 "ㄷ"이란 글자에 대한 에러가 발생하고있는데

해당 ㄷ이란 글자의 출처를 확인해보면 아래 사진과 같이 "뒹구르르.png"파일의 첫 글자로 확인이 가능해집니다.

여기서 간단히 해당 글자를 확인하던 중 발견한 것이 아래와 같이 "뒹" 이란 글자에서 3 글자로 나뉘어져 이동이 가능한 부분이였습니다.

(GIF 이미지)

이에 자소분리로 인한 오류로 인지하고 찾아보니 아래와같이 MAC os의 정규화 방식으로 인하여 발생하는 이슈였으며, 정규화 방식을 NFC로 바꿔주는 방법으로 해결하였습니다.

​

NFD	MAC os의 경우에는 정규화 방식을 NFD 방식 (모든 음절을 분해하여 저장하는 방식) 한글 → ㅎ + ㅏ + ㄴ + ㄱ + ㅡ + ㄹ 해당 정규화 과정을 통해 저장된 'ㅎ'이 일반적으로 사용하는(더존폰트에 존재하는) 'ㅎ'글자와는 다른 글자로 적용되어 위 에러가 발생한것으로 보여집니다.
NFC	Windows의 경우에는 NFC 방식 (모든 음절을 분해하지만 다시 결합시켜 저장하는 방식) 한글 → ㅎ + ㅏ + ㄴ + ㄱ + ㅡ + ㄹ → 한글 보편적인 저장 방식으로 일반적인 html에서는 해당 방식이 적용되어있습니다.​

​

해결방법(JS 기준)

• 저장하려는 String 변수에 NFD로 저장된 파일을 NFC 정규화 방식으로 변경하여 저장해주면 일반적인 한글 폰트로 정상 저장되는 것이 확인되었습니다.
• 추가적으로 모든 파일 업로드시마다 해당 함수를 적용하는게 좋은지는 확인이 필요할 것 같습니다.

const after_fileName = before_fileName.normalize('NFC')

(GIF 이미지)

​

​

​

​

참고자료 :

• https://egg-programmer.tistory.com/293 << 추천
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/normalize#%ED%95%9C%EA%B8%80%EC%97%90_normalize_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0