MangCho's Guide

  MCP 서버, 도대체 뭔가요? 요즘 AI 커뮤니티에서 'MCP'라는 단어가 심심찮게 등장하죠. Claude나 GPT가 외부 툴과 연결되는 방식을 완전히 바꿔버린 이 새로운 표준, 지금 쉽게 풀어드릴게요!   얼마 전 AI 관련 커뮤니티를 둘러보다가 갑자기 'MCP'라는 말이 폭발적으로 쏟아지는 걸 봤어요. 처음엔 솔직히 뭔 소린가 싶었거든요. 😅 "그냥 또 새로운 기술 용어 아니야?" 싶었는데, 알고 보니 이게 AI가 외부 서비스와 소통하는 방식을 근본부터 뒤바꾸는 개념이더라고요. 오늘은 그 MCP가 뭔지, 기존 방식과 뭐가 다른지, 왜 이렇게 핫한지를 최대한 쉽게 설명해 드릴게요!   MCP 서버, 정확히 뭔가요? 🤔 MCP는 Model Context Protocol 의 약자예요. 한국어로 풀면 '모델 컨텍스트 프로토콜'인데, 쉽게 말해서 AI 모델이 외부 도구나 데이터에 표준화된 방식으로 접근할 수 있게 해주는 규칙(프로토콜) 이에요. 2024년 말 Anthropic이 공개했고, 오픈소스로 배포해 현재 업계 표준으로 빠르게 자리 잡고 있습니다. 좀 더 직관적으로 이해하려면 USB 포트를 생각해보세요. USB가 나오기 전에는 기기마다 연결 방식이 제각각이었잖아요? MCP는 바로 그 USB 같은 역할을 해요. AI 모델(Claude, GPT 등)과 외부 서비스(GitHub, Notion, 파일 시스템 등) 사이를 연결하는 표준 플러그 라고 보면 딱 맞아요. 💡 알아두세요! MCP 서버는 Claude Desktop, Cursor, Windsurf 같은 AI 클라이언트 앱에서 지금 바로 사용할 수 있어요. Anthropic 공식 GitHub에 다양한 공식·커뮤니티 MCP 서버가 공개되어 있습니다.   기존 API 방식과 무엇이 다를까요? 📊 MCP 이전에도 AI와 외부 서비스를 연결하는 방...

  AI 코딩 어시스턴트가 갑자기 먹통이 되었나요? GitHub Copilot이나 Cursor AI를 사용하다가 발생하는 무한 로딩, 응답 지연, 그리고 인증 토큰 만료 에러의 원인을 파악하고 강제로 토큰을 갱신하여 빠르게 복구하는 방법을 알아봅니다.   한참 집중해서 코딩을 하고 있는데, 평소라면 귀신같이 코드를 자동완성해 주던 AI가 갑자기 침묵할 때가 있습니다. 탭(Tab) 키를 아무리 눌러도 반응이 없고, 우측 하단의 로딩 아이콘만 하염없이 빙글빙글 도는 상황, 개발자라면 누구나 한 번쯤 겪어보셨을 거예요. 로그를 열어보면 Extension activation failed 나 Token expired 같은 에러 메시지가 붉은색으로 찍혀 있는 경우가 많습니다. 이는 대부분 IDE(VS Code 등)와 AI 서버 간의 인증 세션이 꼬였거나 보안 토큰이 만료되었기 때문인데요. 가만히 기다리거나 편집기를 껐다 켜는 것만으로는 해결되지 않을 때가 많습니다. 오늘은 이런 답답한 상황에서 확실하게 인증 정보를 초기화하고 다시 쾌적한 코딩 환경으로 돌아가는 트러블슈팅 과정을 공유해 보려고 합니다. 😊   원인 파악: 왜 갑자기 토큰이 만료될까요? 🤔 GitHub Copilot이나 Cursor AI는 로컬 환경에서 돌아가는 것이 아니라, 클라우드 서버와 지속적으로 통신하며 코드를 분석하고 제안합니다. 이 과정에서 보안을 위해 발급받은 '인증 토큰(Auth Token)'을 사용하게 되죠. 문제는 이 토큰의 수명이 무한하지 않다는 점입니다. 일정 시간이 지나면 토큰을 갱신(Refresh)해야 하는데, 가끔 네트워크 불안정이나 백그라운드 업데이트, 절전 모드 전환 등의 이유로 IDE가 새로운 토큰을 제대로 갱신하지 못하고 만료된 옛날 토큰을 계속 서버에 보내는 경우 가 발생합니다. 서버 ...

  앗, 실수로 git reset --hard를 쳐버리셨나요? 터미널에서 엔터를 치는 순간 등골이 오싹해졌던 경험, 개발자라면 누구나 한 번쯤 있을 겁니다. 허공으로 날아가 버린 줄 알았던 소중한 커밋들을 `git reflog`를 이용해 안전하게 되돌리는 과정을 차근차근 알아봅니다.   프로젝트 마감이 코앞인데 엉킨 브랜치를 정리해보겠다고 git reset --hard 를 입력했다가, 내가 며칠 동안 작업한 커밋까지 몽땅 날려버렸을 때의 그 절망감... 정말 말로 다 표현할 수 없죠. 저도 예전에 로컬에서만 작업해 둔 코드를 실수로 날려버리고 모니터 앞에서 몇 분 동안 멍하니 앉아있었던 기억이 납니다. 😭 하지만 너무 걱정하지 마세요! 다행히도 Git은 우리가 생각하는 것보다 훨씬 철저하고 친절한 녀석입니다. 여러분이 의도적으로 .git 폴더를 삭제하지 않는 이상, Git은 로컬 저장소에서 일어난 거의 모든 행동을 조용히 기록하고 있거든요. 오늘은 그 비밀의 일기장인 git reflog 를 열어서 잃어버린 커밋을 구출해 내는 방법을 차분하게 짚어보려고 합니다. 심호흡 한 번 하시고, 천천히 따라와 주세요.   비밀의 일기장, git reflog란 무엇일까? 🤔 보통 우리가 커밋 내역을 볼 때 git log 를 사용하죠. 하지만 git reset 명령어로 브랜치의 상태를 과거로 돌려버리면, git log 에서는 되돌아간 시점 이후의 커밋들이 보이지 않게 됩니다. 마치 역사책에서 특정 페이지 이후가 찢겨 나간 것처럼요. 반면 git reflog (Reference logs)는 여러분의 로컬 저장소에서 HEAD가 움직인 모든 궤적을 기록하는 블랙박스 입니다. 커밋을 하든, 브랜치를 바꾸든, 심지어 방금 한 것처럼 reset 을 하든 모든 액션이 시간순으로 낱낱이 기록되어 있습니...

  피그마 연동 중 Payload Too Large 에러로 멈추셨나요? 대용량 피그마 파일을 MCP 서버로 불러올 때 발생하는 용량 초과 문제의 원인과, 특정 노드(Node)만 쪼개서 스마트하게 호출하는 분할 로드 방법을 자세히 알아봅니다.   요즘 LLM에 피그마(Figma)를 연동해서 UI 코드를 짜거나 화면을 분석하는 작업, 많이들 하시죠? 저도 최근에 신나서 MCP(Model Context Protocol) 서버를 세팅하고 회사 메인 프로젝트 링크를 딱 넣었는데, 갑자기 붉은 글씨로 Payload Too Large (HTTP 413) 에러가 뜨면서 서버가 뻗어버리더라고요. 진짜 당황스러웠어요. 😅 알고 보니 피그마 파일의 덩치가 너무 커서 발생한 문제였습니다. 디자인 원본 파일에는 우리가 눈으로 보는 화면뿐만 아니라 수많은 숨겨진 레이어, 벡터 데이터, 히스토리까지 엄청난 양의 JSON 데이터가 들어있거든요. 이걸 한 번에 AI의 컨텍스트 윈도우로 욱여넣으려니 시스템이 "이건 너무 무거워서 못 받아!" 하고 뱉어낸 거죠. 오늘은 이렇게 무거운 대용량 피그마 파일을 다룰 때, 에러 없이 필요한 정보만 쏙쏙 빼오는 '노드 분할 호출' 방법에 대해 제 경험을 바탕으로 이야기해 볼게요.   Payload Too Large, 왜 터지는 걸까요? 🤔 피그마 API는 기본적으로 파일 링크를 받으면 해당 파일에 있는 모든 페이지와 프레임의 노드(Node) 트리 를 한꺼번에 스캔해서 반환하려고 시도합니다. 작은 프로토타입 파일이라면 문제없겠지만, 수십 개의 페이지와 컴포넌트 라이브러리가 얽힌 실무용 파일은 JSON 텍스트 용량만 수십 메가바이트(MB)를 훌쩍 넘어가곤 해요. MCP 서버와 통신하는 과정에서 이 방대한 JSON 페이로드가 서버의 최대 허용 요청 크기를 초과 하거...

  디자인 토큰이 하드코딩된 색상 값으로 변환되어 당황하셨나요? AI를 활용한 Figma to React 퍼블리싱 과정에서 디자인 변수(Token)가 누락되는 원인을 알아보고, 프롬프트와 구조화를 통해 변수 매핑 오류를 해결하는 방법을 알아봅니다.   요즘 AI 도구를 사용해서 피그마(Figma) 시안을 React 코드로 뚝딱 변환하는 작업, 다들 한 번쯤 시도해 보셨을 텐데요. 디자인이 곧바로 컴포넌트로 바뀌는 걸 보면 정말 신세계가 따로 없죠. 하지만 막상 결과물을 프로젝트에 적용하려고 코드를 까보면 한숨이 나오는 경우가 종종 있어요. 분명히 피그마에서는 Primary/500 같은 디자인 토큰(Design Token)으로 예쁘게 묶어놨는데, AI가 뱉어낸 코드에는 color: #6a1b9a 처럼 헥스(Hex) 코드가 생으로 하드코딩되어 있는 현상 말이에요. 다크모드 대응이나 테마 변경을 하려면 이걸 일일이 다 찾아 바꿔야 하니 완전 짜증나죠. 저도 실무에서 이 문제 때문에 AI가 짜준 코드를 통째로 갈아엎은 적이 있답니다. 왜 이런 일이 발생하는지, 그리고 어떻게 하면 AI가 우리 팀의 디자인 토큰을 똑똑하게 매핑하게 만들 수 있는지 차근차근 짚어보도록 할게요. 😊   왜 AI는 디자인 토큰을 무시할까요? 🤔 AI가 코드를 생성할 때 피그마 API나 플러그인을 통해 데이터를 읽어오는데요. 이때 피그마의 내부 구조상 레이어에 적용된 '최종 결과값(Raw Value)'과 '참조된 변수명(Variable/Style Name)'이 분리되어 전달됩니다. 우리가 AI에게 "이 화면을 React로 만들어줘"라고 단순하게 명령하면, AI는 눈에 보이는 시각적 일치도에 집중하느라 참조된 변수명 대신 즉시 렌더링 가능한 하드코딩 값을 우선적으로 선택 해버리는 경향이 ...