피그마(Figma)는 디자인 수정에 따라 댓글이 원래 위치를 잃고 캔버스 위에 표류하는 문제를 해결하기 위해, 좌표 기반 시스템에서 객체 기반의 '컨텍스트 기반 댓글(Contextual Comments)' 시스템으로 전환했습니다. 이제 댓글은 단순히 캔버스의 특정 지점이 아니라 디자인 계층 구조 내의 특정 노드(Node)에 직접 연결되어, 레이어가 이동하거나 크기가 변하더라도 맥락을 유지하며 따라다닙니다. 이 기술적 변화를 통해 협업 과정에서의 커뮤니케이션 오류를 줄이고 디자인 수정에 유연하게 대응할 수 있는 기반을 마련했습니다.

절대 좌표계에서 상대적 앵커링으로의 전환

기존 시스템은 댓글을 캔버스의 절대적인 X, Y 좌표에 저장했기 때문에, 레이어를 이동시키면 댓글만 캔버스에 남겨지는 문제가 있었습니다.
새로운 시스템은 댓글을 특정 '노드 ID(Node ID)'에 귀속시키고, 해당 노드의 로컬 좌표계(Local coordinate space)를 기준으로 위치를 저장합니다.
이를 통해 객체가 그룹화되거나, 다른 페이지로 이동하거나, 프레임 안에서 위치가 바뀌더라도 댓글이 디자인 요소와의 상대적 위치를 정확히 유지합니다.

정교한 타겟팅과 계층 구조 처리

사용자가 캔버스를 클릭할 때, 수많은 중첩된 레이어 중 어떤 레이어에 댓글을 달고 싶은지 판단하는 정교한 알고리즘이 도입되었습니다.
너무 깊은 하위 레이어(예: 아이콘 내부의 작은 경로)보다는 의미 있는 수준의 부모 레이어를 선택하도록 우선순위를 조정하여 사용 편의성을 높였습니다.
컴포넌트와 인스턴스 관계에서도 댓글이 유효하게 작동하도록 설계하여, 마스터 컴포넌트의 변경 사항이 인스턴스에 달린 댓글의 위치에 부정적인 영향을 주지 않도록 처리했습니다.

동적 변화에 대응하는 렌더링 최적화

디자인 요소의 크기가 변하거나(Resizing), 오토 레이아웃(Auto Layout)에 의해 위치가 유동적으로 변하는 상황에서도 댓글 아이콘이 가독성을 유지하도록 실시간으로 위치를 재계산합니다.
댓글이 달린 객체가 삭제되거나 숨겨지는 예외 상황을 처리하기 위한 로직을 구축하여, 유실된 맥락을 사용자가 쉽게 복구하거나 확인할 수 있도록 지원합니다.
웹, 데스크톱 앱, 모바일 앱 등 서로 다른 환경에서도 동일한 노드 기준 좌표를 바탕으로 일관된 댓글 위치를 렌더링합니다.

디자인 도구에서 '댓글'은 단순한 텍스트 데이터가 아니라 디자인 자산의 일부로 취급되어야 합니다. 피그마의 사례처럼 사용자 경험을 개선하기 위해서는 데이터 저장 구조 자체를 기능의 본질(디자인 요소와의 연결성)에 맞게 재설계하는 과정이 필수적입니다. 협업 툴을 개발할 때 상태 값의 '절대적 위치'보다는 '논리적 관계'에 집중하는 것이 장기적으로 훨씬 유연한 시스템을 만드는 길임을 시사합니다.