Replit Agent 같은 서비스 제작하기: 자연어 요청을 웹앱으로 만드는 기능 제작법
Replit Agent 같은 AI 앱 개발 플랫폼의 핵심 기능 제작법을 설명합니다. 요구사항 계획, 코드 생성·격리 실행, Playwright 테스트와 배포 자동화를 API와 자체 로직으로 연결하는 방법을 살펴봅니다.
핵심 요약
1. 자연어 요청을 계획·코드·테스트·배포로 연결해 작동하는 웹앱을 만드는 기능을 제작합니다. 2. Claude API로 계획과 코드를 생성하고, 격리 실행 환경·Playwright·CI/CD로 실행부터 배포까지 연결합니다. 3. 계획 승인, 파일 접근 권한, 오류 수정 횟수, 배포 승인과 복구 규칙은 자체 로직으로 구현합니다.
요청을 화면·기능 계획으로 바꾸는 제작법
Replit Agent(리플릿 에이전트)는 아이디어를 계획하고 코드 작성·테스트·게시로 이어가는 AI 앱 개발 플랫폼입니다. 핵심 가치는 코딩과 개발 환경 설정이 익숙하지 않은 사람도 요청을 작동하는 앱으로 구체화하도록 돕는 데 있습니다. 여기서는 이 흐름을 갖춘 유사 서비스의 구현 방법을 제안합니다.
비개발자 MVP 제작을 위한 설명용 예시로 업무 등록 웹앱을 가정합니다. 입력은 대상 사용자, 등록·목록 화면, 제목·담당자·상태 항목, 등록 완료 조건입니다. Claude API는 이를 해석해 화면 구성과 데이터 구조, 개발 작업 목록의 후보를 생성하는 AI API로 연결합니다.
자체 로직은 응답 형식을 검사하고 빠진 조건을 질문으로 돌려줍니다. 사용자가 승인한 계획에 버전을 부여하면 출력은 화면·동작 명세와 코드 생성용 작업 목록이 됩니다. Replit Plan 모드가 코드나 데이터 변경 전에 접근 방법을 검토하도록 하는 것처럼, 계획 승인과 코드 변경을 구분해 설계합니다.
코드와 미리보기를 만드는 AI 생성 코드 샌드박스
입력은 승인한 계획과 현재 프로젝트 파일입니다. Claude API는 코드 변경안과 도구 호출 요청을 생성합니다. 자체 애플리케이션은 요청된 파일과 명령이 허용 범위인지 검사한 뒤 실제 변경과 실행을 담당합니다.

샌드박스는 생성 코드를 제한된 환경에서 실행하는 공간입니다. Docker 기반 컨테이너를 실행 인프라 후보로 삼아 코드를 빌드하고 미리보기 서버를 실행합니다. 작업별 분리, 자원·시간 제한, 네트워크 접근 정책을 별도로 설정해야 하며 컨테이너만으로 완전한 격리가 보장되지는 않습니다.
자체 로직은 변경 이력을 저장하고 빌드 실패 로그를 AI의 수정 요청에 연결합니다. 재시도 한도를 넘기면 사용자 검토로 전환합니다. 출력은 생성 코드, 실행 로그, 브라우저에서 확인할 미리보기입니다.
기대 결과를 확인하는 Playwright 웹앱 기능 테스트
입력은 “업무를 등록하면 목록에 표시된다”와 같은 시나리오와 기대 결과입니다. Playwright는 브라우저 자동화용 오픈소스 라이브러리이며, Playwright Test는 테스트 실행과 결과 검사를 제공하는 프레임워크입니다. 버튼 클릭과 폼 입력을 실행하고 assertion, 즉 기대값과 실제 결과를 비교하는 검사로 통과 여부를 판단합니다.
자체 로직은 시나리오별 통과 조건을 관리하고 실패 보고서를 코드 수정 요청으로 전달합니다. 수정 후 다시 시험하는 횟수와 사람이 검토할 기준도 정합니다. 출력은 시나리오별 성공·실패 보고서와 수정할 항목이며, 검사한 범위까지 결과를 표시합니다.

Replit 공식 App Testing 문서는 Full Stack JavaScript와 Streamlit Python 웹앱을 지원 대상으로 안내합니다. 모든 메시지 뒤에 테스트가 실행되는 것은 아닙니다. 유사 제품도 지원할 앱 유형과 테스트 실행 시점을 별도로 정해야 합니다.
검토한 코드를 서비스로 연결하는 AI 앱 빌더 배포 자동화
입력은 검토를 마친 코드 버전과 배포 설정입니다. GitHub Actions를 빌드·테스트·배포 작업을 실행하는 CI/CD 플랫폼으로 연결합니다. CI/CD는 코드 변경을 검사하고 배포까지 이어주는 자동화 체계입니다.
Actions REST API는 작업 실행과 결과를 관리하는 일반 API입니다. 코드 후보를 생성하는 AI API와 역할을 구분하고, 컨테이너를 운영할 호스팅 환경도 별도로 준비합니다. 자체 로직은 배포 대상 버전과 승인 여부를 확인하고 저장소·배포 환경의 접근 권한을 통제합니다.

배포 실패 시 이전 버전으로 되돌릴 복구 규칙도 구현합니다. 출력은 실행 서비스의 주소, 배포 상태, 연결된 코드 버전입니다. 미리보기에서 검토한 코드가 실제 배포 버전으로 이어지도록 기록을 연결합니다.
AI 스킬과 운영 조건을 포함한 AI 앱 빌더 개발
요구사항 양식, 테스트 작성 규칙, 배포 점검 절차는 선택적 AI 스킬로 묶습니다. AI 스킬은 작업 지침과 참고자료·스크립트 등을 재사용하는 묶음이며, 모델 API와 실행 인프라는 별도로 필요합니다. 스킬에 담긴 절차를 적용하더라도 권한 검사와 승인 상태 관리는 자체 코드에서 처리합니다.
도입 설계에는 API 이용 조건, 저장소·배포 환경의 접근 권한, 지원할 프로젝트 유형을 반영합니다. 모델 호출과 실행 자원의 비용 한도를 정하고, 단계별 입력·출력을 기록해 오류가 발생한 계획과 코드를 추적합니다.
이와 같은 서비스를 제작하려면 필요한 기능, 입력 자료, 연결할 업무를 정리해 트램스 AI에 문의해 주세요. 요구사항 계획부터 테스트·배포까지 이어지는 제작 상담은 https://trams.co.kr/ai-si/contact/#inquiry 에서 시작할 수 있습니다.
참고 자료
- https://docs.replit.com/features/agent/overview
- https://docs.replit.com/features/agent/app-testing
- https://replit.com/products/agent
- https://platform.claude.com/docs/en/build-with-claude/overview
- https://supabase.com/docs
- https://docs.github.com/en/rest
- https://docs.github.com/en/rest/actions
- https://platform.claude.com/docs/en/agents-and-tools/tool-use/overview
- https://duckssi.tistory.com/104
- https://appelixir.com/articles/ai-app-builder-comparison-lovable-bolt-v0-replit/
- https://playwright.dev/docs/intro
- https://docs.docker.com/engine/security/
- https://docs.github.com/en/actions/get-started/understand-github-actions
- https://agentskills.io/home
비슷한 AI 서비스를
사업에 적용하고 싶으신가요?
아이디어와 필요한 기능을 알려주시면 제작 범위와 방법을 검토합니다.