자주 발생하는 CSV 다운로드 한글 깨짐 현상 해결 방법

웹에서 CSV 파일을 생성하여 다운로드할 때 한글이 깨지는 문제는 흔히 발생하는 현상입니다.

 

"?앺솢怨듭옉???ㅻ궡嫄댁“ ?명긽?몄젣 ?≪껜?몄젣 ?쇰컲 ?쒕읆 寃몄슜 3L 2媛??명긽?몄젣"

 

사용자는 다운로드 받은 파일의 내용이 깨져 보인다며 버그나 오류라고 지적하지만,

메모장에서 열어보면 정상적으로 표시되는 경우가 많습니다.

이는 CSV 파일의 인코딩 설정과 관련된 문제이며,

간단한 코드 수정으로 해결할 수 있습니다.

본 글에서는 이 문제의 원인과 해결 방법을 자세히 설명합니다.

 

문제 발생 상황:

웹 애플리케이션에서 JavaScript를 사용하여 CSV 데이터를 생성하고,

Blob 객체와 URL.createObjectURL을 이용하여 다운로드 기능을 구현하는 경우,

다운로드 받은 CSV 파일을 엑셀이나 숫자와 같은 스프레드시트 프로그램으로 열었을 때

한글이 깨져 보이는 현상이 발생할 수 있습니다.

 

 

 

하지만 메모장과 같은 일반적인 텍스트 편집기로 열면 정상적으로 표시됩니다.

반응형

문제의 원인:

이 문제는 CSV 파일의 인코딩 설정과 관련이 있습니다.

일반적으로 엑셀이나 스프레드시트 프로그램은 UTF-8 인코딩을 지원하지만,

BOM(Byte Order Mark)이 없는 UTF-8 파일을 제대로 인식하지 못하는 경우가 있습니다.

BOM은 파일의 시작 부분에 추가되는 특수 문자로, 파일의 인코딩 방식을 명시하는 역할을 합니다.

 

해결 방법:

문제를 해결하는 가장 간단한 방법은 CSV 문자열의 앞에 BOM 문자를 추가하는 것입니다.

BOM 문자는 Unicode 코드 포인트 \ufeff로 표현됩니다.

Blob 객체를 생성할 때 CSV 문자열 앞에 \ufeff를 추가하면 엑셀과 같은 스프레드시트 프로그램에서도

한글이 정상적으로 표시됩니다.

기존 코드:

const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
const csvUrl = window.URL.createObjectURL(blob);

수정된 코드:

 

const blob = new Blob(["\ufeff" + csvContent], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);

 

단순히 csvString 앞에 "\ufeff"를 추가하는 것만으로 한글 깨짐 현상을 해결할 수 있습니다.

이렇게 수정된 코드를 사용하면 생성되는 CSV 파일은 BOM이 포함된 UTF-8 인코딩으로 생성되어

엑셀 등에서 정상적으로 표시됩니다.

다운로드 후 파일을 메모장으로 열어볼 필요가 없어졌습니다.

 

결론:

CSV 파일 다운로드 시 한글 깨짐 현상은 BOM을 추가하는 간단한 코드 수정으로 해결할 수 있습니다.

이 방법을 통해 사용자 경험을 향상시키고 불필요한 오류 보고를 줄일 수 있습니다.

앞으로 CSV 파일을 생성하여 다운로드하는 기능을 구현할 때는 이 방법을 적용하여

한글 깨짐 현상을 미연에 방지하는 것이 좋습니다