인수인계서 HTML 만들기, 메모가 섞여도 다음 담당자 할 일이 보이게

인수인계서 HTML 만들기, 메모가 섞여도 다음 담당자 할 일이 보이게

퇴근 직전, 메신저와 문서와 메모에 흩어진 인수인계 내용을 한데 모았는데 새 담당자가 무엇부터 열어야 할지 막막한 장면이 생깁니다. 메모를 담당 업무·접근 정보·다음 행동으로 나눈 단일 HTML 화면을 만들면, 원문을 다시 훑기 전에 해야 할 일을 한 화면에서 검토할 수 있습니다. 서버나 설치 없이 시작할 수 있지만, 비밀번호·토큰·복구코드는 메모와 결과물에서 빼는 선이 먼저입니다.

이 글의 목차

30초 요약이걸 만들면 무엇이 달라질까요?왜 단일 HTML부터 시작할까요?AI에 처음 붙여넣을 프롬프트붙여넣은 메모는 이렇게 보입니다결과가 어색할 때는 수정 요청 한 번만 더완성 화면에서 확인할 네 가지단일 HTML의 한계와 다음 행동작업 환경을 함께 정리한다면출처핵심 정리: 다섯 가지 질문과 답

30초 요약

• AI에 “한 파일짜리 HTML”과 세 가지 분류 기준을 함께 요청합니다.
• 첫 결과는 정답이 아니라 검토용 초안입니다. 업무명·담당자·마감일을 원문과 대조합니다.
• 접근 정보에는 서비스명·권한 요청 경로만 남기고, 비밀값은 별도 승인된 보관함으로 분리합니다.
• 완성 파일은 브라우저에서 열어 보며, 가상 메모로 입력→분류→누락 여부를 확인합니다.

이걸 만들면 무엇이 달라질까요?

메모가 길어도 읽는 순서는 세 갈래로 단순해집니다. 지금 맡은 일, 어디에 접근을 요청해야 하는지, 오늘·이번 주에 할 다음 행동을 한 화면에서 훑고 원문으로 돌아가 확인하는 방식입니다.

아래는 실행 앱이 아니라 결과 모양을 설명하는 예시 데이터입니다. 버튼이나 업로드 기능처럼 보이는 요소는 넣지 않았고, 실제 파일에서 어떤 카드가 보여야 하는지만 정적으로 표현했습니다.

인수인계 한눈에 보기 예시 화면

담당 업무

월간 정산 초안
문의 응대 기준

접근 정보

정산 대시보드
권한 요청: 운영팀

다음 행동

화요일 원본 대조
담당자에게 권한 요청

예시 데이터이며, 실제 계정·비밀번호·토큰은 표시하지 않습니다.

업무 문서를 서랍 세 칸으로 나누는 것과 비슷합니다. 모든 내용을 완벽히 자동 분류하려 하기보다, 새 담당자가 ‘지금 열어 볼 칸’을 먼저 고르게 만드는 것이 이 MVP(가장 작은 실행 가능한 결과물)의 역할입니다.

왜 단일 HTML부터 시작할까요?

단일 HTML은 HTML·CSS·JavaScript를 한 파일에 넣어 브라우저에서 여는 작은 웹페이지입니다. 이 글의 첫 버전은 외부 서버·회원가입·데이터베이스 없이, 메모를 붙여넣고 결과를 카드로 보는 데만 집중합니다.

사용자가 직접 선택한 파일만 읽는 구조로 만들 수 있다는 점도 출발점으로 좋습니다. MDN 문서에 따르면 FileReader는 사용자가 고른 File 또는 Blob을 읽는 API이고, 파일 경로만으로 컴퓨터 안의 임의 파일을 읽을 수는 없습니다.

다만 “내 컴퓨터에서만 열었으니 비밀도 넣어도 된다”는 뜻은 아닙니다. 비밀번호·API 키·세션 토큰·복구코드는 HTML에도 브라우저 저장소에도 넣지 않습니다. 접근 정보에는 ‘어느 서비스의 어떤 권한이 필요한지’와 ‘요청할 담당자’만 적습니다.

AI에 처음 붙여넣을 프롬프트

먼저 PC에서 메모장(Windows) 또는 텍스트 편집기(macOS)를 열고, 새 파일 이름을 handover.html로 저장합니다. AI 채팅 도구에 아래 내용을 통째로 복사해 붙여넣고, 받은 코드는 <!doctype html>부터 마지막 </html>까지 파일에 덮어씁니다.

