[Javascript] 업로드한 한글 파일 이름이 다운로드 시 깨질 때

한글 이름으로 된 파일을 다운로드 할 때 파일 이름이 깨질 때 그 원인와 해결 방법

각종 파일 형태

파일 이름이 깨지는 이유

한글 이름의 파일이 다운로드 할 때 깨지는 이유는 한글 문자열의 유니코드 정규화 방식의 차이 때문입니다.

ex) 한글.txt ☞ ᄒ+ᅡ+ᆫ+ᄀ+ᅳ+ᆯ.txt

 

유니코드 정규화 방식

운영체제에 따라 문자열을 정규화하는 방식에 차이가 있습니다. 보통 유니코드 정규화 방식에는 두 가지가 있습니다.

• NFC (Normalization Form Canonical Composition): 이 형식은 문자열을 정규화하고, 가능한 한 단일 코드 포인트로 표현되도록 합니다. 대부분의 경우에서 이 형식을 사용하는 것이 좋습니다.
• NFD (Normalization Form Canonical Decomposition): 이 형식은 문자열을 정규화하고, 각 문자를 기본 문자와 결합 문자로 분해합니다. 이 형식은 NFC와는 달리, 모든 문자가 기본 문자로 분해되어 저장됩니다.

 

Windows는 문자열을 NFD 정규화 방식을 사용합니다.

Mac을 비롯한 많은 운영체제에서 NFC 정규화 방식을 사용합니다.

 

한글 이름 파일 깨지는 시나리오

만약 Mac에서 한글 이름으로 된 파일을 업로드 했습니다. 그리도 해당 파일을 Windows에서 다운로드 받으면?

파일 이름 문자열이 NFC로 업로드 되고 NFD로 다운로드 되면서 유니코드 정규화 방식의 차이로 파일 이름이 깨지게 되는 겁니다.

---

파일 다운로드

해결방법

해결 방법은 의외로 간단합니다.

 

1. 자바스크립트에 String 내장함수인 String.prototype.normalize()를 사용하여 유니코드 정규화 방식을 변경합니다.

let originalString = "한글";
let normalizedStringNFC = originalString.normalize("NFC"); // Mac. etc...
let normalizedStringNFD = originalString.normalize("NFD"); // Windows

console.log(normalizedStringNFC); // Mac, etc... '한글'
console.log(normalizedStringNFD); // Windows '한글'

 

String.prototype.normalize() - JavaScript | MDN

 

2. 업로드하려는 파일의 이름을 변경된 스트링으로 넣어줍니다.

const file = new File(["한글"], "한글.txt".normalize("NFD"), {
  type: "text/plain",
});

https://developer.mozilla.org/ko/docs/Web/API/File/File

File() - Web API | MDN

 

이제 다운로드 할 때 한글이 깨지지 않게 됩니다.

---

반대의 경우엔 어떻게 될까?

Windows에서 NFD로 정규화된 한글 이름 파일을 Mac에서 다운로드하면 어떻게 될까?

결론은 파일 이름이 깨지지 않습니다.

그 이유를 chatGPT에게 물어봤습니다.

맥(Mac)에서는 기본적으로 NFC(Normalization Form Canonical Composition)를 사용하는데, 이는 맥 운영체제의 텍스트 처리 시스템에 내장된 특성입니다. 따라서 맥에서는 사용자가 입력한 문자열이나 시스템에서 생성된 문자열이 NFC로 정규화되어 저장됩니다.

그래서 만약 NFD로 저장된 문자열을 맥에서 표시한다면, 맥의 텍스트 처리 시스템이 이를 필요에 따라 NFC로 자동으로 정규화하여 표시합니다. 이는 사용자가 문자열을 입력하거나 편집할 때 발생하는 것뿐만 아니라, 파일에서 문자열을 읽거나 다른 플랫폼에서 가져올 때도 적용됩니다.

따라서 맥에서 NFD로 저장된 문자열이 깨지지 않는 이유는 맥의 텍스트 처리 시스템이 자동으로 NFC로 정규화하여 표시하기 때문입니다. 이는 일반적으로 사용자에게 보다 일관된 문자열 처리를 제공하고, 혼란을 방지하기 위한 설계 선택 사항 중 하나입니다.

 

맥의 텍스트 처리 시스템이 이를 필요에 따라 NFC로 자동으로 정규화하여 표시합니다.