한글 코드 화면 폴백 설계: 합자·기호·받침이 무너지지 않게

라틴 코딩 폰트 뒤에 한글 폰트를 하나 붙였다고 코드 화면이 완성되지는 않는다. 두 폰트의 칸 폭과 기준선이 다르면 주석에서 열이 흔들리고, 기호마다 다른 폰트가 적용될 수 있다. D2Coding을 한글 기준으로 삼아 브라우저와 편집기, 터미널에서 같은 표본을 확인해 보자.

01 | name="김하늘" | 상태=완료 | total=128900

코드 화면의 문자 역할을 정한다

라틴 코드와 숫자는 JetBrains Mono, 한글 주석은 D2Coding처럼 나눌지 D2Coding 한 벌로 전체를 덮을지 선택한다. 혼용은 각 폰트의 장점을 살릴 수 있지만 글자별 폴백을 더 많이 검증해야 한다. 팀 설정과 공개 문서 사이트가 같은 목표인지도 확인한다.

표본에는 영문 식별자, 한글 변수명, 주석, 경로, 박스 기호, 이모지를 넣는다. 서비스가 허용하지 않는 문자까지 무작정 늘리기보다 실제 저장소와 로그에서 자주 보는 문자열을 고른다.

스택 순서와 실제 렌더링을 확인한다

브라우저는 각 글자를 지원하는 첫 폰트를 고른다. 폰트 이름이 스택에 있다는 사실만으로 그 글자가 해당 폰트로 보인다고 단정하지 않는다. 개발자 도구의 렌더링 폰트와 계산 스타일을 확인하고, 터미널은 자체 폴백 설정을 별도로 읽는다.

D2Coding 공식 저장소에서 받은 정확한 파일과 버전을 기록한다. 합자 포함 빌드와 일반 빌드를 섞으면 같은 family 이름 아래 결과가 달라질 수 있다.

한글폭:가나다 / Latin:abcde / 기호:│└→!=

칸 폭과 정렬은 실제 표로 본다

한글 한 글자와 영문 두 글자가 같은 시각 폭을 차지하는지 여러 줄로 확인한다. 줄 번호, 들여쓰기 가이드, 표 형태 로그를 함께 켜면 흔들림이 잘 보인다. CSS의 monospace 지정만 보고 정렬을 보장했다고 판단하지 않는다.

브라우저 확대와 운영체제 글꼴 렌더링이 달라져도 열이 유지되는지 본다. 문서 사이트에서는 코드 블록의 자간이나 문법 강조 span이 폭을 바꾸지 않는지도 살핀다.

합자와 특수기호를 따로 검사한다

!=, =>, <= 같은 조합을 합자 on/off로 비교한다. 팀이 원문 기호를 빠르게 읽어야 한다면 합자를 끄는 선택도 자연스럽다. 교육 자료와 오류 로그는 개발 편집기와 다른 정책을 쓸 수 있다.

화살표, 통화 기호, 박스 드로잉 문자가 어떤 폰트에서 오는지 확인한다. 한 글자만 높이가 다르면 전체 폴백을 바꾸기 전에 해당 문자와 사용 환경을 좁혀 원인을 찾는다.

┌ 결과 ─────┐ 성공 12건 실패 0건 duration=1.42s

브라우저·편집기·터미널을 나란히 본다

세 환경에 같은 텍스트 파일을 열고 글자 크기와 줄 간격을 최대한 맞춘다. 스크린샷에는 운영체제, 앱 버전, 폰트 파일을 함께 적어야 결과를 다시 만들 수 있다. 한 환경의 성공을 다른 환경의 보장으로 읽지 않는다.

D2Coding 상세에서 운영 연결 대상을 정확히 확인한 뒤 폰트 시뮬레이터에 코드 표본을 넣자. 발행 단계에서는 이 폰트가 시드 59종 밖의 운영 추가분이므로 familyName과 공개 상태를 다시 일치시켜야 한다.