Claude Code를 활용해 30분 만에 완성한 Excalidraw 클론 프로젝트

실용적 조언

복잡한 프로젝트 시작 전 Claude Code에게 전체적인 구현 계획(Plan)을 파일로 생성해달라고 요청하여 가이드로 삼을 것
실시간 협업 기능 구현 시 Liveblocks와 같은 매니지드 서비스를 활용하여 개발 시간을 단축할 것

섹션별 상세

Claude Code를 활용하여 프로젝트의 전체적인 개발 계획을 파일 형태로 생성했다. AI 에이전트가 구현해야 할 기능의 우선순위와 단계를 논리적으로 설계했으며, 개발자는 이 가이드를 따라 작업을 수행했다. 영상 속에는 Claude Code가 제안한 단계별 구현 로직이 담긴 파일의 모습이 구체적으로 나타나 있다. 이는 AI가 단순한 코드 조각 생성을 넘어 복잡한 애플리케이션의 전체 구조를 설계하는 아키텍트 역할을 수행할 수 있음을 보여준다.

Next.js, Liveblocks, Upstash, Vercel로 구성된 현대적인 기술 스택을 사용하여 30분 만에 Excalidraw 클론을 완성했다. 실시간 협업 기능을 위해 Liveblocks를 도입하고 데이터 관리는 Upstash를 활용하여 인프라 구축 시간을 최소화했다. GitHub 저장소와 Vercel 데모 링크를 통해 실제 작동하는 결과물을 누구나 확인할 수 있도록 공개했다. 고도화된 관리형 서비스와 AI 에이전트의 결합이 개발 속도를 극한으로 끌어올릴 수 있음을 입증한 사례이다.

OBS 스튜디오를 통해 녹화된 Excalidraw 클론 앱의 데모 화면과 개발자의 모습 — Screenshot실제 구현된 웹 애플리케이션의 UI와 실시간 드로잉 기능을 보여준다. Claude Code로 생성된 계획에 따라 구현된 결과물을 시각적으로 증명하며, 개발 과정이 담긴 영상의 일부임을 알 수 있다.

여러 번의 프롬프트 수정 과정 없이 한 번에 결과물을 도출하는 'one-shot' 방식의 구현에 성공했다. Claude Code가 생성한 초기 계획의 정확도가 매우 높아 추가적인 디버깅이나 로직 수정 없이도 기능이 정상 작동했다. 실제 데모에서는 선 그리기, 색상 변경, 실시간 동기화 등 핵심 기능이 매끄럽게 구현된 것을 확인할 수 있다. 이는 최신 코딩 에이전트의 추론 및 계획 능력이 실무 프로젝트를 즉시 수행할 수 있는 수준에 도달했음을 의미한다.

용어 해설

바이브 코딩(Vibecoding): — AI 에이전트에게 고수준의 의도를 전달하여 코드를 생성하고 수정하는 개발 방식이다. 구체적인 문법보다는 해결하려는 문제의 맥락과 방향성에 집중하며, 개발자의 생산성을 극대화하는 새로운 패러다임으로 주목받고 있다.
원샷(One-shot): — AI 모델에게 단 한 번의 프롬프트를 입력하여 원하는 결과물을 완벽하게 얻어내는 방식이다. 여러 차례의 수정 없이도 정확한 코드를 생성하는 모델의 능력을 평가하는 지표로 쓰이며, 복잡한 프로젝트를 한 번에 성공시키는 것은 높은 추론 능력을 요구한다.
코딩 에이전트(Coding Agent): — 단순한 코드 완성을 넘어 프로젝트의 계획 수립, 파일 생성, 실행 및 디버깅을 자율적으로 수행하는 AI 도구이다. Claude Code나 Devin 등이 대표적이며, 소프트웨어 개발 생명주기 전반에 걸쳐 자동화를 실현하여 개발자의 워크플로우를 보조한다.

언급된 도구

Next.js추천

웹 애플리케이션 프레임워크

Liveblocks추천

실시간 협업 기능 구현

Upstash추천

서버리스 데이터베이스/캐싱

Claude Code추천

AI 코딩 에이전트 및 계획 수립

언급된 리소스

DemoExcalidraw Clone Demo

GitHubGitHub Repository