계산기 만들기
완성 앱 미리보기기본 사칙연산부터 복잡한 계산까지 가능한 계산기 제작
"복잡한 로직도 말 한마디로 구현할 수 있습니다. 시작이 반입니다."
세션 개요
학습 목표
동작 원리
실습 단계
📁 폴더 준비
바탕화면에 calculator 폴더 생성 Cursor 실행 → File → Open Folder → 방금 만든 폴더 선택
기본적인 계산기 웹앱을 만들고 싶어. index.html, style.css, script.js 파일 3개를 만들어줘.
🤖 첫 번째 프롬프트 (구조)
Cmd/Ctrl + K 누르기
계산기 버튼을 4x4 그리드로 배치해줘. 숫자는 회색, 연산자는 주황색으로 스타일링해줘. 결과창은 상단에 크게 배치해.
🤖 두 번째 프롬프트 (기능)
JavaScript 로직 구현 요청
버튼을 클릭하면 화면에 숫자가 입력되고, = 버튼을 누르면 계산 결과가 나오게 해줘. C 버튼은 초기화야. 0으로 나누는 경우는 에러 처리해줘.
🎨 디자인 개선
Chat 패널(Ctrl+L)에서 대화하며 수정
전체 배경을 파스텔톤 그라데이션으로 꾸며주고, 계산기 본체에 그림자 효과를 줘서 입체감을 살려줘. 버튼을 누를 때 살짝 들어가는 애니메이션도 추가해줘.
완성 체크리스트
- 화면에 계산기 UI가 정상적으로 표시됨
- 버튼 클릭 시 숫자가 입력됨
- 사칙연산 결과가 정확하게 나옴
- 초기화(C) 버튼이 동작함
자주 묻는 질문 (FAQ)
Q.버튼을 눌러도 반응이 없어요.
A.HTML 파일에서 script.js가 제대로 연결되었는지 확인해보세요. <script src="script.js"></script> 태그가 </body> 직전에 있어야 합니다.
Q.스타일이 적용되지 않아요.
A.HTML 파일의 <head> 태그 안에 <link rel="stylesheet" href="style.css">가 있는지 확인하세요.
준비사항
- •Session 1 완료 (Cursor 설치)
- •바탕화면에 실습용 폴더 생성
사용 기술
💎 프롬프팅 핵심 원칙
- •A. 역할 부여하기: "너는 전문 프론트엔드 개발자야. 초보자도 이해하기 쉬운 코드로 짜줘."
- •B. 구체적인 숫자/색상 제시: "예쁘게" (X) → "숫자는 파란색, 연산자는 주황색" (O)
- •C. 동작 설명: "작동하게" (X) → "클릭하면 화면에 표시되고, 연산자는 한 번만 입력되게" (O)
타자연습기 만들기
다음 단계로 넘어가기
Instructor Notes (강사 노트)
시간 배분
기능 구현 15분, 디자인 수정 5분. CSS Grid 개념을 설명할 때 칠판이나 그림을 활용하면 이해가 빠릅니다.
핵심 메시지
HTML/CSS/JS의 역할 분담을 이해하는 것이 중요합니다. (뼈대/옷/두뇌)
에러 대응
계산 로직(eval 함수 등)의 보안 위험성에 대해 질문이 나오면, "실무에서는 직접 파싱하거나 라이브러리를 쓰지만 학습용으로는 괜찮다"고 답변하세요.