비개발자의 AI 개발 도전기 2: 새로고침해도 남는 할 일 앱 만들기

AI로 첫 앱 만들기 · 2화

할 일을 입력하고 완료 버튼까지 눌렀는데, 새로고침하니 목록이 사라졌다면? 1편에서 만든 앱에서는 의도한 동작입니다. 그때는 화면이 열려 있는 동안만 목록을 기억하도록 요청했습니다. 이번에는 같은 환경에서 다시 열어도 목록과 완료 상태가 남도록 한 단계 바꿔 보겠습니다.

코딩히어로의 이 연재는 개발 경험이 없는 독자가 작은 기능을 요청하고 직접 확인하는 순서로 진행합니다. 오늘도 코드를 외우기보다 ‘어떤 정보가 언제 저장돼야 할까?’를 먼저 정합니다. 실제로 테스트하지 않은 AI 답변을 완성품으로 가정하지 않고, 아래 확인표를 통과하는 것을 목표로 삼습니다.

오늘의 도전
추가·완료·삭제할 때 목록 저장 → 같은 파일 다시 열기 → 마지막 상태 확인
준비물: 1편의 index.html, 그 코드를 만든 AI 대화, 같은 브라우저의 일반 창
범위: 브라우저 저장 기능을 익히는 연습. 기기 간 동기화나 영구 백업은 아닙니다.

1. 화면에 보이는 것과 저장된 것은 다릅니다

메모장을 열어 글을 써도 파일로 저장하기 전에는 별도 파일이 남지 않는 것처럼, 앱도 ‘화면에 항목을 그리기’와 ‘다시 읽을 수 있게 보관하기’를 구분해야 합니다. 이번에는 브라우저가 제공하는 localStorage라는 작은 저장 공간을 사용하도록 AI에게 요청합니다.

흐름은 세 단계입니다. 앱을 열면 저장된 목록을 읽고, 사용자가 항목을 바꾸면 화면을 갱신하고, 바뀐 목록을 다시 저장합니다. 항목을 추가할 때만 저장하면 완료 표시나 삭제 결과는 다음 실행 때 되돌아갈 수 있습니다.

사용자 행동	기억해야 할 정보
할 일 추가	항목을 구별할 번호, 내용, 미완료 상태
완료·미완료 전환	해당 항목의 바뀐 상태
항목 삭제	삭제한 항목을 제외한 나머지 목록

같은 문장을 두 번 입력할 수 있으므로 내용만으로 항목을 구별하면 안 됩니다. ‘책 5쪽 읽기’가 두 줄이어도 각각의 번호를 갖도록 요청하면 한 항목만 지울 수 있습니다.

2. 시작 전에 저장의 범위를 알아 둡니다

localStorage는 일반적인 웹 페이지에서 브라우저를 닫은 뒤에도 데이터를 보관하는 데 쓰입니다. 다만 비공개·시크릿 창은 마지막 비공개 탭을 닫으면 해당 저장 데이터가 지워질 수 있고, 저장 차단 설정도 영향을 줍니다. MDN의 localStorage 문서에서 동작과 예외를 확인할 수 있습니다.

1편처럼 file:/// 주소로 HTML 파일을 직접 여는 경우는 특히 주의해야 합니다. 이 방식의 localStorage 동작은 표준에서 정해져 있지 않아 브라우저마다 다를 수 있습니다. 오늘은 같은 브라우저·같은 프로필·같은 파일 경로에서 되는지 확인하는 실습으로 진행합니다. 파일 이름이나 위치를 바꾼 뒤 목록이 달라졌다고 해서 곧바로 삭제됐다고 판단하지 마세요.

브라우저의 사이트 데이터를 지우거나 다른 브라우저·기기에서 열면 기존 목록을 그대로 볼 수 있다고 기대해서는 안 됩니다. 중요한 업무 기록이나 비밀번호를 보관하는 용도로 사용하지 말고, 이번 확인은 연습용 문장으로 하겠습니다.

