[옵시디언] 콜아웃(Callout)과 CSS 스니펫으로 노트 가독성 극대화하기

 옵시디언(Obsidian)에 매일 메모를 쌓고 링크를 연결하다 보면 문득 한 가지 아쉬움이 생깁니다. 마크다운(Markdown) 기반이다 보니, 작성된 노트가 검은 바탕에 흰 글씨만 있는 '메모장'처럼 다소 밋밋해 보인다는 점입니다.

특히 긴 강의를 요약하거나 복잡한 업무 매뉴얼을 작성할 때, 텍스트만 빼곡하면 나중에 다시 읽어볼 엄두가 나지 않습니다. 노션(Notion)처럼 핵심 내용을 예쁜 박스 안에 넣거나 아이콘으로 강조하고 싶어지죠. 오늘은 복잡한 플러그인 설치 없이도 내 노트를 전문가의 기술 블로그처럼 세련되게 만들어주는 기본 기능 '콜아웃(Callout)'과 가벼운 맞춤형 디자인 도구인 'CSS 스니펫' 활용법을 소개합니다.

1. 콜아웃(Callout)이란 무엇인가?

콜아웃은 옵시디언에서 기본적으로 제공하는 '강조 박스' 기능입니다. 텍스트에 특정 문법을 입력하면, 배경색이 칠해진 네모난 박스 안에 텍스트가 들어가고 좌측 상단에 직관적인 아이콘이 표시됩니다.

정보의 성격에 따라 '경고, 팁, 정보, 질문' 등으로 박스의 색상과 아이콘을 다르게 지정할 수 있어, 긴 글 속에서 독자(혹은 미래의 나)의 시선을 단번에 사로잡는 역할을 합니다.

2. 바로 복사해서 쓰는 콜아웃 기본 문법

콜아웃을 만드는 방법은 매우 간단합니다. 앞서 1편에서 배운 인용구 문법인 꺾쇠(>) 기호를 활용합니다. 꺾쇠 뒤에 띄어쓰기를 한 번 하고, 대괄호 안에 느낌표와 키워드를 대문자로 적어주면 됩니다.

[실무에서 가장 많이 쓰는 4가지 콜아웃]

  1. 정보 요약 박스 (파란색 계열) > [!INFO] > 여기에 핵심 정보나 요약본을 적습니다.

  2. 꿀팁 및 노하우 (초록색 계열) > [!TIP] > 실무에서 발견한 나만의 팁이나 단축키를 기록합니다.

  3. 주의 및 경고 (빨간색 계열) > [!WARNING] > 절대 지우면 안 되는 파일 경로나, 흔히 하는 실수 등을 강조합니다.

  4. 인용 및 참조 (회색 계열) > [!QUOTE] > 외부 기사나 책에서 발췌한 원문을 눈에 띄게 분리해 둡니다.

이 외에도 [!NOTE], [!FAQ], [!BUG] 등 수십 가지의 기본 키워드가 내장되어 있으니, 글의 성격에 맞게 골라서 사용해 보세요.

3. 방대한 자료를 숨겨주는 '접기/펴기(Foldable)' 기능

제가 콜아웃을 가장 사랑하는 이유는 바로 '접고 펴기(아코디언 기능)'가 가능하기 때문입니다.

예를 들어, 프로그래밍 코드의 에러 로그나 책의 긴 발췌문은 그 자체로 의미가 있지만, 노트 전체의 스크롤을 너무 길게 만들어 가독성을 해칩니다. 이때 콜아웃 키워드 바로 뒤에 마이너스(-) 기호나 플러스(+) 기호를 붙이면 마법이 일어납니다.

  • 기본적으로 접어두기: > [!INFO]-

  • 기본적으로 펴두기: > [!INFO]+

이렇게 - 기호를 붙여두면, 평소에는 콜아웃의 제목(한 줄)만 보이다가, 화살표 아이콘을 클릭했을 때만 아래로 숨겨진 긴 내용이 펼쳐집니다. 이 기능을 활용하면 아무리 긴 문서라도 목차처럼 깔끔하게 압축해서 관리할 수 있습니다.

