포스트

Replit Agent 4 출시 : 디자인 캔버스, 병렬 태스크, 태스크 보드까지 역대급 업데이트

목차

  1. 개요
  2. 에이전트 3 복습
  3. 에이전트 4 핵심 기능
  4. 에이전트 버전별 비교
  5. 결론

개요

Replit에서 역사상 가장 큰 업데이트라고 자부하는 Agent 4가 출시되었다. 작년 9월 Agent 3 출시 이후 약 6개월 만의 메이저 업데이트로, 디자인 캔버스, 병렬 태스크 처리, 태스크 보드 등 핵심 기능들이 대거 추가되었다. 이번 포스트에서는 Replit Agent 4의 주요 변경 사항을 정리한다.

에이전트 3 복습

Agent 4를 살펴보기 전에 Agent 3에서 도입된 주요 기능을 간단히 복습한다.

  • 앱 테스팅 : 에이전트가 코드를 생성하는 것뿐만 아니라 실제 브라우저를 사용하여 웹서비스나 모바일 앱을 직접 테스트하고 수정할 수 있는 기능이 추가되었다.
  • 자동화 기능 : Slack, Telegram, 크론잡 등을 활용하여 업무 자동화 시스템을 에이전트가 대신 구축해 주는 기능이 도입되었다.
  • 자율 동작 시간 대폭 확대 : Agent 1은 2분, Agent 2는 20분이었던 자율 동작 시간이 Agent 3에서 200분으로 크게 늘어나면서 사용자의 개입 없이 완전히 자율적으로 동작할 수 있게 되었다.

에이전트 4 핵심 기능

디자인 캔버스

디자인 캔버스는 기존 디자인 모드를 확장한 개념이다. 기존 디자인 모드는 프롬프트를 통해 빠르게 디자인을 생성하고, 디자인 에디터로 폰트 크기 조절이나 요소 배치 변경 등을 할 수 있었다. 하지만 별도의 앱 프로젝트를 통해서만 디자인을 생성할 수 있다는 단점이 있었다.

디자인 캔버스의 핵심 차별점은 기존에 진행하던 프로젝트의 컨텍스트를 기반으로 디자인을 생성할 수 있다는 점이다. 기존에는 디자인 모드로 디자인을 만들면 별도 프로젝트로 생성되었기 때문에, 진행 중인 프로젝트의 맥락을 디자인 프로젝트에서 다시 설명해야 하는 불편함이 있었다. 이제는 진행 중인 프로젝트 내에서 디자인 캔버스를 바로 활용할 수 있다.

디자인 캔버스 활용 방법은 다음과 같다.

  1. 플러스 버튼을 누르고 Create Something New에서 Design을 선택한다.
  2. 만들고자 하는 디자인을 설명하거나, 디자인 캔버스로 직접 요청한다.
  3. 에이전트가 캔버스의 빈 공간을 확인하고 요청한 디자인을 추가한다.
  4. 프리뷰로 완성된 디자인을 확인하거나, 인스펙트로 특정 요소를 선택하여 변경을 요청할 수 있다.
  5. 베리에이션 기능을 통해 완전히 다른 형태의 디자인 변형도 가능하다.

베리에이션 요청 시 세 가지 서브 에이전트가 병렬로 동시에 동작하여 세 개의 디자인을 한 번에 만들어 준다. 이 병렬 에이전트 동작 또한 Agent 4에서 새롭게 추가된 기능이다.

디자인을 실제 코드에 병합

디자인 캔버스에서 만들어진 디자인은 단순한 디자인 파일이 아니라 실제 코드 기반으로 생성된다. 따라서 기존에 개발하고 있던 웹서비스 프로젝트에 바로 병합이 가능하다.

