2024년 4월 8일

코딩을 위한 최고의 글꼴 선택하기

ProgrammingFont고정폭글꼴

사용하는 글꼴에 따라 코딩 경험에서 큰 차이를 만들 수 있습니다. 좋은 글꼴은 가독성을 향상 시키고, 눈의 피로를 줄이고, 생산성을 높일 수 있습니다. 코딩 글꼴의 중요성을 알아보고, 최고의 글꼴들을 살펴보겠습니다.

코딩 글꼴이란?

개발자는 코드를 작성하는 것보다, 편집의 설정을 조정하는데 오랜 시간이 걸린다는 말이 있습니다. 각자 선호하는 개발 환경은 다를 수 있지만, 기본적으로 제공하는 글꼴을 변경하는 경우가 많습니다.

코딩 글꼴에 대한 정의는 별도로 없지만, 대부분의 개발자는 다음과 같은 글꼴을 선호합니다.

고정폭 글꼴입니다. 각 문자들과 기호들이 동일한 폭을 차지하여, 열을 예상한대로 맞출 수 있습니다. 이는 코드의 구조나 계층을 이해하고, 패턴이나 오류를 보다 쉽게 발견할 수 있습니다.
1, i, l, I 또는 o, O, 0 과 같이 비슷한 문자나 기호를 명확하게 구분합니다. 또한 공백, 세미콜론, 마침표 등과 같은 기호의 경우 상대적으로 커지기 때문에 보다 쉽게 읽을 수 있습니다.
글자의 휙 중간이나 끝에 장식이 없는 산세리프 글꼴입니다. 인쇄한 글을 읽기에는 세리프 체가 가독성이 좋다고 알려져 있으나, 산세리프체는 문자를 잘 구분하여 정확성이 높습니다.
무료로 사용할 수 있는 오픈 소스 형태의 글꼴입니다.

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

더 좁은 글꼴은 화면에 더 많은 문자를 표시할 수 있습니다.
한글과 같이 사용할 때 열을 맞출 수 있는가 입니다.

이런 점들은 코드를 해독하는 시간을 줄이고, 더 많은 코드를 화면에 배치하여 개발의 생산성을 높일 수 있습니다. 하루 종일 코드를 작성하고, 읽어야 하는 개발자들의 눈의 피로를 줄일 수 있습니다.

최고의 코딩 글꼴

아래에서 소개하는 코딩용 글꼴은 제가 가장 좋아하는 글꼴 중 하나입니다. 예시의 글꼴은 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

Incosolata 는 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>
  );
}

마치며

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

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

부록

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

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

글꼴명	비율
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%