← 실습으로 돌아가기

첫 체크리스트 앱, 만들기부터 고치고 공유하기까지

버전 1.0.0 · 2026-09-07 · 서인(seoin.dev)

추가·완료·삭제가 되는 체크리스트에 오류를 넣고, 고친 뒤 저장을 붙이는 실습입니다. 기존에 공개한 체크리스트 앱을 바탕으로 학습 단계를 다시 구성했습니다. 아래 요청문은 이번 실습을 위해 작성한 예시이며, 과거 AI 대화의 원문이나 모든 도구가 같은 코드를 만드는 보장은 아닙니다.

먼저 실행해 보기

ZIP을 풀고 index.html을 브라우저로 엽니다. 각 단계의 버튼으로 파일을 열 수 있습니다. 파일을 직접 열 때 저장 동작은 브라우저에 따라 다를 수 있으므로, 최종 저장 검사는 아래 로컬 웹서버 또는 공개 주소에서 합니다.

1. 만들 범위를 먼저 적기

요구사항은 작게 고정합니다. 할 일과 중요도를 입력해 목록에 추가하고, 완료 체크를 하면 완료 목록으로 이동하며, 삭제하면 해당 항목만 사라집니다. 예시 항목을 넣어도 기존 항목은 남아야 합니다. 처음에는 로그인·서버 저장 없이 실행합니다.

AI에게 요청할 때는 빈 연습 폴더에서 다음처럼 설명할 수 있습니다.

브라우저에서 열 수 있는 체크리스트를 HTML 파일 하나로 만들어줘.
할 일과 중요도를 입력하고 추가·완료·삭제할 수 있어야 해.
예시 넣기는 기존 항목을 지우지 않고 예시 3개를 더해야 해.
빈 입력은 추가하지 말아줘. 외부 라이브러리와 서버는 쓰지 말아줘.
이번 단계에서는 저장 기능을 넣지 말고,
파일을 열어 직접 확인할 동작을 알려줘.

이 자료의 01-start.html은 비교할 수 있도록 고정한 기준 파일입니다. 직접 생성한 결과는 화면이나 코드가 다를 수 있습니다. 결과가 다르면 요구한 동작을 기준으로 검사합니다.

2. 같은 증상을 다시 만들기

02-broken.html을 열면 실제 자바스크립트 오류가 화면 위에 나타납니다. 개발자 도구의 콘솔에서도 확인할 수 있습니다. 문구는 브라우저에 따라 조금 다릅니다.

HTML의 폼 이름은 taskForm인데 연결 코드가 #taskFrom을 찾습니다. 없는 요소를 찾은 결과는 null이고, 여기에 addEventListener를 연결하려다 실패합니다. 학습을 위해 넣은 오타이며 과거 사용자 사고를 그대로 복사한 것은 아닙니다.

기대한 결과: 할 일을 입력하고 추가하면 목록에 나타나야 해.
실제 결과: 화면은 열리지만 추가가 안 되고 TypeError가 나와.
재현: 02-broken.html을 열고 물 마시기를 입력한 뒤 추가를 눌렀어.
오류 문구: 화면 위의 실제 오류에서 필요한 한 줄을 붙일게.
원인 후보를 먼저 확인하고, 연결 이름처럼 작은 변경으로 고쳐줘.
고친 뒤 추가·완료·삭제·예시 넣기를 다시 검사해줘.

개인 프로젝트의 오류를 AI에 전달할 때는 관련 문구만 골라 비밀키와 개인정보를 가립니다. 이 연습 파일에는 실제 계정이나 키가 없습니다.

3. 바뀐 한 줄과 기존 기능 확인하기

03-fixed.html은 #taskFrom을 #taskForm으로 고친 버전입니다. 실제 변경은 fix.diff에서 볼 수 있습니다. 폼 ID와 찾는 이름이 맞아야 연결됩니다.

1. 빈 입력으로 추가를 눌러 항목이 생기지 않는지 봅니다.
2. ‘물 마시기’를 추가하고 완료 표시를 합니다.
3. ‘창문 열기’를 추가해 기존 완료 항목이 남는지 봅니다.
4. 창문 열기만 삭제해 물 마시기가 남는지 봅니다.
5. 예시 넣기를 눌러 기존 항목이 남고 3개가 추가되는지 봅니다.
6. <b>물 마시기</b>를 넣었을 때 태그가 글자 그대로 보이는지 봅니다.

