AI 코딩 비용을 줄이려고 프롬프트부터 짧게 만들 필요는 없어요. Coinbase가 비용을 22.5% 낮춘 지점은 지시문의 길이가 아니라, 에이전트가 올바른 컴포넌트를 찾아 헤매는 구간이었습니다.
22.5%를 만든 건 더 짧은 프롬프트가 아니라 정확한 출발점입니다
Code Connect가 하는 일은 디자인 컴포넌트와 프로덕션 코드 컴포넌트 사이에 번역표를 만드는 것입니다. Figma MCP 서버만 사용하면 에이전트는 캔버스의 구조와 시각 정보를 React 형태로 받을 수 있지만, 그것이 사내 코드베이스의 어느 컴포넌트와 연결되는지는 모를 수 있어요. Code Connect 템플릿까지 준비하면 MCP 응답의 일부가 실제 import 문, 컴포넌트 이름, 속성값을 담은 코드 조각으로 바뀝니다.
예를 들어 디자인에 단계 표시기가 있어도 연결 정보가 없으면 에이전트가 진행 막대와 라벨을 조합해 비슷한 UI를 새로 만들 수 있습니다. 반면 연결 정보에 CDS의 Stepper와 속성 매핑이 들어 있으면 기존 컴포넌트를 바로 가져옵니다. 토큰을 아끼는 핵심은 모델에게 정보를 덜 주는 것이 아니라, 틀린 후보를 탐색할 필요가 없도록 정답의 위치를 주는 것입니다.
Coinbase Design System은 웹과 모바일을 포함한 여러 플랫폼의 컴포넌트와 디자인 토큰을 관리합니다. 공개 저장소에서도 React, React Native, Android Compose, iOS SwiftUI용 패키지를 확인할 수 있어요. 이런 다중 플랫폼 시스템에서는 같은 ‘버튼’도 프레임워크별 import 경로와 API가 다르기 때문에 단순한 컴포넌트 이름 목록만으로는 충분하지 않습니다. Code Connect는 하나의 디자인 컴포넌트를 서로 다른 언어와 프레임워크의 코드 구현에 각각 연결할 수 있습니다.
| 에이전트가 해야 할 일 | Code Connect 없음 | Code Connect 있음 |
|---|---|---|
| 컴포넌트 선택 | 코드베이스 검색 또는 새 UI 작성 | 매핑된 프로덕션 컴포넌트 사용 |
| 속성 변환 | Figma 속성을 보고 API 추측 | 디자인 속성과 코드 prop의 명시적 매핑 사용 |
| 스타일 처리 | 임의 CSS나 비슷한 색상 생성 가능 | 실제 토큰과 사용 예시 참조 |
| 실패 비용 | 검색, 디버깅, 재작성으로 대화가 길어짐 | 초기 경로가 좁아져 탐색 호출 감소 |
Coinbase 팀은 기존 Code Connect 매핑이 오래됐고 새 컴포넌트에는 템플릿이 없는 상태에서 출발했습니다. Claude Code와 Figma의 figma-code-connect 스킬로 컴포넌트 목록을 병렬 처리해, 팀 설명 기준 약 4시간 만에 수백 개 컴포넌트의 매핑 범위를 전체 디자인 시스템으로 넓혔습니다. 공식 CLI 문서도 이 스킬이 Figma 선택 영역에서 미연결 컴포넌트를 찾고, 저장소의 대응 코드를 확인해 .figma.ts 템플릿을 생성한다고 설명합니다. 다만 생성 결과를 검토하고 수정한 뒤 게시하라고 명시하고 있어요.
22.5%는 복사할 목표치가 아니라 검증할 가설입니다
Coinbase의 결과는 유망하지만 표본이 작습니다. 팀은 같은 디자인, 같은 모호한 프롬프트, 같은 Sonnet 4.6 모델을 사용하고 빈 코드베이스를 매번 초기화해 세 차례 실행했습니다. 프롬프트 캐싱이 결과를 유리하게 만들지 않도록 통제했고, 평균적으로 사용 토큰은 11.5%, 구현 시간은 22.3%, 비용은 22.5% 줄었다고 보고했습니다.
여기서 세 숫자를 같은 뜻으로 읽으면 안 됩니다. 토큰 수와 청구 비용은 입력·출력·캐시 읽기·캐시 쓰기에 서로 다른 단가가 적용될 수 있어요. Anthropic 문서에 따르면 캐시 읽기와 쓰기도 기본 입력 토큰과 가격 구조가 다르며, 동일한 프롬프트 접두사가 유지되는지에 따라 캐시 적중 여부가 바뀝니다. 따라서 자체 실험에서는 총 토큰 하나만 기록하지 말고 입력, 출력, 캐시 읽기, 캐시 생성, 실제 청구액을 분리해야 합니다.
Figma가 별도로 진행한 더 넓은 평가는 Coinbase 수치의 방향을 보강합니다. React 기반 디자인 시스템 두 개의 27개 테스트 사례에서 Code Connect 사용 시 중앙값 기준 토큰 사용량은 29.5%, 작업 시간은 19.6% 감소했고 코드 품질은 1~4점 척도에서 2점에서 3점으로 올랐습니다. 하지만 이 결과 역시 모든 조직에 그대로 적용되는 보편적 절감률은 아닙니다.
실제로 Figma 평가에서 효과를 크게 움직인 변수는 Code Connect 커버리지였습니다. MCP 응답 중 Code Connect 조각이 평균 20%였던 예제 디자인 시스템이 약 6%였던 내부 시스템보다 개선 폭이 컸습니다. 연결 범위가 높을수록 에이전트가 node_modules를 뒤지거나 아이콘 이름을 광범위하게 검색하고, 기존 컴포넌트를 CSS로 다시 만드는 일이 줄었습니다.
22.5%를 도입 제안서의 확정 ROI로 쓰지는 마세요
Coinbase 수치는 한 디자인을 조건별로 세 번 실행한 자체 평가의 평균입니다. 모델, 저장소 크기, 디자인 난도, 컴포넌트 재사용률, 캐시 상태가 달라지면 결과도 달라져요. 먼저 자주 구현하는 화면 몇 개로 기준선을 만들고, 커버리지와 품질을 함께 측정하는 편이 안전합니다.
품질도 화면 유사도 하나로 판단하면 부족합니다. Coinbase는 올바른 컴포넌트와 디자인 토큰을 썼는지 확인했고, Figma 평가는 정확성, 코드 품질, 유지보수성, 완결성, 접근성·보안 등을 포함한 모범 사례를 함께 채점했습니다. 화면이 닮았어도 탭이 실제로 전환되지 않거나 기존 컴포넌트 대신 수백 줄의 CSS가 생겼다면 성공으로 세면 안 됩니다.
우리 팀에서 재현하는 4단계
반복 사용량이 많은 컴포넌트부터 목록화하세요
최근 구현한 화면 10개를 골라 Button, Input, ListCell, Modal처럼 등장 횟수가 많은 컴포넌트를 세세요. 각 항목에 Figma 노드, 코드 import 경로, 지원 플랫폼, 사용 중단 여부를 적습니다. 처음부터 전체 라이브러리를 연결하기보다 상위 20개와 에이전트가 자주 틀리는 아이콘·복합 폼을 우선하면 초기 효과를 빨리 확인할 수 있어요.
팀 구조에 맞춰 UI와 CLI 중 연결 방식을 고르세요
경로와 컴포넌트 이름을 빠르게 연결하려면 Figma 안의 Code Connect UI가 편합니다. 디자인 속성을 실제 prop과 동적으로 매핑하고 정확한 코드 예시를 제공하려면 저장소에서 실행하는 CLI가 알맞아요. 두 방식은 함께 사용할 수 있지만, 현재 Code Connect는 Organization 또는 Enterprise 플랜의 Full·Dev seat가 필요합니다.
매핑 파일을 만들고 실제 import까지 검수하세요
CLI를 쓴다면 Node.js 18 이상과 Code Connect 권한이 있는 Figma 개인 액세스 토큰을 준비하고 npm install --global @figma/code-connect@latest로 도구를 설치합니다. 프로젝트 루트에 figma.config.json을 만든 뒤 .figma.ts 파일에서 Figma 문자열·불리언·열거형 속성을 코드 prop으로 연결하세요. 생성된 템플릿의 import 경로, 기본값, variant, 사용 중단 컴포넌트를 사람이 검토한 다음 npx figma connect publish로 게시합니다.
같은 과제를 A/B로 반복하고 커버리지별로 나누세요
실제 업무에서 중간 난도의 화면 5개를 고르고 ‘Code Connect 없음’과 ‘있음’을 각각 최소 5회 실행하세요. 모델, 프롬프트, 저장소 커밋, 권한, 캐시 조건을 고정합니다. 실행마다 입력·출력·캐시 토큰, 비용, 완료 시간, 도구 호출 수를 기록하고, 빌드·테스트 통과 여부와 올바른 컴포넌트·토큰 사용률도 채점하세요. 마지막에는 전체 평균만 보지 말고 화면의 디자인 시스템 컴포넌트 비율과 연결 커버리지 구간별로 결과를 나눕니다.
운영 단계에서는 새 컴포넌트 출시와 Code Connect 갱신을 같은 완료 조건으로 묶는 게 중요합니다. Coinbase도 현재 컴포넌트를 만들거나 수정할 때 대응 템플릿을 함께 동기화한다고 설명합니다. 매핑이 오래되면 에이전트에 정확한 답이 아니라 낡은 답을 자신 있게 건네는 셈이니까요.
