{}

{
    const ta = e.currentTarget;
    ta.style.height = "auto";
    ta.style.height = ta.scrollHeight + "px";
    updateAgentInputButtonState(findAgentInputContainer(ta));
  }} style={{
    display: "block",
    width: "100%",
    minHeight: "21px",
    maxHeight: "calc(14px * 1.5 * 10)",
    padding: 0,
    margin: 0,
    border: "none",
    outline: "none",
    resize: "none",
    fontSize: "14px",
    lineHeight: "1.5",
    color: "var(--ai-text-primary)",
    background: "transparent",
    fontFamily: "inherit",
    boxSizing: "border-box",
    overflowY: "auto"
  }} />
          </div>
          {}
          <div style={{
    position: "absolute",
    left: "8px",
    right: "8px",
    bottom: "8px",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  }}>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    overflow: "hidden",
    minWidth: 0
  }}>
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Add attachment" type="button">
                {PlusIcon}
              </button>
              <div id="agent-input-pills" data-agent-input-role="pills" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    overflow: "hidden"
  }}></div>
            </div>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    flexShrink: 0
  }}>
              {highlightPlan ? <div className="ai-plan-wrap" onClick={e => {
    const wrap = e.currentTarget;
    wrap.classList.toggle("ai-plan-off");
  }}>
                  <label className="ai-plan-btn-highlight" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    height: "32px",
    padding: "0 8px",
    cursor: "pointer",
    fontSize: "12px",
    fontFamily: "inherit",
    transition: "background 120ms ease-out"
  }}>
                    <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" defaultChecked />
                    <span>Plan</span>
                  </label>
                </div> : <label className="ai-plan-checkbox-label">
                  <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" />
                  <span>Plan</span>
                </label>}
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Start voice input" type="button">
                {MicIcon}
              </button>
              {highlightStart ? <div className="ai-start-wrap">
                  <button data-agent-input-role="start-button" className="ai-icon-btn ai-start-btn-highlight" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    borderRadius: "6px",
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                    {ArrowUpIcon}
                  </button>
                </div> : <button data-agent-input-role="start-button" className="ai-icon-btn" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                  {ArrowUpIcon}
                </button>}
            </div>
          </div>
        </div>
      </div>
    </div>;
};

## Project Editor란?

Project Editor는 Replit의 홈 베이스입니다: 빌드를 시작하고, 프로젝트를 관리하고, 앱이 실현되는 것을 보는 환경입니다. 여기서 빌드하고 싶은 것을 설명하면, [Agent](/references/agent/overview)가 코드를 작성하고, 프로젝트를 설정하고, 실시간으로 라이브 미리보기를 보여줍니다.

## 시작하기

프롬프트 박스에 빌드하고 싶은 것을 입력하세요. 아이디어를 평이한 언어로 설명하면 — "내 지출을 차트로 표시하는 예산 추적기", "내 커피숍의 랜딩 페이지", "어린이를 위한 AI 만화책 생성기" — Agent가 나머지를 처리합니다.

또한 캐러셀에서 프로젝트 유형을 선택하여 Agent에게 원하는 출력 종류 — 웹 앱, 모바일 앱, 슬라이드, 디자인 등 — 를 알려줄 수 있습니다. 또는 선택을 건너뛰고 아이디어를 설명하기만 하면 됩니다; Agent가 올바른 설정을 자동으로 파악합니다.

바로 시작하려면 [첫 번째 앱 빌드하고 게시하기](/ko/build/your-first-app)를 따르세요.

## Plan 모드

Plan 모드를 사용하면 브레인스토밍하고, 질문하고, 프로젝트를 계획할 수 있습니다. Agent가 검토하고 개선할 수 있는 순서가 있는 작업 목록을 만듭니다 — 계획에 만족하면 승인하고 Agent가 빌드를 시작합니다. Plan 모드를 사용하여 질문하거나 아이디어를 탐색할 수도 있습니다; Agent는 여러분이 종료할 때까지 변경을 하지 않습니다.

입력 하단의 버튼에서 Plan 모드를 전환하세요. [Plan 모드 가이드](/references/agent/plan-mode)에서 자세히 알아보세요.

## 빌드할 수 있는 것

프로젝트 유형을 선택하여 Agent에게 원하는 것을 알려주거나, 아이디어를 설명하고 Agent가 올바른 설정을 선택하게 하세요.

