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

빌드 비하인드:

Figma는 FigJam의 플러그인·위젯 생태계를 외부 개발자에게 개방하며 새로운 협업과 창작 가능성을 넓히고 있다. 개발자 Tru Narla는 위젯 제작 경험을 바탕으로 사운드보드 위젯을 만들었고, 작은 아이디어를 실제로 출시하는 과정에서 커뮤니티와 스트리밍의 도움을 얻었다. 그녀는 앞으로 인터랙티브 피아노와 멀티플레이어 게임 등으로 FigJam의 상호작용성을 확장하고자 한다. ## Soundboard 위젯의 목적 - Tru Narla는 Square의 소프트웨어 엔지니어로 일하며, 개인 프로젝트와 프로토타이핑에도 Figma를 자주 사용한다. - 그녀가 만든 **Soundboard**는 FigJam 보드에 재미있는 소리를 추가하는 위젯이다. - 향후 사용자가 직접 오디오를 녹음하거나 미리 준비된 소리를 선택하는 기능을 추가하고 싶어 한다. - 기존에 오디오 중심의 FigJam 위젯이 거의 없다는 점에서 아이디어를 얻었다. ## 문서와 커뮤니티를 통한 개발 - 공식 문서를 읽고 데모 프로젝트를 따라 하면서 개발을 시작했다. - 초기에는 시행착오를 반복하며 기능을 구현했다. - 위젯 API의 제약으로 오디오 녹음 기능을 넣을 수 없어 프로젝트 범위를 축소했다. - 비공개 Slack 채널에서 다른 위젯 개발자들과 코드를 공유하고 버그를 함께 해결한 것이 큰 도움이 됐다. - 위젯 개발은 예상보다 쉽고 재미있었으며, 제한적인 부분이 있어도 현재 제공되는 기능만으로 다양한 프로젝트를 만들 수 있다고 평가했다. ## 아이디어를 실행하고 출시한 계기 - Tru는 이전에도 사이드 프로젝트를 자주 시작했지만 완성하거나 출시하지 못한 경우가 많았다. - 비공개 위젯 개발자 커뮤니티에서 다른 사람들의 작업을 보며 동기를 얻었다. - 자신이 직접 사용할 만한 것을 만들고 싶다는 생각으로 사운드 관련 프로젝트를 시작했다. - 개발 과정을 Twitch에서 스트리밍한 것이 프로젝트를 끝까지 완성하는 데 도움이 됐다. - 아이디어가 떠오르면 바로 메모하고, Twitter와 일상생활에서 영감을 얻는다고 설명했다. ## FigJam에서 확장되는 상호작용 - 다음 프로젝트로 사용자가 건반을 클릭해 소리를 내거나, 키보드 단축키로 특정 음을 연주할 수 있는 **인터랙티브 피아노**를 개발 중이다. - 장기적으로는 구현 난도가 높은 멀티플레이어 게임도 만들고 싶어 한다. - FigJam의 플러그인과 위젯이 협업 보드에 재미와 상호작용을 더하는 방식에 주목한다. - 개발·시스템 설계를 위한 코드 임베드 기능에도 관심이 있으며, 코드 설명이나 튜토리얼을 FigJam에 작성하는 활용을 기대한다. - 실행 가능한 코드를 샌드박스에서 직접 보여주는 기능도 있으면 유용할 것이라고 제안한다. ## 개방형 플랫폼의 가능성 - FigJam이 외부 개발자에게 API를 공개하면서 개인 개발자도 새로운 도구를 제작하고 배포할 수 있게 됐다. - 다른 개발자들의 플러그인과 위젯이 다시 새로운 아이디어를 자극하는 선순환이 형성되고 있다. - Tru는 Figma와 FigJam에 아직 개발되지 않은 가능성이 많다는 점을 가장 기대되는 부분으로 꼽는다. - Figma Community를 통해 다양한 위젯과 플러그인을 공유하고 탐색할 수 있다. 작은 기능의 프로토타입이라도 직접 사용해 보고 싶은 문제에서 출발해 빠르게 만들고 공개하는 것이 좋은 출발점이다. 공식 문서뿐 아니라 개발자 커뮤니티와 공개 과정을 활용하면 기술적 제약을 줄이고 프로젝트를 완성할 가능성을 높일 수 있다.

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

FigmafigjamslackAPI+4

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

Figma의 새로운 소식:

Figma의 2021년 10월 업데이트는 협업 방식을 유연하게 만들고, 반복적인 작업을 자동화하며, 아이디어를 더 빠르게 실험하도록 돕는 데 초점을 맞췄다. FigJam에는 위젯·플러그인·오픈 세션이 추가됐고, Figma 프로토타이핑에는 인터랙티브 컴포넌트와 상호작용 관리 기능이 도입됐다. 또한 대규모 디자인 시스템을 지원하기 위한 브랜칭도 소개됐다. ## FigJam 협업 기능 확장 ### 위젯으로 협업 공간 사용자화 - FigJam 파일에 위젯을 클릭해 추가하고, 팀의 협업 방식에 맞게 보드를 구성할 수 있다. - **Photo Booth**를 사용하면 보드에 셀카를 추가할 수 있다. - **Alignment Scale**로 팀원들의 현재 상태나 의견을 확인할 수 있다. - **Org Chart**를 활용해 팀 구조를 시각화할 수 있다. ### 플러그인으로 작업 속도 향상 - 위젯이 협업 자체를 위한 기능이라면, 플러그인은 아이디어를 표현하고 정리하는 작업을 빠르게 해준다. - **Tour Guide**는 FigJam 보드를 슬라이드 쇼 형식의 프레젠테이션으로 변환한다. - **Color Picker**는 스티커와 도형에 사용할 색상 선택지를 확장한다. - **Unsplash** 플러그인으로 이미지 자료를 바로 검색하고 삽입할 수 있다. ### 툴바와 오픈 세션 - FigJam 파일의 툴바에서 플러그인과 위젯을 직접 탐색할 수 있다. - 브레인스토밍, 워크숍, 리서치 등 목적별 **FigJam 템플릿**을 제공한다. - 개발자 협업을 위해 **코드 블록**과 새로운 도형 및 고급 다이어그램 기능을 추가했다. - **Open sessions**를 사용하면 방문자가 계정을 만들지 않아도 FigJam 파일에 참여할 수 있다. ## 인터랙티브 컴포넌트로 프로토타이핑 개선 ### 재사용 가능한 인터랙티브 컴포넌트 - **인터랙티브 컴포넌트**를 사용하면 재사용 가능한 UI 요소에 상호작용을 정의할 수 있다. - 동일한 요소의 상태와 동작을 반복해서 연결하는 작업이 줄어든다. - 프로토타입 제작에 드는 시간을 줄이고, 팀이 디자인 실험과 반복 개선에 더 집중할 수 있다. ### 상속된 상호작용 숨기기 - 컴포넌트 인스턴스에서는 메인 컴포넌트로부터 상속된 상호작용을 기본적으로 숨길 수 있다. - 복잡한 프로토타입에서도 현재 인스턴스에 직접 설정된 동작을 쉽게 파악할 수 있다. - 결과적으로 프로토타입 편집과 개발자 핸드오프의 가독성이 개선된다. ### 기타 프로토타이핑 업데이트 - `Shift + E` 단축키로 디자인 탭과 프로토타입 탭을 전환할 수 있다. - 캔버스에서 모든 사용자가 프로토타입 상호작용을 확인하고 탐색할 수 있다. - 사용자 테스트 시 뷰어의 기본 키보드 탐색을 비활성화할 수 있다. - 프로토타입 상호작용을 복사하고 붙여넣어 반복 설정을 줄일 수 있다. ## 대규모 디자인 시스템 지원 - Figma는 디자인 시스템의 일관성을 유지하면서도 새로운 아이디어를 실험할 수 있는 환경을 제공하는 것을 목표로 한다. - 이번 업데이트에서는 여러 디자인 방향을 독립적으로 실험하고 관리할 수 있는 **브랜칭(Branching)** 기능을 소개했다. - 브랜칭에 대한 구체적인 동작과 활용 방법은 별도의 상세 글에서 설명한다. 이번 업데이트는 FigJam에서는 협업 진입 장벽을 낮추고, Figma에서는 프로토타이핑 반복 작업을 줄이는 방향으로 구성됐다. 팀 단위로 작업한다면 FigJam의 템플릿·위젯·오픈 세션을 활용하고, 디자인 시스템을 운영한다면 인터랙티브 컴포넌트와 브랜칭을 도입하는 것이 실용적이다.

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

