옵시디언에서 excalidraw로 손그림 다이어그램 그리기

안녕하세요 😉

유유자적한 개발자 유로띠 입니다 😀

 

 

 

 

👏👏👏👏

 

 

 

이번 포스팅에서는

✅ Excalidraw 란?

✅ 옵시디언에서 Excalidraw 플러그인 설치

✅ Excalidraw 사용법

✅ Excalidraw 라이브러리 설치

에 대해서 알아보겠습니다

 

 

 

 

옵시디언에서 excalidraw 이용하여 다이어그램 그리기

---

 

 

✅  excalidraw 란?

excalidraw(: 엑스칼리드로우)는 오픈소스기반으로 손그림 스타일의 가상 화이트보드입니다.

손그림 스타일로 아기자기한 느낌을 주기 때문에 PPT로 다이어그램을 만드는 것보다 훨씬 퀄리티가 높아 보이게 해 줍니다.

 

excalidraw의 특징은 다음과 같습니다.

💯 무료 및 오픈 소스.
🎨 캔버스 기반 화이트보드.
✍️ 손으로 그린 ​​듯한 스타일.
🌓 다크 모드.
📷 이미지 지원.
😀 도형 라이브러리 지원.
🖼️ PNG, SVG, 클립보드로 내보내기
⚒️ 다양한 도구 - 직사각형, 원, 마름모꼴, 화살표, 선, 자유 그리기, 지우개...
🔙 실행 취소/다시 실행.
🔍 확대/축소 및 패닝 지원.

 

excalidraw는 웹 페이지에서도 작업이 가능하지만 옵시디언의 플러그인을 설치해서도 사용이 가능합니다.

오늘은 옵시디언에서 설치하여 사용하는 방법에 대해 설명하도록 하겠습니다.

옵시디언 설치는 [제2의 두뇌! 옵시디언(obsidian) 사용하기] 글을 참고하시면됩니다.

제2의 두뇌! 옵시디언(obsidian) 사용하기

 

 

✅  옵시디언에서 excalidraw 플러그인 설치

 

커뮤니티 플러그인에서 excalidraw를 검색하여 설치를 진행합니다.

 

 

설치 후 활성화 버튼을 클릭하면 옵시디언에서 Excalidraw 사용하기 위한 준비는 완료되었습니다.

 

 

 

설치가 완료되면 왼쪽 사이드바에 excalidraw를 사용할 수 있는 버튼(Create new drawing)이 생성된 것을 확인할 수 있습니다.

클릭하면 새로운 캔버스가 생성됩니다.

 

 

 

✅  excalidraw 사용법

사용법은 아주 간단합니다.

위쪽 상단의 메뉴에서 화살표나 도형, 텍스트를 선택하여 입력할 수 있습니다.

또한 펜을 선택하여 그리거나 지우개로 지울 수도 있습니다. 도형을 선택하면 색상이나 배경색, 선 굵기 등 조작이 가능합니다.

이러한 도형이나, 선, 배경색 등에서 손그림 스타일이 느껴집니다.

 

 

간단하게 OAuth Flow를 그려보았습니다.

 

 

 

아주 이쁘고 느낌 있는 다이어그램을 그렸습니다. 하지만 이미지가 없으니 약간 밋밋해 보입니다.

라이브러리를 설치하여 이미지를 추가해 보겠습니다.

 

 

✅  excalidraw 라이브러리 설치

 

오른쪽 중앙 메뉴에서 라이브러리 버튼을 클릭해 줍니다.

 

 

 

 

 

Excalidraw Libraries 페이지로 이동되며 원하는 라이브러리를 다운로드하여 사용하면 됩니다.

 

 

 

Add to Excalidraw는 웹페이지에서 작동하는 Excalidraw에 다운받는 방식이며, 지금처럼 옵시디언을 사용하는 외부 모듈의 경우 다운로드(Download)를 진행해야 합니다.

 

 

다운로드를 한 후 다운받은 파일을 열어서 라이브러리를 추가합니다.

 

 

 

 

라이브러리를 추가하여 다이어그램을 구성하였습니다. 전보다 훨씬 멋지게 만들 수 있습니다.

 

 

 

 

PPT와 비교하면 확연한 차이를 느낄 수 있습니다.

 

 

 

✅  마치며

 

옵시디언은 여러 가지 플러그인이 존재하여 다양하게 활용할 수 있어서 아주 좋습니다.

지금껏 PPT나 draw.io를 이용하여 다이어그램을 작성하였는데 이번 기회에 excalidraw로 이전해보려 합니다.

이상으로 옵시디언에서 excalidraw 플러그인을 설치하여 손그림 스타일의 다이어그램을 그리는 방법에 대해 알아보았습니다. 

 

 

 

 

💡 참고

https://github.com/excalidraw/excalidraw

GitHub - excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams

https://abluesnake.tistory.com/166#article-3--excalidraw-%EC%84%A4%EC%B9%98