Obsidian Callouts: 문법, 유형, 예시 및 커스텀 CSS 가이드

Obsidian의 Callout(콜아웃/강조 블록)을 사용하면 인용구(Blockquote) 기반의 간단한 문법을 통해 노트 내 특정 내용을 강조하고, 그룹화하며, 숨길 수 있습니다. 시험 팁에 주의를 끌거나, 접을 수 있는 작업 목록을 만들거나, 원고 텍스트에서 저자 메모를 분리할 때, Callout은 작성 흐름을 방해하지 않고 정보를 시각적으로 정리할 수 있는 유연한 방법을 제공합니다.

빠른 답변: Obsidian Callout 생성 방법

Callout은 첫 번째 줄에 > [!type] 구문을 사용하는 스타일 적용 인용구 블록입니다. 본 가이드에서는 문법, 바로 복사하여 사용할 수 있는 예시, 내장 유형, 접기 및 중첩 규칙, 그리고 흔히 발생하는 커스텀 CSS 문제 해결 방법까지 다룹니다. 최신 유형 목록과 명령어는 공식 Callout 도움말을 참고하세요.

Callout을 생성하는 기본 문법은 다음과 같습니다:

> [!note] 이것은 콜아웃입니다.

• 인용구 블록의 첫 번째 줄에 > [!type]을 사용합니다.

• note 부분을 tip, warning, question과 같은 다른 유형으로 교체하세요.

• Enter를 누른 후 > 기호로 계속 작성하여 여러 줄 콘텐츠를 추가합니다.

• 라이브 프리뷰(Live Preview) 모드에서는 명령어 팔레트를 열어 Insert callout을 선택하면 기본 Callout 블록을 즉시 삽입할 수 있습니다. 기존 텍스트를 선택한 후 동일한 명령을 실행하면 선택 영역이 Callout으로 감싸집니다.

Obsidian Callout이란 무엇인가?

Callout은 Obsidian이 색상, 아이콘, 선택적 접기(Folding) 동작을 적용하여 렌더링하는 스타일화된 인용구 블록입니다. 2022년 중반에 도입되어 노트를 시각적으로 정리하는 핵심 기능으로 자리 잡았습니다.

Obsidian은 [!type]으로 시작하는 인용구 블록을 만나면 이를 특별하게 파싱하여 단순 인용구가 아닌 Callout 상자로 표시합니다. 내부 본문에는 표준 Markdown 문법, 위키링크, 임베드, 작업(Task), 코드 블록, 내부 링크를 모두 사용할 수 있습니다.

시각적으로 Callout은 색상이 들어간 사이드바, 아이콘(팁의 경우 전구, 경고의 경우 느낌표 등), 선택적 제목 표시줄, 그리고 아래쪽 본문 텍스트로 구성됩니다.

주요 활용 예시는 다음과 같습니다:

• 회의록 상단에 핵심 요약 작성

• 공부 노트에서 시험 관련 핵심 내용 강조

• 도서 서평 노트에 스포일러 방지 상자 추가

Callout은 Obsidian 내부에서만 이 디자인으로 렌더링됩니다. 일반 Markdown 뷰어나 GitHub에서는 일반 중첩 인용구 블록으로 표시되며, 스타일만 적용되지 않을 뿐 내용은 그대로 읽을 수 있습니다.

Callout 문법 및 설정

이 섹션에서는 유형, 제목, 접기 및 본문 콘텐츠 등 모든 문법 요소를 다룹니다.

기본 구조는 다음과 같습니다:

> [!note] 제목 텍스트
> 본문 내용이 여기에 들어갑니다.
> - 글머리 기호도 작동합니다.

첫 번째 줄은 세 부분으로 구성됩니다:

• 대괄호 안의 유형 식별자: [!note], [!warning], [!tip]

• 선택적 접기 마커: 유형 바로 뒤의 + 또는 - (예: [!tip]-)

• 유형 뒤의 선택적 커스텀 제목 텍스트 (예: [!tip] 시험 팁)

본문 줄은 일반 인용구처럼 >로 시작하며 글머리 기호, 코드 블록, 이미지, 작업 체크박스를 포함할 수 있습니다.

