LEVEL 2 QUEST

첫 번째 프로젝트 - AI로 계산기 만들기

첫 번째 프로젝트 - AI로 계산기 만들기 — DevFoil 바이브코딩 Stage 1, Lv.2

첫 번째 바이브코딩 프로젝트

드디어 직접 만들어 볼 시간입니다! 이 강의에서는 AI와 대화하여 완전히 동작하는 계산기 웹 앱을 만들어 보겠습니다.

계산기를 선택한 이유는 3가지입니다:
1. 결과가 즉시 눈에 보여서 성취감이 높습니다
2. HTML, CSS, JavaScript의 기본 구조를 모두 경험할 수 있습니다
3. 수정하고 기능을 추가하기 쉬워서 바이브코딩 연습에 최적입니다

코드를 이해할 필요 없습니다. 이 강의에서 중요한 것은 AI에게 어떻게 요청하고, 결과를 어떻게 확인하고, 어떻게 수정 요청하는지의 과정입니다.

Step 1: AI에게 요청하기

사용할 프롬프트

아래 프롬프트를 그대로 복사해서 AI(ChatGPT, Claude 등)에 입력하세요.

복사해서 사용할 프롬프트

계산기 웹 앱을 만들어줘. HTML, CSS, JavaScript를 하나의 HTML 파일로 작성해줘.

