Letterboxd 영화 취향 리포트는 `watched.csv` 하나 넣으면 내가 어떤 장르를 많이 봤는지, 몇 년대 영화에 별점을 후하게 줬는지 바로 보이는 로컬 페이지다. 완성되면 상단에 요약 카드가 뜨고, 아래엔 장르 Top 5랑 연도별 그래프, 별점 높은 영화 카드가 줄줄이 보인다. 지난편이 Reddit랑 HN에서 아이디어를 끌어오는 보드였다면 오늘은 내 기록을 그대로 화면으로 바꾸는 쪽이다.
준비물은 하나만 고르자
Claude Code 하나면 된다. 요즘 문서 기준으로 파일을 드래그해서 바로 읽힐 수 있고, Preview에서 만든 페이지를 곧장 띄워볼 수 있구요, 마지막엔 Review code로 어색한 부분만 다시 볼 수 있다. Codex 쓰는 분도 같은 프롬프트를 붙이면 되는데 오늘은 Claude Code 기준으로 갈게요. Letterboxd에서 내보낸 `watched.csv`만 있으면 시작된다.
1
첫 화면부터 띄우기
AI에게 보낸 프롬프트
현재 폴더에 있는 watched.csv를 읽어서 index.html 하나로 Letterboxd 영화 취향 리포트를 만들어줘. 첫 버전은 1) 상단 요약 카드 3개, 2) 장르 Top 5, 3) 연도별 관람 수 막대그래프만 넣어. 외부 라이브러리 없이 HTML CSS JS만 써. 모바일에서도 읽히게 하고 한국어 문구로 써.
왜 이렇게 시켰나: 첫 판부터 욕심내면 Claude가 표랑 차트를 한꺼번에 흔들 때가 있거든요. 그래서 딱 세 가지만 시킨다.
이렇게 나오면 OK: 브라우저에 `index.html`을 열었을 때 숫자 카드와 막대그래프가 먼저 뜨면 된다.
⚠여기서 이렇게 하면 안 돼요: 첫 프롬프트에 포스터, 검색, 다크모드, 공유 버튼까지 다 넣지 마. 그러면 첫 결과가 늦어진다.
2
영화 카드 붙이기
AI에게 보낸 프롬프트
방금 만든 페이지에 두 섹션만 더 붙여줘. 하나는 내가 많이 본 감독 Top 5, 다른 하나는 별점 4.5 이상 영화 카드. 카드에는 제목, 연도, 내가 준 별점만 보여줘. 없는 값은 억지로 채우지 말고 빈칸 대신 짧은 안내 문구를 넣어줘.
왜 이렇게 시켰나: Letterboxd 영화 취향 리포트는 숫자만 있으면 재미가 덜하다. 영화 제목 카드가 떠야 캡처해서 보내기 좋다.
이렇게 나오면 OK: 아래쪽 카드 구역에서 아는 영화 제목이 몇 개 보이면 된다. 그 순간부터 좀 웃김. 내 취향이 생각보다 꽤 뻔해서.
⚠여기서 이렇게 하면 안 돼요: 없는 감독 이름을 추측해서 넣게 두면 안 된다. CSV에 없는 건 비워야 덜 이상하다.
3
말투랑 색만 정리하기
AI에게 보낸 프롬프트
색을 더 과장하지 말고 검정, 회색, 흰색 위주로 정리해줘. 상단 제목 아래에 한 줄 요약도 넣어줘. 예시는 이런 느낌이야: 나는 스릴러를 자주 보고 2019년 이후 영화에 별점을 후하게 줬다. 이 요약은 CSV 숫자만 보고 짧게 써.
왜 이렇게 시켰나: AI가 이 단계에서 보라색 그라데이션 파티를 열 때가 있다. 담백하게 묶어야 오래 봐도 안 질린다.
이렇게 나오면 OK: 첫 화면만 캡처해도 Letterboxd 영화 취향 리포트라는 말이 납득되면 된다.
⚠여기서 이렇게 하면 안 돼요: 요약 문장을 감성 카피처럼 돌리면 금방 AI 냄새 난다. 숫자 기반 한 줄만 남겨라.
4
마지막 검수 돌리기
AI에게 보낸 프롬프트
지금 결과를 스스로 검수해줘. 1) 모바일에서 카드가 깨지는지, 2) CSV 열 이름이 달라도 최소한 에러 문구가 보이는지, 3) 숫자 합계가 화면마다 다르게 보이지 않는지 확인하고 필요한 수정만 해줘. 수정 후 내가 확인할 체크리스트 3줄도 적어줘.
왜 이렇게 시켰나: Claude Code 문서에 있는 Review code 흐름이 여기서 꽤 쓸 만하다. 내가 일일이 코드를 읽는 시간을 줄여준다.
이렇게 나오면 OK: Preview에서 휴대폰 폭으로 줄였을 때 카드가 한 줄씩 내려가고, 오류가 나도 빈 화면이 안 뜨면 끝이다.
⚠여기서 이렇게 하면 안 돼요: 전체를 새로 만들라고 하면 멀쩡한 부분까지 흔들린다. 검수는 수정 범위를 좁게 줘야 한다.
여기서 막히면
1. 현상: 그래프가 아예 비어 있고 숫자 카드만 뜬다. 원인: Letterboxd CSV 열 이름이 영어 그대로인데 Claude가 다른 헤더를 상상한 경우가 많다. 해결: `watched.csv의 실제 헤더를 먼저 출력하고 그 헤더 기준으로 다시 연결해줘`라고 한 줄 더 보내면 된다. 헤더를 눈으로 한 번 보고 다시 붙이면 금방 살아난다.
2. 현상: 영화 제목은 보이는데 별점이 전부 0이나 빈칸으로 나온다. 원인: 별점 열이 문자열인데 숫자로 바꾸는 줄이 빠졌을 가능성이 크다. 해결: `별점 열을 숫자로 바꾸고 변환 실패한 행 수를 콘솔에 표시해줘`를 붙여라. 몇 개가 빠졌는지 보여야 나중에 결과를 믿을 수 있다.
3. 현상: 첫 화면은 예쁜데 모바일에서 카드가 옆으로 잘린다. 원인: 카드 너비를 픽셀로 박아둔 경우다. 해결: `카드 최소 너비만 남기고 나머지는 grid와 wrap으로 바꿔줘`라고 시키면 된다. Preview 폭을 직접 줄여보면 바로 확인된다.
다음에 하나만 더 붙여보자
한 걸음 더
다음엔 이 Letterboxd 영화 취향 리포트에 포스터 이미지랑 공유용 한 장 캡처 버튼만 붙여보자. 그때부터는 혼자 보는 기록이 아니라 친구한테 바로 보내는 결과물이 된다.
