소개
읽은 책을 그냥 흘려보내고 싶지 않았습니다. 인상 깊었던 문장이나 느낀 점을 어딘가에 남기긴 했지만, 나중에 다시 찾아보려면 흩어진 메모를 뒤져야 했습니다. 그래서 책 한 권을 읽을 때마다 "무엇을 배웠는지"와 "그걸 실제로 어떻게 실행했는지"까지 구조적으로 남기는 나만의 독서 기록 사이트를 만들어보기로 했습니다.
진행 방법
1) 처음 요청 — 문제와 조건을 한 번에 던지기
Claude Code에게 처음 준 요청은 이랬습니다. 기능을 하나하나 나열하지 않고, "내가 불편했던 것"과 "완성 조건"만 말했습니다.
```
내가 불편했던 것 딱 하나를 해결하는 웹사이트를 만들어줘.
불편했던 것: 독서 기록 관리를 내가 원하는 스타일과 메뉴로 하고 싶어. 책제목, 저자, 읽은 날짜, 인사이트, 실행 및 적용한 결과물을 관리하고 싶어
조건:
1) 검색 유입이 잘 되도록 페이지마다 제목·설명이 잘 붙은 정적 사이트로
2) 구글 애드센스 심사에 통과할 수 있게 콘텐츠 페이지를 충분히(10개 이상) 만들어줘
3) 완성 후 구글 서치 콘솔·네이버 서치 어드바이저 등록 방법을 단계별로 알려줘
```
이 요청을 바탕으로 Claude Code가 Eleventy(정적 사이트 생성기) 기반 구조를 제안했습니다. Eleventy는 마크다운 파일 하나를 페이지 하나로 바꿔주는 도구라서, 책 한 권 = 마크다운 파일 하나로 관리하는 구조가 자연스럽게 나왔습니다.
2) 책 기록 구조 — front matter로 인사이트까지 데이터화
책 기록은 아래처럼 front matter(파일 맨 위 정보 블록)에 제목·저자·읽은 날짜·장르·태그와 함께, 인사이트(`insights`)와 실행 결과(`actionResults`) 를 구조화해 남기도록 만들었습니다.
```yaml
---
layout: book-review.njk
bookTitle: "어떻게 살 것인가?"
author: "사이토 히토리"
dateRead: "2026-07-09"
genre: "자기계발"
tags: ["books", "자기계발", "긍정심리"]
insights:
- "자기 사랑: 어떤 상황에서도 '나는 나를 사랑해'라고 말하며 자신의 가치를 인정하라"
actionResults:
- "고민이 생길 때마다 멈추고 '나는 운이 좋다'는 말을 3번 반복하는 루틴을 시작했다"
---
```
3) 책 목록 자동화 — 컬렉션 코드
책 목록 페이지는 Eleventy의 컬렉션 기능으로 자동 생성됩니다. 새 책을 추가할 때 코드를 건드릴 필요 없이, 마크다운 파일 하나만 새로 만들면 됩니다.
```js
eleventyConfig.addCollection("books", function (collectionApi) {
return collectionApi
.getFilteredByGlob("content/books/*.md")
.sort((a, b) => new Date(b.data.dateRead) - new Date(a.data.dateRead));
});
```
4) 배포와 사용 도구
완성된 사이트는 Netlify로 배포했습니다. 사용한 도구는 Claude Code(설계·구현·디버깅), Eleventy 3.1.6(정적 사이트 빌드), Node.js/npm(빌드 스크립트 실행), Netlify(배포)입니다.
실제 사이트: https://reading-log-1783427283.netlify.app
- 메인 페이지:
한국어로 된 웹사이트의 홈페이지
- 책 목록/상세 페이지:
한국어로 된 웹사이트의 홈페이지
- Contact 페이지:
한국 웹사이트의 연락처 페이지 스크린샷
결과와 배운 점
배운 점과 꿀팁: 책을 추가할 때마다 코드를 손댈 필요 없이 파일 하나만 새로 쓰면 된다는 점이 가장 만족스러웠습니다. insights와 actionResults를 구조로 나눠 남기다 보니, 단순히 "읽었다"가 아니라 "무엇을 배우고 실제로 뭘 했는지"까지 기록에 남는 게 생각보다 좋았습니다. 지금은 실제로 배포가 끝나 있고, 10권의 책 기록이 남아 있으며, 문의를 받을 수 있는 Contact 페이지(이메일 + 블로그·유튜브 2채널·인스타그램 링크)도 완성돼 있습니다.
시행착오: Eleventy는 기본적으로 이전 빌드 결과물을 지우지 않아서, 책 기록을 삭제해도 배포된 사이트에는 옛 페이지가 그대로 남아있던 적이 있었습니다. 빌드 스크립트를 rimraf site && eleventy로 바꿔서, 매번 site 폴더를 깨끗이 지우고 다시 만들도록 해결했습니다. 또한 정적 사이트라 서버 없이 빠르게 배포할 수 있었지만, Contact 페이지도 폼 서비스를 연동한 게 아니라 이메일·SNS 링크를 정적으로 걸어둔 것이라 문의는 이메일로 직접 받는 구조입니다.
도 움이 필요한 부분: 처음 요청에 있던 "구글 애드센스 심사 통과"와 "검색 유입"은 아직 결과가 쌓이는 중이라 실제 성과를 확인하지 못했습니다. 애드센스 심사나 SEO 관련해서 경험 있으신 분들의 조언이 있으면 도움이 될 것 같습니다.
앞으로의 계획: 지금은 책마다 파일을 직접 만들어 넣지만, 다음엔 반복되는 정보를 더 편하게 입력할 수 있는 방법을 찾아보고 싶습니다.
도움 받은 글 (옵션)
- [AI로 독서 기록용 Next.js 웹앱 만들기 (1)](https://www.gpters.org/dev/post/ask-cursor-create-nextjs-k4L22oAGEkcxXJE)
- [Eleventy 공식 문서](https://www.11ty.dev/docs/)
- [Netlify 공식 문서 - Create deploys](https://docs.netlify.com/deploy/create-deploys/).
(내용 입력)