Figma디자인 시스템프로토타이핑figjam+4

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

인터랙티브 컴포넌

Figma는 인터랙티브 컴포넌트를 통해 시각 디자인과 프로토타이핑 사이의 간극을 줄이고, 더 적은 작업으로 실제 동작에 가까운 디자인을 만들 수 있도록 했다. 컴포넌트의 여러 variant 사이에 상호작용과 애니메이션을 정의하면 인스턴스가 프로토타이핑 모드에서 바로 작동하며, 팀 단위의 공유와 반복 작업도 쉬워진다. 또한 단축키, 캔버스 정리, 인터랙션 복사·붙여넣기 등 프로토타이핑을 빠르게 만드는 기능도 함께 제공한다. ## 인터랙티브 컴포넌트의 목적 - 기존에는 시각 디자인과 인터랙션 설계를 위해 도구를 전환하거나 프레임을 수동으로 연결해야 했다. - 이런 번거로움 때문에 프로토타이핑을 생략하면 개발 단계에서 추가 작업이 발생하거나 사용자 경험 목표를 놓칠 수 있었다. - 인터랙티브 컴포넌트는 디자인 과정에서 시각적 형태와 동작을 함께 탐색하도록 지원한다. - 2021년 10월 기준 베타를 종료하고 모든 사용자가 이용할 수 있게 되었다. ## 컴포넌트 variant 기반 상호작용 - 컴포넌트 세트 안의 여러 variant 사이에 전환, 상호작용, 애니메이션을 정의할 수 있다. - 해당 컴포넌트의 인스턴스는 프로토타이핑 모드에서 별도의 연결 작업 없이 즉시 동작한다. - 체크박스 선택, 아코디언 메뉴 열기 등 여러 UI 상태를 하나의 컴포넌트 구조로 표현할 수 있다. ## 프로토타입 복잡성 감소 - 과거에는 상태별로 여러 프레임을 만들어야 했지만, 인터랙티브 컴포넌트를 사용하면 하나의 프레임 안에서 상태와 동작을 관리할 수 있다. - 프레임 수가 크게 줄어들어 프로토타입을 만들고 수정하기 쉬워진다. - AWS 사례에서는 일부 프로젝트의 프레임 수가 10분의 1 이하로 감소했다고 설명한다. ## 프로토타입 제작 속도 향상 - 사용된 위치 바로 옆에서 인터랙티브 컴포넌트의 모든 상태를 편집할 수 있다. - 기존 작업 흐름을 벗어나지 않고 컴포넌트를 복제해 새로운 버전을 실험할 수 있다. - 동일한 버튼 수십~수백 개에 hover 상태를 반복 설정하는 대신, 컴포넌트에 동작을 한 번 정의해 재사용할 수 있다. ## 디자인 시스템과 팀 협업 - 인터랙티브 컴포넌트는 라이브러리를 통해 팀 전체에 공유할 수 있다. - 팀원은 라이브러리에서 컴포넌트를 한 번의 클릭으로 가져와 프로토타입에 사용할 수 있다. - 인터랙션이 디자인 시스템에 내장되므로 Figma에 익숙하지 않은 구성원도 적은 도움으로 동작하는 프로토타입을 만들 수 있다. - 베타 기간 동안 성능, 로딩 시간, 안정성이 개선되었고 관찰 모드와 오토 레이아웃 지원도 추가되었다. ## 일상적인 작업을 빠르게 만드는 기능 - **디자인·프로토타이핑 탭 전환** - `Shift + E` 단축키로 디자인 탭과 프로토타이핑 탭을 빠르게 전환할 수 있다. - 오브젝트 편집과 사용자 경험에 대한 동작 설계를 자연스럽게 오갈 수 있다. - **캔버스 정리** - 프로토타입 연결을 나타내는 파란색 화살표인 “noodle”이 지나치게 많아지는 문제를 개선했다. - 메인 컴포넌트에서 상속된 인스턴스의 인터랙션은 캔버스에서 숨겨 복잡한 프로토타입을 더 쉽게 파악할 수 있다. - **인터랙션 복사·붙여넣기** - 프로토타입 인터랙션을 복사해 다른 프레임에 붙여넣을 수 있다. - 반복적인 연결 작업을 줄여 프로토타입 제작 속도를 높인다. 실무에서는 자주 재사용되는 버튼, 입력창, 메뉴, 토글 등의 상태와 전환을 인터랙티브 컴포넌트로 라이브러리화하는 것이 효과적이다. 그러면 디자이너는 화면별 연결보다 사용자 흐름과 인터랙션 검증에 집중할 수 있고, 팀 전체가 일관된 동작을 사용하게 된다.

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

Figma디자인 시스템프로토타이핑auto-layout+2

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

오픈 세션: 언제

FigJam의 **Open sessions**는 계정이 없는 사람도 초대 링크만으로 회의나 워크숍에 참여할 수 있게 하는 기능이다. 회원가입 절차를 없애 참여 장벽을 낮추고, 외부 파트너·고객·지원자 등 일회성 참가자도 즉시 협업할 수 있도록 설계됐다. 세션은 기본적으로 24시간 후 종료되고 방문자는 제거되므로, 편의성과 접근 제어를 함께 제공한다. ## 계정 없이 참여하는 협업 세션 - 방문자는 FigJam 계정을 만들거나 별도 설정을 하지 않고 파일에 참여할 수 있다. - 링크를 받은 참가자는 즉시 보드에 들어와 아이디어 작성, 피드백, 공동 작업을 시작할 수 있다. - 회원가입으로 인해 워크숍이나 인터뷰가 지연되는 문제를 줄이는 것이 주요 목적이다. - 팀 구성원뿐 아니라 외부 고객, 협력사, 지원자, 일회성 참가자까지 참여 대상으로 삼는다. ## 세션 수명과 접근 제어 - Open session은 기본적으로 방문자를 제거하며, 세션은 24시간 후 자동 종료된다. - 주최자는 필요에 따라 세션을 24시간 이전에 직접 닫을 수 있다. - 같은 FigJam 파일에 대해 새로운 Open session을 다시 시작할 수 있다. - 따라서 지속적인 프로젝트 협업보다는 특정 행사를 위한 일회성 협업에 적합하다. ## 워크숍과 사용자 리서치 - 고객 워크숍이나 원격 리서치 세션에서 참가자가 가입하지 않고 바로 참여할 수 있다. - 진행자는 사전에 FigJam 링크를 공유해 참가자가 별도 준비 없이 세션에 들어오도록 할 수 있다. - 대규모 그룹과 일대일 세션 모두에 활용할 수 있다. ## 인터뷰와 기술 평가 - 지원자에게 인터뷰 전에 FigJam 링크를 전달해 작업 공간과 진행 방식을 미리 확인하게 할 수 있다. - 지원자는 계정 생성 없이 자신의 작업물이나 아이디어를 보여줄 수 있다. - 기술 인터뷰에서는 CoderPad 위젯을 함께 사용해 코딩 과제를 진행할 수 있다. ## 부서 간 회의와 브레인스토밍 - 여러 부서의 이해관계자를 회의에 쉽게 초대할 수 있다. - 우선순위 공유, 프로젝트 회고, 브레인스토밍, 리더 피드백 등에 활용할 수 있다. - 회사 내 누구나 간편하게 참여할 수 있어 부서 간 협업의 진입 장벽을 낮춘다. ## 제공 계획 - FigJam 베타 기간에는 모든 요금제에서 Open sessions를 사용할 수 있었다. - 2022년 2월 1일부터는 FigJam Professional 및 Organization 요금제의 기능으로 제공될 예정이었다. - Figma는 사용 방법을 익힐 수 있도록 워크숍, 회의, 인터뷰용 플레이그라운드 파일과 데모를 제공했다. 실용적으로는 고객 워크숍, 채용 인터뷰, 단발성 회의처럼 참가자가 반복적으로 서비스를 사용할 필요가 없는 상황에 Open sessions를 활용하는 것이 적합하다. 반대로 장기적인 협업이나 민감한 자료를 다루는 경우에는 계정 기반 접근과 별도의 권한 관리가 더 안전하다.

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

