AI 도움을 받아 30일 만에 126K 페이지를 인덱싱한 프로그래매틱 SEO 도구 구축기

지난달 저는 Next.js로 만든 무료 애니메이션 메시 그라디언트 생성기인 GradientGen을 출시했습니다. 30일 후, Google은 126,000개 이상의 페이지를 인덱싱했습니다. 제가 솔직하게 말씀드리고 싶은 것은 이 도구를 거의 전적으로 AI의 도움으로 만들었다는 점입니다. 주로 아키텍처 결정, 코드 생성 및 디버깅에는 Claude (Anthropic)를 사용했고, UI 컴포넌트에는 v0.dev (Vercel)을 사용했습니다. 저는 시니어 개발자는 아닙니다. 코드를 이해하고 결정을 내리지만, 대부분은 AI가 작성했습니다. 제가 이 이야기를 공유하는 이유는 '126K 페이지 인덱싱'만큼이나 'AI로 구축했다'는 부분이 흥미롭다고 생각했기 때문입니다. 전체 이야기는 다음과 같습니다.

GradientGen이란 무엇인가요?

GradientGen은 애니메이션 메시 그라디언트, 지형 패턴(topography patterns), 글꼴 조합(font pairings), 색상 팔레트 및 대비 확인기를 생성하는 무료 도구입니다. 모든 색상 조합은 고유한 URL을 생성합니다: /mesh/ff0000-00ff00-0000ff — 빨강, 초록, 파랑 메시 그라디언트 / font-pairing/inter-and-roboto-on-ffffff-and-000000 — 글꼴 조합 미리보기 / topography/ff0000-00ff00/seed123456 — 지형 패턴 각 URL은 실제 CSS 내보내기 기능이 있는 완전히 렌더링된 인터랙티브 페이지입니다. 이 페이지는 사용자가 Google에서 왔는지 여부와 관계없이 유용합니다.

AI를 활용한 저의 개발 과정

저는 프로젝트 전체에 걸쳐 Claude를 주 개발 파트너로 사용했습니다.

