Config 2023 다시 보기 (새 탭에서 열림)

Figma는 Config 2023을 통해 단순한 디자인 도구를 넘어 디자인과 개발의 경계를 허물고 전체 제품 개발 팀이 함께 협업할 수 있는 통합 플랫폼으로의 진화를 선언했습니다. 이를 위해 개발자 전용 워크스페이스인 '개발 모드(Dev Mode)'와 코드의 논리를 디자인에 이식하는 '변수(Variables)', 그리고 실질적인 제품 작동 방식을 구현하는 '고급 프로토타이핑' 기능을 새롭게 도입했습니다. 이번 업데이트는 디자인 결과물이 실제 제품 코드로 전환되는 과정을 가속화하고, 팀 간의 소통 방식을 근본적으로 재정의하는 데 목적이 있습니다. ### 개발자 경험을 최적화하는 개발 모드(Dev Mode) * **개발자 전용 워크스페이스:** 무한한 캔버스 내에서 개발자가 작업에 필요한 구조와 기능을 직관적으로 파악할 수 있는 별도의 모드를 제공합니다. * **코드 번역 및 검사:** 디자인 요소를 코드로 더 빠르게 변환할 수 있으며, Jira, GitHub, Storybook과 같은 주요 개발 도구 및 코드베이스와 플러그인을 통해 직접 연결됩니다. * **VS Code 통합:** 'Figma in VS Code'를 통해 개발 환경을 벗어나지 않고도 에디터 바로 옆에서 디자인 파일을 검사하고 협업할 수 있습니다. * **배포 추적:** 어떤 디자인 요소가 프로덕션에 반영되어야 하는지 상태를 추적하여 디자인과 개발 간의 누락을 방지합니다. ### 디자인 시스템의 유연성을 극대화하는 변수(Variables) * **디자인 토큰의 코드화:** 색상, 숫자, 텍스트, 불리언(Boolean) 값을 변수로 저장하여 디자인 시스템을 코드의 언어와 일치시킵니다. * **모드(Modes) 지원:** 라이트 모드와 다크 모드, 혹은 다양한 테마 간의 전환을 변수 값을 통해 손쉽게 토글하며 테스트할 수 있습니다. * **확장성 있는 관리:** 에일리어싱(Aliasing) 및 스코핑(Scoping)을 지원하며, REST API와 플러그인을 통해 변수 생성 및 관리 프로세스를 자동화할 수 있습니다. ### 논리적 흐름을 구현하는 고급 프로토타이핑 * **조건부 로직 및 표현식:** "특정 변수가 X일 때 프레임 2로 이동"과 같은 조건문이나 수학적 표현식을 활용하여 실제 앱과 유사한 복잡한 상호작용을 구현할 수 있습니다. * **효율적인 프로토타입 제작:** 수많은 화면을 직접 연결할 필요 없이 변수를 활용해 동적인 변화를 줄 수 있어 프로토타입 제작 시간이 단축됩니다. * **인라인 프리뷰:** 디자인 편집 화면과 프로토타입 미리보기 화면을 동시에 띄워두고 수정한 내용을 즉각적으로 확인할 수 있어 반복 작업의 효율이 높아졌습니다. ### 워크플로우 개선을 위한 편의 기능(Quality of Life) * **오토 레이아웃 고도화:** 요소가 넘치면 다음 줄로 넘겨주는 '줄 바꿈(Wrap)' 기능과 최소/최대 너비 및 높이 설정 기능이 추가되었습니다. * **글꼴 선택기 업그레이드:** 글꼴 이름을 해당 서체로 미리 볼 수 있는 기능과 검색 및 필터링 기능이 강화되어 원하는 폰트를 더 빠르게 찾을 수 있습니다. * **파일 브라우저 업데이트:** 외부 팀과 공유된 프로젝트나 파일을 더 쉽게 찾을 수 있도록 인터페이스가 개선되었습니다. ### AI 기술을 통한 디자인의 미래 확장 * **Diagram 인수:** AI 기반 디자인 도구를 개발해온 Diagram을 인수하여 Figma 플랫폼 전반에 AI 기능을 통합할 계획입니다. * **창작 보조 및 가속:** AI가 시각적 표현을 돕고 워크플로우를 가속화하며, 누구나 수준 높은 초안을 만들 수 있도록 지원함으로써 디자인의 진입장벽을 낮추고자 합니다. Figma의 이번 업데이트는 디자이너와 개발자가 서로 다른 언어를 사용하는 문제를 해결하는 데 집중하고 있습니다. 개발 모드를 통해 개발자는 디자인 의도를 명확히 파악하고, 디자이너는 변수와 로직을 활용해 실제 제품에 가까운 설계를 할 수 있게 되었습니다. 팀의 생산성을 높이기 위해 현재 베타 버전으로 제공되는 개발 모드를 프로젝트에 적극적으로 도입하고, 기존 디자인 시스템을 변수(Variables) 기반으로 전환하여 다국어나 테마 대응 효율을 높여보시길 권장합니다.

피그마 & 크롬북 (새 탭에서 열림)

