Replit은 앱을 작업하는 두 가지 방법을 제공합니다: Canvas와 Preview. 가장 좋은 점은 함께 사용할 수 있다는 것입니다 — 아름다운 디자인으로 시작하고, 다듬은 다음, 준비가 되면 완전히 기능하는 앱으로 변환하세요.Documentation Index
Fetch the complete documentation index at: https://docs.replit.com/llms.txt
Use this file to discover all available pages before exploring further.
Canvas란?
Canvas를 사용하면 몇 분 만에 아름답고 인터랙티브한 웹사이트와 앱 디자인을 만들 수 있습니다. 아이디어를 설명하기만 하면 Replit이 빌드합니다. Canvas는 다음에 완벽합니다:- 아이디어를 빠르게 테스트: 기능을 빌드하기 전에 앱의 디자인을 시각화
- 세련된 웹사이트 만들기: 랜딩 페이지, 포트폴리오, 레스토랑 메뉴, 이벤트 페이지
- 디자인 세밀하게 조정: 색상, 레이아웃, 콘텐츠를 즉시 조정
Canvas 디자인은 실제 앱처럼 보이고 느껴지지만, 아직 데이터를 저장하거나 외부 서비스에 연결하지 않습니다. 모든 것이 어떻게 보이는지 만족하면, 한 번의 클릭으로 디자인을 완전한 앱으로 변환할 수 있습니다. 아래 단계에서 방법을 보여줍니다.
Preview란?
Preview는 데이터를 저장하고, 사람들이 로그인하고, 다른 서비스에 연결할 수 있는 실제 작동하는 애플리케이션으로 창작물을 보여줍니다. 앱의 인터랙티브하고 전체 크기 뷰입니다. 앱에 다음이 필요할 때 Preview를 사용하세요:- 사용자 계정: 사람들이 계정을 만들고 로그인할 수 있음
- 정보 저장: 주문, 메시지, 사용자 환경 설정 같은 데이터 저장
- 다른 서비스 연결: 결제 처리, 이메일 전송, 다른 앱의 데이터 가져오기
- 복잡한 작업 처리: 온라인 스토어 운영, 예약 관리, 대시보드 지원
두 모드 함께 사용하기
Canvas와 Preview는 함께 작동하도록 만들어졌습니다. 하나 또는 다른 것을 선택할 필요가 없습니다. 디자인으로 시작하여 완전한 앱으로 발전시킬 수 있습니다.개선하고 반복하기
Reimagine을 사용하여 선택된 디자인의 새로운 방향을 탐색하거나, Visual Editor를 열어 요소를 직접 클릭하고 조정합니다. Agent와 채팅하여 원하는 변경사항을 설명할 수도 있으며 — 즉시 나타납니다.
완전한 앱으로 변환하기
디자인에 만족하고 실제 기능을 추가할 준비가 되면 Build를 선택하여 디자인을 앱으로 변환합니다. 새 아티팩트를 만들거나 기존 아티팩트에 디자인을 적용할 수 있습니다. Agent가 데이터 저장, 사용자 계정 처리, 서비스 연결 기능을 추가하며 — 디자인은 그대로 유지됩니다. 전체 워크플로우는 Figma 디자인을 인터랙티브 앱으로 변환 가이드를 참조하세요.
데이터베이스나 고급 기능을 추가하려고 할 때 Agent가 변환을 요청합니다.
각 모드를 사용할 때
Canvas로 시작하기
- 아이디어를 빠르게 보고 싶을 때
- 간단한 웹사이트를 만들 때
- 다양한 디자인을 테스트하고 싶을 때
- 속도가 우선일 때
바로 Preview로 가기
- 정확히 무엇이 필요한지 알 때
- 처음부터 데이터를 저장해야 할 때
- 사람들이 로그인해야 할 때
- 다른 서비스에 연결할 때
주요 차이점
| 기능 | Canvas | Preview |
|---|---|---|
| 속도 | 몇 분 | 완전한 앱에 약 10분 |
| 데이터 저장 | 시각적만 (저장 안 됨) | 실제 데이터 저장 및 불러오기 |
| 사용자 계정 | 로그인이 어떻게 보이는지 표시 | 실제 로그인 기능 |
| 서비스 연결 | 사용 불가 | 결제, 이메일, 외부 데이터 |
| 호스팅 | 간단한 정적 호스팅 | 사용자에 따라 확장 |
다음 단계
Canvas
디자인 만들기에 대해 자세히 알아보기
Visual Editor
클릭으로 시각적 변경하기
Agent
Agent가 빌드할 수 있는 것 탐색
Learn
전체 워크플로우 배우기