디자인:
- 다크 테마 (배경 #1a1a2e, 버튼 #16213e)
- 둥근 버튼 (border-radius: 12px)
- 디스플레이는 상단에 크게 (폰트 32px, 우측 정렬)
- 전체 너비 320px, 가운데 정렬

기능:
- 기본 사칙연산 (+, -, x, ÷)
- 소수점 입력
- C (전체 삭제), ← (마지막 문자 삭제)
- = 버튼으로 계산 실행
- 0으로 나누면 "Error" 표시

레이아웃 (4열 그리드):
행1: C, ←, %, ÷
행2: 7, 8, 9, x
행3: 4, 5, 6, -
행4: 1, 2, 3, +
행5: 0(2칸 차지), ., =

버튼 호버 효과와 클릭 시 살짝 작아지는 효과를 추가해줘.
= 버튼은 주황색(#e94560)으로 강조해줘.

왜 이렇게 상세한가?

이전 강의에서 배운 CRAFT 프레임워크를 적용했습니다. 색상 코드, 정확한 레이아웃, 기능 목록을 구체적으로 명시했기 때문에 AI가 추측할 필요 없이 원하는 결과를 바로 만들어줍니다.

Step 2: 생성된 코드 이해하기

AI가 생성한 코드는 크게 3가지 부분으로 구성됩니다. 코드를 외울 필요는 없습니다. 각 부분이 무슨 역할인지만 이해하면 됩니다.

파트 1 HTML — 뼈대

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>계산기</title>
    <style>
        /* CSS가 여기에 들어갑니다 */
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display">0</div>
        <div class="buttons">
            <button onclick="clearAll()">C</button>
            <button onclick="deleteLast()">←</button>
            <button onclick="appendChar('%')">%</button>
            <button onclick="appendChar('/')">÷</button>
            <!-- 나머지 버튼들... -->
        </div>
    </div>
    <script>
        /* JavaScript가 여기에 들어갑니다 */
    </script>
</body>
</html>

쉽게 말하면: HTML은 "무엇이 있는지"를 정의합니다. 디스플레이가 있고, 버튼들이 있다는 것을 브라우저에게 알려줍니다.

파트 2 CSS — 디자인

/* 계산기 전체 스타일 */
.calculator {
    width: 320px;
    margin: 50px auto;        /* 화면 가운데 정렬 */
    background: #1a1a2e;      /* 다크 배경 */
    border-radius: 20px;      /* 둥근 모서리 */
    padding: 20px;
}

/* 디스플레이 (숫자가 나오는 곳) */
.display {
    font-size: 32px;
    text-align: right;        /* 숫자 오른쪽 정렬 */
    color: white;
    padding: 20px;
}

/* 버튼 스타일 */
button {
    background: #16213e;
    color: white;
    border: none;
    border-radius: 12px;      /* 둥근 버튼 */
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.1s; /* 클릭 애니메이션 */
}

button:active {
    transform: scale(0.95);    /* 클릭 시 살짝 작아짐 */
}

쉽게 말하면: CSS는 "어떻게 보이는지"를 정의합니다. 색상, 크기, 위치, 애니메이션 등 시각적인 모든 것을 담당합니다.

파트 3 JavaScript — 동작

let display = document.querySelector('.display');
let currentInput = '0';

// 숫자/연산자 입력
function appendChar(char) {
    if (currentInput === '0' && char !== '.') {
        currentInput = char;
    } else {
        currentInput += char;
    }
    display.textContent = currentInput;
}

// 전체 삭제
function clearAll() {
    currentInput = '0';
    display.textContent = '0';
}

// 마지막 문자 삭제
function deleteLast() {
    currentInput = currentInput.slice(0, -1) || '0';
    display.textContent = currentInput;
}

// 계산 실행
function calculate() {
    try {
        let result = eval(currentInput.replace(/x/g, '*'));
        if (!isFinite(result)) {
            display.textContent = 'Error';
            currentInput = '0';
        } else {
            display.textContent = result;
            currentInput = String(result);
        }
    } catch (e) {
        display.textContent = 'Error';
        currentInput = '0';
    }
}

쉽게 말하면: JavaScript는 "어떻게 동작하는지"를 정의합니다. 버튼을 누르면 숫자가 표시되고, = 을 누르면 계산이 실행됩니다.

Step 3: 코드 실행하기

컴퓨터에서 실행하는 방법

1단계: AI가 생성한 전체 코드를 복사합니다
2단계: 컴퓨터에서 "메모장"을 엽니다
3단계: 코드를 붙여넣고 "calculator.html" 이름으로 저장합니다
(저장할 때 파일 형식을 "모든 파일"로 변경해야 합니다)
4단계: 저장한 파일을 더블클릭하면 브라우저에서 계산기가 열립니다!

더 쉬운 방법

Bolt.new을 사용하면 파일 저장 없이 브라우저에서 바로 결과를 확인할 수 있습니다. bolt.new에 접속해서 같은 프롬프트를 입력하면 즉시 실행되는 계산기를 볼 수 있습니다.

Step 4: AI에게 수정 요청하기

계산기가 만들어졌으면, 이제 수정 요청을 연습해 봅시다. 바이브코딩에서 수정/개선 요청은 초기 생성만큼 중요합니다. 아래 프롬프트를 하나씩 시도해 보세요.

수정 1 색상 변경

계산기의 색상 테마를 변경해줘.
- 배경: #0f0f23 (더 어두운 남색)
- 버튼: #1e3a5f (진한 파란색)
- = 버튼: #00d2ff (밝은 시안)
- 디스플레이 텍스트: #00d2ff

수정 2 기능 추가

계산기에 다음 기능을 추가해줘:
계산 히스토리: 최근 5개 계산 결과를 계산기 아래에 보여줘
키보드 입력 지원: 숫자키와 Enter(=), Backspace(←) 지원
천 단위 콤마 표시: 1000 → 1,000

수정 3 애니메이션 추가

계산기에 애니메이션을 추가해줘:
- 처음 로드될 때 아래에서 위로 슬라이드업 효과
- 버튼 호버 시 약간 밝아지는 효과
- = 눌렀을 때 디스플레이에 잠깐 반짝이는 효과

도전 과제: 팁 계산기로 변신시키기

Challenge

기본 계산기를 식당 팁 계산기로 바꿔보세요!

필요한 기능:
- 음식 금액 입력란
- 팁 비율 선택 (10%, 15%, 20%, 직접 입력)
- 인원수 입력
- 1인당 금액 자동 계산
- 결과 표시: 팁 금액, 총 금액, 1인당 금액

AI에게 요청할 때 힌트:

위에서 만든 계산기를 팁 계산기로 변환해줘.

입력:
- 음식 금액 (숫자 입력)
- 팁 비율 (10%, 15%, 20% 버튼 + 직접 입력)
- 인원수 (1-20, +/- 버튼)

출력:
- 팁 금액
- 총 금액 (음식 + 팁)
- 1인당 금액

같은 다크 테마를 유지해줘.

이 과제를 완료하면 여러분은 AI와의 대화만으로 실제로 유용한 웹 앱을 만든 것입니다!

이 강의에서 배운 것

구체적 프롬프트 작성

색상, 레이아웃, 기능을 명확히 지정하면 원하는 결과를 바로 얻을 수 있다

HTML/CSS/JS 3요소

HTML(뼈대) + CSS(디자인) + JavaScript(동작)이 웹 앱의 기본 구조

반복적 수정

한 번에 완벽하게 만드는 것이 아니라, 대화를 통해 점진적으로 개선한다

코드 실행 방법

HTML 파일 저장 후 브라우저에서 열기, 또는 Bolt.new 사용

학습 점검

🧠 퀴즈 1

Q. 웹 페이지에서 버튼의 색상과 크기를 담당하는 것은?

A. HTML

B. CSS

C. JavaScript

D. Python

🧠 퀴즈 2

Q. AI에게 계산기의 색상만 바꾸고 싶을 때 가장 좋은 방법은?

A. "계산기 전체를 다시 만들어줘"

B. "배경색을 #0f0f23으로, 버튼색을 #1e3a5f로 변경해줘"

C. "더 예쁘게 만들어줘"

D. "색상 좀 바꿔줘"

🧠 퀴즈 3

Q. 바이브코딩에서 코드를 수정할 때 가장 효과적인 접근법은?

A. 한 번에 10가지를 동시에 수정 요청

B. 매번 처음부터 다시 만들기

C. 한 번에 1~2가지씩 수정하고 확인을 반복

D. 코드를 직접 수동으로 편집

⚡ 필수 이 레슨의 난이도는 어땠나요?

👆 레슨 완료를 위해 난이도를 선택해주세요!

🤖 AI 학습 도우미 API 키 필요

AI 도우미를 사용하려면 API 키를 설정하세요.
Gemini는 무료로 사용 가능합니다!

API 키 설정하기

💬 피드백 & 요청사항 🧵 Threads 인증 필요

🧵

피드백을 남기려면 Threads 연동이 필요해요

설정에서 연동하기