figma·2021년 8월 30일·3분 읽기큐레이션 요약

Figma와 FigJam에서 대

Figma는 원격 협업에서 발생하는 도구 전환의 불편을 줄이기 위해 Figma와 FigJam 안에 오디오와 커서 채팅 기능을 도입했다. 사용자는 파일을 벗어나지 않고 실시간으로 질문·피드백을 주고받거나 음성으로 대화할 수 있으며, FigJam에서는 하이파이브도 가능하다. 이 기능들은 기존 비동기 협업을 대체하기보다, 즉흥적인 대화와 가벼운 동기식 협업을 보완하는 데 목적이 있다. ## 파일 안에서 바로 소통하는 협업 - 원격 근무에서는 간단한 질문이나 의견 확인에도 별도 메신저·화상회의 도구로 전환해야 하는 불편이 발생한다. - Figma는 동료들이 같은 파일 안에서 작업하는 흐름을 유지하면서 대화할 수 있도록 오디오와 커서 채팅을 추가했다. - 별도 프로그램 설치, 설정, 전화 연결, 캘린더 초대 없이 빠르게 사용할 수 있도록 설계됐다. - 목표는 대면 근무 중 자연스럽게 발생하던 “자리에서 즉석으로 묻기”나 “복도에서 우연히 만나 대화하기” 같은 상호작용을 디지털 파일 안에서 재현하는 것이다. ## 오디오와 커서 채팅 - **커서 채팅** - 사용자의 커서에 질문이나 메시지를 표시해 파일의 특정 맥락에서 대화할 수 있다. - 디자인 요소를 함께 보고 있는 상태에서 즉시 의견을 요청하거나 문제를 설명할 수 있다. - Figma와 FigJam 모두에서 제공된다. - **오디오** - 파일 안에서 팀원과 음성으로 빠르게 대화할 수 있다. - 영상이 필요하지 않은 브레인스토밍이나 짧은 확인 작업에 적합하다. - 별도의 화상회의 도구로 이동하지 않아도 된다. - **하이파이브** - FigJam에서 아이디어가 정리되거나 작업이 진전됐을 때 팀원에게 하이파이브를 보낼 수 있다. - 기능적인 소통뿐 아니라 원격 협업의 즐거움과 친밀감을 높이는 역할을 한다. ## 맥락을 유지하는 실시간 협업 - 파일 링크를 공유한 뒤 같은 작업물을 보며 실시간으로 질문과 피드백을 주고받을 수 있다. - 대화가 파일의 특정 디자인, 보드, 아이디어와 직접 연결되므로 별도 화면을 설명하거나 자료를 다시 공유할 필요가 줄어든다. - 작업 중 막힌 부분을 함께 해결하거나, 라이브 워크숍과 피드백 세션을 진행하는 데 활용할 수 있다. ## 가벼운 잼 세션 - 모든 협업에 영상 회의가 필요한 것은 아니므로, 오디오와 커서 채팅은 부담이 적은 브레인스토밍 수단으로 제시된다. - FigJam 템플릿으로 세션을 시작하고 타이머를 설정한 뒤 곧바로 공동 작업을 진행할 수 있다. - 영상 통화보다 준비 절차가 짧아 짧은 아이디어 회의나 워크숍에 적합하다. - 다만 기능은 동기식 협업을 위한 것이며, 각자가 먼저 작업한 뒤 나중에 피드백을 받는 비동기 방식도 여전히 중요하다고 설명한다. ## 원격 환경에서의 우연한 만남 - 동료가 파일 안에 있는 것을 발견하면 커서 채팅으로 인사를 건네거나 음성 대화를 시작할 수 있다. - 디자인에 대한 짧은 의견 교환, 즉석 피드백, 문제 해결 등 과거 사무실에서 자연스럽게 일어나던 상호작용을 지원한다. - 정식 회의를 예약하기보다 필요할 때 짧게 연결하는 “즉흥적 동기화”를 가능하게 한다. ## 출시 및 향후 계획 - 커서 채팅은 Figma와 FigJam의 모든 사용자에게 제공된다. - FigJam의 하이파이브 기능도 사용할 수 있다. - 오디오는 당시 교육 플랜과 유료 플랜을 대상으로 순차 출시됐다. - Figma는 데스크톱 앱에서 실시간 자막을 오픈 베타로 출시할 계획이라고 밝혔다. - 자막 기능을 통해 접근성을 높이고 사용자 피드백을 수집해 커뮤니케이션 기능을 개선하려 했다. 실무에서는 디자인 파일을 함께 검토하며 빠르게 의견을 주고받을 때 커서 채팅을 사용하고, 짧은 브레인스토밍이나 문제 해결에는 오디오를 활용하는 방식이 효과적이다. 반면 기록이 필요하거나 시간대가 다른 팀과 협업할 때는 기존 댓글과 비동기 피드백을 함께 사용하는 것이 적절하다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigmafigjamaudio-chat+2

figma·2021년 7월 14일·3분 읽기큐레이션 요약

창의성 흐름 유지하기

어려운 시기에도 창의성과 생산성을 유지하려면 업무만 몰아붙이기보다 재미, 휴식, 인간적인 교류를 의도적으로 마련해야 한다. Shopify의 일러스트레이터 Alek Mackie는 Figma를 활용한 가벼운 장난과 창작 활동, 자율적인 팀 활동, 비업무적 대화, 즉흥적인 협업 세션이 팀의 에너지를 회복하고 창의적 돌파구를 만드는 데 도움이 된다고 설명한다. 핵심은 모든 활동을 강요하지 않고 각자의 경계와 에너지 수준을 존중하는 것이다. ## 재미를 업무에 더하기 - 책임이 큰 업무일수록 때때로 즐거움을 의도적으로 넣는 것이 중요하다. - 가벼운 재미는 구성원의 행복감과 몰입도를 높이고 창의성을 유지하는 데 도움이 된다. - Figma처럼 익숙한 업무 도구를 진지한 디자인 작업뿐 아니라 유쾌한 놀이에도 활용할 수 있다. - 예를 들어 동료의 작업 파일에 재미있는 이미지를 남기거나, 실제 커서처럼 보이는 그래픽을 배치하는 식의 장난이 업무의 단조로움을 깨뜨릴 수 있다. - 단, 장난은 동료가 불쾌해하지 않을 범위에서 가볍고 안전하게 이루어져야 한다. ## 업무에서 잠시 벗어나는 팀 활동 - 팀이 함께 일에서 벗어나 연결감을 쌓는 시간은 사소해 보여도 큰 효과가 있다. - 좋은 팀 활동은 다음 조건을 갖춰야 한다. - 1시간 이내로 빠르고 간단할 것 - 명확한 성과나 업무 목표를 요구하지 않을 것 - 참여와 불참이 모두 가능한 선택 사항일 것 - 사전에 참여 의사를 묻고 강요하지 않을 것 - 모든 구성원을 초대하고 접근성 문제를 고려할 것 - 예시로 격주 금요일 오후에 짧은 창작 주제로 작업하는 비동기 활동인 ‘Creative Brain Time’을 운영할 수 있다. - 온라인으로 Bob Ross의 그림 방송을 함께 보며 MS Paint 시뮬레이터로 따라 그리는 활동처럼, 결과보다 함께 즐기는 과정에 초점을 맞출 수도 있다. ## 사람으로서 대화하기 - 업무 목적과 시간 제한이 분명한 회의만 반복하면 동료 간 연결이 약해질 수 있다. - 근무 시간 중에도 업무와 직접 관련 없는 진솔한 인간적 교류를 위한 시간과 공간이 필요하다. - 개인적인 대화와 업무 수행은 서로 충돌하는 것이 아니라, 오히려 신뢰와 협업을 강화하며 함께 공존할 수 있다. ## 즉흥적인 잼 세션 - Figma에서 계획 없이 여러 명이 동시에 작업하는 잼 세션은 대화와 업무를 자연스럽게 결합하는 방법이다. - 같은 파일에서 하나의 작업을 함께 진행할 수도 있고, 각자 다른 프로젝트를 하면서 옆자리에 앉은 것처럼 대화할 수도 있다. - 반드시 영상 통화일 필요는 없다. - 음성만 사용할 수 있다. - Figma 댓글이나 텍스트로 대화할 수 있다. - 대화 없이 각자 작업하는 방식도 가능하다. - 중요한 것은 정해진 방식이 아니라 각자의 업무 상황, 경계, 에너지 수준에 맞는 방식을 선택하는 것이다. ## 실천할 때의 원칙 짧고 부담 없는 창작 활동이나 대화 시간을 정기적으로 마련하되, 참여를 강제하지 않는 것이 좋다. 팀의 창의성을 높이려면 생산성만 관리하기보다 재미와 휴식, 자율성, 인간적인 관계를 함께 설계해야 한다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigmafigjamremote-work+2

figma·2021년 6월 23일·2분 읽기큐레이션 요약

Figma의 시리즈 E