피그마(Figma)는 구글과의 파트너십을 통해 교육용 크롬북(Chromebook) 환경에 자사의 디자인 및 협업 도구를 최적화하여 보급하고 있습니다. 이번 협력의 핵심은 고가의 하드웨어 없이도 학생들에게 전문가 수준의 디자인 도구를 제공함으로써 교육 현장의 기술적 장벽을 허무는 데 있습니다. 이를 통해 차세대 디자이너들은 경제적 여건에 구애받지 않고 언제 어디서나 창의적인 역량을 기르고 실시간으로 협업할 수 있는 환경을 갖추게 되었습니다. **교육 환경에 최적화된 하드웨어와 소프트웨어의 결합** * 크롬북은 전 세계 K-12(초·중·고) 교육 현장에서 가장 널리 쓰이는 기기이며, 웹 기반인 피그마와 결합했을 때 최상의 시너지를 발휘합니다. * 별도의 고성능 그래픽 카드가 없어도 크롬 브라우저를 통해 피그마와 피그잼(FigJam)의 모든 기능을 매끄럽게 구동할 수 있도록 최적화되었습니다. * 학교 IT 관리자는 구글 관리 콘솔(Google Admin Console)을 통해 학생들의 계정과 앱 접근 권한을 간편하게 관리하고 대규모로 배포할 수 있습니다. **창의적 사고를 돕는 피그잼과 피그마의 역할** * 온라인 화이트보드 도구인 피그잼은 수업 시간의 브레인스토밍, 다이어그램 작성, 아이디어 구조화 등을 지원하며 학생들 간의 활발한 상호작용을 유도합니다. * 피그마는 실제 산업 현장에서 쓰이는 UI/UX 디자인 가이드를 제공하여, 학생들이 단순한 이론을 넘어 실제 프로토타입을 제작해 보는 실전적인 학습을 가능하게 합니다. * '멀티플레이어' 기능을 통해 교사와 학생이 동일한 캔버스에서 동시에 작업하며 실시간 피드백을 주고받는 인터랙티브한 학습 경험을 제공합니다. **미래의 디자인 인재 양성과 직업 준비** * 전문 디자이너들이 사용하는 것과 동일한 도구를 미리 경험함으로써, 학생들은 대학 진학이나 취업 시 경쟁력 있는 시각적 소통 능력을 갖추게 됩니다. * 디자인 기술뿐만 아니라 문제 해결 능력, 비판적 사고, 팀워크 등 현대 사회가 요구하는 핵심 역량을 자연스럽게 습득할 수 있습니다. * 전 세계 어디서든 인터넷만 연결되면 디자인 학습을 이어갈 수 있어, 교육의 지역적·경제적 격차를 해소하는 데 기여합니다. 교육 관계자나 학교 커리큘럼 설계자는 크롬북용 피그마 교육 프로그램을 도입하여 학생들에게 업계 표준 도구를 경험할 기회를 제공하는 것이 좋습니다. 이를 통해 학생들은 창의적인 아이디어를 구체화하는 법을 배우고, 미래의 디지털 경제를 이끌어갈 기술적 토대를 탄탄히 다질 수 있을 것입니다.

AI: 디자인의 새로운 (새 탭에서 열림)

FigJam에 새롭게 도입된 AI 기능은 브레인스토밍과 협업 과정에서 발생하는 반복적이고 소모적인 수작업을 자동화하여 팀의 창의적 에너지를 보존하는 데 중점을 둡니다. 사용자는 간단한 프롬프트 입력만으로 복잡한 다이어그램이나 회의 템플릿을 즉시 생성할 수 있으며, 산재한 아이디어를 지능적으로 구조화할 수 있습니다. 결과적으로 FigJam AI는 기획의 첫 단계를 가속화하고 팀 구성원들이 정리에 쏟는 시간 대신 실제 문제 해결과 의사결정에 집중할 수 있도록 돕습니다. ### 프롬프트를 활용한 즉각적인 시각화 및 생성 * 사용자가 원하는 작업(예: "제품 출시를 위한 간트 차트 생성" 또는 "주간 싱크 미팅 아젠다 구성")을 텍스트로 입력하면 AI가 이에 적합한 스티키 노드, 다이어그램, 위젯이 포함된 보드를 즉시 생성합니다. * 백지 상태에서 시작해야 하는 심리적 장벽을 제거하고, 팀의 목적에 맞는 시각적 구조를 몇 초 만에 제안하여 워크숍 준비 시간을 획기적으로 단축합니다. ### 지능적인 스티키 노드 분류 및 요약 * **분류(Sort):** 브레인스토밍 세션 이후 보드에 흩어져 있는 수십 개의 스티키 노드를 유사한 주제별로 AI가 자동 그룹화합니다. 수작업으로 포스트잇을 옮기던 번거로움을 없애고 즉각적인 테마 파악을 가능하게 합니다. * **요약(Summarize):** 방대한 양의 아이디어를 분석하여 핵심 내용을 한 문단으로 요약해 줍니다. 회의가 끝난 후 주요 인사이트와 다음 단계(Next Steps)를 도출하는 과정에서 발생하는 데이터 누락을 방지하고 합의를 돕습니다. ### Jambot을 통한 대화형 아이디어 확장 * ChatGPT의 성능을 FigJam 캔버스 내에서 직접 활용할 수 있는 'Jambot' 위젯을 제공합니다. * 특정 스티키 노드의 내용을 바탕으로 아이디어를 확장하거나, 톤앤매너를 변경하고, 복잡한 개념을 쉽게 설명하거나 심지어 코드로 변환하는 등의 상호작용이 보드 위에서 실시간으로 이루어집니다. ### 협업 효율성을 높이기 위한 활용 팁 기획 초기 단계에서 구조를 잡는 데 어려움을 겪는 팀이라면 AI 생성 기능을 통해 표준화된 프레임워크를 먼저 제안받아 보시기 바랍니다. 특히 수백 개의 피드백이 쏟아지는 대규모 회의 이후 '요약'과 '분류' 기능을 결합해 사용하면, 정리 시간을 줄이는 동시에 팀원들 간의 정렬(Alignment)을 더욱 정교하게 맞출 수 있습니다. 이를 통해 도구 활용의 숙련도와 상관없이 누구나 수준 높은 협업 환경을 구축할 수 있습니다.

역할이 규칙이 아닌 이유 (새 탭에서 열림)

Welcome to the WIP Insights Design Product management Thought leadership Design

Shortcut 편집장의 편지를 소개 (새 탭에서 열림)