코딩을 처음 하는 운영 담당자가 사용할 단일 HTML 파일을 만들어줘.
목표는 인수인계 메모를 붙여넣으면 ‘담당 업무’, ‘접근 정보’, ‘다음 행동’ 세 섹션으로 나눠 검토하는 것이다.
- 외부 라이브러리·서버·로그인·API 호출 없이 HTML, CSS, JavaScript 한 파일로 완성한다.
- 상단에 큰 텍스트 입력 영역과 ‘정리하기’ 버튼을 둔다.
- 결과는 세 개의 카드로 표시하고, 각 항목에 원문 근거 문장을 짧게 붙인다.
- 애매한 문장은 ‘확인 필요’ 목록에 원문 그대로 둔다.
- 입력값은 innerHTML 대신 textContent로 표시한다.
- 접근 정보는 서비스명·권한 종류·요청 담당자만 표시하고, 비밀번호·API 키·토큰·복구코드는 입력하지 말라는 경고를 항상 표시한다.
- 모바일에서 카드는 한 줄씩 보이게 CSS를 작성한다.
- 예시 메모와 예상 결과에는 ‘예시 데이터’라고 표시한다.
- 전체 HTML과 함수별 짧은 한국어 주석을 한 번에 출력한다.

여기서 AI는 문장을 읽고 키워드 기준으로 카드에 배치하는 초안을 만들게 됩니다. 업무 이름이 문장마다 다르므로 분류 결과를 사람의 최종 판단으로 취급하면 안 됩니다.

붙여넣은 메모는 이렇게 보입니다

예시 메모는 실제 업무 기록이 아닙니다. ‘무엇을 한다’, ‘어디에 접근한다’, ‘언제 누구에게 요청한다’가 함께 섞였을 때 결과 화면이 어느 칸으로 보내는지 봅니다.

[예시 데이터]
- 매주 월요일 오전에 주문 취소 사유를 정리해 운영 채널에 공유한다.
- 정산 대시보드는 운영팀에게 읽기 권한을 요청한다. 비밀번호는 이 메모에 쓰지 않는다.
- 화요일까지 지난달 환불 원본을 대조하고, 차이가 있으면 재무 담당자에게 확인한다.
- 고객 문의 답변 템플릿은 고객지원 문서의 최신 버전을 사용한다.

예상 화면에서는 첫째와 넷째 문장이 ‘담당 업무’로, 정산 대시보드의 서비스명·권한 요청 경로가 ‘접근 정보’로, 화요일 대조와 재무 담당자 확인이 ‘다음 행동’으로 나뉘면 됩니다. 한 문장이 둘 이상의 카드에 걸친다면, 원문 근거를 함께 보여 주거나 ‘확인 필요’에 두는 편이 낫습니다.

결과가 어색할 때는 수정 요청 한 번만 더

완성 파일을 저장한 뒤 더블 클릭해 브라우저에서 엽니다. 예시 메모를 붙이고 ‘정리하기’를 눌러 카드가 보이면 첫 단계는 성공입니다. 화면이 비어 있으면 새로고침하고 코드 전체가 저장됐는지 확인합니다.

분류가 어색하면 실제 비밀값을 [비밀값 제거]으로 바꾼 뒤 다음 조건으로 전체 HTML을 다시 요청합니다: ‘다음 행동에는 날짜·마감·요청·확인·공유가 있는 문장을 우선 넣고, 접근 정보에는 서비스명·권한·담당자만 남긴다. 확신할 수 없는 문장은 확인 필요 카드에 원문 그대로 표시하며, 단일 파일·외부 통신 없음·textContent 조건을 유지한다.’

애매한 문장을 숨기지 않고 ‘확인 필요’로 남기는 것이 인수인계 도구의 안전장치입니다. 보기 좋게 세 칸이 꽉 차는 것보다, 새 담당자가 다시 물어봐야 할 지점을 드러내는 편이 낫습니다.

완성 화면에서 확인할 네 가지

1. 원문 대조가 되는가: 카드마다 어떤 문장에서 왔는지 짧은 근거가 보이는지 확인합니다.
2. 접근 정보가 과하지 않은가: 서비스명, 역할, 요청 경로까지만 남기고 비밀 문자열이 없는지 찾습니다.
3. 다음 행동에 주체와 시점이 있는가: 누가 무엇을 언제 할지 드러나야 합니다.
4. 모바일에서도 읽히는가: 창 너비를 줄였을 때 카드가 세로로 쌓이고 문장이 잘리지 않는지 봅니다.

