Vibe 세션

학습 목표

좋은 프롬프트와 나쁜 프롬프트 구분
구체적이고 명확한 요청 방법
반복적 개선 기법

프롬프팅 기본 원칙

DO (해야 할 것)

✅ 구체적인 요구사항 명시
✅ 기술 스택과 제약사항 지정
✅ 예상 결과물 설명
✅ 기존 파일 참조 활용

DON’T (하지 말 것)

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

나쁜 프롬프트 예시


웹사이트 만들어줘

너무 모호함
요구사항 불명확
기술 스택 미지정

좋은 프롬프트 예시


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

구체적인 기능 명시
기술 스택 지정
제약사항 명확

Vibe 세션으로 To-Do 웹 사이트 제작하기

Git Bash 등의 터미널 환경에서 새 프로젝트 폴더 “todo-app”을 생성합니다. kiro 명령어로 프로젝트 폴더를 엽니다.


mkdir todo-app
cd todo-app
kiro ./

아래 프롬프트를 복사한 후, Kiro 바이브 세션에 입력하여 기본 구조를 요청합니다.


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

아래 프롬프트를 복사한 후, Kiro 바이브 세션에 입력하여 스타일링을 요청합니다.


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

Note

Kiro가 생성한 index.html 파일을 열고, 인터넷 브라우저에서 스타일이 적용되었는지 확인합니다.

아래 프롬프트를 복사한 후, Kiro 바이브 세션에 입력하여 스타일링을 개선합니다.


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

Note

🔄 반복 개선 : 스타일링 결과가 마음에 들지 않으면 구체적인 피드백을 주고 다시 요청하세요.

아래 프롬프트를 복사한 후, Kiro 바이브 세션에 입력하여 주요 기능을 추가합니다.

Note

💡 컨텍스트 : #file을 통해 특정 파일을 참조할 수 있으며, #file을 입력하고 Tab/Enter를 입력하면 검색 창이 나타납니다.

Note

💡 컨텍스트 : #folder를 통해서는 프로젝트 내 특정 디렉터리(폴더)를 참조할 수 있습니다. #folder를 입력하고 Tab/Enter를 입력하면 검색 창이 나타납니다.


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

Note

🔄 반복 개선 : index.html 파일을 열고, 인터넷 브라우저에서 동작을 테스트합니다. 오류가 발생하면 구체적인 피드백을 주고 다시 요청하세요.

아래 프롬프트를 복사한 후, Kiro 바이브 세션에 입력하여 프로젝트 개선 방안을 요청합니다.

Note

💡 컨텍스트 : #codebase을 통해 전체 프로젝트(코드베이스)를 참조할 수 있습니다.


#codebase 
 
현재 프로젝트의 전체 구조를 분석하고, 
코드 품질을 개선할 수 있는 방법을 제안해주세요.