DEVOCEAN

안녕하세요, 데보션 영 3기 TechWave팀의 김유빈입니다🌊

최근 데보션에 옵시디언을 멋지게 설명해주신 블로그 글이 올라왔었는데요,

이 글을 보고 제가 옵시디언에서 정말 잘 활용하고 있는 다이어그램 툴인 Excalidraw를 소개하면 좋을 것 같아 글을 작성하게 되었습니다.

들어가며

Excalidraw는 다이어그램, 시스템 설게도, 워크 플로우 등을 그리기에 최적화 된 툴입니다.

귀여운 손그림과 더불어 기존 툴들보다 훨씬 깔끔하게 그릴 수 있기 때문에 자주 사용하고 있는데요.

이 툴은 옵시디언 그리고 웹사이트 에서 사용하실 수 있으며, 옵시디언에서는 여러 캔버스를 사용하실 수 있기 때문에 아래 설명과 함께 옵시디언에서 적용해보시는 것을 추천합니다.

Excalidraw 설치하기

본격적으로 옵시디언에서 Excalidraw를 설치하는 과정을 살펴보겠습니다.

옵시디언에서 하단 세팅(톱니바퀴) 버튼을 클릭 → Community plugins 클릭 → 보라색 Browse 버튼 클릭 후 검색 창에 "Excalidraw" 검색 후 install 해주세요.

이제 installed plugins 에 Excalidraw 가 보이실텐데요, 우측의 라디오 버튼을 클릭하여 활성화해주세요.

이제 Excalidraw를 사용하실 수 있습니다.

옵시디언의 메인 페이지로 돌아가보시면, Create new drawing이라는 글씨와 함께 붓 아이콘을 확인하실 수 있습니다.

이 버튼을 클릭하여 Excalidraw 캔버스를 새로 만들 수 있습니다.

드디어 플러그인 설치를 완료했습니다 🥳

Excalidraw 라이브러리 설치하기

Excalidraw에서는 다양한 아이콘, 도형을 라이브러리 형태로 다운로드하실 수 있는데요,

저는 주로 AWS의 다양한 아이콘을 다운로드하고 사용합니다. 이제 본격적으로 어떻게 라이브러리를 사용하는지 알아보겠습니다.

새로 생성한 캔버스의 우측 책 모양 아이콘을 통해 라이브러리에 들어가실 수 있으며 하단 Browse libraries 버튼을 통해 라이브러리 사이트에 접속하실 수 있습니다.

라이브러리 웹사이트 에서 간단히 접속하실 수도 있습니다.

이제 라이브러리에서 원하는 아이콘을 다운로드 하실 수 있습니다.

저는 주로 AWS 아이콘을 사용하기 때문에, aws를 검색하고 다운로드 해보겠습니다.

저희는 옵시디언에서 사용할 것이기 떄문에 Add to Excalidraw 가 아닌 Download를 눌러 로컬로 파일을 다운로드 합니다.

다시 옵시디언으로 돌아와 Open 버튼을 눌러 라이브러리를 적용합니다.

적용 후에는 다음과 같이 라이브러리가 잘 보이는 것을 확인하실 수 있습니다.

라이브러리와 함께 아키텍처를 그려보았습니다.

SK텔레콤의 MLOps 아키텍처 일부가 아래처럼 귀엽게 표현되었습니다! (Parameter Store의 경우 아이콘이 없어 System Manager로 대체)

하지만 아직 한가지 관문이 남아있습니다.

위에서 보시는 것과 같이 한글 폰트는 기본 폰트가 나오고 있기 떄문에 손글씨 느낌을 헤치게 되는데요, 이를 막기 위해 한글 폰트를 적용해보겠습니다.

한글 폰트 적용

다시 세팅 버튼을 눌러, Files & Links → Detect all file extensions 를 활성화 해주세요. 이를 통해 ttf를 포함한 폰트 파일을 탐지할 수 있습니다.

다운로드 받은 폰트 파일을 Excalidraw 문서가 있는 폴더로 옮깁니다. 폰트를 여러개 사용할 경우 폰트를 위한 폴더를 만들는 것이 더 좋습니다.

다시 세팅 → Community plugins의 Excalidraw를 클릭 후 밑으로 스크롤하여 Non-Excalidraw.com supported features 를 찾습니다.

여기서 Fourth font 토클을 열어 아래 사진과 같이 Enable fourth font option 을 활성화한 뒤 Fourth font file 에서 적용할 폰트를 선택합니다.

다음과 같이 4번째 폰트가 생성되고, 이제 한글을 자유롭게 작성할 수 있습니다.

드디어 Excalidraw를 이용한 아키텍처가 완성되었습니다!

마치며

지금까지 옵시디언에서 유용하게 활용할 수 있는 다이어그램 툴 Excalidraw를 소개해보았습니다.

깔끔하고 귀여운 아키텍처가 필요하실 때 사용해보신다면 좋을 것 같습니다.

읽어주셔서 감사합니다.