실습 프롬프트

안녕! 이 폴더에 hello.html 파일을 만들고, "준비 완료"라고 크게 보이게 해 줘. 그리고 브라우저로 열어 줘.

https://github.com/multica-ai/andrej-karpathy-skills 저장소의 CLAUDE.md 내용을 그대로 이 폴더의 CLAUDE.md로 만들어 줘. 그 아래에 "## 우리 프로젝트" 절을 추가해서 아래 기획안을 정리해 줘. (기획안 붙여 넣기: 주제, 이용자, 데이터, 만들 화면)

이 폴더를 git 저장소로 만들고 지금 상태를 커밋해 줘. git 사용자 이름은 "홍길동", 이메일은 "me@example.com"으로 설정해 줘.

이 로컬 저장소를 내 깃허브 저장소와 연결해 줘. GitHub에 my-archive라는 공개 저장소를 만들고 푸시해 줘. .env 같은 비밀 파일은 올라가지 않게 .gitignore를 먼저 확인해 줘.

Docker Desktop이 제대로 설치되어 실행 중인지 확인해 줘. docker와 docker compose 버전을 알려 주고, 문제가 있으면 원인을 설명해 줘.

Docker Hub에서 최신 Omeka S 도커 이미지를 찾아서 로컬 인스턴스를 만들어 줘. 요구사항: - 최신 Omeka S 버전이 들어 있고 최근까지 관리되는 이미지를 골라 주고, 왜 그 이미지를 골랐는지 근거를 설명해 줘 - Apache·PHP·DB 세부 설정은 이미지 기본값을 그대로 쓸 것. 내가 설정 파일을 직접 만지는 일이 없게 해 줘 - files/ 와 modules/ 와 themes/ 는 호스트에 볼륨으로 연결해서 컨테이너를 지워도 데이터가 남게 할 것 - 비밀번호 같은 접속 정보는 .env 파일로 분리하고 .gitignore에 추가 - http://localhost:8080 으로 접속 가능하게 작업 전에 먼저 계획을 설명하고, 내가 확인하면 진행해 줘. 파일을 만든 뒤에는 실제로 컨테이너를 띄워서 설치 화면이 뜨는지까지 확인해 줘.

로컬 Omeka S에 Mapping, Custom Vocab, Value Suggest, CSV Import, Faceted Browse 모듈을 설치해 줘. 각 모듈의 최신 호환 버전을 modules/ 폴더에 넣고, 관리자 화면 Modules에서 Install만 누르면 되게 해 줘.

Omeka S를 끄고 켜는 방법, 그리고 DB와 files/를 백업하는 방법을 초보자용으로 README.md에 정리해 줘. 백업 스크립트도 하나 만들어 줘.

내 Omeka S 주소는 http://localhost:8080 이고 API 주소는 http://localhost:8080/api 야. key_identity는 ○○○, key_credential은 ○○○ 이야. 이 정보를 .env 파일에 저장하고, 앞으로 API 요청에 자동으로 붙여 줘. 키는 코드에 직접 쓰지 마. API로 내 계정 정보를 한 번 불러와서 키가 동작하는지 확인해 줘.

uploads/ 의 엑셀(또는 PDF)을 읽어서 인물·장소·사건·기록을 분리한 CSV 네 개를 data/ 에 만들어 줘. - 날짜는 YYYY-MM-DD로 통일 - 장소는 위도·경도를 찾아 채우되, 확실하지 않은 값은 비워 두고 목록으로 알려 줘 - 같은 대상의 다른 표기(예: 서울시/서울특별시)는 하나로 맞추고, 바꾼 내역을 표로 보여 줘

data/ 의 CSV 열을 보고, Omeka S 리소스 템플릿(기록·인물·장소·사건)을 설계해 줘. 각 열을 Dublin Core·FOAF·RiC-O·Schema의 어떤 속성에 매핑할지, Data type(Text·Item·URI·Custom Vocab)은 무엇이 좋을지 표로 제안해 줘. 관계가 되는 열(예: 작가, 장소)은 Item 타입으로 연결하도록 해 줘. 내가 승인하면 Omeka S에 템플릿을 만들어 줘.

data/records.csv 의 각 행을 '기록' 템플릿으로 API에 등록해 줘. 먼저 한 건만 시험해서 결과 링크를 보여 주고, 내가 확인하면 나머지를 등록해 줘. 인물·장소 열은 이미 등록된 아이템을 찾아 연결하고, 없으면 목록으로 알려 줘.

등록된 아이템을 전부 불러와서 설명이 비어 있거나 이미지가 없거나 좌표·날짜가 없는 항목을 표로 알려 줘.

전체 아이템·아이템 세트·미디어 정보를 API로 받아서 화면 만들 때 쓸 data/data.json으로 저장해 줘. 이미지 주소도 포함해 줘.

site/ 폴더에 정적 웹사이트를 만들 거야. HTML/CSS/JS만 쓰고 외부 라이브러리는 CDN으로만 불러와. 데이터는 data/data.json을 읽어. 한국어, 반응형, 흰 배경 + 진회색 글자 + 포인트 색 하나. 로컬 서버로 띄워서 브라우저에서 확인할 수 있게 해 줘.

