작지만 큰 업데이트: 디자인 (새 탭에서 열림)

피그마(Figma)는 대규모 기능 개발에 밀려 자칫 소홀해질 수 있는 작은 버그와 UX 불편 사항들을 해결하기 위해 '퀄리티 위크(Quality Week)'라는 집중 개선 기간을 운영합니다. 이 과정을 통해 탄생한 '작지만 큰 업데이트(Little Big Updates)'들은 사용자들의 일상적인 작업 흐름을 방해하는 '잔가시' 같은 문제들을 제거하여 제품의 완성도를 비약적으로 높입니다. 결과적으로 이러한 세밀한 개선의 축적은 단순히 기능을 추가하는 것보다 사용자의 신뢰와 제품의 전문성을 확보하는 데 더욱 결정적인 역할을 합니다. **퀄리티 위크의 목적과 철학** * 새로운 대형 기능 출시보다는 기존 기능의 완성도를 높이는 '폴리싱(Polishing)' 작업에 모든 엔지니어링 역량을 집중합니다. * 우선순위에서 밀리기 쉬운 미세한 UI 불일치, 성능 저하, 사소한 버그들을 한꺼번에 해결하여 기술 부채를 청산합니다. * 사용자가 제품을 사용할 때 느끼는 미묘한 마찰력을 줄여, 도구와 사용자 사이의 심리적 거리감을 최소화하는 것을 목표로 합니다. **성능 최적화와 인터랙션 정밀도 개선** * 캔버스 내 레이어 선택 속도를 개선하고, 복잡한 디자인 파일에서의 스크롤 및 줌 성능을 최적화하여 조작감을 향상했습니다. * 개별 픽셀 단위의 정렬(Snapping) 로직을 정교화하여 디자이너들이 의도한 대로 정확하게 요소를 배치할 수 있도록 지원합니다. * 반복적인 작업에서 발생하는 불필요한 클릭 횟수를 줄이기 위해 단축키와 대량 편집(Bulk actions) 기능을 보강했습니다. **사용성 향상과 시각적 일관성 확보** * 인터페이스 전반의 타이포그래피, 아이콘 스타일, 간격 등을 재정비하여 시각적 인지 부하를 줄였습니다. * 접근성(Accessibility) 기준을 강화하여 다양한 환경의 사용자들이 불편함 없이 협업할 수 있는 환경을 구축했습니다. * 사용자의 실수로 발생할 수 있는 데이터 손실이나 혼란을 방지하기 위해 경고 메시지와 안내 문구를 명확하게 다듬었습니다. **지속 가능한 품질 관리 체계** * 퀄리티 위크는 단발성 이벤트에 그치지 않고, 엔지니어들이 자발적으로 품질 개선에 참여하는 조직 문화를 형성하는 계기가 됩니다. * 사용자 피드백 커뮤니티에서 가장 많이 언급된 '작은 불편함'들을 데이터화하여 개선 작업의 우선순위를 결정합니다. * 작은 개선 사항들이 모여 전체 제품의 브랜드 가치를 결정한다는 믿음을 바탕으로 정기적인 업데이트 주기를 유지합니다. 제품의 완성도는 거창한 기능 한두 개가 아니라, 사용자가 매일 마주하는 수많은 작은 순간의 만족감에서 결정됩니다. 개발 팀은 정기적으로 '품질 개선 주간'을 설정하여 사소해 보이는 버그와 UX 결함을 해결함으로써, 기술적 부채를 관리하고 사용자 충성도를 높이는 전략적 투자를 지속해야 합니다.

Figma의 새로운 소식: (새 탭에서 열림)

What’s new in Figma: June 2022 Inside Figma Product updates

다크 모드 밝히 (새 탭에서 열림)

