Claude Code와 Cowork를 활용한 3D AI 채용 지도 구축기

실용적 조언

UI 수정 시 말로 설명하기보다 스크린샷을 찍어 에이전트에게 전달하면 훨씬 정확한 수정이 가능하다.
프로젝트 시작 전 Supabase와 Vercel 같은 클라우드 기반 인프라를 먼저 설정하여 에이전트가 직접 배포하게 하라.
에이전트가 PRD 문서를 직접 업데이트하게 하여 개발 과정에서의 설계 변경 사항을 항상 기록하라.

섹션별 상세

Claude Cowork를 활용하여 1,802개 기업의 리스트를 확보하고 15,352개의 채용 공고를 수집하는 데이터 파이프라인을 구축했다. python-jobspy 라이브러리를 사용하여 LinkedIn과 Indeed에서 데이터를 추출하고, Nominatim API를 통해 4,682개 사무소 위치를 100% 성공률로 지오코딩했다. 수집된 데이터는 Supabase에 21,000개 이상의 행으로 저장되었으며, 이 모든 과정에서 에이전트가 스크립트 작성과 실행을 주도했다.

sql

CREATE TABLE companies (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  name TEXT NOT NULL,
  industry TEXT,
  tier TEXT
);

CREATE TABLE offices (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  company_id UUID REFERENCES companies(id),
  location TEXT,
  latitude FLOAT,
  longitude FLOAT
);

CREATE TABLE jobs (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  office_id UUID REFERENCES offices(id),
  title TEXT,
  type TEXT,
  posted_at TIMESTAMP
);

Claude Cowork가 생성한 Supabase용 데이터베이스 스키마 예시

프로젝트 초기 Three.js를 사용하려던 계획을 Claude Code의 제안에 따라 CesiumJS와 Google Photorealistic 3D Tiles 조합으로 변경했다. 에이전트는 기존 라이브러리의 한계를 분석하고 더 높은 품질의 3D 구현이 가능한 대안을 제시하며 기술 스택 결정을 주도했다. 이를 통해 실제 지형과 건물이 정밀하게 묘사된 3D 글로브를 구현했으며, 도시별 클러스터링 알고리즘을 적용해 데이터 시각화의 가독성을 높였다.

CesiumJS와 Google 3D Tiles를 사용하여 구현된 AI 채용 정보 시각화 글로브의 실행 화면이다. — ScreenshotClaude Code를 통해 구축된 최종 결과물의 UI를 보여준다. 왼쪽에는 기업 리스트(TARGETS)가, 오른쪽에는 특정 사무소의 상세 채용 정보(SITE DETAIL)가 표시되며, 지도상에는 사무소 위치가 빛나는 수직선으로 시각화되어 데이터 밀도를 직관적으로 파악할 수 있게 한다.

스크린샷을 활용한 시각적 피드백 루프가 QA 및 반복 개선의 핵심 동력으로 작용했다. 작성자가 UI의 문제점을 캡처해 전달하면 Claude Code가 이를 분석하여 코드를 수정하고 Vercel에 자동 배포하는 과정을 반복했다. 특히 글로우 효과가 적용된 폴리라인의 너비를 4px에서 16px 사이에서 6차례나 미세 조정하는 과정이 코드 수정 없이 대화와 이미지 공유만으로 완료됐다.

에이전트가 프로젝트의 단일 진실 공급원(SOT)인 PRD 문서를 실시간으로 업데이트하며 일관성을 유지했다. 기술 스택 변경이나 새로운 기능 추가 시 frontend.md, logic.md 등의 문서를 즉시 갱신하여 배포된 사이트와 문서 내용이 항상 일치하도록 관리했다. 이는 복잡한 에이전트 워크플로에서 컨텍스트 손실을 방지하고 비개발자 기획자가 전체 구조를 파악하는 데 결정적인 역할을 했다.

용어 해설

코딩 에이전트(Coding Agent): — 사용자의 자연어 지시를 받아 스스로 코드를 작성, 수정, 실행 및 배포까지 수행하는 자율형 AI 도구이다. 단순한 코드 완성을 넘어 터미널 제어, 파일 시스템 접근, 외부 API 연동 등 소프트웨어 개발 전 과정을 자동화하여 개발 생산성을 극대화한다.
모델 컨텍스트 프로토콜(Model Context Protocol (MCP)): — AI 모델이 로컬 파일, 데이터베이스, 터미널 등 외부 도구 및 데이터 소스와 안전하게 상호작용할 수 있도록 돕는 개방형 표준 프로토콜이다. 이를 통해 AI 에이전트는 로컬 환경의 리소스를 직접 제어하며 복잡한 작업을 수행할 수 있다.
지오코딩(Geocoding): — 주소나 지명과 같은 텍스트 정보를 위도와 경도라는 숫자 좌표로 변환하는 기술이다. 지도 기반 서비스에서 특정 위치를 정확히 표시하기 위해 필수적이며, 데이터 시각화 및 공간 분석의 기초가 된다.
사진 측량(Photogrammetry): — 여러 각도에서 촬영한 2D 사진을 분석하여 3D 모델이나 지형 데이터를 생성하는 기술이다. Google Photorealistic 3D Tiles와 같은 서비스에서 실제 도시를 정밀한 3D 그래픽으로 재현하는 데 사용된다.

언급된 도구

Claude Code추천

자율 코딩 및 터미널 제어, 앱 구축

CesiumJS추천

3D 글로브 및 지형 시각화 라이브러리

Supabase추천

백엔드 데이터베이스 및 API 관리

Vercel추천

프론트엔드 호스팅 및 자동 배포

언급된 리소스

DemoAI Jobs Globe