Figmafigjampluginswidgets+2

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

새로운 FigJam 요금제와

FigJam은 조직 전체가 쉽게 참여할 수 있는 협업 화이트보드로 확장하기 위해 가격 체계와 플랫폼 개방성을 함께 개편한다. 2022년 2월부터 무료 Starter 플랜과 에디터당 월 3~5달러의 유료 플랜을 제공하고, 로그인 없이 참여 가능한 Open sessions를 도입한다. 또한 위젯·플러그인·임베드·새 도형과 코드 블록 등을 통해 FigJam을 팀별 업무 방식에 맞게 확장하는 것이 핵심이다. ## 접근성을 높인 새로운 가격 정책 - 베타 종료일인 2022년 2월 1일부터 FigJam은 무료 및 유료 플랜으로 운영된다. - **Starter 플랜** - 개인 화이트보드 무제한 - 공유 화이트보드 3개 - 공유 보드에는 협업자 무제한 초대 가능 - **FigJam Professional**은 에디터당 월 3달러로 조직 전체에서 공유 화이트보드를 무제한 사용할 수 있다. - **FigJam Organization**은 에디터당 월 5달러이며, 조직 단위 사용을 위한 유료 옵션이다. - 팀 규모나 협업 방식이 서로 다른 만큼, 개인·소규모 팀부터 대규모 조직까지 선택할 수 있는 구조를 지향한다. ## 로그인 없이 참여하는 Open sessions - Open sessions를 이용하면 누구나 FigJam 세션에 초대할 수 있다. - 초대받은 사람은 로그인 없이 최대 24시간 동안 잼 세션에 참여할 수 있다. - 일회성 리서치 워크숍, 기획 회의, 고객 인터뷰처럼 외부 참가자가 많은 상황에서 진입 장벽을 낮춘다. - 기존 계정 중심 협업에서 벗어나 디지털 워크숍이나 대면 회의에 가까운 참여 경험을 제공한다. ## 위젯으로 협업 공간 맞춤화 위젯은 FigJam 보드 안에서 팀 활동과 협업 기능을 직접 제공하는 확장 요소다. - **팀 유대감 형성** - Donut은 아이스브레이커 질문, 그림 그리기 게임 등을 제공한다. - Rock Paper Scissors, Connect Four 같은 간단한 게임으로 팀 분위기를 환기할 수 있다. - **회의 진행 지원** - Simple Vote로 브레인스토밍 결과에 대한 투표와 피드백을 수집할 수 있다. - Alignment Scale로 참가자들이 같은 방향을 보고 있는지 확인할 수 있다. - **생산성 향상** - Table 위젯으로 Google Sheets 데이터를 가져와 표를 만들 수 있다. - Stark for FigJam은 접근성 체크리스트와 역할별 설명을 제공한다. - Org Chart로 현재 조직 구조를 시각화하거나 향후 인력 계획을 세울 수 있다. - 향후 칸반 보드, 타임라인, 인라인 텍스트 편집, 향상된 임베드 미디어 지원 등으로 위젯 생태계를 확장할 계획이다. ## 플러그인으로 작업 속도 향상 - 위젯이 협업과 상호작용에 초점을 둔다면, 플러그인은 아이디어를 더 빠르게 만들고 변환하는 데 사용된다. - 당시 40개 이상의 플러그인이 제공되며, FigJam의 제작 및 자동화 가능성을 넓혔다. - Vimeo는 화면 녹화와 음성 설명을 FigJam 파일에 직접 추가하는 Vimeo Record 플러그인을 개발 중이었다. - Tour Guide를 사용하면 애니메이션 프레젠테이션을 만들 수 있다. - Create Sticky from Text는 텍스트를 자동으로 스티키 노트로 변환한다. - Stamp Counter는 투표 수를 빠르게 집계한다. - 플러그인을 통해 다른 도구로 전환하지 않고도 기록, 변환, 발표, 집계 작업을 수행할 수 있다. ## 더 개방적인 FigJam 플랫폼 - Figma는 개발자 커뮤니티와 함께 FigJam 위젯·플러그인 생태계를 구축하려 한다. - 폐쇄적인 기본 기능만 제공하는 대신, 외부 개발자가 팀별 요구사항에 맞는 기능을 만들 수 있도록 플랫폼을 개방한다. - 사용자와 개발자가 함께 어떤 협업 방식이 필요한지 실험하고, 그 결과를 제품에 반영하는 방향이다. - 임베드, 동영상과 문서 추가, 새로운 도형과 코드 블록, FigJam 툴바에서 바로 접근하는 템플릿 등도 이러한 확장 전략의 일부다. ## 실용적인 결론 FigJam은 단순한 온라인 화이트보드가 아니라 회의 진행, 아이디어 정리, 조직 설계, 접근성 관리까지 한 공간에서 처리하는 협업 플랫폼으로 발전하려 한다. 소규모 팀은 무료 플랜과 Open sessions로 빠르게 시작하고, 반복적인 업무나 조직별 요구가 있다면 위젯과 플러그인을 활용하는 것이 효과적이다.

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

Figmafigjampluginswidgets+2

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

LiveGraph: Figma의 실시간

