본문 바로가기
카테고리 없음

클로드(Claude) MCP를 활용한 안드로이드 개발 가이드 (with Figma)

wookgenie 2025. 5. 14. 14:28
반응형

개발자라면 디자인을 코드로 변환하는 데 상당한 시간을 소요하게 됩니다. 하지만 Claude AI와 Figma를 연동하면 이 과정을 대폭 간소화할 수 있습니다.
이 글에서는 Claude 데스크톱 애플리케이션과 MCP(Multi-Context Programming) 기능을 활용해, Figma 디자인을 안드로이드 코드로 변환하는 전체 프로세스를 단계별로 설명합니다.

소개

클로드(Claude)란?

클로드(Claude)는 Anthropic이 개발한 고성능 인공지능 어시스턴트입니다. 자연어 이해 및 생성 능력을 기반으로, 개발 지원, 코드 작성, 리뷰 등 다양한 작업을 돕습니다.

MCP란 무엇인가?

MCP(Multi-Context Programming)는 다양한 맥락(Context)을 동시에 읽고 해석하는 기능입니다. 이를 통해 클로드는 IDE 프로젝트 구조와 디자인 파일 같은 복합적인 정보도 함께 다룰 수 있습니다.

왜 피그마(Figma)와 연동하는가?

Figma는 대표적인 UI/UX 디자인 툴로, 안드로이드 앱 개발 시 자주 사용됩니다. Figma와 MCP를 연동하면, 클로드가 디자인 요소를 직접 해석해 자동으로 XML 코드로 변환할 수 있습니다. 이를 통해 개발자는 수작업 없이 빠르고 정확하게 UI를 구성할 수 있습니다.

1. 준비 및 사전 요구사항

시작하기 전에 필요한 도구와 계정이 모두 준비되어 있는지 확인합니다.

  • 필수 도구:
    • Claude 데스크톱 애플리케이션
    • 안드로이드 스튜디오 최신 버전
    • Figma 계정 및 준비된 디자인 파일
    • 인터넷 연결
  • 필요한 계정:
    • Claude 계정
    • Figma 계정 (개인 액세스 토큰용)

2. Claude 데스크톱 설치

https://claude.ai/download

Claude의 MCP(Multi-Context Programming) 기능을 사용하기 위해 데스크톱 애플리케이션을 설치합니다.

  1. Claude 데스크톱 다운로드:
    • Claude 공식 웹사이트에서 데스크톱 버전을 다운로드합니다.
    • 운영체제에 맞는 설치 파일을 선택합니다
  2. 설치 및 로그인:
    • 다운로드한 설치 파일을 실행하고 설치를 완료합니다.
    • Claude 데스크톱을 실행하고 기존 Claude 계정으로 로그인합니다.
    • 이미 Claude 회원이라는 전제하에 진행합니다.

3. 안드로이드 스튜디오 MCP 플러그인 설치

안드로이드 스튜디오에 MCP Server 플러그인을 설치합니다.

  1. 플러그인 설치:
    • 안드로이드 스튜디오 실행 후 File > Settings > Plugins (Windows/Linux) 또는 Android Studio > Preferences > Plugins (Mac)으로 이동합니다.
    • 마켓플레이스 탭에서 "MCP Server"를 검색합니다.
    • '설치' 버튼을 클릭하고 설치가 완료될 때까지 기다립니다.

  1. 안드로이드 스튜디오 재시작:
    • 설치 완료 후 안드로이드 스튜디오 재시작을 요청하는 메시지가 표시되면 '재시작'을 선택합니다.

4. Claude와 JetBrains IDE MCP 설정

https://github.com/JetBrains/mcp-jetbrains

Claude 데스크톱에서 JetBrains MCP 서버를 설정합니다.

  1. MCP 설정 파일 수정:
    • Claude 데스크톱에서 설정 > 개발자 > 설정 편집으로 이동합니다.
    • claude_desktop_config.json 파일에 다음 내용을 추가합니다:
    {
  "mcp": {
    "servers": {
      "jetbrains": {
        "command": "npx",
        "args": ["-y", "@jetbrains/mcp-proxy"]
      }
    }
  }
}

  1. Claude 재시작:
    • 설정 파일 수정 후 Claude 데스크톱을 재시작합니다.
    • 재시작 후 검색 및 도구에 MCP가 활성화된 것을 확인할 수 있습니다.
    • 설정 > 개발자에서 "jetbrains running" 상태를 확인할 수 있습니다.

5. 연결 테스트

Claude와 안드로이드 스튜디오의 연결을 테스트합니다.

  1. 연결 확인:
    • Claude 데스크톱에서 안드로이드 스튜디오와 연결된 것을 확인할 수 있습니다.
    • Claude에게 "안드로이드 스튜디오에 연결되었나요?"라고 물어봅니다.
  2. 프로젝트 접근 테스트:
    • Claude에게 "현재 열려있는 프로젝트의 구조를 알려줄 수 있나요?"라고 물어봅니다.
    • Claude가 현재 열려있는 안드로이드 프로젝트에 접근할 수 있는지 확인합니다.

