AI로 4억 달러짜리 앱을 67분 만에 클론하기 (Trello 복제 실전)

🎯 이 글에서 배우는 것: 코드 한 줄 없이 AI 플랫폼 Emergent로 Trello를 처음부터 배포까지 완성하는 실시간 튜토리얼

📺 원본 영상: Christian Peverelli - WeAreNoCode (19:00)

개요

WeAreNoCode의 Christian Peverelli가 AI 코딩 플랫폼 Emergent를 사용해 Atlassian에 4.25억 달러에 매각된 프로젝트 관리 앱 Trello를 67분 만에 클론합니다. 코드 한 줄 작성하지 않고 프롬프트만으로 프론트엔드, 백엔드, 데이터베이스, 인증, 배포까지 완성하는 전 과정을 실시간으로 보여주며, 대기업 앱을 단순화해서 경쟁하는 전략도 설명합니다.

왜 기존 앱을 클론하는가 - 전략 설명

00:00:00

Christian은 4억 달러짜리 앱을 코드 한 줄 없이 클론하겠다고 선언하며 시작해요. 미친 소리 같지만, 그의 목표는 여러분도 자신만의 앱을 만들 수 있다는 걸 증명하는 거예요. 그리고 '독창적인 아이디어'가 좀 과대평가되어 있다고 말해요.

클론할 앱은 Trello예요. 5천만 명 이상의 활성 사용자를 확보한 후 Atlassian에 4억 2500만 달러에 매각된 프로젝트 관리 도구죠.

"왜 거대 기업과 경쟁하려고 하느냐"는 질문에 대한 그의 전략이 흥미로워요. 기업들이 성장하면서 핵심 기능 위에 계속 기능을 추가해요. 이건 가격 상승과 함께 복잡하고 무거운 소프트웨어를 만들어내죠.

그래서 전략은? 앱을 핵심 기능으로 단순화하고, 경쟁력 있는 가격을 제시하고, 기존 소프트웨어에 불만을 느끼는 사람들을 타겟팅하는 거예요. Calendly가 좋은 예시인데, 다른 앱들이 이미 하는 기능 하나만으로 10억 달러 기업이 됐잖아요.

Emergent 소개 - AI 코딩 플랫폼

00:01:50

이번 빌드에 사용할 도구는 Emergent예요. Y Combinator를 졸업한 AI 코딩 플랫폼인데, 수치가 미쳤어요.

첫 2개월 만에:

• 70만 명 이상의 사용자 확보
• 연간 1000만 달러 매출 달성

Christian은 "이게 우리가 살고 있는 세상이라니 믿기지 않는다"고 감탄해요.

Emergent의 특징은 풀스택이라는 거예요. 프론트엔드(디자인, 버튼 등 시각적 요소)와 백엔드(기능, 데이터베이스, 통합, 인증, 스토리지) 모두를 한 곳에서 만들 수 있어요. 바이브 코딩처럼 쉽게 MVP를 만들 수도 있고, 엔터프라이즈 수준의 앱도 만들 수 있대요.

첫 프롬프트로 기본 UI 생성

00:02:45

보통은 **PRD(제품 요구사항 문서)**를 작성해서 모든 사용자 흐름과 기능, 디자인을 문서화하지만, 유명한 앱을 클론할 때는 이미 공개된 정보가 많아서 간단한 프롬프트만으로도 충분하대요.

그래서 그냥 **"please build a simplified clone of Trello"**라고 입력해요. 끝이에요!

여기서 에이전틱(Agentic) 플랫폼의 개념을 설명하는데요, 플랫폼 안에 여러 에이전트가 있어서 각자 다른 역할을 담당해요:

• 하나는 웹을 검색해서 Trello 정보를 수집
• 다른 하나는 계획을 세움
• 또 다른 하나는 PRD를 작성
• 위에서 감독하는 슈퍼바이저가 지시를 내림

몇 분 후, 기본적인 Trello 보드가 완성돼요! To Do, In Progress, Review, Done 카테고리가 있고, 카드도 있어요. 드래그 앤 드롭도 작동하고, 새 리스트도 추가할 수 있어요. 단 한 번의 프롬프트로요!

백엔드 기능 추가하기

00:05:30

첫 번째 결과물은 멋져 보이지만 대부분 디자인뿐이에요. 이제 백엔드를 구축해야 해요.

Emergent가 추천하는 다음 단계는 "백엔드 개발 진행 - 데이터베이스 영속성을 갖춘 풀스택 앱"이에요. 클릭하면 API 연결 등 전체 백엔드 기능을 구축하기 시작해요.

재미있는 점은 에러가 발생했을 때 Christian이 뭔가 말하기도 전에 AI가 스스로 문제를 파악하고 수정하기 시작했다는 거예요.

Christian이 중요한 개념을 설명해요:

• 프론트엔드: 사용자 경험 구축
• 백엔드: 기능 구축
• 데이터베이스: 데이터 저장
• 인증: 각 계정을 해당 데이터와 연결

작업이 끝나니 카드가 실제로 작동해요! 풀스택 앱이 된 거예요.

카드 기능 세부 추가 - 요소별 접근법

00:07:00

이제 앱을 세부 조정할 차례예요. Christian의 핵심 팁: 요소별로 하나씩, 모든 걸 한꺼번에 해결하려 하지 말고, 중요한 것부터 먼저 수정하세요.

카드부터 시작해요. 프롬프트: "카드에 더 많은 기능을 추가해주세요. 각 카드 생성 시 담당자 지정, 우선순위 레벨, 마감일 등을 설정할 수 있어야 합니다"