Figma는 세계 최초의 실시간 협업 디자인 도구로서, 다수의 사용자가 동시에 디자인 작업을 수행할 때 발생하는 데이터 동기화 문제를 해결하기 위해 자체적인 멀티플레이어 기술 스택을 구축했습니다. 이 시스템은 중앙 집중식 서버를 진실의 원천(Source of Truth)으로 삼아 클라이언트 간의 상태를 일관되게 유지하며, 복잡한 알고리즘 대신 도메인에 특화된 단순화된 충돌 해결 로직을 통해 성능과 사용자 경험을 동시에 잡았습니다. 결과적으로 Figma는 웹 환경에서도 네이티브 수준의 성능을 제공하며 실시간 협업의 기술적 표준을 제시하고 있습니다. ### 객체 기반 데이터 모델과 동기화 방식 * Figma의 디자인 파일은 객체(Node)들의 트리 구조로 구성되며, 각 객체는 고유한 ID와 속성(Property) 집합을 가집니다. * 일반적인 텍스트 편집기에서 사용하는 OT(Operational Transformation)나 복잡한 CRDT 방식 대신, 디자인 도구의 특성에 맞춰 '속성 단위의 결과적 일관성' 모델을 채택했습니다. * 문서 전체를 동기화하는 대신 변경된 속성만 패킷으로 전송하여 네트워크 부하를 최소화하고 효율적인 실시간 통신을 구현했습니다. ### 서버 중심의 상태 관리와 낙관적 업데이트 * 중앙 서버는 동기화 허브 역할을 수행하며, 클라이언트로부터 받은 변경 사항을 정렬하고 다른 참여자들에게 전파합니다. * 클라이언트는 네트워크 지연 시간 동안에도 사용자에게 즉각적인 반응성을 제공하기 위해 '낙관적 업데이트'를 적용합니다. * 서버에서 승인된 최종 상태가 클라이언트에 도착하면, 클라이언트는 자신의 로컬 상태를 서버의 상태에 맞춰 재정렬(Rebase)하여 최종적인 일관성을 유지합니다. ### 효율적인 충돌 해결 로직 * 단순 속성 변경의 경우 '마지막에 작성한 사람이 승리(Last Writer Wins)'하는 방식을 사용하여 충돌 해결 프로세스를 단순화했습니다. * 레이어 계층 구조 관리 시 발생할 수 있는 순환 참조 문제(예: 부모 노드가 자신의 자식 노드 하위로 들어가는 경우)를 방지하기 위한 특수한 유효성 검사 로직을 서버와 클라이언트에 동일하게 구현했습니다. * 여러 사용자가 동일한 객체의 서로 다른 속성(예: 하나는 색상, 하나는 크기)을 수정할 때는 충돌 없이 자연스럽게 병합되도록 설계되었습니다. ### WebAssembly를 활용한 성능 최적화 * 브라우저 환경에서 대규모 디자인 파일을 부드럽게 처리하기 위해 핵심 편집 엔진을 C++로 작성하고, 이를 WebAssembly로 컴파일하여 실행합니다. * 이를 통해 자바스크립트의 가비지 컬렉션으로 인한 성능 저하를 피하고, 복잡한 벡터 연산과 렌더링을 네이티브 앱에 가까운 속도로 수행할 수 있습니다. * 클라이언트와 서버 간의 데이터 직렬화 및 역직렬화 과정에서도 고성능 바이너리 포맷을 사용하여 데이터 전송 효율을 극대화했습니다. Figma의 기술적 선택은 복잡한 실시간 시스템을 구축할 때 학술적인 표준 알고리즘을 맹목적으로 따르기보다, 비즈니스 도메인의 특성에 맞춰 시스템을 단순화하는 것이 얼마나 효율적인지 잘 보여줍니다. 고성능 웹 애플리케이션을 지향한다면 WebAssembly를 통한 엔진 구축과 서버 중심의 명확한 상태 관리 전략을 검토해 볼 가치가 있습니다.

Config 202 (새 탭에서 열림)

지난 4년간의 Config 컨퍼런스 데이터를 통해 분석한 디자인 업계의 변화는, 단순한 시각적 작업을 넘어 개발과의 통합 및 비즈니스 전략으로서의 역할 확대로 요약됩니다. 디자이너의 업무는 이제 개별 화면을 그리는 것에서 벗어나 복잡한 시스템을 구축하고 AI를 활용해 창의성의 영역을 넓히는 방향으로 진화하고 있습니다. 결과적으로 현대의 디자인은 제품 개발의 전 과정에서 더 깊은 기술적 이해와 긴밀한 협업을 요구받는 시점에 도달했습니다. **기술과 디자인의 경계 붕괴** * '핸드오프(Handoff)'라는 단절된 개념이 사라지고, 디자인과 개발이 하나의 연속적인 워크플로우로 통합되고 있습니다. * 디자이너들은 코드의 구조를 이해하고 실제 구현 가능성을 고려하여 설계하며, 도구 또한 디자인을 코드로 직접 변환하거나 개발자에게 친화적인 데이터를 제공하는 방향으로 발전했습니다. * 이러한 흐름은 제품의 품질을 높일 뿐만 아니라, 아이디어가 실제 제품으로 구현되는 시간을 획기적으로 단축시킵니다. **시스템적 사고와 디자인 시스템의 정착** * 일회성 페이지 제작이 아닌, 재사용 가능한 디자인 시스템(Design Systems) 구축이 디자인 워크플로우의 핵심으로 자리 잡았습니다. * 변수(Variables)와 스타일 라이브러리를 통해 대규모 제품에서도 일관성을 유지할 수 있는 기반이 마련되었습니다. * 디자인 시스템은 단순한 가이드를 넘어 팀 전체의 생산성을 높이는 '운영 체제' 역할을 수행하며, 디자인의 규모를 확장하는 데 필수적인 요소가 되었습니다. **AI를 통한 창의적 생산성의 재정의** * AI는 이미지 배치, 더미 텍스트 채우기 같은 반복적이고 번거로운 작업(Chore)을 자동화하여 디자이너가 핵심 가치에 집중할 수 있게 돕습니다. * 디자이너는 이제 '그리는 사람'에서 AI를 활용해 최적의 결과물을 선택하고 정제하는 '디렉터'의 역할로 변모하고 있습니다. * AI는 프로토타이핑 속도를 높여 더 많은 실험을 가능하게 하며, 복잡한 데이터 분석을 디자인 과정에 결합하는 데 기여합니다. **비즈니스 가치 창출과 제품 사고** * 디자인의 성공 척도가 미적인 완성도를 넘어 비즈니스 임팩트와 사용자 지표로 이동하고 있습니다. * 디자이너는 제품의 시장 적합성을 고민하고 데이터를 바탕으로 의사결정을 내리는 '제품 사고(Product Thinking)'를 갖추어야 합니다. * 기업 내에서 디자인 조직의 위상이 높아짐에 따라, 경영진과의 소통 및 전략적 의사결정에 참여하는 역량이 더욱 중요해졌습니다. 디자이너는 이제 도구 숙련도를 넘어 개발 언어와 비즈니스 로직에 대한 깊은 이해를 갖춘 '전략적 파트너'가 되어야 합니다. AI와 디자인 시스템을 적극적으로 수용하여 업무의 효율을 극대화하고, 이를 통해 확보된 시간을 제품의 본질적인 문제를 해결하고 사용자 경험을 혁신하는 데 투자할 것을 권장합니다.

