Figma

532 개의 포스트

figma3분 읽기큐레이션 요약

Combine이 디자인 벤처 캐피

Combine은 기존 VC처럼 홍보와 사고 리더십을 앞세우기보다, 뛰어난 디자이너가 초기 스타트업에 직접 참여하는 새로운 투자 모델을 제시한다. Facebook과 Airbnb에서 디자인 문화를 구축한 Soleio Cuervo와 Adam Michela는 초기 단계 투자와 디자인 스튜디오를 결합해 소수의 포트폴리오 기업을 깊이 지원하려 한다. 이 모델의 핵심은 자본뿐 아니라 브랜딩, 사용자 조사, 채용 등 제품 성장에 필요한 디자인 역량을 함께 제공하는 데 있다. ## 조용한 출발을 택한 Combine - 2017년 출범한 시드 단계 VC인 Combine은 일반적인 벤처펀드와 달리 대대적인 발표나 Medium 글을 공개하지 않았다. - 창고형 사무실 사진을 올린 몇 개의 암호 같은 트윗만으로 출발했지만, 실리콘밸리의 관련 업계 사람들은 이미 몇 달 전부터 이들의 움직임을 주목하고 있었다. - 창업자들은 “무엇을 할 것인지”보다 “무엇을 해왔는지”로 평판을 쌓아야 한다는 태도를 갖고 있으며, 과도한 자기 홍보를 경계한다. ## Facebook과 Airbnb에서 검증된 두 창업자 - Soleio Cuervo는 Facebook의 두 번째 디자이너로 합류해 초기 디자인 문화와 주요 제품을 만드는 데 기여했다. - Facebook Messenger - Groups - 초기 Facebook Like 버튼 - Adam Michela는 Soleio가 떠난 뒤 Facebook에 합류해 회사 최초의 디자인 시스템을 구축했다. - 이후 Airbnb에서도 디자인 시스템을 만드는 일을 담당했다. - 두 사람은 서로 다른 강점을 보완한다. - Soleio: 감정적이고 사람을 연결하는 역할, 비전과 관계 형성에 강함 - Adam: 조용하고 체계적인 운영자, 실행과 구조화에 강함 - 공통적으로 디자인과 사람에 대한 관심이 크며, 자신의 성과를 과하게 내세우지 않는 성향을 지녔다. ## 투자사와 디자인 스튜디오의 결합 - Combine은 초기 단계 투자사이면서 동시에 포트폴리오 기업을 지원하는 디자인 스튜디오를 지향한다. - 첫 번째 펀드로 1,200만 달러 이상을 조달했다. - 대규모 조직 대신 소수의 뛰어난 디자인 파트너를 채용해 소수의 기업에 집중할 계획이다. - 지원 범위는 단순한 화면 설계를 넘어선다. - 브랜드 전략과 정체성 - 마케팅 - 사용자 조사 - 제품 경험 설계 - 핵심 인재 채용 - 기존의 “서비스를 제공하는 VC” 모델을 극단적으로 확장한 형태로, Andreessen Horowitz처럼 운영 지원을 제공하되 디자인에 훨씬 더 집중하고 포트폴리오 규모는 작게 유지한다. ## 디자인이 스타트업의 경쟁력이 된 배경 - AWS 등으로 소프트웨어를 만드는 비용과 진입장벽이 낮아지면서, 기능 자체만으로는 경쟁 우위를 확보하기 어려워졌다. - 소비자는 수많은 서비스 중에서 선택할 수 있으므로, 기업은 사용자 경험을 통해 차별화하고 장기적인 진입장벽을 만들어야 한다. - 오늘날 사용자가 제품을 이해하지 못하면 자신의 실수라고 생각하기보다 서비스의 문제로 받아들인다. - 따라서 직관적인 인터페이스와 일관된 제품 경험은 부가 요소가 아니라 스타트업의 생존과 성장에 직접 연결되는 핵심 역량이다. ## 실용적인 시사점 - 초기 스타트업은 투자금을 받는 것뿐 아니라 제품·브랜드·채용을 함께 개선할 수 있는 투자자를 선택할 필요가 있다. - 디자인은 시각적 완성도에 국한되지 않고 사용자 조사, 조직 운영, 채용, 마케팅까지 포함하는 사업 전략으로 다뤄야 한다. - 다만 이 모델은 소수 기업에 깊이 관여하는 방식이므로, 모든 스타트업에 적용하기보다는 디자인이 핵심 경쟁력인 초기 기업에 특히 적합하다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

디자인 컨퍼런스 Vectors,

Vectors는 기존 기술·디자인 콘퍼런스와 달리 취약성, 무의식적 편견, 다양한 관점 같은 주제를 다루며 이틀 만에 300석이 매진됐다. 주최자 Gabriel Valdivia는 다양성을 특정 집단만의 의제로 한정하지 않고, 기존의 다수 집단도 참여시켜 다른 관점의 가치를 체감하게 해야 한다고 주장한다. 개인의 문화적 배경과 경험은 제품과 디자인에 반영되며, 작은 배려가 새로운 사용자층과 사업적 가치를 만들어낼 수 있다는 것이 글의 결론이다. ### 기존 콘퍼런스와 다른 Vectors의 방향 - Vectors는 샌프란시스코 디자인 위크의 새로운 디자인 콘퍼런스다. - 일반적인 기술 콘퍼런스의 유행하는 비즈니스·마케팅 주제 대신 다음과 같은 내용을 다룬다. - 취약성을 드러내고 활용하는 방법 - 무의식적 편견을 고려한 디자인 - 서로 다른 배경과 관점이 제품에 미치는 영향 - 300장의 티켓이 이틀 만에 판매됐고, 150명이 대기 명단에 오를 만큼 다양성에 대한 수요가 컸다. ### 다양성을 별도의 구호로 내세우지 않은 이유 - 주최자 Gabriel Valdivia와 Julio Martinez는 멕시코계·쿠바계 배경을 바탕으로 다양성에 관한 대화를 시작했다. - 그러나 콘퍼런스 웹사이트에서 ‘다양성’이라는 단어를 전면에 내세우지는 않았다. - 기업의 다양성 프로그램이 종종 여성이나 소수 인종처럼 이미 문제의식이 있는 사람들만 참여하는 구조가 된다는 문제의식 때문이다. - 다양성에 무관심한 백인 남성도 행사에 참여해 자신이 가진 특권으로 다른 관점을 초대하고, 그 가치에 대해 직접 깨닫기를 기대했다. ### 소수자 경험을 디자인 자산으로 보는 관점 - Valdivia는 소수자라는 위치가 차별 때문에 불리할 수 있다는 점을 인정하면서도, 다양한 어려움을 견디며 얻은 회복력과 경험이 강점이 될 수 있다고 말한다. - 그는 이민 후 가족과 함께 자동차 판매점을 청소했고, 이후 웨이터와 콜센터 직원으로도 일했다. - 이런 경험은 업계 권력자들이 접하기 어려운 현실을 이해하게 하며, 사용자 문제를 더 넓은 시야에서 바라보게 만든다. - 단, 이는 차별이나 구조적 불이익을 부정하는 주장이 아니라, 소수자 경험에서 파생되는 능력과 관점에도 주목하자는 의미다. ### 배경과 관점이 제품에 반영되는 방식 - 사람이 만드는 모든 제품에는 제작자의 경험과 관점이 어느 정도 담긴다. - 많은 제품이 백인 남성 중심의 관점을 강하게 반영해 왔으며, 그 관점 자체가 틀렸다는 뜻은 아니지만 다른 사용자 경험이 배제될 수 있다. - 서로 다른 배경의 디자이너가 참여하면 기존 팀이 놓치기 쉬운 요구사항을 자연스럽게 발견할 수 있다. - Valdivia는 과거 스타트업 Automatic에서 스페인어 자막을 제품 영상에 추가한 사례를 들었다. - 구현 자체는 작은 작업이었지만 스페인어 사용자가 제품을 이해하는 데 큰 도움이 됐다. - 이처럼 세부적인 현지화와 접근성 개선이 누적되면 더 넓은 시장과 사용자에게 가치를 제공할 수 있다. ### 실용적인 시사점 디자인 조직은 다양성을 채용 지표나 캠페인 문구에만 머물게 하지 말고, 제품 의사결정 과정에 실제로 반영해야 한다. 특히 팀 외부의 사용자와 다른 배경을 가진 동료를 초기 단계부터 참여시키고, 언어·문화·접근성 차이에서 비롯되는 작은 불편을 점검하는 것이 효과적인 출발점이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

