Claude Code로 AniList 신작 애니 브리핑 페이지 5분 만에 만들기
신작 찾느라 탭만 늘어날 때
신작 시즌이 시작되면 보는 흐름이 비슷합니다. 앱을 몇 개 열고 제목을 확인하고, 언제 공개되는지 다시 보고, 장르까지 따로 눌러봐야 합니다. 오늘 만드는 화면은 그 반복을 줄이는 쪽에 가깝습니다. Claude Code로 한 파일짜리 보드를 만들고, 이번 시즌 작품 카드와 내가 찜한 작품만 위로 모아보면 매일 확인할 정보가 한곳에 붙습니다.
이 글은 개발을 거의 안 해본 사람 기준으로 잡았습니다. 프레임워크부터 세팅하는 방식이 아니라 index.html 하나로 시작합니다. 브라우저 탭 하나에 카드가 먼저 뜨고, 그다음에 데이터와 필터를 얹는 흐름이라 어디가 바뀌는지 따라가기 쉽습니다. 결과물도 분명합니다. 오늘 볼 작품을 빠르게 고르는 개인 시즌 보드 하나를 손에 넣는 겁니다.
오늘 쓰는 조합은 세 가지입니다
도구는 Claude Code 하나로 묶고, 규칙은 CLAUDE.md에 적고, 반복 갱신은 /loop로 맡깁니다. 여기에 AniList GraphQL API를 붙이면 시즌 작품 목록이 카드로 들어옵니다. 숫자는 복잡하게 잡지 않아도 됩니다. 카드 6개, 제목 18자 안쪽, 설명 한 줄 반 정도, 자동 갱신은 12시간 간격. 이 정도만 고정해도 화면이 꽤 안정적으로 정리됩니다.
/loop는 Claude Code v2.1.72 이상에서 동작하니 claude --version으로 먼저 확인하면 됩니다. 버전 확인이 끝나면 바로 빈 화면부터 띄우면 됩니다. 첫 단계에서 예쁘게 다듬는 것보다 카드와 그리드가 제대로 보이는지가 더 중요합니다.
처음부터 API와 저장 기능까지 한 번에 붙이면 문제가 생겼을 때 원인을 찾기 어렵습니다. 그래서 껍데기부터 띄우는 편이 훨씬 낫습니다. 카드 6개가 먼저 보이면 이후에 작품 정보가 들어와도 레이아웃을 다시 뒤엎을 일이 줄어듭니다.
이 단계의 목표는 단순합니다. 제목 하나, 카드 묶음 하나, 모바일에서도 무너지지 않는 그리드 하나. 이 세 가지만 잡히면 초보자도 다음 단계에서 무슨 변화가 생겼는지 바로 눈으로 확인할 수 있습니다.
여기서 CLAUDE.md가 하는 일은 취향 메모에 가깝습니다. 카드 제목이 갑자기 길어지거나 소개 문장이 광고처럼 튀는 걸 막아줍니다. 화면은 작은데 문장 길이가 계속 흔들리면 보기 피곤해집니다. 그래서 말투를 먼저 숫자로 묶어두는 게 편합니다.
이 규칙은 나중에도 도움이 됩니다. 작품이 바뀌어도 카드 길이가 비슷하게 유지되고, 장르나 공개 시점 같은 정보가 더 눈에 잘 들어옵니다. 개인용 보드일수록 이런 자잘한 통일감이 오래 씁니다.
이제 정적 카드에 실제 작품 정보를 넣습니다. 여기서 핵심은 실패했을 때 화면을 비워두지 않는 겁니다. 응답이 늦거나 목록을 못 받아오면 가짜 카드라도 다시 보여주게 해두면 레이아웃과 문구 규칙은 계속 유지됩니다. 처음 만드는 사람에게는 이 fallback이 생각보다 큽니다. 화면이 통째로 비면 어디부터 손대야 할지 막막해지기 쉽기 때문입니다.
AniList에서 제목, 공개 시점, 장르 두 개, 짧은 설명만 가져오게 한 이유도 분명합니다. 정보가 너무 많으면 한눈에 볼 수 있는 장점이 사라집니다. 신작을 골라보는 화면이라면 카드 한 장에서 바로 판단할 정도만 남기는 편이 낫습니다.
이 단계부터 화면이 정보 모음에서 개인 보드로 바뀝니다. 장르 버튼은 빠르게 걸러보는 용도고, 오늘 공개 체크박스는 지금 볼 작품만 추리는 용도입니다. 여기에 별표를 붙이면 자주 보는 작품이 위로 정리돼서 시즌 목록 전체를 다시 훑지 않아도 됩니다.
localStorage를 붙여두는 이유도 단순합니다. 브라우저를 닫았다 다시 열어도 선택이 남아야 다음날 다시 쓸 수 있습니다. 복잡한 로그인이나 DB 없이도 개인용 즐겨찾기 느낌을 만들 수 있어서 초반 결과물로 잘 맞습니다.
여기까지 오면 처음 5분은 화면 만들기, 다음 5분은 갱신 습관 붙이기로 넘어갑니다. /loop 12h를 걸어두면 아침이나 저녁에 보드를 열었을 때 목록이 다시 정리된 상태로 남아 있습니다. 수정 대상도 index.html 하나로 묶여 있어서 파일이 여기저기 흩어지지 않습니다.
한 파일 구조가 좋은 이유는 초보자 기준에서 분명합니다. 나중에 다시 열어봐도 어디가 바뀌는지 바로 찾을 수 있고, 프롬프트를 조금 바꿔도 영향 범위를 짐작하기 쉽습니다. 오늘 글의 핵심도 여기에 있습니다. 큰 구조보다 한 파일 안에서 결과를 빨리 확인하는 흐름입니다.
중간에 손이 멈추는 구간 정리
카드가 비어 있고 콘솔에 429 비슷한 문구가 보이면 요청 간격을 먼저 넓히면 됩니다. 새로고침을 반복하는 대신 /loop 간격을 12시간이나 6시간으로 두는 편이 관리하기 편합니다. 자주 확인하는 습관보다 천천히 갱신되게 만드는 쪽이 부담이 적습니다.
카드 문구가 길어지면 CLAUDE.md 규칙을 더 짧게 다시 적으면 됩니다. 예를 들어 설명을 40자 안쪽으로 제한하면 이후 수정에서도 톤이 다시 정리됩니다. 숫자로 적는 규칙이 이런 상황에서 특히 강합니다.
모바일에서 카드가 빽빽하면 반응형 조건을 문장으로 더 분명하게 주면 됩니다. 모바일 1열, 태블릿 2열, 데스크톱 3열처럼 적어두면 보이는 문제가 빠르게 줄어듭니다. CSS를 처음부터 길게 손보는 것보다, 화면에서 거슬리는 지점을 한 줄 요구사항으로 바꾸는 편이 훨씬 따라가기 쉽습니다.
이 보드 다음에 붙이기 좋은 확장
여기까지 만들면 시즌표를 찾는 시간이 줄어듭니다. 다음 확장은 어렵지 않습니다. 별표한 작품만 따로 모아 텔레그램으로 보내거나, 공개 요일 기준으로 상단 정렬만 더 붙여도 충분합니다. 이미 카드 구조와 갱신 흐름이 있으니 그다음은 읽어온 정보를 어디에 다시 보여줄지만 정하면 됩니다.
핵심은 거창한 서비스가 아닙니다. Claude Code로 시작해서 AniList 목록을 한 화면으로 모으고, CLAUDE.md로 문장 길이를 붙잡고, /loop 12h로 손이 덜 가게 만드는 것. 이 정도면 개인용 시즌 보드로는 꽤 쓸 만한 출발점이 됩니다.
이런 글도 있어요
관련 검색어
- 🔍 Claude Code 사용법
- 🔍 Claude Code 비교
- 🔍 AniList 신작 애니 브리핑 페이지 사용법
- 🔍 AniList 신작 애니 브리핑 페이지 비교
- 🔍 AniList API 사용법
- 🔍 AniList API 비교
