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

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

핵심 요약

비개발자 출신 CPO가 Claude Code와 Cowork 에이전트를 활용해 15,352개의 AI 채용 정보를 시각화한 3D 인터랙티브 글로브를 구축한 사례이다.

배경

작성자는 전 세계 AI 채용 시장의 현황을 시각적으로 보여주기 위해 1,144개 기업의 데이터를 수집하고, 이를 3D 지도상에 구현하는 프로젝트를 진행했다. 개발자가 아님에도 불구하고 Claude Code와 같은 최신 AI 에이전트 도구들을 활용하여 기획부터 데이터 파이프라인 구축, 프론트엔드 개발 및 배포까지 전 과정을 완수한 경험을 공유했다.

의미 / 영향

이 토론은 AI 에이전트가 단순한 코드 보조 도구를 넘어 제품 기획부터 배포까지 전 과정을 수행하는 '자율 개발자'로 진화했음을 보여준다. 특히 비개발 직군이 기술적 세부 사항에 매몰되지 않고 제품의 비전과 사용자 경험에 집중할 수 있는 환경이 조성되었으며, 이는 향후 소프트웨어 개발 패러다임이 '작성'에서 '지시 및 검토'로 완전히 전환될 것임을 시사한다.

커뮤니티 반응

에이전트를 활용한 실제 프로덕션 수준의 결과물에 대해 매우 긍정적이며, 특히 비개발자가 복잡한 3D 시각화 도구를 다루었다는 점에 놀라움을 표하고 있습니다.

주요 논점

01찬성다수

AI 에이전트가 개발의 진입장벽을 낮추어 기획 중심의 개발 시대를 열고 있다.

02중립소수

결과물은 훌륭하지만, 복잡한 로직이나 성능 최적화 단계에서도 에이전트가 동일한 효율을 낼 수 있을지는 지켜봐야 한다.

합의점 vs 논쟁점

합의점

시각적 피드백(스크린샷)을 통한 에이전트와의 소통이 UI 개발 효율을 극대화한다.
Claude Code의 터미널 제어 및 배포 자동화 기능이 실무에서 매우 강력한 도구로 작용한다.

논쟁점

에이전트가 생성한 코드의 장기적인 유지보수성 및 기술 부채 관리 문제.
에이전트 사용 시 발생하는 토큰 비용과 API 호출 제한에 따른 작업 중단 가능성.

실용적 조언

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 등의 문서를 즉시 갱신하여 배포된 사이트와 문서 내용이 항상 일치하도록 관리했다. 이는 복잡한 에이전트 워크플로에서 컨텍스트 손실을 방지하고 비개발자 기획자가 전체 구조를 파악하는 데 결정적인 역할을 했다.

실무 Takeaway

비개발자도 Claude Code와 같은 에이전트를 통해 기획, DB 설계, 프론트엔드 개발, 배포에 이르는 전체 소프트웨어 생명주기를 주도할 수 있다.
에이전트가 단순히 코드를 짜는 것을 넘어 기술 스택의 적합성을 판단하고 대안을 제시하는 아키텍트 역할을 수행할 수 있음을 확인했다.
스크린샷 기반의 시각적 피드백과 자동 배포 파이프라인의 결합은 UI/UX 개선 속도를 비약적으로 향상시킨다.
성공적인 에이전트 협업을 위해서는 PRD와 같은 구조화된 문서(SOT)를 에이전트가 직접 관리하게 하여 컨텍스트를 동기화하는 것이 중요하다.

언급된 도구

Claude Code추천

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

CesiumJS추천

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

Supabase추천

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

Vercel추천

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

언급된 리소스

DemoAI Jobs Globe

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 Code와 Cowork를 활용한 3D AI 채용 지도 구축기

핵심 요약

배경

의미 / 영향

커뮤니티 반응

주요 논점

합의점 vs 논쟁점

합의점

논쟁점

실용적 조언

섹션별 상세

실무 Takeaway

언급된 도구

언급된 리소스

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

핵심 요약

배경

의미 / 영향

커뮤니티 반응

주요 논점

합의점 vs 논쟁점

합의점

논쟁점

실용적 조언

섹션별 상세

실무 Takeaway

언급된 도구

언급된 리소스

관련 토론

댓글

관련 피드

관련 토론

댓글

관련 피드