* **웹 앱** — 대시보드, 내부 도구, SaaS 제품, 랜딩 페이지
* **모바일 앱** — 단일 프롬프트에서 iOS 및 Android 앱
* **슬라이드 및 프레젠테이션** — 풍부한 레이아웃의 덱 생성
* **애니메이션** — 인터랙티브 워크스루 및 모션 그래픽
* **디자인** — [Design Canvas](/learn/design/canvas)의 시각적 목업 및 프로토타입
* **데이터 시각화** — 차트, 대시보드, 데이터베이스 기반 도구
* **문서** — CSV, PDF, PowerPoint 파일, Markdown 문서
* **스프레드시트** — 데이터 테이블 및 구조화된 출력

## Project Editor

Agent가 빌드를 시작하면 Project Editor에서 프로젝트가 형성되는 것을 볼 수 있습니다. 한쪽에는 Agent와의 대화가, 다른 쪽에는 앱의 라이브 미리보기가 패널로 나뉩니다.

### 스레드

Agent와의 모든 대화는 스레드에서 이루어집니다. 메인 스레드는 원하는 것을 설명하고 Agent가 빌드하는 것을 보는 곳입니다. [작업 시스템](/core-concepts/agent/task-system)을 사용할 때 각 백그라운드 작업은 자체 스레드를 갖습니다 — Agent가 대화를 혼합하지 않고 작업을 격리된 상태로 유지할 수 있습니다.

### 작업 보드

작업 보드는 작업을 **Drafts**, **Active**, **Ready**, **Done** 컬럼으로 구성합니다. 각 작업은 진행됨에 따라 왼쪽에서 오른쪽으로 이동하여 계획된 것, Agent가 작업 중인 것, 완료된 것을 한눈에 볼 수 있습니다. [작업 시스템](/core-concepts/agent/task-system)에서 자세히 알아보세요.

### Design Canvas

Design Canvas는 코드에 커밋하기 전에 목업을 만들고 개선할 수 있는 시각적 에디터입니다. 요소를 드래그하고, 레이아웃을 조정하고, 디자인을 반복한 다음 Agent가 작동하는 앱으로 변환하게 하세요. [Design Canvas](/learn/design/canvas)에서 자세히 알아보세요.

## 협업

팀 워크스페이스를 만들어 함께 빌드하세요. 팀원을 초대하고, 프로젝트를 공유하고, 실시간으로 같은 앱에서 작업하세요. 팀 설정은 [팀 워크스페이스](/references/collaboration/team-workspaces)를, 프로젝트 수준 협업은 [팀원 초대하기](/build/invite-teammates)를 참조하세요.

## 코드 및 디자인 가져오기

이미 프로젝트가 있으신가요? GitHub, Figma에서 Replit으로 가져오거나 파일을 직접 업로드하세요. Agent가 이전에 중단한 곳에서 계속하여 기존 코드나 디자인에서 빌드를 계속할 수 있습니다. [Replit으로 가져오기](/build/import-from-providers)를 참조하세요.

## 다음 단계

## 자주 묻는 질문

<Accordion title="코딩 방법을 알아야 하나요?">
  아니요. 원하는 것을 평이한 언어로 설명하면 Agent가 기술적인 세부사항을 처리합니다. 원한다면 직접 편집할 수도 있습니다.
</Accordion>

<Accordion title="브라우저를 닫으면 어떻게 되나요?">
  프로젝트는 클라우드에 저장됩니다. 언제든지 돌아와 중단한 곳에서 바로 시작할 수 있습니다: 파일, 기록, 실행 중인 앱이 모두 보존됩니다.
</Accordion>

<Accordion title="다른 사람들과 함께 작업할 수 있나요?">
  예. 특정 프로젝트에 협업자를 초대하거나 멤버가 모든 프로젝트에 접근할 수 있는 팀 워크스페이스를 만들 수 있습니다. [팀 워크스페이스](/references/collaboration/team-workspaces)와 [팀원 초대하기](/build/invite-teammates)를 참조하세요.
</Accordion>

<Accordion title="앱을 어떻게 게시하나요?">
  앱이 준비되면 Project Editor에서 직접 라이브 URL에 배포하세요. [배포](/learn/projects-and-artifacts/replit-deployments)를 참조하세요.
</Accordion>

## 이용 가능 여부

Project Editor는 모든 플랜에서 사용할 수 있습니다. 향상된 컴퓨팅 및 상시 배포 같은 일부 기능은 유료 플랜이 필요합니다. 자세한 내용은 [청구](/billing/ai-billing)를 참조하세요.