반복 업무 목록, 붙여넣기만 하면 담당자·주기·완료 기준이 보이는 HTML 체크리스트
매주 같은 업무를 다시 적는데도 담당자와 마감 기준이 흩어져 있으면, 체크박스 하나를 누르기 전에 목록부터 다시 해석하게 됩니다. 이 글에서는 반복 업무 문장을 붙여넣으면 담당자·주기·완료 기준을 나눠 보여주는 단일 HTML MVP를 바이브코딩으로 만듭니다. 서버나 별도 설치 없이 브라우저에서 열고, 체크 상태는 같은 브라우저에 저장하는 방식입니다.
▣ 30초 요약
반복 업무를 한 줄에
업무 | 담당자 | 주기 | 완료 기준순서로 적습니다.AI에게 첫 프롬프트를 주고 단일 HTML 파일을 만들게 합니다.
결과 화면에서는 담당자·주기·완료 기준을 열로 나눠 확인합니다.
체크 상태는
localStorage에 저장되지만 팀 공유나 서버 백업은 아닙니다.작동하지 않는 부분은 기능을 한 번에 늘리지 말고 입력→변환→표시 순서로 고칩니다.
이걸 만들면 무엇이 달라질까요?
메신저에 “주간 리포트 작성 / 민지 / 매주 / 팀 채널에 링크 공유”처럼 적어 두면, 지금 필요한 건 문서 편집기가 아니라 누가 언제 무엇을 끝내야 하는지 한 화면에 고정하는 것입니다. 기존 방식은 목록을 붙여넣은 뒤 사람이 다시 표로 옮겨야 하지만, 이 MVP는 줄을 나누고 | 기호 기준으로 칸을 나눠 체크리스트로 보여줍니다.
작은 예시 데이터는 다음과 같습니다.
주간 리포트 작성 | 민지 | 매주 | 팀 채널에 링크 공유
재고 확인 | 준호 | 매일 | 재고표에 수량 기록
예상 출력은 업무 2개가 카드 또는 표 형태로 나타나고, 각 행에 체크 상자·담당자·주기·완료 기준이 붙는 모습입니다. 이 글의 코드는 문서 기반 예시이며, 아래 코드를 직접 저장해 브라우저에서 열어 확인하는 흐름으로 안내합니다.
첫 프롬프트는 기능보다 입력과 완료 기준을 먼저 적습니다
바이브코딩은 코드를 외우는 과정이라기보다, AI에게 “무엇을 넣고 무엇이 보이면 성공인지”를 구체적으로 말하는 작업입니다. 아래 프롬프트를 ChatGPT·Claude·Codex처럼 HTML 파일을 만들어 줄 수 있는 AI에 그대로 붙여 넣습니다.
설치 없이 브라우저에서 열 수 있는 단일 HTML 파일을 만들어줘.
목표는 반복 업무 목록을 붙여넣어 담당자, 주기, 완료 기준을 한눈에 보는 체크리스트야.
입력 형식은 한 줄에 다음 순서야.
업무명 | 담당자 | 주기 | 완료 기준
필수 기능:
1. textarea에 여러 줄을 붙여넣는다.
2. “목록 만들기”를 누르면 줄마다 4칸을 읽어 체크리스트로 표시한다.
3. 각 행에는 checkbox, 업무명, 담당자, 주기, 완료 기준이 보인다.
4. 완료한 행은 취소선으로 표시하고 전체 진행 개수를 보여준다.
5. 체크 상태와 마지막 목록을 localStorage에 저장하고 다시 열면 불러온다.
6. 칸이 부족한 줄은 오류 목록으로 알려주며 임의로 담당자나 완료 기준을 만들지 않는다.
7. 외부 라이브러리, 서버, 로그인, 개인정보 전송은 사용하지 않는다.
모바일에서 읽기 쉬운 CSS를 포함하고, 설명 주석은 초보자도 이해할 수 있게 써줘.
파일 하나로 완성해줘. 실행 방법과 성공 확인 방법도 파일 아래 주석으로 알려줘.
여기서 중요한 문장은 “칸이 부족한 줄은 임의로 만들지 않는다”입니다. AI가 빈칸을 자연스럽게 채우면 화면은 그럴듯해도 업무 기준이 틀릴 수 있으므로, 모르는 값은 오류로 남기는 규칙을 처음부터 박아 둡니다.
완성 화면은 입력·결과·오류가 한 흐름이어야 합니다
HTML은 웹페이지의 뼈대이고, CSS는 화면 배치, JavaScript는 버튼을 눌렀을 때의 동작을 담당합니다. 이번 도구는 세 가지를 한 파일에 넣어 “파일 하나를 저장하고 열기”만으로 확인하게 합니다.
아래 코드는 핵심 MVP입니다. 새 파일을 만들고 전체를 복사해 repeat-checklist.html로 저장하세요.
Mac에서는 텍스트 편집기에 붙여넣은 뒤 일반 텍스트로 저장하고, 파일을 더블클릭해 브라우저에서 엽니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>반복 업무 체크리스트</title>
<style>
:root { font-family: system-ui, sans-serif; color: #172033; background: #eef3f8; }
body { margin: 0; padding: 24px; }
main { max-width: 960px; margin: auto; }
.panel, .task { background: white; border: 1px solid #d8e1ec; border-radius: 16px; padding: 18px; margin: 14px 0; box-shadow: 0 8px 24px #19324a12; }
textarea { width: 100%; min-height: 150px; box-sizing: border-box; padding: 14px; border: 1px solid #b8c7d8; border-radius: 10px; font: inherit; resize: vertical; }
button { margin-top: 12px; padding: 11px 16px; border: 0; border-radius: 9px; background: #0b7285; color: white; font-weight: 700; cursor: pointer; }
.task { display: grid; grid-template-columns: 30px 1.5fr 0.8fr 0.7fr 1.5fr; gap: 12px; align-items: center; }
.task.done .name, .task.done .criterion { text-decoration: line-through; color: #6d7783; }
.meta { color: #526170; font-size: .92rem; }
.error { color: #a33b35; background: #fff1f0; padding: 10px; border-radius: 8px; }
@media (max-width: 680px) { body { padding: 12px; } .task { grid-template-columns: 30px 1fr; } .task > div:not(.name) { grid-column: 2; } }
</style>
</head>
<body>
<main>
<h1>반복 업무 체크리스트</h1>
<section class="panel">
<label for="source"><strong>업무 목록 붙여넣기</strong><br>업무명 | 담당자 | 주기 | 완료 기준</label>
<textarea id="source">주간 리포트 작성 | 민지 | 매주 | 팀 채널에 링크 공유
재고 확인 | 준호 | 매일 | 재고표에 수량 기록</textarea>
<button id="build">목록 만들기</button>
<p id="summary" class="meta"></p>
<div id="errors"></div>
</section>
<section id="list" aria-live="polite"></section>
</main>
<script>
const source = document.querySelector('#source');
const list = document.querySelector('#list');
const errors = document.querySelector('#errors');
const summary = document.querySelector('#summary');
const KEY = 'repeat-checklist-v1';
let tasks = [];
function save() { localStorage.setItem(KEY, JSON.stringify({ source: source.value, tasks })); }
function safe(value) {
return value.replace(/[&<>\"']/g, character => ({ '&': '&', '<': '<', '>': '>', '\"': '"', "'": ''' }[character]));
}
function render() {
list.innerHTML = '';
tasks.forEach((task, index) => {
const row = document.createElement('div'); row.className = 'task' + (task.done ? ' done' : '');
row.innerHTML = `<input type="checkbox" ${task.done ? 'checked' : ''} aria-label="${safe(task.name)} 완료">` +
`<div class="name"><strong>${safe(task.name)}</strong></div><div class="meta">담당자: ${safe(task.owner)}</div>` +
`<div class="meta">주기: ${safe(task.cycle)}</div><div class="criterion">완료 기준: ${safe(task.criterion)}</div>`;
row.querySelector('input').addEventListener('change', (event) => { tasks[index].done = event.target.checked; save(); render(); });
list.appendChild(row);
});
const done = tasks.filter(task => task.done).length;
summary.textContent = `완료 ${done} / 전체 ${tasks.length}`;
}
function build() {
const next = []; const bad = [];
source.value.split('\n').map(line => line.trim()).filter(Boolean).forEach((line, index) => {
const parts = line.split('|').map(part => part.trim());
if (parts.length !== 4 || parts.some(part => !part)) bad.push(`${index + 1}번째 줄: 4칸이 모두 필요합니다.`);
else next.push({ name: parts[0], owner: parts[1], cycle: parts[2], criterion: parts[3], done: false });
});
tasks = next; errors.innerHTML = bad.length ? `<p class="error">${bad.join('<br>')}</p>` : '';
save(); render();
}
const saved = localStorage.getItem(KEY);
if (saved) { const data = JSON.parse(saved); source.value = data.source || source.value; tasks = data.tasks || []; render(); }
else build();
document.querySelector('#build').addEventListener('click', build);
</script>
</body>
</html>
성공했는지 눈으로 확인하는 순서
- 화면에 예시 업무 2개가 보입니다.
목록 만들기를 누르면 완료 개수가 표시됩니다.- 체크 상자를 누르면 해당 행에 취소선이 생깁니다.
- 페이지를 새로 고쳐도 같은 목록과 체크 상태가 남습니다.
- 한 줄에서
|를 하나 빼고 다시 만들면 그 줄만 오류로 표시됩니다.
이 순서는 코드가 “있다”가 아니라 입력→변환→결과→저장이 이어지는지 확인하는 최소 검증입니다. 실제로 코드를 실행하지 않은 경우에는 위 결과를 예상 동작으로만 표현해야 하며, 화면 캡처나 성능 수치를 검증 결과처럼 쓰면 안 됩니다.
AI가 원하는 결과를 못 만들었을 때는 한 기능씩 고칩니다
처음 결과가 표가 아니라 긴 문장으로 나오거나 저장이 되지 않으면 “더 예쁘게 만들어줘”라고 다시 말하지 마세요. 무엇이 어긋났는지 한 줄로 특정해야 수정 범위가 작아집니다.
현재 HTML에서 목록 행은 보이지만 체크 상태가 새로고침 뒤 사라져.
기존 화면 스타일과 입력 형식은 유지하고, localStorage에 source와 tasks를 JSON 문자열로 저장한 뒤
페이지가 열릴 때 다시 읽는 부분만 고쳐줘. localStorage가 막힌 경우에는 오류를 숨기지 말고
사용자에게 “이 브라우저에서는 저장할 수 없습니다”라고 표시해줘.
수정한 함수와 변경 이유를 먼저 설명하고 전체 HTML을 다시 출력해줘.
오류 메시지가 JSON.parse를 가리키면 저장된 값이 JSON이 아닌 경우입니다. 브라우저 개발자 도구를 열기 전에 먼저 저장 키를 바꾸거나 초기화 버튼을 추가해 달라고 요청하는 편이 초보자에게 안전합니다.
개인정보나 고객 이름이 들어간 목록은 이 파일에 넣지 않는 것이 좋습니다. localStorage는 팀 서버의 권한 관리가 아니며, 같은 브라우저를 사용하는 사람이 볼 수 있는 로컬 데이터이기 때문입니다.
이 방식이 맞는 사람과 맞지 않는 경우
이 도구는 개인 컴퓨터에서 반복 목록을 정리하고 체크하는 사람에게 어울립니다. 담당자·주기·완료 기준이 매번 문장 안에 섞여 있고, 서버 없이 작은 도구부터 만들어 보고 싶을 때 특히 흐름이 단순합니다.
반대로 여러 사람이 동시에 수정해야 하거나, 권한별 접근·감사 기록·알림이 필요하면 단일 HTML로 끝내면 안 됩니다. 그때는 사내 업무 시스템, 공유 문서, 데이터베이스를 검토해야 하며, 이 MVP를 팀 시스템인 것처럼 포장하지 않는 것이 핵심입니다.
localStorage는 페이지의 출처별로 값을 보관하고 문자열을 저장하므로, 이 예제에서는 배열을 JSON으로 바꿔 저장합니다. 브라우저 설정이나 비공개 모드에서는 저장이 제한될 수 있고, 저장 데이터는 자동으로 서버에 올라가지 않습니다.
다음 수정은 ‘기능 추가’보다 기준 고정부터
첫 버전이 작동하면 업무에 맞춰 주기를 필터링하거나 담당자별 보기를 추가할 수 있습니다. 다만 알림, 로그인, 여러 기기 동기화까지 한 번에 붙이면 “단일 HTML 체크리스트”라는 장점이 사라집니다.
다음 행동은 목록 5줄을 실제 형식에 맞춰 넣고, 빈 칸·구분자 누락·체크 상태 복원 세 가지를 확인하는 것입니다. 그 뒤에도 팀 공유가 필요하다고 판단되면 별도 글에서 서버 저장과 권한 설계를 다루는 편이 안전합니다.
작업 환경을 함께 정리한다면
이 글의 MVP는 키보드와 브라우저만으로 시작할 수 있습니다. 긴 목록을 자주 붙여넣는다면 입력이 편한 외장 키보드, 화면을 나란히 놓고 프롬프트와 결과를 비교할 수 있는 모니터처럼 붙여넣기·확인·수정 흐름을 직접 돕는 장비만 후보로 삼는 것이 자연스럽습니다.
긴 목록을 붙여넣을 때 키보드 입력을 보조하는 용도로만 제안합니다. 실제 사용감이나 호환성은 구매 페이지에서 확인하세요.
프롬프트와 브라우저 결과를 나란히 확인하려는 작업 환경에서만 검토할 만한 후보입니다. 실제 연결 단자와 조건은 구매 페이지에서 확인하세요.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
출처
핵심 정리: 다섯 가지 질문과 답
Q. 이 체크리스트의 입력 형식은 무엇인가요?
업무명 | 담당자 | 주기 | 완료 기준 순서로 한 줄에 적습니다.
Q. 왜 단일 HTML로 만드나요?
설치나 서버 없이 파일 하나를 브라우저에서 열어 작은 업무 도구를 확인하기 위해서입니다.
Q. 체크 상태는 어디에 저장되나요?
이 예제는 같은 브라우저의 localStorage에 문자열 형태로 저장합니다.
Q. 칸이 부족한 줄은 어떻게 처리하나요?
담당자나 기준을 임의로 채우지 않고 오류 목록으로 표시하도록 설계합니다.
Q. 팀 공유용 업무 시스템으로 써도 되나요?
아닙니다. 동시 수정·권한·감사 기록·알림이 필요하면 서버나 업무 시스템을 따로 검토해야 합니다.
글을 읽어 주셔서 감사합니다.
이 글이 도움이 되었고 새로운 정보를 계속 받아보고 싶으시다면 구독해 주세요.
'AI > AI 활용 기초' 카테고리의 다른 글
| 바이브코딩 업무 대시보드, 매번 다시 세던 완료율을 한 화면에 보이게 만들기 (0) | 2026.10.08 |
|---|---|
| 매출 CSV 이상값 찾기, 평균에서 튄 행만 먼저 확인하는 HTML 만들기 (0) | 2026.10.05 |
| 여러 문서 의견 비교표 만들기, 붙여넣기만 하고 놓친 쟁점 찾기 (0) | 2026.09.29 |
| 인수인계서 HTML 만들기, 메모가 섞여도 다음 담당자 할 일이 보이게 (0) | 2026.09.28 |
| 단일 HTML 일정 플래너, 마감일과 예상 시간만 넣고 오늘 순서 정하기 (0) | 2026.09.27 |
댓글