AI 코딩 에디터: Cline의 작동 방식 알아보기

8.1K 00

최근 몇 년 동안 인공지능(AI) 기술은 프로그래밍에 큰 변화를 일으켰습니다. v0 및 bolt.new부터 다음과 같은 에이전트 기술을 통합하는 프로그래밍 도구까지. 커서 와 윈드서프에서 보듯이 AI 코딩은 소프트웨어 개발 프로세스, 특히 신속한 프로토타이핑과 개념 증명 단계에서 핵심적인 역할을 할 수 있는 큰 잠재력을 보여주었습니다. AI 지원 코딩에서 직접 프로젝트 생성으로 진화한 기술적 원리는 무엇일까요?

이 글에서는 오픈소스 프로젝트인 Cline 예를 들어, 현재 구현된 AI 코딩 제품을 분석하여 기본 원리를 이해함으로써 독자들이 AI 에디터를 더 잘 적용하여 개발 효율성을 높일 수 있도록 돕습니다.

AI 코딩 편집기마다 구현상의 차이가 있을 수 있다는 점에 유의하세요. 또한 이 문서에서는 도구 사용의 구현에 대한 자세한 내용은 다루지 않습니다.

Cline의 워크플로 개요

Cline의 작동 방식을 보다 명확하게 보여드리기 위해 워크플로우의 도식을 살펴보겠습니다:

Cline의 핵심 메커니즘은 시스템 프롬프트의 효율적인 사용과 LLM(대규모 언어 모델)의 명령 팔로잉 기능입니다. 프로그래밍 작업을 시작할 때 Cline은 시스템 프롬프트, 사용자 정의 프롬프트, 사용자 입력, 프로젝트 환경에 대한 정보(예: 프로젝트 파일 목록, 현재 열려 있는 에디터 탭 등)를 포함한 모든 관련 정보를 수집하고 이 정보를 통합하여 LLM에 제출합니다.

LLM이 이 정보를 수신하면 명령에 따라 적절한 솔루션과 작동 지침을 생성합니다.Cline은 LLM이 반환한 작동 지침을 다음과 같이 구문 분석합니다. <execute_command /> (명령 실행) 및 <read_file /> (파일 읽기) 등의 작업을 수행하고, 미리 작성된 도구 사용 기능을 호출하여 이러한 작업을 수행한 후 후속 처리를 위해 결과를 LLM에 피드백합니다. Cline은 일반적으로 하나의 프로그래밍 작업을 완료하는 과정에서 여러 번 LLM과 상호 작용해야 하므로 복잡한 작업은 여러 차례의 대화를 통해 단계별로 완료할 수 있다는 점에 주목할 필요가 있습니다.

시스템 프롬프트의 역할

Cline의 시스템 프롬프트는 v0의 라인을 따라 설계되었으며 마크다운 및 XML 형식으로 작성되었습니다. 시스템 프롬프트의 핵심 역할은 LLM의 도구 사용 규칙과 예제를 상세히 정의하여 다양한 도구를 효과적으로 사용하여 프로그래밍 작업을 완료하는 방법을 LLM에 안내하는 것입니다.

Cline의 시스템 프롬프트에는 도구 사용에 대한 서식 지정 사양이 자세히 나와 있습니다:

# Tool Use Formatting
Tool use is formatted using XML-style tags. The tool name is enclosed in opening and closing tags, and each parameter is similarly enclosed within its own set of tags. Here's the structure:
<tool_name>
<parameter1_name>value1</parameter1_name>
<parameter2_name>value2</parameter2_name>
...
</tool_name>
For example:
<read_file>
<path>src/main.js</path>
</read_file>
Always adhere to this format for the tool use to ensure proper parsing and execution.
# Tools
## execute_command
## write_to_file
...
## Example 4: Requesting to use an MCP tool
<use_mcp_tool>
<server_name>weather-server</server_name>
<tool_name>get_forecast</tool_name>
	<arguments>
{
"city": "San Francisco",
"days": 5
}
</arguments>
</use_mcp_tool>

또한 MCP(모델 컨텍스트 프로토콜) 서버에 대한 정보가 시스템 프롬프트에 주입되어 MCP 서버에서 제공하는 추가 도구와 리소스를 통해 LLM의 기능을 확장할 수 있습니다.

MCP SERVERS
The Model Context Protocol (MCP) enables communication between the system and locally running MCP servers that provide additional tools and resources to extend your capabilities.
# Connected MCP Servers
...

사용자는 .clinerules 파일을 통해 시스템 프롬프트에 사용자 지정 명령을 삽입하여 Cline의 동작을 추가로 사용자 지정할 수 있습니다.

Cursor 및 WindSurf와 같은 AI 코딩 편집기에서도 .cursorrules와 같은 구성 파일을 통해 사용자 정의 명령을 주입하는 유사한 메커니즘을 채택했을 것으로 추측할 수 있습니다.

