옵시디언 Excalidraw 플러그인 - 1. 기본 사용법 - Obsidian 그림판

Excalidraw를 기본 사용법을 알아봅시다.

목차

• Excalidraw 소개
• Excalidraw 설치하기
• Excalidraw 설정하기
• Excalidraw 사용해보기

Excalidraw 소개

엑스칼리드로우는 엑스칼리버 + 드로우의 합성입니다. 그만큼 시각화에 특화된 강력한 플러그인 이라고 볼 수 있습니다.

아래 유튜브 내용 일부를 정리한 포스팅이고, 유튜브를 보면서 배우는 중입니다. 영상엔 더 많은 내용이 있으니 유튜브도 한번 참고해 주세요.

Excalidraw 설치하기

• 커뮤니티 플러그인 사용 클릭 > 커뮤니티 플러그인 > 탐색 클릭> excalidraw 검색, 설치
  

Excalidraw 설정하기

• 플러그인 활성화하니까 웰컴 가이드가 나오네요!
  

기본 설정

• 우선 기본 설정에 몇 가지만 확인해보겠습니다.
  
  • Display Release Notes after update : 업데이트 후 변경 사항을 보여줍니다.
  • Plugin update notification: 플러그인 업데이트할 게 있는지 알려줍니다.
  • Excalidraw folder: Excalidraw 파일이 생성 될 기본 폴더입니다.
  • Use Excalidraw folder when embedding a drawing into the active document :
    첨부 파일을 삽입하는 경우 Excalidraw 기본 폴더에 넣습니다. 아니면 obsidian의 첨부 파일이 저장되는 폴더를 사용합니다. (저는 아마 따로 지정하지 않아 /links폴더에 저장될 것 같네요.)
  • Excalidraw template file: Excalidraw 탬플릿 파일입니다.
  • Excalidraw Automate script folder(CASE SeNsitiVE!) : 스크립트가 저장될 폴더입니다.

기본 설정에서 변경한 것은 없습니다.

펜 추가하기

• ExcaliDraw>설정>Non-Excalidraw.com supported features>Number of custeom pens 7개로 변경
  
  최대 10개까지 선택할 수 있고, 커스텀하게 수정도 가능합니다.

• 오른쪽 사이드 툴박스에 추가된 펜들을 한번씩 그어보면 아래와 같습니다.
  

• 새로 추가된 펜을 더블 클릭하면 커스텀하게 수정하여 사용할 수 있습니다.
  

따로 수정은 안하겠습니다.

다크모드

• 다크모드는 페이지 왼쪽 하단 햄버거 메뉴클릭>캔버스 배경에 다크모드 선택해 변경할 수 있습니다.
  

여기선 다크모드로 변경하긴 했는데 나중에는 라이트모드로 변경해서 사용하고 있습니다.
다크모드로 잘 안보이는게 있네요…ㅋ

그룹화 단축키 중복 제거

그룹화는 자주 사용하는 기능인데 옵시디언 그래프 뷰: 그래프 뷰 열기 단축키와 겹쳐집니다.
그래서 ExcaliDraw 그룹화 단축키(Ctrl + G)를 사용하기 위해 Obsidian 그래프 뷰: 그래프 뷰 열기 단축키를 삭제하겠습니다.

• 단축키>그래프 뷰: 그래프 뷰 열기 단축키 삭제
  
  • ExcaliDraw 그룹화: Ctrl + G
  • ExcaliDraw 그룹화 해제: Ctrl + Shift + G

Excalidraw 사용해보기

기본적인 Excalidraw 사용법을 하나씩 알아 보겠습니다.

1. .excalidraw 파일 만들기

• 폴더에 오른쪽 클릭 > Create new drawing을 선택해서 새 파일을 만들어 보겠습니다.
  

2. 기본 그리기

• 상단에 툴박스를 보면 아주 보일 듯 말듯하게 숫자가 적혀있습니다. 1~0까지 각 기능들의 단축키가 매핑되어 있습니다. 단축키 한번씩 사용해보십셔!
  

몇가지 간단한 기능들을 같이 알아보겠습니다.

• 도형을 만들고 Enter 키를 누르면 바로 텍스트를 입력할 수 있습니다.
  

• 선을 선택하고 클릭할 경우 곡선으로 그릴 수 있고, 드래그하면 직선을 만들 수 있습니다.
  

• Alt 누르고 움직이면 복사, Shift는 다중 선택됩니다.
  

3. 꾸미기