피그마는 프로토타이핑 도구에 물리 기반의 스프링 애니메이션을 도입하여 더욱 생동감 있고 자연스러운 사용자 경험을 구현했습니다. 기존의 시간 기반(easing curve) 방식이 가진 한계를 극복하기 위해 물리 법칙인 '조화 진동자(Harmonic Oscillator)' 모델을 채택했으며, 이를 통해 애니메이션이 도중에 중단되거나 변경되어도 속도의 연속성을 유지하며 부드럽게 이어지도록 설계했습니다. 결과적으로 디자이너는 복잡한 수식 없이도 직관적인 컨트롤러를 통해 실제 사물처럼 반응하는 정교한 인터랙션을 제작할 수 있게 되었습니다. ### 이징 곡선의 한계와 물리 기반 애니메이션의 필요성 * 전통적인 애니메이션 방식인 '큐빅 베지어(Cubic Bezier)' 곡선은 정해진 시간 내에 움직임이 완료되어야 하므로, 사용자의 급격한 입력 변화나 애니메이션 중첩 시 끊기는 듯한(jerkiness) 느낌을 줍니다. * 스프링 애니메이션은 물리학의 질량, 강성, 감쇠 개념을 도입하여 애니메이션이 고정된 시간이 아닌 '속도'와 '힘'에 반응하게 만듭니다. * 이를 통해 요소가 목적지에 도달할 때의 탄성(bounce)을 자연스럽게 표현할 수 있으며, 이전 동작의 운동량을 다음 동작으로 매끄럽게 전달할 수 있습니다. ### 스프링 동작을 결정하는 수학적 모델: 감쇠 조화 진동자 * 피그마는 스프링의 움직임을 계산하기 위해 미분 방정식인 '감쇠 조화 진동자' 공식($mx'' + cx' + kx = 0$)을 사용합니다. * 애니메이션의 상태는 세 가지로 구분됩니다: * **저감쇠(Underdamped):** 마찰이 적어 목표 지점을 지나쳐 앞뒤로 흔들리며 탄성이 발생하는 상태입니다. * **임계 감쇠(Critically Damped):** 흔들림 없이 가장 빠르게 목표 지점에 도달하는 최적의 상태입니다. * **과감쇠(Overdamped):** 마찰이 강해 목표 지점까지 아주 천천히 도달하는 상태입니다. * 피그마는 매 프레임마다 수치 해석적 시뮬레이션을 돌리는 대신, 해석적 해(Analytical solution)를 사용하여 특정 시간 $t$에서의 위치를 즉각 계산함으로써 성능 효율을 극대화했습니다. ### 디자이너를 위한 직관적인 파라미터 설계 * 질량(Mass), 강성(Stiffness), 감쇠(Damping)라는 물리 용어는 디자이너가 직관적으로 이해하기 어려울 수 있습니다. * 피그마는 이를 시각적인 그래프와 미리보기를 통해 제공하며, 특히 '탄성(Bounce)'과 '속도'를 조절하는 직관적인 UI를 구현하여 물리 법칙을 모르는 사용자도 원하는 느낌을 쉽게 찾을 수 있도록 했습니다. * 또한, 이론적으로 스프링은 영원히 멈추지 않으므로, 움직임이 특정 임계값(Epsilon) 이하로 떨어지면 애니메이션이 종료된 것으로 간주하는 로직을 정교하게 설계하여 불필요한 리소스 소모를 방지했습니다. ### 연속성을 보장하는 애니메이션 인터럽트 처리 * 사용자가 애니메이션이 끝나기 전에 다른 인터랙션을 시도할 경우, 피그마의 스프링 모델은 현재의 위치와 '속도'를 그대로 다음 애니메이션의 시작점으로 전달합니다. * 기존 방식은 속도가 0에서 다시 시작하여 시각적 단절이 발생하지만, 스프링 모델은 이전의 운동 에너지를 보존하므로 물리적으로 타당하고 매끄러운 전환이 가능합니다. 현대적인 인터페이스 디자인에서 '부드러움'은 단순한 심미적 요소를 넘어 제품의 완성도를 결정짓는 핵심 요소입니다. 피그마의 사례처럼 물리 기반의 스프링 모델을 도입하면 개발자와 디자이너 모두가 납득할 수 있는 수학적 근거 위에서 사용자에게 가장 자연스러운 반응형 인터랙션을 제공할 수 있습니다. 특히 인터랙션이 빈번한 모바일 앱이나 복잡한 웹 대시보드를 개발할 때, 고정된 시간 기반의 애니메이션보다는 물리 법칙을 활용한 접근을 권장합니다.

디지털 디자인은 이제 어엿한 (새 탭에서 열림)