한 디자이너가 내

Pivotal의 디자이너와 개발자 간 인수인계는 디자인 파일을 이미지로 내보내고 프로젝트 카드에 반복 업로드하는 방식이라 비효율과 오류가 많았다. Figma를 도입한 뒤에는 최신 디자인을 링크 하나로 공유하고 디자인 위에 직접 댓글을 남길 수 있어, Colby는 프로젝트마다 약 이틀의 문서 관리 시간을 절약했다. 또한 맥락이 포함된 실시간 리뷰가 가능해져 협업과 결과물의 품질에도 긍정적인 영향을 주었다. ### 반복적인 이미지 내보내기와 업로드의 문제 - Colby는 디자인 프레임을 이미지로 export한 뒤 Pivotal Tracker의 개발 카드에 업로드했다. - 프로젝트마다 이 작업을 15~20회 반복해야 했다. - 프로젝트 하나에 수백 개의 카드가 있어 최신 카드를 찾는 데도 많은 시간이 들었다. - 이미지를 업데이트하지 않고 잊어버리면 개발자가 오래된 디자인을 기준으로 작업할 수 있었다. - 이 과정은 디자이너뿐 아니라 개발자의 시간도 낭비하고, 잘못된 구현으로 이어질 위험이 있었다. ### 브라우저 기반 디자인 공유 - Figma 파일은 브라우저에서 관리되므로 별도 프로그램 설치 없이 접근할 수 있었다. - 링크를 공유하면 모든 협업자가 동일한 최신 파일을 확인할 수 있었다. - 디자인이 변경되어도 개발 카드를 매번 이미지로 갱신할 필요가 없었다. - Colby는 카드를 처음 만들 때 Figma 링크만 추가하면 되었고, 프로젝트마다 약 이틀의 작업 시간을 절약했다. - Figma는 단순한 디자인 제작 도구를 넘어 파일 공유와 변경 관리까지 지원하는 “디자인 관리 도구”로 활용되었다. ### 디자인 위에 남기는 맥락 있는 댓글 - 기존 디자인 리뷰에서는 엔지니어들이 포스트잇에 의견을 적고 차례로 구두 공유했다. - 포스트잇은 어떤 디자인 요소에 대한 의견인지 맥락이 분리되어 이해하기 어려웠다. - Figma에서는 댓글을 특정 프레임이나 디자인 영역에 직접 연결할 수 있었다. - 리뷰 참여자는 의견이 적용되는 위치를 즉시 확인할 수 있어 피드백이 더 명확해졌다. - 결과적으로 주간 디자인 리뷰가 더 짧고 효율적으로 진행되었다. ### 실시간 협업과 리뷰 조정 - 엔지니어가 파일을 검토하는 동안 Colby는 각자의 커서와 활동을 실시간으로 확인할 수 있었다. - 특정 컴포넌트처럼 이미 스타일 가이드로 정해진 부분에 리뷰가 집중되면, Colby가 피드백 방향을 조정할 수 있었다. - 리뷰를 받는 디자이너가 어떤 영역에 피드백을 원하는지 직접 안내할 수 있었다. - 디자이너와 개발자가 같은 파일을 보며 의견을 주고받아 정보 전달의 누락을 줄였다. ### 협업 품질 향상 - Figma는 디자인에서 개발로 넘어가는 인수인계 과정의 반복적인 관리 작업을 줄였다. - 팀은 파일 버전과 피드백을 추적하는 데 쓰던 시간을 제품의 완성도에 더 투자할 수 있었다. - Pivotal은 개발자와 디자이너를 포함한 다양한 구성원의 의견이 더 나은 제품을 만든다고 보았고, Figma가 이를 지원한다고 평가했다. 실무에서는 디자인 파일을 이미지로 복사해 전달하기보다 최신 원본 링크를 단일 기준으로 삼고, 피드백은 해당 디자인 요소에 직접 남기는 방식이 효과적이다. 이를 위해 프로젝트 관리 카드에 Figma 링크와 버전 규칙을 명확히 기록하면 오래된 시안으로 작업하는 문제를 줄일 수 있다.

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

워크플로에서 컨스트레인 (새 탭에서 열림)

Figma의 '제약 사항(Constraints)' 기능은 다양한 화면 크기에 대응해야 하는 현대 디자이너들의 작업을 효율적으로 만들어주는 강력한 도구입니다. 이 기능을 활용하면 요소가 상위 프레임의 크기 변화에 따라 어떻게 반응할지 정의할 수 있어, 반복적인 수작업 없이도 유연한 반응형 디자인을 완성할 수 있습니다. 결과적으로 디자이너는 한 번의 설계로 PC부터 모바일까지 모든 해상도에서 의도한 레이아웃을 유지하는 견고한 인터페이스를 구축할 수 있습니다. **버튼의 고정 위치 설정** * 모바일 UI에서 자주 쓰이는 '플로팅 액션 버튼(FAB)'과 같은 요소를 프레임의 특정 위치에 고정할 수 있습니다. * 제약 사항을 'Bottom'과 'Right'로 설정하면 화면 크기가 늘어나거나 줄어들더라도 버튼이 지정된 구석 위치를 이탈하지 않고 유지됩니다. **컴포넌트와 제약 사항의 결합** * Figma의 컴포넌트(반복되는 디자인 단위) 기능과 제약 사항을 함께 사용하면 디자인 시스템 운영 효율이 극대화됩니다. * 주요 요소에 제약 사항을 설정한 뒤 이를 컴포넌트로 만들고 다양한 기기 크기의 프레임에 복제하면, 원본의 색상이나 텍스트 스타일을 한 번만 수정해도 모든 해상도의 인스턴스에 즉시 반영됩니다. **그리드와 연동한 반응형 레이아웃** * 제약 사항을 'Stretch(늘리기)' 타입의 레이아웃 그리드와 결합하면 하단 내비게이션 바와 같은 복잡한 요소도 정교하게 제어할 수 있습니다. * 내비게이션 바 프레임에 'Left & Right' 및 'Bottom' 제약을 설정하고, 각 아이콘을 그리드 열 내부에 배치한 뒤 'Center'로 설정하면 화면 너비 변화에 맞춰 아이콘 간격이 자동으로 균등하게 조절됩니다. **유연한 테이블 셀 설계** * 텍스트와 아바타가 포함된 그룹은 'Center-Left'로, 우측의 버튼 그룹은 'Center-Right'로 제약 사항을 다르게 부여하여 테이블 셀을 구성합니다. * 이렇게 설계된 셀은 프레임 너비가 어떻게 변하든 각 정보가 좌우 끝단에 밀착되어 정돈된 형태를 유지하므로, 정보 밀도가 높은 목록형 UI를 설계할 때 매우 유용합니다. **일러스트레이션의 창의적 활용** * 제약 사항은 UI 요소뿐만 아니라 일러스트레이션이나 드로잉에도 적용하여 재미있는 시각 효과를 줄 수 있습니다. * 수평 또는 수직 제약을 활용해 이미지를 의도적으로 늘리거나 줄임으로써, 프레임 크기 변화에 따라 캐릭터의 형태가 변하는 위트 있는 디자인을 연출할 수 있습니다. 효율적인 워크플로우를 위해 단순히 요소를 배치하는 것에 그치지 말고, 초기 설계 단계부터 제약 사항을 고려하는 습관을 들이는 것이 좋습니다. 특히 컴포넌트와 레이아웃 그리드를 제약 사항과 유기적으로 연결하여 사용한다면, 복잡한 디자인 시스템도 훨씬 유연하고 일관성 있게 관리할 수 있습니다.

