Figma/사용자 인터페이스

63 개의 포스트

figma4분 읽기큐레이션 요약

AI 시대의 좋은 디자인이란 무엇

AI가 제품 개발을 대중화할수록 제품을 차별화하는 요소는 디자인이 된다. 모바일 시대에 데스크톱 경험을 작은 화면에 그대로 옮겼던 것처럼, 초기 AI 제품도 단순한 챗봇과 템플릿에 머물고 있지만 새로운 상호작용 패턴을 발견할 가능성이 크다. 따라서 AI 시대의 좋은 디자인은 기술 자체를 좇기보다 공감, 창의성, 실제 사용자 문제 해결이라는 변하지 않는 원칙을 바탕으로 AI와 디자이너의 역할을 재정의하는 것이다. ## AI 시대에 디자인이 더 중요해지는 이유 - AI는 간단한 프롬프트만으로 코드, 디자인, 애플리케이션 전체를 생성할 수 있어 아이디어에서 구현까지의 속도를 크게 높인다. - 더 많은 사람이 제품 제작 과정에 참여할 수 있게 되지만, 결과적으로 비슷한 제품이 빠르게 양산될 가능성도 커진다. - 제품의 차별화는 기능 구현보다 다음과 같은 디자인 경험에서 나타날 수 있다. - 풍부한 상호작용 - 직관적인 제스처 - AI라는 매체에 적합한 새로운 사용 패턴 - 2007년 아이폰 등장 직후 많은 기업이 기존 데스크톱 화면을 모바일에 단순히 축소했던 것처럼, 현재의 단순 챗봇과 템플릿형 AI 제품도 새로운 기술에 적응하는 초기 단계로 볼 수 있다. - 새로운 기술의 잠재력을 실현하려면 충분한 시간과 반복적인 실험이 필요하다. ## 좋은 디자인의 원칙을 AI가 이해하도록 만들기 - Figma는 디자인 시스템을 활용해 UI의 첫 시안을 생성하는 AI 기능을 개발하면서, 먼저 “좋은 디자인”이 무엇인지 정의해야 했다. - LLM은 본질적으로 텍스트 기반 모델이므로 글쓰기나 코딩에는 강하지만, 시각적·구조적 판단이 필요한 UI 디자인을 생성하는 일은 더 어렵다. - 모든 디자인 규칙을 AI에 전달하는 방식은 현실적이지 않다. - 좋은 디자인의 모든 세부 사항을 유한한 규칙으로 정의하기 어렵다. - 방대한 규칙을 하나의 프롬프트에 넣으면 토큰 제한에 걸린다. - 상황에 따라 달라지는 디자인 판단까지 규칙화하기도 어렵다. - 이에 따라 어떤 UI에도 대체로 적용할 수 있는 작지만 강력한 원칙으로 디자인 지식을 압축해야 한다. - 디자인을 가르치는 과정처럼, 디자이너의 직관을 다른 사람이 실행할 수 있는 명확한 원칙으로 분해하는 작업이 중요하다. - 좋은 원칙은 다음 조건을 갖춰야 한다. - 명확할 것 - 구체적일 것 - 실제 제작 과정에서 적용 가능할 것 - 다양한 UI 상황에 일반화될 것 ## 디자인에서 코드까지의 순환 고리 단축 - AI는 디자인 결과물을 코드로 옮기는 시간을 줄여 제품 제작 주기를 단축할 수 있다. - 디자인과 개발 사이의 간극이 줄어들면 더 많은 시안을 빠르게 구현하고 검증할 수 있다. - 중요한 것은 단순히 코드를 자동 생성하는 것이 아니라, 디자인 의도와 사용자 경험이 구현 단계에서도 유지되도록 하는 것이다. - 빠른 생성 능력은 한 번에 정답을 얻는 수단이라기보다 실험과 반복을 늘리는 수단으로 활용해야 한다. ## 실용주의와 반복적인 실험 - AI 기술이 빠르게 변하는 상황에서는 완벽한 미래상을 기다리기보다 현재 가능한 도구로 실제 문제를 해결하는 접근이 필요하다. - 기술을 사용하기 위한 기능보다 사용자에게 실질적인 가치를 주는 경험을 우선해야 한다. - 초기 AI 제품의 어색함은 실패라기보다 새로운 상호작용 방식을 발견하기 위한 실험의 일부다. - 디자이너는 생성된 결과를 그대로 받아들이기보다 사용자 맥락에 맞는지 검토하고, 반복적인 수정과 검증을 통해 품질을 높여야 한다. ## 디자이너와 AI의 공동 창작 - AI는 디자이너를 단순히 대체하는 자동화 도구가 아니라 아이디어를 확장하고 제작 속도를 높이는 협업 파트너가 될 수 있다. - AI가 초안과 반복 작업을 담당하면 디자이너는 문제 정의, 사용자 공감, 우선순위 설정, 창의적 판단에 더 집중할 수 있다. - 공동 창작 모델에서는 인간과 AI의 강점을 결합하는 작업 분담이 중요하다. - AI: 빠른 생성, 변형, 탐색, 반복 작업 - 디자이너: 목적 설정, 맥락 이해, 품질 판단, 사용자 관점의 의사결정 - AI가 발전할수록 디자이너의 역할이 사라지는 것이 아니라, 무엇을 만들고 왜 만들어야 하는지 결정하는 능력이 더욱 중요해진다. AI를 도입할 때는 생성 속도 자체보다 사용자 문제와 디자인 원칙을 먼저 정의하는 것이 좋다. 작은 원칙을 명확히 정리하고, AI로 여러 시안을 빠르게 만든 뒤 사람의 판단과 사용자 검증을 통해 반복 개선하는 방식이 가장 현실적인 접근이다.

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

새로워진 Figma 내부

Figma의 UI3는 기능을 계속 추가하면서 복잡해진 인터페이스를 정리하고, 사용자의 작업물을 화면 중심에 두기 위한 대규모 redesign이다. 캔버스 공간을 넓히면서도 기존 사용자의 작업 습관과 전문 기능은 유지하고, 신규 사용자에게는 더 직관적인 경험을 제공하는 것이 목표다. 또한 컴포넌트, 생성형 AI, Dev Mode, Figma Slides 등 변화하는 디자인 환경에 대응할 수 있는 기반을 마련하려는 개편이다. ## UI3를 시작한 배경 - Figma는 출시 후 약 10년 동안 많은 기능과 제품을 추가했지만, 기본 레이아웃은 크게 변하지 않았다. - 기능이 누적되면서 처음에는 단순했던 인터페이스가 점점 복잡하고 부담스럽게 느껴질 수 있게 됐다. - UI3는 Figma 출시 이후 세 번째 주요 redesign으로, 단순한 시각적 변경이 아니라 워크플로와 인터랙션 방식까지 재설계한다. - 기존 사용자가 익숙한 작업 방식을 잃지 않으면서도, 새로운 사용자에게 더 접근하기 쉬운 인터페이스를 만드는 것이 중요한 과제였다. ## UI3가 해결하려는 네 가지 문제 - **UI보다 사용자의 아이디어를 중심에 두기** - 인터랙티브 컴포넌트와 AI 지원 디자인처럼 강력한 기능이 추가되면서 UI가 작업 자체보다 눈에 띌 위험이 생겼다. - 기능이 부가적으로 덧붙은 느낌을 줄이고, 캔버스와 사용자의 창작물에 집중하도록 설계 방향을 잡았다. - **신규 사용자와 전문 디자이너의 요구 균형** - 기존 인터페이스는 처음 접하는 사용자에게 복잡하고 비직관적으로 보일 수 있었다. - 기능의 범위를 줄이는 것이 아니라, 기능을 이해하고 접근하는 방식을 단순화하려 했다. - 숙련된 사용자의 익숙한 조작 감각과 작업 효율은 보존하는 것을 목표로 삼았다. - **변화하는 디자인 방식에 대응** - 오늘날 디자인은 단순히 픽셀을 배치하는 작업을 넘어, 재사용 가능한 컴포넌트와 생성형 AI를 활용하는 방식으로 확장되고 있다. - 이에 따라 디자이너가 개별 요소뿐 아니라 더 높은 수준의 추상화된 building block을 사용할 수 있어야 한다고 보았다. - **Figma의 미래를 위한 기반 마련** - Dev Mode를 통해 디자인과 코드를 연결하고, Figma AI로 작업 효율을 높이는 방향을 고려했다. - Figma Slides 같은 새로운 제품까지 포함해, 여러 도구가 일관된 제품군으로 작동할 수 있는 공통 구조를 만들고자 했다. ## 캔버스 공간을 넓히는 인터페이스 - 가장 먼저 Figma 캔버스의 사용 가능한 공간을 최대화하는 작업을 진행했다. - 초기에는 패널과 속성 영역을 거의 제거하고, 마우스를 올릴 때만 UI가 나타나는 극단적인 미니멀 디자인도 실험했다. - 사이드바가 필요할 때만 나타나는 방식도 시도했지만, 화면 구조가 지나치게 불안정해지는 문제가 있었다. - 수백 가지 시안을 제작하고 Figma 팀 내부에서 직접 사용하며 개선 방향을 검증했다. - 최종적으로 다음과 같은 방향을 선택했다. - 크기를 조절할 수 있는 패널 - 캔버스 하단의 얇은 새 툴바 - 상단 영역을 비워 더 넓고 여유로운 화면 구성 - 필요할 때 패널을 열고 닫을 수 있는 구조 - UI 전체를 숨겨 작업물에만 집중할 수 있는 기능 - 이 구조는 Figma의 여러 제품에서 공통으로 사용할 수 있어, 제품 간 전환과 확장에도 유리한 기반이 된다. ## 실용적인 의미 UI3의 핵심은 기능을 없애는 것이 아니라, 기능이 작업을 방해하지 않도록 배치와 노출 방식을 재조정하는 데 있다. 따라서 사용자는 평소에는 넓은 캔버스에 집중하고, 필요한 순간에만 패널과 도구를 불러오는 방식으로 작업할 수 있다. Figma를 사용하는 팀이라면 UI3의 패널 접기·크기 조절 기능과 캔버스 중심 작업 방식을 적극 활용하는 것이 효율 향상에 도움이 된다.

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

