처음 만나는 AI와 Claude Code

Gabriel Yang

작성일
이 서재에서 책을 만든 날
공개판 업데이트
이 판본을 만든 날

AI와 LLM을 처음 배우는 독자를 위한 짧은 실습서. 생성형 모델의 특징을 이해한 뒤, Claude Code로 독서모임 안내와 여러 장의 준비 카드를 만들며 문제 정의부터 시험·개선까지 경험한다.

저자 서가

카드에 이미지 붙이기

3장. 카드에 이미지 붙이기

이미지 첨부 HTML 예제 열기

카드가 여러 장 쌓이면 제목만 읽고 책을 찾는 데 시간이 걸릴 수 있습니다. 자신의 컴퓨터에 있는 표지 사진이나 관련 이미지를 붙이면 카드를 더 쉽게 구분할 수 있습니다. 이미지는 필수가 아닙니다. 사진이 없어도 제목과 질문만으로 카드를 만들 수 있어야 합니다.

이미지가 들어갈 때 달라지는 것

카드 한 장의 자료는 이제 제목·질문·선택 이미지가 됩니다. 사진 파일은 글보다 크기 때문에 브라우저 저장 공간을 빨리 채울 수 있습니다. 이 예제에서는 PNG·JPEG·WebP 파일만 받고, 원본이 5MB를 넘으면 거절하며, 저장 전 가로세로 최대 640픽셀의 JPEG로 줄입니다. 이렇게 해도 브라우저 저장 공간은 한정되어 있습니다. 많은 사진을 오래 보관하는 서비스로 생각하지 마세요.

큰 사진을 줄이는 과정은 큰 그림을 작은 액자에 맞게 축소하는 것과 비슷합니다. 화면에서 보기 좋게 줄이면 저장 공간을 아낄 수 있지만, 원본과 똑같은 크기와 세밀함까지 그대로 유지되는 것은 아닙니다. 이 실습에서는 카드에서 알아볼 수 있을 정도로 이미지를 줄입니다.

Claude Code에 다음처럼 요청합니다.

여러 장의 준비 카드에 이미지 파일을 선택적으로 붙일 수 있게 해 줘. PNG·JPEG·WebP 파일만 받고 5MB를 넘으면 이유를 알려 줘. 저장 전에 작은 크기로 줄여 브라우저 안에 보관하고, 새로고침 후에도 카드마다 이미지가 보이게 해 줘. 이미지가 없는 카드는 그대로 저장되어야 해. 카드별 ‘이미지 제거’도 가능하게 해 줘. 파일을 서버로 보내지 말고, 기존 카드와 모임 안내는 유지해 줘. 저장 공간이 부족하면 실패를 알려 주고 기존 카드는 지우지 마.

이미지 선택 칸에 자기 컴퓨터의 파일을 넣고 카드를 저장합니다. 아래 참고 화면에서는 이 책의 표지 이미지를 단지 시험용으로 붙였습니다. 이 책이 모임 도서라는 뜻은 아닙니다.

책 표지를 첨부한 준비 카드 참고 화면

이미지를 붙인 카드와 붙이지 않은 카드를 하나씩 만들고 새로고침합니다. 두 카드가 모두 남고, 첨부한 카드에만 이미지가 보이나요? ‘이미지 제거’를 누른 뒤 다시 새로고침해도 텍스트는 남고 이미지만 없어야 합니다. 너무 큰 파일이나 다른 형식의 파일을 넣으면 카드가 손상되지 않고 이유를 알려 주는지도 시험합니다.

준비 카드의 기본 기능은 여기까지입니다. 브라우저 데이터를 지우거나 다른 기기로 옮기면 이 메모는 따라가지 않습니다. 파일로 옮기는 방법이 궁금하다면 4장의 선택 확장 실습에서 실제 Excel 파일을 다뤄 볼 수 있습니다.