Figma는 Durable Capital Partners가 주도하고 Morgan Stanley의 Counterpoint Global 등 신규 투자자가 참여한 Series E 투자를 유치했으며, 기업 가치는 약 100억 달러로 평가받았다. 딜런 필드는 이번 투자를 디자인을 모든 사람에게 개방하고, 협업과 디자인 중심의 제품 개발을 확장하기 위한 출발점으로 설명했다. 또한 기존 투자자들의 재참여와 직원·커뮤니티에 대한 감사를 전했다. ## Series E 투자 유치 - Durable Capital Partners가 이번 투자를 주도했다. - Morgan Stanley의 Counterpoint Global이 신규 투자자로 참여했다. - Index, Greylock, Kleiner Perkins, Sequoia, a16z 등 기존 투자자들도 투자 라운드에 다시 참여했다. - 2021년 6월 기준 Figma의 기업 가치는 약 100억 달러로 알려졌다. ## 디자인 접근성 확대 - Figma의 장기적인 비전은 “디자인을 모두에게 접근 가능하게 만드는 것”이다. - 전문 디자이너만이 아니라 학생부터 최고경영진까지 더 넓은 디자인 커뮤니티에 참여시키려 한다. - 제품 개발에 관여하는 모든 직군이 디자인 중심으로 생각하고, 느끼고, 협업할 수 있는 환경을 목표로 한다. - 장기적으로는 다양한 직군의 사람들이 창의적으로 협업할 수 있도록 더 많은 시각적 제품을 제공하려 한다. ## 멀티플레이어 협업의 의미 - Figma는 여러 사람이 동시에 작업하는 멀티플레이어 협업 방식이 일하고 제품을 만드는 방법을 바꾼다고 강조한다. - 디자이너를 위한 전문 도구를 발전시키는 동시에, 기획·개발·경영 등 다른 역할의 구성원도 제품 개발 과정에 참여할 수 있도록 하려 한다. - 브라우저 기반 협업을 통해 디자인을 특정 전문가의 영역이 아니라 팀 전체의 활동으로 확장하려는 방향이다. ## 커뮤니티와 구성원에 대한 책임 - Figma의 성장에는 그동안 서비스를 사용하고 발전시킨 디자이너 커뮤니티의 기여가 있었다. - 회사는 성장할수록 기존 디자이너 커뮤니티를 지원하고 새로운 사용자를 포용할 책임이 있다고 밝혔다. - 코로나19 팬데믹으로 어려웠던 16개월 동안 함께 일하고 성장한 직원들에게 감사를 전했다. ## 실용적인 시사점 Figma의 Series E 발표는 단순한 투자 유치 소식이라기보다, 디자인 도구를 전문가용 소프트웨어에서 전사적 협업 플랫폼으로 확장하겠다는 전략을 보여준다. 제품 개발 조직은 디자인을 디자이너만의 업무로 한정하기보다, 다양한 직군이 초기 단계부터 시각적으로 협업하는 방식으로 활용할 수 있다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigmaproduct-developmentdesign-tools+1

figma·2021년 4월 20일·3분 읽기큐레이션 요약

Config 2021에서

Figma는 디자인이 개인 작업이 아니라 다양한 사람들이 함께 아이디어를 만들고 발전시키는 협업 과정이라고 강조했다. Config 2021에서 이를 지원하기 위해 브레인스토밍 도구 FigJam, 브랜칭, 모바일 앱, 오디오 협업, 대규모 동시 접속, Figma Community 공개 기능을 발표했다. 결론적으로 Figma는 디자인 전 과정에 더 많은 사람이 참여할 수 있는 협업 플랫폼으로 확장되고 있다. ## 협업 중심 디자인으로의 전환 - 초기에는 디자인을 개인의 작업으로 보는 인식이 강했지만, Figma의 등장과 원격 협업 확산으로 팀 단위 작업이 일반화됐다. - 디자이너뿐 아니라 개발자, 기획자, 이해관계자 등 다양한 참여자가 디자인 과정에 기여할 수 있도록 기능을 확장했다. - 목표는 아이디어 구상부터 반복 작업, 검토와 공유까지 모든 단계에서 함께 작업하는 환경을 제공하는 것이다. ## FigJam: 아이디어 발상과 브레인스토밍 - FigJam은 기존 Figma의 인터페이스 디자인 기능이 아닌, 팀 브레인스토밍과 화이트보드 작업에 특화된 별도 공간이다. - 사용자 여정 다이어그램, 아이디어 정리, 워크숍 등 다양한 초기 기획 작업을 지원한다. - 이모티콘, 채팅 등 기능을 제공해 물리적인 회의실에서 느낄 수 있는 즉흥성과 상호작용을 디지털 공간에 구현하려 했다. - 2021년 4월 오픈 베타로 출시됐으며, 2022년부터 무료 및 유료 요금제($8, $15/편집자/월)가 적용될 예정이었다. ## 브랜칭을 통한 안전한 디자인 변경 - 파일을 브랜치로 복제해 기존 작업에 영향을 주지 않는 별도 공간에서 아이디어와 디자인 변형을 실험할 수 있다. - 브랜치에서도 멀티플레이어 협업이 가능하며, 작업이 끝나면 몇 번의 클릭으로 메인 브랜치에 병합할 수 있다. - 디자인 시스템에 여러 팀원이 기여하거나, 대규모 조직에서 변경 사항을 검토하는 데 유용하다. - 베타 기능으로 Organization 요금제에서 제공됐다. ## 모바일 앱과 디자인 공유 - iOS와 Android용 새 모바일 앱을 통해 파일과 프로토타입을 어디서든 확인할 수 있도록 했다. - 실제 기기에서 앱 디자인이 어떻게 보이고 작동하는지 확인하는 용도뿐 아니라, 이해관계자에게 작업물을 공유하는 용도도 강조됐다. - 미러링 재생 경험을 안정화하고, 모바일에서 디자인과 프로토타입에 더 쉽게 접근하도록 개선했다. ## 편집기 내 오디오 협업 - Figma 파일이나 FigJam 보드에서 별도 화상회의 도구 없이 즉시 음성 통화를 시작할 수 있다. - 실시간 디자인 리뷰, 피드백, 그룹 브레인스토밍 등에 활용할 수 있다. - Professional 및 Organization 요금제 사용자에게 제공될 예정인 기능으로 소개됐다. ## 대규모 동시 접속 지원 - 초기에는 최대 500명이 동시에 접속할 수 있도록 제한을 확대했다. - 편집자 100명 - 뷰어 400명 - 이후 Figma와 FigJam 모두에서 최대 1,000명까지 지원할 계획을 밝혔다. - 편집자 200명 - 뷰어 800명 - 대규모 디자인 발표, 워크숍, 수업 같은 상황을 지원하고 새로운 협업 방식을 가능하게 하는 것이 목적이다. ## Figma Community 공개와 공유 - 모든 사용자가 Figma Community에 파일을 게시할 수 있도록 개방했다. - 다른 사용자가 만든 파일과 FigJam 템플릿을 활용할 수 있으며, 자신의 작업물·템플릿·노하우도 공개할 수 있다. - 개인의 디자인 결과물을 공유하는 것을 넘어, 커뮤니티 기반의 학습과 재사용을 촉진하려는 방향이다. Figma의 발표는 디자인 도구를 단순한 제작 소프트웨어가 아니라 아이디어 발상, 협업, 검토, 공유를 아우르는 공동 작업 공간으로 확장하려는 전략을 보여준다. 팀 규모와 참여자 유형에 맞춰 FigJam, 브랜칭, 모바일 앱, 오디오 기능을 조합하면 원격·대규모 디자인 협업을 보다 효율적으로 운영할 수 있다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigma디자인 시스템figjam+3

figma·2021년 4월 5일·2분 읽기큐레이션 요약

피그마의 새로운 스타터 플

