할 일 체크리스트 만들기

지금까지 만든 페이지는 창을 닫으면 다 잊어버렸어요. 이번에는 닫았다 열어도 기억하는 페이지예요. 주인공은 "저장"이고, 저장에는 생각보다 규칙이 많아요.

1AI에게 세 줄로 요청하기

HTML 파일 하나로, 할 일 체크리스트 페이지를 만들어줘.
입력칸에 할 일을 쓰고 추가 버튼을 누르면 목록에 쌓이고, 체크하면 줄이 그어지게 해줘.
인터넷 연결이나 설치 없이 파일 하나로 동작하게 해줘.

저장·삭제·개수·Enter 키는 일부러 말하지 않았어요. 연습할 때도 진짜 개인 정보는 할 일에 적지 마세요. 코드에 https:// 주소가 보이면 무엇을 하는 주소인지 AI에게 물어보는 습관은 그대로예요.

2연습장에서 실행하기

연습장에도 가짜 서랍이 있어서, [▶ 실행]을 다시 누르는 게 새로고침과 같아요. 할 일을 몇 개 적고 체크한 다음 [▶ 실행]을 다시 눌러 보세요. 목록이 사라졌다면 정상이에요. 아직 저장을 시키지 않았으니까요. (AI에 따라 처음부터 저장해 주기도 해요.)

연습장의 서랍은 이 페이지 안에만 있어요. 진짜 저장은 파일로 저장해서 더블클릭으로 열어 확인하세요. AI 화면의 미리보기는 닫으면 화면째로 사라지는 경우가 많아요.

3미션: 닫았다 열어도 기억하는 페이지

1. 기본: 추가하고 체크하면 줄 긋기

   할 일 세 개를 적고 하나를 체크하면 그 줄에 줄이 그어져야 해요.

2. 새로고침해도 남게 ⭐

   요청은 이렇게 시작하면 돼요: "새로고침하거나 브라우저를 닫았다 열어도 할 일이 그대로 남게 해줘. 서버나 설치 없이 이 브라우저 안에서만 저장되게 해줘." 파일로 저장했다면 F5 → 탭 닫고 다시 열기 → 브라우저를 완전히 끄고 다시 열기, 세 단계로 확인하세요. 체크한 상태까지 남는지도 보세요.

3. 어디에 저장됐을까 ⭐

   AI에게 "이 페이지는 할 일을 어디에 저장하고 있어? 같은 파일을 다른 브라우저나 폰에서 열면 보일까? 코드 말고 말로 설명해줘."라고 물어보세요. 그리고 같은 파일을 다른 브라우저(엣지 등)로 열어 보세요. 비어 있다면 정상이에요. 자동 검사는 서랍에 무엇이 어떤 모양으로 들어갔는지, 밖으로 보내는 동작이 있는지 알려 줘요.

4. 입력한 글자가 그대로 보일까 (보안 시험)

   할 일 칸에 <b>굵게</b>라고 적어서 추가해 보세요. 글자 그대로 보이면 안전, "굵게"가 굵은 글씨로 바뀌면 입력을 코드로 읽고 있는 거예요. 힌트: "사용자가 입력한 글은 HTML로 해석하지 말고, 글자 그대로 화면에 보여줘."

5. 지우기와 개수

   항목마다 삭제 버튼, 맨 아래 "남은 할 일 N개 / 전체 N개", 완료한 것만 한 번에 지우는 버튼. 지우고 새로고침했을 때 지운 것이 다시 살아나지 않는지 꼭 확인하세요.

6. 자유

   Enter 키로 추가·빈칸은 막기, 전체/남은 것/완료한 것 보기, 기한이나 중요 표시, 눌러서 내용 고치기

안 될 때 확인할 것

알쓸신잡: 저장은 "내 브라우저 안의 서랍"

이 페이지의 "저장"은 파일을 만드는 게 아니라, 브라우저가 가진 작은 서랍(localStorage)에 글자를 넣어 두는 거예요. 서랍은 어느 브라우저에서, 어떤 주소로 열었나에 따라 따로 있어요. 블로그 원문에서 크롬으로 직접 확인한 결과예요.

크롬에서만 확인했어요. 엣지·파이어폭스·사파리·폰은 다를 수 있어요. 내 PC 파일끼리 서랍을 같이 쓴다면, 서로 다른 두 페이지가 같은 이름표(키)를 쓰면 목록이 섞일 수 있어요.

실험 ①: 서랍에는 "글자"만 들어가요

아래 버튼은 이 브라우저의 진짜 서랍에 시험용 값을 넣었다가 꺼내 보고, 바로 지워요.

목록 같은 복잡한 것은 글자 하나로 이어 붙여서(JSON) 넣고, 꺼낼 때 다시 풀어야 해요. 원문에서는 영문 기준 약 524만 자(5MB 안팎)에서 서랍이 꽉 찼어요(QuotaExceededError). 할 일 목록으로 넘기기는 어려워요.

실험 ②: 입력한 글이 "코드"로 읽히면

아래 칸의 글을 두 가지 방식으로 화면에 넣어 봐요. 숨은 코드(onerror)가 실행되면 알려 줘요. 실험은 격리된 작은 창 안에서만 일어나서 이 페이지에는 영향이 없어요.

내 페이지에 내가 적는 글이면 "나에게 장난치는" 정도예요. 하지만 남이 쓴 글(댓글, 붙여넣은 글, 받은 메일)을 이렇게 보여 주는 페이지는 위험해져요. 그래서 "입력은 글자로만 보여 준다"는 습관을 처음부터 들이는 거예요.

한 걸음 더: 폰에서도 보고 싶다면

목록이 이 브라우저 안에만 있으니, 폰에서도 보거나 엑셀로 내보내려면 목록을 파일이나 데이터베이스로 옮겨야 해요. 그건 파이썬 같은 언어가 잘하는 일이에요. 먼저 이렇게 물어보세요. "이 할 일 목록을 파이썬으로 내 PC의 파일에 저장하려면 어떤 방법들이 있어? 방법마다 장단점만 말로 비교해줘." 옮기는 순간 개인 정보가 파일로 남고 다른 기기와 주고받게 된다는 점도 기억하세요.

자주 묻는 질문