본문 바로가기
반응형

한국의 개발자인 경우 코딩을 할때 한번쯤 고민했던 부분이 있을 것입니다. 오로지 영문으로만 코딩을 하는 경우 Consolas, Courier New 같은 영문 코딩폰트를 사용하면 되지만 한글이 섞여 버리면 글자의 미세한 차이 때문에 코딩하기가 여간 찜찜한 것이 아닙니다. 자간도 밀리고 폰트도 이쁘지 않고 크기도 안맞고..
기존에는 Hack이라는 오픈소스 폰트를 사용했었는데, 지금은 아무래도 한글에 대해서 잘 알고 개발한 네이버의 개발 전용 폰트, D2Coding Font을 사용하고 있습니다.

한글 코딩 폰트라고 하면 일단 특수문자, 숫자, 영문, 국문에 대해서 가독성이 좋아야 하고 글자의 폭도 동일하게 고정되어 있어야 합니다.

Naver d2codingfont 참조

Naver D2 coding font는 한글, 영문자 및 확장자 332자에 대해 지원하고 있고 한자는 포함되어 있지 않다고 합니다.

설치하기

먼저 다운로드 사이트로 이동합니다.

Naver d2codingfont 다운로드 바로가기

Naver d2codingfont
폰트를 github으로 배포하고있네요. 다운로드 메뉴에서 버전정보를 클릭합니다.

다운로드 받기
폰트를 수정할게 아니면 소스는 필요없고 결과물만 다운로드 받으면 됩니다.

  1. 결과물 압축파일을 클릭하여 다운로드 받습니다.

압축해제
압축을 해제하면 3개의 폴더가 있습니다.

  1. 기본폰트 세트입니다.
  2. 모든것이 다 포함되어 있는 전체 폰트입니다.
  3. Liagature(합자)가 포함되어 있는 폰트입니다.

Liagature(합자)란?
Liagature(합자)는 개발자들이 주로 사용하는 문자 형식인 a<=b, a>=b, a == b, a === b, a!=b 이런 문자를 유니크한 특별한 문자로 대체해서 보여주는 것을 말합니다.
Before --> After

폰트설치하기
폰트 설치는 해당 폰트파일에서 마우스 오른 클릭해서 나오는 메뉴 중에서 모든 사용자용으로 설치를 선택하면 설치가 됩니다.

VS Code에서 설정하기

저는 개발 에디터로 VScode를 주로 사용합니다. 이 에디터의 환경설정에서 폰트를 지정해 줘야 합니다. 위의 과정으로 내 PC에는 D2 Coding font가 설치되어 있다는 가정입니다.

VScode 글꼴 지정하기
먼저 VS Code를 엽니다.

  1. 파일 메뉴를 선택합니다.
  2. 기본 설정을 선택합니다.
  3. 설정을 선택합니다.
  4. 텍스트 편집기 > 글꼴 항목을 찾습니다.
  5. Font Family의 입력칸의 가장 앞쪽에 D2Coding ligature 입력합니다.
  6. ligature(합자)를 사용하지 안는다면 D2Coding를 입력하시면 됩니다.

D2Coding ligature 설정하기

setting.json 들어가기
글꼴의 ligature를 설정하기는 이 화면에서 할 수 없고 setting.json에서 텍스트로 수동으로 설정해야 합니다.

  1. setting.json에서 편집 버튼을 클릭합니다.

setting.json
위의 그림처럼 "editor.fontLigatures": truetrue로 지정하면 됩니다.

적용된 모습

Before --> After 위와 같이 Before와 After의 모습을 볼 수 있습니다. 디자이너의 눈을 가지고 있는 민감한 개발자라면 한눈에 차이를 알아 볼 수 있을 것입니다.

라이선스

Naver d2codingfont 웹사이트에서 참고했습니다.

'누구나 사용'할 수 있고 또 OFL 라이센스 하에서 '누구나 재배포' 하실 수 있습니다.
D2 Coding 글꼴은 OFL(Open Font License)이라는 국제적으로 인정받는 공개 글꼴을 위한 라이센스를 채택하여 사용에 대한 제약을 없앰과 동시에 재배포에 대한 제약도 획기적으로 완화하여, 이 라이센스를 명시하기만 하면 다른 프로그램(상용 프로그램 포함)에 이 개발자용 D2 Coding 글꼴을 포함하여 재배포하는 것도 허용합니다.

UX 공작소

UX와 UI에 관해 내가 알게된 다양한 이야기를 공유해요~