Config 2024 결

Figma Config 2024는 AI를 중심으로 디자인에서 개발·발표까지 이어지는 작업 흐름을 확장한 업데이트를 소개한다. 주요 발표는 Figma AI, 새 UI인 UI3, 프레젠테이션 도구 Figma Slides, Dev Mode 개선이며, 반복 작업을 자동화하고 아이디어 탐색을 빠르게 하는 데 초점을 둔다. Figma는 AI가 인터페이스를 생성하는 시대에도 차별화된 제품을 만드는 핵심은 디자인이라고 강조한다. ## Figma AI: 아이디어 탐색과 반복 작업 자동화 - **Visual Search** - 스크린샷, 선택한 프레임, 이미지, 연필로 그린 스케치를 입력해 유사한 디자인을 검색할 수 있다. - 아이콘부터 전체 디자인 파일까지 팀이 접근할 수 있는 파일 안에서 비슷하거나 동일한 디자인을 찾는다. - 개선된 Asset Search는 파일명이나 에셋 이름과 검색어가 정확히 일치하지 않아도 문맥을 이해해 관련 에셋을 찾아준다. - **반복적인 디자인 작업 자동화** - 현실적인 이미지와 문구를 생성한다. - 기존 문구를 변형하거나 다시 작성하고 번역한다. - 화면 간 프로토타입 연결을 자동으로 구성한다. - 여러 레이어의 이름을 한 번에 의미 있는 이름으로 변경한다. - 디자이너가 레이어 정리나 기본 콘텐츠 작성보다 창의적인 작업에 집중하도록 돕는다. - **Make Designs** - 새 Actions 패널에서 텍스트 프롬프트로 UI 레이아웃과 컴포넌트 초안을 생성한다. - 빈 캔버스에서 시작하기 어려울 때 여러 디자인 방향을 빠르게 탐색할 수 있다. - 생성 결과는 완성품이라기보다 초기 아이디어와 작업 출발점으로 활용하는 방식이다. - **AI 기능의 개발 방향** - Figma는 단순히 AI 유행을 따르기보다 실제 사용자 요구를 기준으로 기능을 설계한다고 설명한다. - 범용 대규모 언어 모델(LLM)을 기반으로 기능을 구축하되, 디자이너의 작업 맥락에 맞게 활용하는 데 초점을 둔다. ## UI3: 새롭게 설계된 Figma 인터페이스 - 기존 Figma 인터페이스를 재설계한 UI3를 공개한다. - AI 기능과 Actions 패널을 포함해 주요 작업을 더 쉽게 찾고 실행할 수 있도록 작업 환경을 개편한다. - UI3는 Figma AI와 함께 제한적 베타로 제공되며 단계적으로 확대된다. ## Figma Slides: 디자인과 프레젠테이션의 결합 - Figma Slides를 통해 슬라이드를 만들고, 협업하고, 발표할 수 있는 기능을 추가한다. - 디자인 도구에서 사용하던 협업 방식과 시각적 편집 경험을 프레젠테이션 제작으로 확장한다. - 제품 아이디어, 디자인 결과물, 프로젝트 진행 상황을 별도 도구로 옮기지 않고 공유·발표하는 흐름을 지원한다. ## Dev Mode: 디자인 완료에서 개발 완료까지 - Dev Mode를 크게 업데이트해 디자인과 개발 사이의 전환 과정을 개선한다. - 디자이너가 전달한 결과물을 개발자가 실제 구현으로 옮기는 과정에서 필요한 정보를 더 쉽게 확인하도록 지원한다. - 이번 업데이트는 단순히 “개발 준비 완료” 상태를 표시하는 것을 넘어, 개발 작업이 완료될 때까지의 협업 흐름을 강화하는 방향이다. ## Auto Layout·UI Kit·프로토타입 등 사용성 개선 - Auto Layout을 비롯해 기존 Figma 핵심 기능의 사용성을 개선한다. - UI Kit 활용 경험을 다듬어 더 빠르게 디자인 작업을 시작할 수 있도록 한다. - 프로토타입 뷰어를 개선해 결과물을 확인하고 공유하는 과정을 편리하게 만든다. - Figma AI뿐 아니라 자주 사용하는 기능 전반을 개선해 일상적인 작업 흐름의 마찰을 줄인다. ## 베타 제공 방식 - Figma AI와 UI3는 당시 제한적 베타로 제공된다. - Figma 화면 하단의 **“?”** 메뉴에서 **“Join UI3 + AI waitlist”**를 선택해 대기 목록에 등록할 수 있다. - 기능은 한 번에 전체 사용자에게 공개되지 않고 점진적으로 확대된다. 실무에서는 Visual Search로 기존 사내 디자인 자산을 재활용하고, Make Designs와 자동 프로토타이핑으로 초기 아이디어를 빠르게 검증하는 방식이 유용하다. 다만 AI 생성 결과를 그대로 사용하기보다 디자인 시스템, 접근성, 브랜드 기준에 맞춰 검토·수정하는 과정이 필요하다.

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

디자인 시스템 구축 방법