여기까지 정상이어도 저장 기능이 생긴 것은 아닙니다. 새로고침하면 초기 목록으로 돌아갑니다.

4. 저장을 붙이고 다시 확인하기

04-saved.html은 같은 앱에 브라우저 저장을 붙인 버전입니다. storage.diff는 저장 전후의 코드 차이를 보여줍니다. 이 실습 전용 저장 이름을 사용하므로 기존 seoin 체크리스트와 목록을 섞지 않습니다.

추가·완료·삭제·예시 넣기 동작을 유지해줘.
같은 브라우저의 같은 사이트에서 새로고침해도 목록이 남게 해줘.
저장된 데이터가 깨졌거나 저장이 막혔을 때도 화면이 열려야 해.
저장할 수 없으면 사용자에게 알려줘.
로그인이나 다른 기기 동기화는 이번 범위에 넣지 말아줘.

브라우저 저장은 서버 데이터베이스가 아닙니다. 다른 기기·다른 브라우저·다른 사이트 주소에는 같은 목록이 보이지 않습니다. 브라우저 데이터를 지우면 목록도 사라집니다. 민감하거나 중요한 기록은 입력하지 마세요.

내 컴퓨터에서 웹 주소로 열기

파일을 더블클릭한 file: 주소와 웹서버의 http: 주소는 조건이 다릅니다. Python 3이 이미 설치돼 있다면 압축을 푼 폴더에서 다음을 실행합니다. 다른 개인 폴더를 서버의 기준 폴더로 잡지 않도록 터미널의 현재 위치를 확인하세요.

python3 -m http.server 8000 --bind 127.0.0.1

Windows에서 명령이 없으면 설치된 Python 런처에 따라 py -m http.server 8000 --bind 127.0.0.1을 사용할 수 있습니다. 이 배포에서는 Windows 실기기 검증을 하지 않았습니다. 브라우저에서 http://127.0.0.1:8000/을 열고4단계로 이동합니다. 물 마시기를 추가한 뒤 새로고침해 남는지 확인합니다. 종료는 터미널에서 Ctrl+C입니다. 127.0.0.1은 내 컴퓨터에서만 열리는 주소입니다.

공개 링크로 공유하기

가장 작은 배포 파일은 steps/04-saved.html 하나입니다. 그 파일을 별도의 빈 폴더에 복사해 index.html로 이름을 바꾸면 정적 웹 호스팅에 올릴 수 있습니다. 페이지 위의 학습용 돌아가기·ZIP 링크는 원래 실습 폴더를 기준으로 하므로, 단일 파일로 배포할 때는 이 자료에 함께 넣은 deploy/index.html을 사용하세요. 이 파일은 같은 최종 앱에서 학습 안내 링크만 공개 실습 주소로 바꾼 버전입니다.

Vercel 등 다른 호스팅을 사용하려면 배포 가이드와 Vercel 공식 배포 문서를 확인합니다. 계정·프로젝트·요금 조건은 플랫폼마다 다릅니다. 이 자료는 seoin.dev의 기존 웹서버에 정적 파일로 공개해 확인했으며, Vercel에 새 프로젝트를 만들어 검증한 결과는 아닙니다.

공개 후에는 다른 브라우저에서 URL을 열고 추가·완료·삭제를 다시 확인합니다. 첫 브라우저에 넣은 목록이 다른 브라우저에 없는 것은 이 앱의 정상 동작입니다. 공유되는 것은 앱 파일이며 목록 데이터가 아닙니다.

내가 완료했는지 적어보기

practice-record.md에 실행 주소, 오류 문구, 수정한 부분, 추가·완료·삭제·저장 검사 결과를 남길 수 있습니다. 해결하지 못한 단계는 실패한 조건을 그대로 적습니다. 예제 파일이 동작한다는 사실과 실제 초보자가 끝까지 해냈다는 결과는 구분합니다.

출처·검증·라이선스

첫 앱 글 · 오류를 질문하는 순서 · MDN localStorage · Python http.server.

실제 확인 환경과 결과는 verification.json, 파일 해시는 SHA256SUMS.txt에 있습니다. 이 묶음은 소스·요청문·수정 차이·실행 방법을 공개합니다. AI 자동 생성 결과의 재현성이나 독자 성공률을 측정한 자료는 아닙니다.

새 실습 파일의 코드는 LICENSE.txt의 MIT 라이선스로 사용할 수 있습니다. seoin.dev 글·이미지는 이 라이선스에 포함되지 않습니다.