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

# Editor & Tools

> Project Editor에서 사용할 수 있는 도구들—편집기, Preview, Console, Shell 등—에 대해 알아보세요.

Project Editor에는 앱 개발 경험을 지원하는 레이아웃 관리 기능과 통합 도구들이 포함되어 있습니다.
이러한 Project Editor 기능들은 개발 과정의 특정 측면을 처리하는 데 특화되어 있어,
설정에 신경 쓰지 않고 개발에 집중할 수 있도록 도와줍니다.

## 커스터마이즈 가능한 Project Editor 레이아웃

Project Editor의 레이아웃 관리 도구를 사용하면 개발 환경의 구성 요소를 맞춤 설정할 수 있습니다.
다음과 같은 사용자 인터페이스 요소 유형으로 구성됩니다:

| 요소          | 설명                                                     | 기능                                                                                    | 사용 사례                                                                    |
| ----------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| **Windows** | 하나 이상의 Pane을 포함하는 브라우저 탭                               | <ul><li>여러 화면에 걸쳐 정리 가능</li></ul>                                                     | <ul><li>여러 화면에 걸쳐 Project Editor 정리하기</li><li>동시에 여러 프로젝트 작업하기</li></ul> |
| **Panes**   | 하나 이상의 탭을 포함하는 창의 섹션                                   | <ul><li>가로 및 세로 분할 지원</li><li>크기 조정 및 재배치 가능</li><li>창 내에서 플로팅 Pane으로 변환 가능</li></ul> | <ul><li>코드와 Preview를 나란히 보기</li><li>다양한 개발 작업을 위한 커스텀 레이아웃 만들기</li></ul> |
| **Tabs**    | 파일 편집기, Preview, Agent 등 정확히 하나의 Project Editor 도구를 포함 | <ul><li>Pane 간 이동 및 내부 순서 변경 가능</li><li>한 번의 클릭으로 다른 파일이나 도구로 전환 가능</li></ul>         | <ul><li>필요할 때 다른 도구나 파일 열기</li></ul>                                     |

다음 동영상은 각 Project Editor 레이아웃 요소를 보여줍니다:

<Frame>
  <iframe src="https://www.loom.com/embed/495838f6de3a42a890461572615ad48e?sid=df5d78b9-6d2e-4396-8853-4e3fa2b81db4" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## 파일 트리

파일 트리는 Replit App의 모든 파일과 디렉토리 목록을 표시합니다.

<Accordion title="파일 트리에 접근하는 방법">
  왼쪽의 <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/files-icon.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=4b9ac8b70c07960d9f9a3f6eacee4ab6" alt="folder with arrows icon" width="16" height="16" data-path="images/icons/files-icon.svg" /> 폴더 아이콘을 선택하면
  파일 트리의 표시 여부를 전환할 수 있습니다.
</Accordion>

파일 트리에서 다음 작업을 수행할 수 있습니다:

* 폴더를 선택하여 내용 표시
* 파일을 선택하거나 Pane으로 드래그하여 파일 편집기에서 열기
* 파일 복제, 이름 변경, 이동, 다운로드, 삭제 등의 파일 작업 수행

다음 동영상은 파일 트리의 여러 작업을 보여줍니다:

<Frame>
  <iframe src="https://www.loom.com/embed/84129671e4fd4346b426b726609a7cae?sid=ea104265-b5ac-4f93-bf50-6136258de174" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## 도구 독

도구 독을 사용하면 Project Editor 도구를 검색하고 새 탭에서 열 수 있습니다.

<Accordion title="도구 독에 접근하는 방법">
  자주 사용하는 도구 중에서 선택하거나, <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=579643854fb13c402de516695e52c554" alt="All tools icon" width="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" /> **All tools**
  아이콘을 선택하여 도구 검색 팝업 메뉴를 열 수 있습니다.
</Accordion>

다음 스크린샷은 도구 독에서 열린 **All tools** 팝업 메뉴를 보여줍니다:

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/tools-dock.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=7a48f62509f3cb7aaab01c8aa7f8ba24" alt="screenshot of the tool dock" height="50" data-path="images/workspace/tools-dock.png" />
</Frame>

## Run 버튼

**Run** 버튼은 Replit App의 선택된 워크플로우를 실행합니다.

<Accordion title="Run 버튼에 접근하는 방법">
  **Run** 버튼은 Project Editor 화면 상단에 위치합니다. 버튼을 선택하여 워크플로우를 실행하세요.

  Replit App이 실행 중일 때 버튼 레이블은 **Stop**으로 바뀝니다. 버튼을 선택하여 앱을 중지하세요.
</Accordion>

워크플로우를 선택, 확인 및 관리하는 방법에 대해서는 [Workflows](/references/workspace-tools/workflows/)를 참조하세요.

다음 동영상은 워크플로우를 확인하고 실행하는 방법을 보여줍니다:

<Frame>
  <iframe src="https://www.loom.com/embed/086c8447bf234ca290ad11f0bbb2e13e?sid=1e8597e5-a3c4-4b36-b42e-f3ad97533334" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Spotlight 페이지

Spotlight 페이지에서는 Replit App 커버 페이지를 확인하고 수정하며 공유 옵션에 접근할 수 있습니다.