지난 10년 동안 디자인은 제품의 외관을 꾸미는 수준을 넘어 비즈니스 전략의 핵심 동력으로 진화했습니다. 웹 기반 도구의 등장은 디자인 프로세스를 폐쇄적인 개인 작업에서 실시간 협업 체제로 전환시켰으며, 이는 디자이너와 엔지니어, 이해관계자 사이의 장벽을 허무는 결과를 낳았습니다. 결과적으로 현대의 디자인은 제품 개발의 전 과정에 깊숙이 통합되어, 복잡한 문제를 해결하고 대규모 시스템을 관리하는 중추적인 역할을 수행하고 있습니다. ### 디자인 위상의 변화와 '제품 디자인'의 탄생 * 과거 디자인이 개발 마지막 단계에서 미학적 완성도를 높이는 작업이었다면, 현재는 제품의 초기 기획부터 사용자 경험 전체를 설계하는 전략적 단계로 격상되었습니다. * 시각적 요소에 집중하던 'UI/UX 디자이너'라는 호칭이 비즈니스 목표와 기술적 제약을 동시에 고려하는 '프로덕트 디자이너'로 대체되는 추세입니다. * 디자인 주도 기업들이 시장에서 높은 성과를 거두면서, 경영진 수준에서 디자인적 사고(Design Thinking)를 의사결정에 반영하는 사례가 보편화되었습니다. ### 클라우드와 멀티플레이어 협업의 시대 * 로컬 설치형 소프트웨어에서 웹 기반 클라우드 도구로의 전환은 디자인의 접근성을 비약적으로 높였습니다. * '멀티플레이어' 기능(실시간 동시 편집)은 과거의 번거로운 파일 버전 관리와 피드백 루프를 제거하여, 팀 전체가 단일 진실 공급원(Single Source of Truth)을 공유하게 만들었습니다. * 이러한 도구의 민주화는 디자이너가 아닌 팀원들도 디자인 과정에 참여하게 함으로써 의사소통 비용을 획기적으로 줄였습니다. ### 디자인 시스템을 통한 규모의 경제 달성 * 대규모 제품을 일관성 있게 유지하기 위해 '디자인 시스템'이 필수적인 인프라로 자리 잡았습니다. * 재사용 가능한 컴포넌트와 스타일 가이드를 구축함으로써, 디자인과 개발 사이의 반복적인 작업을 최소화하고 생산성을 극대화했습니다. * 디자인 시스템은 단순한 라이브러리를 넘어, 코드와 디자인 사이의 언어를 통일하여 제품의 품질을 상향 평준화하는 역할을 합니다. ### 엔지니어링과의 경계 모호화 및 통합 * 과거의 고질적인 문제였던 '핸드오프(Handoff)' 과정이 자동화되고 있으며, 디자인 도구 내에서 실제 코드 속성을 반영하는 기능들이 강화되었습니다. * 디자이너는 개발 구현 가능성을 고려하며 설계하고, 엔지니어는 디자인 도구에 직접 접속해 필요한 자산과 속성을 추출하는 등 협업 모델이 유기적으로 변했습니다. * 이제 디자인은 단순한 그림이 아니라, 실제 제품의 동작 원리를 정의하는 '설계도'로서 엔지니어링과 긴밀하게 결합되어 있습니다. --- 디자인의 미래는 단순한 인터페이스 제작을 넘어 AI를 활용한 자동화와 더욱 긴밀한 협업 체계로 나아가고 있습니다. 이제 기업은 디자인을 단순한 비용이 아닌 투자 가치가 높은 자산으로 인식해야 하며, 디자이너는 기술적 이해도와 비즈니스 감각을 동시에 갖춘 통합적 해결사로서의 역량을 키워야 합니다. 디자인 시스템을 구축하고 협업 프로세스를 도구 중심으로 재편하는 것이 다가올 10년의 경쟁력을 결정짓는 핵심이 될 것입니다.

Figma의 새로운 소식 (새 탭에서 열림)

Figma의 Config 2022에서 발표된 이 글은 현대 제품 개발의 복잡성과 속도에 대응하기 위해 디자인 도구가 나아가야 할 방향을 제시합니다. 디자인과 개발 사이의 간극을 좁히는 기능적 업데이트를 통해 팀이 더 빠르게 협업하고 창의적인 문제 해결에 집중할 수 있는 환경을 구축하는 것이 핵심입니다. 결국 디자인 도구는 단순히 화면을 그리는 수단을 넘어, 실제 제품의 작동 방식을 더 정교하게 반영하는 플랫폼으로 진화해야 함을 강조합니다. **디자인 시스템의 효율을 극대화하는 컴포넌트 속성** * **컴포넌트 속성(Component Properties):** 이전에는 작은 변화를 위해서도 수많은 변체(Variants)를 만들어야 했으나, 이제는 불리언(Boolean), 텍스트 교체, 인스턴스 교체 속성을 통해 하나의 컴포넌트 내에서 복잡한 구성을 제어할 수 있습니다. * **복잡도 감소:** 이를 통해 디자인 시스템 관리자는 유지보수해야 할 레이어 수를 획기적으로 줄일 수 있으며, 디자이너는 필요한 컴포넌트를 더 직관적으로 찾아 사용할 수 있습니다. **실제 레이아웃 로직을 반영하는 오토 레이아웃의 진화** * **절대 위치 지정(Absolute Positioning):** 오토 레이아웃 프레임 안에서도 특정 요소를 흐름에서 제외하고 자유롭게 배치할 수 있어, 툴바나 알림 배지 같은 요소를 훨씬 쉽게 구현할 수 있습니다. * **음수 간격(Negative Spacing) 및 쌓기 순서 제어:** 요소 간의 겹침을 허용하고 쌓이는 순서를 조절할 수 있게 되어, 아바타 스택과 같은 디자인을 별도의 수작업 없이 구현 가능합니다. * **캔버스 제어 직관화:** 복잡한 설정창을 거치지 않고 캔버스 위에서 직접 간격과 패딩을 드래그하여 조절할 수 있는 사용자 경험이 강화되었습니다. **디테일한 표현력과 개발 친화적 도구들** * **가변 글꼴(Variable Fonts) 지원:** 글꼴의 굵기, 너비, 기울기 등을 세밀하게 조정할 수 있어 타이포그래피의 표현력이 극대화되었습니다. * **개별 테두리(Individual Strokes):** 상하좌우 각 면의 테두리 두께를 다르게 설정할 수 있게 되어 CSS의 border 속성과 동일한 방식으로 디자인이 가능해졌습니다. * **다크 모드 및 스포트라이트:** 사용자의 눈 피로를 줄이는 다크 모드와 협업 시 발표자의 화면을 실시간으로 따라가게 하는 스포트라이트 기능으로 업무 효율을 높였습니다. **위젯을 통한 협업의 확장** * **FigJam 위젯:** 단순히 그리는 도구를 넘어 워크플로우를 자동화하고 데이터를 연결할 수 있는 위젯 시스템이 도입되었습니다. * **생태계 확장:** 커뮤니티 개발자들이 만든 위젯을 통해 팀의 고유한 요구사항에 맞춘 맞춤형 협업 도구를 구축할 수 있게 되었습니다. 디자인 시스템 운영자라면 기존의 방대한 변체(Variants)를 컴포넌트 속성(Component Properties)으로 리팩토링하여 시스템 가독성을 높이는 것을 추천합니다. 또한, 강화된 오토 레이아웃과 개별 테두리 기능을 적극 활용하면 실제 코드 구현 방식과 일치하는 디자인 산출물을 생성할 수 있어 개발자와의 협업 효율을 획기적으로 개선할 수 있습니다.