Figma는 무료 Starter 플랜에서 에디터 2명 제한을 없애고, 팀 공간에서 무제한 에디터가 실시간 협업할 수 있도록 변경했다. 대신 팀 공간에는 최대 3개 파일, 파일당 최대 3페이지 제한을 도입했으며, Drafts에서는 파일·페이지·뷰어를 계속 무제한으로 제공한다. 이는 사용자가 Figma의 멀티플레이어 협업을 충분히 경험하도록 하기 위한 개편이다. ## 무료 Starter 플랜의 변경 사항 - **Drafts** - 개인 작업 공간으로 역할이 명확해진다. - 파일, 페이지, 뷰어는 계속 무제한으로 사용할 수 있다. - 다른 사람과 공동 편집하려면 파일을 팀 공간으로 옮겨야 한다. - **팀 공간** - 기존의 **에디터 2명 제한을 폐지**한다. - 여러 명이 동시에 파일을 편집할 수 있다. - 대신 팀 공간 전체에서 사용할 수 있는 파일은 최대 3개다. - 각 파일에는 최대 3페이지 제한이 적용된다. ## 변경의 배경: 멀티플레이어 협업 경험 확대 - Figma의 핵심 차별점은 브라우저 기반의 실시간 협업이다. - 무료 Starter 플랜은 많은 신규 사용자가 Figma의 협업 기능을 처음 경험하는 진입점이었다. - 그러나 에디터 2명 제한 때문에 팀 전체가 멀티플레이어 기능을 충분히 체험하기 어려웠다. - 에디터 수를 2명, 4명처럼 특정 숫자로 제한하는 것은 팀 규모가 다양한 상황에서 임의적이라고 판단했다. - 따라서 파일 수를 제한하는 대신 에디터 수는 무제한으로 제공하는 방식을 선택했다. ## 사용자 테스트 결과 Figma는 전 세계 수천 명의 신규·기존 사용자를 대상으로 변경안을 검증했다. - 87%의 사용자가 팀 공간 에디터 무제한 정책에 긍정적인 반응을 보였다. - 에디터 제한을 없애자 팀 협업이 29% 증가했다. - 사용자는 보통 한 번에 2~3개 파일에서만 적극적으로 협업했다. - 이에 따라 팀 공간의 파일·페이지 제한은 합리적이며, 개인 작업용 Drafts의 무제한 저장 공간이 이를 보완한다고 판단했다. ## 적용 시점과 기존 파일 - 새 Starter 플랜은 **2021년 4월 21일**부터 적용됐다. - 적용 전 생성된 파일, 페이지, 프로젝트는 이동되거나 변경되지 않는다. - 기존 작업물에는 새 제한이 소급 적용되지 않는다. - FigJam도 당시 모든 플랜에 도입됐으며, 베타 기간에는 무제한으로 사용할 수 있었다. - 학생과 교육자는 Figma for Education을 통해 Professional 플랜 기능을 무료로 이용할 수 있다. 팀 단위로 Figma를 처음 도입한다면, 중요한 공동 작업 파일은 팀 공간의 3개 파일·3페이지 제한을 고려해 관리하고, 개인 실험이나 보관용 작업은 Drafts에 분리하는 방식이 적합하다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigmafigjamcollaborative-design+1

figma·2020년 9월 21일·3분 읽기큐레이션 요약

디자인에서 신뢰의 다양한 차

디자인 협업에서 신뢰는 단순한 친밀감을 넘어, 팀과 고객이 솔직하게 소통하고 반복적인 작업 과정을 안전하게 공유하게 만드는 기반이다. 신뢰를 구축하려면 구성원을 인간적으로 이해하고, 진행 중인 작업의 상태와 피드백 범위를 명확히 하며, 디자인의 윤리적·사회적 영향까지 공개적으로 논의해야 한다. 이러한 문화는 단기간에 만들어지지 않지만, 의도적인 대화와 명확한 협업 규칙을 통해 강화할 수 있다. ## 인간적인 관계를 통한 신뢰 형성 - 신뢰는 직속 동료뿐 아니라 제품 개발에 참여하는 모든 사람을 이해하는 데서 시작된다. - 짧은 안부 대화나 회의 전후의 캐주얼한 대화, 이메일 대신 간단한 통화 등을 통해 서로의 생각과 업무 방식을 파악할 수 있다. - 디자인 비평에서 피드백이 배려와 지원에서 비롯된다는 확신이 있어야 구성원이 방어적으로 반응하지 않는다. - 팀원들이 서로의 의도와 어려움을 긍정적으로 해석하는 문화를 만들면, 더 솔직하고 직접적인 피드백이 가능해진다. - 공감은 협업자의 관점과 작업 방식을 이해하고 신뢰를 유지하는 중요한 도구다. ## 진행 중인 작업을 안전하게 공유하기 - Figma처럼 실시간으로 작업물이 업데이트되는 환경에서는 고객이 초기 아이디어와 미완성 시안을 그대로 보게 된다. - 이러한 투명성은 프로젝트의 현재 상태를 공유하는 데 유용하지만, 충분히 다듬어지지 않은 작업에 즉각적인 피드백이 들어오는 부담도 만든다. - 협업 파일을 함께 사용할 때는 다음과 같은 운영 규칙을 미리 정해야 한다. - 작업이 탐색 단계인지, 검토 단계인지 상태를 표시한다. - 현재 피드백을 받을 수 있는지 명시한다. - 필요한 피드백의 수준을 구체적으로 설명한다. 예를 들어 세부 디자인이 아닌 방향성에 대한 의견을 요청할 수 있다. - 상태 주석이나 진행 단계 표시를 활용하면 고객과 내부 팀이 작업물을 과도하게 해석하는 일을 줄일 수 있다. - 디자인은 계속 변하므로 문서가 프로젝트의 최신 상태를 반영하도록 지속적으로 관리해야 한다. ## 공개적인 대화와 이견 장려 - 신뢰는 일상적인 업무뿐 아니라 디자인 윤리, 기술의 역할, 제품이 사회에 미치는 영향 같은 큰 주제를 논의할 때도 필요하다. - 직급이나 역할과 관계없이 누구나 문제를 제기할 수 있는 환경을 만들어야 한다. - ‘Designated Dissenter’와 같은 활동은 한 명에게 의도적으로 반대 의견을 내는 역할을 맡겨 팀의 가정과 결정에 질문을 던지게 한다. - 이견을 제도화하면 특정 개인의 성격이나 직급에 의존하지 않고 다양한 관점을 끌어낼 수 있다. - 이러한 논의는 팀원 간 이해를 넓히고, 제품이 가져올 장기적·사회적 결과를 검토하는 데 도움을 준다. ## 신뢰를 만드는 협업 원칙 - 신뢰는 한 번의 워크숍이나 규칙만으로 생기지 않고 반복적인 상호작용을 통해 형성된다. - 팀원과 고객을 업무 역할이 아닌 사람으로 이해하려는 시간을 확보한다. - 파일과 문서에 작업 상태, 피드백 요청 범위, 최신 진행 상황을 명확히 기록한다. - 긍정적 의도를 전제로 하되, 불편한 의견과 반대 의견도 안전하게 제시할 수 있도록 한다. - 실무적인 협업 규칙과 윤리적 논의를 함께 운영해야 지속 가능한 디자인 문화를 만들 수 있다. 실제로는 프로젝트 시작 시 피드백 방식과 작업 상태 표기 규칙을 합의하고, 정기적으로 짧은 관계 형성 대화와 이견 토론을 운영하는 것이 가장 효과적이다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigma프로덕트 디자인design-collaboration+1

figma·2019년 11월 20일·3분 읽기큐레이션 요약

Figma의 인프라: 웹