Figma 슬라이드 덱 (새 탭에서 열림)

인디 록 듀오 '탠라인스(Tanlines)'는 8년 만의 컴백 신곡 'Outer Banks'의 뮤직비디오를 위해 피그마(Figma)의 슬라이드 데크와 구글 미트(Google Meet) 환경을 활용하는 독특한 시도를 선보였습니다. 멤버 제시 코헨은 공백기 동안 유튜브 뮤직과 나이키에서 근무하며 익힌 기업적 소통 방식인 '슬라이드 데크'를 예술적 도구로 재해석하여, 현대 직장인들의 원격 협업 문화를 음악적 서사로 치환했습니다. 이 프로젝트는 업무용 툴이 단순한 생산성 도구를 넘어, 창작자와 팬들이 공유하는 일상적인 언어로서 기능할 수 있음을 보여줍니다. **직장인의 공용어, 슬라이드 덱의 예술적 재해석** * 탠라인스의 멤버 제시 코헨은 지난 8년간 기업에서 근무하며 슬라이드 데크가 현대 전문직 종사자들의 '공용어(Lingua Franca)'가 되었다는 점에 주목했습니다. * 뮤직비디오는 구글 미트 화면 속에서 피그마 슬라이드를 발표하는 형식을 취하며, 보컬 에릭 엠이 노래하는 모습은 마치 회의에서 슬라이드 내용을 읽어주는 발표자의 모습을 연상시킵니다. * 이는 원격 근무가 일상화된 시대에 창작 활동과 직장 생활, 육아를 병행해야 하는 아티스트의 현실적인 삶을 반영한 설정입니다. **Figma를 활용한 지극히 현실적인 시각 언어 구현** * 소셜 전문 에이전시의 헌터 엘렌바거(Hunter Ellenbarger)와 협업하여 피그마로 슬라이드를 제작했으며, 초기에는 전 곡의 슬라이드 데크를 구글 드라이브나 피그마 폴더 형태로 배포할 계획도 세웠습니다. * 시각적으로 너무 화려하거나 미학적인 디자인보다는, 실제 기업 미팅에서 흔히 볼 수 있는 그래프, 화살표, 흐름도, 인사이트 문구 등을 의도적으로 배치하여 사실감을 높였습니다. * 이러한 '제너릭(Generic)'한 디자인은 직장인들이 매일 접하는 업무 환경을 음악이라는 프레임 안으로 가져와, 팬들이 자신의 일상과 연결된 느낌을 받도록 유도합니다. **변화된 삶의 궤적을 반영한 협업의 가치** * 이번 앨범 *The Big Mess*는 과거의 앨범 커버처럼 멤버들의 얼굴을 전면에 내세우는 대신, 그래픽 디자이너 테디 블랭크스와 협업하여 보다 개념적이고 단순한 디자인을 채택했습니다. * 탠라인스라는 이름의 유래가 '스튜디오 안에서만 작업하다 밖으로 나갔을 때 생기는 햇볕에 탄 자국'인 것처럼, 이번 작업 역시 현실 세계의 의무와 예술적 자아 사이의 균형을 찾는 과정이었습니다. * 중년에 접어든 아티스트로서 느끼는 불확실성을 인정하고, 이를 동료들과의 협업을 통해 우아하게 표현하는 데 집중했습니다. **실용적인 시사점** 협업 툴인 피그마와 화상 회의 시스템은 단순히 업무 효율을 높이는 도구를 넘어, 현대인의 삶을 규정하는 중요한 '컨텍스트'가 되었습니다. 탠라인스의 사례처럼 지루하게 느껴질 수 있는 기업적 형식을 창의적인 콘텐츠의 포맷으로 활용한다면, 타겟 청중에게 깊은 공감과 신선한 재미를 동시에 선사할 수 있습니다.

4년이 지난 지금, Config가 (새 탭에서 열림)

