> ## 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.

# Replit Design 구성 요소

> Replit Design의 구성 요소를 만나보세요: Canvas, 프레임, 요소, 채팅, ambient intelligence, 툴바, 라이브러리 패널이 어떻게 함께 작동하는지 알아봅니다.

Replit Design은 근본적으로 프레임을 표시하는 무한한 캔버스입니다. 이 페이지의 나머지 부분은 그 프레임들을 다루는 방법입니다:

* 무한한 보드에서 디자인 프레임을 생성하고 배치하기
* 채팅, 제안, 툴바로 각 프레임을 반복적으로 다듬기
* 프레임의 어떤 부분이든 대상으로 지정하여 그 부분만 변경하기
* 보드를 벗어나지 않고 템플릿과 실제 제품 영감 가져오기

## 한눈에 보는 보드

<Frame>
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-anatomy.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=ab44fbb9de376c3f43a0395f304f911a" alt="라벨이 붙은 영역이 있는 Canvas: 세 개의 Frames(Website, Design System, APEX X1 슈퍼카의 Design 목업), Website 프레임 안에서 강조된 Element, Chat 패널, 제안된 다음 단계를 제안하는 Ambient intelligence, 하단의 Toolbar, Inspiration 탭이 열린 Library 패널" width="2000" height="1255" data-path="images/replitai/canvas-anatomy.png" />
</Frame>

Replit Design 워크스페이스는 일곱 가지 구성 요소로 이루어집니다:

* **[Canvas](/ko/design/canvas)**: Project Editor의 디자인 뷰로, 모든 프레임, 도형, 노트를 담는 무한한 팬앤줌 보드입니다.
* **[Frames](/ko/design/frames)**: Canvas의 모든 타일입니다. 프레임은 라이브 아티팩트(웹사이트, 슬라이드), 디자인 목업, 이미지, 동영상, 벡터 그래픽이 될 수 있습니다.
* **[Elements](/ko/design/elements)**: 제목, 버튼, 이미지, 폼 필드 같이 프레임 내부의 개별 조각들입니다.
* **[Chat](/ko/design/chat-about-your-design)**: 캔버스에 도킹된 Agent 채팅입니다. 만들고 싶은 것을 설명하거나, 프레임을 선택해서 작거나 큰 편집을 요청하세요. 캔버스를 전체로 사용하려면 최소화하세요.
* **[Ambient intelligence](/ko/design/explore-suggestions)**: 선택된 프레임 옆에 나타나는 제안된 다음 단계로, 각각 클릭 한 번으로 새로운 방향을 생성합니다. 작동 방식은 [Explore suggestions](/ko/design/explore-suggestions)를 참조하세요.
* **[Toolbar](/ko/design/toolbar)**: Canvas 하단에 떠 있는 바로, Interact, Pan, Chat, Draw, Edit, Generate 도구가 있습니다.
* **[Library panel](/ko/design/library-panel)**: 캔버스에 바로 놓을 수 있는 스타터 템플릿, Mobbin이 큐레이션한 영감, 그리고 여러분의 이전 창작물들입니다.

## 함께 작동하는 방식

각 구성 요소는 이전 것이 멈춘 곳에서 이어받아, 빈 보드에서 빌드할 수 있는 디자인까지 이어집니다.

### 1. 캔버스에 프레임 배치하기

채팅 프롬프트나 툴바의 **Generate** 메뉴로 프레임을 생성하세요. 프레임은 디자인 목업, 웹 앱, 모바일 앱, 슬라이드, 이미지, 동영상, 벡터 그래픽이 될 수 있습니다.

### 2. 프레임 반복적으로 다듬기

프레임을 선택해서 개별적으로 작업하세요. 여러분만의 표현으로 채팅하거나, [제안](/ko/design/explore-suggestions)을 따라 새로운 방향으로 분기하거나, **Focus**로 가까이서 작업하세요. 준비가 되면 **Build**로 라이브 앱으로 만드세요.