디자인 시스템은 제품 전반의 일관성을 높이고, 재사용 가능한 컴포넌트와 공통 언어를 통해 디자인·개발 업무를 효율화하는 기반이다. 성공적인 시스템은 정해진 정답을 따르기보다 조직의 목표와 문제에 맞춰 설계하고, 제품과 팀의 변화에 따라 지속적으로 발전해야 한다. 이를 위해 목표 설정, 기존 자산 조사, 협업자 확보, 적절한 구축 방식 선택이 선행되어야 한다. ## 디자인 시스템의 목표와 범위 정의 - 컴포넌트를 만들기 전에 디자인 시스템을 도입하려는 이유를 명확히 해야 한다. - 다음 질문에 답하면서 목표를 구체화한다. - 왜 디자인 시스템이 필요한가? - 어떤 문제를 해결할 것인가? - 문제가 해결되었는지 어떻게 측정할 것인가? - 플랫폼 간 UI 불일치, 반복적인 수동 수정, 디자인·개발팀 간 협업 문제 등이 주요 도입 계기가 될 수 있다. - 디자인 시스템은 소규모 팀의 단순한 컴포넌트 모음부터 대기업의 종합적인 표준 체계까지 다양한 규모로 구성할 수 있다. - 중요한 것은 조직의 현재 상황에 맞게 시작하고, 필요에 따라 확장 가능한 구조를 만드는 것이다. ## 기존 디자인과 코드 자산 조사 - 여러 플랫폼과 디바이스에서 제품 UI를 수집한다. - 일반 화면뿐 아니라 다음과 같은 변형도 함께 확인한다. - 호버·포커스·비활성·오류 등 인터랙션 상태 - 반응형 레이아웃 - 플랫폼별 또는 제품별 대체 버전 - 스크린샷을 모으면 반복되는 시각적 패턴과 일관된 요소를 파악하기 쉽다. - 디자인 파일만 조사해서는 안 되며, 코드베이스도 함께 점검해야 한다. - 개발자가 이미 구현한 다음 자산을 확인하면 기존 엔지니어링 작업을 재활용할 수 있다. - 반복적으로 사용되는 UI 요소 - 공통 CSS 변수 - 공유 컴포넌트 - 표준화된 구현 패턴 - 디자인과 코드 양쪽을 조사해야 서로 다른 시스템이 병렬로 만들어지는 문제를 줄일 수 있다. ## 패턴 분류와 문제점 평가 - 수집한 화면과 컴포넌트를 유형별로 분류해 현재 제품의 디자인 언어를 파악한다. - 같은 문제를 여러 방식으로 해결하고 있는지 확인한다. - 다음과 같은 문제는 디자인 시스템으로 개선할 후보가 된다. - 비슷한 UI가 제품마다 다르게 보이는 경우 - 중복 컴포넌트나 불필요한 변형이 많은 경우 - 디자인팀과 개발팀이 동일한 문제를 각자 다르게 해결하는 경우 - 사용자 경험이 화면이나 플랫폼에 따라 단절되는 경우 - 이 과정은 무엇을 새로 만들지뿐 아니라 무엇을 통합·정리·폐기할지도 결정하는 단계다. ## 조직 내 챔피언 확보 - 디자인 시스템은 한 직군만의 프로젝트가 아니라 디자인, 개발, 제품 관리가 함께 참여하는 팀 작업이다. - 일관된 제품 경험에 관심이 있는 사람을 조직 내 협력자로 확보해야 한다. - 개발자는 실제 코드 구현과 유지보수를 담당하므로 초기부터 참여시키는 것이 중요하다. - 개발자는 컴포넌트의 기술적 실현 가능성, API 설계, 유지보수 비용에 대한 현실적인 의견을 제공할 수 있다. - 성공적인 디자인 시스템이 반드시 대규모 전담 조직에서 시작되는 것은 아니며, 한 명의 담당자에서 출발할 수도 있다. ## 구축 방식 선택 - 디자인 시스템을 구축하는 방법은 크게 두 가지다. - 조직의 요구에 맞춰 처음부터 직접 구축하기 - 기존 프레임워크를 도입한 뒤 제품 상황에 맞게 조정하기 - 선택할 때는 현재 보유한 디자인·코드 자산, 팀 규모, 기술 역량, 유지보수 가능성을 함께 고려해야 한다. - 기존 시스템을 그대로 복사하기보다 조직의 목표와 제품 특성에 맞는 수준으로 조정하는 것이 중요하다. ## 이후의 구축 단계 - 글은 전체 과정을 다음 세 단계로 제시한다. - 기반 마련: 목표 정의, 기존 자산 조사, 문제 평가, 협력자 확보 - 디자인 기반 정의: 색상, 타이포그래피, 간격 등 공통 시각 규칙 수립 - Figma에서 구축: 디자인 자산과 재사용 가능한 컴포넌트를 체계적으로 구성 - 구축 후에도 시스템은 고정된 결과물이 아니라 제품과 팀의 변화에 맞춰 계속 관리하고 발전시켜야 한다. 실무에서는 모든 것을 한 번에 만들기보다 가장 반복적으로 사용되고 영향이 큰 패턴부터 시작하는 것이 좋다. 디자인과 코드를 함께 조사하고 개발자를 초기 단계부터 참여시키면 실제 제품에 적용되고 유지되는 디자인 시스템을 만들 가능성이 높아진다.

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

슬랙래시부터 토글

2023년의 디지털·하이브리드 업무 환경은 새로운 행동과 감정을 만들어냈고, 이를 표현할 새로운 업무 용어도 낳았다. 이 글은 Slack, Zoom, 협업 도구, 멀티태스킹과 관련된 현상을 유머러스한 신조어로 정리하며, 변화한 업무 문화를 이해하고 적응하는 언어를 제시한다. 결국 바쁜 업무 환경을 완전히 없애기보다, 그 안의 불합리함과 재미를 인식하고 더 현명하게 일하자는 메시지다. ### 업무 완성도와 반복 개선 - **Fidelity Fluency** - 프로젝트에 필요한 완성도 수준을 판단하는 능력이다. - 초기 아이디어 스케치에 과도한 시간을 쓰지 않고, 실제 영향력에 맞춰 디테일을 조절한다. - 불필요한 픽셀 단위 수정과 낭비를 줄이는 실무적 감각을 의미한다. - **WIP Waltz** - 진행 중인 작업을 끊임없이 수정하고 반복하는 과정을 춤에 비유한 표현이다. - 매 단계마다 새로운 관점과 개선 사항이 생기지만, 동시에 또 다른 수정 라운드가 시작된다. ### 원격 협업에서 발생하는 순간들 - **Icebroken** - 온라인 회의의 아이스브레이킹에서 지나치게 개인적인 이야기를 꺼내 어색해지는 상황이다. - 친밀감을 만들려던 시도가 오히려 ‘TMI’로 이어지는 순간을 풍자한다. - **Screenshare Scramble** - 화면 공유 직전이나 도중에 민감하거나 부끄러운 브라우저 탭을 급히 숨기는 행동이다. - Zoom 화면에 무엇이 나타날지 모르는 긴장감과 허둥거림을 표현한다. - **Zoombie** - Zoom 회의에 접속해 있지만 실제로는 거의 참여하지 않는 사람을 뜻한다. - 카메라 앞에는 존재하지만 정신적으로는 여러 회의와 화면 공유에 지친 상태다. - **Zoom Zen** - 명확한 안건, 원활한 음소거·해제, 시간 내 종료가 모두 이루어진 이상적인 화상회의 상태다. - 드물지만 회의가 효율적이고 만족스럽게 끝났을 때의 평온함을 의미한다. ### 메시지와 알림의 과부하 - **Keyboard Cardio** - 이메일과 Slack 메시지를 빠르게 입력하고 처리하는 일을 격렬한 유산소 운동처럼 표현한 말이다. - 실제 운동 효과보다는 메시지 작성이 유발하는 긴장과 스트레스를 농담처럼 강조한다. - **Slack-lash** - Slack 알림과 메시지가 한꺼번에 쏟아져 놀라고 압도되는 순간이다. - 디지털 메시지의 폭발적인 유입을 갑작스러운 반동이나 ‘채찍질’에 비유한다. - **Workplace Whack-a-Mole** - 업무, 알림, 이메일이 끊임없이 나타나 이를 계속 처리해야 하는 상황이다. - 하나를 끝내면 곧바로 다른 일이 튀어나오는 업무 환경의 피로와 혼란을 묘사한다. ### 멀티태스킹과 디지털 산만함 - **Toggle Tax** - 여러 업무 사이를 전환할 때 발생하는 인지적 비용이다. - 작업을 바꿀 때마다 집중력을 다시 끌어올려야 하므로, 멀티태스킹이 생산성을 떨어뜨릴 수 있음을 암시한다. - **Tab Tsunami** - 브라우저 탭이 지나치게 많이 열려 화면과 집중력을 모두 압도하는 상태다. - 수많은 정보와 작업을 동시에 붙잡으려는 디지털 업무 습관을 거대한 파도에 비유한다. ### 디자인 시스템과 협업 문화 - **Style Guide Safari** - 스타일 가이드 안에서 색상, 서체, 컴포넌트 등을 탐색하는 과정을 정글 탐험처럼 표현한 말이다. - 디자인 시스템이 풍부하고 복잡할수록 원하는 규칙을 찾아다니는 경험이 모험처럼 느껴질 수 있다. - **Sudden Heavy Stamping** - 협업 중 자신의 아이디어에 갑자기 여러 개의 +1, 하트, 스탬프가 몰리는 순간이다. - 실시간 협업 도구에서 사회적 인정과 즉각적인 피드백을 받는 기쁨을 뜻한다. - **UI Lock Ness Monster** - 다음 업데이트에 포함될 것이라는 소문만 무성하고 실제로는 계속 등장하지 않는 UI 기능이다. - 오랫동안 기대되지만 실현되지 않는 기능을 전설 속 괴물에 빗댄 표현이다. ### 글이 제시하는 업무 문화의 풍경 - 이 용어들은 새로운 기술 자체보다, 기술을 사용하는 과정에서 생긴 감정과 습관을 포착한다. - Zoom 피로, Slack 알림, 화면 공유 불안, 멀티태스킹 비용처럼 디지털 업무의 문제를 유머로 표현한다. - 동시에 비동기 업무, 팬데믹 이후의 업무 전환, 몰입 중심의 업무 방식 등 변화한 일하는 방식을 반영한다. - 이러한 표현은 업무의 혼란을 개인의 실패로만 보지 않고, 많은 사람이 공유하는 문화적 경험으로 바라보게 한다. 업무 효율을 높이려면 `Toggle Tax`를 줄이도록 작업 전환을 최소화하고, `Zoom Zen`을 위해 회의 안건과 종료 시간을 명확히 정하는 것이 좋다. 또한 `Fidelity Fluency`처럼 업무 목적에 맞는 완성도만 추구하면 불필요한 수정과 디지털 과부하를 줄일 수 있다.

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