4. CSS 스니펫(Snippet)으로 나만의 테마 한 스푼 얹기

콜아웃으로 내용의 구조를 잡았다면, 이제 폰트 크기나 체크박스 모양 등 디테일한 디자인을 수정하고 싶어질 수 있습니다. 옵시디언은 전체 '테마(Theme)'를 바꿀 수도 있지만, 테마가 무거워지면 앱 속도가 느려질 수 있습니다.

이때 사용하는 것이 'CSS 스니펫'입니다. 전체 테마는 건드리지 않고, '형광펜 색깔만 노란색으로 바꾼다'거나 '체크박스를 동그라미로 바꾼다'처럼 아주 일부분의 디자인만 코드로 덮어씌우는 가벼운 방법입니다.

[CSS 스니펫 적용하는 방법]

  1. 옵시디언 설정(Settings) > 테마(Appearance) 메뉴로 들어갑니다.

  2. 스크롤을 내려 'CSS snippets' 항목을 찾은 뒤, 폴더 아이콘을 클릭합니다.

  3. 그러면 컴퓨터에 숨겨져 있던 .obsidian/snippets 라는 폴더가 열립니다.

  4. 인터넷이나 커뮤니티에서 구한 CSS 파일(예: custom-checkbox.css)을 이 폴더 안에 넣습니다.

  5. 옵시디언 설정 화면에서 새로고침 버튼을 누르고, 해당 스니펫의 토글을 '켜기' 상태로 만들면 즉시 디자인이 변경됩니다.

5. 내가 겪은 실수: '꾸미기 병'의 함정 주의하기

이 글을 쓰면서도 가장 우려되는 점이 있습니다. 바로 옵시디언 유저들의 고질병인 '꾸미기(세팅) 병'입니다.

저 역시 초기에는 깃허브(GitHub)와 해외 포럼을 뒤지며 화려한 CSS 코드들을 수십 개씩 다운받아 적용해 보았습니다. 하지만 옵시디언 버전이 업데이트될 때마다 구형 CSS 코드들이 깨지면서 노트의 글씨가 겹치거나 체크박스가 사라지는 대참사를 여러 번 겪었습니다. 오류를 고치느라 정작 중요한 글쓰기는 뒷전이 되곤 했죠.

결론적으로, 지식 관리 시스템은 '안정성'이 최우선입니다. CSS 스니펫은 꼭 필요한 1~2개(예: 글꼴 크기 미세조정, 눈이 편한 형광펜 색상) 정도만 가볍게 사용하시고, 텍스트를 구조화하고 강조하는 작업은 기본 기능인 '콜아웃'만으로 해결하는 것을 강력히 권장합니다.

[핵심 요약]

  • 콜아웃(Callout)은 옵시디언에서 텍스트를 눈에 띄는 색상 박스 아이콘으로 감싸주어 문서의 가독성을 극대화하는 기본 문법이다.

  • > [!INFO]- 처럼 키워드 뒤에 마이너스 기호를 붙이면 긴 텍스트를 숨겨두고 필요할 때만 펼쳐보는 아코디언 기능을 구현할 수 있다.

  • CSS 스니펫은 앱의 일부분만 디자인을 수정하는 가벼운 방법이지만, 업데이트 시 충돌 위험이 있으므로 과도한 꾸미기는 피하는 것이 좋다.

[다음 편 예고] 

지금까지 텍스트를 깔끔하게 정리하는 법을 알아보았습니다. 하지만 텍스트만으로는 도저히 복잡한 생각이나 기획을 정리하기 어려울 때가 있죠. 다음 13편에서는 옵시디언 안에서 무한한 도화지를 펼쳐놓고 마인드맵과 브레인스토밍을 할 수 있는 "캔버스(Canvas) 기능으로 마인드맵 구현하기"를 알아보겠습니다.

[댓글 질문] 

여러분은 평소 중요한 문서를 작성하거나 공부 노트를 정리할 때, 가장 자주 사용하는 형광펜이나 강조 색상은 무엇인가요? (예: 핵심은 무조건 빨간색, 예시는 파란색 등) 여러분만의 강조 규칙을 공유해 주세요!