Figma는 실시간 협업 제품에 필요한 데이터를 안정적으로 제공하기 위해 Postgres 위에 GraphQL 기반의 실시간 데이터 계층인 LiveGraph를 구축했다. LiveGraph는 프론트엔드가 선언적으로 데이터를 구독하면 데이터베이스 복제 스트림을 읽어 밀리초 단위로 변경 사항을 반영한다. 이를 통해 수동 이벤트 메시지와 클라이언트 상태 동기화의 복잡성을 줄이고, 대규모 실시간 데이터 구독을 지원한다. ## Figma에서 실시간 데이터가 필요한 이유 - 협업자가 파일을 추가하거나 권한을 변경하면 다른 사용자 화면에도 새로고침 없이 즉시 반영되어야 한다. - 따라서 서버에서 데이터를 한 번 가져오는 것만으로는 부족하며, 클라이언트가 현재 관심 있는 데이터의 변경 사항을 계속 받아야 한다. - 인프라 팀의 목표는 제품 개발자가 데이터 전파 방식이나 WebSocket 세부 구현을 직접 관리하지 않고도 실시간 뷰를 만들 수 있게 하는 것이었다. ## 기존 방식의 한계 - 초기에는 React 프론트엔드가 Ruby HTTP 엔드포인트에서 필요한 데이터를 한 번에 받아 Redux 전역 상태에 저장했다. - 데이터 변경 시 백엔드 코드에서 관련 클라이언트에 보낼 이벤트 메시지를 직접 작성하고, 프론트엔드는 WebSocket으로 이벤트를 받아 상태를 갱신했다. - 사용자와 데이터 규모가 커지면서 모든 데이터를 한 번에 로드하기 어려워졌고, 데이터를 점진적으로 불러오면서 다음 문제가 발생했다. - 특정 데이터가 메모리에 항상 존재한다는 보장이 없어짐 - 여러 제품 영역이 같은 데이터를 사용할 때 데이터 로딩 책임이 불분명해짐 - 이벤트를 어느 시점에 보내고 받아야 하는지 관리하기 어려워짐 - 단순한 “새 파일 생성” 이벤트와 달리 권한 변경은 다른 리소스의 가시성까지 연쇄적으로 바꿀 수 있어 이벤트 설계가 복잡했다. - 데이터베이스 쓰기 순서와 실시간 메시지의 송수신 순서가 항상 일치한다는 보장도 없었다. - 그 결과 클라이언트 상태가 서버 상태의 올바른 부분집합을 반영하지 못하는 일관성 버그가 발생했다. ## GraphQL 기반 Live Query 선택 - Figma는 개발자가 실시간 데이터 구독을 선언적으로 정의할 수 있는 일반적인 프레임워크가 필요하다고 판단했다. - GraphQL을 인터페이스로 사용하면 필요한 데이터와 관계를 쿼리로 표현하고, 시스템이 해당 데이터를 자동으로 가져오고 최신 상태로 유지할 수 있다. - 여기서 말하는 GraphQL 구독은 일반적인 이벤트 스트림 구독과 다르다. - GraphQL의 전통적인 `subscription`은 이벤트 메시지를 전달하는 방식에 가깝다. - LiveGraph가 목표로 한 것은 쿼리 결과 자체를 계속 갱신하는 “Live Query” 방식이다. - 프론트엔드는 GraphQL과 유사한 쿼리를 보내고, 서버는 결과를 JSON 트리로 반환한다. - 서버에는 엔터티와 관계를 정의하는 스키마 및 그래프의 일부를 조회할 수 있는 뷰가 존재한다. ## 기존 실시간 데이터베이스 대신 자체 구축한 이유 - Figma는 이미 Postgres를 대규모로 운영하고 있었기 때문에 Firebase나 RethinkDB 같은 별도의 실시간 데이터베이스로 이전할 수 없었다. - LiveGraph는 새로운 저장소가 아니라 기존 Postgres 위에 동작하는 쿼리 엔진이 되어야 했다. - Figma의 Multiplayer 시스템은 파일 단위의 쓰기와 충돌 해결을 담당하지만, LiveGraph는 여러 데이터의 조회와 실시간 동기화를 담당한다. - Hasura, Prisma, PostGraphile 등 GraphQL 기술도 검토했지만, 대규모 동시 구독을 핵심 요구사항으로 설계된 것은 아니었다. - Figma는 실시간 구독 수가 많아질수록 데이터베이스 부하가 커지는 폴링 방식도 피하고자 했다. - 폴링은 쿼리마다 주기를 정해야 한다. - 구독 수가 늘어나면 동일한 쿼리가 반복 실행되어 데이터베이스 부하가 증가한다. - 폴링보다 변경 발생 시점에 가까운 낮은 지연 시간을 확보하기 어렵다. ## 데이터베이스 복제 스트림 기반 설계 - LiveGraph는 주기적으로 데이터를 다시 조회하는 대신 Postgres의 데이터베이스 복제 로그를 추적한다. - 복제 스트림에서 변경 사항을 읽으면 실제 데이터베이스 변경을 감지한 뒤 구독 중인 쿼리 결과를 갱신할 수 있다. - 이 방식은 폴링보다 빠른 업데이트 지연 시간을 제공한다. - 다만 LiveGraph가 데이터베이스의 전체 변경량을 읽어야 하므로, 대규모 환경에서는 확장성이 중요하다. - Figma는 여러 데이터베이스 샤드의 변경 사항을 여러 머신에 분산 처리할 수 있는 구조를 고려했다. - 최종적으로 LiveGraph를 자체 구축한 이유는 Figma의 협업 기능에서 실시간 데이터가 핵심 기능이며, 이러한 요구사항이 경쟁력으로 이어질 수 있다고 판단했기 때문이다. ## 실용적인 결론 실시간 UI를 구축할 때 클라이언트별 수동 이벤트와 전역 상태 갱신에 의존하면 데이터 규모와 기능 복잡도가 커질수록 일관성 문제가 발생하기 쉽다. 기존 Postgres를 유지해야 하고 대규모 구독이 필요하다면, GraphQL 기반 선언적 쿼리와 데이터베이스 변경 스트림을 결합하는 방식이 폴링이나 수동 이벤트보다 확장성과 유지보수성 측면에서 유리하다.

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

ReactPostgreSQLTypeScriptGraphQL+4

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

브랜칭을 만든 방법

Figma는 대규모 협업에서 실험적 변경과 승인된 디자인을 분리하기 위해 브랜칭을 구축했다. 메인 파일은 단일 진실 공급원으로 유지하고, 브랜치에서는 기존 디자인을 훼손하지 않으면서 아이디어를 탐색·검토·수정할 수 있도록 한 것이다. Figma는 소프트웨어 개발의 브랜치 개념을 그대로 복제하기보다, 클라우드 기반 멀티플레이어 협업에 맞춰 단순성과 일관성을 우선했다. ## 대규모 협업에서 자유와 구조의 균형 - 실시간 협업은 모든 사람이 같은 파일에서 작업할 수 있다는 장점이 있다. - 그러나 팀 규모가 커지면 다음과 같은 문제가 발생한다. - 승인되지 않은 변경 사항이 코드에 반영됨 - 작업 내용이 다른 사람에 의해 덮어써짐 - 진행 중인 작업(WIP)과 실제 배포 가능한 디자인을 구분하기 어려움 - 브랜치는 메인 파일을 직접 변경하지 않고 새로운 아이디어를 시도할 수 있는 탐색 공간이다. - 디자인 라이브러리에 기여하거나, 이해관계자에게 작업물을 미리 보여주거나, 실험적인 반복 작업을 진행할 때 특히 유용하다. - 충분히 검토·승인된 변경만 메인 파일에 반영함으로써 메인 파일의 무결성을 유지한다. ## 소프트웨어 브랜칭과 Figma의 차이 - 소프트웨어 개발의 브랜치는 일반적으로 변경 사항이 개발자의 로컬 컴퓨터에 저장되는 구조를 전제로 한다. - 반면 Figma 파일은 클라우드에 저장되며, 여러 사용자가 동시에 같은 파일에 접속해 변경한다. - 따라서 Figma는 다음과 같은 설계 문제를 검토해야 했다. - 메인 파일에서 여러 사용자의 동시 편집을 계속 허용할 것인가 - 브랜치에서도 여러 사람이 동시에 작업할 수 있게 할 것인가 - 기존 멀티플레이어 협업 경험에 복잡성을 얼마나 추가할 것인가 - 핵심 과제는 전통적인 버전 관리 방식을 그대로 적용하지 않고, 온라인 협업 환경에 맞는 브랜칭 모델을 만드는 것이었다. ## 단순성과 일관성을 우선한 설계 - Figma는 브랜칭과 멀티플레이어 편집을 하나의 일관된 버전 관리 방식으로 이해할 수 있도록 설계했다. - 메인 파일은 기존처럼 여러 사람이 동시에 편집할 수 있다. - 브랜치도 일반적인 Figma 파일과 동일한 방식으로 작동한다. - 편집자와 뷰어의 접근 권한 및 권한 관리 방식은 변경하지 않았다. - 사용자의 데이터가 어떤 상황에서도 안전하게 보존되도록 데이터 무결성을 우선했다. - 기능을 의도적으로 단순하게 유지하기 위해 브랜치에서 다시 브랜치를 만드는 기능은 제공하지 않았다. - 이는 기능을 많이 추가하기보다, 디자이너가 별도의 복잡한 개념을 학습하지 않고 사용할 수 있게 하려는 선택이다. ## 병합 과정에서 고려한 예외 상황 - 병합의 가장 어려운 문제는 단순히 충돌을 해결하는 것만이 아니다. - 실제 구현에서는 다음과 같은 상황도 처리해야 했다. - 사용자가 병합 내용을 검토하는 동안 원본 파일이 변경되는 경우 - 병합 작업 도중 네트워크 연결이 끊기는 경우 - 병합이 완료되기 전에 다른 사용자의 변경 사항이 추가되는 경우 - 따라서 병합 기능은 충돌 해결 알고리즘뿐 아니라, 검토 중인 상태의 일관성, 연결 손실, 동시 변경에도 사용자의 데이터가 안전하게 유지되도록 설계되어야 했다. - 제공된 글은 이러한 병합 문제를 설명하던 중 문장이 중단되어 있어, 구체적인 해결 방식 전체는 확인할 수 없다. 브랜칭은 메인 파일을 무분별한 실험의 공간으로 사용하는 대신, 승인된 결과와 진행 중인 작업을 분리하고 싶은 팀에 적합하다. 특히 디자인 시스템이나 제품 디자인을 여러 사람이 함께 관리한다면, 메인 파일은 안정적인 기준점으로 유지하고 브랜치에서 탐색·리뷰·협업한 뒤 승인된 변경만 병합하는 운영 방식을 추천할 수 있다.

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

