데모

Related MCP server: XcodeBuildMCP

주요 기능

claude mcp add icon-composer -- npx -y icon-composer-mcp

~/Library/Application Support/Claude/claude_desktop_config.json에 추가:

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

프로젝트 루트의 .cursor/mcp.json(또는 전역 설정의 ~/.cursor/mcp.json)에 추가:

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

서버가 Cursor 설정 > MCP 서버에 나타납니다. 재시작은 필요하지 않습니다.

프로젝트 루트의 .vscode/mcp.json에 추가(또는 전역 설정의 명령 팔레트 > MCP: Open User Configuration 실행):

참고: VS Code는 "mcpServers"가 아닌 "servers"를 사용하며 "type" 필드가 필요합니다.

{
  "servers": {
    "icon-composer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

편집기 내에서 시작/중지/재시작 버튼을 볼 수 있습니다. 첫 실행 시 신뢰 확인 메시지가 표시됩니다.

먼저 **Windsurf 설정 > Cascade > Model Context Protocol (MCP)**에서 MCP를 활성화하세요.

그 다음 ~/.codeium/windsurf/mcp_config.json에 추가:

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

Windsurf 설정에서 새로고침 버튼을 눌러 서버를 로드하세요.

이 서버는 stdio 전송을 사용합니다. 대부분의 MCP 클라이언트는 다음 구성 형식을 사용합니다:

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

또는 서버를 직접 실행하세요:

npx -y icon-composer-mcp

npm install -g icon-composer-mcp
icon-composer --help

Node.js 18+
Liquid Glass 렌더링을 위한 Icon Composer가 설치된 macOS
```
brew install --cask icon-composer
```
평면 미리보기, 번들 생성/편집 및 마케팅 내보내기는 Icon Composer 없이 모든 플랫폼에서 작동합니다.

설정을 확인하려면 icon-composer doctor를 실행하세요.

명령어	설명
`create`	전경 이미지에서 새 `.icon` 번들 생성
`add-layer`	기존 번들에 레이어 추가
`remove`	레이어 또는 그룹 제거
`inspect`	번들 내용 읽기 및 표시
`glass`	그룹에 Liquid Glass 효과 구성
`appearance`	다크/틴트 모드 재정의 설정
`fill`	배경 채우기 설정 (단색, 그라데이션, 자동, 없음)
`position`	레이어/그룹 스케일 및 오프셋 설정
`fx`	모든 유리 효과 켜기/끄기
`preview`	미리보기 PNG 내보내기 (Liquid Glass 또는 평면)
`render`	ictool을 통해 픽셀 단위로 완벽한 Liquid Glass 렌더링
`export-marketing`	App Store Connect용 평면 1024x1024 PNG 내보내기 (알파 채널 없음)
`doctor`	시스템 설정 및 종속성 확인

icon-composer create <foreground_path> <output_dir> --bg-color <hex> [options]

옵션	기본값	설명
`--bg-color <hex>`	필수	배경색 (예: `"#0A66C2"`)
`--bundle-name <name>`	`AppIcon`	번들 이름 (`.icon` 확장자 제외)
`--dark-bg-color <hex>`	—	다크 모드 배경색
`--glyph-scale <n>`	`1.0`	글리프 스케일 (1.0 = 표준 아이콘 영역의 약 65%)
`--specular / --no-specular`	`true`	반사 하이라이트
`--shadow-kind <kind>`	`layer-color`	그림자 유형: `neutral`, `layer-color`, `none`
`--shadow-opacity <n>`	`0.5`	그림자 불투명도 (0–1)
`--blur-material <n>`	—	블러 재질 값 (0–1)
`--translucency-enabled`	`false`	반투명도 그라데이션 활성화
`--translucency-value <n>`	`0.4`	반투명도 양 (0–1)

출력: icon.json 매니페스트와 Assets/ 디렉토리를 포함하는 <output_dir>/<bundle_name>.icon/을 생성합니다.

icon-composer add-layer <bundle_path> <image_path> --name <name> [options]

옵션	기본값	설명
`--name <name>`	필수	레이어 이름
`--group-index <n>`	`0`	대상 그룹 인덱스
`--create-group`	`false`	이 레이어를 위한 새 그룹 생성
`--opacity <n>`	`1.0`	레이어 불투명도 (0–1)
`--scale <n>`	`1.0`	레이어 스케일
`--offset-x <n>`	`0`	X 오프셋 (포인트 단위)
`--offset-y <n>`	`0`	Y 오프셋 (포인트 단위)
`--blend-mode <mode>`	`normal`	혼합 모드 (예: `multiply`, `screen`, `overlay`)
`--glass / --no-glass`	`true`	Liquid Glass 효과 참여 여부

지원 형식: .png, .jpg, .jpeg, .svg, .webp, .heic, .heif

icon-composer remove <bundle_path> --target <layer|group> --group-index <n> [--layer-index <n>]

icon-composer inspect <bundle_path>

출력: 전체 매니페스트 JSON을 출력하고 모든 에셋과 크기를 나열합니다.

icon-composer glass <bundle_path> [options]

옵션	설명
`--group-index <n>`	대상 그룹 (기본값: `0`)
`--specular / --no-specular`	반사 하이라이트
`--blur-material <n>`	블러 양 (0–1)
`--shadow-kind <kind>`	`neutral`, `layer-color` 또는 `none`
`--shadow-opacity <n>`	그림자 불투명도 (0–1)
`--translucency-enabled / --no-translucency-enabled`	반투명도 토글
`--translucency-value <n>`	반투명도 양 (0–1)
`--opacity <n>`	그룹 불투명도 (0–1)
`--blend-mode <mode>`	그룹 혼합 모드
`--lighting <type>`	`combined` 또는 `individual`

icon-composer appearance <bundle_path> --target <fill|group> --appearance <dark|tinted> [options]

icon-composer fill <bundle_path> --type <solid|gradient|automatic|none> [options]

옵션	설명
`--type <type>`	`solid`, `gradient`, `automatic` 또는 `none`
`--color <hex>`	기본 색상 (단색 또는 그라데이션 하단)
`--color2 <hex>`	보조 색상 (그라데이션 상단)
`--gradient-angle <n>`	그라데이션 각도 (도 단위, 기본값: `0`)

icon-composer position <bundle_path> [options]

icon-composer fx <bundle_path> --enable|--disable

모든 그룹의 반사, 그림자, 블러 및 반투명도를 한 번에 활성화하거나 비활성화합니다.

icon-composer preview <bundle_path> <output_path> [options]

옵션	기본값	설명
`--size <n>`	`1024`	출력 크기 (픽셀 단위)
`--appearance <mode>`	—	`dark` 또는 `tinted`
`--flat`	`false`	평면 렌더링 강제 (Liquid Glass 건너뜀)
`--canvas-bg <preset>`	—	`light`, `dark`, `checkerboard`, `homescreen-light`, `homescreen-dark`
`--apple-preset <name>`	—	Apple 배경화면: `sine-purple-orange`, `sine