기능 비하인드: 찾 (새 탭에서 열림)
Figma의 ‘찾기 및 바꾸기’는 단순한 검색창 추가가 아니라, 캔버스 구조에 맞는 결과 정렬과 탐색 경험을 설계해야 하는 복합적인 기능이었다. 팀은 기존 플러그인 경험과 프로토타입을 바탕으로 FigJam에서 핵심 검색 경험을 먼저 검증한 뒤, 섹션과 공간적 근접성을 활용해 자연스러운 결과 순서를 구현했다. 이 과정에서 실험, 실제 파일 사용, 사내 피드백을 반복하며 기능을 다듬었다. ## 직관적인 검색 경험을 설계하기 - 기능 범위를 정하기 전 디자인 팀과 브레인스토밍을 진행했다. - 엔지니어링, 제품 관리, UX 라이팅, 제품 마케팅이 참여하는 협업 그룹을 구성했다. - 다른 도구의 검색 경험을 분석해 다음 원칙을 세웠다. - 빠르고 가벼울 것 - 캔버스를 이동할 때도 매끄러울 것 - 브라우저 등 익숙한 검색 방식과 유사할 것 - 실제 파일에서 사용해 보기 전에는 검색 경험을 정확히 평가하기 어려웠기 때문에, 디자이너가 기존 플러그인 개발 경험을 활용해 초기 프로토타입을 제작했다. - 이후 엔지니어링 팀이 디자인과 구현을 함께 반복했고, Figma 구성원들이 일상 업무에서 사용하며 피드백과 버그 탐색에 참여했다. ## FigJam에서 핵심 경험부터 검증하기 - 팀은 복잡한 Figma 파일보다 FigJam에서 먼저 기능을 구현했다. - 초기 목표는 다음 두 가지로 제한했다. - 파일 안의 텍스트 찾기 - 검색 결과 사이를 순서대로 이동하기 - 이를 통해 다양한 객체 유형과 복잡한 파일 구조를 지원하기 전에 검색의 기본 동작과 사용성을 검증했다. ## 캔버스에 맞는 검색 결과 정렬 - 웹페이지나 문서와 달리 Figma와 FigJam의 콘텐츠는 위에서 아래로 흐르지 않는다. - 객체가 캔버스의 여러 방향에 흩어져 있고, 사용자가 만든 공간적 구조도 파일마다 다르다. - 따라서 검색 결과의 순서가 예측 가능하면서도 캔버스의 시각적 구조와 어울려야 했다. - 정렬이 부자연스러우면 검색 결과를 따라갈 때 화면이 갑자기 멀리 이동해 탐색 경험이 끊길 수 있었다. ### 기존 행 단위 정렬의 한계 - 첫 구현에서는 프로토타이핑 엔진이 사용하던 행 단위 정렬 로직을 재활용했다. - 슬라이드처럼 객체가 규칙적으로 배치된 문서에서는 이 방식이 효과적이었다. - 하지만 FigJam처럼 스티키 노트와 도형이 캔버스 곳곳에 흩어진 경우에는 논리적인 그룹을 반영하지 못했다. - 단순히 좌우·상하 위치만 기준으로 삼으면 사용자가 인식하는 주제별 묶음과 검색 순서가 달라질 수 있었다. ## 섹션과 공간적 근접성 활용 - FigJam에 섹션 기능이 도입되면서 캔버스 콘텐츠를 더 명확하게 구조화할 수 있게 됐다. - 검색 결과를 섹션별로 정렬하면 사용자가 시각적으로 묶어 둔 그룹을 따라 자연스럽게 탐색할 수 있었다. - 실제 팀 사용 패턴을 분석한 결과, 브레인스토밍에서는 다음과 같은 구조가 자주 나타났다. - 관련 스티키를 한곳에 모아 핵심 주제를 도출함 - 답변이나 후속 의견을 겹쳐 배치해 대화의 흐름을 표현함 - 섹션에 속하지 않은 객체를 위해 공간적 정렬 알고리즘도 도입했다. - 이 알고리즘은 객체 사이의 거리를 기준으로 가까운 요소를 그룹화해, 흩어진 스티키에서도 논리적인 검색 결과 묶음을 만들었다. ## 휴리스틱을 통한 정렬 방향 결정 - 섹션의 위치와 형태가 검색 결과의 진행 방향에 어떤 영향을 주는지 분석했다. - 다양한 캔버스 배치와 실제 사용 사례를 테스트하며 정렬 규칙을 휴리스틱으로 정리했다. - 즉, 하나의 고정된 정렬 알고리즘만 적용하기보다 섹션 구조, 객체의 위치, 주변 요소와의 거리 등을 종합해 결과 순서를 결정하려 했다. - 이 접근은 Figma와 FigJam처럼 사용자가 자유롭게 구조를 만드는 캔버스 제품에서 검색 결과를 예측 가능하게 만드는 데 초점을 둔다. ## 실용적인 시사점 캔버스 기반 제품의 검색 기능은 텍스트 매칭만으로 완성되지 않는다. 검색 결과를 어떤 순서로 보여주고 화면을 어떻게 이동시킬지가 핵심이므로, 제품의 공간적 구조와 사용자의 그룹화 습관을 반영해야 한다. 특히 초기에는 제한된 환경에서 핵심 경험을 검증하고, 프로토타입과 실제 사용자 피드백을 반복적으로 결합하는 방식이 효과적이다.