Figma는 웹 기반 디자인 도구도 데스크톱 애플리케이션 수준의 속도와 안정성을 제공해야 한다고 주장한다. 이를 위해 클라우드 기반의 단일 진실 공급원, 실시간 협업, 프로토타이핑과 개발자 핸드오프를 통합했으며, 사용자와 데이터가 증가함에 따라 인프라를 확장 가능한 구조로 전환하고 있다. 핵심 과제는 불필요한 데이터 로딩을 줄이고, 데이터베이스를 수평 확장하며, 전 세계 사용자의 지연 시간을 낮추는 것이다. ## Figma가 해결하려는 문제 - 기존 디자인 작업은 특정 데스크톱 애플리케이션과 플랫폼에 종속됐다. - 파일을 내보내거나 여러 도구 사이에서 옮기는 과정에서 최신 버전 관리와 협업이 어려웠다. - Figma는 디자인 파일을 클라우드에 저장하고 고유 URL을 부여해 팀 전체의 단일 진실 공급원으로 만든다. - 프로토타이핑과 개발자 핸드오프 기능을 제품 안에 포함해 별도 도구와 파일 변환의 필요성을 줄였다. ## 실시간 협업과 인프라 요구사항 - 여러 사용자가 하나의 파일을 동시에 보고 편집할 수 있는 멀티플레이어 기능을 제공한다. - 디자인 파일에는 복잡한 도형과 대용량 이미지가 포함될 수 있어 백엔드와 네트워크로 전송되는 데이터가 많다. - 사용자는 데스크톱 도구와 같거나 더 나은 상호작용 성능을 기대한다. - 따라서 인프라는 다음 요구사항을 동시에 충족해야 한다. - 낮은 상호작용 지연 시간 - 높은 가용성 - 대규모 파일과 동시 접속 처리 - 실시간 변경사항 동기화 ## 초기 인프라의 한계 - 초기 Figma는 단순한 백엔드 구조를 사용해 빠르게 제품을 개발하고 운영했다. - 예를 들어 파일을 로드할 때 사용자가 접근 가능한 공유 컴포넌트를 모두 미리 불러왔다. - 공유 디자인 요소가 수천 개일 때는 효과적이었지만, 조직의 라이브러리가 약 1만 개에 가까워지면 백엔드에 큰 부담이 발생했다. - Microsoft, Uber 같은 대규모 조직의 도입과 글로벌 사용자 증가로 이러한 문제가 일반적인 확장성 문제로 나타났다. ## 필요한 데이터만 불러오는 구조 - 기존 시스템은 사용자가 실제로 즉시 필요로 하지 않는 데이터까지 파일 로드 시점에 미리 가져오는 경우가 있었다. - 이 방식은 초기 진입 속도와 백엔드 부하 모두에 악영향을 준다. - 단순히 서버 성능만 개선하는 것으로는 해결되지 않으며, 클라이언트와 서버 간 상호작용 방식을 다시 설계해야 한다. - 클라이언트가 필요한 정보만 요청하도록 제품의 데이터 로딩 방식과 사용자 경험을 함께 바꿔야 한다. - 인프라 팀뿐 아니라 제품과 클라이언트 개발팀의 협업이 필요한 문제다. ## 단일 데이터베이스에서 수평 확장으로 - 당시 Figma의 전체 인프라는 AWS의 매우 강력한 단일 데이터베이스 인스턴스에 의존했다. - 단순한 구조를 선호하는 KISS 원칙 덕분에 초기에는 운영이 쉬웠고 빠르게 성장할 수 있었다. - 그러나 단일 인스턴스는 성능과 용량 확장에 한계가 있다. - 다음 단계에서는 여러 노드로 확장할 수 있는 수평 확장형 데이터베이스 계층을 구축하려 했다. - 데이터베이스를 거의 모든 시스템과 서비스가 사용하므로, 일관성·장애 처리·서비스 의존성까지 함께 재설계해야 하는 대규모 작업이다. ## 글로벌 사용자의 지연 시간 개선 - 주간 활성 사용자의 80% 이상이 미국 외 지역에 있었다. - 당시 요청은 미국 오리건의 데이터센터까지 왕복해야 했기 때문에, 사용자 경험이 물리적 네트워크 거리에 영향을 받았다. - 이를 개선하기 위해 사용자와 가까운 곳에 인프라 구성 요소를 배치하려 했다. - 첫 단계로 전 세계 주요 지역에 원격 프록시를 전략적으로 배치해 데이터센터까지의 네트워크 지연을 줄이는 방안을 추진했다. - 장기적으로는 글로벌 사용자에게 더 가까운 위치에서 요청을 처리하는 방향으로 인프라를 발전시키려 했다. ## 실용적인 결론 웹 기반 협업 도구의 확장은 서버를 더 큰 장비로 교체하는 것만으로 해결되지 않는다. 필요한 데이터만 지연 로딩하고, 데이터베이스를 수평 확장하며, 사용자가 가까운 위치에서 서비스를 이용하도록 네트워크 구조를 개선하는 등 제품 경험과 시스템 아키텍처를 함께 재설계해야 한다.

원문 읽기(새 탭에서 열림)

real-time-collaborationAWS분산 시스템성능 최적화+2

figma·2019년 10월 21일·4분 읽기큐레이션 요약

멀티플레이어를 넘어: Figma

Figma는 실시간 공동 편집을 넘어, 디자인을 공개하고 함께 배우며 재사용하는 커뮤니티 중심의 생태계를 구축하려 했다. 이를 위해 누구나 디자인 파일을 탐색·검사·리믹스할 수 있는 Figma Community 베타와, 팀 구성원이 중요한 작업을 쉽게 찾도록 개편한 workspace를 공개했다. 핵심은 디자인 과정을 더 개방적으로 만들고, 기업·교육기관·정부·개인 디자이너가 지식과 자산을 공유하도록 지원하는 것이다. ## 멀티플레이어에서 공개형 디자인 생태계로 - Figma는 4년 전 실시간 공동 편집 기능을 도입하면서 디자인이 더 개방적이고 클라우드 중심이어야 한다고 보았다. - 사용자들은 점차 다음과 같은 방식으로 디자인 프로세스를 개방했다. - 비디자이너를 작업 과정에 참여시킴 - 팀원과 동시에 파일을 편집함 - 작업물과 제작 방법을 커뮤니티에 공유함 - Figma는 이러한 변화를 확장하기 위해 두 공간을 도입했다. - **Figma Community**: 공개된 디자인 파일을 누구나 살펴보고, 리믹스하고, 학습할 수 있는 공간 - **개편된 Figma workspace**: 팀 구성원 중심으로 중요한 작업과 프로젝트를 쉽게 발견하는 공간 ## Figma Community 베타의 구조 - 사용자는 자신의 공개 프로필에 어떤 파일을 게시할지 직접 선택할 수 있다. - 초기 기본 라이선스로 **Creative Commons Attribution 4.0 International(CC BY 4.0)**을 제공했다. - 다른 사람이 파일을 사용·수정·공유할 수 있음 - 원작자 표시가 필요함 - Figma는 향후 더 제한적인 라이선스도 검토할 계획이며, 베타 기간 동안 사용자 의견을 수집하려 했다. - 여러 달 동안 베타를 운영하며 기업, 학교, 정부기관, 독립 디자이너의 요구를 확인하는 방식으로 제품을 발전시키려 했다. ## 기업이 공유하는 디자인 시스템과 리소스 - 기업은 파트너나 다른 디자이너가 활용할 수 있는 공개 디자인 자산을 배포할 수 있다. - 사례: - **Slack**: 파트너가 Slack 앱을 더 잘 만들 수 있도록 UI 키트 공개 - **Dropbox**: 디자인 관리자가 조직에서 활용할 수 있는 문화 키트 공유 - **Unsplash**: 디자인에 사용할 수 있는 아바타를 쉽게 제공 - **VMware**: 공개 디자인 시스템인 Clarity를 더 쉽게 활용하도록 지원 - Community는 기업의 디자인 시스템을 문서로만 설명하는 대신, 실제 편집 가능한 파일과 구성 요소로 배포하는 수단이 된다. ## 공공기관과 교육기관의 활용 - **시카고시**는 시민들이 자신의 정체성에 맞게 수정할 수 있는 공개 디자인 시스템을 준비했다. - **Lambda School**과 **Stanford d.school**은 무료 학습 템플릿을 공개하려 했다. - 이를 통해 Figma Community는 단순한 포트폴리오 공간을 넘어 다음 용도로 활용될 수 있다. - 교육 자료 배포 - 공공 서비스용 디자인 시스템 공유 - 시민·학생·학습자의 직접적인 수정과 실습 - 조직 간 디자인 표준 확산 ## 개인 디자이너의 포트폴리오와 튜토리얼 - 개인 디자이너는 Dribbble이나 Behance를 보완하는 공개 Figma 프로필을 만들 수 있다. - 발표 자료 디자이너 **Zach Grosser**는 인기 있는 슬라이드 템플릿을 공개하려 했다. - 디자이너 **David Kulakevich**의 사례는 Community의 학습 기능을 보여준다. - Figma로 제작한 그림을 처음에는 피드백을 받기 위해 공유 - 다른 사람들이 제작 과정을 궁금해하자 레이어별 작업 과정을 영상으로 설명 - 이후 원본 파일을 공개해 누구나 각 레이어와 제작 방식을 직접 확인할 수 있도록 함 - 완성된 이미지뿐 아니라 편집 가능한 원본을 공유함으로써 결과물 감상에서 실제 학습과 재현으로 확장된다. ## 기업 경계를 넘는 협업 - Square Crypto는 Bitcoin 생태계에 디자인과 코드를 개방적으로 기여하는 방식을 연구하고 있었다. - Figma는 이 팀과 협력해 회사 간 경계를 넘는 디자인 프로젝트에 필요한 기능을 탐색했다. - 이는 Community가 개인 파일 공유를 넘어, 여러 조직이 투명하게 공동 작업하는 기반이 될 가능성을 보여준다. - 공개성과 투명성을 중시하는 오픈소스 커뮤니티의 협업 방식에 디자인 도구를 연결하려는 시도이기도 하다. ## 워크스페이스 내부의 커뮤니티 - Figma는 공개 Community뿐 아니라 각 팀의 workspace 안에도 사람 중심의 공동 공간을 만들고자 했다. - 기존 디자인 파일은 파일 자체를 중심으로 구성되어 팀의 구성원이나 관계를 충분히 드러내지 못했다. - 개편된 workspace는 팀원이 중요한 작업과 프로젝트를 더 쉽게 발견하도록 설계되었다. - 제공된 글 내용에서는 이 내부 커뮤니티 기능의 구체적인 동작이나 세부 기능은 추가로 설명되지 않는다. ## 실용적인 결론 Figma Community는 디자인 파일을 단순히 보여주는 곳이 아니라, 편집 가능한 원본·템플릿·디자인 시스템을 공유해 다른 사람이 직접 배우고 재사용하도록 만드는 플랫폼이다. 조직은 공개 가능한 UI 키트와 시스템을 배포하고, 개인 디자이너는 작업 과정과 원본 파일을 포트폴리오 및 교육 자료로 활용할 수 있다. 다만 공개 전에는 라이선스 조건과 파일에 포함된 기밀 정보·브랜드 자산을 반드시 확인해야 한다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigma디자인 시스템plugins+2

