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는 Agent와 함께 디자인을 탐색하고 반복하는 공간입니다. 여기서 앱, 비디오, 슬라이드 같은 아티팩트가 프레임에 표시됩니다. 하나의 시각적 보드에서 Agent와 함께 목업을 만들고, 디자인 방향을 비교하고, 변경사항을 앱에 적용할 수 있습니다.
Canvas의 구성 요소
Canvas는 모든 것을 시각적으로 보고 작업할 수 있는 무한한 보드입니다.
- 앱: 실행 중인 앱이 Canvas에서 라이브 인터랙티브 미리보기로 나타납니다. 브라우저에서처럼 클릭하고 사용할 수 있습니다.
- 디자인 목업: Agent가 생성하는 시각적 프로토타입. 실제 페이지처럼 보이고 느껴집니다 — 상호작용하고, 크기를 조정하고, Agent에게 수정을 요청할 수 있습니다 — 하지만 라이브 앱과 별개여서 자유롭게 실험할 수 있습니다.
- 도형과 그림: 직사각형, 원, 별, 화살표, 하트 등. 대략적인 아이디어를 스케치하거나, 디자인에 주석을 달거나, 화면이 어떻게 연결되는지 매핑하는 데 사용하세요.
- 텍스트와 스티커 메모: Canvas 어디에나 레이블이나 메모를 추가하여 생각을 정리하세요.
- 이미지: Canvas에 스크린샷이나 참조 이미지를 드롭하세요. Agent가 보이는 것을 다시 만들거나 변형할 수 있습니다.
- 비디오: 다른 콘텐츠 옆에 비디오 파일을 Canvas에 배치하세요.
Canvas에서 디자인 시작하기
디자인을 시작하는 몇 가지 방법이 있습니다. 가장 자연스러운 것을 선택하세요.변경하기
Canvas에 디자인이 있으면 여러 방법으로 반복할 수 있습니다.Agent에게 업데이트 요청하기
Canvas에서 프레임을 선택하고 아래 나타나는 입력창에 변경사항을 입력하세요. 엔터를 누르면 Agent가 요청을 받아 업데이트를 실행하고 Canvas에서 목업을 새로고침합니다.그리기 및 주석 달기
하단 도구 모음의 그리기 도구를 사용하여 Canvas에 직접 스케치하세요. 변경하고 싶은 곳을 가리키는 화살표를 그리거나, 문제 영역에 원을 그리거나, 피드백이 담긴 텍스트 메모를 추가하세요. 그런 다음 Agent에게 주석을 기반으로 변경하도록 요청하세요.다양한 기기에서 미리보기
다양한 화면 크기에서 디자인이 어떻게 보이는지 확인하세요. Agent에게 모바일, 태블릿, 또는 데스크톱 버전을 보여달라고 요청하세요:- 모바일 — 390 × 844
- 태블릿 — 768 × 1024
- 데스크톱 — 1280 × 720
앱에 변경사항 적용하기
디자인에 만족하면 변경사항을 메인 버전에 적용하세요. Agent가 수행된 내용의 요약을 보여주고 적용하거나 취소할 수 있는 옵션을 제공합니다.프레임을 PNG로 내보내기
Canvas의 모든 아티팩트 또는 디자인 프레임을 PNG 이미지로 저장할 수 있습니다. 이는 문서나 채팅에서 미리보기를 공유하거나, 더 반복하기 전에 스냅샷을 캡처하거나, 팀원에게 스크린샷을 보낼 때 유용합니다.
내보낸 PNG는 Canvas에서 현재 프레임이 표시하는 것과 일치합니다. 앱이나 디자인이 아직 로딩 중이라면 내보내기 전에 완전히 렌더링될 때까지 기다리세요.
디자인 방향 비교하기
어떤 방향으로 갈지 확실하지 않을 때, Agent에게 여러 버전을 생성하여 나란히 비교하도록 요청하세요.- 한 페이지의 여러 버전: “이 랜딩 페이지의 다섯 가지 버전을 보여줘.” Agent가 각각을 만들어 나란히 배치합니다.
- 다중 페이지 흐름: “완전한 온보딩 흐름 디자인: 환영, 프로필 설정, 환경 설정, 확인.” Agent가 각 화면을 빌드하여 순서대로 배열합니다.
- 혼합 및 매칭: “미니멀과 볼드 스타일로 랜딩 페이지와 가격 페이지를 보여줘.” Agent가 모든 조합을 만들어 전체 그림을 볼 수 있게 합니다.
사용자 흐름 매핑하기
Canvas에서 완전한 사용자 여정 — 가입, 온보딩, 대시보드, 설정 — 을 배치하고 모든 것이 어떻게 연결되는지 보세요.- 각 화면을 별도의 프레임으로 배치
- Agent에게 전체 흐름 생성 요청: “내 앱의 완전한 온보딩 흐름을 그려줘”
- 화살표와 도형을 사용하여 사용자가 화면 간에 이동하는 방법 표시
- Agent에게 대략적인 스케치를 완성된 디자인으로 변환하도록 요청
디자인을 실제 앱으로 변환하기
디자인에 만족하고 실제로 만들고 싶을 때 두 가지 방법이 있습니다:완전한 앱으로 만들기
디자인에 데이터 저장, 사용자 계정, 다른 서비스 연결 같은 실제 기능이 필요하면 Agent에게 완전한 앱으로 변환하도록 요청하세요. “이것을 실제 앱으로 만들어줘” 또는 “백엔드를 추가해줘”라고 말하세요. Agent가 실제 게시 가능한 앱으로 작동하는 데 필요한 모든 것을 빌드합니다.디자인을 완전한 앱으로 변환하려면 유료 플랜이 필요합니다.
특정 유형으로 변환하기
디자인 프레임을 특정 아티팩트 유형으로 변환할 수도 있습니다:자주 묻는 질문
디자인 프레임이 실행 중인 앱과 같은 건가요?
디자인 프레임이 실행 중인 앱과 같은 건가요?
아닙니다. 디자인 프레임은 시각적 프로토타입입니다 — 실제처럼 보이고 느껴지지만, 그 뒤에 작동하는 백엔드나 데이터베이스가 없습니다. Canvas의 앱 미리보기는 실제 실행 중인 앱입니다.
라이브 앱을 망가뜨리지 않고 페이지를 재디자인할 수 있나요?
라이브 앱을 망가뜨리지 않고 페이지를 재디자인할 수 있나요?
예. Agent에게 페이지를 Canvas로 가져오도록 요청하세요 — 예: “내 대시보드를 캔버스에 올려줘.” Agent가 실험할 수 있는 사본을 만듭니다. 변경사항을 적용하기로 선택할 때까지 라이브 앱은 영향을 받지 않습니다.
디자인을 실제 앱으로 어떻게 변환하나요?
디자인을 실제 앱으로 어떻게 변환하나요?
Agent에게 완전한 앱으로 만들어달라고 요청하세요(“이것을 실제로 만들어줘”) 또는 특정 유형으로 변환하도록 요청하세요(“이것을 웹 앱으로 변환해줘”). Agent가 작동하고 게시 가능한 앱이 되는 데 필요한 모든 것을 빌드합니다.
웹 앱 이외의 유형으로도 변환할 수 있나요?
웹 앱 이외의 유형으로도 변환할 수 있나요?
예. Canvas 프레임을 웹 앱, 모바일 앱, 슬라이드, 데이터 시각화 등으로 변환할 수 있습니다.
Figma나 다른 도구에서 디자인을 가져올 수 있나요?
Figma나 다른 도구에서 디자인을 가져올 수 있나요?
예. Figma 디자인을 Replit으로 가져오는 몇 가지 방법이 있습니다:
- Figma에서 가져오기: replit.com/import로 이동하여 Figma 계정을 연결하고 프레임 URL을 붙여넣어 디자인을 작동하는 React 앱으로 변환합니다. 자세한 내용은 Figma에서 앱으로 빠른 시작을 참조하세요.
- Agent 채팅의 Figma MCP: Agent 채팅에 Figma 링크를 직접 붙여넣고 코드 생성, 디자인 데이터 추출, 또는 디자인에서 컴포넌트 빌드를 요청합니다. Figma MCP 통합 가이드를 참조하세요.
- 스크린샷 참조: Canvas에 스크린샷을 드롭하고 Agent에게 그로부터 디자인을 다시 만들도록 요청합니다.
Canvas에 무엇을 더 놓을 수 있나요?
Canvas에 무엇을 더 놓을 수 있나요?
디자인 목업과 앱 미리보기 외에도, 아이디어 스케치, 디자인 주석 달기, 또는 생각 정리에 유용한 도형, 화살표, 텍스트 레이블, 스티커 메모, 이미지, 비디오를 추가할 수 있습니다.