오늘 만드는 건 독서 기록 페이지다. 책 밑줄 캡처 한 장을 넣으면 제목, 인상 깊은 문장 4개, 한 줄 감상, 다음에 할 행동 1개가 카드로 뜨는 Book Log 화면이다. 노션 템플릿 찾다가 시간 쓰는 사람한텐 이게 훨씬 빠르다. 지난편에 알림봇 쪽으로 갔다면 이번에는 혼자 오래 쓰는 기록 쪽으로 가보자.
준비물은 하나면 된다
Codex만 있으면 된다. Codex 쓰는 분은 터미널에서 그대로 따라오면 되고, Claude Code 쓰는 분은 같은 프롬프트에 이미지만 붙여도 비슷하게 된다. 오늘 예시는 Codex 기준이다. 하이라이트 캡처 1장이나 메모 사진 1장만 있으면 충분하다.
독서 기록 페이지를 진짜 띄우는 순서
1
한 파일짜리 첫 화면부터 띄우기
AI에게 보낸 프롬프트
프로젝트 폴더에 index.html 하나만 만들어줘. 로컬에서 바로 열리는 독서 기록 페이지고, 책 제목 영역, 저자 영역, 밑줄 카드 4개, 한 줄 감상 박스, 다음 액션 박스가 보여야 해. 처음엔 더미 데이터로 채워주고 모바일에서도 보기 편하게 해줘. 백엔드나 로그인은 넣지 마.
왜 이렇게 시켰나: 첫 결과가 늦으면 바로 귀찮아진다. 한 파일부터 뜨면 여기서 이미 반은 끝난다.
이렇게 나오면 OK: 브라우저에 카드 4개가 보이고, 휴대폰 폭으로 줄여도 안 깨지면 된다. 첫 화면 뜨면 좀 허무할 수도 있다. 생각보다 빨라서.
⚠여기서 이렇게 하면 안 돼요: Step 1부터 저장 기능, 공유 링크, 다크모드까지 한 번에 달라 하면 바로 늘어진다.
2
결과 모양을 먼저 고정하기
AI에게 보낸 프롬프트
프로젝트 루트에 AGENTS.md와 schema.json을 만들어줘. AGENTS.md에는 말투는 담백한 한국어, quotes는 정확히 4개, 한 줄 감상은 40자 안쪽, nextAction은 오늘 당장 할 일 1개만 쓰라고 적어줘. schema.json에는 bookTitle, author, quotes, oneLineReview, nextAction 필드만 남겨줘.
왜 이렇게 시켰나: 이거 안 넣으면 Codex가 카드 개수를 자꾸 바꾼다. 외울 필요 없다. 파일 이름도 그냥 그대로 두면 된다.
이렇게 나오면 OK: AGENTS.md에 금지어와 톤이 짧게 적혀 있고, schema.json 필드가 다섯 개로 딱 고정되면 된다.
⚠여기서 이렇게 하면 안 돼요: quotes를 열어두면 어떤 날은 2개, 어떤 날은 7개가 나온다. 그러면 페이지가 바로 어색해진다.
3
캡처 한 장을 JSON으로 뽑기
AI에게 보낸 프롬프트
codex -i notes.png "notes.png를 읽고 schema.json 형식에 맞는 booklog.json 파일을 만들어줘. 책 제목 1개, 저자 1개, 밑줄 4개, 한 줄 감상 1개, 다음 액션 1개만 넣어. 문장은 과장하지 말고 바로 저장 가능한 결과로 써줘."
왜 이렇게 시켰나: Codex 공식 문서에 있는 image input이 여기서 진짜 편하다. 텍스트를 다시 치는 시간이 통째로 빠진다.
이렇게 나오면 OK: booklog.json 파일이 생기고 quotes가 정확히 4개 들어가면 된다. 첫 결과는 여기서 나온다. 코딩 몰라도 여기까지 오면 이미 쓸 만하다.
⚠여기서 이렇게 하면 안 돼요: 사진을 멀리서 찍어 통째로 넣으면 제목이 자꾸 헷갈린다. 밑줄 부분이 또렷하게 보이게 잘라서 넣자.
4
진짜 내 메모로 갈아끼우기
AI에게 보낸 프롬프트
index.html이 booklog.json을 읽어서 카드 내용을 바꾸게 수정해줘. 모바일에서 한 손으로 읽기 편하게 하고, oneLineReview만 복사하는 버튼 하나를 추가해줘. 파일 수는 늘리지 말고 지금 구조를 최대한 유지해줘.
왜 이렇게 시켰나: 이제부터는 매번 새로 만드는 게 아니라 계속 쓰는 독서 기록 페이지가 되어야 한다.
이렇게 나오면 OK: JSON만 바꿔도 페이지 내용이 새 책으로 바뀌고, 복사 버튼 누르면 한 줄 감상이 바로 들어가면 된다.
⚠여기서 이렇게 하면 안 돼요: 공유 기능까지 붙이자고 욕심내면 갑자기 일이 커진다. 오늘은 로컬에서 잘 보이면 끝이다.
5
마감은 /review로 짧게
AI에게 보낸 프롬프트
/review로 지금 바뀐 파일을 보고 모바일 줄바꿈, 카드 간격, 과장된 문구만 체크해줘. 수정이 필요하면 작은 패치만 제안해줘.
왜 이렇게 시켰나: Codex 공식 문서에 있는 /review가 이런 마감용으로 잘 맞는다. 큰 리팩토링 말고 마지막 다듬기만 보는 식이다.
이렇게 나오면 OK: 카드 높이가 들쭉날쭉하지 않고, 한 줄 감상이 괜히 감성 과다로 흐르지 않으면 된다.
⚠여기서 이렇게 하면 안 돼요: 이 단계에서 디자인을 다시 엎자고 하면 처음부터 다시 하게 된다.
여기서 막히면
캡처를 넣었는데 책 제목이 틀리게 나온다. 원인은 형광펜 번짐이나 그림자다. notes.png를 열어서 제목 줄이 또렷한지만 먼저 보면 된다. 해결은 사진 전체를 다시 찍는 것보다 제목 부분만 따로 잘라 넣는 쪽이 훨씬 빠르다.
booklog.json은 생겼는데 페이지에 아무것도 안 뜬다. 원인은 필드 이름이 schema.json과 달라진 경우가 많다. quotes, oneLineReview, nextAction 이름이 한 글자라도 다르면 바로 비어 보인다. 이때는 새 프롬프트를 길게 쓰지 말고 필드 이름만 맞춰달라고 짧게 다시 시키면 된다.
문구가 갑자기 너무 거창해진다. 긴 세션에서 AGENTS.md 규칙을 잊는 경우가 꽤 있다. AGENTS.md에 금지어를 더 짧게 적고 새 세션에서 다시 시작하면 대부분 잠잠해진다. 몰라도 괜찮다. 그냥 규칙을 다시 읽혀주면 된다.
다음엔 이거 하나 붙이면 된다
한 걸음 더
다음에는 이 독서 기록 페이지에 주간 묶음만 붙여서 한 달 Book Log 리포트까지 뽑아보면 된다. 그때부터 책 읽은 흔적이 폴더에 안 묻힌다.
