Scene A2 · 즉석 개선

목표

Vibe 세션에서 기존 결과물에 대해 즉석으로 디자인 개선을 요청합니다. 반복적 대화를 통한 점진적 개선 과정을 체험합니다.

사전 준비

• Scene A1 완료 (동작하는 To-Do 앱이 vibe-todo 폴더에 존재)

해볼 것

1단계: 디자인 개선 요청

채팅 패널에 아래 프롬프트를 입력합니다:

좀 더 예쁘게 만들어주세요. 배경색은 무지개색이면 좋겠어요.

2단계: 결과 확인

1. 브라우저를 새로고침하여 변경된 디자인 확인
2. 이전과 비교하여 어떤 부분이 바뀌었는지 관찰

3단계: 추가 개선 (선택)

마음에 들지 않는 부분이 있다면 구체적인 피드백을 줍니다:

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

기대 결과

• 디자인이 시각적으로 변경됨
• Vibe 세션의 "실시간 방향 변경" 능력 체험
• 모호한 요청("예쁘게")과 구체적 요청("체크박스 스타일 개선")의 결과 차이 인지

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

• 디자인 변경 프롬프트에 Kiro가 응답필수
• 브라우저에서 시각적 변화 확인필수
• 반복 개선 1회 이상 시도선택

⚠️ 흔한 실수

• "예쁘게 해주세요" 같은 모호한 요청 — AI가 해석할 여지가 너무 넓어 의도와 다른 결과가 나올 수 있습니다. "배경을 흰색으로, 카드에 그림자를 추가하고, 폰트 크기를 16px로"처럼 구체적으로 요청하면 원하는 결과에 빠르게 도달합니다 (3단계 참고).

🚨 문제 해결

• 변경 사항이 안 보임: 브라우저 캐시를 무시하고 새로고침 (Ctrl+Shift+R / Cmd+Shift+R).
• CSS 파일이 별도 생성 안 됨: Kiro가 인라인 스타일로 적용했을 수 있음. "별도 CSS 파일로 분리해주세요"라고 추가 요청.
• 이전 기능이 깨짐: Vibe 방식의 전형적 문제입니다. Scene A 회고에서 다시 논의합니다.