피그마가 스프링 (새 탭에서 열림)

How (and why) we built branching Inside Figma Product updates Behind the scenes

포스트모템: 20 (새 탭에서 열림)

2020년 4월 29일 발생한 Figma의 서비스 장애는 메인 데이터베이스인 PostgreSQL의 메모리 부족(OOM)으로 인해 발생했습니다. 근본 원인은 시스템 카탈로그 테이블인 `pg_attribute`의 비정상적인 팽창(Bloat)이었으며, 이는 장기 실행 트랜잭션이 데이터 정리를 방해하면서 발생한 연쇄적인 성능 저하의 결과였습니다. 결과적으로 모든 데이터베이스 연결이 지연되고 메모리가 고갈되면서 전체 서비스가 중단되는 사태에 이르렀습니다. ### 시스템 카탈로그(pg_attribute)의 비정상적 팽창 * PostgreSQL에서 테이블 열(column) 정보를 저장하는 `pg_attribute` 테이블이 약 64GB까지 비대해지는 현상이 발생했습니다. * 모든 SQL 쿼리는 실행 계획을 세울 때 이 시스템 카탈로그를 참조해야 하므로, 이 테이블의 성능 저하는 곧 모든 DB 작업의 지연으로 직결되었습니다. * 평소 1ms 미만이던 메타데이터 조회 시간이 수 초 단위로 늘어났고, 이는 데이터베이스 연결(Connection)의 급증과 메모리 점유율 상승으로 이어졌습니다. ### VACUUM 작동 불능과 장기 실행 트랜잭션 * PostgreSQL의 가비지 컬렉션 역할을 하는 VACUUM 프로세스가 `pg_attribute` 내의 불필요한 행(dead tuples)을 정리하지 못하는 상태였습니다. * 장애 발생 당시 며칠 동안 유지되고 있던 '장기 실행 트랜잭션(Long-lived transaction)'이 원인이었습니다. 이 트랜잭션이 특정 시점의 데이터 스냅샷을 붙잡고 있어, VACUUM이 그 이후에 생성된 쓰레기 데이터를 삭제할 수 없게 방해했습니다. * 이 상태에서 대량의 임시 테이블 생성 및 삭제 작업이 반복되자, 정리되지 못한 행들이 기하급수적으로 쌓이며 테이블 크기가 폭발적으로 증가했습니다. ### 장애 전파 및 복구 과정 * 팽창된 시스템 테이블로 인해 쿼리 분석 단계에서 과도한 메모리가 사용되었고, 결국 Primary DB 인스턴스가 OOM(Out of Memory) 상태에 빠져 모든 서비스를 중단시켰습니다. * Figma 팀은 즉각적인 가용성 확보를 위해 DB 인스턴스를 더 높은 메모리 사양으로 수직 확장(Scale-up)했습니다. * 이후 VACUUM의 정상 작동을 가로막던 오래된 트랜잭션들을 강제로 종료하고, 시스템 테이블에 대한 `REINDEX`를 수행하여 비대해진 인덱스를 정리함으로써 성능을 정상화했습니다. ### 재발 방지를 위한 권장 사항 데이터베이스의 안정성을 유지하기 위해서는 사용자 데이터뿐만 아니라 시스템 메타데이터의 상태를 정기적으로 점검해야 합니다. 특히 장기 실행 트랜잭션은 VACUUM 효율을 떨어뜨려 DB 전체에 치명적인 영향을 줄 수 있으므로, 특정 시간(예: 5분) 이상 지속되는 트랜잭션을 자동으로 종료하는 설정(`idle_in_transaction_session_timeout`)을 도입하고 시스템 테이블 크기에 대한 모니터링 알람을 구축하는 것이 권장됩니다.