여기서 또 하나의 팁! 코드에 직접 접근할 수 있어요. Visual Studio에서 전체 앱 구조를 볼 수 있는데, 프로그래머와 협업할 때 정말 유용하대요.

결과를 확인해보면, 이제 카드에:

• 제목과 설명
• 우선순위 레벨 (Low/Medium/High)
• 마감일 선택
• 멤버 지정
• 카테고리 선택

이 모든 기능이 추가됐어요! Christian은 강조해요: "다음 단계로 넘어가기 전에 이 카드를 완전히 완성하세요."

대시보드 페이지 생성

00:08:30

보드 뷰가 완성됐으니 이제 완전히 새로운 페이지인 대시보드를 만들어요.

대시보드의 역할:

• 보드가 없으면 새 보드 생성
• 기존 보드가 있으면 목록으로 표시
• 보드를 클릭하면 해당 보드 뷰로 이동
• 로그인/회원가입 후 랜딩 페이지

이 모든 걸 하나의 프롬프트에 넣어요. 프로세스를 설명하자면: 한 뷰(또는 탭)의 모든 기능을 완성하면, 다음 탭으로 넘어가서 처음부터 끝까지 완성하는 거예요.

에러가 발생하면? Christian은 좋은 실습 방법을 보여줘요 - 에러 스크린샷을 찍어서 업로드하면 AI가 수정해요. "이 에이전틱 인프라가 정말 좋아요. 이미 100만 유저가 있는 이유가 있네요."

결과물을 보면, 보드 생성 → 보드 열기 → 리스트 추가 → 카드 추가 → 드래그 앤 드롭 모두 완벽하게 작동해요!

인증(Authentication) 구현

00:11:30

드래그 앤 드롭까지 되는 건 대단하지만, 앱을 출시하려면 랜딩 페이지와 로그인 시스템이 필요해요.

인증은 단순히 앱에 들어오게 하는 게 아니에요:

• 각 사용자를 자신의 데이터와 연결
• 로그인하면 다른 사람 보드가 아닌 내 보드가 보여야 함
• 회원가입, 로그인, 비밀번호 찾기, 비밀번호 재설정 등 모든 시나리오 고려

결과를 보면:

• 랜딩 페이지 완성: "Organize your work and life finally", "Turn your team's chaos into organized workflows" 같은 카피와 함께
• 팀 협업, 빠른 속도, 보안 등 기능 설명
• 회원가입 페이지: 이메일, 비밀번호 입력 후 바로 보드 화면으로!

테스트해보니 보드 생성, 카드 추가, 세부 정보 저장 모두 작동해요. 하지만 아직 "진짜" 인증은 아니에요 - 다음 단계에서 실제 데이터베이스와 연결해야 해요.

데이터베이스 연결과 디버깅

00:13:30

Emergent의 장점 중 하나는 네이티브 백엔드가 내장되어 있다는 거예요:

• 데이터베이스
• 인증
• 결제
• 배포 및 스케일링

Supabase 같은 서드파티 도구 의존성이 거의 없어요!

이제 데이터베이스를 연결해요. 성공하면 기존 테스트 데이터가 사라지고 실제 데이터가 저장돼야 해요. 결과는? 데이터가 비어있어요 - 좋은 소식이에요! 이제 진짜 데이터가 저장된다는 뜻이니까요.

로그아웃 → 다시 로그인 테스트도 완벽! Christian은 강조해요: "테스팅이 전부예요. 여러 사람이 가입하고, 보드 만들고, 사용해보게 하세요."

배포 전 마지막 단계: 디버깅. "please debug this app and prepare it to be published"라고 입력하면 AI가 전체 앱을 테스트해요.

결과: 21개 기능 테스트, 100% 성공률!

배포와 커스텀 도메인 연결

00:16:00

드디어 프로덕션 배포 단계예요! 배포 과정은:

1. 패키지 빌드
2. 데이터베이스 마이그레이션
3. 시크릿(API 키) 내보내기
4. 배포
5. 헬스 체크

몇 분 후 배포 완료! 실제 URL에서 앱이 작동해요:

• 회원가입 → 로그인 → 보드 생성 → 리스트 추가 → 카드 추가 → 드래그 앤 드롭
• 모든 기능이 완벽하게 작동!

마지막으로 커스텀 도메인 연결이에요. Emergent에서 "Custom Domain" 옵션을 클릭하고 도메인을 입력하면, DNS 설정 방법을 안내해줘요. GoDaddy, Namecheap 등 도메인 등록 업체에서 설정하면 끝!

Christian은 약 1시간 정도 걸렸다고 해요. 코드 한 줄 없이 $4.25억짜리 앱의 클론을 만들고 배포까지 완료한 거예요!

핵심 정리

• 독창적인 아이디어보다 기존 앱을 단순화해서 경쟁하는 전략이 유효할 수 있다
• Emergent 같은 에이전틱 AI 플랫폼으로 코드 없이 풀스택 앱을 만들 수 있다
• 유명한 앱을 클론할 때는 PRD 없이 간단한 프롬프트만으로도 충분하다
• 기능 추가는 '요소별로 하나씩' 접근하고, 한 뷰를 완성한 후 다음으로 넘어가라
• 에러 발생 시 스크린샷을 찍어서 AI에게 업로드하면 자동으로 수정된다
• 배포 전 충분한 테스팅이 필수 - 여러 사람이 실제로 사용해보게 하라
• Emergent는 데이터베이스, 인증, 결제, 배포까지 네이티브로 지원해 서드파티 의존성이 낮다