FedRAMP를 향한 (새 탭에서 열림)

피그마(Figma)는 미국 연방 정부의 보안 인증 제도인 FedRAMP(Federal Risk and Authorization Management Program) 'Moderate' 등급의 인증 절차를 본격적으로 시작하며 공공 부문으로의 확장을 공식화했습니다. 이번 인증 추진은 공공 부문의 디지털 전환과 사용자 경험 개선을 지원하기 위한 핵심 단계로, 이를 통해 정부 기관은 피그마의 협업 기능을 안전하게 활용하여 더 나은 공공 서비스를 설계할 수 있게 됩니다. 피그마는 전담 팀을 구성하고 보안 표준을 강화함으로써 공공 분야에서도 민간 수준의 혁신적인 디자인 협업 환경을 구축하는 것을 최종 목표로 하고 있습니다. ### FedRAMP 인증 추진 배경과 의미 * 미국 정부 데이터를 다루는 애플리케이션에 필수적인 보안 인증인 FedRAMP 'Moderate' 등급 획득을 위한 '진행 중(in process)' 상태로 Marketplace에 등재되었습니다. * 이는 피그마가 연방 정부의 엄격한 보안 및 개인정보 보호 표준을 준수하기 위한 기술 감사를 거쳤으며, 최종 인증을 위한 마지막 단계에 진입했음을 의미합니다. * 팬데믹 이후 가속화된 공공 부문의 원격·하이브리드 근무 환경에서, 보안이 담보된 클라우드 기반 협업 도구에 대한 수요를 충족시키기 위한 결정입니다. ### 공공 부문에 제공하는 기술적 가치 * 정부 기관, 계약업체 및 공공 프로젝트 수행자들이 피그마 내에서 직접 소프트웨어를 설계하고 신속하게 프로토타입을 테스트할 수 있는 환경을 제공합니다. * 플랫폼에 구애받지 않는 브라우저 기반 협업 특성을 통해, 기술 도입이 늦었던 정부 조직 내에서도 부서 간 장벽을 허물고 디자인 반복 주기를 단축할 수 있습니다. * 더 접근성 높고 포용적인 디자인을 가능하게 함으로써, 궁극적으로 정부 애플리케이션의 UI/UX를 개선하고 대국민 서비스의 신뢰도를 높이는 데 기여합니다. ### 조직 역량 강화 및 향후 전략 * Zscaler, Datadog 등에서 공공 분야 경험을 쌓은 전문가를 영입하여 민간 부문의 성공 사례를 공공 부문의 요구사항에 맞춰 이식하는 0 to 1 전략을 실행 중입니다. * 내부적으로 상업용 팀과 정부 전담 팀 간의 양방향 지식 공유 체계를 구축하여, 서로 다른 규제 환경에서도 최적의 사용자 경험을 제공할 수 있도록 역량을 결집하고 있습니다. * 인증 완료 이후에는 연방 정부 규모의 대규모 데이터를 안전하게 호스팅하고, 복잡한 이해관계자들이 참여하는 공공 프로젝트의 효율성을 극대화할 예정입니다. 피그마의 이번 행보는 보안이 최우선인 공공 영역에서도 현대적인 협업 디자인 도구가 필수적임을 시사합니다. 공공 서비스 관련 프로젝트를 운영하거나 준비 중인 조직이라면, 피그마의 FedRAMP 인증 완료 이후 제공될 고수준의 보안 환경을 활용해 정부 표준에 부합하는 디지털 혁신을 계획해 볼 수 있습니다.

figma2분 읽기큐레이션 요약

Config 202

Figma의 Config 2023 현장을 실시간으로 전하는 라이브 블로그로, 행사 소식과 참가자 반응, 현장 분위기를 한곳에 모았다. 본문은 새로운 제품 발표나 기술 튜토리얼보다는 행사 중계와 커뮤니티의 에너지, 디자이너들의 다양한 경험을 공유하는 데 초점을 둔다. 행사 후에도 온라인 강연 영상과 소셜미디어 게시물을 통해 Config의 콘텐츠와 여운을 이어갈 수 있다고 안내한다. ## Config 2023 현장 중계 - Figma 에디토리얼 팀의 Herbert Lui와 Jenny Xie가 행사 현장을 취재하고 실시간으로 소식을 전했다. - 라이브 블로그 형식으로 Config 2023에서 벌어지는 다양한 장면과 참가자들의 반응을 소개했다. - 행사에 직접 참석하지 못한 사람도 현장 분위기를 간접적으로 경험할 수 있도록 구성했다. ## 강연과 행사 콘텐츠 - Config 2023의 전체 강연은 YouTube 플레이리스트에서 다시 볼 수 있도록 제공된다. - 행사 이후에도 강연 영상을 통해 주요 발표와 세션을 따라잡을 수 있다고 안내한다. - 블로그 자체보다 행사 전체 콘텐츠와 후속 시청 경험을 연결하는 데 의미를 둔다. ## 디자이너 커뮤니티와 소셜 반응 - `#Config2023`, `#confits2023` 등의 해시태그를 통해 참가자들이 행사 경험과 유머를 공유했다. - “Config에 참석하는 두 종류의 디자이너” 같은 밈과 게시물이 행사 참가자들의 다양한 성향을 가볍게 보여준다. - Figma 직원과 참가자들이 X(구 Twitter)에서 현장 사진, 감상, 행사 관련 농담을 활발히 주고받았다. - 공식 행사 보도와 커뮤니티의 비공식적인 반응이 함께 어우러져 Config의 축제 같은 분위기를 전달한다. ## 행사 이후의 여운 - 블로그는 Config 2023이 끝난 뒤에도 강연 영상과 소셜미디어 게시물을 통해 행사의 열기를 이어갈 수 있다고 강조한다. - 참가자들이 행사 종료 직후부터 다음 Config를 기대할 만큼 강한 인상을 받았다는 분위기를 전한다. - 전체적으로 제품 기능을 상세히 설명하기보다는 Config를 둘러싼 사람들, 콘텐츠, 커뮤니티 문화를 기록한 후기형 현장 보고에 가깝다. Config 2023의 발표 내용을 자세히 알고 싶다면 블로그의 라이브 중계보다 연결된 YouTube 강연 플레이리스트를 함께 확인하는 것이 가장 효과적이다. 행사 분위기와 참가자 반응에 관심이 있다면 `#Config2023` 관련 소셜 게시물을 함께 살펴볼 만하다.

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

리틀 빅 아웃테이크 |

