처음 만나는 AI와 Claude Code

저장·새로고침·삭제를 시험하며 고치기

3장. 저장·새로고침·삭제를 시험하며 고치기

이 장의 단계별 HTML 결과물: 카드 한 장 저장 · 여러 장 추가·수정·삭제 · 이미지 첨부

2장의 안내 페이지를 브라우저에서 열어 봅시다. 시간과 장소가 미정인 독자는 아직 신청할 수 없습니다. 그래도 첫 모임에서 이야기할 책과 질문은 미리 생각해 둘 수 있지요. 이 장의 사용자는 처음 오는 사람이고, 필요한 동작은 자신의 준비 내용을 적어 두었다가 다시 보는 것입니다. 남에게 보내는 신청서가 아닙니다.

만들기 전에 성공 기준 정하기

다음 네 문장을 먼저 읽어 보세요. 개발에서는 이런 문장이 완성 여부를 판단하는 기준이 됩니다.

1. 책 제목과 나눌 질문을 적고 저장하면 화면에 두 내용이 보입니다.

2. 페이지를 새로고침해도 저장한 내용이 다시 보입니다.

3. 제목이나 질문이 비어 있으면 저장하지 않고 무엇을 채워야 하는지 알려 줍니다.

4. ‘내 메모 삭제’를 누르면 저장한 카드가 사라지고, 새로고침해도 다시 나타나지 않습니다.

시간·장소·신청 방법은 여전히 ‘추후 안내’입니다. 준비 카드의 저장은 이 브라우저의 저장 공간만 사용합니다. 서버나 모임 운영자에게 전송하지 않으며, 공용 컴퓨터에는 개인 정보를 적지 않는 것이 좋습니다. 이번에는 카드 한 장만 저장하고 다시 저장하면 앞의 내용을 바꿉니다. 저장할 자료는 책 제목과 질문 두 가지, 화면의 동작은 입력·저장·다시 보기·삭제 네 가지입니다. 이것이 이번 실습의 작은 설계입니다.

Claude Code에 동작 만들기 요청하기

2장에서 열어 둔 Claude Code 대화창에 다음을 입력합니다. 요청 후 변경 대상이 연습 폴더의 index.html인지 확인하세요.

지금 있는 index.html에 ‘첫 모임 준비 카드’를 추가해 줘. 처음 오는 사람이 읽고 싶은 책 제목과 함께 나눌 질문을 입력하고 저장하면 화면에서 볼 수 있어야 해. 카드는 한 장만 저장하고 다시 저장하면 그 내용을 바꿔 줘. 새로고침해도 같은 브라우저에서 다시 보이게 해 줘. 모임 시간·장소·신청 방법은 ‘추후 안내’로 유지하고, 신청이나 외부 전송 기능은 만들지 마. 외부 라이브러리나 서비스 없이 index.html 하나만 수정해 줘. 끝나면 바꾼 파일과 내가 확인할 동작을 알려줘.

Claude Code가 웹브라우저의 localStorage를 제안할 수 있습니다. 이것은 이 브라우저에 작은 데이터를 남기는 저장 공간입니다. 인터넷으로 보내는 신청 접수와는 다릅니다. 다른 기기에서 보이거나 영구히 보관된다는 뜻도 아닙니다. AI가 다른 저장 방식을 제안하면 어디에 저장되고 누가 볼 수 있는지 먼저 물어보세요.

쉽게 말해, 브라우저 안에 준비 카드를 넣어 두는 작은 서랍을 하나 두는 셈입니다. 그 서랍은 지금 쓰는 브라우저에 속하므로 다른 컴퓨터와 자동으로 나뉘어 보이지 않고, 브라우저 데이터를 지우면 함께 비워질 수 있습니다.

앞 페이지에서 본 것처럼 파일을 직접 열면 브라우저에 따라 저장이 되지 않을 수 있습니다. 이때는 일반 브라우저 창에서 다시 열어 보세요. 그래도 저장되지 않고 Python이 이미 설치되어 있다면, 선택적으로 로컬 웹서버를 실행해 확인할 수 있습니다. Python을 새로 설치할 필요는 없습니다. 새 터미널 창에서 다음 명령을 실행합니다.

cd ~/reading-club-practice
python3 -m http.server 8000 --bind 127.0.0.1

Windows에서 python3 명령을 찾지 못하지만 Python이 설치되어 있다면 py -m http.server 8000 --bind 127.0.0.1을 써 보세요. 터미널을 닫지 않은 채 브라우저 주소창에 127.0.0.1:8000을 입력하면 같은 페이지가 보입니다. 시험을 마치면 서버를 실행한 터미널에서 Ctrl+C를 눌러 멈춥니다. file: 주소와 127.0.0.1 주소는 저장 공간이 다르므로, 주소를 바꾼 뒤에는 준비 카드를 다시 입력해야 합니다. Python이 없다면 저장이 가능한 다른 브라우저에서 시험하고, 계속 막히면 파일과 브라우저 이름을 Claude Code에 알려 도움을 요청하세요.

