네이버에서 코딩용 폰트로 무료로 제공하는 나눔고딕 D2Coding을 다운로드하는 방법을 살펴본다. 더불어 누구나 무료로 사용이 가능한 나눔고딕 D2Coding 폰트를 컴퓨터에 설치하는 방법과 코딩 시에 사용하는 방법도 살펴본다.
코딩용 폰트 나눔고딕 D2Coding 무료 다운로드
CONTENTS
네이버에서 무료로 제공하는 나눔 글꼴 중의 하나인 나눔고딕 D2 Coding은 기본적으로 나눔고딕코딩 글꼴과 D2Coding 글꼴로 나뉘지만 현재 네이버 공식 글꼴 사이트에서는 나눔고딕 D2Coding 폰트명으로 제공하고 있다. 코딩용 폰트는 간단히 숫자 0과 영어 O이 구분되지 않는 등 코드 작성 시에 코드의 명확성을 담고 있다. 더불어 널리 사용되는 코딩용 폰트가 대부분 외국의 코딩용 글꼴이 많다보니 한글이 제대로 지원되지 않던 문제도 해결하며, 국내에서 프로그래머들이 애용하는 코딩용 폰트가 바로 나눔고딕 D2Coding이다.
나눔고딕 D2Coding 사이트 바로가기
나눔고딕 D2Coding은 코딩 시에 숫자를 비롯하여 영어 알파벳, 한글 자소 간에 일부 구분이 되지 않는 코드의 명확성을 확보함으로써 가독성을 높인 글꼴로, 영어 알파벳에 최적화된 기존 외국의 코딩용 폰트가 한글을 제대로 구현하지 못 하는 문제까지 해결한 글꼴이다.
즉, 나눔고딕 D2Coding은 개발자들이 코드를 작성할 때 유사한 형태의 영문 및 숫자 뿐만 아니라 한글 및 특수문자 등도 명확하게 구분할 수 있는 변별력과 가독성을 확보한 폰트로, 개발환경과 무관하게 사용할 수 있도록 고정폭 글꼴로 제작해서 자간과 행간을 유지하도록 제작됐다. 더불어 D2Coding 후속으로 D2Coding Ligature도 배포한 바 있는데, 해당 D2Coding Ligature는 코딩 시 특수한 문자 표시를 간편하게 할 수 있도록 일부 문자 조합으로 코딩에서 사용하는 특수한 모양인 합자를 간편하게 변환해주는 기능을 담고 있다. 참고로, D2Coding에 Ligature 기능을 합친 폰트를 하나로 배포했는데 오히려 불편하다는 의견이 있어서 현재는 D2Coding 폰트에 Ligature이 담긴 글꼴과 D2Coding Ligature이 담기지 않은 글꼴로 나뉜 별도의 파일로 제공하고 있다.
나눔고딕 D2Coding 다운로드
네이버는 다양한 글꼴을 제작해서 무료로 배포하고 있는데 네이버에서 제작한 글꼴은 한글한글 아름답게 웹사이트에서 모두 살펴볼 수 있고, 또한 여기에서 원하는 글꼴을 개별적으로 다운로드할 수 있다.
해당 한글한글 아름답게 웹사이트에 접속한 후에 글꼴모음 박스를 눌러 전환한 페이지에서 아래로 스크롤하면 나눔 글꼴 박스가 나오는데, 여기에 해당 글꼴 박스를 누르면 세부적으로 다양한 나눔 글꼴을 개별적으로 다운로드할 수 있는 페이지로 전환한다. 즉, 해당 나눔글꼴 페이지에서 코딩용 폰트인 나눔고딕 D2Coding 글꼴만 개별적으로 다운로드할 수 있다.
더불어 네이버에서 공식적으로 제공하는 D2Coding 깃허브 사이트에서도 업데이트된 D2Coding 폰트를 배포하는데, 2018년 이후에 변화가 없음으로 네이버 나눔글꼴 페이지에서 동일한 파일을 다운로드할 수 있다.
상기에 추가한 한글한글 아름답게 웹사이트 또는 나눔글꼴 페이지에 접속하면 별다른 어려움 없이 해당 나눔고딕 D2Coding을 다운로드할 수 있다. 더불어 나눔고딕 D2Coding 다운로드 버튼을 누르면 동일한 D2Coding 글꼴 파일인 zip 확장자를 지닌 압축파일을 사전에 다운로드를 지정한 폴더에 저장한다.
다운로드한 zip 압축 파일을 알집 또는 반디집과 같은 압축 해제 프로그램을 사용하여 해제하면 3개의 폴더가 나온다.
즉, 앞에서 언급했듯이 기존 나눔고딕 D2Coding 폰트에 합자 변환 기능이 있는 Ligature을 적용한 파일과 Ligature을 적용하지 않는 파일로 나뉘어 있다. 따라서 개발자의 코드 작성 스타일에 따라 원하는 파일만 설치하면 된다.
나눔고딕 D2Coding 폰트 설치하기
위에서 제시한 대로 나눔고딕 D2Coding 글꼴을 다운로드해서 압축을 해제한 다음에 nanum-gothic-coding 폴더 내 D2Coding 폴더에 있는 글꼴 파일을 중심으로 설치 과정을 살펴본다. 해당 글꼴은 코딩 시 특수한 문자를 합자 방식으로 변환해주는 Ligature 기능을 적용하지 않는 초기에 배포한 순수 코딩용 글꼴 파일이다. 따라서 Ligature 기능이 필요하다면 D2CodingLigature 폴더에 있는 글꼴 파일을 설치해서 사용하면 된다. 참고로, D2CodingAll 폴더는 폴더면 그대로 Ligature를 적용한 글꼴 파일과 Ligature를 적용하지 않은 글꼴 파일을 모두 담고 있다. 해당 D2CodingAll 폴더 내 파일은 ttc 확장자를 지닌 파일 1개이지만, 해당 ttc 파일만 설치하면 나눔고딕 D2Coding의 모든 파일인 4개 글꼴이 설치된다.
더불어 나눔고딕 D2Coding 글꼴을 담은 D2Coding 폴더에서 보기 옵션을 아주 큰 아이콘으로 설정하면 글꼴 형태를 대략적으로 볼 수 있어 유용하다. 또한 3개의 글꼴 파일이 나오는데 ttf 확장자를 지닌 2개이 파일은 각각 글꼴 굵기에 따라 나뉘어져 있고, ttc 파일은 글꼴 굵기에 따라 나뉜 2개의 글꼴을 한 번에 설치해주는 버전이다. 따라서 사용자의 코딩 스타일에 맞는 파일을 선택적으로 설치하면 되는데, 다음에서 D2Coding 글꼴 파일 2개를 한 번에 설치할 수 있는 ttc 파일을 윈도우용 PC에 설치하는 과정을 중심으로 살펴본다.
해당 D2Coding 폰트뿐만 아니라 네이버에서 제공하는 글꼴 중 원하는 폰트를 컴퓨터에 설치하는 방법은 매우 간단하다. 설치를 원하는 해당 파일을 누른 후에 나오는 팝업에서 설치 버튼을 눌러주면 된다.
이렇게 설치하고자 하는 글꼴 파일을 누른 후에 설치 버튼을 눌러 컴퓨터에 설치하는 방식이 일반적이다. 해당 D2Coding ttc 파일은 1개이므로 해당 과정을 1번만 수행하면 되는데, ttf 파일로 설치하려면 동일 과정을 2번 수행해야 한다. 하지만 글꼴 파일이 여러 개라면 글꼴 파일을 직접 설치 버튼을 눌러 설치하는 방식이 아니라 글꼴 파일을 컴퓨터 운영체계 내에 설치되는 폴더에 직접 이동해서 설치하는 게 더 간편한 방법이다.
컴퓨터 바탕화면에서 가장 좌측에 위치한 윈도우 아이콘인 시작을 누르면 톱니바퀴 모양의 설정이 나오는데, 여기를 눌러 들어간 후에 개인 설정을 선택한다.
다음으로 좌측에서 글꼴 항목을 누른 후에 우측에 나오는 설치 하려면 끌어서 놓기 박스에 설치할 글꼴 파일을 마우스로 잡고 드롭 방식으로 갖다 놓으면 설치를 진행한다. 더불어 사용 가능한 글꼴을 보면 현재 컴퓨터에 설치된 모든 글꼴을 확인할 수 있다.
설정을 활용한 방법과 유사한 또 다른 방식으로 윈도우를 설치한 폴더에서 fonts 폴더에 설치할 글꼴 파일을 마우스로 끌어서 드랍해도 된다. 기본적으로 윈도우는 C하드에 설치되므로 아무 폴더나 연 후에 좌측 항목에서 내 PC로 들어간 후에 오른쪽에 나오는 장치 및 드라이브에서 C하드를 선택하고, 이후 Windows 폴더에 들어가 Fonts 폴더를 찾으면 된다. 여기 Fonts 폴더에는 컴퓨터에 설치한 모든 글꼴이 나오므로, 여기에 글꼴 파일을 추가하거나 사용하지 않는 글꼴도 여기에서 삭제하면 된다.
코딩에서 D2Coding 사용하는 방법
코딩용 D2Coding 폰트는 주로 코드를 작성하는 에디터에서 사용하는데, 해당 D2Coding 글꼴 자체를 웹 상에 보이도록 구현할 수도 있다. 하지만 모바일 또는 브라우저 등 웹에서 보이는 글꼴 포맷은 WOFF가 일반적이다. 코딩 시에는 대부분 웹과 인쇄에 모두 사용 가능한 TTF 포맷과 함께 웹에서 사용하도록 특별히 고안된 WOFF 포맷, 이 둘을 함께 사용한다. 즉, 위에서 다운로드한 D2Coding ttf 포맷을 웹폰트로 변환해서 CDN 연결 방식으로 이용하는 게 일반적이다. 하지만 CDN 연결을 위한 서버 활용 방식은 개인이 하기에는 약간 무리가 있다. 대부분 웹폰트로 사용할 수 있는 폰트는 글꼴 개발사 또는 유통사에서 CDN으로 제공한다. 다음에서 D2Coding을 woff 포맷으로 CDN 연결 방식을 활용하는 방법을 살펴본다.
D2Coding 글꼴은 현재 폰트 사이트의 대명사처럼 자리한 눈누 사이트에서 CDN 방식으로 웹폰트를 지원하고 있다. 코딩에서 D2Coding 폰트를 사용하려면 눈누 사이트에서 가져온 코드를 CSS에 붙여넣기하면 자동으로 D2Coding woff 포맷 글꼴을 다운로드한다.
@font-face {
font-family: 'D2Coding';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff') format('woff');
font-weight: normal;
font-style: normal;
}body { font-family: 'D2Coding' }
따라서 해당 D2Coding 폰트를 적용할 태그 또는 클라스를 활용해 font-family 속성과 속성값을 넣어주면 된다. 예를 들어 코딩 시 모든 웹에 있는 텍스트에 D2Coding 폰트를 적용한다면, 위에 같이 body 태그에 폰트 스타일을 추가하면 된다. 이를 통해 웹 상에서 다른 사람들도 자신의 컴퓨터에 글꼴을 설치하지 않아도 동일한 글꼴을 볼 수 있다. 만약 웹 상에서 특정 영역만에 이 글꼴을 사용한다면 해당영역 태그명 또는 클라스명을 활용하여 CSS에서 스타일을 설정하면 된다.