• 도형을 선택하고, 왼쪽 아래 🎨 버튼을 클릭하면 도형을 꾸밀 수 있는 툴 박스가 나옵니다. 하나씩 변경해보면서 확인해 보시면 될 거 같아요!
  

4. 옵시디언 링크 추가하기

• Obsidian과 동일하게 파일명을 대괄호로 2번 감싸주면 링크를 걸어줄 수 있습니다.
  
  링크하면 앞에 핀 모양이 생기는데 ExcaliDraw설정에서 변경할 수 있습니다.

• 링크 뒤에 | 구분자를 넣어 주면 Alias가 적용됩니다.
  

마크다운에 링크 Alias 기능이 있었네요. 처음 알았습니다!ㅎ

5. 옵시디언 파일에 Excalidraw 이미지 첨부하기

Excalidraw 파일 옵시디언 파일 내에 삽입해보겠습니다.
Excalidraw 파일 전체를 삽입하는 방법과 일부 그룹/구역을 삽입하는 방법을 알아 보도록 하겠습니다.

• ![[ 파일명 ]]로 감싸줍니다. 파일명 다음에 | 구분자로 이미지 사이즈를 정할 수 있습니다.
  

기존 마크다운 이미지 넣는 방식과 동일하네요

Excalidraw 전체 이미지를 가져오는 방법을 알아 보았는데요. 이번에는 Excalidraw 파일 내에서 이미지 일부 Group/ Area만 가져오는 방법도 알아보도록 하겠습니다.

---

우선 Sound 아이콘과 Internet 아이콘을 그룹화 해주겠습니다. 그 다음에

• 오른쪽 사이드 툴박스 > 옵시디언 버튼 클릭 >Insert actions > 2번째줄 첫번째 아이콘 클릭하겠습니다.
  

• 팝업이 하나 뜨는데 Alias 필요하면 입력 > Group 버튼 클릭 하겠습니다.
  

• 그러면 그룹으로 지정한 부분만 이미지를 가지고 오는 것을 확인할 수 있습니다.
  

---

이번에는 선택한 영역만 가져오도록 해보겠습니다.
우선 구역을 box로 감싸줍니다. 그 다음에

• 오른쪽 사이드 툴박스 > 옵시디언 버튼 클릭 >Insert actions > 2번째줄 첫번째 아이콘 클릭하겠습니다.
  
• 팝업이 뜨는데 Alias 필요하면 입력 > Area를 클릭합니다.
  
• Box 구역을 기준으로 이미지를 가져오는 것을 확인할 수 있습니다.
  

Excalidraw 안에 파일 첨부하기

• 오른쪽 사이드 툴박스> 2번째 아이콘을 클릭합니다.
  
• 첨부할 파일을 선택하고 as iFrame를 선택해 주겠습니다.
  
• iFrame식으로 Excalidraw 파일에 파일이 삽입되었습니다.
  

.md파일은 as iFrame, as image 로 선택을 할 수 있습니다.
as iFrame으로 삽입시, Excalidraw 파일에서 옵시디언 파일을 수정할 수 있습니다.
as image 로 삽입하면 이미지가 삽입됩니다.

.excalidaw 파일은 as image로만 삽입이 됩니다. 첨부된 이미지의 원본이 수정되면 삽입된 이미지도 변경되는 것을 확인할 수 있습니다.

5. 이미지 다운로드

• 오른쪽 상단 ... 메뉴 클릭> Export Image
  
• Image를 어떻게 추출할 건지 옵션이 나옵니다.
  
  • Image padding : 이미지 여백을 조절합니다.
  • PNG Scale: 배율을 조절합니다.
  • Export theme: 테마를 선택합니다.( Light, Dark )
  • Background color: 배경색을 선택합니다. Export theme가 Light이고, Transparent를 선택하면 배경이 검은색이 됩니다.(흰>검)
  • Save or one-time settings?: 위 설정을 저장합니다.
  • Embed the Excalidraw scene in the exported file?: 내보낸 파일에 Excalidraw 장면 포함여부입니다. ?? 이거는 어떤 설정이지 잘 모르겠네요 ㅠㅠ
  • Where to save thie image?: 저장위치를 설정합니다. (기본설정은 /Excalidraw 입니다.)

마치며

지금까지 Excalidraw 의 가장 기본적인 사용법을 알아 보았습니다.
이어서 다음 포스팅에는 누군가 만들어 둔 라이브러리를 추가해서 사용해보고, 기능을 추가하기 위해 스크립트를 추가해 보겠습니다.