> ## 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에 제공하는 파일과 도구를 연결하세요.

export const IntegrateYourToolsCover = () => <div className="chat-mkt" role="img" aria-label="Supported service context connecting into a central Replit workspace" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -16%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.47), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 50%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "grid",
  width: "100%",
  minHeight: "inherit",
  placeItems: "center",
  padding: "clamp(14px, 3vw, 28px)",
  boxSizing: "border-box"
}}>
        <div style={{
  position: "absolute",
  left: "clamp(13px, 8%, 82px)",
  top: "26%",
  display: "grid",
  width: "clamp(42px, 8vw, 64px)",
  height: "clamp(42px, 8vw, 64px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 16,
  background: "linear-gradient(180deg, rgba(255,255,255,.31), rgba(255,255,255,.12))",
  boxShadow: "0 12px 24px rgba(55,27,18,.16)",
  backdropFilter: "blur(5px)"
}}>
          <svg viewBox="0 0 24 24" width="56%" fill="rgba(255,255,255,.88)">
            <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.527 2.527 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
          </svg>
        </div>
        <div style={{
  position: "absolute",
  left: "clamp(22px, 12%, 112px)",
  bottom: "clamp(18px, 9%, 44px)",
  display: "grid",
  width: "clamp(38px, 7vw, 58px)",
  height: "clamp(38px, 7vw, 58px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.14)",
  backdropFilter: "blur(5px)"
}}>
          <div style={{
  display: "grid",
  gap: 3,
  width: "48%"
}}>
            {[0, 1, 2].map(line => <span key={line} style={{
  display: "block",
  height: 4,
  borderRadius: 999,
  background: line === 0 ? "rgba(255,255,255,.84)" : "rgba(255,255,255,.44)"
}} />)}
          </div>
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(13px, 8%, 82px)",
  top: "26%",
  display: "grid",
  width: "clamp(42px, 8vw, 64px)",
  height: "clamp(42px, 8vw, 64px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 16,
  background: "linear-gradient(180deg, rgba(255,255,255,.31), rgba(255,255,255,.12))",
  boxShadow: "0 12px 24px rgba(55,27,18,.16)",
  backdropFilter: "blur(5px)"
}}>
          <div style={{
  width: "46%",
  height: "40%",
  border: "1px solid rgba(255,255,255,.86)",
  borderRadius: 4,
  boxSizing: "border-box"
}} />
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(22px, 12%, 112px)",
  bottom: "clamp(18px, 9%, 44px)",
  display: "grid",
  width: "clamp(38px, 7vw, 58px)",
  height: "clamp(38px, 7vw, 58px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.14)",
  backdropFilter: "blur(5px)"
}}>
          <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(2, 1fr)",
  gap: 3,
  width: "48%",
  height: "48%"
}}>
            {[0, 1, 2, 3].map(cell => <span key={cell} style={{
  borderRadius: 3,
  background: cell === 0 ? "rgba(255,255,255,.84)" : "rgba(255,255,255,.38)"
}} />)}
          </div>
        </div>
        <div style={{
  position: "relative",
  display: "grid",
  width: "clamp(124px, 24vw, 194px)",
  height: "clamp(124px, 24vw, 194px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.68)",
  borderRadius: 28,
  background: "linear-gradient(145deg, rgba(255,255,255,.4), rgba(255,255,255,.12))",
  boxShadow: "0 24px 44px rgba(67,21,7,.24)",
  backdropFilter: "blur(8px)"
}}>
          <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(2, 16px)",
  gap: 7
}}>
            {[0, 1, 2, 3].map(tile => <span key={tile} style={{
  width: 16,
  height: 16,
  borderRadius: 5,
  background: tile === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.46)",
  boxShadow: tile === 0 ? "0 0 14px rgba(255,255,255,.42)" : "none"
}} />)}
          </div>
          <div style={{
  position: "absolute",
  bottom: "16%",
  display: "flex",
  gap: 5
}}>
            {[0, 1, 2].map(node => <span key={node} style={{
  width: 5,
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.52)"
}} />)}
          </div>
        </div>
      </div>
    </div>
  </div>;

