바이브코딩 업무 보드, 요청 붙여넣자 담당자별 접수 목록이 보이게 만들기
업무 요청을 복사해 붙여넣고 담당자별 접수 목록으로 나누는 보드는, 비개발자도 AI에게 단일 HTML 파일을 요청해 만들 수 있습니다. 핵심은 ‘AI가 알아서 분류’한다고 기대하지 않고, 요청문에 담당자 표기를 넣고 결과 규칙을 프롬프트에 고정하는 일입니다. 처음 버전은 서버 없이 브라우저에서 열리는 한 파일이면 충분합니다.
30초 요약
요청 입력칸에는 여러 줄을 붙여넣고,[담당: 이름]같은 표기를 기준으로 카드를 나눕니다. AI에는 화면·입력 규칙·성공 기준을 한 번에 전달합니다. 실제 이름·전화번호·고객 내용은 프롬프트에 넣기 전에 지우거나 가명으로 바꿉니다.
이걸 만들면 무엇이 달라질까요?
메신저를 읽고 ‘누가 할 일인지’를 다시 옮겨 적는 흐름이 줄어듭니다. 요청을 정해 둔 형식으로 붙여넣으면 담당자 칸마다 카드가 보이고, 빠진 담당자 표기는 ‘미분류’로 따로 확인하는 구조입니다.
예를 들어 아래처럼 적습니다. 이 글의 예시는 설명용 데이터이며, 실제 고객 정보가 아닙니다.
[담당: 민지] 9월 뉴스레터 초안 검토 / 마감: 수요일
[담당: 도윤] 홈페이지 문의 답변 정리 / 마감: 목요일
[담당: 민지] 행사 배너 문구 수정 / 마감: 금요일
담당자 미정: 회의실 예약 확인
그러면 ‘민지 2건’, ‘도윤 1건’, ‘미분류 1건’처럼 나뉜 목록이 나옵니다. 누락을 없애는 마법이 아니라, 누락을 눈에 띄게 만드는 작은 화면이라고 생각하면 맞습니다.
업무 접수 보드 · 예시 화면
예시 데이터 · 실제로 작동하는 입력창이나 버튼이 아닙니다.
민지 2
뉴스레터 초안 검토
행사 배너 문구 수정
도윤 1
홈페이지 문의 답변 정리
미분류 1
회의실 예약 확인
왜 ‘한 파일’부터 시작할까요?
HTML은 웹페이지의 뼈대를 적는 문서입니다. 여기에 CSS(보이는 모양을 정하는 규칙)와 JavaScript(클릭·분류처럼 움직임을 만드는 규칙)를 함께 넣으면, 별도 설치 없이 브라우저에서 열어 보는 작은 MVP를 만들 수 있습니다.
MDN은 <textarea>를 여러 줄의 자유 텍스트를 입력받는 요소로 설명합니다. 그래서 긴 업무 요청을 붙여넣는 칸에는 한 줄 입력칸보다 textarea가 맞습니다.
첫 버전의 목표는 ‘모든 요청을 이해하는 AI’가 아니라, 약속한 표기를 안정적으로 나누는 화면입니다. 생활 비유로는 우편물에 담당 부서 스티커를 붙여 분류함에 넣는 일에 가깝습니다.
AI에게 복사해 넣을 첫 프롬프트
AI 코딩 도구를 열고 아래 전체를 한 번에 붙여넣습니다. 어떤 도구를 쓰든 결과 파일을 intake-board.html 하나로 달라고 명시하는 편이 수정 범위를 줄입니다.
비개발자가 브라우저에서 바로 열 수 있는 단일 HTML 파일 intake-board.html을 만들어줘.
목적: 여러 줄 업무 요청을 붙여넣으면 [담당: 이름] 표기를 읽어 담당자별 접수 카드로 보여주는 업무 보드다.
화면 구성:
- 상단에 제목 ‘업무 접수 보드’와 짧은 안내 문장
- 왼쪽에 여러 줄 요청을 붙여넣는 textarea와 ‘목록 만들기’ 버튼
- 오른쪽에 담당자별 열을 카드 형태로 표시
- [담당: 민지]처럼 표기된 줄은 해당 담당자 열로, 표기가 없으면 ‘미분류’ 열로 이동
- 각 카드에는 원문 한 줄과 마감 표기가 있으면 함께 보이게 함
- 담당자별 건수를 열 제목 옆에 표시
- 입력 예시와 ‘초기화’ 버튼 제공
기술 조건:
- HTML, CSS, JavaScript를 파일 하나에 모두 작성
- 외부 라이브러리와 서버 없이 동작
- 모바일에서 열이 세로로 자연스럽게 쌓이게 함
- 버튼은 실제로 동작해야 하며, 빈 입력이면 안내 문구를 표시
- localStorage 저장 기능은 넣지 말 것
- 코드 안에 한국어 주석을 최소한으로 넣고, 파일 맨 아래에 사용 방법 3줄을 HTML 주석으로 적어줘.
완성 뒤에는 파일 전체를 하나의 코드 블록으로만 보여줘.
여기서 [담당: 이름] 규칙을 빼면 결과가 흔들리기 쉽습니다. 자연어에서 사람 이름을 추측하는 기능은 별도 AI 연결, 개인정보 검토, 오류 처리까지 추가로 필요하기 때문입니다.
어디를 열고, 무엇이 보이면 성공일까요?
AI가 돌려준 코드 블록 전체를 복사합니다. 메모장 계열 편집기를 열어 붙여넣고 파일 이름을 intake-board.html로 저장한 뒤, 파일을 더블클릭해 브라우저로 엽니다.
화면에 큰 입력칸과 ‘목록 만들기’ 버튼이 보이면 첫 단계는 통과입니다. 위 예시 네 줄을 붙여넣고 버튼을 눌렀을 때 민지·도윤·미분류 카드가 따로 보이면, 입력→결과 흐름도 확인한 셈입니다.
완성 화면이 다르게 나와도 먼저 요구사항을 다시 길게 쓰지 않아도 됩니다. 화면에서 기대와 다른 한 장면을 짚고, 바꿀 규칙 하나만 말하는 편이 안전합니다.
지금 파일은 유지하고 아래만 수정해줘.
‘미분류’ 열은 항상 마지막에 보이게 해줘. 담당자 열에는 제목, 건수, 카드만 남기고 카드 사이 간격을 더 넓혀줘.
수정한 뒤 intake-board.html 전체 코드를 다시 보여줘.
수정 요청은 ‘무엇을 유지할지’와 ‘무엇 하나를 바꿀지’를 함께 쓰면 됩니다. 처음부터 새로 만들라고 하면 이미 맞았던 부분까지 바뀔 수 있습니다.
붙여넣었는데 목록이 안 나뉠 때
가장 흔한 원인은 요청 형식입니다. [담당:민지], [담당 - 민지]처럼 표기가 제각각이면 코드가 한 형식만 찾도록 작성됐을 때 미분류로 빠질 수 있습니다.
그럴 때는 데이터를 억지로 고치기보다, 허용할 표기를 정해 AI에 알려주세요. 예를 들어 공백 유무를 모두 받게 하려면 다음처럼 요청합니다.
담당자 분류 규칙만 보완해줘.
[담당: 민지]와 [담당:민지] 두 형식을 모두 인식하게 하고,
인식하지 못한 줄은 삭제하지 말고 ‘미분류’ 카드에 원문 그대로 남겨줘.
다른 화면 구성과 기능은 바꾸지 마.
버튼을 눌러도 아무 변화가 없다면 브라우저 개발자 도구보다 AI에게 먼저 오류 문구를 그대로 전달해도 됩니다. 오류 메시지는 실패 보고서가 아니라, 다음 수정 재료입니다. 단, 비밀번호·토큰·실제 고객 요청이 들어간 화면은 캡처나 복사 전에 가려야 합니다.
저장 기능은 나중에 붙이는 편이 안전합니다
접수 목록을 새로고침 뒤에도 남기고 싶어 localStorage를 떠올릴 수 있습니다. MDN에 따르면 localStorage 데이터는 브라우저 세션을 넘어 남을 수 있지만, 직접 연 file: URL에서의 동작은 브라우저마다 보장되지 않습니다.
따라서 이 글의 첫 MVP는 저장하지 않고 ‘붙여넣기 → 분류 → 확인’까지만 다룹니다. 저장이 꼭 필요해졌다면 먼저 조직의 보관 기준을 정하고, 파일을 직접 열기보다 승인된 웹 환경이나 서버 저장 방식으로 옮기는 편이 낫습니다.
실제 업무 데이터는 데모 문장으로 시작하고, 외부 AI에 입력할 정보는 최소화하세요. 이름·전화번호·계약 내용처럼 식별 가능한 정보는 가명이나 자리표시자로 바꾼 뒤 화면과 규칙을 검증합니다.
이 방식이 잘 맞는 경우와 아닌 경우
요청 형식이 비교적 단순하고, 팀이 같은 담당자 표기를 쓸 수 있다면 단일 HTML 보드는 좋은 출발점입니다. 개인 업무 정리, 소규모 운영팀의 접수 확인, 회의 뒤 할 일 분류처럼 ‘먼저 보이게 만들기’가 목표인 경우에 맞습니다.
반대로 여러 사람이 동시에 수정해야 하거나 권한·감사 기록·알림이 필요하다면 한 파일만으로는 부족합니다. 그때는 공유 가능한 업무 도구나 서버가 있는 앱을 검토해야 하며, 이 MVP는 필요한 화면과 규칙을 합의하는 시제품으로 남깁니다.
여러 사람이 같은 데이터를 수정해야 하는 순간에는 정적 HTML을 협업 시스템으로 착각하지 않는 것이 기준입니다.
다음에 해볼 일
첫 버전에서 담당자별 카드가 안정적으로 나뉘면, 마감일 순서 정렬이나 상태 선택처럼 한 가지 기능만 추가해 보세요. 한 번에 알림·로그인·공유까지 넣으면 어디서 문제가 생겼는지 초보자도 AI도 찾기 어려워집니다.
클립보드 복사 기능을 붙일 때도 브라우저 조건을 확인해야 합니다. MDN은 Clipboard API가 보안 컨텍스트와 사용자 동작 조건 아래에서 동작할 수 있다고 설명하므로, ‘복사 버튼은 어디서나 같다’고 가정하지 않는 편이 좋습니다.
작업 환경을 함께 정리한다면
AI 대화창과 HTML 미리보기를 나란히 놓고 수정하는 작업에 맞는 연결 장치 후보입니다. 실제 카드의 상품명·조건은 카드 표기만 따릅니다.
긴 요청문과 수정 프롬프트를 반복 입력하는 작업에 맞는 입력 장치 후보입니다. 실제 카드의 상품명·조건은 카드 표기만 따릅니다.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
출처
- MDN Web Docs,
<textarea>HTML textarea element — 여러 줄 일반 텍스트 입력 요소와value속성 설명. - MDN Web Docs, Window: localStorage property — 세션을 넘어 저장되는 특성과
file:URL 동작의 불확실성. - MDN Web Docs, Clipboard API — 보안 컨텍스트, 사용자 동작, 브라우저별 제약 설명.
핵심 정리: 다섯 가지 질문과 답
Q. 이 보드는 AI가 요청 의미를 자동으로 판단하나요?
아닙니다. 첫 버전은 [담당: 이름]처럼 약속한 표기를 기준으로 나눕니다.
Q. 코드를 몰라도 시작할 수 있나요?
네. 첫 프롬프트와 예시 요청을 복사하고, AI가 준 단일 HTML 파일을 저장해 브라우저에서 확인하는 흐름입니다.
Q. 성공 여부는 무엇으로 확인하나요?
예시 요청을 붙여넣은 뒤 담당자별 카드와 미분류 카드가 각각 보이는지 확인합니다.
Q. 저장 기능을 바로 넣어도 되나요?
가능하지만 첫 MVP에는 넣지 않는 편이 낫습니다. 특히 직접 연 파일에서 localStorage 동작은 브라우저별로 보장되지 않습니다.
Q. 실제 업무 내용을 그대로 AI에 넣어도 되나요?
아닙니다. 식별 가능한 정보와 민감한 계약·고객 내용은 지우거나 가명으로 바꾼 데모 데이터로 먼저 검증합니다.
'AI > AI 활용 기초' 카테고리의 다른 글
| 설문 CSV 요약 도구 만들기, 엑셀에서 세지 말고 파일 한 장으로 비율 보기 (0) | 2026.09.25 |
|---|---|
| 휴가 캘린더 만들기, 팀원 일정이 겹칠 때 먼저 보이게 하는 HTML (0) | 2026.09.22 |
| 명단 비교 HTML, 엑셀 눈대중 대조를 누락자 목록으로 바꾸기 (0) | 2026.09.20 |
| 메모만 붙여넣으면 업무보고 표 완성, 단일 HTML 도구 만들기 (0) | 2026.09.19 |
| 회의록 정리 웹앱, 붙여넣으면 핵심과 할 일이 나뉜다 (1) | 2026.09.15 |
댓글