Config 2021은 전 세계 디자이너들이 모여 협업의 미래를 논의한 Figma의 연례 컨퍼런스로, 디자인 프로세스의 확장과 커뮤니티의 연결성을 강조했습니다. 이 글은 팀원들이 아이디어를 자유롭게 발산할 수 있는 신규 도구인 'FigJam'의 출시와 디자인 시스템의 안정성을 높이는 브랜칭(Branching) 기능 등 주요 업데이트를 요약하고 있습니다. 결과적으로 Figma는 단순한 디자인 도구를 넘어 제품 개발 전 과정에서 팀원 모두가 참여할 수 있는 통합 협업 플랫폼으로 진화했음을 보여줍니다. **FigJam: 아이디어 구상을 위한 온라인 화이트보드** * 디자인 이전 단계의 브레인스토밍, 다이어그램 작성, 팀 미팅을 원활하게 지원하는 신규 서비스 FigJam이 공개되었습니다. * 스티커 메모, 스탬프, 커서 채팅 등 인터랙티브한 요소를 통해 디자이너뿐만 아니라 기획자, 개발자 등 모든 이해관계자가 즐겁게 협업할 수 있는 환경을 제공합니다. * Figma 파일과 유기적으로 연결되어, FigJam에서 논의된 아이디어를 즉시 디자인 작업으로 이어나갈 수 있는 워크플로우를 구축했습니다. **디자인 시스템의 고도화와 브랜칭 기능** * 대규모 팀이 디자인 라이브러리를 안전하게 관리할 수 있도록 '브랜칭 및 병합(Branching & Merging)' 기능이 도입되었습니다. * 메인 라이브러리를 손상시키지 않고 별도의 공간에서 디자인 수정을 실험할 수 있으며, 검토(Review) 프로세스를 거쳐 변경 사항을 안전하게 반영할 수 있습니다. * 이는 소프트웨어 개발의 버전 관리 시스템과 유사한 방식을 디자인에 도입하여 시스템의 일관성과 안정성을 극대화한 조치입니다. **커뮤니티 중심의 생태계 확장** * 전 세계 디자이너들이 자신의 작업물과 플러그인, 위젯을 공유할 수 있는 커뮤니티 기능을 강화하여 집단 지성을 활용하도록 독려했습니다. * 누구나 도구를 커스터마이징하고 기능을 확장할 수 있도록 API를 개방하여, 사용자가 직접 필요한 기능을 제작하고 공유하는 생태계를 구축했습니다. **모바일 환경에서의 워크플로우 개선** * 새롭게 리뉴얼된 Figma 모바일 앱을 통해 장소에 구애받지 않고 디자인을 검토하고 실시간으로 피드백을 주고받을 수 있게 되었습니다. * 모바일 기기에서의 프로토타입 미러링 기능을 개선하여 실제 기기 환경에서 사용자 경험을 더 정확하게 테스트할 수 있는 환경을 마련했습니다. 효과적인 팀 협업을 위해 기획 초기 단계부터 FigJam을 활용하여 아이디어를 시각화하고, 복잡해진 디자인 라이브러리 관리에는 브랜칭 기능을 도입하여 안정적인 디자인 배포 프로세스를 구축할 것을 권장합니다.

그잼 스크린 리더 (새 탭에서 열림)

Figma는 디자인 도구가 시각적 경험에만 국한되지 않고 모든 사용자가 접근 가능해야 한다는 비전 아래, 새로운 스크린 리더 프로토타입 베타 버전을 발표했습니다. 이는 디자인 프로세스 전반에 걸쳐 장벽을 허물려는 Figma의 지속적인 노력의 일환으로, 시각 장애가 있는 디자이너와 협업자가 디자인 파일의 구조와 내용을 더 깊이 있게 이해할 수 있도록 돕는 것을 목표로 합니다. **디자인 접근성 강화를 위한 비전** * Figma는 "모두를 위한 디자인(Design for all)"이라는 철학을 바탕으로, 시각 중심적인 인터페이스 때문에 디자인 소외 계층이 발생하던 문제를 해결하고자 합니다. * 단순한 도구 사용의 편의성을 넘어, 디자인 결과물뿐만 아니라 디자인 과정 자체에 누구나 참여할 수 있는 포용적인 환경을 구축하는 데 집중하고 있습니다. * 이를 위해 내부 연구팀과 접근성 전문가들이 협업하여 시각적 정보를 텍스트와 음성으로 전환하는 최적의 메커니즘을 탐구해 왔습니다. **스크린 리더 프로토타입 베타의 주요 기능** * 이번에 공개된 프로토타입은 캔버스 내 레이어의 구조, 텍스트 내용, 그리고 각 디자인 요소의 속성을 스크린 리더가 인식할 수 있는 형태로 변환하여 제공합니다. * 사용자는 디자인 파일 내에서 논리적인 순서에 따라 요소를 탐색할 수 있으며, 복잡한 디자인 시스템의 계층 구조를 음성을 통해 파악할 수 있습니다. * 현재 단계에서는 베타 버전을 통해 실제 사용자들의 피드백을 수집하며, 디자인 객체 간의 관계성을 더 명확하게 전달할 수 있도록 알고리즘을 고도화하고 있습니다. **지속적인 연구와 커뮤니티 협력** * Figma는 접근성 개선이 단발성 기능 업데이트가 아닌 장기적인 연구(Research)와 설계(Design)가 필요한 과제임을 강조합니다. * 내부 팀인 'Inside Figma'를 중심으로 접근성 기술의 한계를 테스트하고 있으며, 실제 장애를 가진 사용자 그룹과의 긴밀한 협력을 통해 실질적인 해결책을 모색하고 있습니다. * 이번 베타 발표는 접근성 로드맵의 시작점이며, 향후 더 넓은 범위의 사용자들이 디자인 생태계에 참여할 수 있도록 기술적 지원을 확대할 계획입니다. Figma의 이번 시도는 단순히 기능을 추가하는 것을 넘어 디자인 도구의 표준을 확장하려는 중요한 발걸음입니다. 시각 장애가 있는 동료와 협업하거나 디자인 시스템의 접근성을 검토해야 하는 조직은 이번 베타 버전에 참여하여 피드백을 제공함으로써, 더욱 포용적인 디자인 워크플로우를 함께 구축해 나갈 수 있습니다.

디자인 시스템의 미래는 접근 (새 탭에서 열림)

