자신 있게 클라우드 (새 탭에서 열림)
Localization, languages, and listening Inside Figma Design Product updates
Adobe와의 새로운 협업 | 피 (새 탭에서 열림)
피그마(Figma)와 어도비(Adobe)는 15개월간 이어진 규제 당국의 심사 끝에 합병 계획을 공식적으로 철회하기로 합의했습니다. 양사는 유럽연합(EU)과 영국 등 주요국 규제 기관의 승인을 얻을 수 있는 현실적인 경로가 더 이상 존재하지 않는다는 결론에 도달했습니다. 이로써 피그마는 어도비의 산하로 들어가는 대신 독자적인 기업으로서 성장을 지속하게 되었습니다. **규제 승인 실패의 배경** * 영국 경쟁시장국(CMA)과 유럽연합 집행위원회(EC) 등 글로벌 규제 기관들은 이번 합병이 인터페이스 디자인 소프트웨어 시장의 경쟁을 저해할 수 있다는 우려를 지속적으로 제기했습니다. * 규제 당국은 어도비가 디자인 시장의 지배적 사업자로서 혁신적인 경쟁자인 피그마를 인수할 경우, 시장의 독점화가 심화되고 소비자의 선택권이 줄어들 것으로 판단했습니다. * 양사는 규제 기관을 설득하기 위해 다양한 구제책을 논의했으나, 시장의 경쟁 구조를 유지하려는 당국의 요구 수준을 충족하기 어렵다고 판단하여 최종적으로 합병 철회를 결정했습니다. **피그마의 독자적 행보와 전략** * 합병이 무산됨에 따라 어도비는 피그마 측에 약 10억 달러(한화 약 1조 3천억 원) 규모의 계약 해지 수수료(Termination Fee)를 지급하게 됩니다. * 피그마는 확보된 자본과 독립성을 바탕으로 제품 로드맵을 확장하고, 화이트보드 도구인 'FigJam' 및 AI 기반 디자인 기능 강화에 집중할 계획입니다. * 이번 결정으로 피그마는 기존의 커뮤니티 중심 생태계를 유지하면서, 어도비 제품군과의 직접적인 경쟁 구도를 이어가게 되었습니다. **디자인 소프트웨어 시장에 미칠 영향** * 이번 합병 실패는 빅테크 기업들의 인수를 통한 확장에 대해 글로벌 규제 당국이 매우 엄격한 잣대를 적용하고 있음을 보여주는 상징적인 사례가 되었습니다. * 디자인 업계는 피그마의 독립성 유지를 환영하는 분위기이며, 이는 디자인 도구 시장의 기술 혁신 경쟁을 더욱 가속화할 것으로 전망됩니다. * 어도비는 자체적인 클라우드 기반 디자인 도구 개발 및 AI 서비스인 '파이어플라이(Firefly)' 고도화에 더욱 박차를 가할 것으로 보입니다. 피그마는 이번 일을 계기로 단순한 디자인 도구를 넘어 협업 플랫폼으로서의 정체성을 강화할 기회를 맞이했습니다. 비록 거대 자본과의 결합은 무산되었으나, 독립적인 혁신을 통해 시장 내 입지를 더욱 공고히 다지는 전환점이 될 것으로 보입니다.
마이크로소프트 존 프리드 (새 탭에서 열림)
마이크로소프트는 대규모 조직 내 디자인 일관성을 유지하고 반복적인 수작업을 줄이기 위해 Figma 플러그인을 워크플로우의 핵심으로 도입했습니다. 이들은 단순한 도구 활용을 넘어, 디자인 시스템과 실시간 데이터를 연결하는 맞춤형 플러그인을 통해 수천 명의 디자이너와 엔지니어 사이의 협업 간극을 좁혔습니다. 결과적으로 디자인 프로세스의 자동화를 실현하며 제품의 품질과 팀의 생산성을 동시에 높이는 성과를 거두었습니다. ### 대규모 디자인 시스템 관리와 일관성 유지 * 수백 개의 제품과 수천 명의 디자이너가 협업하는 환경에서 수동 업데이트는 오류를 유발하고 일관성을 해치는 주요 원인이었습니다. * 마이크로소프트는 'Fluent UI' 디자인 시스템을 플러그인과 결합하여, 디자인 요소의 변경 사항이 모든 제품군에 즉각적이고 정확하게 반영되도록 시스템화했습니다. * 중앙 집중화된 도구를 통해 개별 디자이너가 최신 가이드를 일일이 확인하지 않아도 시스템의 규칙을 준수할 수 있는 환경을 구축했습니다. ### 실제 데이터를 활용한 현실적인 디자인 환경 구축 * 'Content Reel'과 같은 플러그인을 개발하여 더미 텍스트 대신 실제 사용자 이름, 아바타, 아이콘 등의 데이터를 디자인 파일에 즉시 삽입할 수 있게 했습니다. * 이를 통해 디자이너는 실제 사용자가 경험하게 될 화면을 더 정확하게 예측하고, 텍스트 길이에 따른 레이아웃 깨짐 등 엣지 케이스를 디자인 단계에서 사전에 발견할 수 있게 되었습니다. ### 반복 업무 자동화를 통한 디자인 생산성 극대화 * 레이아웃 정렬, 접근성 검사, 레드라이닝(치수 및 사양 표기) 등 소모적인 수작업을 자동화 플러그인으로 대체했습니다. * 디자이너가 픽셀 단위의 단순 조정 작업에 시간을 쏟는 대신, 제품의 핵심 사용자 경험과 복잡한 문제 해결에 집중할 수 있는 시간을 확보했습니다. * 자동화된 검수 도구는 디자인 핸드오프(Hand-off) 과정에서의 커뮤니케이션 오류를 줄여 개발 효율성까지 증대시켰습니다. ### 디자인과 엔지니어링의 유기적인 기술 연동 * 디자인 토큰(Design Tokens)을 관리하는 플러그인을 활용하여 디자인 변경 사항을 코드로 직접 변환하고 배포 프로세스의 정확도를 높였습니다. * 플러그인은 단순한 그리기 도구를 넘어 디자인과 개발 사양을 연결하는 가교 역할을 수행하며, 디자인 시스템의 업데이트가 엔지니어링 환경으로 즉각 전파될 수 있는 파이프라인을 형성했습니다. 마이크로소프트의 사례는 대규모 조직일수록 도구의 자동화와 커스텀 플러그인 구축이 선택이 아닌 필수임을 보여줍니다. 반복적인 작업은 기술에 맡기고 디자이너는 창의적인 의사결정에 집중할 수 있는 '도구 기반의 워크플로우'를 구축하는 것이 현대적인 제품 개발 조직의 핵심 경쟁력입니다.
피그턴으로서의 나의 여름 | (새 탭에서 열림)
Figma에서의 원격 인턴십은 지리적 제약을 넘어 협업 중심의 제품 개발 문화를 깊이 있게 경험할 수 있는 소중한 기회입니다. 이 글은 제품 관리(PM)와 UI/UX 디자인이 유기적으로 연결되는 과정을 다루며, 원격 환경에서 효율적인 성장을 이끌어내는 소통의 가치를 조명합니다. 기술적 도구의 활용만큼이나 중요한 것은 투명한 문서화와 능동적인 피드백임을 실제 사례를 통해 강조합니다. ### 원격 환경에서의 제품 관리(PM)와 협업 * **문서화의 중요성:** 원격 근무 환경에서는 비동기 소통이 핵심이므로, 제품 요구 사항 정의서(PRD)를 명확하고 상세하게 작성하여 모든 팀원이 같은 맥락을 공유하도록 합니다. * **도구를 통한 실시간 조율:** Figma와 FigJam을 활용해 아이디어를 시각화하고, 복잡한 기능 명세나 사용자 흐름을 팀원들과 실시간으로 논의하며 의사결정 속도를 높입니다. * **이해관계자 관리:** 엔지니어링, 디자인, 마케팅 등 다양한 부서와 긴밀하게 소통하며 제품의 우선순위를 설정하고 기술적 제약 사항을 조기에 파악합니다. ### UI/UX 디자인과 사용자 중심의 사고 * **반복적인 프로토타이핑:** 아이디어를 빠르게 프로토타입으로 구현하고, 내부 피드백과 사용자 테스트를 통해 디자인의 문제점을 지속적으로 수정하고 보완합니다. * **디자인 시스템의 활용:** Figma의 강력한 컴포넌트 라이브러리와 디자인 시스템을 실무에 적용하며 일관성 있는 인터페이스를 구축하는 기술적 역량을 배양합니다. * **사용자 피드백의 내재화:** 사용자의 목소리를 정량적 데이터와 정성적 의견으로 분석하여, 실제 기능 개선으로 연결하는 '사용자 중심'의 설계 프로세스를 체득합니다. ### 커리어 성장과 교육적 교훈 * **멘토십과 네트워킹:** 원격 환경에서도 적극적인 1:1 미팅을 통해 시니어 전문가들의 인사이트를 흡수하고, 자신의 커리어 경로를 구체화하는 법을 배웁니다. * **자기 주도적 학습:** 주어진 업무에 매몰되지 않고 Figma 내부의 기술 블로그나 세미나를 통해 제품의 비하인드 스토리와 기술적 도전을 파악하며 시야를 넓힙니다. * **소프트 스킬의 강화:** 원격 근무일수록 자신의 업무 진행 상황을 명확히 공유하고, 모호한 상황에서 질문을 주저하지 않는 태도가 성장의 핵심임을 깨닫습니다. 성공적인 원격 인턴십은 단순히 업무를 수행하는 것을 넘어, 물리적 거리감을 줄이기 위한 의도적인 소통 노력에서 결정됩니다. 기술적인 숙련도만큼이나 팀의 문화를 이해하고 그 안에서 자신의 목소리를 투명하게 내는 연습이 커리어 성장의 가장 큰 밑거름이 될 것입니다.
작지만 큰 업데이트: 디자인 (새 탭에서 열림)
피그마(Figma)는 대규모 기능 개발에 밀려 자칫 소홀해질 수 있는 작은 버그와 UX 불편 사항들을 해결하기 위해 '퀄리티 위크(Quality Week)'라는 집중 개선 기간을 운영합니다. 이 과정을 통해 탄생한 '작지만 큰 업데이트(Little Big Updates)'들은 사용자들의 일상적인 작업 흐름을 방해하는 '잔가시' 같은 문제들을 제거하여 제품의 완성도를 비약적으로 높입니다. 결과적으로 이러한 세밀한 개선의 축적은 단순히 기능을 추가하는 것보다 사용자의 신뢰와 제품의 전문성을 확보하는 데 더욱 결정적인 역할을 합니다. **퀄리티 위크의 목적과 철학** * 새로운 대형 기능 출시보다는 기존 기능의 완성도를 높이는 '폴리싱(Polishing)' 작업에 모든 엔지니어링 역량을 집중합니다. * 우선순위에서 밀리기 쉬운 미세한 UI 불일치, 성능 저하, 사소한 버그들을 한꺼번에 해결하여 기술 부채를 청산합니다. * 사용자가 제품을 사용할 때 느끼는 미묘한 마찰력을 줄여, 도구와 사용자 사이의 심리적 거리감을 최소화하는 것을 목표로 합니다. **성능 최적화와 인터랙션 정밀도 개선** * 캔버스 내 레이어 선택 속도를 개선하고, 복잡한 디자인 파일에서의 스크롤 및 줌 성능을 최적화하여 조작감을 향상했습니다. * 개별 픽셀 단위의 정렬(Snapping) 로직을 정교화하여 디자이너들이 의도한 대로 정확하게 요소를 배치할 수 있도록 지원합니다. * 반복적인 작업에서 발생하는 불필요한 클릭 횟수를 줄이기 위해 단축키와 대량 편집(Bulk actions) 기능을 보강했습니다. **사용성 향상과 시각적 일관성 확보** * 인터페이스 전반의 타이포그래피, 아이콘 스타일, 간격 등을 재정비하여 시각적 인지 부하를 줄였습니다. * 접근성(Accessibility) 기준을 강화하여 다양한 환경의 사용자들이 불편함 없이 협업할 수 있는 환경을 구축했습니다. * 사용자의 실수로 발생할 수 있는 데이터 손실이나 혼란을 방지하기 위해 경고 메시지와 안내 문구를 명확하게 다듬었습니다. **지속 가능한 품질 관리 체계** * 퀄리티 위크는 단발성 이벤트에 그치지 않고, 엔지니어들이 자발적으로 품질 개선에 참여하는 조직 문화를 형성하는 계기가 됩니다. * 사용자 피드백 커뮤니티에서 가장 많이 언급된 '작은 불편함'들을 데이터화하여 개선 작업의 우선순위를 결정합니다. * 작은 개선 사항들이 모여 전체 제품의 브랜드 가치를 결정한다는 믿음을 바탕으로 정기적인 업데이트 주기를 유지합니다. 제품의 완성도는 거창한 기능 한두 개가 아니라, 사용자가 매일 마주하는 수많은 작은 순간의 만족감에서 결정됩니다. 개발 팀은 정기적으로 '품질 개선 주간'을 설정하여 사소해 보이는 버그와 UX 결함을 해결함으로써, 기술적 부채를 관리하고 사용자 충성도를 높이는 전략적 투자를 지속해야 합니다.
다크 모드 밝히 (새 탭에서 열림)
피그마는 프로토타이핑 도구에 물리 기반의 스프링 애니메이션을 도입하여 더욱 생동감 있고 자연스러운 사용자 경험을 구현했습니다. 기존의 시간 기반(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`)을 도입하고 시스템 테이블 크기에 대한 모니터링 알람을 구축하는 것이 권장됩니다.
