처음 만나는 AI와 Claude Code
Gabriel Yang
- 작성일
- 이 서재에서 책을 만든 날
- 공개판 업데이트
- 이 판본을 만든 날
AI와 LLM을 처음 배우는 독자를 위한 짧은 실습서. 생성형 모델의 특징을 이해한 뒤, Claude Code로 독서모임 안내와 여러 장의 준비 카드를 만들며 문제 정의부터 시험·개선까지 경험한다.
저자 서가3장. 준비 카드의 동작 만들고 확인하기
3장. 준비 카드의 동작 만들고 확인하기
2장에서 만든 페이지는 정보를 읽는 데는 쓸 수 있지만, 처음 오는 사람이 지금 할 수 있는 일은 없습니다. 모임 일정과 신청 방법이 정해지기 전에도 독자는 읽고 싶은 책과 나누고 싶은 질문을 준비할 수 있습니다. 이 장에서는 그 필요를 첫 모임 준비 카드라는 작은 동작으로 만듭니다.
이 장의 개발 순서
첫 페이지에서 파일·브라우저·브라우저 저장 공간의 관계와, 필요할 때만 쓰는 로컬 웹서버의 역할을 살펴봅니다. 전체 구조를 이해한 뒤 준비 카드 구현으로 넘어갑니다.
먼저 누구의 어떤 문제를 풀지 정합니다. 이어서 저장할 정보와 화면의 동작, 성공했는지 확인할 기준을 적습니다. 그다음 Claude Code에 구현을 부탁하고, 브라우저에서 직접 입력·저장·새로고침을 해 봅니다. 시험에서 빠진 점을 발견하면 범위를 좁혀 고칩니다. 이것이 작은 소프트웨어 개발의 요구사항 → 설계 → 구현 → 검증 → 개선 순서입니다.
이 예제는 하나의 index.html 안에서만 동작합니다. 준비 카드는 이 브라우저에 보관할 개인 메모이며 모임 신청이나 서버 전송이 아닙니다. 다른 기기에서는 보이지 않고 브라우저 데이터를 지우면 사라질 수 있습니다. 따라서 실제 접수 기능인 척하는 버튼이나 확인 메시지를 만들지 않습니다.
처음에는 카드 한 장으로 입력·저장·삭제를 확인합니다. 이어서 다른 책의 카드를 만들 때 첫 카드가 사라지는 문제를 발견하고, 여러 장을 각각 수정·삭제할 수 있게 바꿉니다. 마지막으로 책을 알아보기 쉽도록 선택한 이미지를 카드에 붙입니다. 각 단계에서 새로고침 후에도 내용이 남는지 시험하세요. 보기 좋은 화면보다 사용자가 기대한 동작과 실제 동작이 맞는지가 더 중요합니다.