브라우저에서 index.html을 새로고침합니다. 입력칸과 저장 버튼이 생겼나요? 아래는 참고 예제의 빈 준비 카드 화면입니다. 독자의 색과 배치는 달라도 괜찮습니다.

시험해 보고 빠진 점 고치기

예를 들어 책 제목에 ‘어린 왕자’, 질문에 ‘주인공은 왜 여행을 떠났을까?’를 적고 저장해 봅니다. 두 문장이 저장한 카드에 보이는지 확인한 뒤 브라우저를 새로고침합니다. 여전히 보인다면 1·2번 기준을 통과한 것입니다. 이 제목과 질문은 실습용 입력 예시이며 실제 모임에서 선정한 책이라는 뜻은 아닙니다.

이제 일부러 제목이나 질문을 비우고 저장해 봅니다. 비어 있는 카드가 만들어진다면 먼저 이 문제만 고칩니다.

방금 만든 준비 카드에서 책 제목이나 질문이 비어 있으면 저장하지 말고 두 항목을 적어 달라고 알려 줘. index.html 외의 파일과 모임 안내 문구는 바꾸지 마.

빈 입력을 다시 시험한 뒤 삭제 기능이 없다면 다음을 요청합니다.

저장한 준비 카드에 ‘내 메모 삭제’ 버튼을 추가해 줘. 삭제한 뒤 새로고침해도 메모가 돌아오지 않아야 해. 다른 문구와 파일은 유지해 줘.

이미 두 동작이 있다면 해당 요청은 건너뛰어도 됩니다. 이것은 처음 요청이 실패했다는 뜻이 아닙니다. 실제로 써 본 뒤 부족한 조건을 발견하고 하나씩 고치는 개선입니다. AI가 완료했다고 해도 다음 순서로 직접 확인합니다.

1. 빈 제목 또는 빈 질문으로 저장하면 안내 문구가 나오고 카드가 새로 생기지 않습니다.

2. 둘 다 입력하고 저장하면 내용이 보입니다.

3. 새로고침해도 내용이 남습니다.

4. ‘내 메모 삭제’를 누르면 카드가 사라지고, 다시 새로고침해도 나타나지 않습니다.

5. ‘동네 책모임’과 미정 정보 세 항목이 유지되고, 실제 신청 버튼이나 외부 전송이 없습니다.

아래는 카드 한 장을 저장하는 단계의 참고 화면입니다. 저장한 내용과 ‘내 메모 삭제’ 버튼이 함께 보입니다.

다음은 메모를 삭제한 뒤 빈 입력으로 저장을 시도한 화면입니다.

마지막으로 저장한 카드를 삭제하면 다음처럼 삭제 안내가 보이고 카드가 사라집니다.

독자의 결과가 다르면 실패한 항목 하나를 그대로 Claude Code에 알려 주세요. 예를 들어 “새로고침하면 카드가 사라져. 같은 브라우저에서 다시 보이도록 고쳐 줘”라고 말합니다. 브라우저의 저장 공간을 지웠거나 다른 브라우저에서 열었다면 메모가 보이지 않는 것이 정상입니다. 또 파일을 수정했는데 화면이 바뀌지 않는다면 연습 폴더의 index.html을 열었는지 확인합니다.

누가 무엇을 확인했는지 구분하기

Claude Code에 “어떤 파일을 바꿨고 실제로 어떤 시험을 했어? 브라우저에서 직접 확인하지 않았다면 그렇게 알려줘”라고 물어봅니다. AI가 파일 내용을 읽은 것과 독자가 브라우저에서 저장·새로고침·삭제를 시험한 것은 다릅니다. 기능이 실제로 작동하는지 확인하는 마지막 단계는 독자의 몫입니다.

대화를 나중에 이어 가려면 터미널에서 연습 폴더로 돌아간 뒤 claude -c를 실행합니다. 이어 갈 대화가 없다면 claude로 새 대화를 시작해도 index.html은 폴더에 남습니다. 다만 준비 카드의 입력 내용은 파일이 아니라 브라우저 저장 공간에 있습니다.

cd ~/reading-club-practice
claude -c

다음 문제를 찾아보기

이제 정적인 안내 페이지에서 카드 한 장을 사용할 수 있습니다. 그런데 다른 책도 준비하려고 두 번째 카드를 저장하면 어떻게 될까요? 지금 설계에서는 새 카드가 첫 카드를 바꿉니다. 기능이 고장 났다기보다 처음 정한 범위가 실제 사용에 부족했던 것입니다. 다음 실습에서 이 문제를 요구사항으로 바꾸어 봅니다.