인터랙티브 컴포넌트 가이드

:::zippy[제목]
설명 단락, 목록, 코드 등 마크다운 문법을 함께 사용할 수 있습니다.
:::

:::zippy[설치 순서]

1. 배포 대상 버전과 변경 이력 확인
2. 사전 점검 체크리스트(로그/알림/헬스체크) 실행
3. 적용 순서에 맞춰 배포 명령 실행
4. 완료 후 모니터링 지표와 기능 상태 점검

:::

:::zippy[문제 해결]

- 배포 직후 오류가 발생하면 최근 변경 범위를 우선 확인
- 롤백 기준(오류율, 응답 지연, 실패 트랜잭션)을 문서 기준과 비교
- 권한/환경 변수/외부 API 상태를 순서대로 점검

:::

::::zippy[고급 예시]
:::note
아코디언 안에서도 콜아웃 사용 가능
:::

`코드`나 목록도 함께 작성 가능
::::

::::tabs
:::tab[요약]
이 탭은 변경 목적과 영향 범위를 먼저 전달해야 할 때 사용합니다.

- 변경 목적: 왜 이 문서를 수정했는지
- 영향 범위: 어떤 사용자/화면/기능이 달라지는지
- 확인 기준: 수정 후 무엇을 검증해야 하는지

:::

:::tab[상세]
이 탭은 실제 작업자가 그대로 따라할 수 있도록 절차 중심으로 작성합니다.

1. 사전 조건 확인
2. 실행 단계 수행
3. 결과 검증
4. 실패 시 복구 절차

:::
::::

::::tabs
:::tab[Windows]

Windows 환경에서는 설치 관리자 확인 후 실행 권한을 먼저 점검합니다.
아래 명령은 환경 확인용 예시이며, 실제 작업 전 PATH와 버전 충돌 여부를 함께 확인하는 것이 좋습니다.

```powershell
winget --version
```

- 설치 경로 확인
- 관리자 권한 필요 여부 확인
- 실행 로그 저장 위치 확인

:::

:::tab[macOS]

macOS 환경에서는 쉘 설정 파일(`.zshrc`, `.zprofile`) 반영 여부를 먼저 확인합니다.
동일 명령이어도 사용자 셸 설정에 따라 결과가 달라질 수 있으므로 버전 정보와 경로 정보를 함께 기록합니다.

```bash
sw_vers
```

- OS 버전 기록
- 셸 환경 변수 확인
- 도구 경로 충돌 확인

:::
::::

::::tabs
:::tab[요약]
의사결정자가 전체 변경 요지를 1분 내로 파악하는 상황을 가정합니다. 변경 목적, 기대 효과, 잠재 위험을 짧은 문장으로 정리하면 사전 승인 과정이 빨라집니다.
:::
:::tab[상세]
실제 작업자가 따라갈 절차를 기준으로 작성합니다. 입력값 형식, 필수 옵션, 예외 처리 기준을 순서대로 제공하면 재현성이 올라갑니다.
:::
:::tab[트러블슈팅]
장애 상황에서 바로 사용할 수 있는 점검 순서를 제공합니다. 로그 위치, 임계치 기준, 롤백 조건을 함께 명시하면 대응 시간이 줄어듭니다.
:::
::::

:::::tabs
::::tab[빠른 시작]
:::note
기본 옵션으로 먼저 실행한 뒤, 결과를 확인하고 고급 옵션을 단계적으로 적용합니다.
:::

1. 기본 설정 적용
2. 결과 확인
3. 필요 시 고급 옵션 적용

::::
::::tab[고급 설정]

```bash
pnpm dev --host
```

```bash
pnpm build && pnpm preview
```

고급 설정은 로컬 재현이 끝난 뒤에만 운영 환경에 반영하는 것을 권장합니다.

- 설정 변경 전후 비교값 기록
- 실패 시 되돌릴 기준 명시
- 검증 완료 시간과 담당자 기록

::::
:::::

:::note
이 설정은 선택 항목이며 기본값으로도 기능 사용이 가능합니다.
:::

:::note
이 설정은 기능 동작에 필수는 아니지만, 문서 품질을 일정하게 유지하는 데 도움이 됩니다.
문서 리뷰 시에는 아래 항목을 함께 점검하면 누락 가능성을 줄일 수 있습니다.

- 필수/선택 옵션 구분
- 기본값과 권장값 분리
- 변경 이력 링크 연결

검증 명령 예시: `pnpm build`<br />
참고 문서: [문서 작성 규칙](https://example.com/docs/style-guide)
:::

:::caution
운영 값 변경은 승인 절차를 거친 뒤에만 진행합니다.
:::

:::caution
운영 환경 변경은 즉시 반영되므로 사전 점검 없이 적용하면 장애로 이어질 수 있습니다.
아래 항목을 기준으로 변경 전후를 반드시 비교해 주세요.

1. 오류율/응답 시간 기준치 확인
2. 롤백 기준 및 담당자 확인
3. 공지 문구와 실제 영향 범위 일치 여부 확인

즉시 복구가 필요할 때는 `pnpm preview` 결과 확인 후 이전 버전으로 되돌립니다.<br />
참고 문서: [릴리스 체크리스트](https://example.com/docs/release-checklist)
:::

```ts
const documentTitle = 'Sample Documentation'
```

const documentTitle = 'Sample Documentation'

```js {2-3}
function demo() {
  return 'highlight'
}
```

function demo() {
  return 'highlight'
}

```js "return true" ins="추가" del="삭제"
function demo() {
  console.log('삭제')
  return true
}
```

function demo() {
  console.log('삭제')
  return true
}

```bash
pnpm dev
```

```txt
REGION=ap-northeast-2
FEATURE_FLAG=true
```

REGION=ap-northeast-2
FEATURE_FLAG=true

```js wrap=false showLineNumbers
const veryLongLine =
  'wrap=false 예시는 긴 한 줄 텍스트가 컨테이너 너비를 넘어갈 때 자동 줄바꿈이 되지 않고 가로 스크롤로 유지되는지 확인하는 용도입니다.'
```

1
const veryLongLine =
2
  'wrap=false 예시는 긴 한 줄 텍스트가 컨테이너 너비를 넘어갈 때 자동 줄바꿈이 되지 않고 가로 스크롤로 유지되는지 확인하는 용도입니다.'

```js title="astro.config.mjs" {"1":5} del={"2":7-8} ins={"3":10-12}
import { defineConfig } from 'astro/config'
import astroExpressiveCode from 'astro-expressive-code'

export default defineConfig({
  integrations: [
    astroExpressiveCode({
      frames: {
        showCopyToClipboardButton: false
      },
      styleOverrides: {
        frames: {
          shadowColor: '#124'
        }
      }
    })
  ]
})
```