browse.html을 만들어 줘. data.json의 아이템을 3열 카드 그리드(이미지·제목·연도)로 보여 주고, 왼쪽에 필터 패널(유형·장소·연도 구간·컬렉션), 위에는 제목·키워드 검색창. 필터는 여러 개 동시 적용되고, 선택한 조건은 칩으로 표시되어 하나씩 지울 수 있게. 결과 건수를 항상 보여 주고, 필터 상태를 URL 쿼리에 반영해서 링크로 공유할 수 있게 해 줘.

item.html?id=42 형태로 동작하는 상세 페이지를 만들어 줘. 왼쪽에 큰 이미지(여러 장이면 갤러리), 오른쪽에 메타데이터 표. 다른 아이템과 연결된 값은 링크로 만들어 해당 상세로 이동하고, 하단에 "관련 자료" — 이 아이템을 참조하는 다른 아이템을 카드로 보여 줘. 권리(라이선스) 정보는 꼭 노출해 줘.

data.json의 사건 아이템(시작일·종료일)으로 timeline.html을 만들어 줘. TimelineJS(Knight Lab)를 CDN으로 쓰고, 각 항목에 제목·설명·대표 이미지·상세 페이지 링크를 넣어 줘. 날짜가 없는 항목은 제외하고 개수를 알려 줘.

장소 아이템의 위도·경도로 map.html을 만들어 줘. Leaflet을 CDN으로 쓰고, 마커를 누르면 장소명·설명·관련 기록 링크가 팝업으로 뜨게. 장소 유형별로 마커 색을 다르게 하고 범례를 붙여 줘.

이 장소들을 시간 순서대로 따라가는 이야기로 만들고 싶어. StoryMapJS 형식의 JSON을 만들어서 storymap.html로 보여 줘. 슬라이드마다 장소·날짜·짧은 설명(3문장 이내)·이미지를 넣고, 첫 슬라이드는 전체 소개로 해 줘.

아이템 간 연결(작가·장소·관련 사건 같은 Item 타입 값)로 network.html을 만들어 줘. vis-network를 CDN으로 쓰고, 클래스별로 노드 색을 다르게, 노드 크기는 연결 수에 비례, 엣지에는 관계 이름 라벨. 노드를 클릭하면 오른쪽 패널에 정보와 상세 페이지 링크를 보여 주고, 연결이 가장 많은 노드 상위 5개를 표로 알려 줘.

search.html에 자연어 검색창을 만들어 줘. 사용자가 "1980년대 서울에서 일어난 사건 보여 줘"처럼 물으면 LLM이 질문을 {유형, 장소, 기간, 키워드} 검색 조건(JSON)으로 바꾸고, data.json에서 맞는 아이템을 찾아 카드로 보여 줘. LLM은 Anthropic API(키는 .env, 브라우저에 노출하지 않게 작은 로컬 서버를 거쳐서) 또는 Ollama(localhost:11434) 중 쓸 수 있게 해 줘. LLM이 만든 검색 조건도 화면에 보여 줘서 사람이 확인할 수 있게 해 줘.

지도·연표·관계망·목록을 위에서 아래로 읽는 전시 페이지 exhibit.html로 합쳐 줘. 순서는 소개 → 지도 → 연표 → 관계망 → 결론·출처. 각 섹션에 캡션을 붙이고 모바일에서도 보이게.

여백은 24px 단위, 본문 16px, 제목 32px, 색은 흰 배경 + #1D1D1F 글자 + 포인트 1색으로 정리해 줘. 카드 이미지는 4:3으로 잘라 통일하고, 휴대폰(375px)에서 레이아웃이 무너지지 않게 해 줘.

site/ 폴더를 GitHub Pages로 배포해 줘. 배포 전에 이미지 주소가 localhost나 내 컴퓨터 경로로 되어 있지 않은지, data.json이 함께 올라가는지 확인하고, 배포 후 공개 주소를 알려 줘.

이 정적 사이트를 Vercel로 배포해 줘. 설정 파일을 만들고 배포 명령까지 실행한 뒤 공개 URL을 알려 줘.

Omeka S에서 아이템을 고쳤어. data.json을 다시 받아서 커밋하고 푸시해 줘. 배포된 사이트에 반영됐는지 확인해 줘.

지금 이 에러가 났어. (에러 메시지 붙여 넣기) 1. 원인 가설을 두세 개 세우고, 각각을 어떻게 확인할 수 있는지 알려 줘. 2. 확인 명령을 하나씩 실행해서 어느 가설이 맞는지 좁혀 줘. 3. 원인이 확정되기 전에는 파일을 수정하지 마.

지금 저장소 전체에서 API 키·비밀번호처럼 보이는 문자열이 커밋 이력에 포함돼 있는지 검사해 줘. 찾으면 어떤 파일의 어떤 커밋인지 알려 주고, 수정 방법을 제안하되 내가 승인하기 전에는 이력을 고치지 마.