접근성을 고려한 React 컴포넌트를 생성하는 프롬프트

언제 사용하나

재사용 가능한 React 컴포넌트를 접근성(a11y)까지 챙겨 만들 때.

요청 전 확인

• 프로젝트의 React 버전과 스타일링 방식(CSS Modules, Tailwind 등)을 확인한다.
• 컴포넌트의 props와 상태를 정리한다.

복사해서 쓰는 프롬프트

{{COMPONENT}} React 컴포넌트를 만들어줘.

요구사항:
- props: {{PROPS}}
- 함수형 컴포넌트 + 훅을 사용해줘.
- 시맨틱 태그와 적절한 aria 속성, 키보드 접근성을 지켜줘.
- 로딩/빈 상태/에러 상태를 처리해줘.
- 스타일링은 {{STYLING}} 방식으로 해줘.
- 렌더링을 검증하는 간단한 테스트도 작성해줘.

placeholder 설명

• {{COMPONENT}} : 컴포넌트 이름/역할
• {{PROPS}} : props 목록과 타입
• {{STYLING}} : 스타일링 방식

입력 예시

{{COMPONENT}} = "검색 입력창(자동완성 목록 포함)"

기대 결과

접근성 속성이 포함된 컴포넌트와 테스트.

검증 방법

키보드만으로 조작해 보고, 스크린리더 라벨을 확인한다.

주의사항

• div에 onClick만 붙이지 말고 button/role을 사용하도록 지시한다.

관련 문서

• React 공식: https://react.dev/learn