[한글 특수기호] 사람마다 다른 한글 특수기호 깨짐 현상

웹에서 한글 특수기호가 깨지는 현상 해결하기: '㈝' 문자를 중심으로

웹 개발을 하다 보면 ㈝, ㈜, ㉾ 같은 한글 특수기호가 깨져서 표시되는 현상이 발생한다. 오늘은 ㈝ (오전) 문자를 중심으로 이 문제를 해결하는 방법을 알아보자.

목차

1. 특수문자 이해하기
2. 문제 상황
3. 해결 방안
4. 구현 예시
5. 결론

특수문자 이해하기

문제의 특수문자 정보

• 유니코드 코드 포인트: U+321D
• 이름: Parenthesized Korean Character Ojeon
• 유니코드 버전: 4.0 (2003년 4월)
• 블록: Enclosed CJK Letters and Months (U+3200 - U+32FF)
• 스크립트: Hangul (한글)
• 카테고리: Other Symbol (So)

문제 상황

아래 글을 읽다가 특수문자가 깨진 것을 발견했다. PC마다 정상 출력되거나 깨지는 등 다양한 케이스가 존재했다.

관련 글

처음엔 Mac과 Windows의 차이로 생각했으나, Mac도 버전에 따라 정상 출력/깨짐이 다르게 나타났다.

한글 특수기호가 깨지는 주요 원인

1. 폰트의 특수기호 미지원

• 용량 최적화
  • 웹폰트는 용량이 클수록 로딩 시간 증가
  • 자주 쓰는 글자만 포함해 용량 축소
  • 특수기호는 사용 빈도가 낮아 제외
• 폰트 제작 범위
  • 기본 한글/영문 위주 제작
  • 특수문자는 추가 비용/시간 필요
  • 일부 폰트는 기본 문자셋만 지원

2. 시스템/브라우저 렌더링 차이

• OS별 렌더링 엔진
  • Windows: DirectWrite (선명하고 날카로운 표현)
  • macOS: Core Text (부드러운 곡선 처리)
  • Linux: FreeType (설정별 다양한 렌더링)
• 브라우저별 처리
  • Chrome: Skia 엔진
  • Firefox: Cairo 엔진
  • Safari: Core Graphics

3. 웹폰트 로딩 타이밍

• 폰트 다운로드 전에 텍스트 표시 시도
• 폰트 로딩 전 깨진 문자로 표시

해결 방안

1. 특수문자용 폰트 지정

@font-face {
    font-family: 'SpecialCharFont';
    src: url('font.woff') format('woff');
    unicode-range: U+3200-32FF;
}

.text-container {
    font-family: 'SpecialCharFont', 'Apple SD Gothic Neo', 
                'Malgun Gothic', sans-serif;
}

2. 폴백 처리

<span class="special-char" data-fallback="(오전)">㈝</span>

구현 예시

예시코드

1. 폰트 지원 확인

function getFallbackChar(fontFamily) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    ctx.font = `16px ${fontFamily}`;

    const unsupportedUnicode = String.fromCodePoint(0x10FFFF);
    const fallbackWidth = ctx.measureText(unsupportedUnicode).width;

    const possibleFallbacks = ['□', '�', '?', '▯'];
    const actualFallback = possibleFallbacks.find(char =>
        ctx.measureText(char).width === fallbackWidth
    );

    return {
        fallbackChar: actualFallback || unsupportedUnicode,
        fallbackWidth: fallbackWidth
    };
}

2. 폰트 로딩 처리

document.fonts.ready.then(() => {
    const container = document.querySelector('.text-container');
    const fontFamily = getComputedStyle(container).fontFamily;
    const fonts = fontFamily.split(',').map(font => font.trim());

    document.querySelectorAll('.special-char').forEach(char => {
        const isSupported = fonts.some(font => 
            checkFontSupport(char.textContent, font)
        );

        if (!isSupported) {
            char.textContent = char.dataset.fallback;
        }
    });
});

결론

특수문자 깨짐 현상은 다음과 같이 해결할 수 있다:

1. 유니코드 범위 파악과 적절한 폰트 선택
2. 폰트 지원 여부 확인 로직 구현
3. 안정적인 폴백 처리

참고 자료

• Unicode Enclosed CJK Letters and Months
• Unicode Character 'U+321D'