Figma와 크롬북 (새 탭에서 열림)

Figma for students and educators Inside Figma Design Career & education

lli Type으로 본격적인 (새 탭에서 열림)

피그마는 Config 2022를 통해 거대한 비전을 설계하면서도 이를 빠르게 실행에 옮기는 조직의 태도를 강조하며, 디자인과 개발 사이의 간극을 좁히는 혁신적인 기능들을 대거 공개했습니다. 특히 디자인 시스템이 단순히 정적인 시각 자산을 넘어 실제 코드의 논리를 반영하는 살아있는 시스템으로 진화해야 한다는 점을 핵심 과제로 제시했습니다. 이를 통해 디자인 프로세스는 더욱 효율화되고, 제품 개발의 전체 주기는 단축될 수 있습니다. **컴포넌트 속성(Component Properties)을 통한 복잡성 해결** * 기존의 수많은 변체(Variants) 조합으로 인해 비대해졌던 디자인 시스템을 획기적으로 단순화할 수 있는 불리언(Boolean), 텍스트(Text), 인스턴스 스왑(Instance swap) 속성을 도입했습니다. * 디자이너는 이제 레이어를 직접 숨기거나 텍스트를 수정하는 대신, 우측 패널의 속성 값을 조절하는 것만으로 컴포넌트를 제어할 수 있습니다. * 이는 개발자가 코드에서 props를 다루는 방식과 일치하여, 디자인과 개발 간의 커뮤니케이션 모델을 하나로 통합하는 결과를 낳았습니다. **오토 레이아웃(Auto Layout)의 유연성 확장** * 오토 레이아웃 내에서 특정 요소를 자유롭게 배치할 수 있는 '절대 위치(Absolute positioning)' 기능을 추가하여, 기존 레이아웃 구조를 깨지 않고도 배지(Badge)나 아이콘 등을 겹쳐서 배치할 수 있게 되었습니다. * 요소 간의 간격을 마이너스 값으로 설정할 수 있는 음수 간격(Negative spacing)을 지원하여 아바타 스택과 같은 디자인 패턴을 쉽게 구현하도록 개선했습니다. * 캔버스 위에서 직접 여백과 간격을 드래그하여 조절할 수 있는 직관적인 컨트롤을 제공함으로써 작업 속도를 대폭 향상시켰습니다. **협업 환경의 개인화와 배리어 프리 디자인** * 사용자들의 오랜 요청 사항이었던 다크 모드(Dark Mode)를 정식 지원하여 개별 작업자의 환경 선호도를 충족하고 눈의 피로도를 줄였습니다. * 배리어 프리(Barrier-free) 디자인을 위해 가변 폰트(Variable Fonts) 지원을 강화하여, 굵기나 너비 등을 세밀하게 조정함으로써 타이포그래피의 가독성과 표현력을 높였습니다. * 피그잼(FigJam)과 피그마 간의 위젯 공유 및 커뮤니티 생태계 확장을 통해 아이데이션부터 고충실도 디자인까지의 흐름을 유기적으로 연결했습니다. 성공적인 프로덕트 개발을 위해서는 디자인 시스템의 논리를 코드 수준으로 끌어올려 협업의 마찰을 줄여야 합니다. 이번 업데이트된 기능들을 적극 활용하여 디자인 자산을 구조화한다면, 단순 반복 작업을 줄이고 더 본질적인 사용자 경험 기획에 집중할 수 있는 환경을 구축할 수 있을 것입니다.

Config 2022 되돌 (새 탭에서 열림)