6. Figma 토큰 발급

https://github.com/GLips/Figma-Context-MCP

Figma API와의 연동을 위한 개인 액세스 토큰을 생성합니다.

  1. Figma 계정 설정 접속:
    • Figma 웹 인터페이스에 로그인합니다.
    • 우측 상단의 프로필 아이콘을 클릭한 후 Help and account > Account settings로 이동합니다.

  1. 개인 액세스 토큰 생성:
    • 설정 페이지에서 Generate new token 버튼을 클릭합니다.
    • 토큰 이름을 입력합니다 (예: "Claude Integration").
    • Scopes를 Read-only로 모두 설정합니다. (디자인 툴을 AI에 맞춰 수정하려면 상황에 맞게 설정 변경, 개발자는 읽기만 하면 충분)
    • '토큰 생성' 버튼을 클릭합니다.

  1. 토큰 저장:
    • 생성된 토큰을 안전한 곳에 복사해 둡니다. (이 토큰은 한 번만 표시됩니다)

7. Claude와 Figma MCP 설정

Claude 데스크톱에서 Figma MCP 서버를 설정합니다.

  1. MCP 설정 파일 수정:
    • Claude 데스크톱에서 설정 > 개발자 > 설정 편집으로 이동합니다.
    • claude_desktop_config.json 파일에 다음 내용을 추가합니다:
    {
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}
    • "--figma-api-key=YOUR-KEY" 부분에서 YOUR-KEY를 앞서 저장한 Figma 토큰으로 교체합니다.
    • 두 번째 MCP 서버 설정이므로, "mcpServers" 설정 앞에 쉼표(,)로 구분해 추가합니다.

  1. Claude 재시작:
    • 설정 파일 수정 후 Claude 데스크톱을 재시작합니다.

8. Claude에 Figma 컨텍스트 설정

Figma 디자인을 Claude가 이해할 수 있도록 준비합니다.

  1. Figma 파일 준비:
    • 디자인 요소를 명확하게 구성하고 네이밍합니다.
    • 가능한 한 모든 디자인 요소를 컴포넌트화합니다.
    • 일관된 네이밍 규칙을 적용합니다. (예: 버튼은 "btn_"로 시작하는 이름 사용)
  2. Figma 파일 공유 링크 생성:
    • 디자인 화면의 파일명 우측 클릭
    • Copy/Paste as > Copy link to selection을 선택하여 화면의 링크를 복사합니다.
    • 복사한 링크를 Claude에 붙여넣어 접근 가능 여부를 확인합니다.

9. 디자인 → 코드 변환 요청

준비된 환경에서 Claude에게 디자인 변환을 요청합니다.

  1. 변환 요청 작성:
    • Claude 데스크톱에서 다음과 같은 형식으로 요청을 작성합니다:
    다음 Figma 디자인을 안드로이드 스튜디오에 변환해 주세요:

Figma 링크: [복사한 Figma 공유 링크]

요구사항:
- ConstraintLayout 사용
- 모든 문자열은 strings.xml에 정의
- 모든 색상은 colors.xml에 정의
- 다음 네이밍 규칙 준수: [네이밍 규칙 설명]
- 대응해야 할 화면 크기: [화면 크기 정보]

변환이 필요한 화면/컴포넌트: [특정 프레임이나 컴포넌트 이름]

  1. 요청 전송 및 대기:
    • 작성한 요청을 전송하고 Claude가 응답을 생성할 때까지 기다립니다.
    • 복잡한 디자인의 경우 응답 생성에 몇 분이 소요될 수 있습니다.

10. 결과 검토 및 조정

생성된 코드를 검토하고 필요한 경우 조정을 요청합니다.

  1. 생성된 코드 검토:
    • Claude가 제공한 코드를 검토합니다.
    • 디자인 요구사항이 정확히 구현되었는지 확인합니다.
  2. 리소스 파일 확인:
    • Claude가 생성한 strings.xml, colors.xml, dimens.xml 파일의 내용을 확인합니다.
    • 필요한 경우 프로젝트의 기존 리소스 파일과 병합합니다.
  3. 조정 요청:
    • 수정이 필요한 부분이 있다면 Claude에게 명확하게 지시합니다:
    다음 부분을 수정해 주세요:
1. 버튼 위치를 화면 중앙으로 조정
2. 텍스트 크기를 18sp로 변경
3. 마진을 16dp로 통일

11. 커밋

  1. 버전 관리:
    • 변경 사항을 Git 등의 버전 관리 시스템에 커밋합니다.
    • 커밋 메시지에 Figma 디자인 버전 및 변환 날짜를 포함시킵니다.

결론

Claude AI와 Figma를 연동한 안드로이드 코드 변환은 개발 생산성을 크게 향상시킬 수 있습니다. 이 가이드를 통해 설정부터 최적화까지 전체 프로세스를 이해하고 적용할 수 있습니다. 디자인-개발 워크플로우를 자동화함으로써 더 많은 시간을 핵심 비즈니스 로직 개발에 집중할 수 있게 됩니다.

반응형
저작자표시 비영리 (새창열림)

티스토리툴바