병합 과정은 다음과 같다.

  1. 디자인 캔버스에서 빌드 버튼을 누른다.
  2. 디자인을 반영할 대상 프로젝트를 선택한다.
  3. 에이전트가 기존 앱 구조를 파악하고 병합 방식을 검토한다.
  4. 라우팅, 헤더 내비게이션, 실제 데이터 연결까지 자동으로 처리한다.

디자인 작업과 개발 워크플로우가 하나의 통합된 플랫폼 안에서 이루어지는 것이 가장 큰 차별점이다.

다양한 아티팩트 생성

Replit Agent 4에서는 디자인 캔버스를 기반으로 다양한 아티팩트를 하나의 프로젝트 내에서 생성할 수 있다.

아티팩트 유형설명
웹서비스웹 애플리케이션 개발
모바일 앱모바일 애플리케이션 개발
슬라이드서비스 소개서 등 프레젠테이션 생성
애니메이션데모 영상 등 애니메이션 콘텐츠 제작
디자인UI/UX 디자인 목업
데이터 시각화차트, 대시보드 등 데이터 시각화
3D 게임3D 기반 게임 콘텐츠
문서문서 작성
스프레드시트데이터 관리용 스프레드시트

모든 아티팩트는 동일한 프로젝트 컨텍스트를 기반으로 생성되기 때문에 일관성 있는 콘텐츠 제작이 가능하다. 예를 들어 서비스 소개 슬라이드를 만들 때 별도로 페이지 구성을 설명하지 않아도, 프로젝트의 기존 코드베이스를 참고하여 자동으로 적절한 내용을 구성해 준다.

병렬 태스크 처리

기존에는 하나의 메인 스레드에서 순차적인 작업만 진행할 수 있었다. Agent 4에서는 메인 스레드를 기반으로 여러 개의 태스크를 나눠서 병렬로 처리할 수 있는 기능이 추가되었다.

New Task 버튼을 누르면 메인 스레드의 개발을 그대로 두면서 병렬로 별도의 태스크에서 작업을 시킬 수 있다. 예를 들어 메인 스레드에서 앱을 개발하면서, 태스크 1에서는 서비스 소개 슬라이드를, 태스크 2에서는 데모 영상을 동시에 생성하는 것이 가능하다.

별도 태스크에서 작업한 내용이 마음에 들면 변경 사항을 메인 버전에 머지할 수 있는 기능도 포함되어 있다.

태스크 보드

여러 개의 에이전트를 동시에 관리할 수 있는 태스크 보드 기능도 추가되었다. 태스크 보드에서는 현재 진행 중인 모든 태스크를 한눈에 확인할 수 있다.

  • 수정 중인 작업
  • 활성화되어 진행 중인 작업
  • 완료되어 병합을 기다리는 작업

PM이 개발팀의 칸반 보드를 보는 것처럼, 에이전트들의 작업 내용을 한눈에 관리할 수 있다.

에이전트 버전별 비교

항목Agent 1Agent 2Agent 3Agent 4
자율 동작 시간2분20분200분200분 이상
앱 테스팅불가불가가능가능
자동화 구축불가불가가능가능
디자인 캔버스불가불가불가가능
병렬 태스크불가불가불가가능
태스크 보드불가불가불가가능
다중 아티팩트불가불가불가가능

결론

Replit Agent 4는 디자인 캔버스를 중심으로 계획, 설계, 구축까지 모든 작업을 하나의 플랫폼 안에서 병렬로 빠르게 처리할 수 있게 해준다. 완전히 브라우저 기반으로 동작하기 때문에 별도의 개발환경 설정이 필요 없고, 동일한 컨텍스트를 가지고 웹, 모바일, 슬라이드, 애니메이션 등 다양한 아티팩트를 생성할 수 있다. 특히 빠른 프로토타이핑이 필요한 상황에서는 대체제가 없을 정도로 강력한 도구가 되었다. 다양한 코딩 에이전트들이 등장하는 지금, 각 도구의 장단점을 파악하고 하이브리드로 활용하는 전략이 점점 더 중요해지고 있다.