Claude Code로 실제 웹사이트 'The Crawler Zoo'를 구축하고 운영해 본 후기

난 전문 개발자가 아니다. Claude Code를 써서 'The Crawler Zoo'라는 사이트를 만들었는데, 방문하는 모든 봇을 잡아내서 정체를 파악한 뒤, 실시간 동물원 속 작은 생물처럼 보여주는 사이트다. 벌써 수십만 명이 다녀갔고, 작은 vps 하나로 쌩쌩 돌아간다.

컨셉이랑 디자인 방향, 기본 레이아웃은 내가 잡고, 빡센 작업은 전부 Claude Code한테 시켰다.

대략적인 규모는 이렇다. 커밋 57개, TypeScript 약 11,000줄, 테스트 200개 이상. Hono, SQLite, Docker 컨테이너 하나로 구성했다.

나한테 잘 먹혔던 방법들

• 일단 대화부터 하고, 코딩은 나중에. 큰 기능을 넣을 땐 "아직 코드 짜지 마"라고 하고 같이 계획부터 짠다. 계획부터 세우고 들어간 기능들은 하나같이 깔끔하게 잘 나왔다.
• 기본 규칙 세우기. 모든 작업에 적용되는 규칙 몇 가지를 정해뒀다. IP 주소는 절대 저장 안 함, 봇이 보내는 건 무조건 적대적으로 간주, 봇한테는 광고 절대 안 보여줌. 이 규칙들을 지침에 박아두니까 일일이 잔소리할 필요가 없더라.
• 스스로 검사하게 만들기. 테스트를 돌린 다음, 헤드리스 브라우저로 페이지를 열어서 스크린샷까지 찍어보게 했다. 덕분에 내가 그냥 배포했으면 터졌을 레이아웃 버그들을 미리 다 잡았다.
• 핸드오프 노트 활용. 컨텍스트가 꽉 차면 짧은 요약 파일을 만들게 했다. 새 세션을 시작할 때 그 파일을 먼저 읽게 하면 끊겼던 지점부터 바로 이어서 작업할 수 있다.
• 지루한 작업에도 써먹기. 로그 읽기나 내가 공유할 이미지 생성 같은 귀찮은 일도 다 시켰다.

내가 직접 개입해야 했던 부분들

• 숫자. 한 번은 초안에 옛날 통계를 갖다 쓰더라. 수치는 무조건 직접 확인해야 한다.
• 문구. 차트 하나에 서로 다른 두 가지를 다 'rooms'라고 표기한 적이 있다. AI 눈엔 괜찮아 보였겠지만, 사람들은 헷갈려 하더라.
• 감각. AI는 시키는 대로 다 만들려고 한다. 뭘 안 만들지 결정하는 건 여전히 내 몫이다.

나는 인프라 쪽을 좀 다뤄봐서 호스팅 설정하는 건 별로 어렵지 않았다.

사이트 주소: The Crawler Zoo