보시다시피, Cline의 핵심은 프로그래밍 작업을 완료하기 위해 지침을 따르는 LLM의 능력에 의존합니다. 따라서 LLM의 출력 결과의 정확성과 일관성을 보장하기 위해 Cline은 모델의 온도 파라미터를 0으로 설정합니다. 온도 파라미터는 LLM 출력의 무작위성을 제어하며, 0으로 설정하면 LLM이 항상 가장 가능성이 높은 출력 결과를 선택하므로 작업 실행의 결정성을 보장할 수 있습니다.

const stream = await this.client.chat.completions.create({
model: this.options.openAiModelId ?? "",
messages: openAiMessages,
temperature: 0, // 被设置成了 0
stream: true,
stream_options: { include_usage: true },
})

첫 번째 입력: 사용자 의도 및 컨텍스트 정보 수집

사용자가 Cline에 제공하는 주요 입력 정보 유형은 다음과 같습니다:

직접 입력 텍스트 명령사용자가 프로그래밍 작업 요구 사항에 대한 자연어 설명을 직접 입력하면 Cline이 이러한 텍스트 지침을 태그로 래핑합니다.
기호로 지정된 파일 경로, 파일 및 URL사용자는 @ Cline은 프로젝트의 파일, 디렉터리 또는 외부 URL에 대한 참조를 구문 분석하고 콘텐츠를 검색합니다. 파일 및 디렉터리의 경우, Cline은 디렉토리 구조를 나열하고, 파일의 경우 파일 내용을 읽으며, URL의 경우 Puppeteer와 같은 도구를 사용하여 웹 페이지를 크롤링합니다.

예를 들어 일반적인 사용자 입력은 다음과 같습니다:

<task>实现一个太阳系的 3D 环绕效果 'app/page.tsx' (see below for file content)  'https://stackoverflow.com/questions/23673275/orbital-mechanics-for-a-solar-system-visualisation-in-three-js-x-y-z-for-planet' (see below for site content)
</task>
<file_content path="app/page.tsx">
import Image from "next/image";
export default function Home() {...}
</file_content
<site_content>
...
</site_content>

Cline은 사용자가 직접 입력한 정보 외에도 현재 작업 디렉터리의 파일 목록, VS 코드 에디터의 열린 탭 등 프로젝트 컨텍스트에 대한 정보를 자동으로 수집합니다. 이 정보는 LLM이 프로젝트 컨텍스트를 더 잘 이해하고 보다 현실적인 솔루션을 생성하는 데 도움이 됩니다. 이 정보는 LLM이 프로젝트 컨텍스트를 더 잘 이해하고 실제 요구 사항에 더 잘 맞는 솔루션을 생성하는 데 도움이 됩니다.

환경 정보가 포함된 전체 입력의 예는 아래와 같습니다:

<task>
实现一个太阳系的 3D 环绕效果
</task>
<environment_details>
# VSCode Visible Files
(No visible files)
# VSCode Open Tabs
(No open tabs)
# Current Time
1/23/2025, 4:41:03 PM (Asia/Shanghai, UTC+8:00)
# Current Working Directory (/Users/nazha/nazha-all/cline-dev/nazha) Files
.gitignore
eslint.config.mjs
next.config.ts
package-lock.json
package.json
postcss.config.mjs
README.md
tailwind.config.ts
tsconfig.json
app/
app/favicon.ico
app/globals.css
app/layout.tsx
app/page.tsx
public/
public/file.svg
public/globe.svg
public/next.svg
public/vercel.svg
public/window.svg
# Current Mode
ACT MODE
</environment_details>

프로젝트 정보에 대한 Cline의 접근 방식을 보면 다른 AI 코딩 편집기(예: Cursor)는 코드베이스에서 정보를 보다 효율적으로 검색하고 활용하기 위해 고급 코드베이스 인덱싱 기술(예: 임베딩)을 사용할 수 있다는 것을 분명히 알 수 있습니다. 이와 대조적으로, Cline의 접근 방식은 비교적 간단하고 "무차별적인" 방식입니다.

첫 번째 라운드 반환: LLM 사고 및 운영 지침

통합 입력을 받은 후 LLM은 시스템 프롬프트와 사용자 지침에 따라 이를 분석하고 사고한 후 (사고 과정)과 지침이 모두 포함된 결과를 반환합니다. 예를 들어, 위에서 언급한 "3D 태양계 서라운드 효과 구현" 작업의 경우 LLM은 다음과 같은 결과를 반환할 수 있습니다:

<thinking>
分析任务需求:
1. 需要创建一个3D太阳系环绕效果
2. 当前项目是一个Next.js项目（根据next.config.ts和app目录结构判断）
3. 需要添加3D功能，可以使用Three.js库
4. 需要创建新的组件来展示3D效果
下一步行动：
1. 安装Three.js依赖
2. 创建一个新的组件来展示3D太阳系
3. 在页面中引入该组件
</thinking>
<execute_command>
<command>npm install three @types/three</command>
<requires_approval>false</requires_approval>
</execute_command>

