직장의 의존 체질 탈피! AI로 코드를 생성하여 간이 데이터베이스를 시작해 보았다

※지난 기사는 이쪽에서

소매업에 종사한 지 몇 년 된 아자라시.

신입사원이라고 불리지는 않게 되었고, 파트타임 직원 외에 직속 부하도 두 명 생겨서, 업무에 대해 묻는 것보다 질문을 받는 일이 더 늘었다.

그중 가장 많은 것이, "이거 어떻게 하면 돼?" 와 "그거 어떻게 됐어?" 이다.

질문을 받고 바로 모른다면, 조금 멀리 있는 PC룸으로 돌아가서 메일과 파일을 뒤져가며 원하는 데이터를 찾고...

이런 일에 시간을 쓰고 있으면 내 업무를 할 수 없다!

솔직히, 직접 좀 찾아보라고 말하고 싶다.

상사에게도 상담해 보니, "이것은 영원한 과제입니다" 라며 먼 눈을 한다.

*――말하기를, "부서에 정보를 전달하려고 할 때, 종이로만 하면 3할의 사람에게 전달되고, MT(Meeting)를 하면 6할, MT를 반복하면 8할, 그래도 2할에게는 전달되지 않는다."

곤란할 때, 스스로 찾아볼 수 있는 무언가를 만들자!

정보 공유는 직원의 업무이지만, 하루 종일 끊임없이 직원의 전화가 울리는 것과 같은 의존 상태는 좋지 않다.

그래서.

이번에는 웹상에서 사용할 수 있는 간이적인 데이터베이스를 시작해 보았다.

정보를 입력하고, 검색창에 입력한 어구로 필터링할 수 있는 구조이다.

• Copilot

• CodePen (동작 확인용)

목적: 직장의 "무엇이든 물어보는" 문제를 줄이기 위해, 정보 입력·목록화·검색이 가능한 Web App을 작성
구성: 제목·일시·담당자·내용을 입력하여 추가
검색 기능: 검색창에 입력한 어구를 포함하는 데이터만 실시간으로 필터링. (공란인 경우 전체 표시)
데이터 저장: 현 단계에서는 브라우저 내 메모리만 (페이지 새로고침 시 사라지므로, 향후 어떠한 스토리지에 저장하는 개량이 필요)

HTML

<div class="container">
<h2>정보 공유 데이터베이스</h2>
<input id="search" type="text" placeholder="검색 키워드를 입력">
...

CSS

body { font-family: sans-serif; padding: 20px; }
.container { max-width: 900px; margin: auto; }
input, textarea { width: 100%; margin: 5px 0; padding: 8px; }
...

JavaScript

window.onload = () => {
const data = [];
const list = document.getElementById("list");
...

직장의 정보 공유를 편하게 하고 싶다

→ 무엇이든 질문받는 상황을 개선하고 싶다

• Web App 형태로 만들고 싶다

→ QR 코드로 누구나 사용할 수 있게 하고 싶다

→ CodePen에서 동작 확인을 하고 싶다

입력 항목을 지정하고 싶다

→ "제목", "일시", "담당자", "내용"

검색 기능을 넣고 싶다

→ 입력한 어구를 포함하는 데이터만 필터링하고 싶다

추가 버튼을 눌러도 작동하지 않는 문제의 수정 의뢰

→ CodePen에서 확실히 작동하도록 개선해 주길 바람

• 내용을 기사로 쓰고 싶으므로, 사용 도구·전체상·코드를 정리해 주길 바람

검색은, 칸에 입력한 단어로 필터링하는 구조.

매일 아침 루틴으로서, 자신에게 온 연락을 검색하는 데도 편리할 것 같다.

어제 상담했던 것, 어떻게 됐더라? 싶을 때 편리할 것 같다.

"〇일 문의에 대하여: 답변" 같은 식으로.

상대가 AI인 만큼, 프롬프트 (Prompt)는 매우 중요하다. 하지만 생각보다 어려웠다.

좋든 싫든 이쪽이 지시한 것에 충실하기 때문에, "초보자니까 코드 해설도 해줘!"라거나 "처음부터 친절하게 설명해 줘!"라고 말하지 않으면, 점점 다음 단계의 절차를 나열해 버린다.

또한, 무심코 이것저것 욕심을 내다 보면, 생각보다 복잡해지기도 한다.

그럴 때는 스몰 스텝 (Small Step)으로 "우선 여기까지의 코드를 내줘" → "다음은 이 기능을 추가해 줘"라고 지시하면, 좀 더 나았던 것으로 보인다.

우선, 동작하는 코드를 생성하는 단계까지는 성공했다.

향후에는 입력한 내용을 오프라인으로 저장하는 구조의 추가나, 다른 접근 방식으로 동일한 구조를 작성하는 방법에 대해 검토해 나가고 싶다.

(note에서도 업무 관련 내용을 발신하고 있으니, 관심이 있다면 꼭 확인해 주세요. 이번 시작에 이르게 된 경위의 기사도 있습니다)