OWASP는 민감 정보와 세션 식별자를 localStorage에 두지 말고, 화면에 데이터를 넣을 때 innerHTML보다 textContent를 쓰도록 권고합니다. 또 file: URL로 직접 연 HTML에서 localStorage 동작은 브라우저마다 보장되지 않으므로, 이 첫 버전은 저장 기능 없이 입력→검토 흐름을 확인하는 편이 예측 가능합니다.

단일 HTML의 한계와 다음 행동

이 도구는 긴 메모를 검토하기 쉽게 나누는 보조 도구이지, 권한 관리 시스템이나 비밀 관리 도구가 아닙니다. 여러 사람이 같은 파일을 수정하거나 승인 이력을 남겨야 한다면, 조직에서 승인한 문서 도구·권한 관리 체계로 옮겨야 합니다.

외부 AI에 실제 인수인계 메모를 넣기 전에는 회사의 반입 정책과 사용 중인 AI 서비스의 데이터 처리 조건을 확인하세요. 정책 확인이 어렵다면 가상 메모로 화면과 분류 규칙만 먼저 만들고, 실제 업무명과 접근 경로는 승인된 환경에서 채우는 순서가 안전합니다.

작업 환경을 함께 정리한다면

본문 기반 추천 상품Blackview 14인치 노트북 듀얼모니터 휴대용 확장 스크…검색 상위 노출과 본문 관련성 기준쿠팡에서 상품 보기 →

원문 메모와 분류 결과를 나란히 대조해야 하는 작업이라면, 보조 화면을 추가하는 장비가 직접적인 검토 환경이 될 수 있습니다. 모델·호환 규격·가격은 카드에서 직접 확인하고, 현재 노트북의 포트와 전원 조건을 먼저 맞춰 보세요.

본문 기반 추천 상품다이얼잠금 소품보관함 셀프 설치 타공형 소형 금고, 블랙,…검색 상위 노출과 본문 관련성 기준쿠팡에서 상품 보기 →

비밀값을 HTML에 넣지 않는 원칙은 종이에 적힌 복구 정보나 장비 동봉 문서를 따로 관리하는 행동과도 이어집니다. 잠금 보관 제품은 보관 목적에만 쓰고, 조직의 문서 보관·폐기 기준을 대신하지는 않습니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

출처

• MDN Web Docs, FileReader — 사용자가 선택한 파일을 읽는 범위 확인
• MDN Web Docs, Window.localStorage — 세션 간 저장과 file: URL 동작 경계 확인
• OWASP Cheat Sheet Series, HTML5 Security Cheat Sheet — 민감 정보 저장과 안전한 DOM 출력 권고

핵심 정리: 다섯 가지 질문과 답

Q. 인수인계 메모를 왜 세 칸으로 나누나요?

새 담당자가 업무, 접근 요청, 바로 할 행동을 각각 먼저 확인할 수 있게 하기 위해서입니다.

Q. 코딩을 몰라도 시작할 수 있나요?

AI에 단일 HTML 완성본을 요청하고 파일로 저장해 브라우저에서 여는 흐름부터 시작할 수 있습니다.

Q. 접근 정보에는 무엇을 적나요?

서비스명, 필요한 권한, 요청할 팀·담당자까지만 적고 비밀값은 제외합니다.

Q. AI가 잘못 나눈 문장은 어떻게 하나요?

억지로 카드에 넣지 말고 원문과 함께 ‘확인 필요’로 남긴 뒤 담당자에게 확인합니다.

Q. 완성 뒤 가장 먼저 볼 것은 무엇인가요?

가상 메모를 붙여넣어 원문 근거, 비밀값 제외, 다음 행동의 주체·시점, 모바일 표시를 차례로 확인합니다.

NEXT READ

이어서 보면 더 좋은 글

지금 읽은 내용과 연결되는 글만 골랐어요.

• AI 활용 기초휴가 캘린더 만들기, 팀원 일정이 겹칠 때 먼저 보이게 하는 HTML내용 이어보기 →
• AI 활용 기초바이브코딩 업무 보드, 요청 붙여넣자 담당자별 접수 목록이 보이게 만들기내용 이어보기 →
• AI 활용 기초메모만 붙여넣으면 업무보고 표 완성, 단일 HTML 도구 만들기내용 이어보기 →

글을 읽어 주셔서 감사합니다.

이 글이 도움이 되었고 새로운 정보를 계속 받아보고 싶으시다면 구독해 주세요.