Figma의 Config 2022 키노트를 정리한 이 글은 디자인 도구가 단순히 시각적 요소를 만드는 단계를 넘어, 실제 제품 빌드 방식과 얼마나 유사해져야 하는지를 강조합니다. 피그마는 "크게 생각하고 신속하게 행동하라(Thinking big and acting with urgency)"는 철학 아래, 디자이너와 개발자 간의 간극을 좁히고 복잡한 디자인 시스템을 효율적으로 관리할 수 있는 대대적인 기능 업데이트를 공개했습니다. 결론적으로 이번 업데이트는 디자인 파일이 단순한 그림이 아니라, 실제 코드의 구조와 속성을 반영하는 '살아있는 설계도'가 되어야 함을 시사합니다. ### 더 유연해진 오토 레이아웃(Auto Layout 4.0) 오토 레이아웃은 실제 개발 환경의 레이아웃 방식과 더욱 유사하게 진화하여 디자이너에게 더 높은 자유도를 제공합니다. * **절대 위치 지정(Absolute positioning):** 오토 레이아웃 프레임 내에서 특정 요소를 흐름에서 제외하고 원하는 위치에 자유롭게 배치할 수 있어, 알림 배지나 플로팅 버튼 구현이 쉬워졌습니다. * **음수 간격(Negative spacing):** 요소 간의 간격을 마이너스 값으로 설정할 수 있게 되어, 아바타 스택처럼 레이어가 겹치는 디자인을 별도의 수작업 없이 구현 가능합니다. * **캔버스 직접 제어:** 속성 패널을 거치지 않고 캔버스 위에서 직접 패딩과 간격을 드래그하여 조절할 수 있도록 UI가 개선되었습니다. ### 컴포넌트 구조의 혁신, 컴포넌트 속성(Component Properties) 수많은 변체(Variants)로 인해 비대해졌던 디자인 시스템을 간결하게 유지할 수 있는 기능이 도입되었습니다. * **속성 정의:** 불리언(Boolean), 텍스트(Text), 인스턴스 교체(Instance swap) 속성을 통해 레이어의 가시성이나 문구, 아이콘 종류를 컴포넌트 레벨에서 제어할 수 있습니다. * **변체 레이어 감소:** 과거에는 수십 개의 변체가 필요했던 복잡한 컴포넌트도 속성 설정을 통해 단 몇 개의 마스터 컴포넌트로 관리할 수 있어 시스템 유지보수 비용이 획기적으로 줄어듭니다. ### 디자인 디테일과 가독성을 위한 업데이트 실제 제품의 완성도를 높이기 위해 디자이너들이 오랫동안 요구해온 세밀한 기능들이 추가되었습니다. * **다크 모드 지원:** 피그마 데스크톱 앱에 공식적으로 다크 모드가 도입되어 작업 환경의 시각적 피로도를 줄일 수 있게 되었습니다. * **개별 테두리(Individual strokes):** 상하좌우 테두리를 각각 독립적으로 설정할 수 있어, 탭 메뉴나 리스트 아이템 등의 UI 요소를 더 정확하게 표현할 수 있습니다. * **가변 글꼴(Variable fonts):** 폰트의 굵기, 너비, 기울기 등을 세밀하게 조정할 수 있는 가변 글꼴 기능을 지원하여 타이포그래피 표현의 폭을 넓혔습니다. ### 협업의 확장과 피그잼(FigJam)의 진화 디자인 프로세스 전반에서의 협업을 강화하기 위해 화이트보드 도구인 피그잼의 기능도 보강되었습니다. * **위젯(Widgets):** 단순한 스티커를 넘어 투표, 설문 조사, 지라(Jira) 연동 등 인터랙티브한 기능을 수행하는 위젯이 추가되어 팀워크의 효율을 높입니다. * **피그마와의 연동성:** 피그잼에서 아이디어를 발산하고 이를 피그마로 가져와 구체화하는 과정이 더욱 매끄러워졌으며, 협업 시 맥락을 잃지 않도록 돕는 다양한 편의 기능이 포함되었습니다. 디자이너는 이제 단순한 화면 그리기를 넘어, 개발자가 코드로 구현할 구조를 미리 설계한다는 관점을 가져야 합니다. 오토 레이아웃과 컴포넌트 속성을 적극적으로 활용하여 '코드와 일치하는 디자인 시스템'을 구축함으로써 핸드오프 과정의 비효율을 줄이는 것이 권장됩니다.

접근성 향상을 위한 (새 탭에서 열림)

