한줄 요약
가족 5명의 도서관 대출/예약 현황을 매번 로그인해서 확인하던 불편함을, Claude Code와 함께 모바일 웹앱으로 해결했습니다.
이런 분들께 도움돼요
가족 여러 명의 도서관 계정을 관리하시는 분
Vercel 무료 플랜에서 Puppeteer 스크래핑을 시도하시는 분
AI와 협업할 때 "방향은 내가, 구현은 AI가"라는 역할 분담이 궁금하신 분
소개: 시도하고자 했던 것과 그 이유
문제 상황
가족 5명이 각자 도서관 앱에 로그인해서 반납일을 확인하는 게 너무 번거로웠습니다. 특히 아이들 책은 부모가 대신 확인해야 하는데, 매번 5개 계정을 왔다갔다 하기가 힘들었어요.
"5명 책을 한눈에 볼 수 있으면 좋겠다"는 생각을 계속 하고 있었습니다.
목표
한 화면에서 가족 5명의 대출/예약/책나르샤 현황을 한눈에 보기
반납일 임박한 책은 빨간색으로 강조해서 놓치지 않기
모바일에서 편하게 확인할 수 있는 웹앱
진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?
사용한 도구
Claude Code (CLI 환경에서 코딩 협업)
Next.js 16 + TypeScript + Tailwind CSS
Puppeteer (도서관 사이트 스크래핑)
Vercel (무료 플랜 배포)
AI와 협업한 과정
1. Vercel 60초 타임아웃 문제
Vercel 무료 플랜은 API 실행 시간이 60초로 제한됩니다. 5명을 한 번에 조회하면 타임아웃이 걸렸어요.
Claude는 계속 "안 된다"는 진단만 했지만, 저는 안티그래비티에서 비슷한 프로젝트를 해본 경험이 있어서 방법이 있다는 걸 알고 있었습니다.
제가 "1명씩 순차 조회하는 API로 분리하자"고 방향을 제안했고, Claude가 빠르게 구현해줬어요.
기존: /api/status (5명 전체 조회) → 타임아웃
변경: /api/member/1, /api/member/2, ... (1명씩 조회) → 성공
배운 점: AI가 모든 걸 해결해주진 않습니다. 결국 방향은 내가 잡고, AI는 빠르게 구현해주는 역할이었어요.
2. 도서관 사이트 봇 차단 문제
로그인이 자꾸 실패했습니다. 아이디/비밀번호는 맞는데 로그인 페이지에서 안 넘어가는 거예요.
Claude가 "User-Agent 문제일 수 있다"고 진단하고, 모바일 Safari로 위장하는 코드를 추가했더니 바로 해결됐습니다.
await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15');
3. 환경변수 느낌표(!) 이스케이프 문제
비밀번호에 !가 포함되어 있었는데, Vercel CLI로 환경변수를 설정할 때 자꾸 \!로 저장되는 문제가 있었어요.
쉘 이스케이프 문제라는 걸 찾아내고, heredoc을 사용해서 해결했습니다.
cat > /tmp/pw.txt << 'EOF'
비밀번호!
EOF
cat /tmp/pw.txt | vercel env add USER_1_PW production
결과와 배운 점
결과물
https://seocho-lib2.vercel.app