마크다운 한국어 굵게 하기(Bold) 파싱 이슈 해결기

문제의 발견

블로그에 글을 쓰다 보면 특정 단어를 강조하기 위해 굵게(**) 처리하는 경우가 많습니다. 그런데 한국어로 글을 쓰다 보면 다음과 같은 상황에서 마크다운이 제대로 렌더링되지 않는 현상을 발견했습니다.

이것은 **"상대좌표"** 입니다.

위와 같이 작성하면 실제로는 다음과 같이 출력됩니다.

이것은 **"상대좌표"** 입니다.

분명히 굵게 표시되어야 할 부분이 ** 기호와 함께 그대로 노출되는 것이죠.

왜 이런 일이 발생할까?

이 문제는 마크다운의 표준 규격인 CommonMark의 ‘Flanking Delimiter’ 규칙 때문입니다. 영문 기반의 마크다운 엔진들은 주로 공백을 기준으로 강조 구문의 시작과 끝을 판별합니다.

하지만 한국어는 조사(은/는/이/가)가 단어 뒤에 바로 붙는 특성이 있습니다. 특히 굵게 표시(**) 바로 옆에 따옴표(", ')와 같은 문장 부호가 있고, 그 반대편에 조사가 공백 없이 붙어있으면 엔진은 이를 강조 처리의 경계로 인식하지 못하고 일반 텍스트로 처리해 버립니다.

해결 방법: 지능적 전처리

이 문제를 해결하기 위해 사용자가 매번 공백을 수동으로 넣는 것은 매우 번거롭고 직관적이지 않습니다. 따라서 렌더링 직전에 텍스트를 분석하여 필요한 위치에만 공백을 살짝 넣어주는 전처리 로직을 도입했습니다.

정규표현식 설계

단순히 모든 **에 공백을 넣으면 원치 않는 위치에도 공백이 생길 수 있습니다. 따라서 정확히 한국어와 문장부호가 교차하는 지점만 정밀하게 타겟팅했습니다.

javascript// 1. 한국어 조사 뒤에 [굵게 기호 + 문장부호]가 오는 경우
// 예: 조사 **" -> 조사 **"
content.replace(/([가-힣])\*\*(?=[\p{P}])/gu, '$1 **')

// 2. [문장부호 + 굵게 기호] 뒤에 한국어 조사가 오는 경우
// 예: "단어**입니다 -> "단어** 입니다
content.replace(/([\p{P}])\*\*(?=[가-힣])/gu, '$1** ')