제시해주신 제목과 카테고리 정보를 바탕으로, Figma의 **'Config 2022: Thinking big and acting with urgency'** 발표 내용과 그 핵심 가치를 요약해 드립니다. Figma는 디자인 도구가 단순히 시각적인 결과물을 만드는 곳을 넘어, 실제 제품 빌드 과정과 긴밀하게 연결되는 플랫폼으로 진화해야 함을 강조합니다. 개발과 디자인 사이의 간극을 줄이기 위해 '코드처럼 작동하는 디자인' 기능을 대거 도입했으며, 이는 급변하는 기술 환경 속에서 팀이 더 대담한 비전을 가지고 빠르게 실행할 수 있도록 돕는 데 목적이 있습니다. **디자인과 개발의 경계를 허무는 기술적 업데이트** * **컴포넌트 속성(Component Properties):** 불필요하게 비대해졌던 컴포넌트 변형(Variants)의 개수를 획기적으로 줄이고, 코드의 Props 구조와 유사하게 속성을 정의하여 관리 효율성을 높였습니다. * **오토 레이아웃(Auto Layout) 4.0:** '절대 위치(Absolute Positioning)'와 '음수 간격(Negative Spacing)' 기능을 도입하여 디자인 캔버스 내에서도 CSS와 동일한 레이아웃 로직을 구현할 수 있게 되었습니다. * **가변 글꼴(Variable Fonts) 지원:** 디자인 단계에서 서체의 굵기, 너비 등을 미세하게 조정할 수 있게 하여 개발 구현 시의 정교함을 확보했습니다. **협업의 확장과 사용자 경험 개선** * **다크 모드(Dark Mode) 도입:** 많은 사용자와 개발자들이 요청했던 다크 모드를 공식 지원하여 작업 환경의 편의성을 개선했습니다. * **피그잼(FigJam) 위젯 및 기능 강화:** 단순한 화이트보드를 넘어 워크플로우를 자동화하는 위젯과 스티커 기능을 추가하여 기획 단계에서의 협업 효율을 극대화했습니다. * **개별 테두리(Individual Strokes) 설정:** 도형의 각 면에 테두리를 따로 설정할 수 있게 하여 개발 환경의 'Border' 속성을 디자인 도구에서도 직관적으로 다룰 수 있게 했습니다. **제품 철학: 대담한 생각과 긴급한 실행** * **비전의 확장:** 디자인 도구는 단순한 '그림 도구'가 아니라 '제품 구축(Building) 도구'가 되어야 한다는 방향성을 제시했습니다. * **속도와 유연성:** 기술적 복잡성을 줄이는 대신 창의적인 문제 해결에 집중할 수 있도록 도구가 기민하게 대응해야 함을 주장합니다. * **커뮤니티 중심 성장:** 플러그인과 위젯 생태계를 확장하여 사용자가 직접 도구의 기능을 확장하고 공유하는 문화를 독려합니다. 이 글은 디자인 시스템을 구축할 때 단순한 시각적 일관성을 넘어 **'개발자와의 소통 효율성'**을 최우선으로 고려할 것을 추천합니다. 특히 새롭게 도입된 컴포넌트 속성과 오토 레이아웃 기능을 활용하여 디자인 라이브러리를 간소화하고, 실제 제품 코드와의 싱크를 맞추는 실무적 변화를 시도해 볼 가치가 있습니다.

Config 2022: 크게 (새 탭에서 열림)

Localization, languages, and listening Inside Figma Design Product updates

피그마 커뮤 (새 탭에서 열림)

피그마(Figma)는 2022년 처음으로 개최된 '피그마 커뮤니티 어워즈(Figma Community Awards)'의 최종 우승작들을 발표하며 전 세계 디자인 생태계의 혁신을 공유했습니다. 이 어워즈는 전 세계 디자이너들이 매일 1,600개 이상 업로드하는 UI 키트, 플러그인, 위젯 등의 리소스 중 커뮤니티의 투표를 통해 가장 가치 있는 도구들을 선정하는 행사입니다. 이를 통해 피그마는 제작자들의 공로를 기리는 동시에, 협업 디자인의 미래를 이끌어갈 우수한 리소스들을 공식적으로 조명했습니다. #### 생산성을 극대화하는 플러그인과 위젯 * **Similayer (Dave Williames):** 다양한 레이어 속성을 기준으로 유사한 레이어를 한꺼번에 선택할 수 있게 해주어 복잡한 편집 작업을 비약적으로 단축합니다. * **Content Reel (Microsoft/Eugene Gavriloff):** 텍스트 스트링, 이미지, 아이콘 등 디자인에 필요한 더미 데이터를 한데 모아 실시간으로 적용할 수 있는 유틸리티를 제공합니다. * **FigJenda (PG Gonni):** 피그잼(FigJam) 타이머와 연동되는 인터랙티브 아젠다 위젯으로, 워크숍이나 회의의 흐름을 효율적으로 관리할 수 있도록 돕습니다. * **Rock Paper Scissors (Alex Einarsson):** 팀원 간의 간단한 의사결정을 돕는 가위바위보 게임 위젯으로, 협업 과정에 재미 요소를 더했습니다. #### 디자인 자산 및 시스템 리소스 * **Ant Design Open Source (Mr Biscuit/Vinh Bui):** 유연한 인스턴스 활용과 구조적 단순함을 갖춘 대규모 오픈소스 디자인 시스템으로, 완성도 높은 UI 구축을 지원합니다. * **css.gg (Lona/Astrit):** 순수 CSS, SVG 및 피그마용 UI 아이콘 700여 개를 포함한 방대한 아이콘 세트입니다. * **Sketch Elements Brushes Set (Streamline):** 추상적인 요소와 스케치 주석 테마를 제공하여 그래픽 디자인의 디테일을 살려주는 리소스입니다. #### 협업 및 교육용 템플릿 * **Remote Design Sprint (Miranda Mazzara 외):** 사전 경험이 없는 팀도 5일간의 디자인 스프린트를 원활하게 진행할 수 있도록 설계된 피그잼 전용 템플릿입니다. * **Customer Journey Map (Fuad Aslan):** 고객의 경험을 심도 있게 분석하고 시각화할 수 있는 프레임워크를 제공합니다. * **Micro interactions - Prototyping (Rusmir Arnautovic):** 피그마의 프로토타이핑 기능을 활용해 정교한 마이크로 인터랙션을 구현하는 방법을 보여주는 교육 자료입니다. #### 커뮤니티 어워즈의 운영 방식과 의의 * **사용자 참여 기반 선정:** 피그마 커뮤니티 프로필을 보유한 사용자들이 직접 후보를 추천하고 최종 후보군에 대해 투표를 진행하여 투명성을 확보했습니다. * **창작자 지원 및 보상:** 최종 우승자에게는 피그마 컨퍼런스인 'Config'에서 수상의 영예와 함께 데스크톱에 전시할 수 있는 실물 트로피, 특별 굿즈가 제공됩니다. * **공유 생태계 장려:** 누구나 자신의 작업을 퍼블리싱하여 후보가 될 수 있도록 장려함으로써 디자인 지식의 공유와 개방성을 강조합니다. 이번 어워즈에서 선정된 도구들은 피그마 전문가들이 검증한 최상의 리소스들입니다. 업무 효율을 높이고 싶거나 팀의 협업 프로세스를 개선하고자 한다면, 위에서 언급된 플러그인과 템플릿들을 커뮤니티에서 검색하여 실무에 직접 활용해 보시는 것을 적극 추천합니다.