댓글

댓글 쓰기

이 블로그의 인기 게시물

침대에서 누워서 노트북 하기, 스트럭쳐랩 올인원 플로우 스탠드 내돈내산 실사용기

이미지
퇴근하고 씻고 누우면 다시 일어나서 책상 앞에 앉기가 참 쉽지 않죠. 저 역시 침대 위에서 모든 걸 해결하는 '베드 스테이션'을 꿈꾸며 누워서 쓸 수 있는 스탠드를 찾다가, 쿠팡에서 허리디스크 환자분이 누워서 쓰기 좋다는 후기를 보고 '스트럭쳐랩 올인원 플로우 스탠드'를 들여왔습니다. 결론부터 말씀드리면, 몇 달간 제 침대 옆을 지켜주고 있습니다. 직접 써보면서 느낀 찐 장단점을 솔직하게 정리해 볼게요. 내가 이 기기에 꽂힌 이유 저는 평소에 누워서 노트북이나 태블릿을 편하게 조작할 수 있는 환경에 진심인 편이에요. 처음엔 '누워서 쓰다가 노트북이 내 얼굴로 떨어지면 어쩌지?' 하는 공포감이 제일 컸습니다. 하지만 침대 사이드에 세워두고 완전히 누운 상태에서 화면을 아래로 내려다볼 수 있는 기가 막힌 수직 각도를 지원한다는 점, 그리고 튼튼한 알루미늄 소재라는 점에 꽂혀서 바로 결제했습니다. 색상도 칙칙한 블랙 대신 깔끔한 실버라 방 인테리어와도 잘 어울렸어요. [사진 출처 : 제품 공식 상세 페이지] 며칠 써보며 느낀 찐 장점 직접 15인치 노트북을 물려놓고 써보면서 느낀 가장 큰 장점들은 이렇습니다. 절대 얼굴로 떨어지지 않는 각도 설계: 보통 노트북 거치대는 아래를 받쳐주는 '턱'이 있어야 안전하다고 생각하잖아요? 그런데 이 제품은 집게 부분에 턱이 없습니다. 처음엔 불안했는데, 막상 써보니 노트북이 쏟아질 만한 각도까지만 딱 세워지도록 락(Lock)이 걸려 있는 방식이라 전혀 위험하지 않았어요. 15인치 무거운 노트북을 달아놔도 불안한 적이 한 번도 없었습니다. 턱이 없어서 편한 타이핑: 오히려 턱이 없다는 게 신의 한 수였어요. 누워서 자판을 칠 때 양쪽 끝에 걸리는 게 없으니까 너무 편하더라고요. 미세한 각도 조절 (스위블): 노트북 거치 부분이 돌아갑니다. 아예 90도로 꺾여서 돌아가는 건 아니지만, 옆으로 살짝 누웠을 때 화면을 내 쪽으로 미세하게 틀 수 ...
자세한 내용 보기

옵시디언과 깃허브(GitHub) 연동으로 무료 동기화 및 백업 구축하기

