메모를 저장하는 웹 도구
조사한 내용과 참고한 주소를 적고, 문서로 내려받아요.
메모도 당시 도구에서 내보낸 원본이에요. 확인 표시는 직접 선택하며, AI가 사실 여부를 판정한 결과는 아니에요.
PC에서 시험 자료로 연습해요. 개인정보나 비공개 자료는 넣지 마세요. AI의 결제나 사용 한도 안내가 나오면 멈춰도 괜찮아요. 예제 입력은 이 브라우저에만 남으며 MOSTRIA 회원 계정에 저장되지 않아요.
01AI에게 도구를 부탁해요
긴 문장을 처음부터 준비할 필요는 없어요. 하고 싶은 일을 말하고, 답을 보고 필요한 조건을 덧붙이면 돼요.
내 메모를 적고 저장할 수 있는 작은 웹 도구 만들어 줘.
이름이나 주제를 내 것으로 바꿔도 좋아요. 짧은 요청의 결과는 수업 예시와 달라질 수 있어요.
답을 받고 더 바꾸고 싶다면
결과를 보고, 원하는 것 한 가지만 더 말해 보세요. 같은 대화에 이어 보내요.
메모를 파일로 내려받고 다시 열어 볼 수 있게 해 줘.
무엇을 해야 할지 모르겠다면 필요한 도움부터 물어보세요.
처음 해 보는 거야. 다음에 무엇을 하면 되는지 한 단계씩 쉽게 알려 줘.
수업 예시의 자세한 조건이 궁금하다면
아래는 예시의 조건을 자세히 적은 요청이에요. 처음부터 전부 입력할 필요는 없어요.
조사 메모를 적고 파일로 내려받는 웹 도구를 만들어 줘. 질문, 확인할 문장, 근거 주소, 메모를 입력하고 문장마다 확인 표시를 할 수 있게 해 줘. 입력은 이 브라우저에만 저장하고, 메모는 .md 파일로 내려받게 해 줘. 외부 연결 없이 index.html 파일 하나로 만들어 줘. 입력한 글은 코드로 실행하지 말고, 새 문장을 넣어도 기존 확인 표시가 옮겨 가지 않게 해 줘.
새 대화에 붙여 넣고 보내세요.
파일을 받으면 내려받아 브라우저로 여세요. 코드만 나왔다면 아래 저장 방법을 펼쳐 보세요.
결과 확인입력칸과 메모를 내려받는 버튼이 있나요?
코드만 나왔거나 입력할 곳을 못 찾겠다면
ChatGPT 입력칸에 요청을 붙여 넣고 전송하세요. 로그인 안내가 나오면 공식 사이트의 로그인 버튼을 사용해요. 비밀번호나 인증번호는 보내지 마세요.
코드 상자의 복사 버튼을 눌러 전체 코드를 메모장에 붙여 넣으세요. 직접 선택한다면 <!DOCTYPE html>부터 </html>까지 복사하고 앞뒤 설명은 빼요.
index.html
Windows 메모장의 ‘다른 이름으로 저장’에서 ‘모든 파일’과 ‘UTF-8’을 선택해요. 끝에 .txt가 붙지 않았는지 확인하고, 저장한 파일을 브라우저 창에 끌어다 놓으세요.
기능을 더 자세히 정하고 싶다면
아래는 네 가지 확인란을 요청하는 선택 문장이에요. 이번에 외부 AI에 보내 실행하지 않았어요. 위의 짧은 요청으로 만든 결과와는 다르며, 새 코드는 직접 시험해야 해요.
브라우저에서 사용할 수 있는 단일 index.html 파일을 만들어 줘. 목적: 조사한 글과 근거 주소를 적고 문서로 내려받는다. 화면: - 질문 입력칸 - 한 줄에 주장 하나를 입력하는 칸 - 근거 주소와 확인 메모를 추가하거나 지우는 행 - 문장마다 공식 근거, 날짜, 내용 일치, 반대 근거를 확인하는 네 가지 체크 - 네 가지를 모두 표시한 문장의 비율. 사실 여부를 판정하는 점수는 아니다. - 메모를 문서 파일(.md)로 내려받는 버튼 시험 자료: - 질문: 내가 적은 내용이 파일에 남을까? - 문장: 이 문장은 내보내기 시험용이다. - 근거 주소: https://www.mostria.com - 메모: 연습 기록 01 이 자료는 저장 시험용이며 실제 근거나 조사 결과가 아니다. 빈 입력칸에 위 자료를 넣어 시험할 수 있게 해 줘. 조건: - 입력 내용과 확인 표시는 이 브라우저에만 저장한다. 같은 파일을 같은 브라우저에서 다시 열어 남는지 시험한다. 파일로 직접 열 때 저장이 제한되면 실패를 알리고 내려받기는 계속 사용할 수 있게 한다. - 사용자의 문자열은 HTML로 실행하지 않고 글자로 표시한다. - 새 문장을 맨 위에 추가해도 기존 문장의 확인 표시는 그 문장에 남아야 한다. - 내려받은 UTF-8 .md 파일에 질문, 문장, 주소, 메모와 확인 표시가 빠짐없이 남아야 한다. 한글과 특수문자도 시험한다. - 390px와 1440px 화면에서 주요 기능을 사용할 수 있어야 한다. - 서버, 회원가입, 자동 검색, 외부 AI API, 분석 도구, 외부 통신과 설치는 제외한다. 근거 주소는 기록만 하고 자동으로 열지 않는다. 파일 전체와 실행 방법을 제시해 줘. 직접 실행할 수 없다면 실행하지 않았다고 명시해 줘.
02써 보고 파일로 저장해요
방금 만든 도구에 메모를 적고 저장해 보세요. 아래 네 가지 시험 자료는 예시 도구 기준이에요. 내 도구의 입력칸에 맞는 자료만 사용해요. ChatGPT에 다시 보내는 문장이 아니에요.
내가 적은 내용이 파일에 남을까?
이 문장은 내보내기 시험용이다.
https://www.mostria.com
연습 기록 01
‘문장 추가’ 버튼이 있다면 눌러서 목록에 문장이 나타나는지 확인하세요. 입력만 하고 내려받으면 문장이 빠질 수 있어요.
주소와 문장은 저장 시험용이에요. 실제 근거나 조사 결과가 아니에요.
문장의 확인란에 표시한 뒤 ‘내보내기’나 ‘.md 파일로 내려받기’를 누르세요. 받은 .md 파일을 메모장에서 열어요.
결과 확인질문, 문장, 주소, 메모와 확인 표시가 모두 남았나요? .html은 만든 도구이고, .md는 저장한 메모예요.
먼저 메모를 내려받아 보관한 뒤, 도구 탭을 닫고 같은 .html 파일을 같은 브라우저로 다시 여세요. 입력과 확인 표시가 남았는지 확인해요.
파일을 열거나 저장하는 데 문제가 있다면
브라우저의 다운로드 목록에서 .md 파일을 찾아 메모장이나 텍스트 편집기로 여세요. #이나 - 같은 기호가 보여도 정상이에요.
브라우저 저장(localStorage)은 현재 브라우저에 입력을 남기는 방식이에요. 회원 계정이나 IP 주소를 기준으로 저장하지 않고, 다른 기기에 자동으로 옮겨지지도 않아요.
브라우저 데이터를 지우면 기록이 사라질 수 있어요. 자동 저장은 백업이 아니에요. 파일로 직접 열 때 저장이 제한되거나, 파일을 옮기면 내용이 안 보일 수 있으니 중요한 메모는 따로 내려받으세요.
완성 예제에서 ‘저장되지 않았어요’ 안내가 나오면 화면에서는 계속 쓸 수 있어요. 탭을 닫기 전에 .md 파일로 내려받아 보관하세요. ‘전체 삭제’도 브라우저 저장에 실패하면 이전 기록은 남을 수 있어요.
내려받은 .md는 기록을 읽는 파일이에요. 이 예제에는 메모를 다시 불러오는 기능이 없어요. 저장이 안 되면 코드를 만들던 대화에 브라우저 이름과 누른 버튼, 실제 증상을 알려 주세요. 수정한 파일도 다시 시험해요.
새 문장에도 확인 표시가 맞는지 살펴보기
기존 문장에 표시한 뒤 아래 문장을 도구에 추가해요. 새 문장은 미확인, 원래 문장은 확인 상태로 남아야 해요.
이것은 아직 확인하지 않은 새 문장이다.
표시가 다른 문장으로 옮겨 갔을 때만 코드를 만들던 같은 대화에 아래 요청을 보내세요. 처음부터 정상이면 고칠 필요가 없어요.
주장 위에 새 문장을 넣었더니 기존 체크가 새 문장으로 옮겨 붙었다. 줄 번호에 연결된 상태인지 확인해 줘. 같은 문장은 순서가 바뀌어도 체크를 유지하게 고치고, 새 문장은 미확인 상태로 시작하는지 다시 시험해 줘. 수정한 파일 전체를 줘. 실행하지 못한 시험은 구분해서 알려 줘.
수정본에서도 같은 순서로 시험하세요. 다른 대화라면 개인정보 없는 HTML 파일을 먼저 첨부해요.
글자 크기나 색을 바꾸고 싶다면
코드를 만들던 같은 대화에 원하는 요청 하나를 보내세요. 이번에 외부 AI로 실행한 요청은 아니에요. 원본은 따로 보관하고 수정본에서도 저장과 내려받기를 시험해요.
방금 만든 조사 메모 도구의 입력 글자와 버튼 글자를 20px 이상으로 키워 줘. 입력칸과 버튼도 글자가 잘리지 않게 넓혀 줘. 입력 내용과 확인 표시를 저장하는 방식, 파일 내려받기 기능은 바꾸지 마. 외부 연결이나 설치 없이 수정한 HTML 파일 전체를 줘.
방금 만든 조사 메모 도구의 바탕과 입력칸을 어두운 회색, 글자를 밝은 색으로 바꿔 줘. 버튼과 확인 표시는 배경에서 잘 보이게 해 줘. 글자 크기와 배치, 입력 내용과 확인 표시를 저장하는 방식, 파일 내려받기 기능은 바꾸지 마. 외부 연결이나 설치 없이 수정한 HTML 파일 전체를 줘.
확인 항목을 더 붙인 이전 예제
2026년 9월 9일의 별도 예제예요. 공식 근거, 날짜, 내용 일치, 반대 근거를 따로 표시해요. 위의 짧은 요청으로 만든 결과가 아니에요.
예시의 출처와 확인 범위
기본 화면과 내려받는 메모는 2026년 9월 20일 ChatGPT에 짧은 요청을 한 번 보내 만든 도구의 자료예요. 당시에는 받은 코드를 고치지 않고 저장해 실행했고, 입력 저장과 내려받기, 문장 추가 후 확인 표시를 시험했어요.
지금 여는 예제에는 이후 저장 실패 처리를 보강했어요. 저장이 거부되거나 공간이 부족해도 화면과 내보내기는 계속 작동하고, 읽기나 저장에 실패하면 안내해요. 이미지는 당시 정상 사용 화면이며 보강 후 다시 촬영한 화면은 아니에요.
이번에는 수업 문구와 배치를 직접 다듬었으며 외부 AI를 새로 호출하지 않았어요. 자세한 제작 요청과 수정 요청은 선택 문장이지 새로 생성한 결과의 증거가 아니에요. 이 수업도 AI를 자동 호출하거나 도구를 배포하지 않아요.
받은 코드가 입력한 글을 HTML 코드로 실행하지 않고 글자로 표시하는지, 외부로 전송하지 않는지 확인하세요. 개인정보를 넣거나 공개하기 전에는 기능과 안전성을 따로 점검해야 해요.
당시 회원가입이나 결제 없이 한 번 실행했지만, 현재도 무료이거나 같은 결과가 나온다는 보장은 아니에요. AI의 요금과 한도는 사용하는 서비스에서 확인하세요. 모든 기능과 보안 문제, 실제 초보자의 이해를 확인한 것은 아니에요.