컨텐츠로 건너뛰기

콜아웃과 인용

이 문서는 강조 블록과 인용 블록을 실제 운영 문서 패턴으로 나누어 설명합니다. 각 디렉티브마다 한 줄, 멀티라인, 다른 요소 포함 예시를 제공해 상황별 작성 기준을 통일할 수 있도록 구성했습니다. 문서 작성 시에는 목적이 다른 정보를 한 블록에 섞지 않고, 디렉티브별 역할을 분리해 유지하는 것이 핵심입니다.

note

사용목적

note는 일반 안내나 보조 설명을 전달할 때 사용합니다. 경고 수준이 아닌 정보성 메시지를 안정적으로 분리해 문서 읽기 흐름을 유지할 수 있습니다.

작성 방법

짧은 안내는 한 줄로 쓰고, 절차/조건이 붙으면 멀티라인으로 확장합니다. 다른 요소를 함께 넣을 때는 note 안에서 정보 계층이 보이도록 문단과 목록을 분리합니다.

작성 문법 (한 줄)

:::note
이 설정은 선택 항목입니다.
:::

렌더링 (한 줄)

작성 문법 (멀티라인)

:::note
이 기능은 기본적으로 비활성화되어 있습니다.
활성화 전에는 권한 범위를 먼저 확인하세요.
:::

렌더링 (멀티라인)

작성 문법 (다른 요소 포함)

:::note
적용 전 확인 항목:
- 권한 상태 확인
- 로그 수집 경로 확인
참고 명령: `pnpm run build`
:::

렌더링 (다른 요소 포함)

작성 문법 (상황 점검 케이스)