figma·2019년 10월 15일·4분 읽기큐레이션 요약

피그마의 멀티플레이어

Figma는 Google Docs처럼 복잡한 OT(Operational Transformation)를 적용하는 대신, 디자인 문서의 구조에 맞춘 단순한 자체 멀티플레이어 시스템을 구축했다. 클라이언트와 서버는 WebSocket으로 변경 사항을 동기화하고, 서버가 문서별 단일 조정자로 동작해 충돌을 관리한다. 이 방식은 실시간 협업뿐 아니라 오프라인 편집과 재접속까지 지원하면서도 Figma의 데이터 모델에 맞는 구현 단순성을 유지했다. ## 웹 기반 협업을 선택한 이유 - 멀티플레이어 기능이 있으면 파일을 내보내거나 복사본을 이메일로 주고받고, 변경 사항을 수동으로 동기화할 필요가 없다. - 링크 하나만으로 여러 사람이 현재 디자인 상태를 확인할 수 있다. - 디자이너뿐 아니라 카피라이터, 개발자 등도 같은 문서에 참여할 수 있다. - 초기에는 실시간 협업이 “디자인을 망치는 기능”으로 여겨졌지만, 웹 생산성 도구에는 자연스러운 기본 기능이 되었다. ## Figma의 클라이언트·서버 구조 - 웹 클라이언트는 WebSocket을 통해 멀티플레이어 서버 클러스터와 통신한다. - 문서마다 별도의 서버 프로세스를 두고, 해당 문서를 편집하는 사용자들이 같은 프로세스에 연결된다. - 문서를 열 때 클라이언트가 먼저 파일 전체를 내려받는다. - 이후 변경 사항은 양방향 WebSocket 연결을 통해 실시간으로 전송된다. - 댓글, 사용자, 팀, 프로젝트 같은 데이터는 멀티플레이어 시스템이 아니라 Postgres와 별도 동기화 시스템으로 관리한다. - 문서 편집과 기타 애플리케이션 데이터는 성능, 오프라인 지원, 보안 요구 사항이 다르기 때문에 구현을 분리했다. ## 오프라인 편집과 재접속 - 사용자는 네트워크가 끊긴 상태에서도 임의의 시간 동안 계속 편집할 수 있다. - 다시 온라인이 되면 클라이언트는 서버에서 최신 문서 사본을 받는다. - 그 위에 오프라인 동안 발생한 로컬 변경을 다시 적용한다. - 이후 새로운 WebSocket 연결을 통해 서버와 변경 사항을 계속 동기화한다. - 연결과 재연결 자체는 단순하게 만들고, 멀티플레이어의 핵심 복잡성은 이미 연결된 문서에 동시에 변경 사항이 들어오는 상황에 집중했다. ## OT와 CRDT 대신 자체 방식을 택한 이유 - OT는 Google Docs 등에서 널리 사용된 표준적인 협업 알고리즘이다. - 여러 사용자의 동시 작업을 변환해 충돌을 해결할 수 있지만, 구현과 검증이 복잡하다. - Figma는 텍스트 편집기와 달리 계층적인 디자인 객체를 편집하므로, 일반적인 OT 모델을 그대로 적용할 필요가 없다고 판단했다. - 스타트업으로서 빠르게 기능을 개발하고 실험하려면 더 단순한 구조가 유리했다. - Figma는 디자인 문서의 데이터 구조와 편집 패턴에 맞춘 전용 동기화 방식을 만들었다. ## 프로토타입을 통한 설계 검증 - 실제 제품 코드에 바로 적용하지 않고, 여러 클라이언트와 서버를 시뮬레이션하는 별도의 웹 기반 실험 환경을 만들었다. - 프로토타입에서는 여러 사용자의 상태와 변경 사항을 시각적으로 확인할 수 있었다. - 오프라인 클라이언트, 느린 네트워크, 제한된 대역폭 등 다양한 상황을 쉽게 재현했다. - 이를 통해 협업 알고리즘과 데이터 구조를 빠르게 비교하고 실험했다. - 설계가 확정된 뒤 프로토타입에서 검증한 아이디어를 기존 코드베이스에 이식했다. ## 서버 중심의 동기화 모델 - 하나의 문서에 연결된 사용자들은 같은 서버 프로세스를 공유한다. - 서버는 문서에 들어오는 변경 사항을 순서대로 처리하고 다른 클라이언트에 전달한다. - 클라이언트는 처음 받은 문서 상태를 기준으로 로컬 변경을 수행하면서 서버의 업데이트를 계속 반영한다. - 서버를 문서의 조정자로 두면 여러 클라이언트가 서로 직접 충돌을 해결할 필요가 줄어든다. - 동시에 발생한 변경의 처리 순서는 서버가 정하며, 모든 클라이언트가 최종적으로 같은 문서 상태에 도달하도록 한다. ## 이 접근법의 핵심 장점 - 범용 협업 알고리즘보다 Figma의 객체 중심 데이터 모델에 맞게 단순하게 구현할 수 있다. - 온라인 편집뿐 아니라 오프라인 작업과 재접속도 지원한다. - 별도 프로토타입으로 다양한 장애 상황을 반복적으로 테스트할 수 있다. - 문서 편집 동기화와 서비스 메타데이터 동기화를 분리해 각각의 요구 사항에 맞게 최적화할 수 있다. 실용적으로는 모든 협업 애플리케이션이 OT나 CRDT를 그대로 도입해야 하는 것은 아니다. 데이터 구조가 명확하고 충돌 패턴이 제한적이라면, 서버 중심의 단순한 프로토콜과 충분한 시뮬레이션 테스트를 결합하는 편이 더 빠르고 유지보수하기 쉬울 수 있다.

원문 읽기(새 탭에서 열림)

real-time-collaborationPostgreSQLRustwebsockets+2

figma·2019년 10월 6일·3분 읽기큐레이션 요약

Figma로 하는 고객

고객 여정 지도는 고객이 특정 과정을 거치며 경험하는 단계와 감정, 고충을 시각적으로 보여 주어 팀의 공통 이해를 돕는 도구다. 글은 Figma를 활용하면 여정 지도 제작부터 인터뷰 기록, 협업, 버전 관리, 고객 피드백 수집까지 하나의 공간에서 수행할 수 있다고 설명한다. 다만 프로세스가 비선형적이거나 분기·의존성이 많다면 고객 여정 지도보다 사용자 흐름도가 더 적합할 수 있다. ## 고객 여정 지도가 필요한 이유 - 자동차 구매, 웹사이트 상품 구매, 의료 서비스 이용처럼 고객이 여러 단계를 거치는 과정을 시각적으로 표현한다. - 각 단계에서 고객이 무엇을 하고, 어떤 감정을 느끼며, 어떤 불편이나 고충을 겪는지 함께 기록할 수 있다. - 서로 다른 관점을 가진 팀원도 동일한 지도를 보며 조사 결과를 빠르게 이해할 수 있다. - 고객 경험을 개선할 수 있는 문제 지점과 기회를 공동으로 발견하는 데 유용하다. - 프로세스가 단순하고 순차적일 때 특히 효과적이다. - 반대로 분기나 의존성이 많은 비선형 프로세스에는 전통적인 2차원 사용자 흐름도가 더 적합하다. ## 여정 지도 컴포넌트 라이브러리 구축 - 팀 전용 컴포넌트와 스타일 라이브러리를 만들면 지도마다 일관된 시각 언어를 유지할 수 있다. - 반복적으로 사용하는 단계, 감정 표현, 아이콘, 라벨 등을 재사용해 새 지도를 빠르게 제작할 수 있다. - 디자인 변경이 필요할 때 개별 요소를 수정하는 대신 컴포넌트를 업데이트하면 전체 지도에 일괄 반영할 수 있다. - Figma의 샘플 파일이나 고객 여정 지도 템플릿을 출발점으로 활용할 수 있다. ## Tidy Up으로 단계 정리 - Figma의 **Tidy Up** 기능을 사용하면 여정 단계 사이의 간격을 쉽게 조정할 수 있다. - 중간에 새로운 단계를 삽입하거나 기존 단계를 재배치할 때 전체 레이아웃을 크게 다시 작업하지 않아도 된다. - 단계가 많아질수록 수동 정렬에 드는 시간을 줄이고 구조적인 배치를 유지할 수 있다. ## 실시간 협업과 인터뷰 기록 - 여러 디자이너가 동시에 같은 여정 지도를 편집할 수 있다. - 인터뷰 노트를 Figma에 직접 기록하면 조사 자료와 디자인 결과물이 여러 도구로 분산되지 않는다. - 리서치 담당자와 디자이너가 동일한 파일에서 내용을 확인하고 즉시 보완할 수 있다. - 인터뷰 정보와 지도 요소가 한곳에 모이므로 조사 결과를 시각적 산출물에 연결하기 쉽다. ## 버전 기록으로 변화 추적 - 고객 리뷰 전에 Figma 버전 기록에 수동으로 타임스탬프를 남겨 특정 시점의 결과물을 보존한다. - 프로젝트가 진행되며 고객에 대한 이해가 어떻게 바뀌었는지 이전 버전과 비교할 수 있다. - 클라이언트에게 여정 지도가 조사 결과에 따라 어떻게 발전했는지 보여 주는 자료로도 활용할 수 있다. ## 댓글을 활용한 지속적인 피드백 - 완성본이 아닌 초기 여정 지도를 실제 고객에게 공유해 조사 결과가 고객 경험과 일치하는지 검증한다. - 고객이 빠진 단계나 새롭게 탐색해야 할 경험을 댓글로 지적할 수 있다. - 댓글을 특정 지도 요소에 직접 배치하면 나중에 어느 단계에 대한 의견인지 명확하게 확인할 수 있다. - 비동기 검토에서는 고객이 파일에 댓글을 남기고, 팀이 댓글 스레드에서 추가 질문을 할 수 있다. - 회의나 화상 통화 중에는 디자이너가 참석자들의 의견을 해당 위치에 바로 기록할 수 있다. - 필요하면 파일을 복제해 고객, 클라이언트 등 피드백 출처별로 분리한다. - 새 검토자가 이전 댓글에 영향을 받지 않도록 하여 편향되지 않은 의견을 얻을 수 있다. - 고객과 클라이언트의 피드백을 비교해 두 집단의 인식 차이도 파악할 수 있다. ## 실용적인 적용 방향 Figma로 고객 여정 지도를 만들 때는 먼저 재사용 가능한 컴포넌트와 스타일을 정하고, 인터뷰 노트와 지도를 같은 파일에서 관리하는 것이 좋다. 이후 버전을 저장하며 고객과 클라이언트에게 단계별 댓글 피드백을 받아 지도를 반복 개선하면, 단순한 시각 자료를 넘어 지속적으로 검증되는 리서치 문서로 활용할 수 있다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigma프로토타이핑component-library+2

