계산기 진화시키기
단순 계산기에서 재미있는 계산기까지
🎯 Plan 모드로 기본 구조를 만들고, Agent 모드로 디테일을 다듬는 워크플로우를 익힙니다
📋 실습 개요
이 실습에서는 계산기를 3단계로 진화시켜봅니다. 각 단계마다 Plan 모드로 큰 그림을 그리고, Agent 모드로 세부 조정을 합니다.
1단계
기본 계산기
2단계
복잡한 계산기
3단계
재미있는 계산기
1기본 계산기 만들기
💬 요청 메시지
"간단한 계산기 앱을 만들어주세요.
기능:
- 숫자 버튼 (0-9)
- 사칙연산 (+, -, ×, ÷)
- 결과 표시 화면
- C(초기화) 버튼
HTML 파일 하나로 만들어주세요.
깔끔하고 모던한 디자인으로 해주세요."
🔧 개선 요청 예시
"버튼을 더 크게 만들어주세요"
"숫자 표시 화면을 더 크게 해주세요"
"버튼에 호버 효과 추가해주세요"
🎨 예상 결과물
2복잡한 계산기로 업그레이드
💬 요청 메시지
"지금 계산기에 고급 기능을 추가해주세요.
추가 기능:
- 공학용 계산 (sin, cos, tan, log, √)
- 괄호 지원
- 메모리 기능 (M+, M-, MR, MC)
- 계산 기록 표시
기본 모드/공학용 모드 전환 버튼을 추가해주세요."
🔧 개선 요청 예시
"모드 전환할 때 애니메이션 효과 추가해주세요"
"계산 기록을 스크롤 가능하게 해주세요"
"공학용 버튼 색상을 다르게 해주세요"
✨ 추가되는 기능들
3재미있는 계산기로 변신!
💬 요청 메시지
"계산기에 재미있는 기능들을 추가해주세요!
아이디어:
- 숫자 버튼 누를 때 효과음
- 계산 결과에 따른 이모지 반응
- 테마 변경 기능 (다크/라이트/레트로)
- 계산 결과 공유 버튼
- 숫자 버튼에 귀여운 애니메이션
재미있고 인터랙티브하게 만들어주세요!"
🔧 개선 요청 예시
"777 나오면 잭팟 애니메이션 추가해주세요"
"100보다 큰 결과에는 축하 이펙트 넣어주세요"
"레트로 테마에 픽셀 폰트 적용해주세요"
"버튼 누를 때 통통 튀는 효과 추가해주세요"
🎉 재미있는 반응 예시
💎 Plan + Agent 워크플로우 정리
- ✓ 새로운 기능 추가할 때
- ✓ 큰 구조 변경이 필요할 때
- ✓ 여러 파일 수정이 필요할 때
- ✓ 처음 시작할 때
- ✓ 색상, 크기 등 스타일 조정
- ✓ 작은 버그 수정
- ✓ 텍스트 변경
- ✓ 미세한 동작 조정
🏆 추가 도전 과제
도전 1: 단위 변환기 추가
길이, 무게, 온도 단위 변환 기능을 추가해보세요!
도전 2: 환율 계산기
달러, 엔, 유로 환율 계산 기능을 추가해보세요!
도전 3: 계산 퀴즈 모드
랜덤 계산 문제를 내고 맞추는 게임 모드를 추가해보세요!