<Accordion title="Spotlight 페이지에 접근하는 방법">
  Project Editor 왼쪽 상단에 있는 프로젝트 이름을 선택하면 Spotlight 페이지를 전환할 수 있습니다.
</Accordion>

다음 동영상은 Spotlight 페이지에 접근하는 방법을 보여줍니다:

<Frame>
  <iframe src="https://www.loom.com/embed/568fa9603a5546919e97b06695ea1da5?sid=cbc2a2f4-ae3f-4a96-85ef-45941f587d35" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## 옵션 메뉴

옵션 메뉴에서는 다음과 같은 레이아웃 작업을 수행할 수 있습니다:

* **Window 관리**: Replit App의 Project Editor를 새 창에서 열기
* **Pane 관리**: Pane 추가, 이동, 최대화, 플로팅과 고정 위치 전환
* **Tab 관리**: 다른 탭 열기 또는 선택, 탭을 다른 Pane으로 이동, 탭 닫기

<Accordion title="옵션 메뉴에 접근하는 방법">
  활성 탭의 오른쪽 상단 모서리에 있는 <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/vertical-dots.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=7b4b6a9992b3b20202297b60b6ef416d" alt="vertical dots icon" height="16" width="16" data-path="images/icons/vertical-dots.svg" /> 세로 점 세 개를
  선택하면 옵션 메뉴가 열립니다.
</Accordion>

다음 스크린샷은 왼쪽 Pane의 옵션 팝업 메뉴를 보여줍니다:

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/workspace-options-menu.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=5d8892fb1057bfc37de6aff5af278295" alt="screenshot showing the Project Editor options menu" width="1968" height="1136" data-path="images/workspace/workspace-options-menu.png" />
</Frame>

## 검색 바

검색 바를 사용하면 Project Editor 내에서 파일, 텍스트 또는 도구를 찾을 수 있습니다.

<Accordion title="검색 바에 접근하는 방법">
  1. 상단의 <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=d3feed840da2d19e1ee4873d137114dc" alt="magnifying glass icon" width="16" height="16" data-path="images/icons/workspace-search-icon.svg" /> 돋보기 아이콘을 선택하여 검색 바를 엽니다.
  2. 검색어를 입력하고 자동 완성 제안에서 선택합니다.
</Accordion>

다음 스크린샷은 검색 팝업 메뉴를 보여줍니다:

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/search-menu.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=205cdb6244d368c4b7e57215f1328e42" alt="screenshot showing the Project Editor search menu" width="1732" height="1224" data-path="images/workspace/search-menu.png" />
</Frame>

## 리소스 패널

리소스 패널은 RAM, CPU, 저장 공간을 포함한 개발 환경의 컴퓨팅 리소스와 사용량을 표시합니다.
이 정보는 Replit App의 게시 요구사항을 예측하고 최적화하는 데 도움이 됩니다.

<Accordion title="리소스 패널에 접근하는 방법">
  1. 앱 이름 옆에 있는 <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/resources.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=8df05261182e3e39f28dcccf809d66c2" alt="stacked computers icon" width="16" height="16" data-path="images/icons/resources.svg" /> 리소스 아이콘을 선택하여 패널을 전환합니다.
  2. **Compute** 또는 **Storage** 항목 위에 마우스를 올리면 자세한 정보를 볼 수 있습니다.
</Accordion>

다음 스크린샷은 리소스 패널을 보여줍니다:

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/resources-panel.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=63449b197613dc36bf9dcd1f9c17e7c7" alt="screenshot showing the Project Editor resources panel" width="1214" height="652" data-path="images/workspace/resources-panel.png" />
</Frame>

## 도구

다른 Project Editor 도구들에 대해 더 자세히 알아보려면 다음 목록에서 선택하세요:

<CardGroup cols={3}>
  <Card title="Secrets" icon="key" iconType="solid" href="/core-concepts/project-editor/app-setup/secrets" horizontal={true}>
    앱의 API 키, 자격 증명, 비밀번호를 안전하게 보호하세요.
  </Card>

  <Card title="File History" icon="clock-rotate-left" iconType="solid" href="/references/version-control/file-history" horizontal={true}>
    Replit의 버전 추적 기능으로 시간을 되돌려 잃어버린 편집 내용을 복구하세요.
  </Card>

  <Card title="Multiplayer" icon="users" iconType="solid" href="/build/invite-teammates" horizontal={true}>
    두 명 이상의 사용자와 실시간으로 함께 코딩하세요.
  </Card>

  <Card title="User Settings" icon="gear" iconType="solid" href="/references/editor/user-settings" horizontal={true}>
    Settings 도구를 통해 코딩 경험을 맞춤 설정하세요.
  </Card>

  <Card title="Console" icon="terminal" iconType="solid" href="/references/workspace-tools/console" horizontal={true}>
    Replit App의 출력을 확인하세요.
  </Card>

  <Card title="Shell" icon="terminal" iconType="solid" href="/references/workspace-tools/shell" horizontal={true}>
    명령줄 인터페이스를 사용하여 Project Editor와 상호작용하세요.
  </Card>

  <Card title="Preview" icon="laptop" iconType="solid" href="/references/editor/preview" horizontal={true}>
    웹 애플리케이션을 Preview하고 디버그하세요.
  </Card>
</CardGroup>