figma2분 읽기큐레이션 요약

Braintree가 디자인 크리틱 시간을

Braintree는 정적인 디자인 리뷰를 실시간 공동 작업으로 바꾸면서 디자인 크리틱에 드는 시간을 약 50% 줄였다. 디자이너들이 같은 파일에서 직접 수정하고 아이디어를 발전시키자 피드백 오해와 반복 회의가 감소했으며, 개발자와의 핸드오프도 링크 하나로 단순해졌다. ## 기존 디자인 크리틱의 비효율 - 디자이너가 작업물을 발표하고, 여러 리뷰어에게 한꺼번에 피드백을 받는 방식이었다. - 디자이너는 회의 후 혼자 피드백을 적용해야 했고, 리뷰어의 의도를 정확히 이해하지 못하는 경우가 많았다. - 수정본을 다시 검토하는 회의에서 문제가 재발견되거나 새로운 문제가 생겨 반복 작업이 발생했다. - PayPal의 Braintree 인수 이후 여러 디자인 팀, 서로 다른 스타일 가이드, 다양한 서비스와 개발 팀이 얽히며 커뮤니케이션 복잡성이 커졌다. ## Figma 도입과 실시간 리뷰 - Braintree의 Developer Experience 디자인 팀은 새로운 피드백 방식을 시험하며 Figma를 도입했다. - 디자이너들은 대면 회의 대신 Slack 음성 통화와 Figma 파일을 함께 사용했다. - 브라우저 링크로 같은 파일에 접속하고, 관찰 모드로 상대방의 화면과 작업 위치를 실시간으로 확인했다. - 별도의 운영체제나 설치 환경에 크게 구애받지 않고 온라인에서 협업할 수 있다는 점도 장점으로 작용했다. ## 정적 리뷰에서 창의적 공동 작업으로 - 리뷰어는 말로 설명하는 대신 디자이너의 아트보드를 복제하고 직접 수정해 의도를 보여줄 수 있었다. - 피드백을 메모한 뒤 나중에 해석하고 적용할 필요가 줄어들었다. - 두 디자이너가 같은 파일에서 각자의 시안을 발전시키고, 서로의 작업을 참고하며 아이디어를 조합했다. - 여러 시안의 장점을 결합한 새로운 버전을 즉석에서 만들 수 있었다. - Craig은 이 방식으로 디자인 크리틱 시간이 약 50% 감소했다고 추정했다. ## 개발자 핸드오프 간소화 - 기존에는 디자인 변경 때마다 파일을 다시 내보내고, 개발자에게 수많은 메시지를 보내야 했다. - Figma 링크 하나를 공유하면 디자이너와 개발자가 최신 디자인을 함께 확인할 수 있었다. - 특정 버튼이나 기능의 동작을 질문받으면, 디자이너가 파일 안에서 직접 복제·수정하며 설명할 수 있었다. - 디자인의 동작 방식을 설명하기 위한 별도 회의와 반복적인 파일 전달이 줄어들었다. ## 실용적인 적용 방법 - 디자인 리뷰를 발표와 질의응답에만 한정하지 말고, 공동 편집 세션으로 운영한다. - 피드백은 말이나 문서로만 전달하지 말고, 가능한 경우 리뷰어가 직접 시안을 수정해 보여주게 한다. - 디자이너와 개발자가 동일한 최신 파일을 기준으로 대화하도록 공유 링크와 실시간 협업 도구를 활용한다. - 팀 규모가 커질수록 정기 회의보다 실시간 작업 공간을 중심으로 커뮤니케이션 구조를 설계하는 것이 효과적이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

피그마의 첫

Figma는 브라우저에서 복잡한 그래픽을 빠르게 처리하면서도 여러 사용자가 동시에 작업할 수 있는 디자인 도구를 만들겠다는 목표로 첫해를 보냈다. 초기에는 “장난감”이라는 평가와 기술적 한계에 대한 의심이 있었지만, 멀티플레이어 편집과 컴포넌트·디자인 시스템 기능을 통해 협업 도구로서의 가치를 입증했다. 또한 성능 개선과 Sketch 가져오기 기능을 강화하며 기존 디자인 워크플로에 쉽게 편입되는 제품으로 발전했다. ## 브라우저 기반 디자인 도구의 도전 - 웹 브라우저에서 복잡한 그래픽을 렌더링하면서도 높은 성능을 유지해야 했다. - 기존 디자인 도구에 익숙한 디자이너들이 새로운 협업 방식을 신뢰하도록 설득해야 했다. - 초기에는 Figma를 실제 업무용 도구가 아닌 “장난감”으로 보는 시선이 있었다. - Figma는 디자이너, 엔지니어, 제품 관리자와 대화하며 규모가 커지는 팀의 요구를 파악했다. ## 빠른 제품 개선과 성능 투자 - 출시 후 작업 흐름을 단순화하고 제품 완성도를 높이기 위해 수많은 기능과 업데이트를 배포했다. - 파일 로딩과 그래픽 렌더링 속도를 높이는 데 상당한 엔지니어링 자원을 투입했다. - Sketch 파일을 Figma로 가져오는 기능을 지속적으로 개선해 사용자가 기존 작업물을 처음부터 다시 만들지 않도록 했다. - 업데이트가 매우 빠르게 진행되어 사용자가 모든 변화를 따라가기 어려울 정도였으며, 첫해를 기념해 주요 발전 사항을 한곳에 정리했다. ## 실시간 협업과 단일 진실 공급원 - 2016년 9월 28일 멀티플레이어 편집 기능을 공개했다. - 디자인 도구에서 여러 사람이 동시에 편집하는 방식은 당시 새로운 개념이었고, 디자이너들 사이에서도 찬반 논쟁이 있었다. - 실제 사용 사례로는 다음과 같은 협업이 가능해졌다. - 촉박한 일정 안에서 여러 디자이너가 함께 제품을 완성 - 세계 각지의 예비 디자이너 멘토링 - 더욱 효율적인 디자인 리뷰와 비평 - 멀티플레이어의 가장 큰 장점은 단순한 동시 편집이 아니라 팀의 **단일 진실 공급원(single source of truth)** 을 제공하는 데 있다. - 하나의 URL로 디자인을 공유할 수 있고, 파일이 수정되어도 URL은 유지된다. - 이에 따라 파일을 복사하거나 최신 버전을 확인하고 디자인 자산을 동기화하는 복잡한 과정이 줄어든다. - 카피라이터는 디자인 안에서 문구를 직접 시험할 수 있고, 개발자는 디자인 속성을 확인해 코드로 옮길 수 있으며, 제품 관리자는 별도 메시지 없이 프로젝트 상태를 파악할 수 있다. - 여러 사람이 오래된 파일을 사용하거나 서로의 작업을 덮어쓰는 문제도 줄어든다. ## 컴포넌트와 확장 가능한 디자인 시스템 - 2016년 12월 8일 컴포넌트 기능을 출시했다. - 제품이 커질수록 상태 표시줄, 내비게이션 메뉴, 아이콘처럼 반복되는 UI 요소를 여러 파일과 팀원 사이에서 일관되게 관리해야 한다. - 컴포넌트를 사용하면 기본 요소를 수정했을 때 관련 디자인에 변경 사항을 일관되게 반영할 수 있다. - 디자이너가 모든 화면을 수동으로 찾아 업데이트해야 하는 부담을 줄여 준다. - **컴포넌트 오버라이드**를 통해 개별 인스턴스의 색상이나 텍스트 폰트 등 특정 속성만 바꿀 수 있다. - 개별 화면에 필요한 차이를 허용하면서도 전체 디자인 시스템과의 연결은 유지할 수 있다. - 2017년 2월 15일에는 여러 파일과 팀에서 컴포넌트를 공유하기 위한 Team Library 베타를 공개했다. ## 실용적인 결론 Figma의 첫해 성장은 단순히 기능을 많이 추가한 결과가 아니라, 디자인 파일을 팀 전체가 함께 사용하는 중앙 작업 공간으로 바꾼 데서 비롯됐다. 협업이 중요한 팀이라면 실시간 편집뿐 아니라 공유 URL, 최신 버전 유지, 컴포넌트 재사용, 기존 Sketch 자산의 이전 가능성까지 함께 고려하는 것이 Figma식 워크플로의 핵심이다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

