- 무한한 보드에서 디자인 프레임을 생성하고 배치하기
- 채팅, 제안, 툴바로 각 프레임을 반복적으로 다듬기
- 프레임의 어떤 부분이든 대상으로 지정하여 그 부분만 변경하기
- 보드를 벗어나지 않고 템플릿과 실제 제품 영감 가져오기
한눈에 보는 보드
- Canvas: Project Editor의 디자인 뷰로, 모든 프레임, 도형, 노트를 담는 무한한 팬앤줌 보드입니다.
- Frames: Canvas의 모든 타일입니다. 프레임은 라이브 아티팩트(웹사이트, 슬라이드), 디자인 목업, 이미지, 동영상, 벡터 그래픽이 될 수 있습니다.
- Elements: 제목, 버튼, 이미지, 폼 필드 같이 프레임 내부의 개별 조각들입니다.
- Chat: 캔버스에 도킹된 Agent 채팅입니다. 만들고 싶은 것을 설명하거나, 프레임을 선택해서 작거나 큰 편집을 요청하세요. 캔버스를 전체로 사용하려면 최소화하세요.
- Ambient intelligence: 선택된 프레임 옆에 나타나는 제안된 다음 단계로, 각각 클릭 한 번으로 새로운 방향을 생성합니다. 작동 방식은 Explore suggestions를 참조하세요.
- Toolbar: Canvas 하단에 떠 있는 바로, Interact, Pan, Chat, Draw, Edit, Generate 도구가 있습니다.
- Library panel: 캔버스에 바로 놓을 수 있는 스타터 템플릿, Mobbin이 큐레이션한 영감, 그리고 여러분의 이전 창작물들입니다.
함께 작동하는 방식
각 구성 요소는 이전 것이 멈춘 곳에서 이어받아, 빈 보드에서 빌드할 수 있는 디자인까지 이어집니다.1. 캔버스에 프레임 배치하기
채팅 프롬프트나 툴바의 Generate 메뉴로 프레임을 생성하세요. 프레임은 디자인 목업, 웹 앱, 모바일 앱, 슬라이드, 이미지, 동영상, 벡터 그래픽이 될 수 있습니다.2. 프레임 반복적으로 다듬기
프레임을 선택해서 개별적으로 작업하세요. 여러분만의 표현으로 채팅하거나, 제안을 따라 새로운 방향으로 분기하거나, Focus로 가까이서 작업하세요. 준비가 되면 Build로 라이브 앱으로 만드세요.
선택된 프레임과 그 액션 바: Build, Focus, 그 외 옵션들.
3. 툴바로 편집, 주석 달기, 생성하기
툴바는 세 가지 작업을 다룹니다: Edit는 프레임 안의 단일 요소를 선택해서 Visual Editor를 열고, Draw는 스케치, 화살표, 스티키 노트로 보드에 주석을 달아 Agent가 읽을 수 있게 하며, Generate는 디자인에 필요한 이미지, 동영상, 벡터 그래픽을 만듭니다.
Edit 도구로 요소가 선택된 상태, 오른쪽에 열린 Visual Editor.
4. 라이브러리 패널에서 영감 가져오기
영감과 시작점을 위해 라이브러리 패널을 여세요. 템플릿은 라이브하고 편집 가능한 프레임으로 캔버스에 놓이고, Mobbin이 큐레이션한 영감은 다음 생성을 이끌어줄 정적인 참조 이미지로 놓입니다.
라이브러리 패널의 Templates 탭: 종류별로 그룹화된 검색 가능한 스타터 프레임.
각 구성 요소 살펴보기
Canvas
프레임을 생성, 배치, 반복적으로 다듬는 무한한 보드입니다.
Frames
프레임 종류, 프레임별 액션 바, Build, Focus.
Elements
프레임 내부의 개별 조각을 선택하고 편집하세요.
Chat
보드, 프레임, 또는 단일 요소에 대해 Agent에게 브리핑하세요.
Ambient intelligence
선택된 프레임 옆에 나타나는 원클릭 제안된 다음 단계.
Toolbar
전체 도구 카탈로그, 키보드 단축키, 보드 제스처.
Library panel
템플릿, Mobbin이 큐레이션한 영감, 여러분의 창작물.
다음 단계
- Design your first screen: 프롬프트로 첫 프레임을 생성하세요.
- What is Replit Design: 프롬프트에서 온브랜드 앱까지의 전체 여정.