이 예제에서 LLM은 먼저 작업 분석을 수행하고, 작업 요구 사항과 프로젝트 환경을 정의하고, 예비 실행 계획을 생성합니다. 그런 다음 LLM은 명령을 출력하며, 이 명령은 Cline이 npm install three @types/three 명령을 실행하여 Three.js 라이브러리를 설치하도록 지시합니다.

Cline은 LLM이 반환한 명령어를 구문 분석하여 다음을 포함하되 이에 국한되지 않는 다양한 사전 정의된 시스템 작업을 호출할 수 있습니다:

시스템 명령 실행(실행_명령)
파일 읽기 및 쓰기(읽기_파일, 쓰기_투_파일)
웹 검색(검색)
MCP 작업(use_mcp_tool)

이러한 작업이 수행될 때 Cline은 후속 상호 작용에서 LLM에 피드백하기 위해 작업의 실행 상태와 결과를 수집합니다.

두 번째 입력: 작업 결과에 통합된 컨텍스트 정보

다음으로 Cline은 이전 작업의 실행 결과, 작업 상태 정보, 이전 시스템 프롬프트 단어, 사용자 입력 등을 통합하여 새로운 입력으로 LLM에 제출하여 다음 실행 단계에 대한 안내를 LLM에 요청합니다. 이 과정은 작업이 완료될 때까지 반복됩니다.

아래는 Cline이 LLM과 협력하여 여러 차례의 대화를 통해 작업을 완료하는 방법을 보여주는 보다 완전한 대화 예시입니다:

role: system
content: [...省略系统提示词内容...]
role: user
content: [
{
type: 'text',
text: '<task>\n实现一个太阳系的 3D 环绕效果\n</task>'
},
{
type: 'text',
text: "<environment_details>...<environment_details>"
}
]
role: 'assistant',
content: '<thinking>\n分析任务需求：\n1. 需要创建一个3D太阳系环绕效果\n2. 当前项目是一个Next.js项目（根据next.config.ts和app目录结构判断）\n3. 需要添加3D功能，可以使用Three.js库\n4. 需要创建新的组件来展示3D效果\n\n下一步行动：\n1. 安装Three.js依赖\n2. 创建一个新的组件来展示3D太阳系\n3. 在页面中引入该组件\n</thinking>\n\n<execute_command>\n<command>npm install three @types/three</command>\n<requires_approval>false</requires_approval>\n</execute_command>'
role: 'user',
content: [
{
type: 'text',
text: '[execute_command for 'npm install three @types/three'] Result:'
},
{
type: 'text',
text: 'Command executed.\nOutput:\n⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏\nadded 9 packages and audited 385 packages in 5s\n⠏\n⠏142 packages are looking for funding\n⠏  run `npm fund` for details\n⠏\nfound 0 vulnerabilities\n⠏'
},
{
type: 'text',
content: '<environment_details>\n# VSCode Visible Files\n(No visible files)\n\n# VSCode Open Tabs\n(No open tabs)\n\n# Current Time\n1/23/2025, 10:01:33 PM (Asia/Shanghai, UTC+8:00)\n\n# Current Mode\nACT MODE\n</environment_details>'
}]

이 대화 예시를 통해 간단한 프로그래밍 작업을 완료하기 위해 Cline은 LLM을 반복해서 여러 번 호출해야 하며, LLM과의 지속적인 상호 작용을 통해 작업 목표를 점차 구체화하고 해당 연산을 수행하여 최종적으로 작업을 완료한다는 것을 알 수 있습니다.

또한 Cline은 기본적으로 작업을 처리할 때 모든 관련 정보를 LLM에 "위로" 밀어 넣어 하나의 작업으로 만듭니다. 토큰 소비가 매우 높습니다. 동시에 이 접근 방식은 LLM의 컨텍스트 창 제한에 쉽게 부딪힐 수 있습니다. 컨텍스트 창 제한 문제를 해결하기 위해 Cline은 비교적 간단하고 직접적인 처리 전략, 즉 입력 내용을 무차별적으로 잘라내고 창 제한을 초과하는 부분은 바로 버리는 방식을 채택합니다.

이는 다른 AI 코딩 편집기에서도 일반적으로 사용하는 방법일 수 있습니다. 사용하는 경우 윈드서핑 이와 같은 인공지능 편집기를 사용할 때, 사용자는 왜 인공지능이 LLM 컨텍스트 창에 제약을 받지 않고 창 길이를 초과하는 것처럼 보이는 작업을 처리할 수 있는 것처럼 보이는지 궁금해할 수 있습니다. 그러나 이후 대화형 퀴즈에서 AI가 다시 이전 답변을 반복하는 것처럼 보일 수 있으며, 이는 컨텍스트 잘림 메커니즘과 관련이 있을 수 있습니다.