피그마는 수만 개의 레이어가 복잡하게 얽힌 디자인 파일 내에서 원하는 요소를 빠르게 찾고 수정할 수 있는 ‘찾기 및 바꾸기(Find and replace)’ 기능을 도입했습니다. 이 기능은 단순한 텍스트 검색을 넘어 레이어와 컴포넌트까지 아우르는 복합적인 검색 환경을 제공하며, 수백만 개의 객체가 포함된 대형 파일에서도 지연 없는 성능을 보장하는 데 초점을 맞췄습니다. 결과적으로 디자이너들은 대규모 프로젝트에서도 수동 작업의 번거로움 없이 디자인 일관성을 효율적으로 유지할 수 있게 되었습니다.

디자인 데이터의 특성을 고려한 검색 엔진 구축

단순한 문자열 매칭을 넘어 레이어 이름, 텍스트 콘텐츠, 프레임 구조 등 피그마 고유의 객체 속성을 모두 검색 범위에 포함했습니다.
수백만 개의 객체를 포함한 파일에서도 즉각적인 검색 결과를 반환하기 위해 데이터 구조를 최적화하고 효율적인 인덱싱 시스템을 설계했습니다.
텍스트 검색 시 대소문자 구분, 전체 단어 일치, 정규 표현식과 유사한 필터링 옵션을 제공하여 검색의 정확도를 극대화했습니다.

실시간 성능 최적화와 인메모리 처리

사용자가 디자인을 수정함에 따라 검색 결과가 실시간으로 업데이트되도록 인크리멘탈(incremental) 업데이트 방식을 채택했습니다.
웹브라우저 환경의 제약을 극복하기 위해 클라이언트 사이드에서 고성능 검색 알고리즘을 실행하여 서버 통신 없이도 즉각적인 반응성을 확보했습니다.
대량의 레이어 트리 구조를 순회(Traverse)할 때 발생하는 메모리 부하를 최소화하기 위해 효율적인 데이터 접근 패턴을 구현했습니다.

맥락을 유지하는 탐색 및 일괄 수정 인터페이스

검색 결과 리스트에서 특정 항목을 선택하면 해당 요소가 위치한 캔버스로 즉시 이동 및 확대(Zoom)하여 작업 문맥을 잃지 않도록 돕습니다.
'모두 바꾸기(Replace all)' 기능을 통해 여러 페이지와 레이어에 흩어진 반복적인 텍스트나 이름을 한 번에 수정할 수 있어 작업 시간을 획기적으로 단축했습니다.
전체 파일뿐만 아니라 '현재 선택 영역 내 검색' 옵션을 제공하여 특정 섹션이나 컴포넌트 내부로 검색 범위를 한정할 수 있는 유연성을 제공합니다.

대규모 디자인 시스템이나 복잡한 프로토타입을 관리하는 팀이라면 이 기능을 통해 레이어 정리 및 텍스트 일관성 검토 시간을 크게 줄일 수 있습니다. 특히 컴포넌트 내의 특정 텍스트를 일괄 변경해야 하거나, 명명 규칙(Naming convention)을 준수하기 위해 레이어 이름을 정리할 때 유용하게 활용할 것을 권장합니다.