Figma의 30개 이상 소규모 기능 업데이트는 처음 계획한 대로만 구현된 결과가 아니라, 개발 과정에서 발견한 엣지 케이스와 팀의 피드백을 반영해 완성됐다. 다중 선택 검색은 계층 구조를 시각화해 사용자의 혼란을 줄였고, 오버레이 블러는 위치 정보를 전달하는 방식으로 해결했으며, 캔버스 미리보기는 범위를 과감히 줄여 빠르게 출시했다. 이 글은 작은 기능도 실제 사용 맥락과 예외 상황을 깊이 검토할 때 훨씬 나은 사용자 경험으로 이어진다는 점을 보여준다. ## 엣지 케이스에서 출발한 다중 선택 검색 - 기능: 검색 결과에서 `Shift + Click` 또는 `Cmd`(Windows에서는 `Ctrl`)를 사용해 원하는 항목만 여러 개 선택하고 편집·교체할 수 있다. - 기존 Find and Replace 기능을 확장하면 비교적 간단할 것으로 예상했지만, 실제 구현 과정에서 복잡한 문제가 드러났다. - Figma에서는 프레임·컴포넌트·그룹 같은 부모 객체와 그 안의 자식 객체를 서로 독립적으로 선택하기 어렵다. - 검색 결과에 부모와 자식이 동시에 나타나면, 두 번째 항목을 선택하는 순간 의도하지 않은 하위 항목까지 함께 선택될 수 있었다. - 중첩 구조가 많은 파일에서는 어떤 객체가 실제로 선택되는지 파악하기 어려워, 기능은 작동하지만 사용자에게는 버그처럼 느껴졌다. - 해결책으로 검색 사이드바에 시각적 계층 구조를 도입했다. - 자식 항목이 어느 부모에 속하는지 표시 - `Command` 또는 `Shift`를 누른 상태에서 선택될 항목을 미리 강조 - 자동으로 포함되는 간접 선택 항목과 직접 선택한 자식 항목을 구분 - 이 사례에서 엣지 케이스는 부수적인 예외가 아니라, 다중 선택 기능의 핵심 설계를 결정하는 요소가 됐다. ## 팀 피드백으로 해결한 오버레이 블러 - 기능: 프로토타이핑에서 배경 블러가 적용된 오버레이가 실제로 뒤의 콘텐츠를 흐리게 표시한다. - 기존 렌더링 방식은 프레임 바로 아래에 있는 대상을 가져와 블러 처리하는 방식이었다. - 하지만 오버레이는 일반 프레임처럼 바로 아래에 대상이 존재하지 않기 때문에 블러가 안정적으로 렌더링되지 않았다. - 엔지니어 Brandon은 가능한 해결책과 예상되는 문제를 문서로 정리해 팀에 공유했다. - 팀은 오버레이의 위치 정보를 코드에 전달해 어느 영역을 블러 처리해야 하는지 정확히 판단하도록 제안했다. - 이후 오버레이와 해당 프레임의 관계를 명확히 연결하는 데이터를 추가했다. - 그 결과 여러 오버레이가 각자의 위치에 올바르게 그려지고, 서로 겹치는 레이어도 정확하게 합성될 수 있었다. - 이 과정은 특히 새로 합류한 구성원이 자신의 접근 방식을 팀의 검토와 피드백으로 검증하면서 자신감을 얻은 사례이기도 하다. ## 범위를 줄여 완성도를 높인 캔버스 미리보기 - 기능: 디자인 패널의 옵션 위에 마우스를 올리면 설정을 확정하기 전에 캔버스에서 결과를 미리 볼 수 있다. - 초기에는 블렌드 모드와 효과뿐 아니라 다음 기능까지 포함하려 했다. - Boolean 연산 - 컴포넌트 속성 - 폰트 선택기 - 그러나 모든 기능을 한 번에 지원하려 하면 구현 범위와 기술적 복잡도가 크게 증가했다. - 팀은 Figma 편집기에서 드롭다운으로 제공되는 속성을 전수 조사한 뒤, 구현 난이도와 사용자 가치에 따라 우선순위를 정했다. - 최종적으로는 기하 구조를 크게 변경하거나 캔버스 렌더링 방식을 대폭 수정하지 않아도 되는 기능을 우선 구현했다. - 처음에는 기능 수가 적으면 충분한 가치가 없을 수 있다는 우려가 있었지만, 제한된 범위만으로도 미리보기 경험은 충분히 강력하다는 결론에 도달했다. - 작은 기능을 빠르게 출시하려면 모든 경우를 다 지원하기보다, 사용자에게 즉시 가치를 주면서 기술적 위험이 낮은 영역부터 선택하는 것이 효과적이다. ## 작은 업데이트를 만드는 방식 - 30개 이상의 기능은 거대한 단일 프로젝트가 아니라 여러 팀의 작은 개선과 반복적인 의사결정으로 만들어졌다. - 초기 아이디어를 그대로 구현하기보다 실제 사용 상황에서 발생하는 혼란과 실패 가능성을 먼저 확인했다. - 설계와 엔지니어링이 긴밀하게 협업하며 시각적 피드백, 데이터 구조, 구현 범위를 함께 조정했다. - 문서화와 팀 리뷰는 특히 복잡한 문제를 구조화하고, 새로운 구성원이 해결책을 검증하는 데 중요한 역할을 했다. - 결과적으로 “작은 기능”도 사용자의 선택 방식, 렌더링 구조, 프로젝트 범위 같은 세부 사항을 깊이 고려해야 완성도 높은 기능이 된다. 실무적으로는 기능을 설계할 때 정상 동작만 확인하지 말고, 중첩 구조·동시 선택·레이어 순서 같은 엣지 케이스를 초기에 테스트하는 것이 좋다. 동시에 모든 기능을 한 번에 구현하려 하기보다, 사용자 가치가 크고 구조 변경이 적은 범위부터 출시한 뒤 점진적으로 확장하는 접근이 현실적이다.

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

FigJam의 테이블 기능: 기준 (새 탭에서 열림)

FigJam은 팀원들이 정보를 더 효과적으로 구조화하고 로드맵을 작성할 수 있도록 새로운 '테이블' 기능을 도입했습니다. 복잡한 데이터 연산보다는 시각적 가독성과 직관적인 편집 경험에 집중하여, 디자이너뿐만 아니라 비전문가도 쉽게 협업 도구로 활용할 수 있도록 설계된 것이 특징입니다. 특히 멀티플레이어 환경에서의 데이터 충돌을 해결하고 사용자의 줌(Zoom) 수준에 따른 최적화된 UI를 제공함으로써 FigJam만의 독특한 사용성을 완성했습니다. ## FigJam 테이블의 지향점: 단순함과 시각적 전달 * 엑셀이나 구글 스프레드시트 같은 복잡한 데이터 조작보다는 정보를 시각적으로 명확하게 전달하는 데 우선순위를 두었습니다. * 사용자들이 기존에 스티키 노트나 도형을 조합해 수동으로 표를 만들던 불편함을 해소하고, 네이티브 기능을 통해 성능과 사용성을 동시에 개선했습니다. * 기획서(PRD) 작성, 프로젝트 진행 상황 추적, 브레인스토밍 결과 정리 등 협업 과정에서 발생하는 다양한 시나리오를 지원합니다. ## 제작자와 사용자 모두를 고려한 디자인 시스템 * 툴바 클릭 한 번으로 미리 정의된 스타일의 테이블을 생성할 수 있어, 사용자가 폰트나 간격을 일일이 조정하는 번거로움을 줄였습니다. * 새로운 행이나 열을 추가할 때 이전 셀의 스타일(색상, 속성 등)을 자동으로 상속받아 시각적 일관성을 유지합니다. * 테이블 전체 색상을 변경하면 내부 텍스트 색상이 배경에 맞춰 자동으로 반전되거나 조정되어 최적의 가독성을 보장합니다. ## 멀티플레이어 환경을 위한 엔지니어링 * 여러 사용자가 동시에 서로 다른 셀을 편집하거나 같은 위치에 데이터를 입력할 때, 단순한 '덮어쓰기'가 아닌 데이터가 적절히 병합(Merge)되도록 정교한 로직을 구현했습니다. * 개발 시간의 50% 이상을 멀티플레이어 관련 버그 수정과 예외 상황 처리에 투입하여 실시간 협업의 안정성을 확보했습니다. * 다수의 사용자가 동시에 작업할 때 UI가 화면을 가리거나 혼란을 주는 것을 방지하기 위해, 편집 도구가 마우스 커서를 따라다니는 '호버(Hover)' 방식을 채택했습니다. ## 컨텍스트에 반응하는 스마트 인터렉션 * 사용자의 화면 확대/축소(Zoom) 비율에 따라 인터페이스가 유동적으로 변합니다. * 화면을 멀리서 볼 때는 테이블 이동 및 전체 구조 재배치 기능에 집중하고, 화면을 가까이 확대하면 셀 세부 편집이나 행/열 추가 버튼이 활성화되어 화면의 혼잡도를 낮췄습니다. * 이를 통해 사용자는 작업의 맥락에 맞는 기능만 직관적으로 노출받으며 작업 효율을 높일 수 있습니다. **결론 및 추천** FigJam 테이블은 강력한 기능보다 사용자의 '자연스러운 협업 흐름'을 중시한 결과물입니다. 복잡한 수식이나 데이터 분석보다는 팀원 간의 아이디어 공유, 일정 관리, 회의록 정리 등 정보의 시각화가 필요한 팀에게 강력히 추천합니다.

