프롬프트 예시 모음

자주 사용하는 프롬프트 예시 모음입니다. 복사하여 사용하세요.

---

앱 생성

직원 관리 앱

직원 관리 앱을 만들어줘.

필요한 기능:
1. 직원 추가 폼 (이름, 부서, 이메일, 입사일)
2. 직원 목록 테이블
3. 검색 기능
4. 부서별 필터

디자인은 심플하고 깔끔하게 해줘.

재고 관리 앱

재고 관리 시스템을 만들어줘.

필요한 기능:
1. 상품 등록 폼 (상품명, 카테고리, 수량, 단가, 최소 재고)
2. 재고 현황 테이블
3. 카테고리별 필터
4. 재고 부족 알림 (최소 재고 이하일 때 빨간색 표시)

디자인:
- 재고 부족 상품은 빨간색 배경
- 테이블에 총 재고 금액 합계 표시

고객 관리 (CRM)

고객 관리 CRM을 만들어줘.

필요한 기능:
1. 고객 정보 입력 (회사명, 담당자명, 연락처, 이메일, 상태)
2. 고객 목록 (카드 형태)
3. 상태별 필터 (잠재/미팅/제안/협상/계약)
4. 상담 메모 기록

상태에 따라 카드 테두리 색상 다르게:
- 잠재: 회색
- 미팅: 파랑
- 제안: 노랑
- 협상: 주황
- 계약: 초록

예약 시스템

회의실 예약 시스템을 만들어줘.

필요한 기능:
1. 캘린더 뷰로 예약 현황 표시
2. 예약 폼 (회의실, 날짜, 시작시간, 종료시간, 예약자, 목적)
3. 내 예약 목록
4. 예약 취소 기능

제약 조건:
- 같은 회의실 같은 시간 중복 예약 불가
- 과거 날짜 예약 불가

---

데이터 관련

데이터 저장 추가

데이터를 서버에 저장할 수 있게 해줘.
폼을 제출하면 데이터베이스에 저장되고,
테이블에서 저장된 데이터를 불러와서 보여줘.

CRUD 전체 추가

데이터를 저장, 수정, 삭제할 수 있게 해줘.

- 폼 제출 → 새 데이터 저장
- 테이블 행 클릭 → 수정 모달 띄우기
- 삭제 버튼 → "정말 삭제하시겠습니까?" 확인 후 삭제

검색 기능

검색 기능을 추가해줘.
검색어를 입력하면 이름, 이메일, 부서에서 검색해서
일치하는 항목만 테이블에 표시해줘.

필터 기능

필터 기능을 추가해줘.

필터 옵션:
- 부서: 전체, 개발팀, 마케팅팀, 영업팀, 인사팀
- 상태: 전체, 재직중, 휴직, 퇴사

여러 필터를 동시에 적용할 수 있게 해줘.

정렬 기능

테이블 헤더를 클릭하면 정렬되게 해줘.
- 한 번 클릭: 오름차순
- 다시 클릭: 내림차순
- 현재 정렬 기준 헤더에 화살표 표시

페이지네이션

테이블에 페이지네이션을 추가해줘.
- 한 페이지에 10개씩 표시
- 이전/다음 버튼
- 페이지 번호 표시
- 전체 개수 표시 (총 45건)

---

UI 컴포넌트

모달 추가

수정 모달을 추가해줘.

- 테이블 행 클릭 시 모달 열림
- 모달에 현재 데이터가 채워진 폼 표시
- 저장 버튼 → 데이터 수정 후 모달 닫기
- 취소 버튼 → 모달만 닫기
- 모달 바깥 클릭 → 모달 닫기

확인 팝업

삭제 전 확인 팝업을 추가해줘.

메시지: "정말 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
버튼: 삭제 (빨간색), 취소 (회색)

탭 UI

탭 UI를 추가해줘.

탭 목록:
- 전체 (기본 선택)
- 진행중
- 완료