:::note
점검 케이스는 한 줄, 멀티라인, 목록, 링크, 인라인 코드를 함께 확인하기 위한 예시입니다.
- 단일 항목: 권한 확인
- 다중 항목: 로그 경로 확인 후 `pnpm run build` 실행
- 링크 항목: [배포 상태 페이지](https://status.snd.im/)
추가 안내 문장은 목록 아래 문단으로 분리해도 동일한 톤으로 렌더링되어야 합니다.
:::

렌더링 (상황 점검 케이스)

caution

사용목적

caution은 실수 비용이 큰 변경이나 사고 가능성이 있는 작업을 안내할 때 사용합니다. 실행 전 확인이 필요한 조건을 강하게 강조해 오작업을 줄이는 데 목적이 있습니다.

작성 방법

경고 문장은 결론부터 짧게 쓰고, 필요한 경우 바로 아래에 이유와 조건을 추가합니다. 긴 경고는 목록으로 나누어 확인 포인트를 명확히 제시합니다.

작성 문법 (한 줄)

:::caution
운영 값 변경은 승인 후 진행하세요.
:::

렌더링 (한 줄)

작성 문법 (멀티라인)

:::caution
이 작업은 실시간 트래픽에 영향을 줄 수 있습니다.
적용 전 롤백 담당자와 복구 절차를 먼저 확인하세요.
:::

렌더링 (멀티라인)

작성 문법 (다양한 서식 포함)

:::caution
이 작업은 실시간 트래픽에 영향을 줄 수 있으므로, 사전 점검을 완료한 뒤 진행해야 합니다.
아래 항목을 순서대로 확인하세요.
- 승인 상태 확인
- 장애 대응 담당자 확인
- 로그 수집 경로 확인
```bash
pnpm run build
pnpm run preview
```
참고 링크: [운영 상태 페이지](https://status.snd.im/)
:::

렌더링 (다양한 서식 포함)

update

사용목적

update는 문서 갱신 상태를 표준 문구로 표시할 때 사용합니다. 독자가 문서 최신성 기대치를 초기에 이해할 수 있도록 도와줍니다.

작성 방법

보통 블록만 삽입해 공통 문구를 자동 노출합니다. 문서별로 별도 문구가 필요할 때만 사용자 정의 텍스트를 고려합니다.

작성 문법

:::update
:::

렌더링

이 문서는 비정기적으로 업데이트됩니다.

noti

사용목적

noti는 공통 공지 문구를 문서 상단에 일관되게 노출할 때 사용합니다. 환경 차이나 버전 차이처럼 오해가 잦은 항목을 미리 안내하는 데 적합합니다.

작성 방법

문서 도입부 근처에 배치해 독자가 본문 전에 안내를 확인하도록 구성합니다. 동일 프로젝트에서는 표현을 통일해 문서 품질 편차를 줄입니다.

작성 문법

:::noti
:::

렌더링

이 문서는 튜토리얼 환경을 기준으로 작성되었습니다. 설정과 화면은 버전에 따라 달라질 수 있으므로 최신 기준은 doc.snd.im에서 함께 확인하세요.

env

사용목적

env는 실행 환경 정보를 별도 블록으로 명확히 표시할 때 사용합니다. 재현성 검증이 중요한 문서에서 조건 차이를 빠르게 파악할 수 있습니다.

작성 방법

OS, 버전, 빌드 정보처럼 재현에 영향을 주는 핵심 값만 먼저 기록합니다. 환경 설명이 길어지면 본문으로 분리하고 env에는 요약값만 남기는 것이 좋습니다.

작성 문법

:::env
윈도우 11 Pro (빌드: 22631)
:::

렌더링

Lorem ipsum OS v2.0 (빌드: 20250518) / Node 20.x / pnpm 9.x

url

사용목적

url 디렉티브는 일반 본문 링크보다 높은 가시성으로 참고 링크를 노출할 때 사용합니다. 외부 가이드, 상태 페이지, 배포 주소처럼 반복 접근이 필요한 링크를 명확히 분리할 수 있습니다.

작성 방법

url 블록은 한 번에 하나의 주소만 노출하는 방식으로 사용합니다. 링크가 여러 개라면 문서 목적에 맞는 대표 주소를 하나 선택하고, 나머지는 일반 본문 링크로 분리하는 것을 권장합니다.

작성 문법 (단일)

:::url
https://doc.snd.im/
:::

렌더링 (단일)

point

사용목적

point는 핵심 요약이나 반드시 기억해야 할 결론을 강조할 때 사용합니다. 긴 문서에서도 독자가 핵심 메시지를 빠르게 스캔할 수 있도록 도와줍니다.

작성 방법

핵심 문장을 먼저 쓰고, 필요하면 줄바꿈으로 2~3줄 요약을 구성합니다. 정보량이 과하면 본문과 역할이 겹치므로 핵심만 남기는 것이 좋습니다.

작성 문법 (한 줄)

:::point
배포 전 체크리스트 완료 여부를 먼저 확인합니다.
:::

렌더링 (한 줄)

새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. 계절은 반복되지만 매번 새롭습니다.

작성 문법 (멀티라인)

:::point
핵심 포인트는 결론부터 작성합니다.
필수 조건과 예외 조건을 분리해 두면, 운영 중 빠른 판단에 도움이 됩니다.
:::

렌더링 (멀티라인)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다. 빛이 있으면 반드시 그림자가 따르는 법입니다. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

작성 문법 (여러 서식 포함)

:::point
이번 반영의 핵심 요약입니다.
- 승인 상태 확인
- `pnpm run build` 성공 확인
- 롤백 담당자 지정
```bash
pnpm run build
pnpm run preview
```
참고 링크: [운영 상태 페이지](https://status.snd.im/)
:::

렌더링 (여러 서식 포함)

가나다라마바사아자차카타파하, 이것은 화면 서식 확인을 위한 더미 텍스트입니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 계절은 반복되지만 매번 새롭습니다.

  • Lorem ipsum: consectetur 확인
  • 봄이 오면: 꽃이 피고 여름에는 나무가 무성
  • Sed do eiusmod: tempor incididunt 완료
Terminal window
pnpm run build
pnpm run preview

모든 시작은 한 걸음에서 비롯됩니다. 강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다.

quote

사용목적

quote는 원칙 문구나 정책 요약을 독립 블록으로 강조할 때 사용합니다. 일반 문단과 분리되어 핵심 문장의 가시성과 기억률을 높일 수 있습니다.

작성 방법

인용 제목에는 문구 출처나 성격을 짧게 적고, 본문에는 핵심 원칙을 1~2문장으로 정리합니다. 긴 인용은 메시지가 흐려지므로 필요한 문장만 추려 쓰는 편이 좋습니다.

작성 문법

:::quote[문서 작성 원칙]
문서의 목적은 재현 가능한 실행 기준을 제공하는 것입니다.
:::

렌더링

봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다.

새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. 빛이 있으면 반드시 그림자가 따르는 법입니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum 더미 인용

디렉티브 중첩 활용

콜아웃 디렉티브는 아코디언, 탭 등 다른 디렉티브 내부에 중첩해 사용할 수 있습니다. 경고나 안내를 섹션 구조 안에 유지하면서도 시각적 강조를 함께 제공해야 할 때 유용합니다.

아코디언 안 콜아웃 중첩

작성 문법

::::zippy[배포 전 최종 확인]
배포 직전 안정성과 영향 범위를 한 번 더 점검합니다. 모든 항목이 완료된 경우에만 반영을 진행합니다.
:::caution
운영 데이터베이스에 영향을 주는 변경이 포함된 경우, 반드시 DBA 승인을 먼저 받아야 합니다.
:::
:::note
빌드 아티팩트는 배포 전 30분 이내 생성된 버전을 사용해야 합니다.
:::
- 승인 상태 확인
- 빌드 시간 확인 (`pnpm run build` 완료 시각)
- 롤백 담당자 연락 경로 확인
- 배포 후 모니터링 기준값 사전 기록
::::

렌더링

Lorem ipsum — 더미 아코디언 제목

봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다.

  • Lorem ipsum: consectetur 확인 후 결과 기록
  • 봄이 오면: 꽃이 피고 여름에는 나무가 무성
  • Sed do eiusmod: tempor incididunt 완료
  • 전체 흐름 점검

여러 콜아웃 연속 배치

성격이 다른 콜아웃을 연속 배치하면 독자가 우선순위를 한눈에 파악할 수 있습니다. 점검 순서대로 배치하면 위에서 아래로 읽으면서 자연스럽게 확인 흐름을 따라갈 수 있습니다.

작성 문법

:::point
이번 배포는 운영 스키마 변경을 포함합니다. 아래 항목을 순서대로 확인하세요.
:::
:::caution
롤백 시 스키마 변경은 되돌릴 수 없습니다. 반드시 사전 백업 완료 여부를 확인하세요.
:::
:::note
배포 후 이상 감지 시 운영 채널에 즉시 공유하고 롤백 여부를 협의합니다.
:::
:::env
운영 환경: 서버 A, B, C / DB: MySQL 8.0 / 배포 시각: 2026-05-18 02:00 KST
:::

렌더링

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. Sed do eiusmod tempor incididunt ut aliqua.

Lorem ipsum OS v2.0 / Node 20.x / pnpm 9.x / 빌드: 20250518