옵시디언 캔버스(Canvas) 사용 팁 - 분석맨의 '두 번째 뇌'

## --- 목차 --- - [[#팁1 - 여러개의 노트나 폴더 전체를 캔버스로|팁1 - 여러개의 노트나 폴더 전체를 캔버스로]] - [[#팁2 - 스냅(Snapping) 기능|팁2 - 스냅(Snapping) 기능]] - [[#팁3 - 파일 카드의 outgoing links 노트 추가하기|팁3 - 파일 카드의 outgoing links 노트 추가하기]] - [[#팁4 - 웹 사이트를 캔버스의 카드 메모로|팁4 - 웹 사이트를 캔버스의 카드 메모로]] - [[#팁5 - Excalidraw를 캔버스에 임베드 하기 (mintbear)|팁5 - Excalidraw를 캔버스에 임베드 하기 (mintbear)]] - [[#팁6 - 앱 아이템을 캔버스에 연결하기|팁6 - 앱 아이템을 캔버스에 연결하기]] - [[#팁7 - 캔버스 확대 축소|팁7 - 캔버스 확대 축소]] - [[#팁8 - 캔버스 연결선에 라벨 달기|팁8 - 캔버스 연결선에 라벨 달기]] - [[#팁8 - 캔버스 연결선에 라벨 달기#옵션1. 연결선을 더블 클릭|옵션1. 연결선을 더블 클릭]] - [[#팁8 - 캔버스 연결선에 라벨 달기#옵션2. 연결선을 클릭 후, Edit label 아이콘 선택|옵션2. 연결선을 클릭 후, Edit label 아이콘 선택]] - [[#팁9 - 카드 복제하기|팁9 - 카드 복제하기]] - [[#팁10 - 카드를 노트(마크다운 파일)로 만들기|팁10 - 카드를 노트(마크다운 파일)로 만들기]] - [[#팁11 - 카드 내의 링크를 Drag & Drop|팁11 - 카드 내의 링크를 Drag & Drop]] - [[#팁12 - 파일(노트)을 새로운 탭으로 열기|팁12 - 파일(노트)을 새로운 탭으로 열기]] - [[#팁13 - 여러 카드를 그룹으로 만들기|팁13 - 여러 카드를 그룹으로 만들기]] - [[#팁13 - 여러 카드를 그룹으로 만들기#옵션1. 카드 선택 후, 그룹 만들기|옵션1. 카드 선택 후, 그룹 만들기]] - [[#팁13 - 여러 카드를 그룹으로 만들기#옵션2. 깔개(place mat) 먼저 만들고, 카드 넣기|옵션2. 깔개(place mat) 먼저 만들고, 카드 넣기]] - [[#팁14 - 카드 세로 크기 자동 조정하기|팁14 - 카드 세로 크기 자동 조정하기]] - [[#팁15 - Canvas MindMap 플러그인으로 카드 쉽게 만들기|팁15 - Canvas MindMap 플러그인으로 카드 쉽게 만들기]] - [[#캔버스(Canvas) 관련 단축키|캔버스(Canvas) 관련 단축키]] - [[#References|References]] - [[#Links|Links]] --- ## 팁1 - 여러개의 노트나 폴더 전체를 캔버스로 - 파일 탐색기(File Explorer)에서 파일이나 폴더를 Drag & Drop 해서 노트를 캔버스로 끌어다 놓을 수 있습니다. - 연속된 파일은 Shift+Mouse Clicking, 여러개의 파일 선택은 Option+Mouse Clicking으로 선택할 수 있습니다. ※ 참고: 이미지나 미디어 파일은 메뉴 아이콘이나 오른쪽 마우스 클릭 후, ‘Add media from vault’로 넣을 수 있습니다. 혹은, 파일 탐색기(File Explorer, Finder)에서 파일을 drag & drop으로 캔버스에 옮겨도 됩니다. ![[Obsidian_1.1.0_Canvas_drag-multiple-files_Protip1.gif]] --- ## 팁2 - 스냅(Snapping) 기능 Drag하거나 크기를 조정하는 동안 캔버스에는 두 가지 유형의 스냅(snapping)이 있습니다. - ### 개체 스냅(Object snapping): - 기본 디폴트 모드입니다. - 가장자리는 주어진 축을 따라 뷰포트(viewport)의 모든 개체에 스냅됩니다. - ### 그리드 스냅(Grid snapping): - 오른쪽의 샵(#) 아이콘을 클릭하면 활성화됩니다.(Enable grid snapping) - 가장자리가 배경 그리드에 스냅됩니다. 즉, 크기 조정 시 배경에 있는 그리드(grid) 만큼 씩 조정이 됩니다. - 카드를 drag하면서 스페이스바(Spacebar)를 누르면, 스냅을 일시적으로 비활성화할 수 있습니다. - **스페이스바(Spacebar)를 누른 상태에서 마우스를 drag하면 캔버스 화면 전체를 움직일 수 있습니다.** ![[Obsidian_1.1.0_Canvas_snapping-basics_Protip2.gif]] --- ## 팁3 - 파일 카드의 outgoing links 노트 추가하기 파일(노트) 카드의 연결선 점(dot)을 dragging 해서 놓으면, 두 번째 스크린샷과 같이 이 노트에 outgoing links로 연결된 노트를 선택할 수 있는 메뉴가 나타나서 쉽게 연관 노트를 연결하고 지식을 확장할 수 있습니다. 심지어 노트에 있는 이미지마저 보여주니, 쉽게 이미지를 배치할 수 있다. ![[Obsidian_Canvas_ConnectingDot.jpg|440x480]] ![[Obsidian_Canvas_ConnectingDot_Menu.jpg]] --- ## 팁4 - 웹 사이트를 캔버스의 카드 메모로 옵시디언 v1.1.3 부터 추가된 기능으로, 캔버스에서 마우스 오른쪽 클릭 후, **Add web page**를 선택하면 웹 사이트 URL을 넣을 수 있습니다. ![[Obsidian_Canvas_AddWebPage.jpg|230x300]] ![[Obsidian_Canvas_AddWebPage2.jpg|500x150]] URL을 입력 후, 아래와 같이 웹사이트의 내용을 [iFrame](https://www.freecodecamp.org/news/what-is-an-iframe-html-example/#:~:text=An%20iframe%20is%20an%20HTML,This%20is%20the%20same%20concept.) 형태로 불러와서 보여줍니다. Embedded 한 것이라, 웹 사이트의 메뉴를 클릭할 수도 있습니다. 유튜브 링크를 넣으면, 영상을 캔버스 안에서 바로 플레이할 수도 있습니다. ![[Obsidian_Canvas_AddWebPage3.jpg|400x500]] #### Google Keep을 캔버스에서 사용하기 구글 킵의 웹 사이트 URL(https://keep.google.com/)을 copy & paste 해서 캔버스에 넣으면, 구글 킵의 노트를 캔버스 안에서 편집할 수 있습니다. ![[Obsidian_Canvas_GoogleKeep.jpg]] --- ## 팁5 - Excalidraw를 캔버스에 임베드 하기 (mintbear) **Add web page** 기능은 웹 사이트, YouTube, Google Keep 뿐만 아니라, Gmail, TickTick, Notion, 심지어 Excalidraw까지 임베드가 가능합니다. 세컨드 브레인 그룹 민트베어님이 Excalidraw를 임베드 하는 방법과 테스트 영상을 잘 만들어주셨네요. 감사합니다! [Obsidian Canvas - How to add Excalidraw](https://mintbear.notion.site/Obsidian-Canvas-How-to-add-Excalidraw-d0b188f44aaa4a8a91f60bf1e78b196e) --- ## 팁6 - 앱 아이템을 캔버스에 연결하기 **[Things](https://culturedcode.com/things/)**와 같은 앱의 Tasks를 캔버스에 연결할 수도 있습니다. 하지만, Microsoft To-Do와 같은 앱은 안 되네요. 전 Dynalist를 To-Do 앱으로 사용하고 있는데, 이 앱도 안 되네요. Step 1. Things의 Task에서 오른쪽 마우스 클릭 후, Share를 클릭. ![[Obsidian_Canvas_Things_Share.jpg|350x400]] Step 2. 아래와 같은 메뉴가 뜨면, Copy Link를 클릭. ![[Obsidian_Canvas_Things_Share2.jpg|500x400]] Step 3. 캔버스에 Paste 하여 붙이고, 카드 내 링크를 Command/Ctrl + Mouse Clicking 하면 Things의 Task가 열림. ![[Obsidian_Canvas_Things_Share3.jpg|500x200]] --- ## 팁7 - 캔버스 확대 축소 캔버스의 확대, 축소는 오른쪽에 있는 +, - 아이콘으로 해도 되지만, Command/Ctrl + Mouse Scrolling으로도 편하게 캔버스 확대 축소가 가능합니다. --- ## 팁8 - 캔버스 연결선에 라벨 달기 캔버스 카드 간에 연결선(connection line)으로 연결 후, 상호 관계나 아이디어를 연결선에 라벨(label)로 달수 있습니다. ### 옵션1. 연결선을 더블 클릭 연결선을 더블 클릭한 후, 라벨에 글을 쓸 수 있습니다. ![[Obsidian_Canvas_Line_Label2.jpg|650x600]] ### 옵션2. 연결선을 클릭 후, Edit label 아이콘 선택 연결선을 클릭 후에 Edit label 아이콘을 클릭하고, 라벨에 글을 쓸 수 있습니다. ![[Obsidian_Canvas_Line_Label.jpg|450x450]] --- ## 팁9 - 카드 복제하기 복제(clone) 하기를 원하는 카드를 클릭 후, Option/Ctrl + Mouse Dragging 하면 카드를 복제할 수 있습니다. ![[Obsidian_Canvas_Card_Duplicate.jpg]] --- ## 팁10 - 카드를 노트(마크다운 파일)로 만들기 캔버스(Canvas)에서 만들어지는 카드(card)는 확장자 .md를 가진 마크다운(markdown) 파일이 아닙니다. 캔버스의 파일 확장자는 .canvas이고 [JSON](https://en.wikipedia.org/wiki/JSON) 형태로 만들어집니다. 하지만, 캔버스 안에 만들어진 카드도 쉽게 마크다운 파일 형태의 노트로 쉽게 변환할 수 있습니다. 캔버스에서 오른쪽 마우스 버튼 클릭 후, Convert to file을 선택하고 파일 이름을 주면 .md 파일이 만들어집니다. ![[Obsidian_Canvas_Convert2File.jpg|550x350]] ![[Obsidian_Canvas_Convert2File2.jpg|630x180]] --- ## 팁11 - 카드 내의 링크를 Drag & Drop 캔버스 카드 안에 있는 링크는 노트든 외부 URL 링크든 상관없이 마우스 Drag & Drop으로 카드를 바로 만들 수 있습니다. ![[Obsidian_Canvas_Link_DragnDrop.jpg|500x350]] --- ## 팁12 - 파일(노트)을 새로운 탭으로 열기 캔버스 노트(.md 파일)나 노트 안에 있는 노트 링크를 새로운 탭(new Tab) 열고 싶을 때는, Command/Ctrl + Mouse Clicking으로 노트의 타이틀 바(title bar)나 링크를 클릭하면 됩니다. ![[Obsidian_Canvas_NewTab.jpg]] --- ## 팁13 - 여러 카드를 그룹으로 만들기 Obsidian Desktop v1.1.4 (Insider build)에 추가된 기능입니다. 이제 여러 카드를 모아 그룹(group)으로 만들 수 있게 되었습니다. ### 옵션1. 카드 선택 후, 그룹 만들기 그룹을 만들기 위해서는 그룹핑을 원하는 카드를 마우스로 선택한 후, 상단에 있는 노트 제목 부분에 오른쪽 마우스 클릭하고, Create group을 선택합니다. (다른 곳에 하면 그룹이 해제될 수 있음) ![[Obsidian_Canvas_CreateGroup.jpg|550x500]] 그리고, 아래와 같이 제목(예: 두 번째 뇌 만들기)를 입력하면 됩니다. ![[Obsidian_Canvas_CreateGroup2.jpg|550x500]] ### 옵션2. 깔개(place mat) 먼저 만들고, 카드 넣기 캔버스 원하는 위치에 오른쪽 마우스 클릭 후, Create group을 선택해서 그룹의 제목을 입력합니다. 그리고, 그룹핑하기를 원하는 카드을 깔개 위에 drag & drop 해서 올려주면 됩니다. --- ## 팁14 - 카드 세로 크기 자동 조정하기 카드 하단의 라인을 더블 클릭하면, 카드의 세로 크기(높이)가 콘텐츠 크기에 맞게 자동으로 조정됩니다. 즉, 불필요한 공백을 없애줍니다. 아쉽게도 가로 크기(폭)는 조정이 안 되네요. ![[Obsidian_Canvas_Bottomline_DoubleClick_Resize.jpg]] 더블 클릭 후, 카드 크기가 변경된 모습. ![[Obsidian_Canvas_Bottomline_DoubleClick_Resize2.jpg]] --- ## 팁15 - Canvas MindMap 플러그인으로 카드 쉽게 만들기 보통 마인드맵 소프트웨어는 Tab 키로 쉽게 가지(branch) 노드를 만들 수 있습니다. 이 [Canvas MindMap](https://github.com/Quorafind/Obsidian-Canvas-MindMap) 플러그인은 아래 3가지 기능으로 쉽게 카드를 만들게 해줍니다. - 형제 카드(brother card)를 만들려면 Enter를 누르세요. - 하위 카드(child card)를 만들려면 Tab 키를 누르세요. - 레이아웃(layout)을 자동으로 재정렬하려면 카드를 삭제하세요. ![[Canvas_Mindmap_plugin-showcase.gif]] 2023년 1월 5일 현재, 서드파티(Community) 플러그인에 정식 등록되지 않은 플러그인이니, 아래 링크 참고하여 BRAT 플러그인을 통해서 설치하세요. [[옵시디언 플러그인 추천 - Obsidian42 - BRAT]] --- ## 캔버스(Canvas) 관련 단축키 - **Space + 캔버스 화면 마우스 dragging**: Move around (캔버스 화면 전체를 이동) - **Command(맥)/Ctrl(윈도우) + Mouse Scrolling**: Zoom in & out (Command 혹은 Ctrl 키를 누른 상태에서, 마우스 위로 스크롤하면 캔버스 전체가 확대(Zoom In), 아래로 스크롤하면 축소(Zoom Out) 됨) - **Command(맥)/Ctrl(윈도우) + Mouse Clicking**: Open a new Tab (파일을 새 탭으로 열기) - **Shift + Mouse Scrolling**: Scroll horizontally (Shift 키를 누른 상태에서 마우스를 아래로 스크롤하면 캔버스 화면 전체가 왼쪽으로, 위로 스크롤하면 오른쪽으로 움직임) - **Shift + 1**: Zoom to fit (캔버스 내용 전체를 한 화면에 보여줌) - **Shift + 2**: Zoom to selection (선택한 카드를 확대(Zoom In)에서 캔버스 가운데 보여줌) - **Option(맥)/Ctrl(윈도우) + Mouse Dragging**: Card clone (카드를 복제) ## References [Discord - Liam’s Canvas Protip#1](https://discord.com/channels/686053708261228577/716028884885307432/1049413731672666192) [Discord - Liam’s Canvas Protip#2](https://discord.com/channels/686053708261228577/716028884885307432/1049416529013395616) [kepano - a quick demo of the new Canvas view in Obsidian](https://twitter.com/i/status/1599879752185446400) [Nick Milo - a timelapse demo of the new Canvas view in Obsidian](https://twitter.com/NickMilo/status/1600151284580896769?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1600151284580896769%7Ctwgr%5Eccd2b75eea2a950d88fc70fed18e0ceabc417cec%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fblog.naver.com%2FPostView.naver%3FblogId%3Ddlsrkd101logNo%3D222950424192redirect%3DDlogwidgetTypeCall%3DtruetopReferer%3Dhttps3A2F2Fcafe.naver.com2FdirectAccess%3Dfalse) [Obsidian Canvas - YouTube](https://youtu.be/vLBd_ADeKIw) ## Links [[_Index_1_Obsidian]] [[옵시디언 캔버스(Canvas) 사용 사례 모음]] [[옵시디언 버전 업데이트(releases) 정보 - v1.1]] [[옵시디언 버전 업데이트(releases) 정보 - v1.1.x (Insider)]]