AI에게 코딩을 부탁하면 꽤 빠르게 예제 코드를 만들 수 있습니다. 하지만 초보자에게 더 중요한 것은 “코드가 만들어졌다”가 아니라, 그 코드가 무엇을 하는지 이해하고 안전하게 실행하는 것입니다.
이번 글에서는 AI를 이용해 아주 간단한 HTML 계산기를 만들어보겠습니다. 복잡한 설치는 하지 않습니다. 서버도 쓰지 않습니다. 브라우저에서 열 수 있는 calculator.html 파일 하나만 만들어 실행합니다.
코딩을 처음 시작한 분도 따라 할 수 있도록, AI에게 그대로 복사해서 물어볼 수 있는 실습 프롬프트와 저장 방법, 실행 방법, 오류 확인 방법까지 함께 정리해보겠습니다.
AI는 간단한 코딩 예제를 만드는 데 도움이 됩니다. 하지만 코드를 이해하지 않은 채 그대로 실행하거나 수정하는 습관은 피해야 합니다.
목차
- 무엇을 만들 것인가
- 준비물
- 실습 전 안전 원칙
- 실습 프롬프트 1: 계산기 코드 만들기
- calculator.html로 저장하기
- 브라우저에서 열어보기
- HTML, CSS, JavaScript 역할 이해하기
- 실습 프롬프트 2: 코드 설명 요청하기
- 실습 프롬프트 3: 안전한 변경 요청하기
- 계산기가 작동하지 않을 때
- 실행 전 안전 체크리스트
- 전체 예제 코드
- 이 코드에서 특히 볼 부분
- 함께 읽으면 좋은 글
- 공식 참고 문서
- 마무리
1. 무엇을 만들 것인가
이번 실습에서 만들 것은 아주 단순한 계산기입니다. 아래 기능만 들어갑니다.
- 숫자 버튼 누르기
- 더하기, 빼기, 곱하기, 나누기
- 소수점 입력
- 계산 결과 확인
- C 버튼으로 초기화
중요한 점은 기능을 많이 넣는 것이 아닙니다. HTML, CSS, JavaScript가 각각 어떤 역할을 하는지 눈으로 확인하는 것이 목적입니다.
이번 예제는 로컬 파일 하나로 실행됩니다. 인터넷 연결, 로그인, 결제, 서버, API 키, 패키지 설치가 필요하지 않습니다.
2. 준비물
준비물은 세 가지입니다.
- 브라우저: Chrome, Edge, Firefox, Safari 등
- 텍스트 편집기: 메모장, VS Code, Notepad++ 등
- AI 도구: ChatGPT, Gemini, Copilot 등 질문할 수 있는 AI 도구
처음이라면 Windows 기본 메모장으로도 가능합니다. 다만 코드를 보기 편하게 하려면 VS Code 같은 편집기를 사용하면 좋습니다.
파일 이름은 calculator.html로 저장하고, 브라우저에서 직접 열어 실행합니다.
3. 실습 전 안전 원칙
AI가 만들어준 코드는 편리하지만, 무조건 안전하다고 생각하면 안 됩니다. 특히 코딩 초보자라면 아래 원칙을 먼저 기억해두는 것이 좋습니다.
- 이해하지 못한 코드는 바로 실행하지 않습니다.
- 처음에는 중요한 파일이 아니라 연습용 파일에서만 테스트합니다.
- 개인정보, 비밀번호, API 키를 코드에 넣지 않습니다.
- 알 수 없는 프로그램 설치나 브라우저 확장 프로그램 설치는 하지 않습니다.
- 파일 삭제, 폴더 정리, 계정 로그인, 결제 기능이 들어간 코드는 실행하지 않습니다.
- 외부 서버로 데이터를 보내는 코드가 있는지 확인합니다.
이번 글에서는 이런 위험을 줄이기 위해 로컬 HTML 파일 하나만 사용합니다. 계산기는 내 컴퓨터 안에서만 열어보며, 외부 서버로 데이터를 보내지 않습니다.
4. 실습 프롬프트 1: AI에게 계산기 코드 만들기
이제 AI 도구를 열고 아래 프롬프트를 그대로 복사해서 입력해보세요.
실습 프롬프트 1
나는 코딩 초보자야. 브라우저에서 바로 열 수 있는 간단한 계산기를 만들고 싶어. HTML, CSS, JavaScript를 모두 한 파일에 넣어서 calculator.html로 저장하면 실행되는 예제를 만들어줘. 조건: - 파일 1개만 사용 - 외부 라이브러리 사용하지 않기 - 서버 사용하지 않기 - 로그인 기능 없음 - 결제 기능 없음 - 개인정보 입력 없음 - API 키 없음 - 패키지 설치 없음 - 브라우저 확장 프로그램 설치 없음 - 네트워크 요청 없음 - 파일 삭제 기능 없음 - eval() 사용하지 않기 기능: - 숫자 버튼 - 더하기, 빼기, 곱하기, 나누기 - 소수점 - C 버튼으로 초기화 - = 버튼으로 계산 답변 형식: 1. 전체 코드 2. 저장 방법 3. 브라우저에서 여는 방법 4. HTML, CSS, JavaScript가 각각 하는 일 5. 초보자가 조심해야 할 점
이 프롬프트에서 중요한 부분은 “무엇을 만들어줘”만 쓰지 않고, 무엇은 하지 말아야 하는지도 함께 적은 것입니다. 초보자 실습에서는 기능을 많이 넣는 것보다 안전한 범위를 좁히는 것이 좋습니다.
5. 직접 해보기: calculator.html로 저장하기
AI가 코드를 만들어주면 이제 파일로 저장해야 합니다. 아래 순서대로 진행해보세요.
- 텍스트 편집기를 엽니다.
- AI가 만들어준 전체 코드를 복사합니다.
- 새 파일에 붙여넣습니다.
- 파일 이름을 calculator.html로 저장합니다.
- 저장 위치는 바탕화면이나 연습 폴더처럼 찾기 쉬운 곳으로 정합니다.
여기서 가장 흔한 실수는 파일 이름이 실제로는 calculator.html.txt가 되는 경우입니다. Windows 메모장을 사용할 때는 저장 형식을 “모든 파일”로 바꾸고 파일 이름을 calculator.html로 입력하는 것이 좋습니다.
파일 이름 예시: calculator.html 피해야 할 파일 이름: calculator.html.txt calculator calculator.docx
6. 직접 해보기: 브라우저에서 열어보기
파일을 저장했다면 이제 실행해보겠습니다. 설치 과정은 없습니다. 서버도 필요하지 않습니다.
- 저장한 calculator.html 파일을 찾습니다.
- 파일을 더블클릭합니다.
- 기본 브라우저가 열리면서 계산기 화면이 나타나는지 확인합니다.
- 숫자와 연산자 버튼을 눌러 계산해봅니다.
예를 들어 아래 계산을 테스트해보세요.
7 + 3 = 10 - 4 = 6 * 5 = 8 / 2 = 3.5 + 1.2 =
결과가 예상과 비슷하게 나오면 첫 번째 실습은 성공입니다.
7. HTML, CSS, JavaScript는 각각 무엇을 할까?
계산기 코드는 보통 세 부분으로 나뉩니다. 초보자는 이 세 역할만 구분해도 코드를 훨씬 덜 어렵게 느낄 수 있습니다.
HTML: 화면에 무엇이 있는지 정합니다
HTML은 계산기 화면의 뼈대입니다. 제목, 숫자 표시창, 버튼 같은 요소를 만듭니다.
예: 버튼이 있다 입력창이 있다 제목이 있다
CSS: 화면을 어떻게 보이게 할지 정합니다
CSS는 계산기의 모양을 담당합니다. 버튼 크기, 간격, 배경색, 글자 크기, 가운데 정렬 같은 부분을 정합니다.
예: 버튼을 크게 보이게 하기 계산기 박스에 그림자 넣기 화면 가운데 배치하기
JavaScript: 버튼을 눌렀을 때 무엇이 일어날지 정합니다
JavaScript는 계산기의 동작을 담당합니다. 숫자 버튼을 누르면 화면에 숫자가 보이고, 연산자를 누르면 계산 준비를 하고, = 버튼을 누르면 결과를 보여줍니다.
예: 7 버튼을 누르면 7 표시 + 버튼을 누르면 더하기 준비 = 버튼을 누르면 결과 계산
이렇게 보면 계산기는 단순히 “긴 코드”가 아니라, 구조, 모양, 동작이 합쳐진 작은 웹 페이지입니다.
8. 실습 프롬프트 2: AI에게 코드 설명 요청하기
AI가 코드를 만들어줬다면 바로 실행하는 것에서 끝내지 말고, 설명도 요청해보세요. 특히 초보자는 “이 코드를 한 줄씩 설명해줘”라고 묻는 것이 도움이 됩니다.
실습 프롬프트 2
아래 HTML 계산기 코드를 초보자 기준으로 설명해줘. 설명할 때는 다음 순서로 알려줘. 1. 전체 코드가 하는 일 2. HTML 부분이 하는 일 3. CSS 부분이 하는 일 4. JavaScript 부분이 하는 일 5. 버튼을 클릭했을 때 코드가 실행되는 흐름 6. 내가 수정해도 비교적 안전한 부분 7. 초보자가 함부로 바꾸면 오류가 날 수 있는 부분 정답만 말하지 말고 쉬운 비유로 설명해줘. [여기에 계산기 코드 붙여넣기]
이 질문의 목적은 AI에게 다시 코드를 만들게 하는 것이 아니라, 내가 이해할 수 있게 설명을 받는 것입니다. 코드를 이해하면 나중에 작은 수정도 훨씬 안전하게 할 수 있습니다.
9. 실습 프롬프트 3: 작은 안전 변경 요청하기
계산기가 정상적으로 작동한다면, 이번에는 작은 변경을 해볼 수 있습니다. 처음부터 기능을 크게 바꾸기보다 제목, 안내 문구, 버튼 색상, 글자 크기처럼 안전한 부분부터 바꾸는 것이 좋습니다.
실습 프롬프트 3
아래 HTML 계산기 코드에서 작은 변경만 해줘. 바꾸고 싶은 것: - 제목을 "나의 첫 HTML 계산기"로 변경 - 버튼 글자 크기를 조금 크게 변경 - 안내 문구를 더 친절하게 변경 주의: - 계산 방식은 바꾸지 마 - 외부 라이브러리 추가하지 마 - 네트워크 요청 추가하지 마 - 로그인, 결제, 개인정보 입력 기능 추가하지 마 - API 키 사용하지 마 - 패키지 설치가 필요한 방식으로 바꾸지 마 - eval() 사용하지 마 답변할 때: 1. 변경된 전체 코드 2. 바뀐 부분만 따로 설명 3. 초보자가 확인해야 할 점 [여기에 계산기 코드 붙여넣기]
이렇게 요청하면 AI가 불필요하게 기능을 크게 늘리는 것을 줄일 수 있습니다. 초보자에게는 “작게 바꾸고 바로 확인하기”가 가장 좋은 연습 방법입니다.
10. 계산기가 작동하지 않을 때 확인할 것
계산기 화면이 나오지 않거나 버튼이 작동하지 않는다면 당황하지 말고 아래 순서로 확인해보세요.
1) 파일 이름 확인
파일 이름이 calculator.html인지 확인합니다. 특히 .txt가 뒤에 붙어 있지 않은지 보세요.
2) 전체 코드를 복사했는지 확인
HTML 코드는 시작과 끝이 중요합니다. 중간 일부만 복사하면 화면이 깨지거나 JavaScript가 실행되지 않을 수 있습니다.
3) 브라우저 새로고침
파일을 수정한 뒤에는 브라우저에서 새로고침해야 변경 내용이 반영됩니다.
4) 개발자 도구 Console 확인
브라우저에서 F12를 누르거나, 마우스 오른쪽 클릭 후 “검사”를 선택하면 개발자 도구를 열 수 있습니다. Console 탭에 빨간 오류가 보이면 JavaScript 코드에 문제가 있을 수 있습니다.
5) AI에게 오류 메시지를 함께 보여주기
오류가 있다면 코드만 보여주지 말고, 오류 메시지도 함께 AI에게 물어보는 것이 좋습니다.
실습 프롬프트 4
아래 HTML 계산기 파일이 브라우저에서 제대로 작동하지 않아. 조건: - 네트워크 요청을 추가하지 말 것 - 패키지 설치를 요구하지 말 것 - 파일 삭제 기능을 넣지 말 것 - 로그인, 결제, 개인정보 입력 기능을 추가하지 말 것 - eval()을 사용하지 말 것 확인해줘: 1. 코드에서 문법 오류가 있는지 2. 버튼 클릭 이벤트가 제대로 연결되어 있는지 3. HTML id나 class 이름이 JavaScript와 맞는지 4. 초보자가 이해할 수 있는 최소 수정 방법 5. 수정 전후 차이 [현재 코드] 여기에 코드 붙여넣기 [브라우저 Console 오류 메시지] 여기에 오류 메시지 붙여넣기
11. AI 생성 코드를 실행하기 전 안전 체크리스트
AI가 만든 코드를 실행하기 전에는 아래 항목을 확인하세요. 이번 계산기처럼 단순한 HTML 파일이라도, 이 습관을 들여두면 나중에 더 복잡한 코드를 볼 때 도움이 됩니다.
- 파일이 연습용 calculator.html 하나인가?
- 내 이름, 이메일, 비밀번호, API 키를 넣으라고 하지 않는가?
- 알 수 없는 프로그램 설치를 요구하지 않는가?
- 브라우저 확장 프로그램 설치를 요구하지 않는가?
- 외부 사이트로 데이터를 보내는 코드가 없는가?
fetch,XMLHttpRequest같은 네트워크 요청 코드가 갑자기 들어가지 않았는가?eval()처럼 문자열을 코드로 실행하는 방식이 들어가지 않았는가?- 파일 삭제, 폴더 수정, 계정 로그인, 결제 관련 코드가 없는가?
- 내가 최소한 HTML, CSS, JavaScript 각 부분의 역할을 설명할 수 있는가?
- 중요한 파일이 아니라 연습용 파일에서 먼저 테스트하는가?
이해하지 못한 코드는 실행하지 않는 것이 원칙입니다. 특히 개인정보, 결제, 파일 삭제, 외부 접속, 설치 명령이 들어간 코드는 초보자 실습용으로 적합하지 않습니다.
12. 전체 예제 코드
아래 코드는 로컬에서 실행해볼 수 있는 간단한 계산기 예제입니다. 외부 라이브러리를 사용하지 않고, eval()도 사용하지 않습니다.
텍스트 편집기에 복사한 뒤 calculator.html로 저장하고 브라우저에서 열어보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>간단한 HTML 계산기</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f3f4f6;
margin: 0;
padding: 30px;
}
.calculator {
max-width: 320px;
margin: 0 auto;
background: #ffffff;
padding: 20px;
border-radius: 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
h1 {
font-size: 22px;
text-align: center;
margin-bottom: 16px;
}
#display {
width: 100%;
box-sizing: border-box;
font-size: 28px;
padding: 12px;
margin-bottom: 12px;
text-align: right;
border: 1px solid #d1d5db;
border-radius: 8px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
button {
font-size: 20px;
padding: 14px;
border: none;
border-radius: 8px;
background: #e5e7eb;
cursor: pointer;
}
button:hover {
background: #d1d5db;
}
.clear {
background: #fecaca;
}
.equals {
background: #bfdbfe;
}
#message {
font-size: 14px;
color: #555555;
text-align: center;
margin-top: 14px;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="calculator">
<h1>간단한 계산기</h1>
<input id="display" type="text" value="0" readonly aria-label="계산 결과" />
<div class="buttons">
<button data-value="7">7</button>
<button data-value="8">8</button>
<button data-value="9">9</button>
<button data-value="/">/</button>
<button data-value="4">4</button>
<button data-value="5">5</button>
<button data-value="6">6</button>
<button data-value="*">*</button>
<button data-value="1">1</button>
<button data-value="2">2</button>
<button data-value="3">3</button>
<button data-value="-">-</button>
<button data-value="0">0</button>
<button data-value=".">.</button>
<button data-action="equals" class="equals">=</button>
<button data-value="+">+</button>
<button data-action="clear" class="clear">C</button>
</div>
<p id="message">숫자와 연산자를 눌러보세요.</p>
</div>
<script>
const display = document.getElementById("display");
const message = document.getElementById("message");
let firstNumber = "";
let operator = "";
let waitingForSecondNumber = false;
function inputNumber(number) {
if (waitingForSecondNumber) {
display.value = number;
waitingForSecondNumber = false;
return;
}
if (display.value === "0") {
display.value = number;
} else {
display.value += number;
}
}
function inputDecimal() {
if (waitingForSecondNumber) {
display.value = "0.";
waitingForSecondNumber = false;
return;
}
if (!display.value.includes(".")) {
display.value += ".";
}
}
function chooseOperator(selectedOperator) {
const currentValue = display.value;
if (firstNumber === "") {
firstNumber = currentValue;
} else if (operator !== "") {
const result = calculate(Number(firstNumber), Number(currentValue), operator);
if (result === "ERROR") {
resetCalculator();
message.textContent = "0으로 나눌 수 없습니다.";
return;
}
display.value = String(result);
firstNumber = display.value;
}
operator = selectedOperator;
waitingForSecondNumber = true;
message.textContent = firstNumber + " " + operator + " ...";
}
function calculate(a, b, selectedOperator) {
if (selectedOperator === "+") {
return a + b;
}
if (selectedOperator === "-") {
return a - b;
}
if (selectedOperator === "*") {
return a * b;
}
if (selectedOperator === "/") {
if (b === 0) {
return "ERROR";
}
return a / b;
}
return b;
}
function resetCalculator() {
display.value = "0";
firstNumber = "";
operator = "";
waitingForSecondNumber = false;
}
document.querySelector(".buttons").addEventListener("click", function (event) {
const button = event.target;
if (!button.matches("button")) {
return;
}
const value = button.dataset.value;
const action = button.dataset.action;
if (value !== undefined) {
if (value === ".") {
inputDecimal();
return;
}
if (value === "+" || value === "-" || value === "*" || value === "/") {
chooseOperator(value);
return;
}
inputNumber(value);
return;
}
if (action === "equals") {
if (firstNumber === "" || operator === "") {
return;
}
const result = calculate(Number(firstNumber), Number(display.value), operator);
if (result === "ERROR") {
resetCalculator();
message.textContent = "0으로 나눌 수 없습니다.";
return;
}
display.value = String(result);
firstNumber = "";
operator = "";
waitingForSecondNumber = false;
message.textContent = "계산 완료";
}
if (action === "clear") {
resetCalculator();
message.textContent = "숫자와 연산자를 눌러보세요.";
}
});
</script>
</body>
</html>
13. 이 코드에서 특히 볼 부분
1) 버튼에는 data-value가 들어 있습니다
각 버튼에는 숫자나 연산자를 나타내는 값이 들어 있습니다.
예를 들어 7 버튼은 data-value="7"을 가지고 있습니다.
2) JavaScript는 버튼 클릭을 감지합니다
버튼 영역에 클릭 이벤트를 연결해두고, 사용자가 어떤 버튼을 눌렀는지 확인합니다. 그다음 숫자인지, 연산자인지, C 버튼인지, = 버튼인지에 따라 다른 함수를 실행합니다.
3) eval()을 사용하지 않습니다
계산기 예제에서 종종 eval()을 사용하는 코드가 보일 수 있습니다.
하지만 초보자 실습에서는 문자열을 코드처럼 실행하는 방식보다, 지금처럼 연산자를 직접 구분해서 계산하는 방식이 이해하기 쉽고 안전합니다.
4) 0으로 나누는 경우를 따로 처리합니다
나누기에서 두 번째 숫자가 0이면 계산을 진행하지 않고 안내 문구를 보여줍니다. 작은 예제라도 예외 상황을 생각해보는 습관이 중요합니다.
14. 함께 읽으면 좋은 글
AI를 코딩 공부에 활용할 때는 코드를 만드는 것뿐 아니라, 오류를 이해하고 질문을 잘하는 습관도 중요합니다. 아래 글도 함께 읽어보면 이번 실습을 이어가기 좋습니다.
- AI 코딩 도구는 초보자에게 도움이 될까? Python 오류 해결 예시로 보기
- AI가 코딩을 도와주는 시대, 초보자는 무엇을 배워야 할까?
- AI에게 질문 잘하는 법: Python 공부 계획으로 보는 프롬프트 실습
- AI 답변을 그대로 믿으면 안 되는 이유: 사실 확인과 출처 확인 방법
15. 공식 참고 문서
HTML, CSS, JavaScript의 기본 개념과 AI 답변 확인 습관을 더 정확히 확인하고 싶다면 아래 공식 문서를 참고해보세요.
- MDN Web Docs - HTML
- MDN Web Docs - CSS
- MDN Web Docs - JavaScript
- MDN Web Docs - addEventListener()
- OWASP - Secure Coding Practices Quick Reference Guide
- OpenAI Help Center - Does ChatGPT tell the truth?
마무리
이번 실습에서는 AI에게 프롬프트를 입력해 간단한 HTML 계산기 코드를 만들고, calculator.html 파일로 저장해 브라우저에서 실행해보는 과정을 살펴봤습니다.
AI는 작은 코딩 예제를 빠르게 만들어주는 데 도움이 됩니다. 하지만 코드를 이해하지 못한 채 복사해서 실행하는 습관은 좋지 않습니다. 특히 외부 서버, 로그인, 결제, 개인정보, API 키, 설치 명령, 파일 삭제가 포함된 코드는 더욱 조심해야 합니다.
처음에는 이번 계산기처럼 작고 안전한 로컬 파일부터 시작해보세요. 코드를 조금씩 바꾸고, 브라우저에서 결과를 확인하고, AI에게 설명을 요청하면서 이해하는 과정이 쌓이면 코딩이 훨씬 덜 낯설게 느껴질 것입니다.
