다이어그램 제작 웹, draw.io에서 한글 글꼴 등록

다이어그램을 만들기 위해 윈도와 달리 우분투에서 윈도를 사용할 때 알았었던 웹 앱인 draw.io로 사용한다. 왜냐하면  draw.io는 무료이면서 브라우저를 통해서 만들 수 있었기 때문이다. 그리고 파일을 구글 드라이브에 저장할 수 있다. 처음 draw.io를 알았을 때는 한글을 지원하지 않았으나 후에 한글을 설정할 수 있어서 자주 사용했다.

 

---

하지만 draw.io를 사용할 때 한글 글꼴을 사용하지 않았다. 왜냐하면 그냥 한글 글꼴 등록하는 아는 절차가 귀찮았다. 이 글에서 적지만 한글 글꼴을 등록하는 것은 하나도 어렵지 않다. 아래 그림을 보듯이 draw.io에 등록된 기본 글꼴은 Helvetica를 비롯한 영어 글꼴이다. 한글 글꼴은 없어 직접 등록해야만 사용할 수 있다.  

 

 

그래서 아래 그림을 보면 빙그레체라는 내 시스템에 있는 한글 글꼴을 등록시켰다. 참고로 draw.io에서 글꼴 등록은 내 우분투에 포함된 글꼴만 아니고 웹폰트, 구글 폰트에 있는 글꼴을 등록해 사용할 수 있다. 

 

 

시스템 폰트 등록

 

draw.io 글꼴 목록에  아래 그림 4번을 보면 텍스트가 빙그레 싸만코체로 됐다. 글꼴 목록에 빙그레 싸만코체를 등록하는 과정을 알아보고자 한다. 

 

1. 텍스트 탭에서 글꼴 이름인 Hevetica를 클릭한다. 
2. 글꼴 목록이 나오면 사용자 정의...를 클릭한다.
3. 아래 두 번째 그림에서 글꼴 이름을 시스템(윈도나 우분투)에 있는 글꼴 이름으로 적어주면 된다. 단, 글꼴이 시스템에 있어야 된다. 참고로 그림을 클릭하면 크게 볼 수 있다.  

 

 

위에서 빙그레체와 빙그레 싸만코체를 등록했고 글꼴 목록을 보면 아래 그림과 같다. 만약 글꼴을 삭제하고 싶다면 쓰레기통 아이콘을 클릭하면 된다. 이렇게 시스템 글꼴을 등록하는 방법을 적었다. 참고로 빙그레체 및 빙그레 싸만코체 등 빙그레체 다운로드는 http://www.bingfont.co.kr/에서 할 수 있다.

 

 

 

구글 폰트 등록

 

구글 폰트를 등록하는 법도 시스템 폰트를 등록하는 법과 동일하다. 알아야 될 것은 구글 폰트 사이트에서 등록할 폰트 이름만 알면 된다. 나는 구글 폰트를 구글 검색에서 구글 폰트라는 검색어로 찾았고 사이트 주소는 https://fonts.google.com/다. 그 사이트에서 다양한 언어의 글꼴이 나오는데 한글 글꼴만 나오게 하기 위해서 아래 그림처럼 Lanuage > Korean을 클릭하면 된다.

 

 

그러면 한글 글꼴만 나오게 된다. 한글 위에 글꼴 명이 나오는데 예로 Noto Sans Korean이라는 글꼴 명을 복사하기 위해 글꼴을 클릭하면 글꼴 명을 복사할 수 있다.

 

 

그리고 아래 그림처럼 draw.io의 Google Fonts에 붙이면 된다. 그러면 글꼴 목록에 Noto Sans Korean이 등록된 것은 확인할 수 있다.

 

 

 

웹 폰트

 

웹 폰트의 경우는 아래 그림을 보듯이 웹 폰트 이름과 주소를 알면 된다. 상업적 이용 가능한 무료 한글 폰트 모음 사이트인 눈누에서 웹폰트도 제공한다. 눈누 사이트는 구글에서 눈누라는 키워드로 검색했으며 사이트 주소는 https://noonnu.cc/와 같다. 아래 그림처럼 동글Regular라는 웹 폰트 이름과 주소를 입력했더니 글꼴 목록에 등록되어 글꼴이 변했다. 

 

 

눈누 - 상업용 무료한글폰트 사이트

---

draw.io는 구글 드라이브에서 무료로 접할 수 있다. draw.io는 무료이고 한글을 지원한다. 만든 문서 파일을 안전하게 구글 드라이브에 저장한다. 아래 그림은 구글 드라이브에 draw.io 등 앱을 설치한 것을 볼 수 있다.  더보기 > 연결할 앱 더보기를 클릭하여 draw.io를 추가한다. 아래 그림에 diagram.net이 draw.io다. 나는 이미 draw.io를 설치했기 때문에 제거라는 버튼이 나오는 것이다. 만약 설치하지 않았다면 설치라고 나왔을 것이다.

1. 더보기 > 연결할 앱 더보기
2. 검색어를 다이어그램이라고 한다. 검색 결과가 나오면 draw.io(diagrams.net) 클릭 > 설치 버튼 클릭