MangCho's Guide

  Figma MCP 403 Forbidden 오류 대처하기 최근 MCP 서버에 피그마를 연동하다가 권한 오류로 막히셨나요? 토큰 발급부터 환경 변수 설정까지, 차근차근 원인을 짚어보고 문제를 풀어나가는 과정을 정리해 보았습니다.   요즘 LLM이나 AI 에이전트 환경에 MCP(Model Context Protocol)를 연결해서 피그마(Figma) 디자인 데이터를 직접 읽어오는 시도를 많이들 하시죠. 저도 최근에 피그마 MCP 서버를 로컬에 세팅하다가 뜬금없이 403 Forbidden 에러를 마주하고 꽤나 당황했던 기억이 납니다. "분명히 시키는 대로 토큰을 넣었는데 왜 접근이 안 되지?" 하면서 말이죠. 서버 로그를 열어보면 403 에러가 붉은 글씨로 찍혀 있는데, 이 에러는 보통 서버가 요청을 이해하긴 했지만 권한이 없어서 거부할 때 발생해요. 피그마 연동에서는 십중팔구 토큰(Token)의 스코프(권한)가 부족하거나, 복사하는 과정에서 형식이 틀어졌거나, 이미 만료된 경우랍니다. 오늘은 제가 이 문제를 어떻게 하나씩 확인하고 풀어나갔는지, 그 트러블슈팅 과정을 공유해 보려고 해요. 똑같은 오류로 답답해하시는 분들께 조금이나마 실질적인 도움이 되었으면 좋겠네요. 😊   첫 번째 의심: 토큰 권한(Scope) 설정이 맞을까? 🤔 피그마에서 발급받는 Personal Access Token(PAT)은 내 계정의 어떤 데이터에 접근할 수 있는지 '범위(Scope)'를 지정하게 되어 있어요. 403 에러가 났다면, 가장 먼저 이 스코프 설정을 의심해봐야 합니다. 단순히 토큰만 발급받았다고 해서 모든 파일에 접근할 수 있는 건 아니거든요. MCP 서버가 피그마 파일의 노드(Node) 정보나 텍스트, 컴포넌트 데이터를 읽어오려면 최소한 파일 읽기 권한이 필수적입니다. 종종 토...

  "자고 일어났더니 AWS에서 10만 원이 결제됐어요!" 개발자 커뮤니티의 단골 괴담인 AWS 프리티어 요금 폭탄. 나도 모르게 새어나가는 숨은 과금 요소를 찾아내고, 1달러만 넘어도 즉시 알려주는 CloudWatch 결제 알람 설정법을 완벽 정리해 드립니다!   코딩 공부를 시작하거나 개인 사이트를 배포할 때, 누구나 한 번쯤 거쳐 가는 관문이 바로 AWS(아마존 웹 서비스) 프리티어 입니다. 1년 동안 서버를 무료로 준다길래 신나서 가입하고 이것저것 클릭해 보던 기억, 다들 있으시죠? 저도 처음 AWS에 입문했을 때 "와, 아마존 진짜 혜자다!" 하면서 이것저것 막 눌러봤던 기억이 나네요. 그런데 문제는 그로부터 한두 달 뒤에 발생합니다. 갑자기 날아온 카드사 알림에 찍힌 'AWS $50.00 결제'... 솔직히 말해서 이때 심장이 철렁 내려앉는 기분, 안 당해본 사람은 모릅니다. "난 분명 무료라고 해서 썼는데 왜 돈이 나가지?!" 하고 억울해하지만, 알고 보면 우리가 프리티어의 '숨은 한도'를 넘겼기 때문이에요. 그래서 오늘은 여러분의 소중한 지갑을 지켜드리기 위해, AWS에서 나도 모르게 돈이 새는 주범들을 샅샅이 찾아내고, 요금이 단 1달러라도 발생하면 즉각 내 이메일로 경고를 보내주는 CloudWatch 결제 알림 설정법 을 아주 쉽게 알려드릴게요. 이 글만 다 읽으시면 더 이상 월말마다 불안에 떨지 않으셔도 됩니다! 😊   1. AWS 프리티어, 진짜 '완전 무제한 무료'일까? 🤔 많은 분들이 가장 크게 오해하시는 부분부터 확실히 짚고 넘어갈게요. AWS 프리티어는 '무제한 무료 뷔페'가 아닙니다. 정확히 정해진 접시 수(한도)만큼만 무료로 제공하는 시식 코너 에 가깝습니...

  "npm install 쳤는데 빨간 줄이 수십 개 떴어요!" 멘붕에 빠진 프론트엔드 개발자분들 주목! 악명 높은 ERESOLVE 의존성 충돌 에러의 원인부터 캐시를 싹 밀어버리고 강제로 패키지를 설치하는 속 시원한 해결법까지 완벽 정리해 드립니다.   새로운 프로젝트를 클론받거나, 오랜만에 토이 프로젝트를 열어서 기분 좋게 npm install 을 입력했는데... 터미널 화면이 온통 시뻘건 에러 메시지로 도배된 적 있으신가요? 특히 npm ERR! code ERESOLVE 라는 문구를 보면 진짜 눈앞이 캄캄해지죠. "나는 코드 한 줄 건드린 게 없는데 도대체 왜 이러는 거야!" 하면서 모니터를 샷건 치고 싶었던 경험, 프론트엔드 개발자라면 다들 한 번쯤 있으실 거예요. 솔직히 완전 짜증 나잖아요. 😭 저도 신입 시절에 이 에러 하나 잡겠다고 스택오버플로우를 하루 종일 뒤지다가, 결국 팀장님께 헬프를 요청했던 쓰라린 기억이 납니다. 하지만 알고 보면 이 에러는 내 코드가 망가진 게 아니라, 패키지들끼리 버전이 안 맞아서 멱살 잡고 싸우는(?) 아주 자연스러운 현상 이랍니다. 오늘 제가 이 지긋지긋한 의존성 충돌 에러를 부드럽게 달래는 방법부터, 도저히 안 될 때 쓰는 강력한 '캐시 폭파' 팁까지 아낌없이 대방출할게요. 이 글만 다 읽으시면 앞으로 터미널 빨간 줄도 두렵지 않으실 거예요! 😊   1. 도대체 ERESOLVE 에러가 뭘까? 🤔 문제를 해결하려면 녀석의 정체부터 알아야겠죠? ERESOLVE 에러는 쉽게 말해 '피어 의존성(Peer Dependency) 충돌' 입니다. NPM이 버전 7로 대규모 업데이트를 하면서 이전에 비해 보안과 버전 관리가 엄청나게 깐깐해졌거든요. 예를 들어, 내 프로젝트는 최신 ...

  "완벽한 모바일 전체 화면을 만들었는데, 사파리 하단 바가 버튼을 가려버려요!" 프론트엔드 개발자들의 뒷목을 잡게 하는 모바일 브라우저의 100vh 스크롤 깨짐 현상. 이제 복잡한 자바스크립트 꼼수 대신 새로운 CSS 단위인 'dvh'로 깔끔하게 해결하는 방법을 알아봅니다!   웹 브라우저 화면에 딱 맞는 풀스크린(Full-screen) UI나 모달 창을 만들 때, 우리는 자연스럽게 CSS에 height: 100vh; 를 적어 넣습니다. PC 브라우저나 크롬 개발자 도구의 모바일 화면(Toggle Device Toolbar)으로 테스트할 때까지만 해도 아주 완벽해 보이죠. "오, 스크롤 없이 화면에 꽉 차게 잘 들어갔군!" 하며 뿌듯한 마음으로 스마트폰을 꺼내 테스트 링크를 열어보는 순간... 절망이 시작됩니다. 아이폰 모바일 사파리(Safari)로 접속했더니, 화면 맨 밑에 있어야 할 '확인' 버튼이 사파리의 주소창(하단 바)에 가려져서 보이지 않는 현상 을 마주하게 됩니다. 스크롤을 위아래로 낑낑대며 움직여봐도 UI가 덜덜거리고 완전히 깨져버리죠. 진짜 별거 아닌 것 같은데 이것 때문에 완전 짜증 났던 경험, 프론트엔드 개발자라면 누구나 한 번쯤 있으실 거예요. 오늘은 이 지긋지긋한 100vh 버그의 원인과, 최신 CSS가 내려준 한 줄기 빛인 dvh(Dynamic Viewport Height) 를 활용한 완벽한 해결법을 낱낱이 파헤쳐 보겠습니다! 😊   1. 기존 100vh의 치명적인 문제점 🤔 문제를 해결하려면 도대체 왜 이런 일이 벌어지는지부터 알아야겠죠? vh(Viewport Height) 는 말 그대로 보여지는 화면 영역의 높이를 100등분 한 단위입니다. 문제는 모바일 브라우저(특히 iOS 사파리나 안드로이드 크롬)...