효과적 프롬프팅

목표

좋은 프롬프트와 나쁜 프롬프트의 차이를 이해하고, 구체적이고 명확한 요청으로 더 나은 결과를 얻는 방법을 익힙니다.

사전 준비

• Kiro IDE 로그인 및 프로젝트 폴더 열기 완료
• 첫 대화·컨텍스트 완료

해볼 것

나쁜 프롬프트 vs 좋은 프롬프트

❌ 나쁜 예시:

웹사이트 만들어줘

문제: 너무 모호, 요구사항 불명확, 기술 스택 미지정.

✅ 좋은 예시:

HTML, CSS, JavaScript를 사용해서 할 일 관리 웹 애플리케이션을 만들어주세요.
기능 요구사항:
- 할 일 추가/삭제/완료 표시
- 로컬 스토리지에 데이터 저장
- 반응형 디자인
기술 요구사항:
- 바닐라 JavaScript 사용 (프레임워크 없음)
- 모던 CSS (Flexbox/Grid 활용)
- 접근성 고려

실습 1: 기본 구조 요청

채팅 패널에 아래를 입력하세요:

HTML 기본 구조 요청

할 일 관리 앱의 기본 HTML 구조를 만들어주세요.
요구사항:
- 제목: "My Todo App"
- 할 일 입력 필드와 추가 버튼
- 할 일 목록을 표시할 영역
- 깔끔하고 현대적인 디자인
- 모바일 친화적인 레이아웃
파일명: index.html

실습 2: 스타일링 요청

HTML 생성 후 이어서:

방금 만든 HTML에 맞는 CSS 스타일을 작성해주세요.
디자인 요구사항:
- 중앙 정렬된 카드 형태의 레이아웃
- 부드러운 그림자와 둥근 모서리
- 색상 테마: 파란색 계열
- 버튼 호버 효과
- 반응형 디자인 (모바일 대응)
파일명: style.css

브라우저에서 index.html을 열어 스타일이 적용되었는지 확인합니다.

실습 3: 반복적 개선

CSS를 다음과 같이 개선해주세요:
- 할 일 항목에 체크박스 스타일 개선
- 완료된 항목은 취소선과 흐린 색상 적용
- 삭제 버튼을 빨간색으로 변경
- 전체적인 간격 조정

🔄 결과가 마음에 들지 않으면 구체적인 피드백을 주고 다시 요청합니다. 이것이 반복적 개선입니다.

실습 4: 컨텍스트 활용

컨텍스트 참조 프롬프트

#file:index.html #file:style.css
기존 HTML과 CSS에 맞는 JavaScript 코드를 작성해주세요.
기능:
- 할 일 추가 기능
- 할 일 삭제 기능
- 완료 상태 토글
- 로컬 스토리지에 데이터 저장/불러오기
파일명: script.js

💡 #file 입력 후 Tab/Enter를 누르면 파일 검색창이 나타납니다.

프롬프팅 원칙 요약

DO ✅

• 구체적인 요구사항 명시
• 기술 스택과 제약사항 지정
• 예상 결과물 설명
• #file·#folder로 기존 파일 참조

DON'T ❌

• 모호한 표현 사용
• 너무 많은 기능을 한 번에 요청
• 컨텍스트 없는 요청
• 결과 검토 없이 다음 단계 진행

기대 결과

• 구체적 프롬프트로 의도에 맞는 코드를 생성
• 반복적 개선으로 품질을 높이는 과정 체험
• 컨텍스트 프로바이더로 파일 간 연계 작업 수행

0 / 4항목을 클릭해 체크 · 진행 상태는 이 브라우저에 저장됩니다

• 구체적 프롬프트로 HTML 파일 생성필수
• CSS 파일 생성 후 브라우저에서 스타일 확인필수
• 반복적 개선 프롬프트 실행필수
• `#file` 참조로 JavaScript 파일 생성필수

🚨 문제 해결

• 결과 코드가 기대와 다름: 더 구체적으로 요청하세요. "파란색 계열" → "배경 #e3f2fd, 버튼 #1976d2"처럼 수치를 지정하면 정확도가 올라갑니다.
• 파일 간 연동이 안 됨: #file로 관련 파일을 명시적으로 참조하세요.
• 너무 긴 프롬프트: 한 번에 모든 것을 넣지 말고, 단계별로 나눠서 요청하세요.

다음 읽기

Steering에서 반복해서 설명하던 프로젝트 표준을 지속적인 컨텍스트로 만드는 방법을 확인하세요.