Figma의 2단계 인증

Figma는 2017년 계정 보안을 강화하기 위해 2단계 인증(2FA)을 도입했다. 비밀번호가 유출되더라도 SMS나 인증 앱을 통한 추가 인증으로 계정을 보호할 수 있으며, 새 기기 로그인이나 로그아웃 후 재로그인 시 인증이 요구된다. 인증 상태는 21일간 유지되고, 휴대전화를 잃어버렸을 때 사용할 복구 코드도 제공된다. ## 2단계 인증 도입 배경 - 로그인 자격 증명이 유출되더라도 계정을 안전하게 보호하기 위한 추가 보안 수단이다. - 사용자가 계정 데이터 보호 수준을 직접 선택할 수 있도록 보안 옵션을 확대했다. ## 인증 방식 - Figma 계정 설정에서 2FA를 활성화할 수 있다. - 로그인 코드는 다음 방식 중 하나로 받을 수 있다. - SMS - Google Authenticator 같은 인증 앱 - 모든 종류의 휴대전화에서 사용할 수 있도록 설계됐다. ## 복구 코드와 계정 복구 - 계정 설정 페이지에서 2FA 복구 코드를 확인할 수 있다. - 휴대전화를 분실하거나 인증 앱에 접근할 수 없을 때 복구 코드를 사용해 인증할 수 있다. - 복구 코드는 휴대전화 분실 전에 안전한 장소에 기록해 두어야 한다. ## 인증이 요구되는 시점 - 사용자가 로그아웃한 뒤 다시 로그인할 때 2FA 인증이 필요하다. - 새로운 기기에서 로그인할 때도 추가 인증을 요구한다. - 로그인 후 인증 상태는 21일 동안 유지되며, 이후 다시 인증해야 한다. ## 실용적인 권장 사항 - 계정에 민감한 디자인 파일이나 협업 자료가 있다면 2FA를 활성화하는 것이 좋다. - SMS보다 인증 앱을 우선 고려하고, 복구 코드는 비밀번호 관리자 등 안전한 장소에 별도로 보관하는 것이 바람직하다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

해커톤이 테크 디

해커톤은 디자이너를 기술 업계로 유입시키는 효과적인 통로가 될 수 있지만, 기존 개발자 중심 문화 때문에 디자이너들이 애초에 자신을 위한 행사라고 느끼지 못한다. Hack@Brown의 사례는 브랜딩 개선, 디자인 전용 시상, 적극적인 참가자 모집과 기업 멘토링을 통해 이 장벽을 낮출 수 있음을 보여준다. 따라서 디자이너 부족 문제를 해결하려면 해커톤 주최자뿐 아니라 기술 기업도 직접 디자이너를 찾아가고 성장 경로를 제시해야 한다. ## 디자이너에게 해커톤이 필요한 이유 - 해커톤은 짧은 시간 안에 팀을 구성하고 아이디어를 제품으로 발전시키는 행사다. - 디자이너는 해커톤에서 다음과 같은 경험을 얻을 수 있다. - 엔지니어와 협업 - 제품 아이디어 구상과 빠른 반복 - 화면과 플랫폼 제약을 고려한 디자인 - 이론적으로는 기술 업계의 디자이너 채용을 위한 자연스러운 인재 발굴 경로가 될 수 있다. - 그러나 실제 해커톤은 개발자 중심의 분위기와 이미지가 강해, 디자이너들이 자신은 어울리지 않는다고 생각하기 쉽다. ## Hack@Brown의 디자이너 유치 전략 - Brown University의 Hack@Brown은 약 500명이 참여하는 대학 해커톤으로, 디자인 전공 학생을 적극적으로 끌어들이는 모델을 제시했다. - RISD 학생들 중에는 코딩을 못하면 참여할 수 없거나, 기술 기업에서 일하는 것을 “매도”처럼 여기는 인식이 있었다. - 주최 측은 이를 바꾸기 위해: - 행사 브랜딩을 더 전문적이고 디자인 친화적으로 개편 - UX·UI 분야를 위한 별도 상금 마련 - 전국 디자인 동아리에 직접 연락 - 참가자의 프로비던스 왕복 교통비 지원 - 디자인 전공자를 운영진에 더 많이 포함 - 그 결과 디자인 참가자는 2013년 15~20명에서 2017년 100명 이상으로 증가했고, 전체 참가자의 약 20%를 차지했다. ## 기술 업계로 가는 보이지 않는 경로 - 엔지니어에게는 학습 방법과 취업으로 이어지는 비교적 명확한 경로가 있지만, 기술 업계의 제품 디자이너가 되는 과정은 덜 정립되어 있다. - 디자이너가 해커톤에 참여하더라도 개발자 채용 부스만 보이면 자신이 환영받지 못한다고 느낄 수 있다. - 한 참가자는 행사장이 엔지니어 중심이라는 인상을 받자 곧바로 떠나기도 했다. - 따라서 기업이 디자이너가 있는 곳으로 직접 찾아가야 한다는 주장이 제기된다. - 제품 디자이너가 될 가능성이 있는 학생을 발굴 - 현업 디자이너를 멘토로 파견 - 참가자에게 직무와 채용 경로를 설명 - Hack@Brown 운영자였던 Atty Eleti도 행사에서 현업 디자이너를 만나 자신의 진로를 엔지니어에서 디자이너로 전환했다. 잠재력을 알아보고 격려해 주는 한 번의 만남이 진로 형성에 결정적일 수 있다는 사례다. ## 해커톤에서 채용으로 이어지는 퍼널 - Hack@Brown은 단순한 행사 참여를 넘어 기업과 학생을 연결하는 채용 퍼널로 발전했다. - Facebook 등 기술 기업은 행사에 멘토를 보내 잠재력 있는 학생을 만나고, 이후 후속 통화나 캠퍼스 방문으로 관계를 이어갔다. - 당시 기술 기업들은 디자이너 채용을 크게 늘리고 있었다. - Facebook의 디자이너 채용 목표가 과거보다 크게 증가 - LinkedIn과 Dropbox는 엔지니어 4~5명당 디자이너 1명 수준의 채용 비율을 목표로 설정 - IBM과 GE도 디자이너 대규모 채용을 추진 - 해커톤 참가자 상당수는 기술·제품 디자인 업계 진입에 불안을 느꼈지만, 기업 입장에서는 아직 발굴되지 않은 인재가 풍부한 공간이었다. 해커톤이 디자이너 부족 문제의 만능 해결책은 아니지만, 행사를 개발자만의 공간이 아니라 디자이너와 엔지니어가 함께 제품을 만드는 공간으로 설계한다면 강력한 인재 발굴 경로가 될 수 있다. 주최자는 디자인 친화적인 환경을 만들고, 기업은 현업 디자이너를 파견해 참가자에게 구체적인 진로와 채용 기회를 보여주는 것이 좋다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

