밀당 DS

시작하기

설치

npm 전역 설치, GitHub Packages 토큰 발행, Figma 디버그 연결

npm으로 설치합니다. 아래 단계를 한 번만 완료하면, 이후에는 어느 폴더에서나 ids-use 명령어로 실행할 수 있습니다.

이미 설치하셨다면, npm i -g @mildang/ids-use@latest로 업데이트하고 ids-use launch로 Figma를 켜면 됩니다.
처음이라면 아래 단계를 따라오세요.


  1. 토큰 발행

    설치와 업데이트에 사용할 GitHub 토큰을 준비합니다. gh CLI가 설치돼 있다면 아래 두 명령이면 됩니다.

    bash

    gh auth refresh -s read:packages        # 스코프 추가 (재로그인 불필요)
echo 'export GITHUB_PACKAGES_TOKEN=$(gh auth token)' >> ~/.zshrc
source ~/.zshrc

    gh가 없다면 macOS에서 brew install gh로 설치할 수 있습니다.
    터미널이 익숙하지 않다면 아래 gh 없이 직접 발급(classic PAT) 을 그대로 따라 하세요.

    gh 없이 직접 발급하기 (classic PAT)
    1. github.com/settings/tokens로 접속해 Generate new token (classic) 을 누릅니다.
    2. read:packages 하나만 체크해 생성합니다. (값은 한 번만 표시됩니다)
    3. 생성된 토큰에서 Configure SSO → mildang → Authorize를 누릅니다. (누르지 않으면 401 오류가 발생합니다.)
    4. export GITHUB_PACKAGES_TOKEN=<토큰>을 ~/.zshrc에 추가한 뒤 source ~/.zshrc를 실행합니다.

    GitHub Packages는 classic PAT만 지원합니다. fine-grained 토큰으로는 설치되지 않으니, 위 Tokens (classic) 에서 발급하세요.

  2. 설치

    아래 명령어를 그대로 복사해 실행하세요.

    bash

    npm i -g @mildang/ids-use \
  --@mildang:registry=https://npm.pkg.github.com/ \
  --//npm.pkg.github.com/:_authToken=$GITHUB_PACKAGES_TOKEN

ids-use list    # DS 컴포넌트 목록이 표시되면 설치가 정상입니다 (Figma 없이 확인 가능)

    설치가 완료되면, 어느 폴더에서나 ids-use 명령어를 사용할 수 있습니다.

  3. Figma 켜기

    Figma는 평소 외부 프로그램의 접속을 막아 둡니다.
    ids-use launch를 실행하면 ids-use가 접속할 수 있는 상태로 Figma를 다시 켜 줍니다. (macOS 전용)

    bash

    ids-use launch
ids-use status    # 열린 파일 목록이 표시되면 정상입니다

    이미 Figma가 켜져 있다면 종료 후 다시 켜지므로, 저장하지 않은 변경이 있다면 미리 저장해 주세요.

    Windows · Linux에서 직접 켜기

    ids-use launch는 현재 macOS 에서만 동작합니다. Windows·Linux에서는 아래처럼 디버그 포트(--remote-debugging-port)를 지정해 Figma 데스크톱을 직접 실행하세요. 한 번 켜 두면 이후 명령은 macOS와 동일하게 동작합니다.

    bash

    # Windows PowerShell
$env:FIGMA_TEST="1"; & "<Figma.exe 경로>" --remote-debugging-port=9222

# Linux shell
FIGMA_TEST=1 "<Figma 실행파일 경로>" --remote-debugging-port=9222

    FIGMA_TEST=1을 빼면 Figma 126 이상에서는 이 연결 통로가 자동으로 닫히므로, 반드시 함께 지정하세요.

  4. 업데이트 준비

    앞으로 업데이트를 간편하게 하기 위한 준비입니다. 아래 명령어를 한 번만 실행해 두세요.

    bash

    cat >> ~/.npmrc <<'EOF'
@mildang:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}
EOF

    한 번 설정해 두면 다음과 같은 이점이 있습니다.

    • 업데이트를 명령어 한 줄로 완료할 수 있습니다. 이후로는 npm i -g @mildang/ids-use@latest만 실행하면 되며, 2단계의 긴 명령어를 다시 입력할 필요가 없습니다.
    • 새 버전이 나오면 실행할 때 알려줍니다. 이 설정이 없으면 업데이트 알림을 받지 못해, 구버전을 계속 사용하게 됩니다.

    위 설정 파일(~/.npmrc)에는 토큰 값이 직접 담기지 않습니다.
    토큰을 담아 둔 환경변수의 이름(GITHUB_PACKAGES_TOKEN)만 저장되므로 안전합니다.


설치를 마쳤다면 이제 원하는 작업을 시작하세요.