보이지 않는 문자 u200B

단순색 · 2024년 10월 14일

Html

개발자들이 코드나 텍스트를 복사할 때, 의도치 않게 `\u200B` 같은 `보이지 않는 문자(Zero-Width Space, ZWSP)`가 포함될 수 있습니다. 
이 문자는 화면에는 보이지 않지만 코드 상에서 오류를 유발할 수 있습니다.

## \u200B란 무엇인가?

\u200B는 **Zero-Width Space(제로 폭 스페이스)**라는 특수 문자로, 텍스트에서 실제로 눈에 보이지 않지만 존재하는 문자입니다. 웹사이트나 문서에서 줄바꿈을 조정하거나 가독성을 높이기 위해 사용되곤 합니다.

눈에 보이지 않지만, 코드 안에 존재하여 문제를 발생시킬 수 있습니다. 특히 문자열 비교, 변수명, 혹은 구문 분석에서 예상치 못한 오류를 유발할 수 있습니다.

## 조심해야 하는 이유

코드에 \u200B 같은 보이지 않는 문자가 포함되면 변수명이 다르게 인식되거나 문자열 비교가 제대로 이루어지지 않는 등의 문제가 생길 수 있습니다.

### 디버깅이 어렵다

보이지 않는 문자는 눈에 보이지 않기 때문에 문제의 원인을 파악하는 데 시간이 오래 걸릴 수 있습니다. 단순한 문법 오류로 보일 수 있으나, 실제로는 보이지 않는 문자가 문제의 원인일 수 있습니다.

### 버전 관리 문제

Git과 같은 버전 관리 시스템에서도 이런 문자가 포함되면 문제 발생 시 위치를 추적하기 어렵습니다. 코드를 복사하거나 병합하는 과정에서 발생한 보이지 않는 문자는 버전 이력을 복잡하게 만들 수 있습니다.

## 보이지 않는 문자가 어떻게 생길까?

### 웹 페이지에서 복사할 때

블로그, 기술 문서, Q&A 사이트 등에서 코드를 복사할 때 눈에 보이지 않는 포맷팅 문자가 함께 복사될 수 있습니다.

### IDE 또는 텍스트 편집기 버그

일부 IDE나 텍스트 편집기가 자동으로 포맷팅하는 과정에서 의도치 않게 이러한 문자가 삽입될 수 있습니다.

### 공유된 코드 스니펫

채팅 앱이나 문서에서 공유된 코드를 복사할 때도 보이지 않는 문자가 포함될 수 있습니다.

## \u200B를 식별하고 제거하는 방법

### 보이지 않는 문자를 표시하는 텍스트 편집기 사용

VS Code, IntelliJ와 같은 대부분의 현대적인 텍스트 편집기에서는 보이지 않는 문자를 시각적으로 표시할 수 있습니다.

- **VS Code**: 설정에서 "Render Whitespace" 옵션을 활성화하면 모든 공백 문자를 볼 수 있습니다.
- **IntelliJ**: "Show whitespaces" 설정을 통해 보이지 않는 문자를 확인할 수 있습니다.

### 정규 표현식 사용

보이지 않는 문자를 찾아서 제거하는 방법으로 정규 표현식을 사용할 수 있습니다. 대부분의 편집기에서 \u200B를 검색하거나, 해당 문자를 찾는 정규식을 적용하여 문제를 해결할 수 있습니다.

### 명령줄 도구 사용

grep이나 sed 같은 명령줄 도구를 사용하여 보이지 않는 문자를 검색하고 제거할 수 있습니다.

- **grep 예시**
```
grep -r $'\u200B' ./
```

- **sed 예시**
```
sed -i 's/\u200B//g' 파일이름
```

### 온라인 도구

Zero-Width Character Finder와 같은 온라인 도구를 사용해 보이지 않는 문자를 감지하고 제거할 수 있습니다. 이를 통해 코드나 텍스트 파일에서 불필요한 문자를 쉽게 찾아낼 수 있습니다.

## 보이지 않는 문자를 피하는 방법

### 복사한 코드 다시 확인하기

외부 소스에서 코드를 복사할 때는 눈에 보이지 않는 문자가 포함되지 않았는지 반드시 확인하세요. 편집기에서 공백 문자를 표시하는 기능을 활성화하거나 복사 후 정규식을 사용하여 검사하는 것이 좋습니다.

### Linting 도구 사용

린팅 도구를 사용해 프로젝트 내 보이지 않는 문자를 감지하고 경고할 수 있습니다. 일부 린터는 보이지 않는 문자를 감지하도록 설정할 수 있으니, 이를 적극 활용하세요.

### 팀 내 교육

팀원들에게 보이지 않는 문자가 코드에 발생할 수 있는 문제를 공유하고, 코드 공유 시 주의 사항을 알리는 것이 좋은 예방책입니다.

## \u200B와 U+200B 다른 점

### 유니코드 U+200B

유니코드 코드 포인트를 나타내는 표기법입니다. 여기서 U+는 유니코드 코드 포인트임을 나타내며, 200B는 해당 문자의 코드 값을 16진수로 표현한 것입니다. 이 표기법은 주로 유니코드 문자를 설명할 때 사용됩니다.

### 이스케이프 시퀀스 \u200B

프로그래밍 언어(특히 자바스크립트, 자바 등)에서 유니코드 문자를 문자열에 포함시키기 위해 사용하는 이스케이프 시퀀스입니다. \u 뒤에 16진수 값(여기서는 200B)이 따라오며, 해당 값이 유니코드 문자로 해석됩니다. 예를 들어, 자바스크립트에서 문자열에 Zero-Width Space를 포함시키려면 '\u200B'처럼 사용할 수 있습니다.

## 마무리

\u200B 같은 보이지 않는 문자에 대해 알고 있으면, 코드에서 발생하는 예기치 못한 오류를 방지하고 더 나은 코드 품질을 유지할 수 있습니다. 이러한 문자를 예방하고 제거하는 방법을 습득하면, 디버깅 시간도 단축할 수 있습니다.