figma3분 읽기큐레이션 요약

다크 모드 밝히

Figma의 다크 모드는 색상만 어둡게 바꾸는 단순한 프런트엔드 작업이 아니라, 제품 전반의 UI 상태와 접근성, 향후 테마 확장성을 함께 해결해야 하는 시스템 구축 프로젝트였다. Figma는 사용자 요청에 대응하는 동시에 시각적 접근성을 높이고, 새로운 기능이 처음부터 다크 모드를 지원하도록 만드는 것을 목표로 했다. 이를 위해 전체 UI를 조사하고 여러 팀의 공통 컴포넌트를 체계적으로 refactoring하는 방식을 택했다. ## 다크 모드가 필요했던 이유 - 다크 모드는 Figma 사용자들이 가장 많이 요청한 기능 중 하나였다. - 야간 작업 시 밝은 화면으로 인한 불편을 줄일 수 있었다. - 시각 장애나 특정 시각적 질환이 있는 사용자에게 다크 모드가 더 읽기 쉬울 수 있었다. - 색상 대비는 WCAG 접근성 지침의 핵심 요소이므로, 다크 모드는 Figma의 “디자인을 모두에게 accessible하게 만든다”는 목표와도 연결됐다. - 일반적으로는 라이트 모드가 시각적 수행 능력에 유리하지만, 백내장 등 특정 질환이 있는 사람은 다크 모드에서 더 나은 성능을 보일 수 있다. ## 단순한 색상 교체가 아니었던 이유 - 처음에는 모든 밝은 색을 어두운 색으로 바꾸면 된다고 생각했지만, 실제로는 UI의 상태와 맥락을 함께 고려해야 했다. - 다크 모드 전환 시 다음 요소를 결정해야 했다. - 밝은 편집기 패널을 어둡게 바꾸고 아이콘과 텍스트를 밝게 할지 - 라이트 모드에서도 이미 어두운 툴바와 메뉴를 그대로 유지할지 - 캔버스 배경처럼 사용자가 만든 콘텐츠까지 테마에 따라 변경할지 - C++ 렌더링 엔진이 그리는 투명도 격자 등의 색상도 변경할지 - Figma 전체가 아니라 편집기 등 특정 영역만 지원할지에 대한 제품 범위 결정도 필요했다. ## 전체 UI 감사와 범위 설정 - 개발에 앞서 각 팀원이 Figma 앱의 UI 표면을 조사하고, 다크 모드로 재구성하기 어려운 부분을 파악했다. - 프로젝트 시작 당시 Figma에는 10개의 제품 엔지니어링 팀이 있었고, 각 팀이 모달, 패널, 툴바 등 주요 UI 영역을 담당했다. - 하나의 UI 요소도 여러 상태와 복잡한 예외 상황을 포함할 수 있었다. - 특정 조건에서만 나타나는 상태 - 여러 뷰와 화면 - 숨겨진 서브모달과 드롭다운 - 따라서 표면적으로 보이는 화면뿐 아니라 모든 상태와 엣지 케이스까지 다크 모드 범위에 포함해야 했다. ## 확장 가능한 테마 시스템의 목표 - 목표는 현재 다크 모드만 구현하는 것이 아니었다. - 두 가지 장기 목표를 세웠다. - 개발자가 새로운 기능을 다크 모드 지원과 함께 바로 만들 수 있도록 하기 - 향후 Figma와 FigJam에 새로운 테마를 쉽게 추가할 수 있도록 하기 - 공통 UI 컴포넌트는 다크 모드를 지원해야 하지만, 다크 모드가 적용되지 않는 화면에서는 기존 동작과 외관을 유지해야 했다. - 구현 과정에서 기존 기능을 깨뜨리지 않는 회귀 방지(regression-proof) 구조가 중요했다. - 새로운 엔지니어의 온보딩과 향후 예측하지 못한 요구사항 대응까지 고려해, 적용과 유지보수가 쉬운 방식이 필요했다. ## 프로젝트 규모가 만든 엔지니어링 과제 - Figma의 UI가 여러 팀에 분산되어 있어 소수의 엔지니어만으로 전체를 처리하기 어려웠다. - 각 팀이 소유한 컴포넌트와 화면을 공통 원칙에 맞게 바꿔야 했다. - 단순히 색상 값을 교체하는 것이 아니라, 컴포넌트가 어떤 표면과 상태에서 사용되는지까지 체계적으로 분리해야 했다. - 이 경험은 개별 기능을 추가하는 방식보다, 제품 전체에서 재사용할 수 있는 디자인·엔지니어링 시스템을 구축하는 접근이 필요하다는 점을 보여준다. 다크 모드처럼 겉보기에는 간단한 기능도 실제로는 UI 상태, 접근성, 팀 간 소유권, 공통 컴포넌트, 향후 확장성을 함께 설계해야 한다. 유사한 기능을 구현할 때는 특정 화면의 색상부터 바꾸기보다 전체 범위를 먼저 감사하고, 테마 토큰과 공통 컴포넌트를 중심으로 회귀를 방지할 수 있는 구조를 마련하는 것이 바람직하다.

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

피그마가 스프링