Figmareal-time-collaboration클라우드 컴퓨팅version-control+2

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

Figma의 새로운 소식:

Figma는 원격 협업에서도 즉흥적인 대화와 팀의 반응을 자연스럽게 주고받을 수 있도록 Figma와 FigJam에 오디오, 커서 채팅, 하이파이브 기능을 추가했습니다. 또한 스프레드시트 연동, 다이어그램 내보내기, 텍스트 편집, 붙여넣기 개선 등 실무 흐름을 간소화하는 기능도 함께 선보였습니다. 이번 업데이트의 결론은 디자인 작업과 커뮤니케이션을 별도 도구로 분리하지 않고 하나의 협업 환경 안에서 처리하도록 만드는 것입니다. ## 오디오로 실시간 협업 강화 - Figma와 FigJam 파일 안에서 버튼 한 번으로 팀원과 음성 대화를 시작할 수 있습니다. - 아이디어를 빠르게 공유하거나 질문하고, 작업 세션을 진행하거나 결과물을 발표하는 용도로 활용할 수 있습니다. - 별도의 화상회의 도구로 이동하지 않아도 파일을 보며 대화할 수 있어 협업의 흐름이 끊기지 않습니다. - Figma 데스크톱 앱에서는 오디오 내용을 실시간으로 보여주는 라이브 캡션 베타도 출시될 예정입니다. ## 커서 채팅과 하이파이브 - **커서 채팅**을 사용하면 각자의 커서에 짧은 메시지를 표시할 수 있습니다. - 발표자를 방해하지 않고 질문이나 의견을 남길 수 있습니다. - 격려나 간단한 반응을 전달하는 가벼운 커뮤니케이션 수단입니다. - **하이파이브**는 FigJam에서 협업을 마무리하거나 좋은 아이디어를 축하할 때 사용할 수 있는 반응 기능입니다. - 화상회의에서 놓치기 쉬운 고개 끄덕임이나 표정 같은 비언어적 반응을 디지털 작업 공간에 추가하려는 목적입니다. ## FigJam의 스프레드시트 데이터 연동 - 스프레드시트의 셀을 복사해 FigJam에 붙여넣으면 여러 셀을 스티키 노트로 변환할 수 있습니다. - 사용자 조사 결과나 인터뷰 데이터를 빠르게 시각화하고 정리하는 데 유용합니다. - FigJam의 스티키 노트 선택 영역은 CSV 파일로 내보낼 수 있어 후속 분석이나 데이터 공유가 가능합니다. ## FigJam 다이어그램 내보내기 - 선택한 객체 또는 전체 FigJam 파일을 PNG, PDF, JPG 형식으로 내보낼 수 있습니다. - FigJam에서 만든 다이어그램과 시각 자료를 프레젠테이션, 이메일, 문서 등 다른 커뮤니케이션 채널에 재사용할 수 있습니다. ## 텍스트 편집 기능 개선 - 글머리 기호 및 번호 매기기 목록의 줄 간격을 조정할 수 있습니다. - FigJam의 하나의 텍스트 상자, 스티키 노트, 도형 안에서 일부 문장이나 특정 줄만 선택해 서로 다른 글자 크기를 적용할 수 있습니다. - 이를 통해 긴 메모나 워크숍 결과물을 더 계층적으로 구성할 수 있습니다. ## 붙여넣기 작업 개선 - **Paste here**: 마우스 오른쪽 메뉴에서 선택하면 원하는 위치에 정확하게 붙여넣을 수 있습니다. - **Paste to replace**: 객체를 선택한 뒤 `Shift + ⌘ + V` 또는 `Shift + Ctrl + V`를 사용하면 클립보드의 콘텐츠로 해당 객체를 교체할 수 있습니다. - **Multi-paste**: 여러 프레임이나 그룹을 선택한 상태에서 `Shift + ⌘ + V` 또는 `Shift + Ctrl + V`를 사용하면 같은 콘텐츠를 동일한 위치에 한 번에 붙여넣을 수 있습니다. 이번 업데이트는 원격 환경에서 부족해진 즉각적인 소통을 보완하면서, 조사 데이터 정리와 시각 자료 재사용까지 Figma 생태계 안에서 처리하도록 개선한 사례입니다. 특히 사용자 조사에는 스프레드시트-스티키 노트 변환을, 반복적인 화면 수정에는 붙여넣기 기능을 활용하면 작업 시간을 줄일 수 있습니다.

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

Figmafigjamreal-time-collaborationpng+4

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

Elsewhen이 고객을 위한 디지털 제품

Elsewhen은 Figma를 최종 화면을 만드는 도구가 아니라, 탐색·워크숍·프로토타이핑·협업 전 과정을 연결하는 공동 작업 공간으로 활용한다. 이를 통해 Spotify의 디자인 생산성을 체계적으로 분석하고, Inmarsat의 분산된 디자인 업무를 하나의 디자인 시스템으로 통합했다. 두 사례는 협업 환경과 공통 자산을 정비하면 반복 작업을 줄이고 창의성과 제품 출시 속도를 높일 수 있음을 보여준다. ## Figma를 중심으로 한 협업 방식 - 영국의 디지털 제품 컨설팅 회사 Elsewhen은 기업용·B2B 도구를 설계하며 고객사의 비효율적인 시스템과 업무 프로세스를 개선한다. - Figma를 디자인 결과물 제작에만 사용하지 않고 다음 전 과정에 활용한다. - 아이디어 탐색 - 워크숍과 인터뷰 - 고객과의 공동 작업 - 프로토타이핑 - 디자인 자산 공유 및 배포 - 에셋을 별도로 내보내고 업로드·배포하던 반복 단계를 줄여 팀이 문제 해결과 제품 설계에 더 집중할 수 있게 했다. ## Spotify의 디자인 생산성 개선 - Spotify는 디자인 생산성을 단순히 화면·컴포넌트 개수나 작업 시간으로 평가하는 방식에 한계가 있다고 보았다. - 창의적인 업무에서는 산출량보다 디자이너가 실제 디자인에 얼마나 집중할 수 있는지, 업무 흐름을 방해하는 요소가 무엇인지 파악하는 것이 중요했다. - Elsewhen과 Spotify는 현재의 업무 흐름을 분석하고 개선 기회를 찾기 위한 **Design Productivity Blueprint**를 공동 개발했다. - 이 자료는 공개된 Figma 파일 형태로 제공되며 다음을 포함한다. - 디자인 팀의 업무를 분석하는 워크숍 - 구성원 인터뷰 템플릿 - workflow의 문제점과 병목을 찾는 방법 - 목표는 반복적이고 부수적인 업무에 쓰는 시간을 줄이고, 디자이너가 실제 디자인과 창의적 문제 해결에 더 많은 시간을 쓰도록 하는 것이다. ## Inmarsat의 디자인 시스템 구축 - 위성 통신 기업 Inmarsat은 여러 지역에 분산된 조직과 외부 디자인 에이전시에 의존하는 구조 때문에 디자인 협업에 어려움을 겪었다. - 사내 디자인 팀이 없고 공통 디자인 자산의 단일 기준점도 없어 다음 문제가 발생했다. - 새 디자이너의 온보딩이 어려움 - 개발자와 외부 디자이너 사이에 제품 맥락이 단절됨 - 디자이너들이 컴포넌트를 반복해서 처음부터 제작함 - 제품 출시 과정이 지연됨 - Elsewhen은 Inmarsat의 기존 셀프서비스 포털 프로젝트를 기반으로 첫 번째 Figma 디자인 시스템을 만들었다. - 실제 제품에 사용되는 요소를 토대로 다음과 같은 공통 컴포넌트 체계를 구축했다. - 타이포그래피 - 버튼 - 아이콘 - 그리드 - 기타 반복적으로 사용되는 UI 요소 - Figma를 디자인 컴포넌트와 에셋의 단일 기준점으로 삼아 사내 디자이너, 개발자, 협력 에이전시가 동일한 자료에 쉽게 접근할 수 있도록 했다. - 그 결과 컴포넌트 재작업이 줄고, 새로운 제품을 더 빠르게 구축하며 기술 변화에도 대응하기 쉬워졌다. ## 두 사례에서 얻는 협업 원칙 - 생산성은 단순한 산출량이 아니라 업무 흐름의 마찰을 얼마나 줄였는지로 평가해야 한다. - 디자인 시스템은 추상적으로 한 번에 만드는 것이 아니라 실제 진행 중인 제품에서 출발하면 실용적인 기반을 마련하기 쉽다. - 디자인·개발·외부 파트너가 동일한 파일과 컴포넌트를 사용하면 정보 단절과 중복 작업을 줄일 수 있다. - 협업 도구는 결과물을 전달하는 수단을 넘어 탐색부터 검증까지 모든 참여자가 함께 작업하는 공간이 되어야 한다. 실무적으로는 팀의 반복 작업과 협업 병목을 먼저 조사한 뒤, 공통 컴포넌트와 워크숍 템플릿을 하나의 공유 공간에 축적하는 방식이 효과적이다. 이를 통해 디자인 품질뿐 아니라 팀의 작업 속도와 창의적 여유도 함께 개선할 수 있다.

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

