[Tool] Excalidraw 사용법: 깔끔하고 멋진 다이어그램 툴 추천

들어가며

 

IT 업계에 종사하다보면 다이어그램, 시스템 설계도나 워크플로우와 같은 것들을 그릴 일들이 발생합니다. 보편적으로 피피티를 사용하는 편이긴 하지만, 최근 좋은 툴을 알게되어 소개하고자 합니다. 바로 Excalidraw 입니다.

 

출처: https://apphub.webex.com/applications/excalidraw-excalidraw-95487

 

엑스칼리드로우는 다이어그램을 손그림 느낌이 나면서도 깔끔하게 그려주는 툴입니다. 웹으로도 사용이 가능하고, Obsidian(옵시디언)과 같은 노트 애플리케이션 내에서 확장 프로그램으로서 설치하여 사용할 수도 있습니다. 다만 웹으로는 한 개의 캔퍼스만 사용할 수 있고, 한글 폰트가 예쁘게 나오지 않아서 본 포스트에서는 옵시디안을 이용해 사용하는 방법을 소개하겠습니다!

 

 

옵시디언 설치

 

옵시디언 다운로드 홈페이지에서 환경에 맞는 설치 파일을 다운로드 합니다. 이후 첫 화면에서 언어를 설정하고, 노트들을 저장할 폴더를 지정하거나 생성합니다.

https://obsidian.md/download

Download - Obsidian

 

 

Excalidraw 설치

 

 

옵시디안 설치 후, 왼쪽 하단의 세팅 버튼 클릭 > 커뮤니티 플러그인 클릭 > 커뮤니티 플러그인 탐색(보라색 버튼)을 클릭하여 엑스칼리드로우를 설치하겠습니다.

 

 

왼쪽 Excalidraw를 클릭 후 Install 하고나면 설치된 플러그인 목록에 Excalidraw가 나타납니다. 하트 옆 라디오버튼을 클릭하여 활성화해줍니다.

 

 

 

Excalidraw 사용하기

 

 

엑스칼리드로우 설치 후 왼쪽 사이드바에 새 파일을 만들 수 있는 버튼이 새로 생겼습니다. 클릭하면 아래와 같이 새로운 캔버스가 나타납니다. 

 

 

사용은 어렵지 않습니다. 상단의 버튼 모음 중 하나를 클릭하여 작업을 시작하면 됩니다. 사각형, 원과 같은 도형을 그리거나 직선, 화살표를 그리기도 가능하며 펜을 선택하여 직접 원하는 것을 그릴 수도 있습니다. 도형이 선택되었을 때 엔터를 눌러서 도형 안에 글씨를 작성할 수도 있습니다.

 

 

아래와 같이 단순한 순서도를 그려보았습니다. 순서도 옆에 그림들은 이제 소개드릴 라이브러리라는 기능을 통해 이용할 수 있습니다.

 

 

 

라이브러리 설치하기

 

엑스칼리드로우의 라이브러리는 도형 컬렉션 정도로 이해하시면 되는데요, 우측의 책 모양 버튼 클릭 > Browse libraries 버튼 클릭하여 라이브러리 페이지로 이동할 수 있습니다.

 

https://libraries.excalidraw.com/?theme=light&sort=default 

Excalidraw Libraries

 

다운로드하여 사용하고 싶은 컬렉션이 있다면 Add to Excalidraw 또는 Download를 클릭합니다. Add to Excalidraw는 현재 열려있는 엑스칼리드로우 웹페이지에 바로 다운로드를 해주는 역할을 합니다. 웹페이지가 아닌 별개의 프로그램에서 사용하고 싶다면 Download를 사용해야 합니다. 이후 아까 Browse libraries 버튼 옆 점 세개 버튼을 클릭하여 Open 을 하면 옵시디안 내에서 다운받은 라이브러리를 사용할 수 있습니다!

 

Software Architecture 컬렉션을 로드한 결과

 

 

한글폰트 설치하기

 

엑스칼리드로우는 손으로 무심하게 다만 깔끔하게 그린 듯한 느낌을 줍니다. 단 한글 폰트는 그런 느낌 없는 고딕체만 디폴트로 사용이 가능한데요, 한글 폰트도 손글씨 느낌이 나도록 변경해보겠습니다. 저는 네이버 글꼴 모음에서 "나눔손글씨 다행체" 폰트를 다운 받아 적용해보겠습니다.

 

1) 폰트 다운로드

 

아래 네이버 글꼴 사이트에서 엑스칼리드로우와 유사한 톤의 손글씨인 다행체를 다운로드 받았습니다.

 

https://hangeul.naver.com/font/clova

네이버 글꼴 모음

 

2) 세팅 > Files & Links > Detect all file extensions 활성화

 

폰트 ttf 파일을 옵시디안에서 적용하기 위해 모든 파일을 확인할 수 있는 기능을 활성화합니다.

 

3) 폰트 파일 이동

다운로드 받은 폰트 파일을 엑스칼리드로우 문서가 있는 폴더로 옮깁니다. 폰트를 관리하기 위해 따로 폴더를 만들어도 좋습니다. 아래와 같이 나눔다행체를 가져왔습니다.

 

4) 폰트 설정: 세팅 > Excalidraw > Non-Excalidraw.com supported features

 

세팅에서 Excalidraw를 클릭하면 다양한 설정옵션들이 있습니다. 아래로 쭉 내리다보면 웹사이트에서는 사용할 수 없는 "4번째 폰트 사용" 옵션이 있습니다. 버튼 클릭하여 활성화하고, 다운로드 받았던 폰트를 설정해줍니다.

 

5) 폰트 적용

 

텍스트가 적힌 도형 또는 텍스트 자체를 클릭하여 Font family에 새롭게 등록된 4번째 폰트를 적용합니다.

 

손글씨 폰트 적용만으로 전반적으로 통일성, 완성도 있는 다이어그램이 만들어졌습니다. 

 

엑스칼리드로우는 보통 사용하는 피피티보다 훨씬 느낌 있는 그림들을 그릴 수 있어 아주 재미있는 툴이라고 생각합니다! 잘 적용해보시고 아이디어를 구체화하며 또 다른 좋은 인사이트를 얻어가시길 바랍니다. 👍

 

 

참고

https://github.com/excalidraw/excalidraw-blog

GitHub - excalidraw/excalidraw-blog: Official blog of Excalidraw

https://juahnpop.tistory.com/301

옵시디언(Obsidian) Excalidraw 한글 필기체 나눔 손글씨 또는 나눔 펜으로 설정 하기