figma·2019년 3월 26일·3분 읽기큐레이션 요약

Dribbble이 원격 팀

Dribbble은 완전 원격으로 일하는 디자인팀의 협업 문제를 Figma로 해결했다. 여러 도구와 파일을 오가던 방식을 하나의 온라인 파일과 실시간 공동 편집으로 통합해, 최신 디자인을 공유하고 피드백을 주고받는 과정을 단순화했다. 그 결과 디자인 페어 작업과 리뷰가 빨라졌고, 아이디어를 며칠이 아니라 수십 분 안에 구체화할 수 있었다. ## 여러 시간대에 걸친 원격 협업의 어려움 - Dribbble은 전 직원이 100% 원격으로 근무하며, 디자인팀은 제품 디자이너와 개발자 7명으로 구성되어 있다. - 원격 근무는 유연성과 인재 확보 측면에서 장점이 있지만, 사무실에서 자연스럽게 대화하는 방식의 협업은 어려웠다. - 팀은 화상회의와 여러 협업 도구를 함께 사용했지만, 작업 방식이 매끄럽게 연결되지 않았다. - 다른 디자이너의 작업 현황을 파악하기 어려웠고, 파일 관리와 다양한 피드백 흐름을 정리하는 데 시간이 소요됐다. ## Figma를 통한 단일 작업 공간 - Figma에서는 여러 사람이 동시에 하나의 파일에 접속해 회의실이나 화이트보드에서 함께 작업하는 경험을 재현할 수 있었다. - 온라인 기반이므로 최신 파일을 찾기 위해 동료에게 묻거나 여러 애플리케이션을 전환할 필요가 줄었다. - 디자인 파일, 버전 관리, 댓글, 리뷰를 한곳에서 처리해 팀의 ‘단일 진실 공급원(single source of truth)’을 마련했다. - 기존 디자인 파일 형식을 가져올 수 있어 새로운 도구로의 전환 부담도 낮췄다. - Dribbble은 기존 사용자 인터페이스를 Figma에서 다시 제작해 팀원들이 익숙한 구성 요소로 학습하도록 했다. ## 디자인 페어와 실시간 공동 작업 - Dribbble은 두 명의 디자이너가 함께 문제나 프로젝트를 해결하는 디자인 페어 방식을 활용한다. - 하나의 파일에서 동시에 작업하면서 도구 간 전환과 파일 주고받기에 드는 마찰을 제거했다. - 최신 변경 사항을 모든 팀원이 즉시 확인할 수 있어 커뮤니케이션 비용과 중복 작업이 감소했다. - 여러 사람이 스타일 가이드를 참고하거나 같은 디자인을 반복 수정해야 하는 대규모 작업에서도 일관성을 유지하기 쉬웠다. ## 더 빠른 디자인 리뷰와 피드백 - Figma의 멀티플레이어 기능을 활용해 모든 디자이너가 같은 파일에서 디자인 리뷰를 진행했다. - 팀원들은 프레임을 복제해 아이디어를 발전시키고, 댓글을 남기며, 실시간으로 수정 사항을 반영했다. - 피드백 루프가 짧아져 디자인 문제를 며칠이 아니라 몇 분 만에 해결할 수 있었다. - 한 사례에서는 화상회의 중 5명이 하나의 Figma 파일에 참여해 아이디어를 브레인스토밍하고 서로의 안을 비평했으며, 약 20분 만에 합의된 디자인을 완성했다. ## Figma와 Dribbble의 연동 - Dribbble은 Figma API를 활용해 작업물을 Figma에서 Dribbble로 직접 공유하는 통합 기능을 만들었다. - 사용자는 Figma에서 레이어를 선택한 뒤 `Integrations` ▸ `Dribbble`을 통해 Dribbble 업로드 화면으로 이동할 수 있다. - 이를 통해 디자인 제작과 게시 사이의 절차도 하나의 작업 흐름으로 연결했다. ## 실용적인 시사점 - 원격 디자인팀에는 화상회의만으로는 부족하며, 실시간 공동 편집과 최신 파일을 보장하는 중앙 작업 공간이 필요하다. - 도구를 통합하면 파일 관리와 커뮤니케이션에 쓰는 시간을 줄이고 디자인 자체에 집중할 수 있다. - 기존 자산을 가져오고 익숙한 UI를 재현하는 방식은 협업 도구 도입 시 팀의 학습 부담을 줄이는 효과적인 방법이다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigma디자인 시스템remote-collaboration+3

figma·2019년 3월 5일·3분 읽기큐레이션 요약

노션이 실패의 위기에서

