바이브 코딩: AI로 투두 앱 만들기 (초보자 가이드)
AI 시대, 코딩도 바이브 있게!
안녕하세요, Code Flow 블로그 독자 여러분! 2026년, AI 기술은 우리 삶 깊숙이 들어와 코딩 방식에도 큰 변화를 가져오고 있습니다. 이제는 딱딱한 알고리즘만 파는 시대는 지났죠. 코딩도 마치 음악처럼, 자신만의 리듬과 감각으로 즐기는 '바이브 코딩'의 시대가 왔습니다.
오늘은 바이브 코딩으로 AI를 활용한 투두 앱을 만들어 볼 거예요. 투두 앱은 코딩 입문자에게 가장 친숙한 프로젝트 중 하나지만, AI를 접목하면 더욱 강력하고 편리한 앱으로 만들 수 있습니다. 특히, AI가 사용자의 습관을 분석하여 우선순위를 정해주거나, 자연어 처리를 통해 음성으로 투두를 추가하는 기능 등을 구현할 수 있겠죠?
자, 그럼 설레는 마음으로 시작해볼까요?
1단계: 프로젝트 환경 설정 및 기본 UI 구성
먼저, 투두 앱을 개발할 환경을 설정해야 합니다. 요즘은 웹 기반 개발 환경이 잘 갖춰져 있어서 별도의 설치 없이도 브라우저에서 바로 코딩할 수 있습니다. CodePen, CodeSandbox, StackBlitz 같은 서비스를 활용하면 편리하겠죠?
1.1 HTML 기본 구조 작성
HTML은 앱의 뼈대를 담당합니다. 투두 리스트를 표시할 영역, 새로운 투두를 입력할 입력 상자, 추가 버튼 등을 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 투두 앱</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>AI 투두 리스트</h1>
<div class="input-area">
<input type="text" id="todo-input" placeholder="할 일을 입력하세요.">
<button id="add-button">추가</button>
</div>
<ul id="todo-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
1.2 CSS 스타일링 (바이브 불어넣기)
CSS는 앱의 디자인을 담당합니다. 폰트, 색상, 레이아웃 등을 조정하여 자신만의 개성을 담아보세요. 요즘은 CSS 프레임워크(Bootstrap, Tailwind CSS 등)를 사용하면 더욱 빠르고 효율적으로 스타일링할 수 있습니다. 하지만, 바이브 코딩의 핵심은 나만의 감성을 담는 것이죠! 폰트 하나, 색깔 하나에도 심혈을 기울여 보세요.
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
}
.input-area {
display: flex;
margin-bottom: 10px;
}
#todo-input {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
#add-button {
padding: 8px 12px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
#todo-list {
list-style: none;
padding: 0;
}
#todo-list li {
padding: 8px;
border-bottom: 1px solid #eee;
}
#todo-list li:last-child {
border-bottom: none;
}
2단계: JavaScript로 투두 기능 구현
JavaScript는 앱의 동작을 담당합니다. 입력 상자에 입력된 값을 가져와 투두 리스트에 추가하고, 완료된 투두를 삭제하는 기능을 구현해 보겠습니다.
2.1 투두 추가 기능 구현
입력 상자의 값을 가져와 새로운 투두 아이템을 생성하고, 투두 리스트에 추가하는 함수를 만들어 보겠습니다.
const todoInput = document.getElementById('todo-input');
const addButton = document.getElementById('add-button');
const todoList = document.getElementById('todo-list');
addButton.addEventListener('click', addTodo);
function addTodo() {
const todoText = todoInput.value.trim();
if (todoText !== '') {
const listItem = document.createElement('li');
listItem.textContent = todoText;
todoList.appendChild(listItem);
todoInput.value = '';
}
}
2.2 투두 삭제 기능 구현
각 투두 아이템에 삭제 버튼을 추가하고, 해당 버튼을 클릭하면 투두 아이템이 삭제되도록 구현해 보겠습니다.
function addTodo() {
const todoText = todoInput.value.trim();
if (todoText !== '') {
const listItem = document.createElement('li');
listItem.textContent = todoText;
const deleteButton = document.createElement('button');
deleteButton.textContent = '삭제';
deleteButton.addEventListener('click', deleteTodo);
listItem.appendChild(deleteButton);
todoList.appendChild(listItem);
todoInput.value = '';
}
}
function deleteTodo(event) {
const listItem = event.target.parentNode;
todoList.removeChild(listItem);
}
3단계: AI 기능 접목 (OpenAI API 활용)
이제 AI 기능을 접목하여 투두 앱을 더욱 스마트하게 만들어 보겠습니다. OpenAI API를 활용하여 투두의 우선순위를 자동으로 정하거나, 자연어 처리를 통해 음성으로 투두를 추가하는 기능을 구현할 수 있습니다.
3.1 OpenAI API 설정
OpenAI API를 사용하려면 API 키를 발급받아야 합니다. OpenAI 웹사이트에서 계정을 생성하고 API 키를 발급받으세요. 그리고 JavaScript 코드에서 API 키를 사용하여 OpenAI API에 접근할 수 있도록 설정합니다. (API 키는 안전하게 관리해야 합니다!)
3.2 투두 우선순위 자동 설정
OpenAI API를 사용하여 투두의 내용을 분석하고 우선순위를 자동으로 설정하는 기능을 구현해 보겠습니다. 예를 들어, 투두 내용에 '긴급', '마감' 등의 키워드가 포함되어 있으면 우선순위를 높게 설정할 수 있습니다.
// (주의: 실제 API 키는 숨겨서 사용해야 합니다!)
const apiKey = 'YOUR_OPENAI_API_KEY';
async function prioritizeTodo(todoText) {
const response = await fetch('https://api.openai.com/v1/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: 'text-davinci-003',
prompt: `다음 할 일의 우선순위를 1(높음)에서 5(낮음) 사이의 숫자로 평가해주세요: ${todoText}`, // 프롬프트 튜닝이 중요합니다!
max_tokens: 10,
temperature: 0.5
})
});
const data = await response.json();
const priority = parseInt(data.choices[0].text.trim());
return priority;
}
// addTodo 함수 수정
async function addTodo() {
const todoText = todoInput.value.trim();
if (todoText !== '') {
const listItem = document.createElement('li');
listItem.textContent = todoText;
const priority = await prioritizeTodo(todoText);
listItem.dataset.priority = priority; // 우선순위 데이터를 listItem에 저장
const deleteButton = document.createElement('button');
deleteButton.textContent = '삭제';
deleteButton.addEventListener('click', deleteTodo);
listItem.appendChild(deleteButton);
todoList.appendChild(listItem);
todoInput.value = '';
// 우선순위에 따라 정렬 (예시)
sortTodoList();
}
}
function sortTodoList() {
// todoList를 data-priority 속성 기준으로 정렬하는 로직 구현
// (예: Array.from(todoList.children).sort(...))
}
위 코드는 예시이며, 실제 OpenAI API 사용 시에는 에러 처리, API 호출 비용 등을 고려해야 합니다. 또한, 프롬프트 튜닝을 통해 AI가 더욱 정확하게 우선순위를 평가하도록 할 수 있습니다.
4단계: 배포 및 유지보수
투두 앱 개발이 완료되면 배포하여 다른 사람들과 공유할 수 있습니다. Netlify, Vercel 같은 서비스를 이용하면 간단하게 웹사이트를 배포할 수 있습니다. 배포 후에는 사용자 피드백을 수집하고, 버그를 수정하고, 새로운 기능을 추가하는 등 유지보수를 꾸준히 해야 합니다.
4.1 꾸준한 업데이트
AI 기술은 끊임없이 발전하고 있습니다. 새로운 AI 모델이 출시되거나 API가 업데이트되면 투두 앱에도 적용하여 더욱 스마트하게 만들 수 있습니다. 또한, 사용자 피드백을 바탕으로 기능을 개선하고, 디자인을 수정하는 등 꾸준한 업데이트를 통해 앱의 완성도를 높일 수 있습니다.
마무리: 바이브 코딩으로 AI 앱 개발 마스터하기
오늘 우리는 바이브 코딩 방식으로 AI를 활용한 투두 앱을 만들어 보았습니다. AI 기술은 코딩을 더욱 쉽고 재미있게 만들어 줄 뿐만 아니라, 우리 삶을 더욱 풍요롭게 만들어 줄 수 있습니다. 앞으로도 Code Flow에서는 다양한 AI 코딩 프로젝트를 통해 여러분의 코딩 실력 향상을 돕겠습니다.
바이브 코딩, 어렵지 않죠? 자신만의 감각과 리듬으로 코딩을 즐기다 보면 어느새 AI 앱 개발 마스터가 되어 있을 거예요!
Code Flow에서 직접 코딩해보세요! 다양한 튜토리얼과 프로젝트를 통해 코딩 실력을 키울 수 있습니다.