팁

이건 코드 문제가 아니라 VS Code 확장자 “Error Lens” 때문에 크게 표시되는 것입니다.

해결 방법:

1. 왼쪽 Extensions에서 Error Lens 클릭
2. 톱니바퀴 클릭
3. Disable 또는 Uninstall

또는 설정에서 숨길 수 있습니다.

VS Code settings.json 열고 아래 추가하세요:

"errorLens.enabled": false

Error Lens는 끄지 않고 큰 글씨만 숨기려면:

"errorLens.messageEnabled": false

그리고 "Kakao": Unknown word. 자체는 Spell Checker / 맞춤법 검사 확장자가 Kakao를 모르는 단어로 판단해서 생긴 경고입니다.
단어만 등록하려면 Quick Fix에서:

Add: "Kakao" to workspace settings

를 누르면 됩니다.

정리하면:

"errorLens.messageEnabled": false,
"cSpell.words": [
  "Kakao"
]

---

네 맞습니다. 현재 보이는 { ... } 안에 추가하면 됩니다.

지금 상태에서 이렇게 수정하세요:

{
    "editor.fontFamily": "'D2Coding',Consolas, 'Courier New', monospace",
    "editor.renderControlCharacters": false,
    "markdown-pdf.convertOnSave": true,
    "markdown-pdf.breaks": true,
    "python.createEnvironment.contentButton": "show",
    "eslint.rules.customizations": [],
    "prettier.bracketSameLine": true,

    "errorLens.messageEnabled": false
}

주의:

• 바로 위 줄 끝에 , 쉼표 추가해야 합니다.
• 마지막 줄에는 쉼표 넣지 않습니다.

저장하면 (Ctrl + S) 큰 글씨가 바로 사라집니다.

---

errorLens.messageEnabled가 적용되지 않는 경우는 보통 아래 둘 중 하나입니다.

1. VS Code 재시작이 안 됨
2. 실제 큰 글씨는 Code Lens 기능임

지금 설정에 이것도 추가해보세요:

"errorLens.enabled": false

전체 예시:

{
  "editor.fontFamily": "'D2Coding', 'Courier New', monospace",
  "editor.renderControlCharacters": false,
  "markdown-pdf.convertOnSave": true,
  "markdown-pdf.breaks": true,
  "python.createEnvironment.contentButton": "show",
  "eslint.rules.customizations": [],
  "prettier.bracketSameLine": true,

  "errorLens.messageEnabled": false,
  "errorLens.enabled": false
}

저장 후:

Ctrl + Shift + P
→ Reload Window

입력해서 VS Code 새로고침하세요.

---

만약 그래도 남아있으면 범인은 Code Lens 입니다.
아래도 추가하세요:

"errorLens.codeLensEnabled": false

최종 추천:

"errorLens.enabled": false,
"errorLens.messageEnabled": false,
"errorLens.codeLensEnabled": false

이렇게 하면 화면 위에 뜨는 큰 경고 문구가 완전히 사라집니다.

---

MCP는 Model Context Protocol의 약자입니다.

간단히 말하면:

AI(Claude, ChatGPT 등)가 외부 도구·DB·파일·API와 연결되도록 하는 표준 프로토콜입니다.

지금 VS Code에 보이는 MCP Servers는
AI 코딩 도구가 외부 기능을 사용할 수 있게 연결하는 기능입니다.

예를 들면 MCP로 AI가:

• PostgreSQL/MySQL 조회
• 로컬 파일 읽기
• GitHub API 호출
• 브라우저 자동화
• Figma 데이터 읽기
• 사내 문서 검색
• 터미널 명령 실행

같은 걸 할 수 있습니다.

---

예시 구조:

VS Code + Claude
        ↓
    MCP Client
        ↓
    MCP Server
        ↓
DB / API / Files / Tools

---

왜 생겼냐면:

기존 AI는 채팅만 가능했는데,
MCP를 쓰면 실제 개발도구와 연결되어:

• 코드 수정
• DB 조회
• 테스트 실행
• 파일 생성

같은 작업을 자동화할 수 있습니다.

---

지금 화면의 MCP Servers는:

"AI가 사용할 외부 도구를 연결하는 서버 목록"

입니다.

아직 프리뷰 기능이라 설치 안 해도 됩니다.

---

만약 관심 있으면 다음도 가능합니다:

• VS Code에서 MCP 서버 설치법
• Claude + MCP + PostgreSQL 연결
• 로컬 파일 시스템 MCP 만들기
• Python MCP 서버 예제
• Cursor/Claude Code MCP 차이점

원하면 이어서 설명해드릴게요.

---

지금 보이는 건 VS Code 안의 Claude Code 패널입니다.

역할은:

• AI에게 코드 수정 요청
• 터미널 명령 실행
• 파일 생성/수정
• 프로젝트 분석
• Git 작업 보조

같은 걸 하는 AI 코딩 도우미입니다.

---

지금 작은 창처럼 보이는 이유는:

Split Editor Right

상태라서 VS Code 내부에 “분할 창”으로 들어가 있기 때문입니다.

---

원하는 것: 완전히 바깥 창으로 분리

가능합니다.

방법 1 (가장 쉬움)

탭 끌어내기

1. 위의 Claude Code 탭 클릭
2. 마우스로 잡고
3. VS Code 바깥 화면으로 드래그

그러면 새 창으로 분리됩니다.

---

방법 2

우클릭 메뉴

Claude Code 탭 우클릭 →

Move Into New Window

선택

(버전에 따라 메뉴 이름 다를 수 있음)

---

방법 3

새 VS Code 창으로 복제

File → New Window

새 창 연 다음
Claude Code를 그 창으로 이동

---

추가 팁:

현재 화면 우측 상단에 있는:

Split Editor Right

체크 해제하거나

View → Editor Layout → Single

로 바꾸면 분할도 사라집니다.

---

그리고 지금 화면의:

Press Shift + Tab to automatically approve code edits

는 Claude가 코드 수정할 때 매번 승인 묻지 않고 자동 적용하는 기능입니다.
실수 방지를 위해 처음엔 자동승인 끄고 쓰는 걸 추천합니다.