단순히 보일러플레이트(boilerplate) 코드를 작성하는 것을 넘어, 모든 것에 사용했습니다. 아키텍처 결정(

누군가 /mesh/ff0000-00ff00-0000ff 에 방문하면 다음과 같은 것을 얻습니다: 상호 작용 가능한 라이브 애니메이션 그라디언트, 실시간 CSS 내보내기, 색상 이름 및 헥스 코드, 탐색을 위한 관련 그라디언트, 팔레트에 대한 문맥적 설명. 이 페이지는 사용자가 Google에서 왔는지 여부와 관계없이 유용합니다. 이것이 제가 모든 페이지에 적용하는 테스트입니다.

URL 구조 색상은 16진수(hexadecimal)이며, 색상 슬롯당 16,777,216가지의 가능한 값이 있습니다. 그라디언트당 2~6개의 색상을 사용하면 조합 공간은 본질적으로 무한합니다: /mesh/[hex1]-[hex2]-[hex3]-[hex4] /topography/[hex1]-[hex2]-[hex3]/seed[number] /font-pairing/[font1]-and-[font2]-on-[bg]-and-[text] /palette/[hex1]-[hex2]-[hex3]-[hex4]-[hex5] /contrast/[hex1]-[hex2] 이 각각은 유효하고, 기능적이며, 고유한 페이지입니다.

30일 만에 126K 페이지를 인덱싱한 방법

1. 대규모 XML 사이트맵 (XML Sitemap at Scale)
Dynamic sitemap with app/sitemap.ts — 전체 색상 공간을 무작위가 아닌 체계적으로 나타내는 신중하게 선택된 색상 조합으로 구성됩니다.

export default function sitemap(): MetadataRoute.Sitemap {
  const urls = generateSitemapUrls()
  return urls.map(url => ({
    url,
    lastModified: new Date(),
    changeFrequency: 'monthly',
    priority: 0.8,
  }))
}

2. 서버 측 내부 링크 (Server-Side Internal Linking)
모든 페이지는 현재 페이지의 색상에서 결정론적으로 생성된 12개의 관련 그라디언트를 표시합니다. 이는 헥스 코드로 시드(seed) 처리되어 동일한 URL이 항상 동일한 관련 링크를 생성하도록 합니다.

이것은 Claude가 제가 도움을 받은 핵심 통찰력이었습니다. 관련 링크는 JavaScript를 실행하지 않고 Google이 볼 수 있도록 서버 측에서 렌더링되어야 합니다. 원래는 마운트(mount) 후에 클라이언트 측에서 생성되었기 때문에, Google이 이를 따라갈 수 없었습니다. // lib/generate-related-links.ts — 서버에서 실행되는 export function generateRelatedLinks ( hexCodes : string []): MatrixLink [] { const rand = pseudoRandomGenerator ( hexCodes . join ( ' - ' )); const links : MatrixLink [] = []; for ( let i = 0 ; i < 12 ; i ++ ) { // 12개의 결정론적 관련 색상 조합 생성 // ... } return links ; } 이렇게 하면 상호 연결된 페이지의 웹이 만들어집니다. Google은 하나를 크롤링하고 12개를 더 발견하며, 각 페이지는 다시 12개를 더 발견합니다. 3. 모든 페이지에 대한 풍부한 고유 메타데이터: No two pages have the same title or description: export async function generateMetadata ({ params }) { const colorNames = hexCodes . map ( hex => getNearestColorName ( # ${ hex } )); const seoName = getProgrammaticSeoName ( # ${ hexCodes [ 0 ]} ); return { title : ${ seoName } Mesh Gradient for # ${ hexCodes [ 0 ]. toUpperCase ()} | GradientGen , description : Create a visually striking ${ seoName } mesh gradient. Blending ${ colorNames . join ( ' , ' )} , ideal for UI/UX, branding, and design. , }; } 4. 빠른 인프라 Google의 크롤링 예산(crawl budget)은 서버 속도에 영향을 받습니다. 제 VPS는 평균 약 106ms로 응답합니다. 트레이드오프: 수백만 개의 파일을 캐싱하는 ISR(Incremental Static Regeneration)은 제 VPS에서 inode 제한에 도달했습니다.

해결책 — Claude가 작성하는 것을 도와준 야간 cron 작업: # 매일 새벽 3시에 ISR 캐시를 삭제합니다 0 3 * * * find /path/to/.next/server/app/ -type f -delete 데이터가 보여주는 것 30일 후 Google에 의해 인덱싱된 126,000개 이상의 페이지 Google Search Console에서 682회 노출 6클릭 (순위는 여전히 낮습니다 — 이는 첫 달에는 정상입니다) 평균 서버 응답 시간 106ms 100% OK (200) 응답 노출을 생성한 검색어: Hex 색상 코드 (#f6e7b2, 6e6708) 글꼴 이름 (monsieur la doulaise, biz udmincho) 브랜드 검색어 (gradientgen) 제가 목표로 했던 정확히 긴 꼬리 키워드들. 작동하지 않은 것 Bing IndexNow 배치 모드 — 모든 URL을 배치를 통해 전송했지만, Microsoft Webmaster가 과도한 부하로 플래그를 지정했습니다. 비활성화했습니다. cacheMaxMemorySize: 0 — 이런 방식으로 ISR 캐시 축적을 방지하려고 했으나, 클라이언트 측 오류를 유발했습니다. Cron 작업이 더 신뢰할 수 있습니다. AI와 함께 구축하는 것에 대한 솔직한 성찰 AI를 이용해 개발하는 것은 전통적인 개발과는 진정으로 다릅니다. 몇 가지 솔직한 관찰: AI가 훌륭한 것: 보일러플레이트 및 반복 코드를 즉시 작성하는 이유를 설명하는 것 제가 알지 못했을 아키텍처 패턴을 제안하는 것 배포 로그에서 암호 같은 오류 메시지를 디버깅하는 것 AI가 어려워하는 것: 많은 파일에 걸친 복잡한 상호 의존성을 추적하는 것 때로는 올바르게 보이는 코드이지만 미묘한 TypeScript 오류를 포함하는 코드를 생성할 수 있는 해결책에 대해 지나치게 자신감을 갖는 것 진정한 기술은 무엇을 물어 알아내는지를 아는 것입니다.

무엇을 만들고 싶은지에 대한 명확한 정신 모델(mental model)을 갖고, 이를 논리적인 조각으로 나누고, AI의 제안이 언제 틀렸는지 아는 것—그것은 여전히 인간의 몫입니다. 저는 'AI로 제작됨(built with AI)'이라는 것이 '누구나 노력 없이 할 수 있다'는 의미라고 생각하지 않습니다. 이것은 실제 제품을 구축하는 장벽이 상당히 낮아졌다는 것을 의미합니다. 그리고 저는 그것이 좋은 일이라고 생각합니다.

다음 단계 (What's Next)

• 색상 쿼리(color queries)에 대한 인덱싱 페이지를 Google이 배치하도록 기다리기
• 디자인 도구 디렉토리(design tool directories)를 통해 백링크 구축하기
• Chordamo 출시 — 음악 코드 진행을 위한 동일한 프로그래매틱 SEO 접근 방식 적용 (12 키 × 8 모드 × 28 장르 × 6 코드 옵션 = 16,128개의 고유 페이지)

질문 (Questions)
어떤 기술적 또는 SEO 측면의 질문이든 댓글에서 기꺼이 답변해 드리겠습니다. GradientGen은 계정 등록 없이 완전히 무료입니다.