3. AI에게 ‘저장만 추가’하도록 요청합니다

1편에서 코드를 만든 대화를 이어서 열고 아래 요청문을 보내세요. 새 대화라면 현재 index.html의 전체 코드도 함께 붙여 넣어야 AI가 어떤 앱을 고칠지 알 수 있습니다. 코드가 없다면 1편의 세 기능부터 완성한 뒤 돌아오세요.

현재 할 일 앱의 추가·완료 전환·개별 삭제 기능을 유지하면서 저장 기능만 추가해 줘.
나는 비개발자이며 index.html 파일을 브라우저에서 직접 열어 연습 중이야.

요구사항:
1. localStorage를 사용하되 이 앱 전용의 고정된 키 하나를 사용한다.
2. 항목에는 고유 ID, 내용, 완료 여부가 있고, 같은 문장도 별도 항목으로 구별한다.
3. 추가·완료 전환·삭제가 일어날 때마다 현재 목록을 저장한다.
4. 앱을 처음 열 때 저장된 목록을 읽고 내용과 완료 상태를 복원한다.
5. 빈 입력과 공백만 있는 입력은 추가하지 않고, 입력 내용은 글자 그대로 표시한다.
6. 저장과 읽기를 오류 처리로 감싸고, 저장에 실패하면 화면에 '저장하지 못했습니다'라고 알린다. 실패했는데 '저장됨'이라고 표시하지 않는다.
7. 저장 데이터 형식이 잘못됐으면 안내하고, 원본 데이터를 자동으로 덮어쓰거나 지우지 않는다. 복구 전에는 새 저장을 막는다.
8. localStorage.clear()로 다른 데이터까지 지우지 않는다.
9. 기존 '새로고침하면 목록이 사라진다'는 설명을 실제 동작에 맞게 바꾼다.
10. 새 라이브러리·서버·로그인 없이 파일 하나를 유지한다.

파일 직접 열기에서 저장이 제한될 수 있다는 점도 설명해 줘.
수정 이유를 쉬운 말로 설명한 뒤 생략 없는 index.html 전체 코드를 줘.

여기서 ‘고정된 키’는 보관함의 이름에 가깝습니다. AI가 코드를 수정할 때마다 보관함 이름을 바꾸면 이전 목록을 못 찾을 수 있으므로, 이후 화면을 꾸밀 때도 같은 키를 유지하도록 요청할 예정입니다.

4. 원본을 남기고 같은 파일에 적용합니다

1. 현재 index.html을 복사해 index-before-storage.html로 보관합니다. 이것은 앱 코드의 이전 버전이며, 할 일 데이터의 백업은 아닙니다.
2. 원래 index.html을 메모장 또는 일반 텍스트 모드의 편집기로 엽니다.
3. AI가 준 전체 코드로 내용을 바꾸고 저장합니다. 코드 앞뒤 설명 문장은 넣지 않습니다.
4. 같은 위치의 index.html을 기존 브라우저의 일반 창에서 다시 엽니다.
5. 연습 항목 하나를 추가해 저장 실패 안내가 뜨는지 먼저 확인합니다.

화면이 바뀌지 않는다면 다른 파일을 열고 있지 않은지 주소 끝부분을 확인하세요. 운영체제별 HTML 저장 방법은 1편의 파일 저장 단계에 정리했습니다. 오늘은 저장 기능만 바꾸므로 색상이나 버튼 배치까지 동시에 변경할 필요는 없습니다.

5. 저장됐는지 확인하는 여섯 단계

‘저장됨’이라는 안내만으로 검증을 끝내지 마세요. 실제로 닫았다가 다시 여는 과정이 필요합니다. 아래 각 단계가 끝날 때 예상 결과와 비교해 보세요.