유형 키워드는 대소문자를 구분하지 않습니다. 내장 Callout의 경우 [!NOTE], [!Note], [!note] 모두 동일하게 작동합니다.

Callout 제목 변경하기

기본적으로 Obsidian은 유형 이름을 제목으로 사용합니다 (예: “Note” 또는 “Warning”).

기본 제목을 변경하려면 다음과 같이 작성합니다:

> [!warning] 배포 전에 반드시 읽으세요

다음 두 가지 방식을 비교해 보세요:

• > [!tip] 은 기본 “Tip” 헤더로 표시됩니다.

• > [!tip] 더 빠른 워크플로우 는 대신 “더 빠른 워크플로우”로 표시됩니다.

제목만 있는 Callout도 가능합니다. 본문 줄 없이 > [!info] 시스템 요구사항과 같이 한 줄만 작성하세요.

제목에는 이모지, 위키링크 및 굵은 글씨와 같은 서식을 포함할 수 있습니다.

접을 수 있는 (Collapsible) Callouts

유형 바로 뒤에 플러스(+) 또는 마이너스(-) 기호를 붙여 Callout을 접을 수 있는지 여부를 제어합니다:

• > [!note]+ 기본적으로 항상 펼쳐진 상태

• > [!note]- 기본적으로 접힌 상태

두 마커 모두 Callout을 접을 수 있게 만듭니다. 기호는 처음 상태가 열려있는지 닫혀있는지를 결정합니다.

접을 수 있는 Callout의 실용적인 활용 사례:

• 학습 노트에서 상세 풀이 과정 숨기기

• 긴 체크리스트를 [!todo]- 헤더 아래로 접어두기

• 독서 노트에서 스포일러 숨기기

읽기 모드 및 라이브 프리뷰 모드에서 사용자는 삼각형 아이콘을 클릭하여 펼치거나 접을 수 있습니다. 소스 코드 모드에서는 접기 마커가 원시 Markdown으로 표시됩니다.

중첩된 Callouts

부모 Callout의 본문 안에 다른 Callout 블록을 넣어 Callout을 중첩할 수 있습니다.

내부 Callout 줄은 중첩 수준마다 > 기호를 하나씩 더 사용합니다:

> [!warning] 잠재적 문제
>> [!tip] 임시 해결책

이렇게 하면 중첩된 팁을 포함하는 경고 Callout이 생성됩니다. 다른 예시로 중첩된 [!example] 답변을 포함하는 [!question]이 있습니다.

가독성을 위해 중첩 깊이는 제한하세요. 보통 2단계 중첩이면 충분합니다.

Obsidian에서 지원하는 Callout 유형

Obsidian에는 색상 및 아이콘과 매핑된 기본 내장 유형이 제공됩니다. 지원되지 않는 유형은 기본 note 스타일로 대체됩니다.

주요 기본 유형 및 별칭:

• note: 일반 정보

• abstract / summary / tldr: 요약

• info: 추가 문맥 설명

• todo: 작업 및 실행 항목

• tip / hint / important: 조언 및 핵심 포인트

• success / check / done: 완료된 항목

• question / help / faq: 질문

• warning / caution / attention: 잠재적 문제

• failure / fail / missing: 누락된 정보

• danger / error: 심각한 문제

• bug: 소프트웨어 버그

• example: 코드 또는 개념 예시

• quote / cite: 인용구

서로 다른 커뮤니티 테마는 이러한 유형의 스타일을 재정의할 수 있으므로 동일한 [!warning]도 테마에 따라 다르게 보일 수 있습니다.

라이브 프리뷰 모드에서는 Callout의 사이드바 영역을 우클릭하여 수동 수정 없이 컨텍스트 메뉴에서 유형을 변경할 수 있습니다.

[!idea]와 같은 알 수 없는 유형은 시각적으로 note로 표시되지만 CSS 타겟팅에는 여전히 사용할 수 있습니다.

어떤 Callout을 사용해야 할까요?

유형은 단순한 색상뿐만 아니라 정보의 신호를 제어합니다. 나중에 노트를 훑어볼 때 무엇을 해야 할지 즉시 알 수 있도록 나만의 규칙을 정해두세요:

신호하고자 하는 내용	추천 시작 유형	유용한 패턴
컨텍스트 또는 정의	info 또는 abstract	설명하고자 하는 주장 바로 옆에 위치시킵니다.
다음 실행 항목	todo	체크리스트를 프로젝트나 회의 맥락 가까이에 둡니다.
결정 사항 또는 리스크	question, warning 또는 커스텀 유형	미해결된 지점을 본문에 묻히지 않고 눈에 띄게 만듭니다.
가끔만 확인하면 되는 세부 사항	접을 수 있는 example 또는 note	-를 사용하여 보조 세부 정보를 기본적으로 접어둡니다.
완료된 결과	success 또는 done	단순 긍정 문장이 아닌 명확한 결과물에만 사용합니다.

생산성 볼트를 위한 실용적인 최소 세트는 작업용 todo, 차단 요소용 warning, 미결정 사항용 question, 복습 노트용 summary입니다.

볼트에서 Callout을 활용하는 실용적인 방법

실제 워크플로우에 Callout이 적용되는 방식:

• 학습 및 시험 준비: 시험 팁에는 [!tip], 접힌 풀이가 포함된 연습 문제에는 [!question]-, 강의 노트 상단에는 [!summary] 사용

• 소프트웨어 개발: 파괴적인 명령 주변에는 [!warning], 알려진 이슈에는 [!bug], API 코드 예시에는 [!example] 추가

• 프로젝트 및 작업 관리: 마일스톤별로 그룹화된 [!todo]+ Callout에 체크리스트를 저장하고 완료 시 [!success]로 변경

• 긴 글 쓰기: [!note]-나 커스텀 유형을 사용하여 저자 메모를 분리하고, 초고에서 복선이나 힌트를 [!clue]로 표시

• 개인 지식 베이스: 핵심 사실에는 [!info], 인용구에는 [!quote], 치명적 경고에는 [!danger] 사용

Callout이 이미 반영된 Obsidian 템플릿 예시를 활용해 보세요. 회의 워크플로우는 Obsidian 회의 템플릿 가이드를 참고하세요.

작업 및 체크리스트를 위한 Callout

Callout 내부의 작업(Task)은 일반 Obsidian 작업처럼 동작하며 전체 작업 검색에 나타납니다.

[!todo] Callout은 관련 체크박스들을 그룹화합니다:

> [!todo]+ 1.2 배포 체크리스트
> - [ ] 2025-04-01 배포를 위한 CHANGELOG 업데이트
> - [ ] 회귀 테스트 실행

유형을 todo에서 success로 변경하여 전체 블록의 완료를 시각적으로 나타낼 수 있습니다.

출판 워크플로우에서의 Callout

Callout은 내부 편집용 도구이므로 책, PDF, 블로그 게시물과 같은 최종 내보내기물에는 포함되지 않아야 하는 경우가 많습니다.