안드로이드용 피그마 미

Figma는 2017년 5월, 디자인을 Android 기기에서 실시간으로 확인할 수 있는 **Figma Mirror for Android**를 출시했다. 컴퓨터에서 선택한 프레임과 수정 사항이 모바일 앱에 즉시 반영되어 실제 기기에서 디자인을 검토할 수 있으며, 앱을 설치하지 않고 모바일 브라우저로도 같은 기능을 사용할 수 있다. Android 사용자가 전 세계 스마트폰 사용자에서 큰 비중을 차지한다는 점을 고려한 제품 확장이다. ## Android용 Figma Mirror 출시 - 기존 iOS용으로 제공되던 Figma Mirror를 Android로 확대했다. - Android 사용자는 Google Play에서 앱을 내려받아 Figma 디자인을 모바일 기기에서 확인할 수 있다. - 이 기능은 특히 Android 앱을 디자인하는 디자이너가 실제 기기 환경에서 결과물을 검토하는 데 유용하다. ## 컴퓨터와 모바일의 실시간 디자인 동기화 - 컴퓨터에서 Figma 파일의 특정 프레임을 선택하면 해당 화면이 Android 앱에 표시된다. - 컴퓨터에서 디자인을 수정하면 변경 사항이 모바일 미러 화면에 즉시 반영된다. - 별도의 내보내기나 파일 전송 없이 디자인과 실제 모바일 화면을 빠르게 비교할 수 있다. - 이를 통해 모바일 레이아웃, 화면 비율, 인터랙션 결과 등을 작업 중에 확인할 수 있다. ## 모바일 브라우저를 통한 미러링 - 앱을 설치하고 싶지 않은 사용자는 모바일 브라우저에서 `figma.com/mobile-app`에 접속할 수 있다. - 브라우저 기반 방식도 앱과 동일하게 Figma 디자인을 모바일 기기에 표시한다. - Android뿐 아니라 앱 설치가 제한된 환경에서도 접근성을 높인 방식이다. ## Android 디자인을 위한 프레임 프리셋 - Figma는 여러 인기 Android 기기에 맞춘 화면 크기 프리셋을 제공한다. - 디자이너는 기기 해상도와 비율을 직접 계산해 처음부터 프레임을 만들 필요가 없다. - 실제 타깃 기기와 유사한 프레임에서 디자인을 시작해 프로토타입 검토를 효율화할 수 있다. ## Android 시장을 고려한 제품 확장 - 글에서는 Android가 당시 미국 스마트폰 사용자 중 52%, 전 세계적으로는 82%를 차지한다고 설명한다. - 따라서 Android 지원은 일부 사용자를 위한 기능 추가가 아니라, 대규모 모바일 사용자와 디자이너를 포괄하기 위한 중요한 확장이다. - iOS와 Android 모두에서 실제 기기 기반 검토가 가능해지면서 Figma의 모바일 디자인 검증 범위가 넓어졌다. 실무에서는 Android용 프레임 프리셋으로 디자인을 시작한 뒤 Figma Mirror 또는 모바일 브라우저에서 실제 기기 화면을 확인하는 방식을 추천한다. 이를 통해 데스크톱 미리보기만으로는 발견하기 어려운 크기, 비율, 여백 문제를 조기에 수정할 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Figma를 이끌 새로운 얼굴

Figma는 디자인 협업 도구에 대한 수요가 커지는 가운데, 사업의 다음 단계로 성장하기 위해 핵심 리더 두 명을 영입했다고 발표했다. Atlassian 출신 Eric Wittman은 첫 COO로서 운영·수익·시장 진출 전략을 맡고, Asana 출신 Kris Rasmussen은 엔지니어링 부사장으로 기술 조직과 제품 개발을 이끈다. 이들의 합류를 통해 Figma는 협업 중심의 제품 비전을 강화하고 회사 확장에 필요한 조직 역량을 갖추려 한다. ## 디자인 협업 도구 시장의 성장 - 기술 산업이 성숙하면서 고객이 사랑하는 제품을 만들기 위한 디자인의 중요성이 커지고 있다. - IBM과 GE 같은 대기업이 디자이너를 적극적으로 채용하고, Facebook은 엔지니어 4~5명당 디자이너 1명을 두는 방향을 추진하고 있다. - 그러나 디자이너가 실제 업무에서 사용하는 기술과 도구는 이러한 수요를 충분히 따라가지 못하고 있다. - Figma는 여러 사람이 함께 작업할 수 있도록 협업을 쉽게 만드는 것을 제품 전략의 핵심 기준으로 삼고 있다. ## Eric Wittman의 COO 합류 - Eric Wittman은 Atlassian에서 개발자 도구 사업을 이끌었으며, Bitbucket 운영 경험을 보유하고 있다. - Figma의 첫 COO로서 다음 업무를 담당한다. - 채용과 재무 등 회사 운영 프로세스 확장 - 시장 진출(GTM) 전략 - 매출과 수익 모델 관리 - 회사 전략 및 가치 정립 - 합류 초기부터 Figma의 가격 정책을 출시하고 회사 전략과 가치를 구체화하는 데 기여했다. - Macromedia 고객지원에서 시작해 Flash 제품관리 책임자까지 성장했으며, Songbird CEO와 Atlassian 개발자 도구 총괄을 거쳤다. - 운영과 사업 전문가이면서도 제품에 깊은 관심을 가진 인물이라는 점이 Figma와 잘 맞는다고 평가받았다. ## Kris Rasmussen의 엔지니어링 리더십 - Kris Rasmussen은 처음에는 주 2일 근무하는 파트타임 계약자로 Figma에 합류했다. - 짧은 근무 시간에도 팀 내에서 자연스럽게 리더 역할을 하며 다음과 같은 기여를 했다. - 논쟁이나 의견 충돌이 있을 때 핵심 쟁점을 제시 - 팀이 결정을 내리고 업무를 진전시키도록 지원 - 조용하지만 영향력 있는 방식으로 팀을 이끔 - Asana 초기 엔지니어링 조직을 이끌며 협업 제품의 인프라 구축과 팀 운영을 경험했다. - Aptana에서 웹 애플리케이션 개발자 도구의 엔지니어링 확장을 담당했고, 개인 프로젝트로 3D 그래픽 애플리케이션도 개발했다. - Figma에서는 세계적 수준의 기술 조직을 구축하고 여러 엔지니어링 프로젝트를 총괄한다. ## 성장 단계에 맞춘 조직 확장 - Figma는 제품을 만드는 것뿐 아니라, 빠르게 성장할 수 있는 운영·수익·기술 조직을 함께 구축하려 한다. - COO 영입으로 사업 전략과 운영 체계를 강화하고, 엔지니어링 부사장 영입으로 기술 인프라와 개발 조직의 확장을 추진한다. - 두 리더 모두 협업형 소프트웨어 기업에서 성장 경험을 쌓았다는 공통점이 있다. - 회사는 엔지니어, 디자이너, 작가, 제품 관리자 등 디자인에 열정을 가진 인재를 추가로 채용할 계획이다. Figma의 사례는 제품 비전이 명확한 초기 기업이 성장 국면에 진입할 때, 제품을 이해하는 사업 리더와 협업 기술에 경험이 있는 엔지니어링 리더를 함께 영입하는 전략을 보여준다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

피그마의 새로운 아이