디자인 시스템은 단순한 UI 컴포넌트 라이브러리를 넘어, 전 산업적인 비효율을 해결하고 디자인과 개발의 경계를 허무는 복합적인 생태계로 진화하고 있습니다. 현재 모든 기업이 동일한 기본 요소를 각자 구축하는 비효율에서 벗어나, 표준화된 '글로벌 디자인 시스템'이라는 공통 기반 위에서 고유한 브랜드 가치를 창출하는 방향으로 나아가야 합니다. 이를 통해 기술적 부채를 줄이고 사용자 경험의 본질적인 혁신에 집중할 수 있는 구조를 만드는 것이 미래 디자인 시스템의 핵심입니다. **반복되는 기초 작업과 산업적 비효율성** * 현재 수많은 기업과 팀이 버튼, 입력창, 체크박스 같은 기본적인 UI 요소를 각자 처음부터 다시 설계하고 개발하는 데 막대한 자원을 낭비하고 있습니다. * 이러한 "바퀴의 재발명"은 디자인 시스템 팀이 실제 비즈니스 문제를 해결하거나 사용자 경험을 개선하는 고차원적인 작업보다 기초적인 인프라 유지보수에 매몰되게 만듭니다. * 웹 표준의 발전 속도보다 개별 기업의 시스템 구축 속도가 느린 경우가 많아, 접근성이나 성능 최적화가 누락되는 보안 및 품질 이슈가 발생합니다. **글로벌 디자인 시스템(Global Design System)의 필요성** * 전 세계적으로 통용될 수 있는 공통 UI 레이어를 구축하여, 누구나 고품질의 접근성과 성능이 보장된 컴포넌트 기초를 활용할 수 있어야 합니다. * 개별 기업은 이 공통 레이어 위에 자사의 디자인 토큰(색상, 타이포그래피 등)과 고유한 비즈니스 로직을 입히는 방식으로 작업의 효율성을 극대화할 수 있습니다. * 이는 디자인 시스템의 역할을 '컴포넌트 제작'에서 '표준화된 경험의 조립 및 최적화'로 전환시키는 계기가 됩니다. **디자인과 코드의 완전한 통합과 자동화** * 피그마(Figma)와 같은 디자인 도구와 실제 프로덕션 코드 사이의 간극을 메우기 위해, 디자인 의사결정이 즉시 코드로 치환되는 워크플로우가 강화되어야 합니다. * 디자인 토큰의 고도화를 통해 스타일 변경이 개발자의 수동 작업 없이도 전체 플랫폼에 실시간으로 반영되는 자동화 파이프라인 구축이 필수적입니다. * AI 기술은 디자인 시스템의 문서를 자동 생성하거나, 디자인 의도를 이해하여 표준 컴포넌트로 코드를 변환하는 등 디자인 시스템의 운영 효율을 비약적으로 높여줄 것입니다. **조직의 역할 변화와 거버넌스 확장** * 미래의 디자인 시스템 팀은 단순히 컴포넌트를 만들어 배포하는 '공급자'가 아니라, 전사적인 디자인 품질을 관리하고 가이드를 제시하는 '조정자(Orchestrator)' 역할을 수행해야 합니다. * 시스템이 복잡해질수록 유연한 거버넌스 모델이 중요해지며, 중앙 집중식 관리와 각 제품 팀의 자율적인 기여가 조화를 이루는 연합형 구조가 요구됩니다. 앞으로 디자인 시스템을 구축하거나 운영할 때는 "우리가 직접 만들어야만 하는 독창적인 요소는 무엇인가?"를 끊임없이 질문해야 합니다. 공통적인 요소는 오픈소스나 표준화된 라이브러리를 적극 활용하여 비용을 절감하고, 남는 자원을 우리 서비스만의 차별화된 사용자 경험을 설계하는 데 투입하는 전략적 선택이 필요합니다.

피그마가 게임 세계에서 (새 탭에서 열림)

피그마는 단순한 웹 애플리케이션을 넘어 고성능 게임 엔진과 유사한 기술적 아키텍처를 기반으로 구축된 창의적 협업 도구입니다. 이 글은 피그마가 실시간 멀티플레이어 시스템, 물리 기반 애니메이션, 그리고 C++와 WebAssembly, Rust와 같은 고성능 스택을 통해 어떻게 디지털 세계를 구축하는지 설명합니다. 결과적으로 피그마는 게임 개발의 복잡한 시스템 상호작용 원리를 차용하여 사용자들에게 몰입감 있고 매끄러운 디자인 경험을 제공하고 있습니다. ## 디지털 세계를 구축하는 엔진으로서의 피그마 * 피그마의 핵심은 웹 기반의 2D 그래픽 및 렌더링 시스템으로, 이는 마인크래프트와 같은 게임 엔진의 근간과 동일한 구조를 가집니다. * 사용자가 생성하는 모든 텍스트, 도형, 선을 브라우저에서 실시간으로 구현하며, 방대한 캔버스에서의 팬(pan)과 줌(zoom) 조작 시에도 정확한 위치에 객체를 렌더링합니다. * 실시간 동시 편집 기능을 게임의 개념에서 착안한 '멀티플레이어(multiplayer)' 엔진이라고 명명하여 협업의 핵심 시스템으로 발전시켰습니다. * 브라우저 및 모바일 앱의 메모리와 성능 제약을 극복하기 위해 일반적인 웹 스택 대신 C++로 캔버스를 구축한 후 WebAssembly로 컴파일하여 로딩 속도를 3배 개선했으며, 서버 측 성능 향상을 위해 Rust 언어를 도입했습니다. ## 시스템 기반의 창의적 협업과 상호작용 * 게임 스튜디오에서 엔지니어와 아티스트가 협업하듯, 피그마 엔지니어들은 시스템의 한계를 밀어붙이기 위해 디자이너, PM, 데이터 과학자들과 긴밀하게 소통합니다. * '젤다의 전설: 브레스 오브 더 와일드'의 불(fire) 시스템이 빛, 온기, 공격 수단 등 다양한 방식으로 상호작용하는 것처럼, 피그마의 오토세이브, 멀티플레이어, 렌더링 시스템도 서로 유기적으로 연결되어 작동합니다. * 단순한 도구 기능을 넘어 스프링 물리 법칙을 적용한 애니메이션 시스템, 커서 채팅, 하이파이브 기능 등을 통해 사용자가 도구 내에서 살아있는 피드백을 느낄 수 있도록 설계했습니다. * 베리언트(Variants) 기능과 플러그인/위젯 시스템을 통해 디자인 컴포넌트와 코드를 긴밀하게 연결하고, 사용자가 직접 생태계를 확장할 수 있는 개방형 플랫폼을 지향합니다. 웹 환경에서 복잡하고 성능 집약적인 도구를 개발해야 한다면, 전통적인 웹 프레임워크의 틀을 벗어나 게임 엔진의 설계 방식과 고성능 언어(WASM, Rust) 도입을 검토해야 합니다. 기술적 한계를 극복하는 열쇠는 도구를 하나의 살아있는 '시스템'들의 집합으로 바라보고, 각 요소 간의 상호작용이 사용자 경험에 미치는 영향을 정교하게 설계하는 데 있습니다.