옵시디언(Obsidian)은 모든 데이터가 내 컴퓨터 하드디스크에 텍스트 파일(.md)로 저장되는 '로컬 기반' 프로그램입니다. 서버가 해킹당하거나 서비스가 종료되어도 내 메모는 안전하다는 엄청난 장점이 있죠. 하지만 치명적인 단점도 존재합니다. 데스크톱에서 작성한 메모를 퇴근길에 스마트폰이나 노트북에서 이어서 보기가 까다롭다는 점입니다. 공식 서비스인 '옵시디언 싱크(Obsidian Sync)'를 결제하면 매우 편하지만, 매월 구독료가 부담스러울 수 있습니다. 그래서 초기 사용자들은 구글 드라이브나 아이클라우드에 폴더를 넣고 동기화를 시도합니다. 제가 바로 그렇게 하다가 큰코다친 케이스입니다. 오늘은 클라우드 동기화의 한계와, 개발자들의 무기인 '깃허브(GitHub)'를 활용해 가장 안전하고 무료로 옵시디언을 동기화하는 방법을 제 경험을 바탕으로 안내해 드립니다. 1. 구글 드라이브 대신 깃허브(GitHub)를 써야 하는 이유 처음엔 저도 구글 드라이브 데스크톱 앱을 통해 옵시디언 볼트(Vault) 폴더를 동기화했습니다. 하지만 며칠 지나지 않아 심각한 문제가 발생했습니다. 클라우드 드라이브는 실시간 동기화를 시도하기 때문에, 옵시디언의 설정 파일이나 플러그인 캐시 파일이 충돌을 일으킵니다. 결국 파일명 뒤에 '(충돌된 사본)'이라는 이름표가 붙은 쓰레기 파일들이 수백 개씩 증식하면서 앱이 멈춰버렸습니다. 반면 깃허브(GitHub)는 '버전 관리'에 특화된 시스템입니다. 충돌 방지: 내가 '저장(Commit)'하고 '업로드(Push)'하는 시점에만 동기화가 일어나므로 파일이 꼬일 확률이 현저히 적습니다. 완벽한 백업 및 복구: 실수로 중요한 노트를 지우거나 덮어써도, 깃허브에는 과거의 모든 수정 기록(버전)이 남아있어 클릭 몇 번이면 언제든 과거 상태로 되돌릴 수 있습니다. 노트 관리에 있어 이보다 든든한 보험은 없습니다. 2. 깃허브 연동 전 필수 준비물 3...
자세한 내용 보기

옵시디언 필수 마크다운 문법 총정리 (체크박스, 링크, 텍스트 양식)

이미지
 옵시디언(Obsidian)을 처음 설치하고 빈 화면을 마주하면 막막함이 앞섭니다. 화려한 플러그인이나 복잡한 세팅 이전에 가장 먼저 익혀야 할 것은 바로 글을 구조화하는 '마크다운(Markdown)' 문법입니다. 제가 처음 기술 블로그 글쓰기와 아이디어 정리를 위해 옵시디언을 도입했을 때, 이 기초 양식들을 손에 익히는 것만으로도 작성 속도가 비약적으로 상승하는 것을 경험했습니다. 마우스로 서식 버튼을 누를 필요 없이 키보드 위에서 모든 문서 작업이 끝나기 때문입니다. 오늘은 옵시디언에서 가장 자주 쓰이고 실무에 직결되는 필수 양식(체크박스, 내부/외부 링크, 강조 등)을 완벽하게 정리해 드리겠습니다. 1. 텍스트 강조 및 기본 포맷팅 문서의 가독성을 높이기 위해 텍스트의 형태를 변경하는 가장 기본적인 양식입니다. 굵게 (Bold): 텍스트 양쪽에 별표 두 개(**)를 입력합니다. 작성 예시: ** 중요한 내용입니다.** 기울임 (Italic): 텍스트 양쪽에 별표 한 개(*) 또는 밑줄(_)을 입력합니다. 작성 예시: *강조하고 싶은 말* 취소선 (Strikethrough): 텍스트 양쪽에 물결표 두 개(~~)를 입력합니다. 작성 예시: ~~수정 전 내용~~ 하이라이트 (Highlight): 텍스트 양쪽에 등호 두 개(==)를 입력합니다. 옵시디언 특유의 형광펜 효과를 줍니다. 작성 예시: 이 부분은 ==핵심 키워드== 입니다. 처음엔 기호가 헷갈릴 수 있지만, 일주일만 꾸준히 써보면 손가락이 자동으로 반응하게 됩니다. 특히 블로그 포스팅 초안을 잡을 때, 하이라이트(==) 기능으로 나중에 수정해야 할 문구를 눈에 띄게 표시해 두면 유용합니다. 2. 생각의 구조화: 목록과 할 일 관리 (체크박스) 복잡한 정보를 다루거나 프로젝트 일정을 정리할 때 빠질 수 없는 기능입니다. 순서 없는 목록 (Bullet Points): 하이픈(-) 또는 별표(*) 뒤에 띄어쓰기를 한 번 하면 생성됩니다. 탭(Tab) 키를 누르면 하위 목록으로 들어갑니다....
자세한 내용 보기