1. 추가 후 새로고침: ‘물 한 잔 마시기’, ‘책 5쪽 읽기’를 추가합니다. 새로고침 후 두 항목이 그대로 남아야 합니다.
2. 완료 후 새로고침: 첫 항목을 완료로 표시합니다. 다시 열었을 때 그 항목만 완료 상태여야 합니다.
3. 완료 취소 후 새로고침: 같은 항목을 미완료로 돌립니다. 취소한 상태도 기억해야 합니다.
4. 중복 내용 개별 삭제: ‘책 5쪽 읽기’를 하나 더 추가하고 둘 중 하나만 삭제합니다. 새로고침 후에도 하나만 남아야 합니다.
5. 모두 삭제 후 새로고침: 연습 항목을 전부 지웁니다. 예전 목록이 다시 나타나면 빈 목록 저장 처리를 확인해야 합니다.
6. 닫고 다시 열기: 새 항목을 하나 추가한 뒤 탭을 닫고, 같은 브라우저·같은 프로필에서 같은 파일을 엽니다. 항목이 남는지 확인합니다.

파일을 복사해 다른 이름으로 여는 실험은 위 검증이 끝난 뒤 별도로 하세요. 환경 변화와 코드 오류를 한꺼번에 섞으면 원인을 구별하기 어렵습니다.

6. 목록이 사라졌다면 이 순서로 좁혀 봅니다

증상	먼저 확인할 것
추가는 남지만 완료 표시가 풀림	완료 전환 뒤에도 저장하는지
지운 항목이 다시 나타남	삭제 뒤 바뀐 목록을 저장하는지
다른 브라우저에서 목록이 비어 있음	원래 사용한 브라우저·프로필인지
파일 이름을 바꾼 후 목록이 안 보임	원래 파일 경로에서 다시 열면 보이는지
저장 실패 안내가 나타남	file 주소와 브라우저의 저장 제한 문제인지

실패 안내가 나오면 브라우저 보안 설정을 무작정 낮추거나 데이터를 지우지 마세요. 아래처럼 조건을 전달해 원인을 구별합니다.

사용 환경: [운영체제와 브라우저 이름]
주소 형식: file:/// 로 시작하는 로컬 HTML 파일
실행 순서: 항목 추가 → 새로고침
기대한 결과: 추가한 항목이 남아 있음
실제 결과: [목록이 비어 있음 / 표시된 오류 문구]

같은 파일 경로와 일반 창에서 확인했어.
저장 호출 누락인지, 파일 직접 열기의 저장 제한인지 구별할 수 있게 한 단계씩 안내해 줘.
저장 데이터를 삭제하거나 보안 설정을 낮추는 방법부터 제안하지 마.

현재 환경에서 파일 직접 열기의 저장이 지원되지 않으면 이 실습은 ‘환경 제한 확인’ 단계에서 멈춰도 됩니다. HTTP 주소로 실행하는 방법은 별도 환경 설정이 필요한 주제입니다. 오늘 당장 설치 명령을 따라 하거나, 동작을 확인하지 않은 채 저장 완료라고 결론내릴 필요는 없습니다.

7. 오늘의 도전 기록

• 확인한 환경: 운영체제 ______ / 브라우저 ______
• 새로고침 후 유지된 것: 내용 ______ / 완료 상태 ______ / 삭제 결과 ______
• 실패했다면 화면에 나온 안내: ______
• 이번에 알게 된 점: 코드 파일의 백업과 할 일 데이터의 백업은 서로 다르다.

오늘의 핵심은 ‘저장해 줘’라는 한마디를 무엇을, 언제, 어디에 저장하고 어떻게 확인할지로 바꾼 것입니다. 다음 편에서는 이 기능을 유지한 채 글자·버튼·빈 화면 안내를 다듬어, 처음 보는 사람도 쓰기 쉬운 화면으로 바꿔 보겠습니다.

이전 글: 1편 · 첫 할 일 앱 만들기
연재 모아보기: AI로 첫 앱 만들기