고정폭 글꼴이란?

고정폭 글꼴이란?

고정폭 글꼴이란 말 그대로 글자의 가로 길이가 일정한 글꼴을 뜻한다. 모노스페이스(mono-space) 글꼴이라고도 부른다. 구글 폰트(Google Fonts)에서 필터링으로 모노 스페이스 글꼴만 검색할 수도 있다. 필터 기능의 Classification 항목을 들여다보면 'Monospace' 버튼이 바로 보일 것이다.

 

고정폭 글꼴은 결과값을 콘솔에서 출력하는 프로그램을 실행시킬 때 출력 결과의 가독성을 높이는데 많은 도움을 준다. ansi-code와 고정폭 글꼴을 함께 사용하면 눈이 아주 편안한 포멧팅이 가능할 것이다.

 

VS Code 에서 터미널 글꼴 설정

그럼 이제 개발자들이 많이들 사용하는 VS Code IDE에서 고정폭 글꼴을 적용해보자. VS Code를 실행한 후 아래 경로로 들어가면 현재 적용되어있는 글꼴이 무엇인 지 확인할 수 있고, 변경 또한 가능하다.

File > Preferences > settings > 좌측 메뉴에서 'Text Editor' > Font > Editor : Font Family

 

 

나의 경우 Consolas, Curier New 순서로 글꼴이 적용되며, 해당 두 글꼴 모두 없는 경우는 monospace로 지정된 시스템 기본 글꼴이 적용되도록 세팅되어 있다. Courier New 글꼴만 작은 따옴표 안에 들어가있는 이유는, Courier New 이름에 공백 문자가 포함되어있기 때문이다. Font Family를 설정할 때 공백 문자를 포함한 폰트명은 작은 따옴표로 감싸준다. 

 

이참에 Consolas 폰트에 대해서도 검색을 해봤는데, 개발자들이 많이 사용하는 고정폭 폰트라고 한다. VS Code는 처음 설치했을 때 부터 위의 폰트 설정으로 기본 세팅 되어있다. 

 

알파벳과 한글의 넓이 차이 (반각 vs 전각)

그렇다면 글자 폭 이슈로 VS Code 폰트를 변경해줄 이유는 굳이 없지 않을까 싶지만, 이 기본 폰트를 쭉 사용하다보니 조금 거슬리는 문제가 발생했다.

 

 

위 출력 결과를 보면 알겠지만, 한글 폭이 일정하지 않은 문제였다. 한글 문자가 포함된 문자열을 콘솔창 가운데 정렬 시키려다가 영 계산이 안맞아 고개를 갸우뚱 했다. 영문과 특수문자는 표현에 1byte만 있으면 되는 반면 한글은 2byte를 차지하기 때문인 지, 아니면 디자인 상의 문제인 지, 어떤 폰트든 간에 한글은 무조건 영어 문자 넓이의 2배를 차지한다고 한다. 여기서 알파벳처럼 직사각형 형태의 공간을 차지하는 넓이의 문자를 반각, 한글처럼 자음과 모음을 함께 써야 해 많은 영역을 차지해야 해서 정사각형 형태의 공간을 차지하는 넓이의 문자를 전각이라고 부르는데, 실제로 위 결과를 자세히 살펴보면 영문자 2개 가량의 넓이가 한글 한 문자의 넓이와 완전히 비슷하다.

 

결국 어쩔 수 없는 소리라는 뜻이지만, 역시 좀 아쉬워 다른 해결 방법이 없나 구글링을 더 해봤다. 결론부터 말하자면, 아스키 코드의 반각 문자 알파벳을 유니 코드의 전각 문자 알파벳으로 변환하는 방법이 있다고 한다.

 

String.fromCharCode() 함수 사용하여 아스키코드 영문자를 유니 코드 영문자로 변경하기

javascript에서는 아스키 코드 문자를 유니 코드 문자로 변환할 수 있는 함수를 제공하고 있다. String 클래스의 fromCharCode() 함수인데, 매개변수로 정수값을 넘기면 해당 정수값에 매칭되는 문자열을 생성해 반환한다고 한다.

 

실제로 사용해보자. 유니 코드의 전각 문자 영역은 0xFF00 부터 시작한다고 하며, 0x20 은 아스키 코드에서 공백에 해당하는 코드다. 아래의 유니코드 표를 보면 알 수 있듯이, 아스키 코드와 유니코드의 문자 순서가 똑같이 이어진다. 따라서 ASCII 문자 코드에 ' 0xFF00 - 0x20' 값을 더해주면 전각 영역의 문자로 변환할 수 있다.

유니코드 FF00 ~ FFEF

 

 

처음 출력했던 결과와 달리 알파벳이 한글과 같은 간격으로 출력되고 있다. 하지만 이 또한 출력이 복잡해질 경우에는 참 번거로운 방법이 아닐 수 없을 듯 하다.

 

 

[참고 자료] 

Consolas 폰트 관련 :  https://dlxdlx.tistory.com/3

개발용 폰트와 Consolas(콘솔라스) 특징, 장단점, 한글폰트 연동하기 등

 

유니코드 표 : https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%8B%88%EC%BD%94%EB%93%9C_F000~FFFF

유니코드 F000~FFFF - 위키백과, 우리 모두의 백과사전