피그마 AI 검색의

Figma의 AI 검색은 텍스트·이미지·레이어 선택을 동일한 임베딩 공간에서 비교해 디자인과 컴포넌트를 의미적으로 찾도록 구축됐다. 핵심 기반은 CLIP 멀티모달 임베딩 모델과 벡터 검색 인덱스이며, 수십억 개의 임베딩을 생성·관리하면서도 비용과 처리량을 고려한 인프라 설계가 필요했다. 특히 파일 내부의 검색 가능한 프레임을 식별하고 썸네일과 임베딩을 비동기적으로 생성하는 과정이 주요 기술 과제였다.

AI 검색이 해결하는 문제

• 디자인 검색

  • 조직이나 팀 전체의 Figma 파일에 포함된 프레임을 검색한다.
  • 파일명이나 레이어 이름이 없어도 프레임의 시각적 내용으로 찾을 수 있다.
  • 텍스트 설명, 스크린샷, 선택한 Figma 레이어를 검색 입력으로 사용할 수 있다.
  • 선택 영역은 새 스크린샷으로 렌더링한 뒤 이미지 검색과 같은 경로로 처리한다.

• 컴포넌트 검색

  • 기존 Assets 검색의 엄격한 텍스트 일치 방식을 의미 기반 검색으로 확장했다.
  • 예를 들어 이름이 😀인 컴포넌트를 “smiley”, “happy”, “face”, “grin” 같은 표현으로도 찾을 수 있다.
  • 컴포넌트 이름과 설명에 검색 키워드를 일일이 추가하는 SEO 작업이 필요 없다.
  • 컴포넌트 역시 스크린샷이나 레이어 선택을 이용해 시각적으로 검색할 수 있다.

CLIP 기반 멀티모달 임베딩

• 임베딩 모델은 텍스트나 이미지를 의미를 보존한 숫자 배열로 변환한다.
• Figma는 현재 오픈소스 CLIP 모델을 사용한다.
• CLIP은 이미지와 텍스트를 같은 벡터 공간에 표현한다.
  • 고양이 이미지의 임베딩과 "cat"이라는 텍스트의 임베딩이 서로 가까운 위치에 놓인다.
  • 따라서 이미지와 텍스트를 서로 다른 입력 방식으로 검색해도 의미적으로 비교할 수 있다.
• 모델은 고객의 비공개 Figma 파일이나 고객 데이터를 학습에 사용하지 않았다.
  • 공개된 무료 Community 파일의 UI 이미지로 미세 조정했다.
• 초기에는 선택 영역을 JSON 같은 텍스트 표현으로 변환해 임베딩하는 방식도 검토했다.
  • 그러나 이미지로 임베딩을 생성하는 방식이 더 나은 검색 결과를 제공했다.
  • 스크린샷 검색과 동일한 처리 경로를 사용할 수 있다는 장점도 있었다.

벡터 검색 처리 방식

• 검색 대상 콘텐츠마다 임베딩을 생성해 벡터 검색 인덱스에 저장한다.
  • 예: 디자인 시스템의 모든 컴포넌트와 각 컴포넌트의 임베딩
• 사용자가 검색하면 입력을 먼저 임베딩으로 변환한다.
  • 텍스트 검색은 입력 문장을 임베딩 모델에 전달한다.
  • 스크린샷 검색은 이미지에서 임베딩을 생성한다.
  • 레이어 선택 검색은 선택 영역을 스크린샷으로 만든 뒤 임베딩한다.
• 생성된 쿼리 임베딩과 인덱스의 임베딩 사이 거리를 계산해 가장 가까운 항목을 반환한다.
• 전통적인 문자열 검색처럼 검색어와 색인 항목을 직접 비교하는 것이 아니라, 고차원 벡터 공간에서 최근접 이웃을 찾는다.

검색 가능한 프레임 식별

• Figma 파일 깊숙한 곳에 있는 모든 검색 대상 프레임을 찾아야 한다.
• 각 프레임에 대해 다음 작업을 수행한다.
  • Figma 레이어를 렌더링해 썸네일을 생성한다.
  • 썸네일에서 임베딩을 생성한다.
  • 메타데이터와 임베딩을 검색 인덱스에 기록한다.
• 게시되지 않은 프레임은 일반적인 방식으로 쉽게 열거할 수 없다는 문제가 있다.
• 이를 해결하기 위해 비동기 작업에서 서버 측 C++ Figma 에디터를 헤드리스 방식으로 실행한다.
• 서버에서 C++ 에디터를 실행하기 위해 별도의 샌드박싱 기술을 사용한다.

저장소와 인프라 선택

• Figma는 자체 RDS 클러스터도 운영하지만, AI 검색에는 DynamoDB를 사용한다.
• AI 검색의 저장 요구사항이 복잡한 관계형 트랜잭션보다 단순한 키-값 저장에 가깝기 때문이다.
• 주요 요구사항은 다음과 같다.
  • 임베딩과 관련 메타데이터의 대량 저장
  • 높은 쓰기 처리량
  • 검색 시 빠른 읽기
  • 대규모 인덱스 생성 및 갱신 처리
• 전체 시스템은 수십억 개의 임베딩을 생성하고 색인해야 하므로 검색 품질뿐 아니라 생성 비용과 운영 비용도 중요한 설계 기준이 된다.

Figma의 접근 방식은 이미지와 텍스트를 하나의 의미 공간에 매핑하고, 프레임·컴포넌트별 임베딩을 사전에 구축하는 것이다. 유사한 기능을 구현한다면 먼저 검색 대상을 안정적으로 열거하고, 렌더링·임베딩 생성·색인 갱신을 비동기 파이프라인으로 분리하며, 모델 학습 데이터와 고객 데이터의 경계를 명확히 관리하는 것이 중요하다.