나에게 맞는 코딩 글꼴을 찾아봅시다

fontcoding fontfixed font

개발할 때 사용하는 글꼴이 코딩 경험에 큰 차이를 만들 수 있습니다. 좋은 글꼴은 가독성을 향상 시키고, 눈의 피로를 줄이고, 생산성을 높일 수 있습니다. 코딩에 적합한 글꼴들은 어떤 특징을 가지고 있는지 알아보고, 코딩 글꼴들을 살펴보겠습니다.

코딩 글꼴이란?

코딩 글꼴에 대한 정의는 딱히 없습니다. 대부분의 개발자들은 다음과 같은 글꼴을 선호하며, 이런 특징을 가진 글꼴들을 코딩 글꼴 또는 프로그래밍 글꼴이라 부릅니다.

중요성은 덜하나 추가적으로 고려해야 할 사항이 있습니다.

코딩 글꼴

아래에서 소개하는 코딩용 글꼴은 제가 가장 좋아하는 글꼴 중 하나입니다. 예시의 글꼴은 google fonts 에서 제공하는 것을 사용하였습니다. 모두 무료이므로 설치하여 사용해 보시길 바랍니다.

예시에서 "한글"은 모두 `나눔고딕코딩` 글꼴로 표현합니다. 또한 글꼴의 폭이 다른 경우 비율에 맞게 크기를 수정하였습니다.

나눔고딕코딩

나눔고딕코딩 은 네이버에서 발표한 나눔고딕 을 기반으로 코딩환경에 최적화한 글꼴입니다. 2016년에 발표하였으며, 공개당시 상당한 인기를 끌었습니다.

당연하겠지만, 한글과 영문의 글자폭이 같습니다. 이에 따라 한글과 영문을 혼용해서 사용할 때 줄과 열을 맞추기가 쉽습니다.

이 글에서 소개하는 글꼴들중에 세로비가 가장 크며, 영문 글꼴과 폭을 맞추기 위해서는 글꼴을 크게 설정할 필요가 있습니다. 영문 글꼴 대비 폭의 비율은 부록에 추가해 두었으니 참고하시길 바랍니다. 

/**
| 가나다라마바사아자차카타하 |
| abcdefghijklmnopqrstuvwxyz |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 01234567890                |
| !@#$%^&*(){}[]-+=          |
**/

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

Source Code Pro

Source Code Pro 는 Adobe 에서 2012년에 공개한 고정폭 글꼴입니다. 개발자들에게 꾸준하게 사랑받고 있는 글꼴입니다. 

/**
| 가나다라마바사아자차카타하 |
| abcdefghijklmnopqrstuvwxyz |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 01234567890                |
| !@#$%^&*(){}[]-+=          |
**/

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

Inconsolata

Inconsolata 는 Microsoft 에서 출시한 Consolas 에 많은 영감을 받아 만들었습니다. 저작권으로 제한이 있는 Consolas 의 대체재로 훌륭한 글꼴입니다.

글자의 폭이 `나눔고딕코딩` 과 같습니다. 별도의 설정을 하지 않고, 한글과 영문의 열을 쉽게 맞출 수 있습니다. 

/**
| 가나다라마바사아자차카타하 |
| abcdefghijklmnopqrstuvwxyz |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 01234567890                |
| !@#$%^&*(){}[]-+=          |
**/

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

IBM Plex Mono

IBM Plex Mono 는 IBM Brand & Experience 팀에서 2017년에 개발하였습니다. 

/**
| 가나다라마바사아자차카타하 |
| abcdefghijklmnopqrstuvwxyz |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 01234567890                |
| !@#$%^&*(){}[]-+=          |
**/

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

Fira Mono

Fira Mono 는 Mozilla 에서 2014년에 출시하였습니다. 지금은 개발을 중단 하였지만, Firefox OS 에서 다양한 휴대폰에서 가독성을 높이는 것을 목표로 개발하였습니다. 