Figma의 새 아이콘은 단순한 로고 변경이 아니라, 회사의 디자인 철학과 제품 정체성을 시각화한 결과다. 아이콘은 디자인의 기본 요소를 기념하고, 놀이와 실험을 장려하며, 재사용 가능한 모듈과 시스템으로서의 디자인을 표현한다. Figma는 이를 통해 복잡한 결과물도 단순한 요소와 규칙의 조합에서 출발한다는 메시지를 전달한다. ## 디자인의 기본 요소를 기념 - 모든 디자인은 점, 선, 도형 같은 기본 요소에서 시작한다. - 복잡한 디자인도 필수적인 구성 요소들의 조합으로 단순화할 수 있다. - Figma는 많은 도구를 제공하기보다, 벡터 네트워크나 프레임처럼 적은 수의 강력한 기능이 서로 잘 결합되는 방식을 중시한다. - 기본 도형과 원색을 활용하는 디자인 철학은 바우하우스 등에서 강조되어 왔으며, 오랜 디자인 전통과 연결된다. - 새 아이콘은 모든 디자인 프로젝트의 출발점인 단순한 형태와 구성 요소를 상징한다. ## 놀이와 실험을 장려 - 기존 문제에 대한 새로운 해결책은 개방적인 태도와 실험, 때로는 구조화된 놀이를 통해 발견할 수 있다. - 아이들이 가지고 노는 블록에서 영감을 받아, 아이콘에 밝은 색상과 단순한 형태를 적용했다. - 놀이를 통해 정답에 얽매이지 않고 더 흥미로운 결과를 탐색할 수 있다는 믿음이 반영됐다. - 브루노 무나리, 앤 랜드와 폴 랜드처럼 주요 디자이너들이 어린이 책 작업을 통해 창의성과 놀이의 가치를 다룬 사례도 언급된다. - 아이콘은 Figma가 사용자에게 개방적이고 즐거운 디자인 경험을 제공하고자 한다는 점을 표현한다. ## 시스템으로서의 디자인 - 디지털 제품은 다양한 화면 크기, 운영체제, 모니터, 네트워크 환경에 대응해야 하므로 일회성 결과물보다 모듈형 시스템이 적합하다. - Figma는 디자인을 개별 아티팩트가 아니라 레시피나 청사진처럼 재사용 가능한 규칙과 구성 요소의 체계로 본다. - 픽셀 기반 디자인은 특정 환경을 벗어나면 쉽게 깨질 수 있지만, 벡터와 규칙 기반 디자인은 다양한 환경에 맞게 확장할 수 있다. - 새 아이콘은 세 가지 단순한 도형과 모듈형 그리드로 구성되어, 시스템 기반 디자인이라는 개념을 직접 보여준다. - 팀 라이브러리 같은 Figma의 기능 역시 여러 사람이 일관된 디자인 시스템을 구축하도록 돕는다는 철학에서 출발한다. Figma의 새 아이콘은 단순한 시각적 표식이 아니라, 기본 요소를 조합하고 자유롭게 실험하며 재사용 가능한 시스템을 만드는 디자인 관점을 압축한 상징이다. 디자인 작업에서는 복잡한 결과물을 처음부터 만들기보다, 단순한 구성 요소와 명확한 규칙을 조합하는 방식이 확장성과 창의성을 함께 높일 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

존 마에다가 State

기술이 보편화되면서 제품 차별화의 핵심이 기능에서 사용자 경험과 감정으로 이동하고 있으며, 이에 따라 제품 디자이너 수요가 급증할 것이라는 글이다. 동시에 디자인 교육은 디지털 제품 환경을 따라가지 못하고, 도구와 업무 흐름도 파편화되어 있다는 문제가 지적된다. 앞으로는 포용적 디자인, 음성 인터페이스, 보안 디자인, 중국의 영향력 확대가 중요해지지만, 도구의 지능화로 디자이너 역할이 줄어들 가능성도 함께 제시된다. ## 제품 디자이너 수요 급증 - 기술이 상품화되어 누구나 앱을 만들 수 있게 되면서, 제품의 성공을 결정하는 요소가 사용자에게 주는 감정과 삶과의 관련성으로 이동했다. - 주요 기업들은 제품 디자이너를 대규모로 채용하고 있다. - Facebook, Google, Amazon의 디자이너 채용은 1년 사이 65% 증가했다. - 대기업들은 최근 2년 동안 35개 이상의 디자인 에이전시를 인수했다. - 디자인은 시각적 장식이 아니라 제품 전략과 사용자 경험을 결정하는 핵심 역량으로 자리 잡고 있다. ## 포용적 디자인의 확대 - 기술 사용자가 대중 전체로 확대되면서 다양한 배경과 경험을 가진 사람을 고려하는 디자인이 필요해졌다. - 성별, 인종, 문화, 능력, 사회적 배경의 차이를 제품 설계에 반영해야 한다. - Airbnb, Slack, Google, Microsoft 등이 포용적 디자인을 주도하는 기업으로 언급된다. ## 디지털 환경을 따라가지 못하는 디자인 교육 - 많은 디자인 학교가 여전히 인쇄 시대의 타이포그래피 등 고전적 디자인 교육에 집중한다. - 웹과 모바일 제품을 설계하는 데 필요한 인터랙션, 프로토타이핑, 디지털 협업 등의 실무 교육은 부족하다. - 설문에 참여한 학생의 3분의 2 이상이 Lynda.com 같은 외부 서비스를 통해 디지털 기술을 독학했다고 답했다. - 대학 교육은 제도와 교육과정의 특성상 변화 속도가 느려, 현업의 수요를 단기간에 따라잡기 어렵다. ## 디자인 중심 투자와 창업 - 벤처캐피털 업계에서 디자인 역량을 핵심 경쟁력으로 보는 시각이 확산되고 있다. - 디자인 중심 기업에 투자하는 것을 목표로 하는 VC가 등장하고 있다. - 조사 대상 디자이너의 80%는 자금만 있다면 창업하겠다고 답했다. - 디자인은 기업의 외부 이미지뿐 아니라 제품 개발과 사업 모델을 이끄는 창업 역량으로 인식되고 있다. ## 디자인 도구의 증가와 업무 흐름의 파편화 - 제품 디자인 도구 시장은 다양한 도구와 작업 방식이 공존하는 ‘개척 시대’에 가깝다. - 아직 하나의 회사가 기획, 디자인, 협업, 개발 전달 과정을 완전히 통합하지 못했다. - 새로운 도구가 계속 등장하면서 선택지는 늘지만, 팀의 업무 방식은 오히려 복잡해질 수 있다. - 도구가 정교해질수록 머신 인텔리전스가 디자인 과정에 더 많이 개입할 가능성이 있다. - 자동화와 인공지능의 발전은 장기적으로 일부 디자이너 업무와 수요를 감소시킬 수 있다. ## 새롭게 부상하는 디자인 영역 - Alexa와 같은 음성 인터페이스를 설계하는 역량이 중요해진다. - 사이버보안 제품과 서비스를 위한 전문 디자이너 수요가 증가한다. - 중국이 기술과 디자인 분야에서 차지하는 영향력이 커질 것으로 전망된다. - 제품 디자이너는 화면 기반 UI뿐 아니라 음성, 보안, 글로벌 시장을 아우르는 역량을 갖춰야 한다. 글은 전반적으로 기술 업계 디자인의 미래를 낙관적으로 전망하지만, 교육 시스템의 지연과 도구·워크플로의 분열을 주요 과제로 남긴다. 실무적으로는 디자이너가 디지털 제품 역량과 포용적 설계 능력을 함께 익히고, 조직은 도구를 늘리기보다 협업 과정과 업무 흐름을 통합하는 데 집중하는 것이 바람직하다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Figma의 팀 라이

