이 게시물은 "Riley Brown" YouTube 채널에 업로드된 "We Made Claude Code Build Lovable in 75 Minutes (With No Code)" 비디오의 심층 요약입니다. 이 영상에서는 AI 코딩 전문가 칸 장(Khan Zang)이 클로드 코드(Claude Code)를 사용하여 '러버블(Lovable)' 웹사이트 클론을 구축하는 과정을 상세히 보여주며, 무코드(No Code) 개발의 잠재력과 현재 직면한 과제를 탐구합니다.
**클로드 코드의 이해: 터미널 기반의 코딩 전문가**
많은 사람들이 클로드 코드가 코드 생성 도구인 커서(Cursor)보다 뛰어나다고 생각하며, 이 영상은 그러한 클로드 코드의 실제 성능을 시험하기 위해 기획되었습니다. 클로드 코드는 앤트로픽(Anthropic)이 출시한 소프트웨어 도구로, **명령줄 인터페이스(CLI), 즉 터미널 내에서 작동하는 것이 특징**이라고 영상에서 설명합니다. 이는 커서나 윈드서프(Windsurf)와 유사한 기능을 제공하지만, 터미널 기반이라는 점에서 기술적인 특성이 강화되어 더 강력한 기능을 제공한다고 언급됩니다. 클로드 코드는 **코딩에 특화된 LLM(대규모 언어 모델)으로, 다른 범용 LLM과 달리 오직 코딩 작업에만 집중**한다는 점이 강조됩니다. 개발자는 클로드 코드의 SDK(소프트웨어 개발 키트)를 활용하여 챗GPT(ChatGPT) 래퍼나 레플리케이트(Replicate) 래퍼처럼 클로드 코드 래퍼를 만들 수 있으며, 이를 통해 러버블(Lovable)이나 리플릿(Replit)과 같은 코드 생성 도구를 구축할 수 있다고 설명됩니다. 그러나 클로드 코드의 주된 강점은 코드 작성 능력에 있으므로, **이 SDK를 활용하여 만들 수 있는 제품의 범위는 코드 생성 도구에 한정될 수 있다**고 영상 진행자는 언급합니다.
**러버블 클론 구축의 목표: 클로드 코드 SDK의 활용**
이 프로젝트의 핵심 목표는 클로드 코드 자체를 사용하여 클로드 코드 SDK로 구동되는 러버블 웹사이트의 기본 클론을 만드는 것입니다. 러버블은 "웹사이트를 만드는 웹사이트"라는 개념을 가지고 있으며, 이 프로젝트에서는 **사용자가 앱 아이디어를 입력하면 해당 아이디어에 대한 코드를 생성해주는 기능을 구현**하는 데 중점을 둡니다. 이는 클로드 코드가 직접 작업 공간에 코드를 작성하는 것을 넘어, 우리가 만드는 애플리케이션이 클로드 코드 SDK를 통해 코드를 생성하도록 하는 것을 의미한다고 영상에서 설명합니다.
**개발 환경 설정 및 클로드 코드와의 초기 상호작용**
새로운 프로젝트는 커서 개발 환경에서 시작되며, '러버블 클론'이라는 폴더를 생성하는 것으로 첫 단계가 이루어집니다. 터미널을 통해 클로드 코드를 실행하면, 클로드 코드는 즉시 프로젝트 파일의 이름을 보고 넥스트.js(Next.js) 프로젝트 설정, 타입스크립트(TypeScript) 사용, 랜딩 페이지 구현 등을 제안하며 **매우 적극적인 태도를 보인다**고 묘사됩니다.
이후, 클로드 코드와의 상호작용을 위해 몇 가지 중요한 기능이 소개됩니다:
* **클로드 MD 파일 (# 기호 사용):** 이는 클로드 코드 세션의 **지속적인 메모리(persistent memory)** 역할을 합니다. `I am building a lovable clone but I want to use the claude code SDK`와 같은 내용을 저장할 수 있습니다. 사용자 메모리(user memory)는 모든 클로드 코드 인스턴스에 적용되는 반면, 프로젝트 메모리(project memory)는 현재 프로젝트에만 적용되므로, 이 프로젝트의 목적에 맞는 '러버블 클론 구축'과 같은 정보는 프로젝트 메모리에 저장하는 것이 적절하다고 설명됩니다. 이는 커서의 '커서 규칙'이나 프로젝트의 'README' 파일과 유사한 기능을 한다고 비유됩니다.
* **자동 편집 모드 및 계획 모드 (Shift+Tab):** 이 단축키를 통해 클로드 코드가 코드를 즉시 편집하도록 할지, 아니면 먼저 계획을 세우도록 할지 제어할 수 있습니다. 특히 계획 모드에서는 클로드 코드가 코드를 직접 편집하지 않고, 어떤 작업을 할지에 대한 계획을 제시합니다.
**코드 생성 기능 구현: 핵심 로직 개발**
프로젝트의 초기 단계는 **사용자 프롬프트를 입력받아 클로드 코드를 사용하여 코드를 생성하는 단순한 타입스크립트(TypeScript) 함수를 만드는 것**에 초점을 맞춥니다. 영상 진행자는 백엔드 엔지니어링 및 인프라에 대한 자신의 전문성을 바탕으로, 먼저 백엔드 기능을 개발하는 데 집중하겠다고 밝힙니다.
이 과정에서 중요한 점은 **클로드 코드 SDK가 파일을 읽고 쓰는 데 필요한 적절한 권한을 가져야 한다**는 것입니다. 클로드 코드가 처음 실행될 때 권한을 요청하는 것처럼, SDK를 사용하는 애플리케이션도 동일한 권한을 부여받아야 한다고 영상 진행자는 설명합니다. 클로드 코드는 넥스트 프로젝트 구축, UI 구현 등 다양한 제안을 하지만, 우선 핵심 기능 구현에 집중하기 위해 이러한 제안들을 거절하고 단순한 타입스크립트 함수에 대한 의사 코드(pseudo code)를 요청합니다.
흥미롭게도, 클로드 코드는 자신의 SDK에 대한 지식이 완벽하지 않아 **자신에 대한 정보를 웹에서 다시 검색하는 모습**을 보입니다. 이는 클로드 4 모델이 클로드 코드 구현에 대해 훈련되었을 수 있지만, 구현 세부 사항은 비공개 소스이므로 즉각적인 완벽한 지식을 가지고 있지 않다는 점을 시사한다고 영상 진행자는 추측합니다. 또한, 공개적으로 접근 가능한 온라인 정보를 통해 모델의 행동을 제어할 수 있는 측면도 있다고 설명됩니다.
**첫 번째 테스트: 틱택토(Tic-Tac-Toe) 게임 생성**
클로드 코드가 제공한 의사 코드를 바탕으로, **자동 편집 모드(auto accept edits mode)로 전환하여 틱택토 게임을 HTML로 만들어 달라고 요청**합니다. HTML은 별도의 설정 없이 브라우저에서 바로 열 수 있어 테스트에 적합하다고 판단됩니다.
* **코드 생성 과정:** 클로드 코드는 사용자의 요청을 바탕으로 '오푸스 4(Opus 4)' 모델을 사용하여 틱택토 게임 코드를 생성하기 시작합니다. 이때, 클로드 코드의 시스템 메시지, 어시스턴트 메시지 등이 터미널에 실시간으로 표시되며 코드 생성 과정이 시각적으로 보여집니다.
* **권한 문제 발생 및 디버깅:** 클로드 코드가 성공적으로 코드를 생성했음에도 불구하고, **파일을 쓸 권한이 없다는 오류가 발생**합니다. 영상 진행자는 클로드 코드에게 명시적으로 권한을 부여하라고 지시했음에도 불구하고 이러한 문제가 발생하자, 클로드 코드에게 "명시적으로 권한을 부여했는데도 파일 쓰기 권한이 없다"고 지적하며 자체적으로 문제를 해결하도록 요청합니다.
* **성공적인 틱택토 게임 생성:** 클로드 코드가 권한 문제를 해결한 후, **`tic-tac-toe.html` 파일이 생성되고 성공적으로 실행**됩니다. 플레이어가 실제로 게임을 플레이하며 기능이 제대로 작동함을 확인합니다. 이는 AI를 사용하여 코드를 작성하는 **개념 증명(proof of concept)이 성공적으로 완료되었음을 의미**합니다.
**러버블(Lovable)과 유사하게 만들기 위한 다음 단계 및 과제**
틱택토 게임 생성에 성공한 후, 프로젝트를 실제 러버블 웹사이트처럼 만들기 위한 여러 개선 사항이 논의됩니다.
* **랜딩 페이지 구축:** 현재는 백엔드 기능만 구현되었으므로, **사용자가 프롬프트를 입력할 수 있는 실제 웹사이트 형태의 랜딩 페이지**가 필요하다고 언급됩니다.
* **다양한 코드 생성 능력:** 러버블은 단순한 HTML 스크립트 파일을 넘어 더 복잡한 결과물을 만들 수 있으므로, 클로드 코드 SDK를 통해 **사용자 정의 프롬프트를 기반으로 다양한 애플리케이션을 생성**할 수 있도록 확장해야 합니다.
* **UI/프론트엔드 개발:** 러버블의 **소프트한 그라데이션, 텍스트 입력 필드, 버튼 등 UI 디자인을 모방**하는 작업에 착수합니다. 클로드 코드에 러버블 웹사이트의 스크린샷을 제공하여 이미지 소화 능력을 활용하고, 이를 바탕으로 UI를 구축하도록 지시합니다. 클로드 코드는 넥스트 프로젝트를 기본으로 선호하며, 빠르게 웹사이트의 기본 구조를 생성하지만, 초기에는 그라데이션이나 로고 등 세부적인 디자인 요소가 반영되지 않는 문제가 발생합니다. 영상 진행자는 **그라데이션 색상(오렌지 원형에서 핑크, 검은색으로 이어지는)을 구체적으로 설명**하고, **입력 영역의 기본 높이를 3줄로 늘리고, 생성 버튼을 화살표 아이콘으로 변경**하는 등 상세한 UI 개선 요청을 반복적으로 합니다.
**프론트엔드와 백엔드 연결: 코드 생성 에이전트 통합**
다음 단계는 이전에 만들었던 코드 생성 함수와 새로 구축한 프론트엔드를 연결하는 것입니다. 프론트엔드의 텍스트 입력 필드에 입력된 프롬프트가 클로드 코드 SDK 함수로 전송되어 코드를 생성하고, 그 결과를 웹사이트에 표시하는 것이 목표입니다.
* **API 호출 및 메시지 표시:** 클로드 코드에게 프론트엔드가 API를 호출하고 메시지 표시 컴포넌트를 추가하도록 지시합니다. 이는 **챗 인터페이스와 웹사이트 미리보기가 분리된 러버블과 같은 형태**를 목표로 합니다.
* **개발 서버 실행 문제:** 클로드 코드는 자신이 직접 개발 서버를 실행하려 하지만, **터미널 세션이 짧아 매번 다시 실행해야 하는 비효율성**이 발생합니다. 이는 클로드 코드의 장기 메모리(long-term memory)에 "항상 개발 서버 실행 방법을 알려주고 직접 실행하지 말 것"이라는 규칙을 추가하여 해결합니다.
이후 커넥트 4(Connect 4) 게임을 생성하도록 테스트한 결과, 클로드 코드는 성공적으로 게임 페이지를 생성했지만, **생성된 코드가 메인 코드베이스 내부에 새 파일로 추가되는 문제점**을 발견합니다. 이는 보안 및 확장성 측면에서 바람직하지 않으며, 악의적인 코드나 불필요한 파일이 웹사이트에 직접 포함될 수 있다는 우려가 제기됩니다. 또한, 코드 생성 과정의 로그가 실시간으로 표시되지 않고 전체 과정이 완료된 후에야 나타나는 문제도 지적됩니다.
**확장성 문제 해결: 격리된 환경(버블) 도입**
프로젝트의 가장 큰 과제 중 하나는 **생성된 코드가 현재 웹사이트의 코드베이스를 직접 수정하는 것을 막고, 격리된 환경(isolated environment)에서 코드가 생성되도록 하는 것**입니다. 영상 진행자는 이를 **'버블(bubble)'**에 비유하며, 버블 안에서 발생하는 모든 손상이나 오류가 메인 코드베이스에 영향을 미치지 않도록 격리되어야 한다고 강조합니다. 이는 더 확장 가능하고 제품화하기 쉬운 구조를 만드는 데 필수적입니다.
* **솔루션 탐색:** 로컬에서 도커(Docker) 인스턴스를 사용하여 격리된 환경을 만들거나, E2B나 데이토나(Daytona)와 같은 외부 서비스형 소프트웨어(SaaS) 솔루션을 활용하는 방안이 논의됩니다. 이들은 AI 에이전트가 코드 생성을 실행할 수 있는 **"삽을 파는" 회사들**로 묘사되며, 코드를 격리하고 그 결과를 확인하는 기능을 제공합니다.
* **데이토나(Daytona) 도입:** 영상 진행자는 이전에 사용해본 경험이 없는 데이토나를 사용하여 격리된 환경을 구축하기로 결정합니다. 목표는 **데이토나 샌드박스(sandbox) 내에서 클로드 코드 SDK가 새로운 리액트(React)/넥스트.js 웹사이트를 생성**하도록 하는 것입니다.
**데이토나(Daytona) 통합 및 디버깅 여정**
데이토나 통합 과정은 API 키 설정부터 시작하여, 데이토나 문서를 클로드 코드에게 제공하고 해당 문서에서 필요한 정보를 스스로 찾아내도록 지시합니다. 이 과정에서 **프롬프트 엔지니어링의 중요성**이 강조됩니다. 명확한 최종 목표를 제시하면서도, 현재 집중해야 할 작은 단위의 목표를 명확히 알려주어 AI가 혼란스러워하지 않도록 하는 전략이 효과적이라고 설명됩니다.
* **초기 실패 및 문제점:** 데이토나 샌드박스 시작 실패, 생성된 코드에 대한 **미리보기(preview) 불가** 등 다양한 문제가 발생합니다. 특히, 샌드박스 내부에서 웹사이트가 실행되고 있는 것은 확인되지만, **외부에서 해당 웹사이트를 볼 수 없는 문제(503 서비스 임시 사용 불가 오류 등)**가 지속적으로 발생합니다.
* **문서 탐색 및 해결:** 영상 진행자가 직접 데이토나 문서를 다시 확인한 결과, 클로드 코드가 **`getPreviewLink`라는 핵심 함수를 사용하지 않고 있었다**는 사실을 발견합니다. 이 함수는 샌드박스 내 웹사이트에 접근할 수 있는 URL과 토큰을 편리하게 반환하는 역할을 합니다. 클로드 코드에게 해당 문맥을 제공하자, 클로드 코드는 즉시 수정 스크립트를 생성하고, 이를 통해 **성공적으로 샌드박스 내부의 넥스트.js 프로젝트를 미리 볼 수 있게 됩니다.** 이는 클로드 코드 자체의 지식 부족이나 문맥 관리의 실수로 인한 문제였음이 드러납니다.
* **지속적인 개선 요청:** 샌드박스 내에서 코드 생성 시 **실시간 로그 표시, 사용자 친화적인 메시지, 그리고 생성된 웹사이트를 자동으로 열어주는 기능** 등 사용성 개선을 위한 요청이 계속됩니다.
**성공적인 통합 및 최종 테스트**
이러한 문제 해결 과정을 거쳐, 드디어 **클라우드 상의 격리된 환경에서 버블을 생성하고, 그 안에서 클로드 코드를 통해 코드를 작성하며, 외부에서 그 결과를 미리 볼 수 있는 완전한 파이프라인이 구축**됩니다.
* **스크립트 업데이트:** 클로드 코드에게 더 이상 자체 터미널에서 스크립트를 실행하려 하지 말고, 실행 방법만 알려달라고 지시하며, **데이토나 샌드박스 내에서 클로드 코드 SDK를 사용하여 사용자 정의 웹사이트를 구축하는 스크립트를 완성**합니다. 이 스크립트는 샌드박스 생성, 클로드 코드 설치, 웹사이트 생성, 종속성 설치, 개발 서버 시작, 미리보기 링크 제공 등의 모든 과정을 포함합니다.
* **다양한 웹사이트 생성 테스트:**
* **"Hello World" 화면:** 가장 기본적인 테스트를 통해 샌드박스 내에서 코드 생성이 잘 되는지 확인합니다.
* **이미지 리사이저 웹사이트:** 이미지를 업로드하고 슬라이더를 조절하여 크기를 변경할 수 있는 웹사이트를 생성하도록 요청합니다. 처음에는 일부 디버깅이 필요했지만, 최종적으로 **성공적으로 작동하는 이미지 리사이저 웹사이트가 생성**됩니다. 이 웹사이트는 생성된 코드가 클로드 코드의 로컬 머신이 아닌 격리된 환경에 저장된다는 점에서 큰 의미를 가집니다.
* **바나나 회사 랜딩 페이지:** 간단한 마케팅용 랜딩 페이지를 생성하도록 요청하며, "세계 최고의 바나나"와 같은 구체적인 문구를 포함하여 요청합니다. 클로드 코드는 기본적인 랜딩 페이지 구조와 함께 간단한 텍스트 콘텐츠를 생성합니다.
* **이미지에 테두리를 추가하고 두께, 모서리, 색상을 변경할 수 있는 웹사이트:** 더 복잡한 이미지 편집 기능을 요청하며, 클로드 코드가 이를 성공적으로 구현하여 동적으로 테두리 설정을 변경할 수 있는 웹사이트를 생성합니다.
* **개인 링크 트리 웹사이트:** 최종적으로 러버블의 핵심 기능 중 하나인 "링크 트리"를 목표로, 링크를 업로드하고 이름을 지정하며 세련되고 현대적인 디자인을 가진 개인 링크 트리 웹사이트를 만들어 달라고 요청합니다.
**러버블과의 비교 및 프로젝트 성과**
최종적으로 생성된 링크 트리 웹사이트를 실제 러버블 웹사이트와 비교합니다. 비록 세부적인 디자인이나 고급 기능에서는 차이가 있지만, **단 두 시간 만에 클로드 코드를 통해 러버블과 유사한 기능을 하는 "꽤 훌륭한 클론"을 만들었다는 점**이 강조됩니다. 영상 진행자는 **한 줄의 코드도 직접 작성하지 않고** AI인 클로드 코드와 '바이브 코딩(vibe coding)' 방식으로 소통하여 이 모든 것을 이루어냈다고 설명합니다. 여기서 **'바이브 코딩'은 AI와 협력하여 직관적으로 방향을 제시하고 피드백을 주면서 코드를 만들어나가는 과정을 의미**합니다.
**결론 및 향후 전망**
이 프로젝트를 통해 얻은 주요 교훈은 다음과 같습니다.
* **AI의 문서 검색 능력의 한계:** 클로드 코드가 자체 SDK 문서조차 제대로 읽지 못하여 문제가 발생했던 것처럼, LLM의 문서 검색 및 이해 능력은 아직 개선될 여지가 많습니다. 이 부분이 개선된다면 개발 시간은 크게 단축될 수 있다고 언급됩니다.
* **AI와의 소통 능력의 중요성:** LLM을 올바른 방향으로 이끌고, 문제를 발견했을 때 적절한 문맥과 피드백을 제공하여 코스 수정을 지시하는 **인간의 '항상 지속될 기술(persistent skill)'**이 매우 중요하다고 강조됩니다.
* **격리된 환경의 중요성:** AI가 생성하는 코드를 메인 시스템에 직접 쓰는 것이 아닌, 격리된 샌드박스에서 실행하고 그 결과를 통합하는 시스템 아키텍처의 중요성이 다시 한번 확인됩니다.
이 영상은 클로드 코드와 같은 AI 코딩 도구의 놀라운 잠재력과 함께, 현재 기술이 직면하고 있는 실질적인 도전 과제, 그리고 이러한 도구를 효과적으로 활용하기 위한 인간의 역할에 대한 귀중한 통찰을 제공합니다.