Notion은 2015년 잘못된 기술 스택과 반복적인 장애, 자금 고갈로 폐업 위기에 몰렸지만 제품을 처음부터 다시 설계해 회생했다. 창업자들은 사용자가 실제로 원하는 것을 파악하고, 협업과 무한한 시안 반복을 통해 Notion 1.0의 사용자 경험을 완성했다. 이 과정에서 디자인은 단순한 외형이 아니라 일상 문제를 해결하는 제품의 핵심으로 자리 잡았다. ## 폐업 위기에서 제품을 처음부터 다시 만들다 - Notion의 초기 베타 제품은 비개발자도 쉽게 사용할 수 있는 프로그래밍 도구를 목표로 했다. - 그러나 사용자들은 이 방향에 큰 관심을 보이지 않았다. - 창업자들은 “세상에 주고 싶은 것”에 집중한 나머지 “세상이 원하는 것”을 놓쳤음을 깨달았다. - 자금이 줄어들자 팀을 해산하거나 회사가 함께 무너질 수밖에 없는 상황에 놓였다. - 샌프란시스코 사무실을 전대하고 생활비가 저렴한 교토로 이동해, Notion을 처음부터 다시 개발했다. ## 실시간 협업으로 빠르게 방향을 전환하다 - Ivan Zhao와 Simon Last는 디자인과 개발을 번갈아 맡으며 제품의 문제를 함께 탐색했다. - Figma의 멀티플레이어 기능을 활용해 같은 파일에 동시에 접속하고 아이디어를 즉시 주고받았다. - 한 명이 프로그래밍하는 동안 다른 한 명이 디자인하거나, 역할을 바꿔가며 작업했다. - 실시간 협업은 제품 구조와 사용자 흐름을 빠르게 실험하고 수정하는 데 중요한 역할을 했다. - 2018년 3월 출시된 Notion 1.0은 Product Hunt 상위권에 올랐고, 월스트리트저널의 호평을 받으며 성장했다. - 외부 투자 없이 시드 투자만으로 100만 명의 사용자를 확보했다. ## 디자인을 제품의 본질로 삼다 - Notion은 디자인을 시각적 장식이 아니라 사용자의 일상 문제를 해결하는 방식으로 정의했다. - 망치의 손에 잡히는 감촉이나 칼의 절삭력처럼, 생산성 도구도 “사용할 때의 느낌”이 중요하다고 보았다. - 강력한 기능을 갖추면서도 신규 사용자의 홈 화면은 단순하게 구성했다. - 작은 아이콘 중심의 인터페이스와 절제된 화면은 Susan Kare의 초기 Mac 아이콘과 Windows 95를 연상시킨다. - 복잡한 기능을 제공하되 첫 경험은 친근하고 접근 가능하게 만드는 전략을 취했다. ## 다양한 시안을 만들고 하나를 선택하다 - 하나의 사용자 흐름을 여러 번 복제한 뒤 아이콘, 문구, 배치 같은 세부 요소를 조금씩 바꿔가며 비교했다. - 완성도를 처음부터 높이려 하기보다 거칠고 엉뚱한 아이디어까지 빠르게 만들어냈다. - 여러 가능성을 시각화한 뒤 팀원들의 검토와 비판을 통해 최종안을 좁혀갔다. - 이 방식은 디자이너뿐 아니라 카피라이터, 엔지니어, 일러스트레이터에게도 적용됐다. - 다양한 초안을 만들고 동료에게 검증받는 과정을 Notion의 독특한 브랜드와 사용자 경험을 만든 핵심 요인으로 보았다. - 디자인 감각은 타이포그래피와 뛰어난 디자인 사례를 연구하며 발전시킬 수 있다고 설명한다. ## 생각을 돕는 도구로서의 디자인 - Notion은 디자인 작업을 결과물을 꾸미는 단계가 아니라 사고를 시작하는 단계로 활용했다. - 팀원들은 초기 아이디어부터 Figma에 시각적으로 기록하며 일종의 디지털 스크래치패드처럼 사용했다. - 작은 규모의 팀 전체가 시각적 사고 과정에 참여함으로써 제품 방향과 아이디어를 공유했다. - 이는 Notion을 단순히 업무를 처리하는 도구가 아니라 사용자가 자신의 문제를 정의하고 해결 방법을 구성하는 도구로 발전시키는 기반이 됐다. ## 실용적인 시사점 - 제품이 실패할 때는 기능을 추가하기보다 사용자가 실제로 원하는 문제와 방향을 다시 검토해야 한다. - 중요한 사용자 흐름은 하나의 안에 집착하지 말고 여러 변형을 빠르게 만들어 비교하는 것이 효과적이다. - 디자인과 개발을 분리된 단계로 두기보다 실시간으로 협업하면 제품 전환 속도를 높일 수 있다. - 강력한 기능과 단순한 첫 경험을 함께 설계하는 것이 복잡한 제품의 접근성을 높인다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigma프로덕트 디자인user-experience-design+3

figma·2018년 11월 27일·3분 읽기큐레이션 요약

Zoom, Figma로 디자인 워크

Zoom은 Sketch, InVision·Framer, Zeplin으로 분리된 디자인 workflow를 Figma로 통합해 반복 작업과 협업 마찰을 줄였다. 실시간 공동 편집, 디자인 문서 내 댓글, 공유 라이브러리를 통해 디자이너뿐 아니라 엔지니어·PM·데이터 과학자까지 같은 맥락에서 참여할 수 있게 되었고, 피드백의 양과 품질도 크게 향상됐다. Figma는 Zoom의 단일 기준 문서이자 디자인 시스템 구축의 기반으로 자리 잡았다. ## 분산된 디자인 도구가 만든 비효율 - Zoom의 디자인팀은 여러 국가와 시간대에 걸쳐 원격으로 협업했다. - 디자이너 1명이 엔지니어 약 10명을 지원하는 구조였기 때문에, 디자인 의도를 일일이 설명하기 어려웠다. - Sketch에서 디자인하고, InVision이나 Framer에서 프로토타입을 만들고, Zeplin으로 개발자에게 전달하는 방식이었다. - 디자인 수정 때마다 여러 도구 간 파일을 동기화해야 했다. - 한 프로젝트에서 수정본을 10~20회씩 각 도구에 반영하고, 버전과 이해관계자별 리뷰를 따로 관리해야 했다. - 이 과정은 창의적인 작업보다 파일 관리와 수동 반복 작업에 시간을 쓰게 만들었다. ## Figma를 통해 발견한 전환점 - 디자이너 Steven Crosby는 Figma의 빠른 렌더링과 높은 프레임 속도에 주목했다. - 여러 사람이 하나의 디자인 파일에서 동시에 작업할 수 있는 실시간 협업 기능이 핵심적인 장점으로 평가됐다. - 댓글 기능을 통해 디자인 문서 안에서 직접 피드백을 남길 수 있었다. - 정적인 스크린샷을 공유하는 방식과 달리, 전체 화면 흐름과 해당 요소가 사용되는 맥락을 유지한 채 의견을 주고받을 수 있었다. - 별도의 다운로드, 파일 동기화, 정적 파일 공유 없이 링크만으로 협업할 수 있었다. ## 디자이너와 다른 직군의 협업 강화 - Figma는 디자이너뿐 아니라 프로젝트 매니저, 제품 매니저, 엔지니어까지 동일한 문서에 참여하게 했다. - 디자인 의사소통이 구두 설명이나 이미지 첨부 중심에서 문서 내 직접 피드백 중심으로 바뀌었다. - Zoom은 이전보다 피드백의 양과 품질이 크게 향상됐다고 평가했다. - 실시간으로 같은 화면을 보며 작업하므로, 원격 근무자와 다른 시간대의 팀원도 협업하기 쉬워졌다. ## 단일 기준이 된 디자인 시스템 - Figma를 팀의 단일 기준 문서로 사용하면서 디자인 시스템의 기반을 마련했다. - Team Libraries를 통해 여러 프로젝트에서 공통 컴포넌트를 공유할 수 있었다. - 아이콘 세트와 다양한 UI 컴포넌트를 마스터 파일에 모아 지속적으로 업데이트했다. - 라이브 업데이트를 통해 모든 디자이너가 최신 컴포넌트를 사용할 수 있었다. - Constraints 기능을 활용해 화면 크기가 바뀌어도 요소가 특정 방향에 고정되도록 만들고, 일관된 디자인 패턴을 구축했다. - 컴포넌트 중심의 작업 방식은 디자인 재사용성과 유지보수성을 높였다. ## 비디자이너도 참여한 브레인스토밍 - Zoom은 데이터 과학팀과 투자회사 소속 디자인 파트너를 제품 메시지 브레인스토밍에 초대했다. - 참가자들은 Figma를 처음 사용했지만 별도의 긴 교육 없이 바로 디자인 파일에 참여했다. - 각자 화면의 영역을 맡아 문구와 요소를 직접 배치하고, 다른 사람의 아이디어를 참고하거나 변형했다. - 실시간으로 서로의 커서를 확인하며 아이디어를 발전시킬 수 있었다. - Figma의 낮은 학습 곡선 덕분에 디자인 작업이 특정 직군만의 활동이 아니라 공동 창작 과정으로 확장됐다. ## 실용적인 결론 여러 도구와 파일 형식으로 나뉜 디자인 프로세스는 반복적인 동기화와 맥락 손실을 만든다. 팀 규모가 작거나 원격 협업이 많다면, 디자인·프로토타이핑·피드백·개발 전달을 하나의 공유 문서와 컴포넌트 라이브러리로 통합하는 방식이 효율적이다. Figma의 강점은 단순한 디자인 도구가 아니라 모든 직군이 같은 맥락에서 협업하는 공통 작업 공간을 제공한다는 데 있다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigma디자인 시스템프로토타이핑+3

figma·2018년 8월 9일·4분 읽기큐레이션 요약

투명하고 개방적인 디자인이