export const chatIcon = (name, size = 19) => {
  const paths = {
    MessageCircle: <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />,
    ChartNoAxesCombined: <>
        <path d="M12 16v5" />
        <path d="M16 14v7" />
        <path d="M20 10v11" />
        <path d="m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.708 0L2 15" />
        <path d="M4 18v3" />
        <path d="M8 14v7" />
      </>,
    Workflow: <>
        <rect width="8" height="8" x="3" y="3" rx="2" />
        <path d="M7 11v4a2 2 0 0 0 2 2h4" />
        <rect width="8" height="8" x="13" y="13" rx="2" />
      </>,
    Lightbulb: <>
        <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" />
        <path d="M9 18h6" />
        <path d="M10 22h4" />
      </>,
    Code2: <>
        <path d="m18 16 4-4-4-4" />
        <path d="m6 8-4 4 4 4" />
        <path d="m14.5 4-5 16" />
      </>,
    Presentation: <>
        <path d="M2 3h20" />
        <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
        <path d="m7 21 5-5 5 5" />
      </>,
    PanelsTopLeft: <>
        <rect width="18" height="18" x="3" y="3" rx="2" />
        <path d="M3 9h18" />
        <path d="M9 21V9" />
      </>,
    Keyboard: <>
        <rect width="20" height="14" x="2" y="5" rx="2" />
        <path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M10 13h.01M14 13h.01M18 13h.01M8 17h8" />
      </>,
    Layers3: <>
        <path d="m12 2 9 5-9 5-9-5 9-5Z" />
        <path d="m3 12 9 5 9-5M3 17l9 5 9-5" />
      </>,
    CalendarClock: <>
        <path d="M16 2v4M8 2v4M3 10h18" />
        <rect width="18" height="19" x="3" y="4" rx="2" />
        <path d="M12 14v3l2 1" />
      </>,
    ConversationProject: <>
        <path d="M3 4h8v6H6l-3 2V4Z" />
        <rect width="9" height="9" x="12" y="11" rx="1.5" />
        <path d="M12 14h9M15 11v9" />
      </>,
    CursorDesign: <>
        <path d="m5 3 13 7-6 2-2 6L5 3Z" />
        <path d="M15 16h6M18 13v6" />
      </>,
    AppWindow: <>
        <rect width="20" height="18" x="2" y="3" rx="2" />
        <path d="M2 8h20M6 5.5h.01M9 5.5h.01" />
      </>,
    CloudUpload: <>
        <path d="M12 13v8M8 17l4-4 4 4" />
        <path d="M20 16.5A5 5 0 0 0 18 7h-1.3A7 7 0 0 0 3.3 9.4 4.5 4.5 0 0 0 5 18h2" />
      </>,
    Image: <>
        <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
        <circle cx="9" cy="9" r="2" />
        <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
      </>,
    FileUp: <>
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
        <path d="M14 2v4a2 2 0 0 0 2 2h4" />
        <path d="M12 12v6" />
        <path d="m15 15-3-3-3 3" />
      </>,
    Search: <>
        <circle cx="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </>,
    Sparkles: <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />,
    Briefcase: <>
        <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
        <rect width="20" height="14" x="2" y="6" rx="2" />
      </>,
    WandSparkles: <>
        <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" />
        <path d="m14 7 3 3" />
        <path d="M5 6v4" />
        <path d="M19 14v4" />
        <path d="M10 2v2" />
        <path d="M7 8H3" />
        <path d="M21 16h-4" />
        <path d="M11 3H9" />
      </>
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name] ?? paths.Sparkles}
    </svg>;
};

