실무 프롬프트 템플릿 모음 (PROMPT-TEMPLATE.md)
이 문서는 Antigravity 환경에서 개발자가 AI(Claude, Gemini 등)에게 웹 또는 앱 개발 업무를 빠르고 정확하게 지시하기 위해 사용하는 프롬프트 템플릿 모음입니다.
1. 🌐 웹 환경 프롬프트 템플릿
1.1 반응형 웹 퍼블리싱 및 컴포넌트화
text
다음 제공된 [UI 이미지 설명 혹은 기존 HTML/CSS]를 기반으로 모바일 및 데스크톱에서 모두 완벽하게 동작하는 [React/Vue] 컴포넌트를 작성해 주세요.
[요구사항]
1. 프레임워크: React (TypeScript) + Tailwind CSS (또는 Styled-components)
2. 디바이스 분기: 기본적으로 모바일 레이아웃(Mobile-First)으로 작성하고, `md:` 클래스 이상에서 데스크톱 레이아웃으로 전환합니다.
3. 상태 관리: 메뉴 토글 등 단순 UI 상태는 컴포넌트 내부에서 처리합니다.
4. 웹 접근성: 키보드 탭 이동과 화면 낭독기를 위한 `aria-` 속성을 반드시 포함하세요.1.2 프론트엔드-백엔드 API 연동
text
우리 프론트엔드 웹 앱과 [스프링부트/Node.js] 백엔드 서버 간의 API 연동 코드를 작성하려고 합니다.
[API 정보]
- 엔드포인트: `/api/v1/users/login`
- 방식: POST
- 요청 바디: `{ "email": "", "password": "" }`
[요구사항]
1. Axios 인스턴스를 활용하여 통신 코드를 작성해 주세요.
2. 401(Unauthorized), 500(Server Error)에 대한 공통 에러 핸들링 로직을 포함하세요.
3. 토큰(JWT)이 발급될 경우, 브라우저의 HttpOnly 쿠키 또는 보안 스토리지에 저장하는 방안을 적용하세요.2. 📱 모바일 환경 프롬프트 템플릿
2.1 앱 아키텍처 및 상태 관리 설계
text
우리는 복잡한 데이터 동기화가 필요한 모바일 앱을 [Flutter/React Native/Swift]로 개발 중입니다.
해당 언어/프레임워크에 맞는 최적의 앱 아키텍처와 전역 상태 관리 방식을 제안해 주세요.
[앱 특성]
- 실시간 채팅 및 알림 기능 존재
- 오프라인 상태에서도 과거 메시지 열람 필요
[요구사항]
1. MVVM 또는 Clean Architecture 기반의 디렉토리 구조도(디렉토리 트리 형태) 작성
2. 로컬 데이터베이스(SQLite, Realm 등)와 리모트 서버 간의 데이터 동기화 시나리오 제시
3. 메모리 누수를 방지하기 위한 생명주기(Lifecycle) 및 자원 해제(Dispose) 타이밍 설명2.2 모바일 네이티브 모듈 및 퍼미션 대응
text
모바일 앱에서 사용자의 [카메라 및 갤러리] 권한을 요청하고 기능을 실행하는 로직을 구현하려 합니다.
[플랫폼]
- Android 및 iOS 환경 모두 대응 필요 (크로스플랫폼의 경우 플러그인 설정 포함)
[요구사항]
1. iOS의 `Info.plist` 및 Android의 `AndroidManifest.xml`에 추가해야 할 정확한 권한 코드 작성
2. 사용자가 최초 권한을 거부했을 때(Denied) 설정 화면으로 유도하는 UI/UX 플로우 구현 코드
3. 백그라운드 환경에서도 해당 권한이 안전하게 유지되는지에 대한 보안 설명3. 웹/앱 공통 프롬프트 템플릿
3.1 코드 리뷰 및 최적화
text
다음은 우리 [웹/앱] 프로젝트의 일부 코드입니다. 클린 코드 원칙과 모바일/웹 퍼포먼스 기준에 맞추어 리뷰해 주세요.
[코드]
(코드 삽입)
[리뷰 포인트]
- 불필요한 재렌더링 혹은 메모리 누수 위험이 있는지 점검
- 성능(Big-O) 개선 여부
- Before & After 코드로 제시할 것