Citrusbyte는 완성된 시안만 공개하는 대신, 작업 중인 디자인 파일을 클라이언트와 실시간으로 공유하는 ‘투명한 오픈 디자인’을 실천한다. Figma의 클라우드·실시간 협업 기능 덕분에 피드백 과정이 빨라지고 불필요한 파일 전달과 커뮤니케이션이 줄어들었다. 그 결과 프로젝트 이해도와 고객 참여가 높아졌으며, 디자이너의 작업 시간과 리뷰 주기도 크게 단축됐다. ## 전통적인 비공개 디자인 프로세스의 한계 - 디자이너는 완성도가 충분히 높아질 때까지 작업물을 외부에 공개하지 않는 경우가 많다. - 기존에는 Sketch나 Photoshop 파일을 내보내 이메일로 보내거나, Dropbox·Google Drive에 동기화해야 했다. - 클라이언트가 프로젝트의 진행 상황을 지속적으로 확인하기 어렵고, 최신 파일이 무엇인지 혼란이 생겼다. - PNG·PDF 이미지로 피드백을 주고받으면 클라이언트가 어느 부분을 지칭하는지 명확하지 않아 불필요한 대화가 반복됐다. - InVision 같은 프로토타이핑 도구를 사용할 때도 디자인을 평면 파일로 저장한 뒤 새 버전을 다시 업로드해야 했다. ## 클라이언트에게 작업 과정을 공개하는 이유 - Citrusbyte는 초기 단계부터 클라이언트가 프로젝트의 발전 과정을 볼 수 있어야 한다고 판단했다. - Figma에서는 하나의 링크로 항상 최신 디자인 파일에 접근할 수 있다. - 여러 사람이 같은 파일에 동시에 들어와 실시간으로 변경 사항을 확인할 수 있다. - 클라이언트는 완성된 결과물만 받는 것이 아니라, 디자인이 만들어지는 과정 자체에 참여한다. - 작업 상황을 직접 볼 수 있어 프로젝트가 ‘블랙박스’처럼 느껴지지 않고 심리적 안정감이 커진다. - 프로젝트에 직접 참여한 클라이언트는 현재 진행 상황과 의사결정의 맥락을 더 잘 이해하므로 결과물에 대한 공감대와 참여도가 높아진다. ## 미완성 작업을 공개할 때의 위험과 대응 - 작업 중인 파일은 구조가 복잡하거나 시각적으로 정리되지 않아 클라이언트가 결과물을 오해할 수 있다. - 디자이너 입장에서는 미완성 결과물을 보여주는 것이 부담스럽고, 창작 과정이 평가받는 것처럼 느껴질 수 있다. - Citrusbyte는 이를 커뮤니케이션과 기대치 관리로 해결한다. - Pablo Franco는 “자전거를 원하더라도 작업 중인 나를 보면 체인을 조립하고 있는 모습을 보게 된다”는 비유를 사용해, 현재 보이는 화면이 최종 결과물이 아님을 설명한다. - 공개의 목적이 완성품 평가가 아니라 진행 상황 공유와 협업이라는 점을 사전에 합의한다. ## 실시간 피드백으로 빨라지는 협업 - 클라이언트는 디자인 파일에서 직접 변경 사항을 확인하고, 필요한 경우 일부 요소를 스스로 실험할 수 있다. - 예를 들어 헤드라인 문구를 바꿔 어떤 표현이 더 적절한지 직접 비교할 수 있다. - 간단한 문구 수정 때문에 긴 이메일 대화를 주고받는 일이 줄어든다. - 디자이너는 반복적인 수정 요청을 처리하는 대신 핵심적인 디자인 작업에 집중할 수 있다. - 디자인과 프로토타입이 같은 최신 파일에 연결되어 있어 변경 후 별도의 재업로드가 필요 없다. ## Figma 기능이 제거한 불필요한 작업 - Figma의 웹 기반 환경은 파일 버전 관리와 공유 과정을 단순화한다. - 정기적인 클라이언트 리뷰에서는 발표자가 자신의 아바타를 클릭한 사용자가 화면을 따라오도록 하는 ‘관찰 모드’를 활용할 수 있다. - 발표자는 별도의 프레젠테이션용 파일이나 복잡한 플로우 연결 화면을 준비하지 않고, 실제 디자인 파일을 이동하며 설명하면 된다. - 이러한 작은 기능들이 파일 내보내기, 업로드, 발표용 화면 구성 같은 반복 작업을 없앴다. - Citrusbyte의 디자이너 Sam Small은 이전 방식과 비교해 Figma 사용으로 작업 시간이 약 30~50% 절약된다고 평가했다. ## 생산성과 고객 만족도 향상 - 작업 과정이 투명해지면서 클라이언트가 프로젝트에 더 많이 참여하고 결과물에 대한 이해도도 높아졌다. - 피드백 전달 위치가 명확해져 커뮤니케이션 왕복 횟수가 감소했다. - 리뷰 준비에 들던 시간이 줄어들어 공격적인 일정의 프로젝트도 수행하기 쉬워졌다. - Citrusbyte는 절약된 시간만큼 더 많은 프로젝트를 맡을 수 있었다. - 고객사 SundaySky는 Figma를 사용한 프로젝트에서 리뷰 주기가 절반으로 줄어든 점을 긍정적으로 평가했다. - Citrusbyte는 스타트업 중심의 고객 기반에서 Apple, Sony, Intel, AT&T 등 Fortune 1000 기업으로 사업을 확장했으며, 투명한 협업 방식이 이러한 성장과도 연결된다고 설명한다. ## 실용적인 적용 방법 - 프로젝트 시작 전에 클라이언트에게 작업 중인 화면이 미완성 상태일 수 있음을 명확히 알린다. - 하나의 최신 Figma 파일을 프로젝트의 기준점으로 삼고, 이메일 첨부 파일이나 중복된 버전 생성을 줄인다. - 클라이언트가 직접 확인하고 의견을 남길 수 있도록 적절한 접근 권한을 제공한다. - 정기 리뷰에서는 관찰 모드와 실시간 화면 공유를 활용해 별도 발표 자료 제작을 최소화한다. - 투명성은 단순히 파일을 공개하는 것이 아니라, 진행 과정·피드백 방식·기대 결과를 함께 합의하는 협업 문화로 운영해야 한다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigma프로토타이핑collaborative-design+1

figma·2018년 8월 1일·3분 읽기큐레이션 요약

피그마 기능 하

Figma의 Observation Mode는 다른 사용자의 화면을 실시간으로 따라 보며 작업 과정을 관찰하는 기능이다. 파일을 공유한 상태라면 보기 전용 권한을 가진 사람도 상대방의 아바타를 클릭해 화면과 커서 움직임을 그대로 확인할 수 있다. 이를 통해 디자인 리뷰, 고객 피드백, 사용자 테스트를 별도 화면 공유 도구 없이 진행할 수 있다는 것이 글의 결론이다. ## Observation Mode의 작동 방식 - 같은 Figma 파일을 여러 사람이 보고 있을 때 우측 상단에 참여자의 얼굴 아이콘이 표시된다. - 특정 사용자의 아바타를 클릭하면 그 사용자가 보고 있는 화면으로 자신의 화면이 전환된다. - 상대방이: - 프레임의 텍스트를 수정하거나 - 특정 오브젝트를 클릭하거나 - 화면을 확대·이동하는 과정까지 실시간으로 확인할 수 있다. - 일반적인 화면 공유처럼 상대방의 작업 흐름을 그대로 관찰하는 방식이다. ## 공유 권한과 주의점 - 해당 파일이나 프로젝트의 공유가 활성화되어 있어야 사용할 수 있다. - 편집 권한이 없어도, 즉 보기 전용 사용자도 Observation Mode를 사용할 수 있다. - 따라서 디자인 URL을 공유할 때는 다른 사람이 자신의 화면을 관찰할 수 있다는 점을 고려해야 한다. - 기능의 접근성이 높은 만큼 민감한 작업이나 공개를 원하지 않는 화면에서는 공유 설정을 주의해야 한다. ## 디자인 리뷰와 고객 피드백 - 디자이너가 직접 화면을 설명하거나 별도의 화면 공유를 설정하지 않아도 리뷰어가 작업 과정을 따라갈 수 있다. - 고객이 디자인을 실제로 어떻게 탐색하고 어떤 부분에서 멈추는지 확인할 수 있다. - 단순히 완성된 결과물에 대한 의견을 듣는 것보다, 사용자가 화면을 이해하고 이동하는 과정을 관찰할 수 있다는 장점이 있다. - 디자인 크리틱이나 클라이언트 피드백 세션에서 특히 유용하다. ## 실시간 사용자 테스트 - 사용자가 Figma 프로토타입을 탐색하는 동안 아바타를 클릭해 행동을 실시간으로 관찰할 수 있다. - 테스트가 끝난 뒤 기억에 의존해 의견을 수집하는 대신, 사용자가: - 어느 화면에서 망설이는지 - 어떤 요소를 클릭하려 하는지 - 어디에서 이동에 어려움을 겪는지 를 직접 확인할 수 있다. - 이를 통해 사용자의 문제 지점과 주저하는 순간을 더 정확히 파악할 수 있다. - 글에서는 사용자들도 Observation Mode를 사용자 테스트에 활용할 수 있는지에 관심을 보였다고 소개한다. ## 활용 방식에 대한 사용자 의견 - Figma는 기능 사용법만 설명하기보다 사용자들의 트위터 게시물을 통해 다양한 활용 사례를 소개했다. - 사용자들에게 다음과 같은 경험과 팁을 공유해 달라고 요청했다. - 가장 좋아하는 활용 사례 - 함께 사용하는 대상 - 처음 사용하는 사람을 위한 팁 - 이는 Observation Mode가 단순한 협업 기능을 넘어 디자인 리뷰, 고객 인터뷰, 사용자 조사 등 여러 상황에 적용될 수 있음을 보여준다. 실제로 활용할 때는 사용자 테스트나 리뷰 전에 파일 공유 범위를 확인하고, 관찰 대상에게 실시간 관찰 사실을 알리는 것이 좋다. 특히 프로토타입 테스트에서는 사용자의 클릭 위치와 망설임을 별도로 기록하면 디자인 개선에 더 직접적으로 활용할 수 있다.

원문 읽기(새 탭에서 열림)

real-time-collaborationFigma프로토타이핑user-testing+2