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

# 에디터 및 도구

> Project Editor에서 사용할 수 있는 도구들 — 에디터, 프리뷰, 콘솔, 셸 등에 대해 알아보세요.

Project Editor에는 앱 빌드 경험을 강화하는 레이아웃 관리 및 통합 도구가 포함되어 있습니다.
이러한 Project Editor 기능은 개발 프로세스의 특정 측면을 전문적으로 처리하여,
설정보다 창작에 집중할 수 있게 해줍니다.

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

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

| 요소             | 설명                                                     | 기능                                                                                 | 사용 사례                                                                |
| -------------- | ------------------------------------------------------ | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| **Windows(창)** | 하나 이상의 패널을 포함하는 브라우저 탭                                 | <ul><li>여러 화면에 걸쳐 정리할 수 있음</li></ul>                                               | <ul><li>여러 화면에서 Project Editor 정리</li><li>여러 프로젝트를 동시에 작업</li></ul>  |
| **Panes(패널)**  | 하나 이상의 탭을 포함하는 창의 구역                                   | <ul><li>가로 및 세로 분할 지원</li><li>크기 조절 및 재배치 가능</li><li>창 내에서 플로팅 패널로 전환 가능</li></ul> | <ul><li>코드와 프리뷰를 나란히 보기</li><li>다양한 개발 작업을 위한 커스텀 레이아웃 만들기</li></ul> |
| **Tabs(탭)**    | 파일 에디터, Preview, Agent 등 Project Editor 도구를 정확히 하나씩 포함 | <ul><li>패널 간 이동 및 패널 내 재정렬 가능</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>

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

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

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

<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" /> **전체 도구**
  아이콘을 선택해 도구 검색 팝업 메뉴를 여세요.
</Accordion>

다음 스크린샷은 도구 도크에서 열려 있는 **전체 도구** 팝업 메뉴를 보여줍니다.

<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](/ko/features/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>

## 옵션 메뉴

옵션 메뉴를 사용하면 다음과 같은 레이아웃 작업을 수행할 수 있습니다.

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

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

다음 스크린샷은 좌측 패널의 옵션 팝업 메뉴를 보여줍니다.

<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="/ko/core-concepts/project-editor/app-setup/secrets" horizontal={true}>
    앱의 API 키, 자격 증명, 비밀번호를 안전하게 보호하세요.
  </Card>

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

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

  <Card title="User Settings" icon="gear" iconType="solid" href="/ko/features/editor/user-settings" horizontal={true}>
    Settings 도구를 통해 코딩 경험을 커스터마이즈하세요.
  </Card>

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

  <Card title="Shell" icon="terminal" iconType="solid" href="/ko/features/workspace-tools/shell" horizontal={true}>
    커맨드라인 인터페이스로 Project Editor와 상호작용하세요.
  </Card>

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