AES-256-GCM 암호화·복호화 테스트

당신은 숙련된 풀스택 웹 개발자입니다. 아래 요구사항에 맞춰 "AES 암호화 테스트기" 웹 도구를 만들어 주세요.

## 목표

비밀번호(또는 키)로 텍스트를 AES-256-GCM 암호화·복호화하는 테스트 도구를 만든다.

## 핵심 기능

- 암호화/복호화 모드
- 비밀번호에서 PBKDF2(충분한 반복 횟수)로 키 유도
- 매번 무작위 솔트와 12바이트 IV 생성
- 솔트+IV+암호문을 하나의 Base64 문자열로 출력
- 결과 복사

## 입력

- 평문 또는 암호문(Base64)
- 비밀번호

## 출력

- 암호화 결과(Base64) 또는 복호화된 평문
- 사용한 알고리즘·파라미터 요약

## 예외 상황과 처리 규칙

- 비밀번호가 틀리거나 암호문이 변조되면 '인증 실패' 메시지
- 빈 비밀번호 금지
- 같은 평문도 매번 다른 암호문이 나온다는 점을 안내
- 키와 평문을 서버로 보내지 않도록 Web Crypto API 사용

## 구현 조건

- 서버 없이 브라우저에서 동작하는 단일 페이지(HTML, CSS, JavaScript)로 만들고, 입력 데이터를 외부로 전송하지 마세요.
- 모바일에서도 쓰기 편한 반응형 UI로 만들고, 입력 요소에는 레이블을 달아 키보드로도 조작할 수 있게 해 주세요.
- 결과에는 '복사' 버튼을 달고, 잘못된 입력에는 이해하기 쉬운 한국어 오류 메시지를 보여 주세요.
- 핵심 로직은 UI와 분리된 함수로 작성해 단위 테스트를 할 수 있게 해 주세요.

## 완료 기준 (테스트 케이스)

- 암호화 후 같은 비밀번호로 복호화하면 원문과 동일
- 암호문 한 글자를 바꾸면 복호화 실패
- 같은 입력을 두 번 암호화하면 결과가 다름

먼저 구현 계획을 5줄 이내로 설명한 다음 전체 코드를 작성하고, 마지막에 위 테스트 케이스를 확인하는 방법을 알려 주세요.

---
name: build-encryption-tester
description: AES 암호화 테스트기 도구를 새로 만들거나 수정할 때 사용합니다. 비밀번호(또는 키)로 텍스트를 AES-256-GCM 암호화·복호화하는 테스트 도구를 만든다.
---

# AES 암호화 테스트기 만들기

## 목표

비밀번호(또는 키)로 텍스트를 AES-256-GCM 암호화·복호화하는 테스트 도구를 만든다.

## 작업 순서

1. 아래 필수 기능, 입력, 출력을 확인하고 빠진 정보가 있으면 먼저 질문합니다.
2. 핵심 로직을 UI와 분리된 순수 함수로 구현합니다.
3. 검증 목록의 테스트 케이스로 로직을 확인합니다.
4. 입력 폼, 결과 영역, 복사 버튼을 갖춘 반응형 UI를 만듭니다.
5. 규칙에 적힌 예외 상황을 하나씩 재현해 보고 오류 메시지를 다듬습니다.

## 핵심 기능

- 암호화/복호화 모드
- 비밀번호에서 PBKDF2(충분한 반복 횟수)로 키 유도
- 매번 무작위 솔트와 12바이트 IV 생성
- 솔트+IV+암호문을 하나의 Base64 문자열로 출력
- 결과 복사

## 입력

- 평문 또는 암호문(Base64)
- 비밀번호

## 출력

- 암호화 결과(Base64) 또는 복호화된 평문
- 사용한 알고리즘·파라미터 요약

## 규칙

- 비밀번호가 틀리거나 암호문이 변조되면 '인증 실패' 메시지
- 빈 비밀번호 금지
- 같은 평문도 매번 다른 암호문이 나온다는 점을 안내
- 키와 평문을 서버로 보내지 않도록 Web Crypto API 사용
- 서버 없이 브라우저에서 동작하는 단일 페이지(HTML, CSS, JavaScript)로 만들고, 입력 데이터를 외부로 전송하지 마세요.

## 검증

- [ ] 암호화 후 같은 비밀번호로 복호화하면 원문과 동일
- [ ] 암호문 한 글자를 바꾸면 복호화 실패
- [ ] 같은 입력을 두 번 암호화하면 결과가 다름