export const CoffeeShopScreenshotFrame = ({src, alt}) => <div style={{
  margin: "28px 0",
  overflow: "hidden",
  borderRadius: "24px",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)",
  boxShadow: "0 16px 32px rgba(112,36,13,.18)"
}}>
    <div style={{
  padding: "clamp(10px, 2vw, 18px)",
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}}>
      <a href={src} target="_blank" rel="noreferrer" aria-label={`Open ${alt} at full size`} style={{
  display: "block",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.62)",
  borderRadius: "16px",
  background: "rgba(255,255,255,.96)",
  boxShadow: "0 12px 28px rgba(55,27,18,.2)",
  cursor: "zoom-in"
}}>
        <img src={src} alt={alt} style={{
  display: "block",
  width: "100%",
  height: "auto"
}} />
      </a>
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

<IntegrateYourToolsCover />

이제 통합에 대해 배웠으니, 이를 커피숍 출시에 적용해 보겠습니다.

역세권 통근자 바가 아니라 **동네 카페**를 만든다는 방향을 정했습니다. 이
방향을 실행 가능한 계획으로 바꾸는 데 필요한 자료를 Replit에 제공하세요.

통합은 Replit을 이미 사용 중인 도구 및 파일과 연결합니다. 이를 통해
Replit은 관련 정보를 가져오거나 작업에 필요한 조치를 수행할 수 있습니다.
**[Slack](/ko/features/integrations/overview#connectors)**,
**[Google Drive](/ko/features/integrations/overview#connectors)**,
**[Notion](/ko/features/integrations/overview#connectors)**, 또는
\*\*[Salesforce](/ko/features/integrations/overview#connectors)\*\*를 비롯해
450개 이상의 다른 서비스를 연결할 수 있습니다.

커피숍의 경우, Google Drive는 Replit에게 예산, 위치 메모, 메뉴 아이디어,
사진, 비주얼 레퍼런스에 대한 접근 권한을 제공합니다. Notion은 출시 계획,
결정 사항, 미해결 질문을 문서화할 공간을 제공합니다.

[도구 통합하기](/ko/chat/integrate-your-tools)에 대해 자세히 알아보세요.

<Steps>
  <Step title="Replit에게 자료를 한데 모아 달라고 요청하기">
    아래 요청으로 시작하세요. Replit은 계획을 완성하는 데 필요한 것을
    확인하고, 접근 권한이 필요할 때 서비스 연결을 요청합니다.

    <AiPrompt>
      제 카페 파일을 활용해 동네 카페의 첫 달 출시 계획을 만들어 주세요.
      관련 가정을 업데이트한 다음, 컨셉, 주요 결정 사항, 미해결 질문, 출시
      체크리스트를 Notion에 문서화해 주세요.
    </AiPrompt>
  </Step>

  <Step title="Replit이 요청하면 Google Drive 연결하기">
    Replit이 사용할 자료를 검토할 수 있도록 Google Drive 연결을 승인하세요.
    연결 요청은 Conversation 내에서 바로 열립니다.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/connect-google-drive.png" alt="카페 파일을 검토할 수 있도록 Google Drive 연결을 요청하는 Replit" />
  </Step>

  <Step title="Replit이 계획을 문서화해야 할 때 Notion 연결하기">
    Replit이 출시 브리프를 만들려고 할 때 Notion을 승인하세요. 그러면 컨셉,
    결정 사항, 미해결 질문, 체크리스트를 한 곳에 기록할 수 있습니다.
  </Step>
</Steps>

Google Drive는 Replit에게 작업의 근거가 되는 자료를 제공합니다. Notion은
새로운 질문에 답하고 결정을 내리는 동안 계속 발전하는 계획을 한 곳에
유지합니다.

[맥락 추가하기](/ko/chat/add-context), [파일 업로드하기](/ko/chat/upload-and-use-files),
[도구 통합하기](/ko/chat/integrate-your-tools)에 대해 자세히 알아보세요.

## 다음 단계

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/ko/home/watch-the-competition">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-icon">
        {chatIcon("Clock3", 32)}
      </div>
    </div>

    <div className="chat-example-tag">Routine</div>
    <div className="chat-card-title">경쟁 상황 지켜보기</div>
    <p>출시를 준비하는 동안 변화를 지켜볼 Routine을 설정하세요.</p>
    <div className="chat-card-link">계속하기 →</div>
  </a>
</section>