Longform과 같은 플러그인은 컴파일 전에 Callout 마크업을 제거하는 전처리 단계를 제공합니다. 스크립트가 > [!로 시작하는 줄을 스캔하여 본문은 유지하거나 폐기하면서 래퍼를 제거합니다.

CSS로 Callout 맞춤 설정하기

Obsidian은 data-callout 속성을 통해 Callout을 노출하므로 커스텀 CSS로 나만의 유형을 정의할 수 있습니다.

패턴:

1. idea와 같은 커스텀 유형 식별자 선택

2. 노트에서 사용: > [!idea] 신제품 아이디어

3. CSS에서 .callout[data-callout="idea"]를 타겟팅하여 나만의 색상과 아이콘 지정.

Obsidian은 Lucide 아이콘을 사용합니다. 지원되는 CSS API는 --callout-color 및 --callout-icon을 사용하며, Callout CSS 변수 개발자 참조에서 사용 가능한 변수 목록을 확인할 수 있습니다.

유용한 커스텀 Callout 예시

구체적인 커스텀 유형 아이디어:

• [!clue]: 소설가가 장 전체에 걸쳐 복선이나 힌트를 추적할 때 사용

• [!risk]: 엔지니어링 문서에서 기술적 또는 비즈니스 리스크를 표시할 때 사용

• [!meeting]: 날짜가 지정된 회의록 상단에 실행 요약을 작성할 때 사용

• [!definition]: 지식 베이스에서 용어 정의 항목을 표준화할 때 사용

볼트의 .obsidian/snippets 폴더에 CSS 스니펫을 추가하여 이러한 스타일을 적용하세요.

커스텀 CSS 문제 해결

다음 순서대로 확인해 보세요:

1. CSS 파일을 볼트의 .obsidian/snippets 폴더에 넣고, 설정 → 테마/외관 → CSS 스니펫에서 활성화한 후 스니펫을 새로고침합니다.
2. 노트의 유형과 CSS 선택자가 정확히 일치하는지 확인하세요. (예: [!decision]은 .callout[data-callout="decision"] 필요).
3. 커스텀 유형 이름은 두 곳 모두에서 소문자로 유지하세요. 내장 식별자는 대소문자를 구분하지 않지만, Obsidian 포럼 문제 해결 보고서에 따르면 대소문자 불일치로 인해 커스텀 선택자가 일치하지 않을 수 있습니다.
4. 사용 중인 Obsidian 버전에서 지원하는 아이콘을 사용하세요.

Callout 검색, 관리 및 내보내기

"[!todo]"와 같은 쿼리를 검색하여 모든 todo Callout을 찾을 수 있습니다. 경로 필터와 조합: path:"Drafts" "[!clue]".

한계점 및 호환성 참고 사항

Callout은 표준 CommonMark 사양의 일부가 아닙니다. Typora나 GitHub 같은 편집기에서는 일반 중첩 인용문 블록으로 단순화됩니다.

일부 모바일 Markdown 앱에서는 일반 텍스트로 표시됩니다. 콘텐츠는 읽을 수 있지만 색상이나 아이콘은 표시되지 않습니다.

중첩 및 접을 수 있는 Callout을 과도하게 사용하면 이전 모바일 기기에서 렌더링이 느려질 수 있습니다.

내보내기 파일(PDF, DOCX, HTML)을 주기적으로 테스트하여 Callout 내부의 중요한 콘텐츠가 올바르게 표시되는지 확인하세요. 협업자가 동일한 규칙을 따를 수 있도록 볼트에 스타일 가이드 문서를 유지하는 것을 고려하세요.

흔한 문법 실수

접기 마커는 유형 식별자에 바로 붙어 있어야 합니다:

> [!faq]- 기본적으로 접힘
> 이 콘텐츠는 처음에 숨겨집니다.

> [!faq] - 기본적으로 접힘은 하이픈 앞에 공백이 있으므로 문서화된 접기 문법이 아닙니다. 접기가 계속 작동하지 않는 경우 노트가 읽기 뷰 또는 라이브 프리뷰 상태인지 확인하고 블록을 공식 예시와 비교하세요. 2024년 Obsidian 포럼 보고서에서는 추가 공백이 접히지 않는 원인으로 밝혀졌습니다.

Callout은 Obsidian의 확장 기능이며 표준 CommonMark의 일부가 아닙니다. 다른 Markdown 편집기에서 Callout이 일반 인용문 블록으로 표시되는 것은 정상입니다. 콘텐츠는 읽을 수 있는 상태로 유지되지만 Obsidian의 스타일 및 접기 동작은 전달되지 않을 수 있습니다.

결론

Obsidian Callout은 노트 작성 흐름을 방해하지 않으면서 정보를 강조하고, 그룹화하며, 숨길 수 있게 해주는 향상된 인용구 블록입니다.

핵심 요약:

• 기본 문법을 익히세요: > [!type] 제목

• 내 워크플로우에 맞는 소수의 유형을 선택하세요

• 커스텀 CSS는 프로세스에 꼭 필요한 경우에만 추가하세요

일일 노트, 프로젝트, 리뷰 및 회의 템플릿이 처음부터 연결된 시스템을 원하신다면, Obsibrain은 Obsidian을 위한 완성형 로컬 시스템을 제공합니다.