---
{"id":"modal","title":"모달·확인 대화상자","category":"컴포넌트","order":41,"summary":"짧은 확인·입력에 집중해야 하는 작업의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/modal/usage"]}
---

# 모달·확인 대화상자

## 목적과 사용

짧은 확인·입력에 집중해야 하는 작업에 사용합니다. 장문의 편집·일반 공지·여러 단계 탐색에 반복 사용하지 않습니다.

## 구성과 변형

이름, 설명, 내용, 주 작업, 취소/닫기. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- MDL-01 MUST: 제목으로 어떤 대상을 어떻게 바꾸는지 설명합니다.
- MDL-02 MUST: 파괴적 작업에 안전한 취소 경로를 제공합니다.
- MDL-03 MUST: 제출 후 진행·실패를 대화상자 안에서 설명하고 실패를 성공처럼 닫지 않습니다.
- MDL-04 SHOULD: 모달 중첩 대신 단일 단계 전환·별도 페이지를 검토합니다.

## 접근성

dialog 이름·설명, 배경 비활성화, 내부 포커스 순환, Escape 정책, 종료 후 포커스 복귀를 검증합니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: ‘서버 이미지 변경 — 기존 파일이 삭제됩니다’ / 피함: 대상 없는 ‘정말요?’.

## 우리 구현과 연결

Panel의 실제 forced reinstall/file deletion 계약은 유지합니다. 문구 변경으로 위험 자체를 숨기지 않습니다.

제품별 소유 경로는 [WICKEDVPS](product-vps.md), [Panel](product-panel.md), [Blesta](product-blesta.md)와 [소스 근거](source-evidence.md)를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

## 상태와 검증

열기·닫기·Escape·스크롤·모바일 키보드·실패 후 입력 보존·호출 요소 삭제를 확인합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. [검증 체크리스트](testing.md)에 증거를 연결합니다.