- 신영선
- 기본 과정
- AI 인사이트
개발자 없이 앱 만드는 시대가 진짜 왔습니다.
왕초보도 10분만에 앱 만드는 AI 코딩 플랫
- 릴스 영상을 저장 또는 공유하기로 기록 해놓습니다.
- DM으로 받은 링크를 카톡으로 옮겨 놓습니다.
- PC로 접속해서 AI 즐겨찾기 폴더를 만들어 저장해놓습니다.
- 바로 사용을 해봅니다. 절대 미루지 마세요. (⭐ 제일 중요)
1. 레플릿 웹사이트
~ — replit.comreplit.com2. 에이전트4 공식 영상
3. 사용 방법 (영상 요약)
Replit Agent 4는 “아이디어 → 설계 → 기능 개발 → 배포”를 한 곳에서 반복하면서, 에이전트를 관리하는 감각으로 써야 효율이 가장 잘 나옵니다.[youtube]
전체 사용 전략
- 초기에는 하나의 “메인 프로젝트”를 만들고, 그 안에서 슬라이드·랜딩페이지·웹앱·모바일앱 등 여러 아티팩트를 함께 두는 구조로 생각하세요.
- 본인은 “비전과 우선순위·피드백”에 집중하고, 실제 코드·UI 구현은 최대한 에이전트에게 맡기는 식으로 역할을 나누면 좋습니다.
예: SaaS 아이디어 하나 잡고, 같은 프로젝트 안에서 랜딩페이지, 온보딩 슬라이드, 간단한 웹앱, 데모 영상까지 한 번에 뽑는 식.
1. Create everything: 한 워크스페이스에 다 몰아넣기
영상에서 보여주듯 이제는 한 프로젝트에서 다음을 모두 만들 수 있습니다.
- 웹앱, 모바일 앱
- 슬라이드/프레젠테이션
- 애니메이션/영상
- 데이터 대시보드 등
잘 쓰는 팁:
- “하나의 코드베이스 = 여러 아티팩트”로 설계해서, 컴포넌트/스타일/카피를 공유하게 만드세요.
- 마케팅/랜딩·인앱 UI·피치덱을 한 프로젝트에 묶으면 나중에 유지보수·실험이 훨씬 편해집니다.
2. Infinite Canvas: 디자인·사양 정의용 화이트보드처럼
Agent 4의 인피니트 캔버스는 사실상 Figma + 화이트보드 + 요구사항 문서가 합쳐진 느낌입니다.
활용 패턴:
- 먼저 “Design” 모드로 시작해서, 원하는 서비스의 첫 화면/플로우를 대략적으로 만들어 달라고 합니다.
- 캔버스 위에 직접 펜·도형·텍스트로 코멘트를 남깁니다.
- “헤더는 더 미니멀하게”
- “이 CTA는 위로 200px 올려줘”
- “여기 그래프 대신 카드 레이아웃”
- 이 주석을 그대로 에이전트가 읽어서 반영하기 때문에, 구어체로 막 쓰고 “이 메모대로 전체 수정해줘” 라고 요청해도 됩니다.
핵심:
- “정답 디자인을 바로 떠올리려고 하지 말고”, 여러 안을 빠르게 생성·비교·합치는 ‘탐색 도구’로 쓰는 게 효율적입니다.
3. Variants(여러 버전 뽑기)로 탐색 폭 넓히기
캔버스에서 “Make variants”를 누르면 같은 페이지/컴포넌트의 여러 버전을 자동 생성해줍니다.
실전 팁:
- 랜딩 페이지 전체 버전 4개를 뽑고, 마음에 드는 걸 골라서 “Apply to → 새 아티팩트로 만들기”를 사용해 실제 앱으로 승격시키세요.
- 특정 요소(타임라인, 카드 섹션 등)를 선택한 뒤 “이 요소만 5개 버전 더 만들어봐” 식으로 미시적 A/B 아이디어를 뽑을 수 있습니다.
이 흐름은 YC 스타일 랜딩·온보딩 페이지 빠르게 실험할 때 특히 좋습니다.
4. Artifacts: 결과물 단위로 생각하기
파일 트리 옆 “Library”에서 앱, 문서, 슬라이드, 비디오 같은 아티팩트를 관리합니다.
잘 활용하려면:
- “아이디어 하나당 아티팩트 여러 개” 구조를 명확하게 설계하세요. 예:
writing-app: 에디터 웹앱marketing-site: 같은 프로젝트 안의 마케팅 페이지pitch-slides: 투자자/고객용 슬라이드- 캔버스에서 만든 디자인을 “Apply to → Create something new”로 아티팩트화하고, 이걸 기준으로 실제 기능을 붙여나갑니다.
5. Tasks + Board: 에이전트를 PM처럼 굴리기
Agent 4의 핵심은 작업(Task) 보드입니다.
사용 흐름:
- 앱 화면에서 “플러스 아이콘”으로 새 작업 질문을 보냅니다. 예:
- “이 에디터에 Notion 스타일 콜아웃 추가해줘”
- Task 보드에서 Draft → Plan Ready → Active → Done으로 이동하는 상태를 확인합니다.
- 각 작업은 별도의 “버전(스레드)”에서 돌아갑니다. 이 버전은 메인 앱과 분리된 샌드박스라, 맘에 안 들면 버려도 됩니다.
- 작업이 끝나면, 기능이 잘 동작하는지 해당 스레드에서 직접 테스트 후 “메인에 반영(Apply to main)”합니다.
신영선님처럼 제품+마케팅 같이 보는 입장에서는, Task 보드를 “프로덕트 백로그”처럼 쓰는 게 좋습니다.
- 좌측: 아이디어/요청
- 중앙: 에이전트가 작업 중
- 우측: 검수 완료 후 메인에 머지된 기능
6. Multiple agents / Parallelism: 과도하게만 안 쓰면 무기
한번에 여러 스레드를 만들어 여러 에이전트를 병렬로 돌릴 수 있습니다.
추천 패턴:
- 동시에 진행해도 서로 독립적인 기능만 병렬로 돌립니다.
- 예: “콜아웃 추가”, “텍스트 하이라이트”, “포맷팅 치트시트 오버레이” 세 작업을 서로 다른 스레드에서 동시에 요청.
- 각 스레드에서는 작은 기능 단위로만 반복해서 refinement를 부탁합니다.
- 메인에 머지할 때는 한 번에 여러 기능을 합치지 말고, 스레드별로 개별 머지 → 문제가 나면 어느 스레드 때문인지 바로 알 수 있게.
비용과 혼선(드리프트)을 줄이는 관점에서:
- “항상 1~3개 정도의 중요한 병렬 작업만 켜두고, 나머지는 큐에 두거나 나중에 실행”하는 식으로 제한하는 걸 추천드립니다.
7. 버전/스레드 관리 감각
영상에서처럼, 각 Task/스레드는 메인과 분리된 “별도의 앱 버전”입니다.
운용 팁:
- 스레드 하나를 “기능 브랜치”처럼 생각하고, 그 안에서 디자인·코드·UX를 충분히 실험한 뒤 메인으로 머지하세요.
- 메인보다 뒤쳐진 스레드는 “Sync from main”으로 최신 상태를 당겨온 뒤 계속 작업합니다.[youtube]
- 큰 리팩토링은 항상 새 스레드에서 먼저 수행하고, 완전히 안정된 뒤에만 메인에 머지합니다.
8. 배포(Deploy)까지 한 번에
Agent 4에서는 웹앱/마케팅 사이트 등 여러 아티팩트를 한 프로젝트 안에서 각각 다른 URL로 배포할 수 있습니다.
실전 흐름:
- 메인 앱에서 “Deploy”를 누르면 원클릭으로 URL이 생성되고, 필요하면 커스텀 도메인을 바로 붙입니다.
- 마케팅 사이트와 앱을 동시에 배포해서, 예:
app.yourdomain.comwww.yourdomain.com
식으로 분리 운용이 가능합니다.
이런 자료를 이메일로 받아보시겠습니까? 무료 강의 안내도 같이 갑니다.
무료로 신청하기