앱 개발, 디자인, 슬라이드가 캔버스 위에서 한 번에 ㄷㄷ Replit Agent 4 직접 써봤습니다 [안될공학 x Replit]

Replit Agent 4 기본 흐름과 랜딩 페이지 만들기

Replit에 로그인하면 바로 웹, 모바일, 슬라이드, 3D 게임까지 선택할 수 있는 화면이 뜹니다. 기존에는 프로젝트마다 따로 환경을 세팅해야 했는데, Agent 4는 이걸 하나의 플로우로 묶어 놓았더라고요.

제가 테스트한 프롬프트는 “가족 여행 계획을 쉽게 짜주는 AI 여행 일정 앱 랜딩 페이지를 만들어줘. 히어로 섹션, 주요 기능 3개, 사용자 예시, CTA 넣고 모바일에서도 깔끔하게 보여줘”였습니다.

실행하자마자 “React + Vite로 빌드하겠습니다” 하면서 스스로 디자인 변형을 여러 개 생성하기 시작하더라고요. 결과물은 생각보다 세련됐습니다. “온 가족이 함께 더 특별한 여행”이라는 카피와 무료 시작 버튼까지 자연스럽게 들어가 있었어요.

현업에서 자주 쓰는 방식은 초반에 너무 구체적인 프롬프트를 주지 말고, 먼저 큰 방향만 던진 뒤에 “히어로 섹션 4가지 버전 제안해줘”처럼 추가 요청을 하는 거예요. 이렇게 하면 Agent가 서브 에이전트를 여러 개 돌리면서 동시에 작업을 진행합니다.

인피니트 캔버스에서 디자인 시안 비교하기

Agent 4에서 가장 인상 깊었던 부분은 인피니트 캔버스입니다. 기존 프로젝트는 파일 하나당 결과물이 하나였는데, 여기서는 무한 캔버스 위에 웹페이지, PPT, 모바일 버전까지 자유롭게 배치할 수 있어요.

제가 만든 가족 여행 앱의 경우, 첫 프롬프트로 나온 랜딩 페이지 아래에 PPT 슬라이드 5장짜리를 추가로 요청했습니다. 그러자 캔버스에 기존 랜딩 페이지와 새로 생성되는 슬라이드가 동시에 보이면서, 동일한 브랜드 컬러를 자동으로 맞춰주더라고요.

특히 마음에 드는 시안을 골라서 “4번 버전으로 전체 분위기 세련되게 다듬어줘”라고 말하자, 해당 CSS 변수까지 자동으로 교체하면서 랜딩 페이지에 바로 반영됐습니다. 데스크톱과 아이폰 17 Pro Max, 갤럭시 S25 Ultra까지 실시간으로 프리뷰가 업데이트되는 걸 보면서 “이게 진짜 바이브 코딩이구나” 싶었어요.

실무에서 이 기능을 쓰려면, 먼저 여러 시안을 캔버스에 펼쳐놓고 팀원과 공유하는 식으로 활용하는 게 좋습니다. 드로잉 기능도 있어서 직접 화살표로 수정 지점을 표시할 수 있거든요.

기능 분할 확장과 실전 테스트 팁

마지막으로 기능을 쪼개서 확장하는 과정을 테스트했습니다. 랜딩 페이지에 로그인·온보딩 플로우를 따로 요청하고, 여행 일정 생성 메인 화면을 추가로 만들었어요.

Agent는 카카오·구글 소셜 로그인 연동까지 알아서 붙여주고, 4단계 온보딩 화면도 생성하면서 실제 가상 머신 안에서 플로우 테스트까지 돌리더라고요. 예산 입력 후 다음 단계로 넘어가는 과정에서 에러가 나는지 직접 체크하는 모습이 꽤 인상적이었습니다.

여행 일정 생성 화면을 만들 때는 “온보딩에서 입력한 정보를 자동 반영해줘”라고만 했는데, 대가족 선택 시 그 값을 그대로 가져와서 일정을 생성해 줬습니다.

실전에서 주의할 점은, 너무 큰 기능을 한 번에 몰아넣지 말고 “로그인 플로우 먼저”, “일정 생성 화면 다음”처럼 나누는 게 캔버스에서 흐름을 파악하기 편하다는 겁니다. 이렇게 하면 나중에 프로젝트가 커져도 어떤 부분을 수정해야 할지 한눈에 보이거든요.