쿠팡 로켓배송: 공간 색인 기반의 새로운 배송 영역 관리 시스템 (새 탭에서 열림)

쿠팡은 급증하는 배송 물량과 복잡해지는 배송 환경에 대응하기 위해 기존의 텍스트 및 우편번호 중심 시스템에서 탈피하여 공간 색인 기술인 H3를 도입한 새로운 배송 영역 관리 시스템을 구축했습니다. 이 시스템은 배송 영역을 지도상에 시각화하고 데이터 기반으로 정교하게 분할할 수 있게 함으로써, 숙련자의 경험에만 의존하던 운영 방식에서 벗어나 누구나 직관적으로 배송 경로를 최적화할 수 있는 환경을 제공합니다. 결과적으로 공간 데이터 중심의 관리를 통해 신축 건물이나 지형 변화에도 유연하게 대처할 수 있는 로켓배송의 기술적 토대를 마련했습니다. **텍스트 기반 우편번호 체계의 한계** * 기존 시스템은 정부의 우편번호와 텍스트 주소에 의존했으나, 쿠팡의 성장에 따라 단일 우편번호 내 배송 건수가 한 명의 쿠친이 처리할 수 있는 범위를 초과하게 되었습니다. * 우편번호를 아파트 단지나 동 단위로 세분화해야 했으나, 텍스트 정보만으로는 공간적 위치를 파악하기 어려워 해당 지역에 능숙한 캠프 리더의 직관에만 의존하는 문제가 있었습니다. * 신축 건물의 등장이나 철거 등 지형적 변화가 발생했을 때 이를 시스템에 즉각적으로 반영하고 배송 영역을 조정하는 데 한계가 있었습니다. **H3 공간 색인 시스템의 도입** * 우버(Uber)에서 개발한 육각형 기반의 그리드 시스템인 H3를 도입하여 전 세계를 균일한 크기의 육각형 격자로 나누어 관리합니다. * 육각형 구조는 인접한 모든 이웃 격자와의 중심점 거리가 동일하여, 사각형이나 삼각형 격자보다 공간 분석 및 경로 최적화 계산에 훨씬 유리합니다. * 주소라는 텍스트 데이터 대신 위경도 기반의 공간 좌표를 사용함으로써 배송 영역의 경계를 더욱 명확하고 정교하게 설정할 수 있습니다. **시스템 재설계와 시각화 최적화** * 캠프 작업자들이 지도 위에서 배송 영역을 직접 확인하고, 마우스 클릭이나 드래그를 통해 영역을 생성, 수정, 공유할 수 있는 직관적인 UI를 구현했습니다. * 개별 육각형 격자들을 그룹화하여 하나의 다각형(Polygon) 형태로 변환하는 기술을 적용해 지도 렌더링 성능을 높이고 사용자 가독성을 개선했습니다. * 배송 밀도와 작업량을 격자 단위로 수치화하여 제공함으로써, 특정 영역에 업무가 쏠리지 않도록 균등하게 배송 물량을 배분할 수 있는 통계 기능을 강화했습니다. 물류 및 배송 시스템에서 주소는 더 이상 단순한 텍스트가 아닌 정교한 공간 데이터로 다뤄져야 합니다. 격자 기반의 공간 색인 시스템을 활용하면 운영 효율을 극대화할 수 있을 뿐만 아니라, 향후 자율주행 배송이나 드론 배송과 같은 미래 기술로 확장하기 위한 필수적인 데이터 구조를 확보할 수 있습니다. 이미 주소 기반 시스템의 한계를 느끼고 있는 물류 기업이라면 H3와 같은 공간 인덱싱 기술로의 전환을 적극적으로 검토할 것을 권장합니다.

혁신적인 제품을 만드는 법: (새 탭에서 열림)

Can design make work, work? Working Well Leadership Operations Meetings

데이터베이스 아키텍처 (새 탭에서 열림)

