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