이모지의 힘 | 피그마 블로그 (새 탭에서 열림)

UI 모션은 단순한 시각적 장식을 넘어 사용자 인터페이스 내에서 요소 간의 관계를 정의하고 사용자 경험(UX)의 흐름을 완성하는 핵심적인 도구입니다. 적절하게 설계된 애니메이션은 사용자의 인지 부하를 줄여주는 동시에 시스템의 반응성을 직관적으로 전달하여 제품의 완성도를 결정짓는 전략적 요소로 작용합니다. 결과적으로 모션은 브랜드의 성격을 규정하고 사용자와 인터페이스 사이의 정서적 연결을 강화하는 결정적인 역할을 수행합니다. **모션의 기능적 역할과 사용자 인지** - 모션은 화면 전환이나 요소의 변화 과정에서 발생하는 '정보의 공백'을 메워 사용자가 문맥을 잃지 않도록 돕습니다. - 시각적 위계(Visual Hierarchy)를 강조하여 사용자가 다음에 주목해야 할 영역으로 자연스럽게 시선을 유도합니다. - 조작에 대한 즉각적인 피드백을 제공함으로써 시스템이 사용자의 명령을 올바르게 수신했음을 인지시키고 신뢰감을 형성합니다. **기술적 정교함: 타이밍과 이징(Easing)** - 자연스러운 움직임을 위해 물리 법칙을 반영한 이징 함수(Cubic-bezier 등)를 적용하여 가속과 감속을 정교하게 제어합니다. - 인터랙션의 목적에 따라 지속 시간(Duration)을 최적화하며, 대개 모바일 환경에서는 200ms에서 300ms 사이의 빠른 반응 속도를 유지하는 것이 권장됩니다. - 초당 60프레임(60fps)을 일관되게 유지하여 끊김 없는 부드러운 화면을 제공하는 것이 기술적 구현의 핵심입니다. **접근성과 성능 최적화** - 모션에 민감한 사용자를 위해 운영체제 수준의 '동작 줄이기(Reduce Motion)' 설정을 존중하고, 이에 대응하는 대체 UI를 제공해야 합니다. - 과도한 애니메이션은 오히려 사용자의 작업을 방해할 수 있으므로, 목적이 불분명한 효과는 지양하고 기능 중심의 최소주의적 접근을 취합니다. - 성능 저하를 막기 위해 브라우저의 GPU 가속을 활용할 수 있는 `transform`이나 `opacity` 속성을 우선적으로 사용하여 구현합니다. **협업과 워크플로우를 위한 팁** - 디자이너와 개발자 간의 간극을 줄이기 위해 Lottie, Rive와 같은 런타임 라이브러리나 명확한 수치(Duration, Delay, Curve)가 포함된 가이드라인을 공유합니다. - 실제 프로토타입 단계에서 반복적인 테스트를 거쳐 모션이 실제 사용자의 작업 속도를 저해하지 않는지 확인하는 과정이 필수적입니다. 제품의 성능과 사용성을 해치지 않으면서도 브랜드의 생동감을 불어넣기 위해서는 설계 초기 단계부터 모션을 독립적인 레이어가 아닌 UX의 통합적인 구성 요소로 다루는 것이 중요합니다. 이를 통해 기능성과 심미성이 조화된 높은 수준의 인터페이스를 구축할 수 있습니다.

Figma의 새로운 소식: (새 탭에서 열림)

What’s new in Figma: March 2022 Inside Figma Product updates