계산기 만들기
기본 사칙연산부터 복잡한 계산까지 가능한 계산기 제작
🎯 학습 목표
- ✓HTML/CSS/JavaScript의 기본 구조 이해하기
- ✓Cursor와 대화하며 코드를 작성하는 방법 익히기
- ✓버튼 클릭 이벤트와 계산 로직 구현
- ✓첫 번째 완성작 만들기!
🔧 사용 기술
HTML
버튼과 화면
(숫자, 연산자)
CSS
레이아웃과 디자인
(그리드, 색상)
JavaScript
계산 로직
(클릭 이벤트, 연산)
💡 중요: 코딩을 전혀 몰라도 괜찮습니다! Cursor에게 한국어로 말하면 모든 코드를 자동으로 작성해줍니다.
💻 실습: 단계별 진행
STEP 1프로젝트 시작하기 (5분)
📁 폴더 준비
- 바탕화면에
calculator폴더 생성 - Cursor 실행 → File → Open Folder
- 파일명:
index.html생성
🤖 첫 번째 프롬프트
Cmd/Ctrl + K 누르기
계산기를 만들고 싶어요. 기본 HTML 구조를 만들어주세요. 제목은 "계산기", 0-9 숫자 버튼과 +, -, ×, ÷ 연산자 버튼, = 버튼, AC(전체 삭제) 버튼을 만들어주세요. 위에는 계산 결과를 보여줄 화면을 만들어주세요.
STEP 2버튼 레이아웃 만들기 (5분)
🤖 두 번째 프롬프트
버튼들을 4x4 그리드 형태로 배치해주세요. 첫 줄: AC, C, ÷, × 둘째 줄: 7, 8, 9, - 셋째 줄: 4, 5, 6, + 넷째 줄: 1, 2, 3, = 다섯째 줄: 0을 2칸 차지하게 버튼 크기는 60px, 간격은 10px로 해주세요.
STEP 3계산 기능 구현하기 (10분)
🤖 세 번째 프롬프트
JavaScript로 계산 기능을 만들어주세요. 숫자 버튼을 클릭하면 화면에 표시되고, 연산자 버튼을 클릭하면 연산자를 저장하고, = 버튼을 클릭하면 계산 결과를 보여주세요. AC는 모두 지우기, C는 마지막 숫자만 지우기로 해주세요.
🔍 동작 원리
1. 숫자 클릭: 화면에 표시
2. 연산자 클릭: 첫 번째 숫자와 연산자 저장
3. = 클릭: 계산 후 결과 표시
STEP 4디자인 개선하기 (5분)
🤖 네 번째 프롬프트
계산기를 예쁘게 꾸며주세요. 배경은 그라데이션, 계산기는 흰색 카드 형태로, 숫자 버튼은 파란색, 연산자 버튼은 주황색, = 버튼은 초록색으로 해주세요. 버튼에 마우스를 올리면 살짝 어두워지게 해주세요.
STEP 5추가 기능 (5분)
🤖 다섯 번째 프롬프트
소수점(.) 버튼을 추가해주세요. 0으로 나누기를 시도하면 "오류" 메시지를 표시해주세요. 키보드로도 입력할 수 있게 해주세요.
✅ 완성 체크리스트
💎 프롬프팅 핵심 원칙
1. 구체적으로 요청
"버튼 만들어줘" (X)
→ "4x4 그리드로, 60px 크기" (O)
2. 색상 명시
"예쁘게" (X)
→ "숫자는 파란색, 연산자는 주황색" (O)
3. 동작 설명
"작동하게" (X)
→ "클릭하면 화면에 표시" (O)
4. 단계별 진행
한 번에 모든 기능 요청 (X)
→ 구조 → 기능 → 디자인 순서 (O)
🔧 자주 발생하는 문제와 해결법
Q: 버튼을 눌러도 아무 반응이 없어요!
A: "버튼 클릭 이벤트를 추가해줘" 요청하기
Q: 계산 결과가 이상해요!
A: "계산 로직을 수정해줘. 2 + 3은 5가 나와야 해" 구체적으로 설명
Q: 버튼 배치가 이상해요!
A: "4x4 그리드로 다시 배치해줘" 레이아웃 명시
🚀 다음 세션 예고
⌨️ 타자연습기 만들기
계산기에서 한 단계 더 나아가, 실시간 피드백이 있는 타자연습기를 만들어봅니다.
- ✓ 텍스트 비교와 실시간 색상 변경
- ✓ 타이머와 통계 계산
- ✓ 사용자 경험을 고려한 디자인
👨🏫 강사 노트
⏰ 시간 배분: 구조 10분, 기능 10분, 디자인 10분. 빠른 분들은 추가 기능 도전
🎯 핵심 메시지: "여러분이 방금 한국어로 말한 게 그대로 앱이 되었어요!"
💬 참여 유도: 완성한 분들끼리 계산 문제 내보기. 예: "123 + 456은?"
🔄 에러 대응: 버튼이 안 눌리면 99% 이벤트 리스너 문제. Cursor에게 물어보기
🏠 과제 안내: 계산 이력을 보여주는 기능 추가해보기