Figma디자인 시스템프로토타이핑collaborative-design+2

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

Figma의 디자인 시스템 컨퍼

디자인 시스템은 제품팀이 더 빠르고 일관되게 일하며 변화하는 비즈니스 요구에 대응하도록 돕는 핵심 기반이다. 과거의 정적인 PDF 가이드와 분리된 디자인·개발 프로세스에서 벗어나, 오늘날에는 협업·가시성·유연한 도구·커뮤니티 참여가 중요해졌다. Figma는 이러한 과제를 공유하고 실무 경험을 나누기 위해 디자인 시스템 컨퍼런스 **Schema**를 개최한다고 소개한다. ## 디자인 시스템의 변화 - 과거에는 디자이너가 PDF 스타일 가이드를 만들고, 개발자가 이를 해석해 코드 기반 스타일시트로 옮기는 방식이 일반적이었다. - 디자인과 개발이 서로 다른 도구와 팀에 분리되어 있어 의사소통과 일관성 유지가 어려웠다. - 현재는 협업 도구, 공유 라이브러리, 컴포넌트, 스타일 등을 통해 공통된 이해를 형성하는 방향으로 발전했다. - 디자인 시스템은 전담 대규모 조직뿐 아니라 소규모 팀의 자발적인 활동으로도 구축될 수 있다. ## 디자인 시스템 운영의 핵심 과제 - 디자인 시스템의 가치는 라이브러리와 컴포넌트 제공에만 있지 않다. - 시스템을 사용하는 사람들과의 **커뮤니케이션**, 운영 성과를 확인하는 **측정**, 구성원이 개선에 참여하는 **기여 구조**도 중요하다. - 디자인 시스템 실무자들은 팀이 프로세스와 정리 작업에 덜 시간을 쓰고, 실제 제품 문제 해결에 더 집중하도록 돕는 것을 목표로 한다. - 디자이너뿐 아니라 과거에는 디자인 도구를 거의 사용하지 않던 개발자, 기획자 등 다양한 직군도 디자인 프로세스에 참여하게 되었다. - 조직 규모와 관계없이 대부분의 팀은 디자인 시스템을 어떻게 만들고 확장할지 계속 실험하고 있다. ## Schema 컨퍼런스의 목적 - Schema는 디자인 시스템을 **구축(Build)**하고, **확장(Scale)**하며, **기여(Contribute)**하는 방법을 다루는 Figma의 사용자 컨퍼런스다. - 규모가 작은 팀부터 대규모 조직까지 다양한 기업의 실무자 사례를 공유한다. - 디자인 시스템 또는 디자인 운영 리더, 첫 디자인 시스템을 formalize하는 팀, Figma API 기반 도구와 워크플로를 확장하려는 팀을 대상으로 한다. - 세션은 디자인 시스템에 대한 중급 수준의 이해를 전제로 구성된다. ## 세 가지 세션 주제 - **Build** - 다양한 규모의 조직에서 디자인 시스템을 실제로 구축하는 방법 - 재사용 가능한 리소스와 운영 기반을 만드는 실무적 접근 - **Scale** - 조직 내 디자인 시스템 도입과 사용을 확대하는 방법 - 채택률과 ROI를 측정하는 방법 - 플러그인과 도구를 활용해 시스템의 운영 범위를 확장하는 방법 - **Contribute** - 내부 커뮤니티를 형성하고 구성원의 참여를 유도하는 방법 - 팀원들이 디자인 시스템을 수동적으로 사용하는 데 그치지 않고 직접 개선하도록 만드는 방식 ## 행사 방식과 일정 - 개최일: 2021년 10월 7일 오전 8시 30분(PT) - 온라인 가상 행사 - 의미 있는 대화를 위해 실시간 참석 인원을 제한하고 사전 신청을 받음 - 실시간 참석이 어려운 사람들을 위해 발표 영상을 Figma Community에 무료 공개 - 참가 신청은 2021년 10월 4일까지 가능하며, 신청 결과는 영업일 기준 3일 이내 안내 실무적으로는 디자인 시스템을 컴포넌트 저장소나 스타일 가이드로만 보지 말고, 협업 방식·성과 측정·조직 구성원의 기여를 포함하는 운영 체계로 설계하는 것이 중요하다. 특히 시스템을 확장하려면 구축(Build), 도입과 운영(Scale), 내부 참여(Contribute)를 함께 고려해야 한다.

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

Figma디자인 시스템pluginsfront-end-development+2

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

Figma 내부 살펴보기:

Figma는 기존의 bastion host와 SSH 중심 접근을 AWS Systems Manager Session Manager 기반의 제로 트러스트 셸 접근 방식으로 전환했다. Okta·AWS SSO·WebAuthn·최소 권한 IAM 역할·단기 자격 증명을 결합해 인증과 권한을 중앙화하고, 세션 기록을 S3에 저장해 감사 가능성을 확보했다. 외부 보안 제품에 대한 의존성을 줄이면서도 기존 사용성을 유지하고 점진적으로 도입하는 것이 핵심 결론이다. ## 기존 Bastion Host 방식의 한계 - 프로덕션 환경 보호를 위해 엔지니어가 bastion host를 거쳐 SSH로 접속하는 방식이 널리 사용된다. - 그러나 bastion host는 공격자가 집중적으로 노리는 중요한 보안 통제 지점이다. - Figma는 규모가 커지면서 다음 문제가 커졌다고 설명한다. - 접근 권한 관리가 복잡해짐 - bastion host 자체의 보안 유지 비용 증가 - 사용자별 접근 추적과 감사의 어려움 - 운영 및 지원에 필요한 반복 작업 증가 ## 설계 목표 Figma 보안팀은 새로운 셸 접근 시스템을 다음 원칙에 맞춰 설계했다. - **원활한 사용자 경험** - 엔지니어가 보안을 우회하지 않고도 쉽게 사용할 수 있어야 한다. - 웹 콘솔과 터미널 CLI를 모두 지원한다. - **제로 트러스트** - 네트워크 내부에 있다는 이유만으로 신뢰하지 않고, 매번 사용자와 요청을 검증한다. - 외부 네트워크에 인스턴스를 노출하지 않는 구조를 지향한다. - **강력한 인증** - SSO를 강제한다. - 피싱에 강한 WebAuthn 기반 MFA와 디바이스 신뢰 검사를 적용한다. - 탈취된 자격 증명의 피해 범위를 줄이기 위해 단기 토큰을 사용한다. - **중앙 집중식 감사** - 사용자가 어떤 시스템에 접속했고 어떤 명령을 실행했는지 추적할 수 있어야 한다. - **운영 부담 최소화** - 구축과 배포가 단순하고 유지보수가 쉬워야 한다. - **점진적·하위 호환 가능한 도입** - 기존 사용 사례를 지원하면서 단계적으로 전환한다. - 갑작스러운 업무 중단이나 사용자 경험의 큰 변화를 피한다. ## 자체 구축을 선택한 이유 - Figma는 초기 검토 과정에서 Okta Advanced Server Access 같은 상용 제품을 평가했다. - 하지만 기존 사용 사례를 유연하게 지원하기 어렵고, 당시 회사 규모에서는 제품을 이용하기 어려운 경우도 있었다. - 외부 서비스 의존성이 핵심 엔지니어링 업무의 가용성 위험과 추가 복잡성을 만들 수 있다는 우려도 있었다. - 이미 AWS 서비스를 광범위하게 사용하고 있었기 때문에 AWS 구성 요소를 조합해 단순한 프로토타입을 만드는 방향을 택했다. ## Session Manager 기반 셸 접근 - AWS Systems Manager의 Session Manager를 사용하면 EC2 및 ECS 인스턴스에 셸 접근을 제공할 수 있다. - 인스턴스에 SSH 포트를 열거나 외부 네트워크에서 직접 접근 가능하게 만들 필요가 없다. - 인스턴스의 에이전트와 사용자의 AWS 콘솔·CLI 사이에 인증되고 암호화된 TLS 연결을 생성한다. - 지원 기능은 다음과 같다. - 명령 실행 - 대화형 셸 - SSH 세션 터널링 - 사람이 AWS SSO로 인증한 뒤 IAM 역할을 Assume하도록 구성해 권한을 중앙 관리할 수 있다. - 네트워크 경계나 bastion host의 보안에 의존하기보다 사용자 인증과 IAM 권한을 중심으로 접근을 통제한다. ## Okta와 AWS SSO를 이용한 인증·권한 관리 - Figma는 Okta를 SSO 제공자로 사용하고 AWS SSO와 연동했다. - 인증 과정에서 디바이스 신뢰와 WebAuthn MFA를 요구한다. - 인증이 끝나면 사용자는 최소 권한으로 제한된 전용 IAM 역할을 Assume한다. - AWS 접근 토큰은 단기 수명으로 발급해 장기 키가 유출됐을 때의 피해 범위를 줄인다. - Okta 그룹을 AWS SSO 그룹과 연동해 IT 팀이 그룹 단위로 접근 권한을 관리할 수 있다. - 사용자는 다음 두 방식으로 Session Manager를 이용할 수 있다. - AWS Systems Manager 콘솔을 통한 웹 기반 접속 - Figma가 제작한 간단한 CLI 도구를 통한 터미널 접속 ## 세션 기록과 감사 - Session Manager는 셸 세션의 transcript를 수집한다. - 기록은 암호화된 S3 버킷으로 전송된다. - 이를 통해 개인별 접속과 실행 작업을 사후 조사할 수 있다. - 중앙화된 로그는 보안 사고 대응, 내부 감사, 권한 오남용 조사에 활용될 수 있다. ## AWS SSO 디바이스 코드 피싱 위험 - AWS SSO의 디바이스 코드 인증은 별도의 피싱 위험을 가진다. - 공격자가 자신의 디바이스 인증 URL을 생성한 뒤 피해자가 해당 URL을 방문해 승인을 수행하도록 속일 수 있다. - 그러면 공격자가 피해자 계정의 액세스 토큰을 획득할 가능성이 있다. - Figma는 사용자가 예상하지 못한 SSO 페이지를 의심하도록 하는 것 외에도 모니터링과 경보를 추가적인 완화책으로 적용했다. ## 도입 시 고려할 점 - Session Manager를 적용하려면 EC2 또는 ECS 인스턴스에 관련 에이전트와 권한 구성이 필요하다. - IAM 정책은 셸 접근에 필요한 최소 권한만 부여하도록 설계해야 한다. - 외부 SSH 포트를 제거하더라도 IAM, SSO, 세션 로그, S3 저장소의 보안을 함께 관리해야 한다. - 기존 SSH 사용 사례와 사용자 업무 흐름을 고려해 웹 콘솔과 CLI를 함께 제공하는 것이 효과적이다. - 인증 우회나 피싱을 전제로 모니터링과 이상 행위 경보를 추가해야 한다. 실용적으로는 AWS 환경에서 bastion host를 새로 확장하기보다 Session Manager, AWS SSO, 최소 권한 IAM, 단기 자격 증명, 암호화된 세션 로그를 조합하는 방식을 우선 검토할 만하다. 다만 제로 트러스트는 특정 제품 도입만으로 완성되지 않으므로 IAM 정책과 로그 접근 권한, SSO 피싱 대응까지 함께 설계해야 한다.

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

iamzero-trust-securitysshokta+3

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

Figma와 FigJam에서 대

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

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

Figmafigjamreal-time-collaborationaudio-chat+2

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

학생 및 교육자를 위한

Figma는 학생과 교육자가 무료로 협업하며 수업, 피드백, 과제를 하나의 작업 공간에서 운영할 수 있도록 지원한다. 교육자는 대면·원격·비동기 수업을 유연하게 결합하고, 학생은 실제 업무에 가까운 협업 방식과 포트폴리오 제작 경험을 쌓을 수 있다. 글은 Figma를 단순한 디자인 도구가 아니라 가상 교실이자 커뮤니티 공간으로 활용하자고 제안한다. ## 교육자를 위한 가상 교실 - Figma Education 플랜은 학생과 교육자가 Professional 기능과 무제한 협업을 무료로 이용할 수 있도록 한다. - 실시간 협업과 비동기 작업을 모두 지원해 대면 수업, 원격 수업, 하이브리드 수업에 대응할 수 있다. - 하나의 Figma 파일에 강의 자료, 여러 페이지의 과제, 디자인 활동, 비평 내용을 모으면 수업의 단일 기준점이 된다. - 학생은 결석한 수업이나 이전 피드백을 파일에서 직접 확인할 수 있고, 교사는 과제와 대화를 한곳에서 추적할 수 있다. - 여러 명이 같은 파일에서 아이디어를 발전시키고 반복 작업을 수행하면서 수업 참여도가 높아진다. - 시각 중심의 참여 방식은 말로 발표하는 데 익숙하지 않은 학생이나 청각장애·난청 학생에게도 보다 평등한 참여 기회를 제공한다. - Figma 파일을 공동체 공간으로 활용할 수도 있다. 예를 들어 학생들이 자기소개, 사진, 댓글, 스티커를 추가하는 디지털 졸업앨범을 만들고 PDF로 내보낼 수 있다. ## 학생의 실무 역량과 포트폴리오 개발 - 실제 디자인 업무처럼 협업하고 작업 과정을 공개하는 경험을 제공한다. - 디자인이 선형적인 개인 작업에서 벗어나 다양한 직군과 함께 반복·수정하는 방식으로 변화하고 있다는 점을 수업에서 체험하게 한다. - 최종 결과물뿐 아니라 조사, 초기 아이디어, 여러 버전과 수정 과정까지 기록할 수 있어 포트폴리오 리뷰에 유리하다. - 채용 면접에서 결과물의 완성도뿐 아니라 문제를 어떻게 정의하고 해결했는지 설명할 수 있는 근거가 된다. - Figma Community에서 다른 사람의 파일을 복제하고 수정하거나 리믹스하면서 다양한 작업 방식을 배울 수 있다. ## 커뮤니티와 네트워킹 - Friends of Figma 학생 그룹에 참여하면 다른 디자이너와 교류하고 경험을 공유할 수 있다. - Figma Hackathon Program 같은 활동은 협업, 아이디어 구체화, 결과물 제작 경험을 제공한다. - Community 파일을 분석하고 재구성하는 과정은 독학과 실험을 위한 실용적인 학습 방법이다. - Figma는 학생 대상 뉴스레터를 통해 채용 시즌 준비, 포트폴리오 리뷰, 인턴십 활용법 등의 정보를 제공한다. ## 교육 프로그램의 접근성 개선 - Figma는 온라인 강좌, 부트캠프, 학교가 주관하는 해커톤까지 교육 프로그램의 범위를 확대해 왔다. - 2021년 새 학기를 앞두고 교실용 온보딩 절차를 단순화해 수업에서 더 쉽게 도입할 수 있도록 했다. - 교육자는 수업 템플릿과 활용 사례를 공유하고, 그룹 데모를 통해 Figma 기반 수업 운영 방법을 배울 수 있다. 학생과 교육자는 Figma를 과제 제출 도구로만 사용하기보다 강의 자료, 협업, 피드백, 커뮤니티 활동, 포트폴리오를 연결하는 통합 공간으로 활용하는 것이 좋다. 특히 학생은 작업 과정과 반복 기록을 꾸준히 남기고, 교육자는 하나의 파일 구조와 명확한 참여 규칙을 설계하면 학습 효과를 높일 수 있다.

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

