Skip to main content
Canvas는 Replit Design이 프레임을 표시하는 무한한 팬 앤 줌(pan-and-zoom) 표면입니다. 디자인하는 모든 것이 여기에 존재합니다: 프레임을 생성하고, 드래그해서 옮기고, 세부 사항을 확대해서 보고, 원하는 결과가 나올 때까지 반복하세요.
보드에 배치된 세 개의 프레임이 있는 Canvas: Website(Scroll Hero), APEX X1 Design System, 그리고 APEX X1 슈퍼카의 Design 목업이 있으며, 하단에는 플로팅 툴바(Chat, Draw, Edit, Generate)가 있음

​
Canvas 열기

Canvas는 Replit Design에서 가장 먼저 보게 되는 화면입니다. 프로젝트에서 헤더의 Design을 선택하면 Canvas가 패널을 채우고, Build를 선택하면 실행 중인 앱으로 다시 전환됩니다.
Design과 Build 토글이 있는 프로젝트 헤더를 확대한 모습. Design이 선택되어 있고 그 아래 Canvas에 프레임들이 있음
replit.com/design에서 새로 시작하면 새 디자인을 만들라는 안내가 나타나고, 이는 Canvas에서 열립니다. 각 화면을 언제 사용해야 하는지는 Design vs. Build를 참고하세요.

​
Canvas 위에 있는 것들

  • Frames: 보드 위의 모든 타일입니다. 프레임은 디자인 목업, 웹 앱, 모바일 앱, 슬라이드, 이미지, 영상, 또는 벡터 그래픽이 될 수 있습니다. 채팅 프롬프트, 툴바의 Generate 메뉴, 또는 라이브러리 패널을 통해 생성하세요. 프레임에 대해 하는 모든 작업 — Build, Focus, 제안 — 은 프레임 자체를 통해 이루어집니다: Frames를 참고하세요.
  • 드로잉과 메모: Draw 도구로 추가하는 마크업으로, 스케치, 화살표, 도형, 스티키 노트 등이 있습니다. Agent가 마크업을 읽으므로 문제가 있는 부분에 동그라미를 치고 변경을 요청할 수 있습니다.
  • 채팅 패널: Canvas 옆에 고정된 Agent 채팅입니다. 메시지를 보내기 전에 프레임을 선택하면 스냅샷으로 첨부되어 Agent가 시각적 컨텍스트를 갖게 됩니다.
각 구성 요소가 무엇이고 어떻게 맞물리는지는 구성 요소 개요를 참고하세요.

​
보드 탐색하기

별도로 언급하지 않는 한 패닝, 확대/축소, 선택은 어떤 도구에서든 작동합니다. 패닝:
  • 트랙패드: 두 손가락 드래그.
  • 마우스: 중간 버튼 클릭 후 드래그, 또는 스페이스바를 누른 채 왼쪽 클릭 드래그.
  • Pan 도구: 왼쪽 마우스 버튼으로 클릭 앤 드래그.
확대/축소:
  • 트랙패드: 핀치.
  • 마우스: Ctrl(macOS에서는 Cmd) + 스크롤 휠.
  • 키보드: 확대는 Cmd/Ctrl + +, 축소는 Cmd/Ctrl + -, 확대/축소 재설정은 Cmd/Ctrl + 0.
확대/축소는 커서를 기준으로 고정되므로 커서 아래 지점은 그대로 유지되고 나머지 보드가 그 주위로 확대/축소됩니다. 선택:
  • 단일 프레임: Interact 도구로 클릭.
  • 다중 선택: Shift를 누른 채 각 프레임을 클릭하거나 보드에서 마퀴 사각형을 드래그.
  • 선택 해제: 빈 영역을 클릭하거나 Escape를 누름.
프레임을 하나 이상 선택하면 프레임별 액션 바가 표시되고 다음 Agent 메시지에 해당 프레임들이 스냅샷으로 첨부됩니다.

​
키보드 단축키

​
우클릭 메뉴

보드 어디서든 우클릭하면 컨텍스트 메뉴가 열립니다. 이 메뉴는 상황에 맞게 구성되므로 커서 아래에 무엇이 있는지에 따라 액션이 달라집니다: 프레임에서는 프레임 액션이, 빈 Canvas에서는 보드 수준 액션이 나타나며, 앱 프레임에는 Refresh artifact가 추가됩니다. 선택된 프레임의 메뉴에는 다음이 포함됩니다.
회색 Apex X1 슈퍼카를 보여주는 선택된 Design 프레임에서 열린 우클릭 메뉴. Edit, Chat, Focus, Cursor chat, Reorder, Copy, Paste, Export as…, Duplicate, Delete, Select all 액션이 표시되어 있음

선택된 프레임의 우클릭 메뉴.

​
프레임을 PNG로 내보내기

모든 아티팩트 또는 디자인 프레임을 PNG 이미지로 저장하세요. 문서나 채팅에서 미리보기를 공유하거나, 더 반복하기 전에 스냅샷을 캡처하거나, 팀원에게 스크린샷을 보낼 때 유용합니다.
1

프레임 선택

내보낼 아티팩트 또는 디자인 프레임을 선택한 다음, 로딩이 끝날 때까지 기다립니다.
2

Export 선택

프레임의 액션 바에서 Export를 선택하세요. 프레임을 우클릭한 다음 Export as… > PNG를 선택할 수도 있습니다. 이미지가 프레임 이름을 기반으로 한 파일명으로 컴퓨터에 다운로드됩니다.
선택한 프레임을 다운로드하는 대신 PNG로 복사하려면 Cmd+Shift+C(Windows 및 Linux에서는 Ctrl+Shift+C)를 누르세요.
내보낸 PNG는 Canvas에서 현재 프레임이 표시하는 것과 일치합니다. 앱이나 디자인이 아직 로딩 중이라면 내보내기 전에 완전히 렌더링될 때까지 기다리세요.

​
Canvas와 실행 중인 앱

Canvas와 실행 중인 앱 미리보기는 같은 패널을 공유하며, 몇 가지 모드가 이 둘을 연결합니다.
  • 포커스 모드: 선택된 프레임의 Focus 액션은 프레임을 확장해 화면을 가득 채웁니다. 보드 상단의 Exit focus를 선택하면 Canvas로 돌아갑니다.
  • 읽기 전용 모드: Canvas가 백그라운드 작업 컨텍스트 안에서 잠겨 있으면 반복 작업 관련 액션은 숨겨지고 Focus만 남습니다.
Design 프레임으로 새 앱을 빌드하려면 Core 또는 Pro가 필요합니다. 다른 모든 Canvas 기능은 모든 플랜에서 사용할 수 있습니다. 플랜에 대한 자세한 내용은 Billing을 참고하세요.
참고 자료
  • 구성 요소 개요: 빌딩 블록과 그것들이 어떻게 맞물리는지.
  • Frames: 프레임 종류, 프레임별 액션 바, Build와 Focus.
  • Elements: 프레임 내부의 개별 조각.
  • Toolbar: 전체 도구 목록.
배우기
  • 제안 살펴보기: 선택한 프레임에서 새로운 방향으로 뻗어나가고 최적의 결과를 앱에 적용하세요.
  • Design vs. Build: 각 화면을 언제 사용해야 하는지.