기능 비하인드 (새 탭에서 열림)

Figma는 Community 파일에서 사용자와 제작자가 더 깊이 소통할 수 있도록 일반 댓글과 캔버스 위치에 연결되는 컨텍스트 댓글을 도입했다. 기존 에디터 댓글 기능을 그대로 재사용하는 작업으로 시작했지만, 읽기 전용 파일 뷰어를 양방향 커뮤니케이션 공간으로 바꾸면서 UI·성능·공간 설계 문제가 발생했다. 최종적으로는 사용자가 캔버스를 클릭하면 전체 화면 댓글 보기로 전환하는 방향을 택했다.

커뮤니티에 댓글이 필요했던 이유

• Figma Community는 파일과 플러그인을 공유하고 발견하는 공간이었지만, 초기에는 제작자와 사용자 간 직접적인 소통 수단이 부족했다.
• 글쓴이는 파일의 프로토타입 시작 프레임 오류를 발견했지만, 제작자에게 연락하기 위해 개인 웹사이트와 트위터를 거쳐 이메일을 찾아야 했다.
• 이러한 경험을 개선하려면 단순한 리소스 공유를 넘어 질문, 의견, 피드백을 쉽게 주고받을 수 있어야 했다.
• 이를 위해 두 가지 댓글 방식을 구상했다.
  • 일반 댓글: 파일 아래 피드 형태로 표시
  • 컨텍스트 댓글: 에디터의 댓글처럼 파일 속 특정 위치에 연결

기존 댓글 기능을 커뮤니티에 적용하며 생긴 문제

• 처음에는 기존 에디터 댓글 UI와 코드를 파일 미리보기에 그대로 덧붙이면 될 것으로 예상했다.
• 하지만 다음과 같은 기술적 수정이 필요했다.
  • 뷰포트 정보를 주고받을 수 있도록 기존 iframe 기반 파일 미리보기 구조를 교체
  • 댓글 수가 많아질 때 발생할 수 있는 성능 문제 검토
• 더 큰 어려움은 코드보다 상호작용 설계였다.
• 에디터 내부 댓글과 비슷해 보이려면, 읽기 전용 커뮤니티 뷰어에서는 오히려 다른 상호작용을 설계해야 했다.
• 기존 Community는 제작자가 콘텐츠를 공개하고 사용자가 이를 소비하는 일방향 구조였지만, 댓글은 사용자에서 제작자로 향하는 새로운 소통 경로를 만들었다.
• 특히 컨텍스트 댓글은 일반적인 세로형 댓글 피드와 달리 다음 문제를 해결해야 했다.
  • 댓글을 디자인의 특정 지점에 고정하는 방법
  • 댓글을 보면서 캔버스를 이동하고 탐색하는 방법
  • 댓글 기능이 기존의 편안한 읽기 전용 경험을 방해하지 않도록 하는 방법

초기 디자인 탐색과 협업

• 엔지니어링, 디자인, 제품 팀은 개발 과정 내내 긴밀한 피드백 루프를 유지했다.
• 정적인 와이어프레임보다 댓글 생성과 캔버스 이동을 보여주는 GIF와 인터랙션 프로토타입을 적극 활용했다.
• 여러 시안을 통해 다음과 같은 방향을 탐색했다.
  • 댓글 피드를 배치할 위치
  • 캔버스 미리보기에서 댓글을 확인하는 방식
  • 댓글 위치를 이해하기 위한 미니 뷰어와 전체 화면 뷰어
• 구체적인 프로토타입 덕분에 기술적 실현 가능성, UI 예외 상황, 출시 일정에 따라 기능 범위를 빠르게 좁힐 수 있었다.

초기 출시를 위한 세 가지 목표

• 사용자가 최대한 빠르고 쉽게 댓글 기능에 진입하도록 해 참여를 유도한다.
• 컨텍스트 댓글이 달린 파일 위치를 충분히 크게 보여주어 사용자가 댓글의 의미와 디자인 맥락을 이해하도록 한다.
• 출시 일정 안에서 구현 가능하고 지나치게 복잡하지 않은 해결책을 선택한다.

전체 화면 기반 컨텍스트 댓글

• 위 목표와 제약을 바탕으로 컨텍스트 댓글은 전체 화면 보기에서만 표시하도록 결정했다.
• 전체 화면은 댓글이 연결된 디자인 영역을 충분히 확인할 수 있는 공간을 제공한다.
• 사용자가 축소된 캔버스를 클릭하면 전체 화면 뷰어로 확장되도록 설계했다.
• 반대로 축소된 캔버스에서는 클릭과 패닝을 비활성화해, 일반적인 파일 탐색 경험과 댓글 상호작용이 충돌하지 않도록 했다.
• 결과적으로 댓글 기능을 기존 파일 뷰어에 무리하게 끼워 넣기보다, 댓글을 확인하고 위치를 탐색하는 별도의 집중된 경험으로 분리했다.

실용적인 시사점

기존 기능을 다른 제품 영역에 재사용할 때는 코드 복사보다 사용 맥락의 차이를 먼저 검토해야 한다. 특히 읽기 전용 화면에 편집기용 상호작용을 도입한다면, 기능 자체보다 진입 방식·공간 배치·탐색 흐름·성능과 같은 전체 사용자 경험을 함께 재설계하는 것이 중요하다.