카테고리 없음

Cursor + Figma MCP 가이드 - Node.js와 필수 도구 설치

퇴근하고싶은 2025. 10. 29. 18:00

Node.js란?

Node.js는 JavaScript를 웹 브라우저 밖에서도 실행할 수 있게 해주는 프로그램입니다. 우리가 설치할 Figma MCP 서버가 Node.js로 만들어져 있기 때문에 반드시 설치해야 합니다.

쉬운 비유

  • 게임을 실행하려면 게임 엔진이 필요하듯이
  • MCP 서버를 실행하려면 Node.js가 필요합니다
  • Node.js = MCP 서버를 실행시키는 엔진

npm이란?

npm(Node Package Manager)은 Node.js와 함께 자동으로 설치되는 도구입니다. 다양한 프로그램 패키지를 다운로드하고 관리할 수 있게 해줍니다. 우리는 npm을 사용해서 Figma MCP 서버를 설치할 것입니다.

Step 1: Node.js 다운로드

1-1. 공식 웹사이트 접속

  1. 웹 브라우저를 실행합니다
  2. 주소창에 https://nodejs.org 입력하고 Enter
  3. Node.js 공식 홈페이지가 열립니다

1-2. 올바른 버전 선택

홈페이지에는 두 가지 버전이 표시됩니다:

LTS (Long Term Support) - 추천 ⭐

  • 왼쪽 버튼, 녹색으로 표시됨
  • 안정적이고 장기간 지원됨
  • 예: "20.10.0 LTS"

Current (최신 버전)

  • 오른쪽 버튼
  • 최신 기능이 포함되어 있지만 덜 안정적
  • 일반 사용자에게는 권장하지 않음

💡 선택 방법: 반드시 LTS 버전을 선택하세요!

1-3. 다운로드 시작

  1. 녹색 "LTS" 버튼을 클릭합니다
  2. Windows용 설치 파일이 자동으로 다운로드됩니다
    • 파일명: node-v20.xx.x-x64.msi
    • 크기: 약 30MB
  3. 다운로드 완료까지 기다립니다 (1-3분 소요)

Step 2: Node.js 설치

2-1. 설치 파일 실행

  1. 다운로드 폴더에서 node-v20.xx.x-x64.msi 파일을 찾습니다
  2. 파일을 더블클릭하여 실행합니다
  3. "이 앱이 디바이스를 변경할 수 있도록 허용하시겠어요?" 메시지가 나타나면 "예" 클릭

2-2. 설치 마법사 진행

화면 1: Welcome

  1. Node.js Setup 환영 화면이 나타납니다
  2. "Next" 버튼 클릭

화면 2: End-User License Agreement

  1. 사용권 계약서가 나타납니다
  2. "I accept the terms in the License Agreement" 체크박스 선택
  3. "Next" 버튼 클릭

화면 3: Destination Folder

  1. 설치 위치를 선택하는 화면입니다
  2. 기본값 그대로 유지합니다:
 
   C:\Program Files\nodejs\
  1. "Next" 버튼 클릭

💡 팁: 특별한 이유가 없으면 기본 설치 경로를 변경하지 마세요

화면 4: Custom Setup

  1. 설치할 구성요소를 선택하는 화면입니다
  2. 모든 항목이 체크되어 있는지 확인합니다:
    • ☑️ Node.js runtime
    • ☑️ npm package manager
    • ☑️ Online documentation shortcuts
    • ☑️ Add to PATH
  3. "Next" 버튼 클릭

⚠️ 중요: "Add to PATH" 옵션이 반드시 체크되어 있어야 합니다!

화면 5: Tools for Native Modules

  1. "Automatically install the necessary tools..." 옵션이 나타납니다
  2. 이 옵션은 체크하지 않습니다 (비워둡니다)
  3. "Next" 버튼 클릭

💡 참고: 우리에게는 이 추가 도구가 필요하지 않으므로 설치하지 않습니다

화면 6: Ready to install

  1. 설치 준비 완료 화면입니다
  2. "Install" 버튼 클릭
  3. 설치가 진행됩니다 (약 2-3분 소요)
  4. 진행 바가 100%에 도달할 때까지 기다립니다

화면 7: Completed

  1. 설치 완료 메시지가 나타납니다
  2. "Finish" 버튼 클릭
  3. 설치 마법사가 종료됩니다

Step 3: 설치 확인

3-1. 명령 프롬프트 열기

  1. Windows 키를 누릅니다
  2. "cmd" 입력
  3. "명령 프롬프트" 또는 "Command Prompt" 클릭
  4. 검은색 창이 열립니다

💡 다른 방법: Win + R → "cmd" 입력 → Enter

3-2. Node.js 버전 확인

명령 프롬프트에 다음 명령어를 입력하고 Enter:

node --version

예상 결과:

v20.10.0

버전 번호가 표시되면 Node.js가 정상적으로 설치된 것입니다!

