티스토리 뷰

Front-End-Web/javascript

자바스크립트_함수와 이벤트 종합 바이브코딩

jsBae 2026. 7. 31. 11:29

기분에 따라 바뀌는 응원 카드

사용자가 자신의 기분에 해당하는 버튼을 클릭하면 배경색과 응원 문구가 변경되는 웹페이지를 만든다.

1. 완성 화면의 기능

웹페이지에는 다음 세 개의 버튼이 있다.

😊 기분 좋아요
😢 조금 힘들어요
😴 피곤해요

버튼을 클릭하면 다음 내용이 변경된다.

응원 문구
카드의 배경색
이모지

2. 사용 문법

학습 내용	적용
함수	기분별 화면 변경 작업을 함수로 작성한다.
이벤트	버튼을 클릭하였을 때 함수를 실행한다.
DOM 선택	getElementById()로 HTML 요소를 가져온다.
내용 변경	textContent로 문구를 변경한다.
스타일 변경	style.backgroundColor로 색상을 변경한다.

3. HTML 작성하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>오늘의 응원 카드</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="card">
        <h1 id="emoji">🙂</h1>
        <h2>오늘 기분은 어떤가요?</h2>

        <p id="message">
            아래 버튼을 선택하여 주세요.
        </p>

        <button id="happyButton">😊 기분 좋아요</button>
        <button id="sadButton">😢 조금 힘들어요</button>
        <button id="tiredButton">😴 피곤해요</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

4. CSS 작성하기

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f2f2f2;
    padding-top: 80px;
}

#card {
    width: 420px;
    margin: 0 auto;
    padding: 40px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#emoji {
    font-size: 60px;
}

#message {
    font-size: 20px;
    margin: 30px 0;
}

button {
    padding: 12px 18px;
    margin: 5px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

5. JavaScript 작성하기

5.1 HTML 요소 가져오기

const card = document.getElementById("card");
const emoji = document.getElementById("emoji");
const message = document.getElementById("message");

const happyButton = document.getElementById("happyButton");
const sadButton = document.getElementById("sadButton");
const tiredButton = document.getElementById("tiredButton");

5.2 기분별 함수 만들기

function showHappyMessage() {
    emoji.textContent = "😊";
    message.textContent = "좋은 기분을 주변 사람들과 나누어 보세요!";
    card.style.backgroundColor = "lightyellow";
}

function showSadMessage() {
    emoji.textContent = "🌱";
    message.textContent = "조금 쉬어 가도 괜찮습니다. 오늘도 충분히 잘하고 있습니다.";
    card.style.backgroundColor = "lightblue";
}

function showTiredMessage() {
    emoji.textContent = "☕";
    message.textContent = "잠시 자리에서 일어나 몸을 움직이고 물을 한 잔 마셔 보세요.";
    card.style.backgroundColor = "lavender";
}

5.3 버튼과 함수 연결하기

happyButton.addEventListener("click", showHappyMessage);
sadButton.addEventListener("click", showSadMessage);
tiredButton.addEventListener("click", showTiredMessage);

6. 전체 JavaScript 코드

const card = document.getElementById("card");
const emoji = document.getElementById("emoji");
const message = document.getElementById("message");

const happyButton = document.getElementById("happyButton");
const sadButton = document.getElementById("sadButton");
const tiredButton = document.getElementById("tiredButton");

function showHappyMessage() {
    emoji.textContent = "😊";
    message.textContent = "좋은 기분을 주변 사람들과 나누어 보세요!";
    card.style.backgroundColor = "lightyellow";
}

function showSadMessage() {
    emoji.textContent = "🌱";
    message.textContent = "조금 쉬어 가도 괜찮습니다. 오늘도 충분히 잘하고 있습니다.";
    card.style.backgroundColor = "lightblue";
}

function showTiredMessage() {
    emoji.textContent = "☕";
    message.textContent = "잠시 자리에서 일어나 몸을 움직이고 물을 한 잔 마셔 보세요.";
    card.style.backgroundColor = "lavender";
}

happyButton.addEventListener("click", showHappyMessage);
sadButton.addEventListener("click", showSadMessage);
tiredButton.addEventListener("click", showTiredMessage);

7. 바이브코딩 진행 방법

1단계: 먼저 직접 작성하기

기본 예제를 직접 입력하여 함수와 이벤트의 작동 원리를 확인한다.

function showHappyMessage() {
    message.textContent = "오늘도 좋은 하루입니다.";
}

이 과정에서는 AI를 사용하기 전에 다음 내용을 이해하여야 한다.

함수가 언제 실행되는가?
클릭 이벤트는 어디에서 발생하는가?
어떤 HTML 요소의 내용이 변경되는가?
함수 이름 뒤에 괄호를 붙이지 않는 이유는 무엇인가?

2단계: AI에 기능 확장 요청하기

다음과 같은 프롬프트를 사용할 수 있다.

HTML, CSS, JavaScript로 기분에 따라 응원 메시지와 배경색이 변경되는 응원 카드를 만들어 줘. JavaScript 초보자 예제이므로 함수, getElementById, textContent, style, click 이벤트와 addEventListener만 사용하여 줘. 배열, 반복문, 클래스는 사용하지 말아 줘.

이 프롬프트에서 중요한 부분은 사용할 문법과 사용하지 않을 문법을 명확하게 제한하는 것이다.

3단계: AI 코드 분석하기

AI가 생성한 코드를 그대로 제출하지 않고 다음 항목을 확인한다.

항목	질문
HTML 요소	버튼과 메시지 영역의 id는 무엇인가?
함수	각 함수는 어떤 작업을 수행하는가?
이벤트	어떤 이벤트가 사용되었는가?
함수 연결	이벤트와 함수는 어디에서 연결되는가?
화면 변화	어떤 속성을 이용하여 글자와 색상을 변경하는가?

4단계: 학생이 직접 수정하기

학생은 AI가 생성한 결과에서 최소 세 가지를 직접 변경한다.

응원 문구 변경하기
배경색 변경하기
새로운 기분 버튼 하나 추가하기

예를 들어 화가 나요 버튼을 추가할 수 있다.

<button id="angryButton">😠 화가 나요</button>

const angryButton = document.getElementById("angryButton");

function showAngryMessage() {
    emoji.textContent = "🌿";
    message.textContent = "잠시 깊게 숨을 쉬고 천천히 마음을 정리하여 보세요.";
    card.style.backgroundColor = "mistyrose";
}

angryButton.addEventListener("click", showAngryMessage);

8. 응용 과제

과제: 나만의 감정 반응 카드 만들기

다음 조건을 만족하는 웹페이지를 제작한다.

필수 조건

버튼을 세 개 이상 만든다.
버튼마다 서로 다른 함수를 연결한다.
버튼을 클릭하면 문구가 변경된다.
버튼을 클릭하면 배경색이 변경된다.
addEventListener()를 사용한다.

선택 조건

이모지를 변경한다.
글자색을 변경한다.
버튼을 하나 더 추가한다.
카드 제목을 변경한다.

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/08 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

글 보관함

multiking