Figma는 베지어 곡선 대신 물리 법칙을 기반으로 한 스프링 애니메이션을 도입해 더 자연스럽고 직관적인 움직임을 구현했다. 질량, 강성, 감쇠라는 물리적 매개변수로 움직임을 계산하면 오버슈트와 감속을 자연스럽게 표현할 수 있다. 다만 디자이너가 물리 상수를 직접 조정하기는 어렵기 때문에, 실제 제품에서는 이 값을 UI 속도·탄성·오버슈트 같은 직관적인 개념으로 다루는 것이 중요하다. ## 스프링 애니메이션이 필요한 이유 - 기존 Figma의 주요 방식은 베지어 애니메이션이었다. - 베지어 곡선은 시작과 종료 시점의 움직임을 세밀하게 지정할 수 있지만 다음 문제가 발생할 수 있다. - 물체가 갑자기 가속하는 것처럼 보임 - 이동 방향이 부자연스럽게 바뀜 - 속도가 아무 이유 없이 증가하는 느낌을 줌 - 정지 시점이 어색해짐 - 스프링 애니메이션은 이동 경로를 직접 그리는 대신, 물리적 속성을 지정하고 그 결과로 움직임을 계산한다. - 이를 통해 다음과 같은 자연스러운 효과를 만들 수 있다. - 무게감 있는 UI 요소의 움직임 - 적절한 오버슈트가 있는 팝업 - 부드럽게 감속하는 화면 전환 - FigJam의 이모트나 하이파이브처럼 생동감 있는 인터랙션 ## 질량·강성·감쇠로 움직임 정의하기 스프링 애니메이션은 세 가지 주요 변수로 구성된다. - **질량(Mass, m)** - 물체가 무거울수록 같은 힘으로 가속하기 어렵다. - 뉴턴의 운동 법칙으로 `F = m × a`로 표현된다. - 질량을 높이면 일반적으로 애니메이션이 더 느리고 묵직해진다. - **강성(Stiffness, k)** - 스프링이 원래 위치로 돌아가려는 힘의 정도다. - 스프링을 많이 당길수록 더 강하게 저항한다. - 훅의 법칙은 `F = -k × x`로 표현된다. - 강성이 높으면 목표 위치로 빠르게 복귀하고, 움직임이 더 민첩해진다. - **감쇠(Damping, b)** - 마찰처럼 움직임을 줄여 물체가 멈추도록 만드는 저항이다. - 속도가 빠를수록 더 큰 저항을 받으며 `F = -b × v`로 표현된다. - 감쇠가 높으면 흔들림과 오버슈트가 줄어들고 더 차분하게 멈춘다. - 세 변수의 조합에 따라 애니메이션은 부드럽거나, 빠르거나, 튀거나, 느린 형태로 달라진다. ## 물리 공식에서 코드로 - 스프링 애니메이션은 이미 정립된 물리 공식을 활용하므로, 이론을 코드로 옮기는 과정 자체는 안정적이다. - Figma는 개발 과정에서 **WebKit SpringSolver**를 활용했다. - 이 솔버에 질량, 강성, 감쇠 값을 입력하면 특정 시간의 위치 값 `x`를 계산할 수 있다. - 결과적으로 시간에 따른 위치를 구해 UI 요소를 애니메이션할 수 있다. ## 물리 매개변수와 디자이너의 언어 사이의 간극 - 질량·강성·감쇠는 정확한 물리 모델이지만, 디자이너가 애니메이션을 조정할 때 사용하는 표현과는 다르다. - 디자이너는 보통 다음과 같이 생각한다. - 더 빠르게 - 더 느리게 - 더 탄력 있게 - 더 많이 튀게 - 오버슈트를 줄이게 - 예를 들어 애니메이션을 느리게 만들 때 질량을 높일 수 있지만, 강성과 감쇠도 속도에 영향을 주므로 단순히 한 변수만 바꾸면 원하는 결과가 나오지 않을 수 있다. - 따라서 세 물리 변수 사이의 상호작용을 고려해 조정해야 한다. - Figma는 디자이너가 물리 공식을 직접 이해하지 않아도 자연스러운 결과를 만들 수 있도록, 세 변수를 한곳에서 조정하는 전용 도구를 개발하려 했다. ## 실용적인 결론 스프링 애니메이션은 이동 경로를 수작업으로 설계하기보다 물리적 규칙을 적용해 자연스러운 움직임을 얻는 방식이다. 구현 시에는 WebKit SpringSolver 같은 검증된 솔버를 활용하고, 사용자 인터페이스에서는 질량·강성·감쇠 대신 속도·탄성·오버슈트처럼 이해하기 쉬운 추상화를 제공하는 것이 효과적이다.

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

Figma의 새로운 소식:

2022년 4월 Figma 업데이트는 팀이 FigJam에서 더 체계적이고 개성 있게 브레인스토밍·회고를 진행하도록 돕는 데 초점을 맞췄다. 섹션, 색상, 글꼴, 정렬, 잠금 기능으로 보드 구성을 개선하고, 와시 테이프와 스티커 팩 등 표현 요소를 강화했다. 결과적으로 FigJam은 협업의 구조뿐 아니라 참여와 재미까지 높이는 방향으로 확장됐다. ## FigJam 보드 구성과 사용자 지정 기능 강화 - **섹션(Sections)**을 만들어 하나의 FigJam 파일 안에서 워크숍, 회고, 팀 미팅 등 영역을 구분할 수 있다. - 스티키 노트와 도형에 제공되는 색상 선택 폭이 넓어졌으며, **사용자 지정 색상**도 추가할 수 있다. - 스티키 노트의 크기를 다른 콘텐츠와 비례하도록 조정해 보드 전체의 일관성을 유지할 수 있다. - 제목과 라벨에 적합하도록 **글꼴 크기를 자유롭게 조절**해 정보의 계층 구조와 시각적 비중을 표현할 수 있다. - 스냅 기능이 개선되어 객체를 더 정확하게 정렬하고 배치할 수 있다. - 여러 객체를 한 번에 선택해 **동시에 잠그거나 잠금 해제**할 수 있어 보드 편집 중 실수로 요소가 움직이는 것을 방지한다. ## 협업 분위기를 높이는 표현 기능 - 커서 채팅이 더 표현력 있게 개선되어 실시간 협업 중 감정이나 반응을 전달하기 쉬워졌다. - Figma Community 구성원이 제작한 새로운 스티커 팩 4종이 추가됐다. - Jiro Bevis, Diana Marmol, Rooney, Fanny Luor가 스티커 디자인에 참여했다. - “stellar work”, “slay”, “let’s jam” 같은 문구와 캐릭터를 활용해 칭찬, 응원, 분위기 전환을 시각적으로 표현할 수 있다. ## 와시 테이프의 정식 기능화 - 한시적으로 제공됐던 **와시 테이프(Washi tape)**가 FigJam의 영구 기능으로 돌아왔다. - 새롭게 디자인된 수십 가지 테이프 옵션을 제공한다. - 사용자가 직접 패턴을 업로드해 자신만의 테이프를 만들 수 있다. - 실제 물리적 협업 도구의 감각을 디지털 보드에 재현해 아이디어를 강조하거나 콘텐츠를 장식하는 데 활용할 수 있다. ## 업데이트의 방향성 - 이번 업데이트는 단순한 생산성 기능 추가보다 **구조화와 개인화의 균형**에 초점을 둔다. - 섹션·정렬·잠금 기능은 복잡한 협업 보드를 관리하기 쉽게 만들고, 색상·스티커·와시 테이프는 팀의 개성과 참여감을 높인다. - 브레인스토밍뿐 아니라 워크숍, 주간 미팅, 회고 등 다양한 팀 활동에 FigJam을 적용할 수 있도록 기능 범위를 넓혔다. 팀 보드를 자주 운영한다면 섹션으로 작업 영역을 나누고, 색상과 글꼴 크기로 정보 계층을 만든 뒤, 잠금과 스냅 기능으로 레이아웃을 고정하는 방식이 효과적이다. 여기에 스티커나 와시 테이프를 선택적으로 활용하면 보드의 가독성과 협업 분위기를 함께 개선할 수 있다.

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

Figma의 새로운 기능: 2