탭 선택 시 해당 상태의 데이터만 표시

사이드바

왼쪽에 사이드바 네비게이션을 추가해줘.

메뉴:
- 대시보드 (아이콘: 차트)
- 직원 관리 (아이콘: 사람)
- 설정 (아이콘: 톱니바퀴)

선택된 메뉴는 배경색 표시

---

디자인/스타일

색상 변경

전체 테마 색상을 파란색 계열로 바꿔줘.
- 주요 버튼: #2563eb
- 호버: #1d4ed8
- 배경: #f8fafc
- 카드: 흰색, 그림자

카드 스타일

데이터를 카드 형태로 보여줘.
- 흰색 배경
- 둥근 모서리 (8px)
- 살짝 그림자
- 호버 시 그림자 진해짐
- 3열 그리드 (모바일에서 1열)

반응형

모바일에서도 잘 보이게 반응형으로 수정해줘.
- PC: 폼 왼쪽, 테이블 오른쪽
- 모바일: 폼 위, 테이블 아래 (세로 스택)
- 모바일에서 테이블은 가로 스크롤

다크 모드

다크 모드를 추가해줘.
- 토글 버튼으로 라이트/다크 전환
- 다크 모드 배경: #1a1a2e
- 다크 모드 텍스트: #e5e7eb
- 다크 모드 카드: #16213e

---

폼 관련

유효성 검사

폼에 유효성 검사를 추가해줘.

검사 규칙:
- 이름: 필수, 2글자 이상
- 이메일: 필수, 올바른 이메일 형식
- 전화번호: 010-0000-0000 형식
- 비밀번호: 8자 이상, 영문+숫자 포함

에러 시 필드 아래에 빨간색 에러 메시지 표시

날짜 선택

날짜 선택 필드를 추가해줘.
- 캘린더 팝업으로 선택
- 오늘 이전 날짜 선택 불가
- 형식: YYYY-MM-DD

파일 업로드

프로필 이미지 업로드 기능을 추가해줘.
- 이미지 파일만 허용 (jpg, png)
- 최대 5MB
- 미리보기 표시
- 드래그 앤 드롭 지원

동적 폼

부서를 선택하면 해당 부서의 팀 목록이
동적으로 표시되게 해줘.

부서별 팀:
- 개발팀: 프론트엔드, 백엔드, 인프라
- 마케팅팀: 브랜드, 퍼포먼스, 콘텐츠
- 영업팀: 국내, 해외

---

차트/시각화

기본 차트

월별 매출 막대 차트를 추가해줘.
- X축: 월 (1월~12월)
- Y축: 매출액
- 막대에 금액 표시

원형 차트

부서별 인원 비율을 원형 차트로 보여줘.
- 각 부서별 색상 다르게
- 비율(%) 표시
- 범례 표시

대시보드 통계

상단에 통계 카드를 추가해줘.

표시할 수치:
- 총 직원 수
- 이번 달 입사자
- 이번 달 퇴사자
- 평균 근속 기간

각 카드에 아이콘과 전월 대비 증감 표시

---

수정 요청

특정 요소 수정

[Visual Edit로 선택 후]
이 버튼의 텍스트를 "저장하기"로 바꾸고
크기를 더 크게 해줘.

에러 수정

Preview에서 에러가 나.
"Cannot read property 'map' of undefined"

데이터가 없을 때도 에러 없이 동작하게 수정해줘.
데이터 없으면 "데이터가 없습니다" 메시지 표시.

성능 개선

테이블 로딩이 느려.
데이터가 많을 때 성능을 개선해줘.
- 가상 스크롤 적용
- 또는 페이지네이션으로 분할

---

복사하여 사용하세요

위 프롬프트들을 상황에 맞게 수정하여 사용하세요.

팁: 프롬프트가 길수록 AI가 더 정확하게 이해합니다. 요구사항을 최대한 구체적으로 작성하세요.