Figma의 Team Libraries는 여러 파일과 팀원이 동일한 컴포넌트를 공유하고 동기화하도록 해 디자인 시스템 구축을 돕는 기능이다. 기존처럼 파일마다 심볼을 복사해 수동으로 교체하는 방식의 불일치 문제를 해결하고, 컴포넌트를 게시·삽입·업데이트하는 흐름으로 단일 진실 공급원을 유지한다. 이를 통해 디자인 시스템을 더 빠르고 일관되게 확장할 수 있다. ## 기존 디자인 도구의 한계 - 전통적인 디자인 도구는 사진 편집, 일러스트 제작, 정적인 화면 구성에 초점을 맞췄다. - 실제 애플리케이션의 반응형 동작이나 플랫폼의 제약 조건을 충분히 표현하지 못했다. - 디자인 시스템을 하나의 마스터 파일에서 관리하더라도 컴포넌트를 다른 파일로 복사하면 서로 다른 버전이 된다. - 작은 변경도 여러 문서를 찾아 각 심볼과 오버라이드를 수동으로 수정해야 했다. - Facebook, Google, Airbnb 같은 기업은 이러한 한계를 보완하기 위해 자체 디자인 시스템 도구와 전담 인력을 구축했다. ## Figma가 제시한 기반 - Figma는 시각 디자인과 동적인 사용자 인터페이스 설계를 연결하는 것을 목표로 했다. - 벡터 편집, 시스템 동작에 대응하는 제약 조건, 재사용 가능한 동적 컴포넌트를 제공해 디자인 시스템의 기반을 마련했다. - Team Libraries를 통해 이 컴포넌트를 여러 파일과 팀원 사이에서 공유할 수 있게 했다. - 웹 기반 구조 덕분에 파일 간 동기화 지연이 거의 없고, 여러 기기와 플랫폼을 위한 레이아웃을 일관된 규칙으로 설계할 수 있다. ## 엔지니어링 원칙을 반영한 디자인 시스템 - React 같은 프레임워크처럼 애플리케이션을 명확히 정의된 작은 단위로 구성하는 방식을 디자인에도 적용했다. - 재사용 가능하고 유지보수하기 쉬운 구조는 제품 개발 주기 전체의 효율을 높인다. - 다만 프로그래밍 개념을 그대로 가져오기보다 디자이너가 쉽게 사용할 수 있도록 인터페이스와 작업 흐름을 단순화했다. ## 게시(Publish): 단일 진실 공급원 만들기 - 파일에서 컴포넌트를 선택하고 Inspector의 **Add to Library**를 눌러 라이브러리에 추가한다. - 여러 컴포넌트를 선택한 뒤 변경 사항을 검토하고 팀 라이브러리에 게시한다. - 라이브러리와 원본 파일을 분리해 디자인 시스템의 변경 권한을 통제할 수 있다. - 원본 파일에 편집 권한이 있는 사람만 소스 컴포넌트를 수정할 수 있다. - 원본 파일을 볼 수 있는 사람은 게시된 컴포넌트를 사용할 수 있지만 규칙 자체를 변경할 수는 없다. - 예를 들어 프로덕션 디자이너는 아이콘을, 브랜드 디자이너는 색상 문서를 관리하고 다른 팀원은 이를 재사용할 수 있다. ## 삽입(Insert): 여러 파일에서 컴포넌트 재사용 - 라이브러리에 게시된 컴포넌트는 원본 파일을 볼 권한이 있는 팀원에게 제공된다. - 각 파일의 툴바에서 컴포넌트 도구를 선택해 공유 컴포넌트를 삽입한다. - 컴포넌트 안에 다른 컴포넌트를 중첩할 수 있다. - 개별 요소로 모듈을 구성한 뒤, 이를 더 복잡한 화면과 사용자 흐름에서 재사용할 수 있다. - 깊게 중첩된 컴포넌트도 원본과 연결되므로 단일 진실 공급원을 예측 가능하게 유지할 수 있다. ## 업데이트(Update): 변경 사항의 동기화 - 브랜드 가이드나 UI 자산을 변경할 때 기존 컴포넌트를 수정하고 다시 게시한다. - 재게시 전 확인 단계를 거치며, 이전 버전과 무엇이 달라졌는지 시각적 diff로 확인할 수 있다. - 원본 파일에서 컴포넌트를 삭제한 뒤 게시하면 팀 라이브러리에서도 해당 컴포넌트가 사라진다. - 따라서 팀에는 현재 유효한 디자인 시스템 요소만 공유된다. - 공유 컴포넌트의 변경이 여러 탐색 작업에 영향을 줄 수 있으므로, 작업 손실을 막기 위한 추가 확인 절차를 둔다. ## 실용적인 결론 Team Libraries는 디자인 시스템을 복사본이 아니라 연결된 컴포넌트 구조로 관리하게 해준다. 팀에서는 원본 파일의 편집 권한을 제한하고, 색상·아이콘·버튼·복합 모듈을 라이브러리로 게시한 뒤 변경 사항을 검토하며 재게시하는 운영 방식을 마련하는 것이 좋다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

피그마 컴포넌트

Figma의 컴포넌트는 소프트웨어 개발의 composition, inheritance, override 개념을 디자인에 적용해 복잡한 UI를 일관되고 효율적으로 설계하도록 돕는다. 원본 컴포넌트를 수정하면 모든 인스턴스에 변경 사항이 반영되지만, 각 인스턴스는 필요한 속성을 독립적으로 재정의할 수 있다. 이를 통해 반복 작업을 줄이면서도 디자인 시스템의 일관성과 창의적인 변형을 동시에 확보할 수 있다. ## 디자인에 컴포넌트를 적용하는 이유 - 복잡한 화면을 더 작은 재사용 단위로 나누어 이해하고 구성할 수 있다. - 주소록의 연락처 행처럼 반복되는 UI를 한 번만 설계한 뒤 여러 곳에서 재사용할 수 있다. - 동일한 컴포넌트를 사용하면 글자 크기, 간격, 아이콘, 그래픽 등의 시각적 일관성을 유지하기 쉽다. - 컴포넌트는 단순한 복사본이 아니라 동일한 원본을 참조하는 인스턴스이므로, 원본 변경 사항이 관련 디자인에 자동으로 반영된다. ## Figma가 지향한 컴포넌트 설계 - 초보자도 쉽게 배울 수 있어야 한다. - 고급 사용자에게 충분히 강력해야 한다. - 디자인 과정 전반에서 유연하게 활용할 수 있어야 한다. - 체계적으로 디자인하더라도 창의적인 작업을 방해하거나 불필요한 작업 절차를 늘리지 않아야 한다. - 디자인 시스템 구축이 속도와 일관성을 높이는 수단이 되어야 하며, 새로운 문제를 해결하는 데 제약이 되어서는 안 된다. ## 컴포넌트와 인스턴스의 동작 방식 - 선택한 프레임이나 객체에 “Create Component”를 적용하면 컴포넌트가 생성된다. - 컴포넌트를 복제하거나 Alt 키로 드래그하거나 복사·붙여넣기하면 일반 복사본이 아니라 인스턴스가 만들어진다. - 인스턴스는 캔버스에서 위치를 독립적으로 가질 수 있지만, 기본적으로 원본 컴포넌트의 구조와 속성을 공유한다. - 원본 컴포넌트의 변경 사항은 모든 인스턴스에 즉시 반영된다. - 인스턴스 내부의 일부 속성은 관리와 유지보수를 위해 제한될 수 있으며, 특히 내부 객체의 위치와 크기 같은 속성이 대표적이다. ## 스타일 및 속성 오버라이드 - 인스턴스에서 변경한 값은 원본을 대체하는 것이 아니라 해당 인스턴스에만 적용되는 오버라이드로 취급된다. - 예를 들어 특정 인스턴스의 채우기 색상을 진회색으로 바꾸거나, 다른 인스턴스의 선 색상과 두께를 빨간색·6px로 설정할 수 있다. - 원본 컴포넌트를 수정해도 인스턴스에서 직접 재정의한 속성은 유지된다. - 재정의하지 않은 속성은 원본 컴포넌트의 최신 상태를 계속 반영한다. - 인스턴스 내부의 하위 레이어와 그 속성도 오버라이드할 수 있어 다양한 변형을 만들 수 있다. - 변경 사항을 제거하려면 “Reset Instance”를 사용해 원본 컴포넌트의 상태로 되돌릴 수 있다. ## 중첩 컴포넌트로 복잡한 UI 구성 - 컴포넌트 안에 다른 컴포넌트의 인스턴스를 포함할 수 있다. - 여러 인스턴스를 조합해 더 복잡한 동작과 UI 구조를 만들 수 있다. - 기존 인스턴스를 포함한 객체를 다시 컴포넌트로 만들 수도 있다. - 작은 단위의 컴포넌트를 계층적으로 조합하면 대규모 디자인 시스템을 관리하기 쉬워진다. ## 제약 조건과의 결합 - 컴포넌트는 Figma의 다른 기능과 함께 사용할 때 더 큰 표현력을 갖는다. - 제약 조건을 적용하면 화면 크기나 객체 위치가 바뀔 때 내부 요소가 어떻게 반응할지 정의할 수 있다. - 따라서 단순히 같은 UI를 복제하는 것을 넘어, 다양한 크기와 상황에 대응하는 반응형 디자인을 구성할 수 있다. 실무에서는 반복되는 UI를 먼저 컴포넌트로 만들고, 인스턴스별 차이는 오버라이드로 최소한만 적용하는 방식이 적합하다. 공통 구조와 스타일은 원본에서 관리하고, 개별 화면의 예외적인 요구만 인스턴스에서 변경하면 유지보수성과 디자인 일관성을 함께 확보할 수 있다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

