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