3-3. npm 버전 확인

다음 명령어를 입력하고 Enter:

npm --version

예상 결과:

10.2.3

버전 번호가 표시되면 npm도 정상적으로 설치된 것입니다!

Step 4: 설치 후 추가 설정 (Windows 11)

4-1. PowerShell 실행 정책 설정

Windows 11에서는 보안을 위해 스크립트 실행이 제한되어 있습니다. 이를 해제해야 합니다.

  1. Windows 키를 누릅니다
  2. "PowerShell" 입력
  3. **"Windows PowerShell"**에서 마우스 오른쪽 버튼 클릭
  4. "관리자 권한으로 실행" 선택
  5. "이 앱이 디바이스를 변경..." 메시지가 나타나면 "예" 클릭

PowerShell이 관리자 모드로 열립니다 (제목 표시줄에 "관리자" 표시됨)

4-2. 실행 정책 변경

PowerShell 창에 다음 명령어를 입력하고 Enter:

powershell
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

확인 메시지가 나타나면:

실행 정책 변경
실행 정책을 변경하면 보안 위험에 노출될 수 있습니다...
[Y] 예(Y)  [A] 모두 예(A)  [N] 아니요(N)  [L] 모두 아니요(L)  [S] 일시 중단(S)  [?] 도움말(?)

"Y" 입력하고 Enter

4-3. PowerShell 닫기

  1. exit 입력하고 Enter
  2. 또는 창의 X 버튼 클릭

Step 5: npm 글로벌 경로 확인

5-1. 글로벌 패키지 경로 확인

명령 프롬프트(또는 새 PowerShell)를 열고 다음 명령어 입력:

npm config get prefix

예상 결과:

C:\Users\사용자이름\AppData\Roaming\npm

이 경로가 표시되면 정상입니다.

5-2. 경로 문제 해결 (문제가 있는 경우만)

만약 위 명령어가 작동하지 않거나 다른 경로가 나온다면:

npm config set prefix "C:\Users\%USERNAME%\AppData\Roaming\npm"

Step 6: 간단한 테스트

6-1. 첫 번째 npm 패키지 설치 테스트

작은 패키지를 설치해서 npm이 제대로 작동하는지 확인합니다:

npm install -g cowsay

진행 과정:

added 10 packages in 5s

6-2. 설치한 패키지 실행

npx cowsay "Node.js 설치 완료!"

예상 결과:

 _____________________
< Node.js 설치 완료! >
 ---------------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

귀여운 소가 메시지를 표시하면 모든 것이 정상적으로 작동하는 것입니다! 🎉

6-3. 테스트 패키지 제거 (선택사항)

테스트가 끝났으면 cowsay를 제거할 수 있습니다:

npm uninstall -g cowsay

자주 발생하는 문제 해결

문제 1: "node는 내부 또는 외부 명령... 아닙니다"

원인: PATH 환경 변수에 Node.js가 추가되지 않았습니다

해결방법:

  1. Windows 키를 누릅니다
  2. "환경 변수" 검색
  3. "시스템 환경 변수 편집" 클릭
  4. "환경 변수" 버튼 클릭
  5. "시스템 변수" 섹션에서 "Path" 선택
  6. "편집" 버튼 클릭
  7. 다음 경로가 있는지 확인:
 
   C:\Program Files\nodejs\
  1. 없다면 "새로 만들기" 클릭하고 위 경로 추가
  2. "확인" 버튼으로 모든 창을 닫습니다
  3. 명령 프롬프트를 다시 시작합니다

문제 2: npm 설치 시 권한 오류

증상: "EACCES: permission denied" 오류 발생

해결방법:

  1. 명령 프롬프트를 관리자 권한으로 실행
  2. 또는 명령어 앞에 sudo 대신 관리자 권한으로 실행

문제 3: 설치 속도가 너무 느림

해결방법: npm 미러 서버를 한국 서버로 변경

npm config set registry https://registry.npmjs.org/

유용한 npm 명령어 정리

명령어설명

npm --version npm 버전 확인
npm install -g 패키지명 글로벌 패키지 설치
npm uninstall -g 패키지명 글로벌 패키지 제거
npm list -g --depth=0 설치된 글로벌 패키지 목록
npm update -g 모든 글로벌 패키지 업데이트
npm cache clean --force npm 캐시 삭제
npx 패키지명 패키지를 임시로 실행

체크리스트: 4편 완료 확인

다음 항목을 모두 완료했는지 확인하세요:

  • Node.js LTS 버전을 다운로드했다
  • Node.js 설치를 완료했다
  • "Add to PATH" 옵션이 체크되어 있었다
  • node --version 명령어가 버전을 표시한다
  • npm --version 명령어가 버전을 표시한다
  • PowerShell 실행 정책을 설정했다
  • cowsay 테스트가 성공했다
  • 명령 프롬프트 사용법을 이해했다
반응형