2022년 2월 Figma 업데이트는 디자인 과정에 더 많은 사람을 참여시키고, 필요한 파일과 리소스를 빠르게 찾도록 돕는 데 초점을 맞췄습니다. Figma 검색 기능을 개선하고, FigJam의 정식 출시와 함께 협업·브레인스토밍 도구를 직관적으로 다듬었습니다. 또한 Figma Enterprise와 새로운 FigJam 요금제를 출시해 조직 단위 협업도 강화했습니다. ## Figma Enterprise 및 새로운 FigJam 요금제 - 디자인 프로세스에 더 많은 구성원이 참여할 수 있도록 새로운 Figma Enterprise 플랜을 출시했습니다. - FigJam에도 새로운 요금제를 도입해 브레인스토밍과 협업 기능을 다양한 규모의 팀이 활용할 수 있도록 했습니다. - 아이디어 발상부터 실제 제품 개발까지 팀 전체가 같은 흐름 안에서 협업하는 것을 목표로 합니다. ## 검색 기능 개선 - **파일 미리보기**를 제공해 검색 결과에서 파일의 실제 내용을 확인할 수 있습니다. - 파일 이름이 비슷하거나 여러 버전이 존재할 때 원하는 파일을 더 쉽게 식별할 수 있습니다. - 최근 파일, 팀 페이지, 검색 결과에서 **Figma 파일과 FigJam 파일을 유형별로 필터링**할 수 있습니다. - 불필요한 파일을 열어 확인하는 시간을 줄이고 작업 흐름을 유지할 수 있습니다. ## FigJam 리소스 메뉴 통합 - FigJam의 툴바를 단순화하고 컴포넌트, 템플릿, 위젯 등 다양한 리소스를 한곳에서 찾을 수 있도록 했습니다. - 회의 준비나 소규모 브레인스토밍 중에도 캔버스에 필요한 요소를 빠르게 추가할 수 있습니다. - 리소스 탐색 위치를 통합해 FigJam의 기본 사용 경험을 더 직관적으로 만들었습니다. ## 텍스트 크기 조정 강화 - 텍스트 상자 모서리를 클릭하고 드래그해 원하는 크기로 텍스트를 조정할 수 있습니다. - 다양한 글자 크기를 사용해 아이디어를 그룹화하고 콘텐츠의 계층 구조를 표현할 수 있습니다. - 진행자는 중요한 내용을 크게 표시해 회의 참가자에게 우선순위를 명확히 전달할 수 있습니다. ## 스탬프와 하이라이트의 객체 연결 - 스탬프와 하이라이트가 연결된 객체에 고정되도록 개선했습니다. - 객체를 캔버스의 다른 위치로 이동해도 해당 객체에 붙은 반응과 강조 표시가 함께 이동합니다. - 브레인스토밍에서 특정 아이디어에 대한 공감, 투표, 강조 상태를 더 안정적으로 기록할 수 있습니다. ## 색상과 도형을 빠르게 변경 - 복잡한 플로우나 다이어그램에서 색상과 도형을 시각적 구분 요소로 활용할 수 있습니다. - 툴바의 색상 선택기와 도형 변경 아이콘을 조정해 관련 기능을 더 빠르게 찾도록 했습니다. - 작업 중인 도형의 형태와 색상을 반복적으로 바꾸며 흐름을 쉽게 정리할 수 있습니다. ## 이미지 강조 기능 - FigJam 캔버스에 추가한 이미지에 테두리를 적용할 수 있습니다. - 여러 이미지 중 중요한 이미지나 참고 자료를 시각적으로 돋보이게 만들 수 있습니다. ## 선택 테두리 개선 - 선택 테두리를 더 얇게 만들어 도형의 채우기 영역과 겹치는 문제를 줄였습니다. - 선택 모서리를 더 크게 조정해 객체를 잡거나 크기를 조절하기 쉬워졌습니다. - 결과적으로 캔버스 위 객체를 선택하고 편집하는 조작성이 향상되었습니다. 이번 업데이트는 파일 탐색 시간을 줄이고, FigJam에서 브레인스토밍 결과를 더 명확하게 구조화하는 데 유용합니다. 팀에서는 파일 유형 필터와 미리보기를 적극 활용하고, FigJam에서는 객체에 연결되는 스탬프·하이라이트와 텍스트 크기 조정을 사용하면 협업 내용을 더 정확하게 전달할 수 있습니다.

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

빌드 비하인드: 개발

Tekeste Kidanu는 디자이너의 생산성을 높이는 Figma·FigJam 플러그인과 위젯을 개발하며, 커뮤니티의 요구에서 제품 아이디어를 얻는 개발자다. 대표작인 SPELLL은 문서의 맞춤법과 문법 오류를 찾아 수정하도록 돕고, FigJam용 Notes·색상 선택기·투표 위젯 등으로 영역을 확장하고 있다. 그는 Figma 플러그인 API가 기존 JavaScript·웹 개발 지식만으로도 접근하기 쉽고, 공개 플랫폼 전환이 더욱 다양한 창작물을 이끌 것이라고 기대한다. ## 개발자 배경과 디자인 학습 - Tekeste Kidanu는 `tkmadeit`이라는 이름으로 활동하는 프론트엔드 개발자다. - 2016년 미국으로 이주해 컴퓨터 과학을 공부했으며, 웹 기술에 관심이 많다. - Figma 플러그인을 만들면서 디자인 자체에도 흥미를 느끼게 됐다. - 좋은 UI를 구별하는 것에서 나아가 직접 디자인하기 위해 색채 이론과 타이포그래피 같은 UI 디자인 기초를 학습하고 있다. ## SPELLL: Figma·FigJam용 맞춤법 검사기 - 대표 플러그인인 SPELLL은 Figma와 FigJam 문서의 철자 및 문법 오류를 검사한다. - Grammarly와 유사하게 오류를 찾아내고 사용자가 쉽게 수정할 수 있게 한다. - 디자이너가 파일을 수동으로 검토하는 시간을 줄이고, 발표나 공유 과정에서 오탈자로 곤란을 겪는 일을 방지하는 것이 목표다. - Figma뿐 아니라 FigJam에서도 사용할 수 있도록 확장됐다. ## 커뮤니티에서 얻는 아이디어 - 플러그인 아이디어는 Figma Forum, Designer News, Twitter 등 디자인 커뮤니티에서 주로 얻는다. - 사용자들이 요청하는 기능과 반복적으로 제기되는 불편을 관찰해 실제 수요가 있는 문제를 찾는다. - Figma 공식 계정의 트윗이나 디자이너들의 기능 요청도 중요한 영감의 원천이다. - Friends of Figma와 같은 Slack 커뮤니티에서는 실제 Figma 사용자를 만나고 요구사항을 파악할 수 있다. - 새 플러그인을 구상할 때 Twitter나 포럼에서 기능 요청을 검색해보는 방법을 추천한다. ## Figma 플러그인 API로 시작하기 - 먼저 플러그인이 어떤 방식으로 동작해야 하는지 조사한 뒤 개발에 착수했다. - Figma 플러그인 API 공식 문서를 읽으며 기능과 구조를 익혔다. - Figma Plugins Slack 워크스페이스에서 질문하고 다른 개발자들의 도움을 받았다. - 디자인 플러그인을 처음 만들었지만, 기존 JavaScript와 웹 개발 경험만으로도 시작할 수 있었다. - API가 직관적이고 진입 장벽이 낮았다는 점을 개발 과정에서 가장 놀라운 부분으로 꼽았다. ## FigJam으로의 확장 - FigJam이 플러그인을 지원한다는 소식을 듣고 기존 Figma 플러그인을 FigJam으로 이전하기 시작했다. - Figma와 FigJam의 API 및 개발 절차가 거의 비슷해 확장이 수월했다. - 이를 통해 하나의 플러그인 개발 경험을 두 협업 도구로 넓힐 수 있었다. - Figma가 기본 기능으로 제공하지 않는 기능도 플러그인 API를 통해 먼저 구현할 수 있다는 점을 활용했다. ## Notes와 색상 선택기 위젯 - Notes는 FigJam 보드 안에서 상세한 메모를 작성할 수 있는 위젯이다. - 일반 텍스트와 Markdown 형식을 지원한다. - 보드 위에 메모를 직접 배치해 화면을 복잡하게 만들지 않고 별도로 정리할 수 있도록 설계됐다. - FigJam용 색상 선택기는 사용자가 원하는 색상의 스티키와 도형을 만들도록 돕는다. ## 투표 위젯과 향후 계획 - Tekeste는 FigJam용 투표 위젯의 첫 버전을 공개했다. - 익명 투표와 실명 투표를 모두 지원한다. - 기존 기능을 계속 개선해 최고의 투표 위젯으로 발전시키는 것이 목표다. - 앞으로는 FigJam 파일 참여자들이 현재 듣고 있는 음악을 보여주는 위젯도 만들어보고 싶다고 밝혔다. ## 공개 플랫폼에 대한 기대 - Figma는 내부에서 몇 주간 위젯을 개발한 뒤 외부 개발자 커뮤니티에도 API를 개방했다. - Tekeste는 FigJam 플러그인과 위젯의 공개 출시가 다양한 실험과 창작을 촉진할 것으로 기대한다. - 특히 장난스럽고 생동감 있는 인터페이스가 인기를 얻는 흐름에 관심을 보였다. - Apple Maps의 3D 랜드마크 표현과 Honk의 playful한 iOS UI를 인상적인 사례로 언급했다. 새로운 Figma·FigJam 기능을 만들고 싶다면 사용자가 반복해서 제기하는 불편을 커뮤니티에서 찾고, 공식 API 문서와 개발자 커뮤니티를 활용해 작은 프로토타입부터 시작하는 접근이 효과적이다. Figma와 FigJam의 유사한 API 덕분에 하나의 아이디어를 두 환경으로 확장하기도 쉽다.

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

학생 및 교육자를 위한

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

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