- 같은 프로젝트 안에서 디자인을 새 앱으로 빌드하기
- 디자인의 모습을 이미 가지고 있는 앱에 적용하기
- 어느 쪽이든 안전하게 되돌리기, Agent가 시작하기 전에 체크포인트를 만듭니다
프레임에서 앱까지, 두 가지 경로
선택한 Design 프레임의 Build… 메뉴는 두 가지를 모두 다룹니다:
Build… 메뉴: 새 아티팩트를 만들거나, 기존 아티팩트에 디자인을 적용합니다.
이 디자인 빌드하기
Build this design을 선택하면 해당 프레임에서 새 아티팩트가 시작됩니다. Agent는 레이아웃, 스타일, 에셋을 빌드해 프로젝트의 아티팩트 목록에 실제로 실행되는 앱으로 추가합니다.기존 앱에 적용하기
이 메뉴에는 프로젝트에 있는 모든 아티팩트도 나열됩니다. 하나를 선택하면 그 앱에 디자인을 적용합니다: Agent는 프레임에 맞게 아티팩트의 코드를 다시 작성하고, Design 프레임은 참고용으로 캔버스에 그대로 남습니다. 이미 만들어둔 앱을 처음부터 다시 만들지 않고도 스타일을 다시 입힐 수 있는 방법입니다.진행 흐름
1
빌드할 디자인 고르기
출시할 프레임을 결정하세요. 먼저 캔버스에서 후보들을 나란히 비교해 보세요. 빌드하면 이번 탐색 라운드가 마무리되지만, Agent가 체크포인트를 만들어 두므로 언제든 되돌릴 수 있습니다.
2
Agent에게 맡기기
프레임을 선택하고 액션 바에서 **Build…**를 선택한 다음 경로를 고르세요: 새 아티팩트로 만들지, 기존 아티팩트에 적용할지 정합니다. Agent가 디자인, 레이아웃, 스타일, 에셋을 빌드하고 채팅에서 진행 상황을 알려줍니다.
3
빌드 결과 검토하기
Agent가 변경한 내용을 보고하고 체크포인트를 만듭니다. 결과물을 열어 디자인이 실제로 동작하는 모습을 확인하고, 제대로 반영되지 않은 부분이 있으면 계속 채팅으로 조정하세요.
Design 프레임에서 새 앱을 빌드하려면 Core 또는 Pro 플랜이 필요합니다. 디자인 적용을 비롯한 그 외 모든 Replit Design 기능은 모든 플랜에서 사용할 수 있습니다. 플랜 세부 정보는 Billing을 참고하세요.
빌드 이후: 진짜로 만들기
프레임을 빌드하면 디자인이 적용된 채로 실행되는 앱을 얻게 됩니다. 목업은 그저 동작하는 척만 했지만, 이제 Agent가 실제 기능을 추가할 수 있습니다. 채팅에서 필요한 것을 요청하세요:- 로그인 기능 추가: Replit Auth로 사용자 계정을 추가하면, 사용자는 별도 설정 없이 Replit 계정으로 로그인하거나 원하는 다른 제공자를 연결할 수 있습니다.
- 실제 데이터 저장: 내장된 Database로 주문, 메시지, 환경설정을 저장하고 불러오세요.
- 요금 청구하기: Monetization 통합으로 결제와 구독 기능을 추가하세요.
- 다른 서비스와 연동하기: Agent는 프롬프트 내용에 따라 이메일부터 Slack, Google 서비스까지 통합 기능을 자동으로 활성화합니다.
출시하고 성장시키기
앱이 제대로 동작하면 사람들에게 선보이고 계속 개선해 나가세요:- 퍼블리시하기: Publishing 도구로 출시한 다음, 실제 앱을 업데이트하는 방법은 퍼블리시 이후를 참고하세요.
- 실제 주소 갖기: 커스텀 도메인을 구매하거나 연결하세요.
- 찾기 쉽게 만들기: SEO Agent를 실행해 기술적 감사를 받고 원클릭으로 수정하세요.
- 방문자의 의견 듣기: 피드백 위젯을 추가해 사람들이 문제와 아이디어를 제보하면 바로 Agent에게 전달할 수 있게 하세요.
- 건강하게 유지하기: 퍼블리시된 앱 모니터링으로 상태, 성능, 가동 시간을 추적하세요.
다음 단계
- Design vs. Build: 각 진입점을 언제 사용할지 알아보세요.
- 디자인 시스템 만들기: 출시한 디자인에서 시스템을 추출해 다음 작업이 브랜드에 맞게 시작되도록 하세요.