/**
| 가나다라마바사아자차카타하 |
| abcdefghijklmnopqrstuvwxyz |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 01234567890                |
| !@#$%^&*(){}[]-+=          |
**/

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

Anonymous Pro

Anonymous Pro 는 비트맵 글꼴인 Anonymous 9 의 기반으로하여 2009년에 개발하였습니다. 

/**
| 가나다라마바사아자차카타하 |
| abcdefghijklmnopqrstuvwxyz |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 01234567890                |
| !@#$%^&*(){}[]-+=          |
**/

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

Kode Mono

Kode Mono 는 WEB3 커뮤니티를 위해 2023년에 출시한 글꼴입니다. 모든 글자를 네모 형태로 표현하는 특징이 있습니다. 

/**
| 가나다라마바사아자차카타하 |
| abcdefghijklmnopqrstuvwxyz |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 01234567890                |
| !@#$%^&*(){}[]-+=          |
**/

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

Noto Sans Mono

Noto Sans Mono 는 `Noto Sans` 의 고정폭 버전입니다. 구글과 어도비가 협력하여 2018년에 출시한 글꼴이며, 본고딕으로도 부릅니다. 이 블로그에서 영문은 Inter 한글은 Noto Sans 를 사용합니다. 

/**
| 가나다라마바사아자차카타하 |
| abcdefghijklmnopqrstuvwxyz |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 01234567890                |
| !@#$%^&*(){}[]-+=          |
**/

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

Roboto Mono

Roboto Mono 는 Roboto 의 고정폭 버전입니다. Roboto 는 구글의 시스템 글꼴로 상용하기 2011년에 출시 하였습니다. 

/**
| 가나다라마바사아자차카타하 |
| abcdefghijklmnopqrstuvwxyz |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 01234567890                |
| !@#$%^&*(){}[]-+=          |
**/

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

Reddit Mono

Reddit Mono 커뮤니티 사이트인 Reddit 에서 2020 년에 출시하였습니다. 

/**
| 가나다라마바사아자차카타하 |
| abcdefghijklmnopqrstuvwxyz |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 01234567890                |
| !@#$%^&*(){}[]-+=          |
**/

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

B612 Mono

B612 Mono 는 항공기의 콕핏에서 사용하기 위해 2010년에 출시한 글꼴입니다. 

/**
| 가나다라마바사아자차카타하 |
| abcdefghijklmnopqrstuvwxyz |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 01234567890                |
| !@#$%^&*(){}[]-+=          |
**/

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

마치며

코딩

올바른 글꼴을 선택하는 것은 개발자에게 매우 중요합니다. 가독성에서 상당한 차이를 만들고, 생산성을 향상 시킬 수 있습니다. 다양한 글꼴을 시험해보고 나에게 맞는 최고의 코딩 글꼴을 찾아 보시길 바랍니다.

여기서 소개한 글꼴 이외에도 수십가지의 코딩 글꼴이 있습니다. 다음 사이트들은 개인 취향에 맞는 글꼴을 찾는데 도움이 될 수 있습니다.

액션의 정의는 함수를 그대로 사용하였습니다. 이를 텍스트 형태로 대체하여, 완전한 json 형태로 사용하는 것에 대해서도 고민이 필용합니다.

부록

한글 글꼴과 영문 글꼴의 비율

영문 글꼴을 기준으로 하여 `나눔고딕코딩` 글꼴의 크기를 비교하였습니다. `Inconsolata` 글꼴만 별다른 수정 없이 적용 가능하고, 나머지는 112~130% 까지 크기를 조정해야 열을 맞출moum m 수 있습니다. 

| 글꼴명          | 비율 |
|-----------------|------|
| Source Code Pro | 120% |
| Inconsolata     | 100% |
| IBM Plex Mono   | 120% |
| Fira Mono       | 120% |
| Anonymous Pro   | 110% |
| Kode Mono       | 120% |
| Noto Sans Mono  | 120% |
| Roboto Mono     | 120% |
| Reddit Mono     | 112% |
| B612 Mono       | 130% |