<Frame caption="선택된 프레임과 그 액션 바: Build, Focus, 그 외 옵션들.">
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=c767372a08966097abccb48bf11591c7" alt="APEX X1 Design 프레임이 선택된 Canvas, 상단에 종류 레이블과 Build, Focus, 추가 옵션 액션이 있는 프레임별 액션 바, 채팅 프롬프트 상자에 칩으로 첨부된 프레임" width="2000" height="1290" data-path="images/replitai/canvas-frame-action-bar.png" />
</Frame>

### 3. 툴바로 편집, 주석 달기, 생성하기

툴바는 세 가지 작업을 다룹니다: **Edit**는 프레임 안의 단일 요소를 선택해서 Visual Editor를 열고, **Draw**는 스케치, 화살표, 스티키 노트로 보드에 주석을 달아 Agent가 읽을 수 있게 하며, **Generate**는 디자인에 필요한 이미지, 동영상, 벡터 그래픽을 만듭니다.

<Frame caption="Edit 도구로 요소가 선택된 상태, 오른쪽에 열린 Visual Editor.">
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-edit.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=94149292dc20f5bd7dbd4a754ef57099" alt="div 요소가 선택된 슈퍼카 렌탈 웹사이트에서 활성화된 Edit 도구, Text, Layout, Color, Border 컨트롤과 Discard, Save edits 버튼이 있는 Visual Editor 패널" width="2000" height="1269" data-path="images/replitai/canvas-edit.png" />
</Frame>

### 4. 라이브러리 패널에서 영감 가져오기

영감과 시작점을 위해 라이브러리 패널을 여세요. 템플릿은 라이브하고 편집 가능한 프레임으로 캔버스에 놓이고, Mobbin이 큐레이션한 영감은 다음 생성을 이끌어줄 정적인 참조 이미지로 놓입니다.

<Frame caption="라이브러리 패널의 Templates 탭: 종류별로 그룹화된 검색 가능한 스타터 프레임.">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/library-templates.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=1e02d8d303bf6a33006e116feba2ae22" alt="검색 상자, 카테고리 필터, 포스터와 두 개의 랜딩 페이지를 포함한 템플릿 카드가 있는 라이브러리 패널의 Templates 탭" width="665" height="583" data-path="images/design/replit-design/library-templates.png" />
</Frame>

## 각 구성 요소 살펴보기

<Columns cols={2}>
  <Card title="Canvas" icon="object-group" href="/ko/design/canvas">
    프레임을 생성, 배치, 반복적으로 다듬는 무한한 보드입니다.
  </Card>

  <Card title="Frames" icon="square-dashed" href="/ko/design/frames">
    프레임 종류, 프레임별 액션 바, Build, Focus.
  </Card>

  <Card title="Elements" icon="object-ungroup" href="/ko/design/elements">
    프레임 내부의 개별 조각을 선택하고 편집하세요.
  </Card>

  <Card title="Chat" icon="comments" href="/ko/design/chat-about-your-design">
    보드, 프레임, 또는 단일 요소에 대해 Agent에게 브리핑하세요.
  </Card>

  <Card title="Ambient intelligence" icon="lightbulb" href="/ko/design/explore-suggestions">
    선택된 프레임 옆에 나타나는 원클릭 제안된 다음 단계.
  </Card>

  <Card title="Toolbar" icon="toolbox" href="/ko/design/toolbar">
    전체 도구 카탈로그, 키보드 단축키, 보드 제스처.
  </Card>

  <Card title="Library panel" icon="images" href="/ko/design/library-panel">
    템플릿, Mobbin이 큐레이션한 영감, 여러분의 창작물.
  </Card>
</Columns>

## 다음 단계

* [Design your first screen](/ko/design/design-your-first-screen): 프롬프트로 첫 프레임을 생성하세요.
* [What is Replit Design](/ko/design/what-is-replit-design): 프롬프트에서 온브랜드 앱까지의 전체 여정.