Figma사용자 경험사용자 인터페이스design-collaboration+2

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

Figma의 새로운 소

Figma는 2021년 8월 업데이트에서 FigJam의 확장성과 Figma 플러그인 개발 역량을 강화하고, 디자인 시스템 관리와 반복 작업을 간소화했다. 특히 FigJam 플러그인·위젯, 프로토타이핑 자동화를 위한 API, 라이브러리 관리 기능이 추가되어 협업과 디자인 운영의 효율성이 높아졌다. 또한 투명 객체의 그림자 처리와 직선 그리기처럼 일상적인 사용성도 개선했다. ## FigJam 플러그인과 위젯 도입 - FigJam에 Figma의 오픈 플랫폼을 확장해 팀별 협업 방식에 맞는 기능을 직접 만들 수 있게 했다. - **플러그인** - 개인 작업을 자동화하고 효율화하는 도구다. - 스타일 사용자 지정, 스티키 정리, 데이터 가져오기 등에 활용할 수 있다. - **위젯** - 여러 사용자가 캔버스에서 함께 조작하는 인터랙티브 객체다. - 투표, 설문, 메모장, 게임 등을 제공해 워크숍과 브레인스토밍 진행을 돕는다. - 기본 HTML·JavaScript 지식이 있으면 플러그인을, React 경험이 있으면 위젯을 개발할 수 있도록 진입 장벽을 낮췄다. - 플러그인은 모든 요금제 사용자가 개발할 수 있었고, 위젯은 당시 비공개 베타로 제공됐다. ## Figma 플러그인 API 확장 - **프로토타이핑 쓰기 기능** - 플러그인이 프로토타입을 자동 생성하거나 기존 인터랙션을 대량으로 수정할 수 있게 됐다. - 반복적인 프로토타입 제작과 상호작용 설정을 자동화할 수 있다. - **플러그인 파라미터** - 별도의 사용자 인터페이스를 만들지 않고도 Quick Actions를 통해 사용자 입력을 받을 수 있다. - 플러그인 개발 시간이 줄고, 간단한 입력 기반 도구를 더 빠르게 만들 수 있다. - 당시 오픈 베타로 제공됐다. ## 디자인 시스템 관리 개선 - **컴포넌트 이동** - 게시된 컴포넌트와 컴포넌트 세트를 파일 간에 이동할 수 있다. - 이동 후에도 기존 인스턴스와의 연결이 유지된다. - 대형 라이브러리를 여러 파일로 분리하거나 새 파일로 이전하기 쉬워졌다. - **라이브러리 교체** - 스타일과 컴포넌트를 하나씩 변경하지 않고, 전체 라이브러리 세트를 다른 라이브러리로 교체할 수 있다. - **컴포넌트 검색** - `Shift + I` 단축키로 필요한 컴포넌트를 빠르게 검색할 수 있다. - 규모가 큰 디자인 시스템에서 탐색 시간을 줄여준다. ## 일상적인 사용성 개선 - 투명 객체가 뒤에 있는 그림자를 기본적으로 가리도록 변경되어, 별도로 설정을 조정할 필요가 줄었다. - Figma와 FigJam에서 연필 도구 사용 시 `Shift`를 누르면 직선을 그릴 수 있다. - 그 밖의 버그 수정과 개선 사항은 Figma 릴리스 노트에서 확인할 수 있도록 안내했다. 실무에서는 컴포넌트 라이브러리를 기능별 파일로 분리하고, 라이브러리 교체 기능과 플러그인 자동화를 함께 활용하면 디자인 시스템 유지보수 비용을 줄일 수 있다. FigJam에서는 투표나 설문 위젯을 활용해 회의 진행과 의사결정을 구조화할 수 있다.

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

Figma디자인 시스템figjamReact+3

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

협업 중심의 교실을 조성

FIT의 Christie Shin 교수는 Figma를 활용해 학생들이 결과물보다 디자인 과정과 협업을 중시하도록 가르친다. 가상 교실을 팀·프로젝트·파일 구조로 조직하고, 수업 중 실시간 피드백과 반복 작업을 유도해 실제 디자인 현장과 유사한 학습 환경을 만든다. 핵심은 초기 작업을 공유하고, 구조와 자율성을 함께 제공하며, 개인 작업도 공동체 안에서 진행하고, 다른 사람의 영향을 자연스럽게 인정하는 것이다. ## Figma로 구성한 가상 교실 - 수업 섹션별로 Figma 팀을 만들고, 강의 자료와 활동을 프로젝트 단위로 정리한다. - 학생들은 강의 중 각자 파일에 머무르지 않고 동일한 Figma 파일에 모여 작업하고 피드백을 주고받는다. - 학기 초에는 인터랙티브 학생 프로필 만들기 같은 아이스브레이킹 활동으로 협업을 시작한다. - 모든 수업 활동과 최종 발표 자료를 Figma 안에서 관리해 학습 과정을 한곳에 축적한다. ## 초기 작업을 적극적으로 공유하기 - 완성되지 않은 아이디어를 공개하는 부담을 줄이고, 초기 단계부터 작업을 보여주는 습관을 기른다. - 학생들은 수업 중 서로의 파일에 들어가 구두와 댓글 등으로 즉각적인 의견을 전달한다. - 디자인을 완성된 결과물이 아니라 사고하고 발전시키는 과정으로 이해하게 한다. - 반복적인 피드백을 통해 피드백을 요청하고 반영하는 능력을 키운다. ## 구조를 제공하되 성장할 여지 남기기 - 학기 초에 활동별 템플릿과 이름이 지정된 페이지를 제공해 학습 과정을 체계화한다. - 템플릿은 리서치, 요약, 와이어프레임 등 목적에 맞는 작업을 안내한다. - 무한 캔버스의 빈 공간에는 스케치, 실험, 빠른 반복 작업을 자유롭게 추가할 수 있다. - 하나의 Figma 파일을 리서치부터 최종 결과물까지 기록하는 ‘창의적 여정’ 또는 디자인 저널로 활용한다. ## 개인 작업을 공동체 안에서 진행하기 - 개인 프로젝트라도 스터디 그룹 안에서 진행하며, 중간 결과를 지속적으로 발표한다. - 예를 들어 MTA 앱을 위한 디자인 시스템과 영상 사례 연구를 개인별로 제작하되, 그룹에서 진행 상황을 공유했다. - 최종 발표 때 한 번만 평가받는 대신 제작 과정에서 점진적으로 피드백을 반영한다. - 이러한 방식은 실제 디자인 조직의 크로스펑셔널 협업과 디자인 크리틱을 모방한다. - 작업물을 지나치게 ‘소중한 완성품’으로 여기지 않고, 피드백에 따라 계속 개선하도록 돕는다. ## 다른 사람의 영향을 인정하기 - 학생들이 아이디어를 빼앗길까 봐 작업을 숨기는 태도에서 벗어나도록 한다. - 다른 사람의 의견과 작업이 자신의 디자인을 변화시키는 것은 디자인 과정의 자연스러운 일부라고 가르친다. - 프로젝트마다 영감을 준 전문 디자이너나 동료 학생의 디자인 이미지를 수집하게 한다. - 영향을 준 사례와 출처를 프로젝트에 함께 기록하고, 크리틱에서 그 영향 관계를 논의한다. - 이를 통해 아이디어의 차용을 숨기는 대신 맥락과 기여를 투명하게 설명하는 태도를 기른다. 실무적인 관점에서는 학생별 파일에 템플릿과 자유 작업 공간을 함께 제공하고, 정기적인 중간 공유와 동료 크리틱을 운영하는 방식이 효과적이다. 중요한 것은 도구 자체보다 초기 공개, 지속적인 피드백, 영향에 대한 인정이 자연스럽게 일어나는 협업 문화를 만드는 것이다.

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

Figma디자인 시스템user-experience-designwireframing+2