기능 비하인드: 멀 (새 탭에서 열림)
Figma는 디자인 피드백의 핵심이 단순한 텍스트가 아닌 '시각적 맥락'에 있다는 점에 주목하여 댓글 시스템을 전면적으로 개편했습니다. 기존의 단순 좌표 기반 방식을 넘어 디자인 레이어나 특정 객체에 댓글을 직접 결합함으로써, 캔버스의 요소가 이동하거나 수정되어도 피드백의 대상이 명확히 유지되도록 설계했습니다. 이러한 변화는 협업 과정에서 발생하는 소통의 혼선과 불필요한 재확인 과정을 획기적으로 줄여줍니다.
절대 좌표에서 객체 중심의 앵커링으로 전환
- 기존 댓글 시스템은 캔버스의 절대적인 X, Y 좌표를 기준으로 고정되었기 때문에, 프레임을 이동하거나 레이어 구조를 변경하면 댓글이 엉뚱한 위치에 남는 '부유(Floating) 현상'이 발생했습니다.
- 새로운 시스템은 댓글을 특정 레이어(Object)의 ID에 할당하여, 해당 객체의 상대적 위치값(Offset)을 저장합니다. 이를 통해 버튼이나 카드 UI가 이동하더라도 댓글이 항상 해당 요소를 따라다니게 구현했습니다.
- 단순한 위치 추적을 넘어, 객체가 삭제되거나 이름이 변경되는 등의 복잡한 상태 변화에도 댓글의 맥락이 유실되지 않도록 견고한 데이터 관계를 구축했습니다.
줌 레벨과 시각적 가독성 최적화
- 수백 개의 댓글이 캔버스를 가득 채워 디자인 작업을 방해하지 않도록 줌 레벨에 따른 동적 클러스터링(Clustering) 알고리즘을 적용했습니다.
- 캔버스를 축소했을 때는 인접한 여러 댓글을 하나의 배지로 묶어 시각적 소음을 최소화하고, 확대 시에는 각 댓글의 정확한 위치를 개별적으로 표시하여 상세한 확인이 가능하게 했습니다.
- 댓글 핀의 디자인을 세밀하게 조정하여, 읽지 않은 댓글, 해결된 논의, 활성화된 대화 상태를 사용자가 직관적으로 구분할 수 있도록 시각적 언어를 통합했습니다.
실시간 협업과 상태 관리의 정교화
- 여러 사용자가 동시에 댓글을 작성하거나 수정하는 멀티플레이어 환경에서 데이터 충돌을 방지하기 위해, Figma 고유의 실시간 동기화 엔진을 댓글 시스템에도 심화 적용했습니다.
- 댓글 작성 시 디자인 맥락을 가리지 않도록 입력창의 투명도와 배치를 최적화했으며, 사이드바의 댓글 목록과 캔버스 상의 핀 사이의 상호작용을 강화하여 탐색 속도를 높였습니다.
- 특정 사용자 언급(@mention)이나 알림 시스템을 디자인 캔버스의 현재 뷰포트와 연동하여, 알림을 클릭했을 때 작성자가 보고 있던 정확한 맥락으로 즉시 이동하게 설계했습니다.
디자인 도구에서 댓글은 단순한 부가 기능이 아니라 협업의 본질입니다. 객체 기반의 앵커링과 스마트한 가독성 관리는 대규모 팀이 복잡한 디자인 시스템을 운영할 때 발생할 수 있는 소통 비용을 낮추는 핵심적인 기술적 해법이 됩니다.