챕터별 상세
00:00
실험의 영감과 목표 설정
자연 선택과 진화의 원리를 소프트웨어 개발에 적용하는 'Vibe Coding' 개념에서 영감을 얻어 실험을 시작했다. Claude Code에게 특정 이미지를 보여주고 브라우저 기반의 JS Paint에서 이를 똑같이 그리도록 하는 목표를 설정했다. 에이전트는 스크린샷을 찍어 원본과 비교하며 유사도가 95%에 도달할 때까지 자율적으로 작업을 반복한다.
Vibe Coding은 엄격한 설계 대신 LLM이 반복적인 시도와 테스트를 통해 최적의 결과물을 찾아가는 방식을 의미한다.
03:38
Claude Code 환경 및 도구 구성
Claude Code가 브라우저를 제어할 수 있도록 Chrome DevTools Protocol(CDP) 기반의 자동화 도구를 설정했다. 에이전트는 별도의 사전 정의된 기술(Skill) 없이 백지 상태에서 시작하여 필요한 스크립트를 직접 작성한다. Node.js 환경에서 CDP를 통해 마우스 클릭, 드래그, 좌표 계산 등의 저수준 이벤트를 제어하는 방식을 채택했다.
CDP(Chrome DevTools Protocol)는 크롬 브라우저의 내부 기능을 외부에서 제어하기 위한 프로토콜이다.
05:17
낚시꾼 그림 복제 실험
사람이 그린 간단한 낚시꾼 그림을 원본으로 제공하고 Claude Code가 이를 복제하도록 명령했다. 에이전트는 원본 이미지의 색상과 형태를 분석한 뒤 CDP를 제어하는 JavaScript 코드를 생성하여 캔버스에 선을 긋고 색을 채웠다. 첫 시도에서 형태가 완벽하지 않자 스스로 코드를 수정하며 낚싯대의 곡선과 인물의 형태를 개선하는 과정을 보여주었다.
07:59
텍스트 렌더링 및 스타일 변환 테스트
'AI AGENT'라는 텍스트가 포함된 이미지를 복제하는 실험을 진행했다. 에이전트는 텍스트의 폰트 스타일과 색상을 파악하여 폴리곤 경로(Polygon path) 방식으로 글자를 그려냈다. 특히 거꾸로 그려진 'N'자를 인식하고 다음 반복에서 이를 수정하는 등 시각적 오류를 스스로 교정하는 능력을 입증했다.
폴리곤 경로는 여러 개의 점을 연결하여 복잡한 다각형 형태를 만드는 방식이다.
10:11
고급 회화 기법 및 초상화 시연
단순 복제를 넘어 '유화(Oil painting)'나 '연필 초상화' 같은 특정 예술적 스타일을 구현하도록 요청했다. Claude Code는 'draw-on-jspaint'라는 새로운 기술을 학습하여 복잡한 브러시 스트로크와 명암 처리를 수행했다. 밤하늘의 별, 인물의 머리카락, 강아지의 털 질감 등을 표현하기 위해 수천 줄의 좌표 데이터를 생성하여 정교한 그림을 완성했다.
에이전트가 특정 작업 패턴을 'Skill'로 저장하면 향후 유사한 작업에서 이를 재사용할 수 있다.
언급된 리소스
DemoJS Paint
GitHubClaude Code
AI 분석 전체 내용 보기
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
원문 발행 2026. 03. 17.수집 2026. 03. 17.출처 타입 YOUTUBE
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.