피그마(Figma)는 급격한 사용자 증가에 따른 데이터베이스 부하 문제를 해결하기 위해 단일 Postgres 인스턴스에서 분산된 Vitess(MySQL 기반) 클러스터로 전환하는 대규모 샤딩 프로젝트를 성공적으로 완수했습니다. 이 과정에서 피그마 엔지니어링 팀은 서비스 중단 없이 테라바이트급 데이터를 이전하기 위해 정교한 실시간 복제 및 검증 시스템을 구축했습니다. 결론적으로 이들은 인프라의 한계를 미리 예측하고, 애플리케이션 계층의 수정을 최소화하면서도 수평적 확장이 가능한 데이터 아키텍처를 확보하게 되었습니다. ### 수직적 확장의 한계와 샤딩의 필연성 * 초기 피그마는 단일 AWS RDS Postgres 인스턴스에 의존했으나, 트래픽이 급증하며 가장 큰 인스턴스 크기로도 쓰기 부하를 감당할 수 없는 임계점에 도달했습니다. * 수직적 확장(Vertical Scaling)과 읽기 복제본(Read Replicas) 추가만으로는 쓰기 성능 문제를 해결할 수 없음을 인지하고, 데이터를 여러 노드에 나누어 저장하는 수평적 확장(Sharding)을 결정했습니다. * 자체적인 샤딩 솔루션을 구축하는 대신, 유튜브 등에서 검증된 오픈소스 데이터베이스 클러스터링 시스템인 Vitess를 도입하여 운영 복잡성을 관리하기로 했습니다. ### Postgres에서 Vitess로의 대규모 이관 전략 * 기존 Postgres 환경에서 MySQL 기반의 Vitess로 전환하는 것은 데이터 모델과 쿼리 호환성 측면에서 큰 도전이었으며, 이를 위해 'FDB(Figma Database)'라는 중간 레이어를 구축했습니다. * **Shadow Writing(새도우 라이팅):** 모든 쓰기 작업을 기존 DB와 새 Vitess DB에 동시에 수행하여 데이터 정합성을 실시간으로 확인했습니다. * **Logical Replication(논리적 복제):** 기존 데이터를 중단 없이 옮기기 위해 CDC(Change Data Capture) 기술을 활용하여 소스 데이터베이스의 변경 사항을 실시간으로 Vitess에 반영했습니다. ### 무중단 컷오버와 정합성 검증 * 데이터 이전의 신뢰성을 확보하기 위해 'Consistency Checker'를 가동하여 기존 DB와 새 DB의 레코드를 지속적으로 비교하고 불일치를 해결했습니다. * **Query Replay:** 실제 운영 트래픽을 복제하여 대상 시스템에 미리 실행해 봄으로써 성능 병목 지점과 쿼리 호환성 문제를 사전에 파악했습니다. * 최종 전환 시에는 아주 짧은 읽기 전용(Read-only) 시간을 가진 후, 트래픽의 방향을 Vitess로 돌리는 방식을 통해 사용자 경험에 영향을 주지 않고 성공적으로 전환했습니다. ### 개발자 경험 보존을 위한 쿼리 라우팅 * 샤딩된 환경에서도 개발자들이 개별 샤드의 위치를 신경 쓰지 않고 개발할 수 있도록 투명한 쿼리 라우팅 시스템을 구현했습니다. * 크로스 샤드 조인(Cross-shard join)과 같이 분산 환경에서 성능이 저하될 수 있는 쿼리들을 모니터링하고, 필요에 따라 스키마 설계를 최적화하여 분산 시스템의 성능 이점을 극대화했습니다. * 애플리케이션 코드의 대대적인 수정 없이도 샤딩된 데이터베이스를 활용할 수 있게 함으로써 피쳐 개발 속도를 유지했습니다. 급격히 성장하는 서비스에서 데이터베이스 확장은 피할 수 없는 과제이며, 이를 위해 서비스 초기부터 데이터 간의 관계(Entity Groups)를 명확히 정의해두는 것이 추후 샤딩 난이도를 낮추는 데 결정적인 역할을 합니다. 또한, 대규모 인프라 변경 시에는 완벽한 자동화보다는 단계적인 검증과 새도우 트래픽 테스트를 통해 데이터 유실 리스크를 최소화하는 보수적인 접근 방식이 권장됩니다.

리틀 빅 아웃테이크 | (새 탭에서 열림)

Figma는 대규모 기능 개발 주기 사이에서 자칫 소홀해질 수 있는 세밀한 사용자 경험과 코드의 완성도를 높이기 위해 'Quality Week'라는 집중 개선 기간을 운영합니다. 이 기간 동안 엔지니어들은 평소 우선순위에서 밀려있던 작은 불편함(papercuts)을 해결하는 'Little Big Updates(LBU)'에 집중하여 제품의 전반적인 폴리싱(Polishing)을 수행합니다. 이러한 사소한 개선들의 축적은 사용자에게 제품이 더 정교하고 신뢰할 수 있다는 인상을 주며, 결과적으로 서비스의 전체적인 품질을 한 단계 끌어올리는 결론에 도달합니다. **Quality Week의 운영 방식과 목적** * 정규 로드맵의 압박에서 벗어나 엔지니어, 디자이너, PM이 오직 '품질 향상'이라는 단일 목표를 위해 협업하는 전사적 이벤트입니다. * 기능의 규모와 상관없이 사용자 경험을 방해하는 사소한 버그, UI 불일치, 성능 저하 요소를 리스트업하고 집중적으로 해결합니다. * 단순히 오류를 고치는 것을 넘어, 사용자가 제품을 사용할 때 느끼는 심리적 마찰(friction)을 줄이는 데 초점을 맞춥니다. **Little Big Updates(LBU)를 통한 UX 정교화** * **시각적 일관성:** 캔버스 내 정렬 도구의 피드백 기능을 강화하거나, 레이어 패널의 아이콘 가시성을 개선하여 작업 효율을 높입니다. * **상호작용 최적화:** 폰트 선택기나 컬러 피커의 로딩 속도를 개선하고, 단축키 반응성을 높여 전문 디자이너들의 작업 흐름이 끊기지 않도록 합니다. * **세밀한 기능 개선:** 파일 관리 폴더의 드래그 앤 드롭 동작을 더 직관적으로 수정하는 등, 사용자가 매일 겪는 '작은 불편함'들을 제거합니다. **엔지니어링 성능 및 내부 품질 강화** * **렌더링 성능 최적화:** 대규모 레이어가 포함된 복잡한 파일에서 줌인/아웃 및 패닝 동작 시의 프레임 드랍을 줄이기 위한 코드 최적화를 진행합니다. * **기술 부채 청산:** UI 구성 요소의 중복 코드를 정리하고 내부 라이브러리를 최신화하여, 장기적으로 개발 속도를 늦추는 장애물을 제거합니다. * **메모리 효율화:** 브라우저 환경에서 동작하는 Figma의 특성을 고려해, 불필요한 메모리 점유를 줄여 대용량 프로젝트의 안정성을 확보합니다. **지속 가능한 품질 관리를 위한 제언** 혁신적인 신기능 출시만큼이나 중요한 것은 사용자가 매일 마주하는 사소한 부분에서의 완성도입니다. 개발 팀은 정기적으로 '품질 집중 주간'을 설정하여 기술 부채와 UX 개선을 병행해야 하며, 이러한 작은 변화들이 모여 브랜드의 강력한 경쟁력이 된다는 점을 인식해야 합니다. 특히 사용자의 목소리가 큰 작은 불편함들을 빠르게 해결해 주는 것은 커뮤니티와의 신뢰를 구축하는 가장 효과적인 방법 중 하나입니다.