Code Beat

ChatGPT를 VSCode 확장으로 연동하기 (2) — WebView 기반 인터페이스 구현 본문

Code/AI

ChatGPT를 VSCode 확장으로 연동하기 (2) — WebView 기반 인터페이스 구현

코-빗 2025. 12. 7. 15:54
728x90

이전 글에서는 VSCode Extension 개발 환경을 구성하고 템플릿 프로젝트를 생성한 뒤, OpenAI API 연동 준비까지 완료했다. 이제 실제로 ChatGPT와 상호작용할 수 있는 UI를 VSCode 내부에 구축할 차례다.

이번 단계의 목표는 다음과 같다.

  • VSCode WebView를 통해 사용자 입력 UI 구현
  • WebView → 확장 → OpenAI API → WebView 구조 설계
  • 확장 명령(Command)로 패널 열기 기능 구현
  • ChatGPT에게 메시지를 입력하고 응답을 표시하는 초기 형태 완성

WebView란 무엇인가?

WebView는 VSCode 확장 내부에서 HTML, CSS, JavaScript를 실행할 수 있는 독립된 렌더링 환경이다. 웹 기술로 UI를 만들어 VSCode 확장 UI처럼 사용할 수 있다.

WebView는 다음과 같은 구조로 동작한다.

 
[WebView] ⇆ postMessage() ⇆ [Extension Host] ⇆ OpenAI API
  • 사용자는 WebView에서 메시지를 입력한다.
  • 메시지는 확장(extension)에서 처리된다.
  • 확장은 OpenAI API를 호출하고 결과를 WebView로 다시 전달한다.

WebView 생성 코드 추가

src/extension.ts에 다음 명령 등록 코드를 추가한다.

const openChat = vscode.commands.registerCommand(
  "react-gpt-assistant.openChatPanel",
  async () => {
    const panel = vscode.window.createWebviewPanel(
      "reactGptAssistantChat",
      "React GPT Assistant",
      vscode.ViewColumn.Beside,
      { enableScripts: true }
    );

    panel.webview.html = getWebviewHtml();
  }
);

context.subscriptions.push(openChat);

이제 이 명령을 통해 WebView 패널을 열 수 있다.

WebView UI HTML 작성

같은 파일 하단에 WebView에서 렌더링할 HTML 템플릿을 추가한다.

 
function getWebviewHtml(): string {
  return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ChatGPT Assistant</title>
<style>
  body { font-family: sans-serif; background: #1e1e1e; color: #ddd; margin: 0; }
  #messages { height: 85vh; overflow-y: auto; padding: 10px; }
  #inputBar { display: flex; padding: 8px; gap: 6px; }
  textarea { flex: 1; height: 60px; background: #252526; color: #fff; border: 1px solid #555; }
  button { width: 100px; background: #007acc; border: none; color: #fff; cursor: pointer; }
</style>
</head>
<body>
  <div id="messages"></div>
  <div id="inputBar">
    <textarea id="input" placeholder="메시지를 입력하세요..."></textarea>
    <button id="sendBtn">Send</button>
  </div>

<script>
const vscode = acquireVsCodeApi();

document.getElementById("sendBtn").addEventListener("click", () => {
  const text = document.getElementById("input").value;
  vscode.postMessage({ type: "userMessage", text });
});
</script>
</body>
</html>
`;
}
 

이 상태에서는 WebView가 메시지를 보내기만 하고 아직 응답을 표시하지는 않는다.

WebView 메시지 수신 처리

WebView에서 보낸 메시지를 확장에서 처리하도록 다음 코드를 추가한다.

 
panel.webview.onDidReceiveMessage(async (msg) => {
  if (msg.type === "userMessage") {
    const userText = msg.text;
    vscode.window.showInformationMessage(`입력: ${userText}`);
  }
});

여기까지 구현하면 전송된 입력 메시지가 정상적으로 확장 측에서 감지되는지 확인할 수 있다.

실행 및 테스트

빌드 후 Extension Host에서 다음을 실행한다.

  1. Ctrl + Shift + B — 빌드
  2. F5 — Extension Host 실행
  3. Ctrl + Shift + P → React GPT Assistant: Open Chat Panel 실행
  4. WebView에서 메시지 입력 후 전송

VSCode 상단에 입력한 문장이 알림으로 표시되면 WebView 통신은 정상적으로 동작하는 것이다.

정리

이번 단계에서 구성한 사항은 다음과 같다.

  • WebView 기반 사용자 인터페이스 생성
  • VSCode 명령(Command)로 패널 열기
  • WebView → Extension 메시지 통신 구현

아직 ChatGPT API 호출 및 응답 렌더링은 구현하지 않았다. 그러나 구조적으로 가장 중요한 통신 부분이 준비되었고, 다음 단계부터는 API 연동과 대화 기능을 실제로 동작하도록 확장할 수 있다.

'Code > AI' 카테고리의 다른 글

Gemini로 자동화 매매하기 - Binance 연결하기  (0) 2025.12.26
Gemini로 자동화 매매하기 (환경 구성)  (0) 2025.12.22
ChatGPT를 VSCode 확장으로 연동하기 (3) — WebView와 OpenAI API 연결  (0) 2025.12.07
ChatGPT를 VSCode 확장으로 연동하기 (1) — 환경 구축과 목표 설정  (0) 2025.12.04
'Code/AI' Related Articles more