Figma의 멀티플레이어 편집

Figma는 파일을 내려받아 로컬에서 편집한 뒤 전체 문서를 저장하는 방식이 협업 환경과 근본적으로 맞지 않는다는 문제를 해결하기 위해 실시간 멀티플레이어 편집을 도입했다. 사용자의 변경 사항을 서버에 전송하고 실시간으로 다른 사용자에게 브로드캐스트함으로써 최신 버전 보장, 덮어쓰기 방지, 원격 협업과 리뷰 개선을实现했다. 구현 과정에서는 실행 취소·다시 실행, 충돌 해결, 성능과 파일 형식 개선 등 복잡한 기술적 과제를 해결해야 했다. ## 기존 저장 방식의 한계 - 초기 Figma는 문서를 브라우저로 내려받아 로컬에서 편집하고, 일정 주기마다 전체 문서를 다시 업로드했다. - 개인 사용자에게는 구현과 이해가 쉬웠고, Dropbox 같은 동기화 서비스와도 유사해 익숙한 방식이었다. - 하지만 팀 기능이 추가되면서 다음 문제가 발생했다. - 여러 사용자가 서로의 작업을 모르고 저장해 변경 사항을 덮어씀 - 저장이 완료되기 전에 공유한 링크를 열면 이전 버전이 표시됨 - 버전 기록에는 모든 저장이 남았지만, 협업 중 발생하는 혼란 자체를 막지는 못함 - 한 명씩 편집권을 넘기는 ‘baton-passing’ 방식도 검토했지만, 동시 편집만큼 단순하고 자연스럽지는 않았다. ## 실시간 멀티플레이어 모델 - 각 사용자의 변경 사항을 서버로 보내고, 서버가 이를 다른 사용자에게 실시간으로 전달한다. - 서로 다른 객체나 속성에 대한 변경은 독립적으로 처리한다. - 동일 객체의 동일 속성을 동시에 수정하면 최신 변경을 적용하는 방식으로 충돌을 해결한다. - 이 구조를 통해 사용자는 항상 최신 문서를 보고, 편집 중인 파일 버전을 따로 확인하거나 충돌을 조정할 필요가 줄어든다. - Figma는 이 기능이 협동 멀티플레이어 게임과 비슷하다는 점에서 “multiplayer”라는 이름을 붙였다. ## 멀티플레이어 실행 취소와 다시 실행 - 단일 사용자 환경에서는 실행 취소가 “내가 방금 한 작업을 되돌리는 것”으로 정의되지만, 여러 사용자가 같은 객체를 수정하면 의미가 복잡해진다. - 다른 사용자의 변경 이후 실행 취소를 수행할 때 자신의 과거 변경을 다시 덮어써서는 안 된다. - Figma는 다음 원칙을 기준으로 동작을 설계했다. - 사용자가 여러 작업을 실행 취소한다. - 중간 상태에서 무언가를 복사한다. - 다시 실행해 현재 상태로 돌아온다. - 이 과정만으로 문서 내용이 달라져서는 안 된다. - 단순히 과거 상태를 복원하는 방식이 아니라, 다른 사용자의 후속 변경을 보존하는 방향으로 redo를 설계해야 했다. ## 충돌 해결의 복잡성 - 한 객체의 여러 속성이 함께 변경되어야 하는 경우, 특정 속성 하나의 변경만으로 전체 상태를 덮어쓰지 않도록 세밀한 병합이 필요했다. - 겉보기에는 한 객체만 수정하는 작업이 실제로는 다른 객체에도 영향을 줄 수 있었다. - 이 때문에 서로 무관해 보이는 객체를 두 사용자가 동시에 편집해도 충돌이 발생할 수 있었다. - 일부 레이아웃 기능은 이러한 협업 상황에 맞게 동작 방식을 수정해야 했다. - 단순한 “최신 변경 우선”만으로는 충분하지 않고, 작업 간 의존성과 여러 객체에 걸친 부수 효과까지 고려해야 했다. ## 성능과 파일 형식 개선 - 전문 디자인 도구 수준의 실시간 협업을 위해 지속적인 측정과 성능 튜닝이 필요했다. - 기존 파일 형식은 작은 변경 사항을 효율적으로 표현하기에 적합하지 않아 파일 포맷 자체를 개편했다. - 전체 문서를 반복해서 전송하는 대신, 작은 변경 메시지를 빠르게 전달하고 처리하는 것이 중요했다. - 멀티플레이어 기능은 에디터의 핵심 구조에 영향을 주는 대규모 기술 투자였지만, 향후 협업 기능을 위한 기반이 되었다. ## 협업 경험을 단순하게 만든 UI - 멀티플레이어는 기능을 추가했지만, 기존에 사용자들이 협업을 위해 사용하던 복잡한 우회 절차를 없애 UX를 오히려 단순하게 만들었다. - 현재 문서에 참여 중인 사용자의 마우스 커서와 선택 영역을 표시한다. - 누가 문서에 있는지 확인할 수 있다. - 다른 사람이 어느 부분을 작업 중인지 알 수 있다. - 커서를 특정 객체 옆에 두어 다른 사람의 주의를 끌거나 대상을 가리킬 수 있다. - 모든 사용자는 화면 오른쪽 위에 아바타로 표시된다. - 아바타는 참여자 확인뿐 아니라 프레젠테이션에도 활용된다. - Figma는 한 명의 발표자를 강제하고 모두가 그 사람을 따라가게 하는 방식을 시험했지만, 사용자의 선택권을 제한한다고 판단했다. - 대신 다른 사용자의 아바타를 클릭해 발표를 따라가는 선택적 방식이 더 자연스럽다고 보았다. ## 실용적인 결론 실시간 협업 기능은 단순히 변경 사항을 동기화하는 문제가 아니라, 실행 취소·충돌 병합·파일 포맷·레이아웃 모델·사용자 인터페이스까지 함께 설계해야 하는 시스템 문제다. 협업 제품을 만들 때는 기존의 개인용 저장 모델에 기능을 덧붙이기보다, 처음부터 동시 편집과 사용자 간 맥락 공유를 핵심 구조로 고려하는 것이 바람직하다.

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