dev-mode

Claude Code에서 Figma로: 프로덕 (새 탭에서 열림)

피그마가 AI 모델과 디자인 데이터를 긴밀하게 연결하기 위해 'Model Context Protocol(MCP)' 서버를 공식 출시했습니다. 이 기술을 통해 개발자는 클로드(Claude)와 같은 AI 어시스턴트에게 피그마 디자인에 대한 직접적인 접근 권한을 부여하고, 디자인 스펙을 바탕으로 코드를 생성하거나 자산을 추출하는 작업을 자동화할 수 있습니다. 결과적으로 디자인과 개발 간의 핸드오프 과정을 획기적으로 단축하고, AI가 디자인 맥락을 정확히 이해한 상태에서 협업할 수 있는 환경을 구축했습니다. ### MCP를 통한 디자인 데이터의 개방 * **표준화된 연결성**: MCP는 디자인 도구와 LLM(대형 언어 모델) 사이의 가교 역할을 하는 오픈 소스 프로토콜로, AI가 복잡한 설정 없이도 피그마의 라이브 데이터에 접근할 수 있게 합니다. * **맥락 유지**: 개발자가 디자인 파일을 일일이 캡처하거나 수동으로 수치를 입력할 필요 없이, AI 에이전트가 직접 피그마 API를 호출하여 최신 디자인 상태를 파악합니다. * **도구 간 장벽 완화**: 디자인 도구에 익숙하지 않은 개발자도 채팅 인터페이스만으로 필요한 디자인 정보(색상값, 간격, 텍스트 스타일 등)를 실시간으로 가져올 수 있습니다. ### Figma MCP 서버의 핵심 기능 * **파일 탐색 및 검색**: 파일 이름, 프로젝트, 팀 정보를 바탕으로 필요한 디자인 파일을 AI가 스스로 검색하고 식별할 수 있습니다. * **레이어 및 속성 검사**: 특정 레이어를 선택하여 속성을 확인하거나, 구성 요소의 계층 구조와 CSS 스타일 정보를 추출하여 코드 구현에 즉시 활용합니다. * **이미지 및 자산 내보내기**: 디자인 파일 내의 이미지를 AI가 직접 렌더링하거나 내보내기(Export) 기능을 수행하여 개발 환경으로 가져올 수 있습니다. * **데브 모드(Dev Mode) 연동**: 피그마 데브 모드와의 연결을 지원하여, AI가 생성한 코드와 실제 디자인 스펙 간의 일관성을 검증하는 데 도움을 줍니다. ### AI 기반 개발 워크플로우의 변화 * **정확한 코드 생성**: 디자인의 세부 수치와 제약 조건을 AI가 직접 읽기 때문에, 환각 현상(Hallucination)을 줄이고 정밀한 UI 컴포넌트 코드를 작성할 수 있습니다. * **반복 작업 자동화**: 아이콘 추출, 스타일 가이드 문서화, 반복적인 CSS 작성 등 단순 작업을 AI에게 맡겨 개발 생산성을 높입니다. * **실시간 피드백 루프**: 디자인이 변경되었을 때 AI에게 "최신 디자인에 맞춰 코드를 수정해줘"라고 요청하는 것만으로 변경 사항을 반영할 수 있는 유연한 워크플로우가 가능해집니다. 현재 이 기능은 오픈 소스로 공개되어 있으며, 클로드 데스크톱(Claude Desktop) 사용자는 피그마에서 제공하는 MCP 서버 설정 값을 통해 즉시 자신의 워크플로우에 통합할 수 있습니다. 디자인 시스템을 효율적으로 관리하고 디자인-투-코드(Design-to-Code) 자동화를 구현하고자 하는 팀에게 이 MCP 서버는 매우 유용한 도구가 될 것입니다.

Gemini 3를 (새 탭에서 열림)

피그마는 디자이너와 개발자 간의 협업 간극을 줄이기 위해 디자인 의도를 개발 환경으로 직접 전달하는 '디자인 컨텍스트(Design Context)' 환경 구축에 집중하고 있습니다. 단순한 가이드라인 전달을 넘어 개발자가 사용하는 도구 내에서 디자인 데이터에 접근하고 이를 코드로 변환하는 과정을 최적화하여 워크플로우를 혁신하고 있습니다. 이러한 변화는 개발자가 컨텍스트 전환 없이 구현에만 집중할 수 있는 환경을 제공하며, 최종 제품의 품질과 개발 속도를 동시에 높이는 결과를 가져옵니다. ### 개발 환경으로 확장된 Dev Mode와 VS Code 통합 * **Figma for VS Code:** 개발자가 편집기를 떠나지 않고도 디자인 파일을 확인하고, 속성을 추출하며, 디자이너와 실시간으로 소통할 수 있는 익스텐션을 제공합니다. * **코드 스니펫 커스터마이징:** 단순한 CSS 제공을 넘어 프로젝트의 라이브러리나 프레임워크에 맞는 맞춤형 코드 스니펫을 생성하여 코드 작성 시간을 단축합니다. * **에셋 관리 자동화:** 아이콘이나 이미지 등의 에셋을 수동으로 다운로드할 필요 없이 개발 환경에서 즉시 최적화된 형태로 내려받을 수 있는 기능을 지원합니다. ### 디자인 시스템과 코드의 정렬 * **UI 키트의 진화:** 디자이너가 사용하는 UI 구성 요소가 코드상의 컴포넌트 구조와 일치하도록 설계된 UI 키트를 통해 일관성을 유지합니다. * **Design Tokens 연동:** 색상, 타이포그래피, 간격 등의 디자인 변수를 코드로 직접 동기화하여 디자인 변경 사항이 개발 환경에 실시간으로 반영되도록 합니다. * **컴포넌트 문서화:** Dev Mode 내에서 해당 컴포넌트의 사용법, 변수(variants), 관련 문서 링크를 바로 확인할 수 있어 불필요한 커뮤니케이션 비용을 줄입니다. ### 효율적인 핸드오프를 위한 소통 도구 * **디자인 상태 표시(Status update):** 디자인이 '개발 준비 완료(Ready for development)' 상태인지 직관적으로 확인할 수 있도록 하여 불완전한 디자인의 구현을 방지합니다. * **어노테이션(Annotation):** 디자이너가 특정 영역에 개발적인 요구사항이나 인터랙션 디테일을 직접 기입할 수 있는 주석 기능을 강화하여 명확한 가이드를 제공합니다. * **비주얼 디프(Visual Diff):** 이전 버전의 디자인과 현재 디자인의 차이점을 시각적으로 비교하여 변경된 부분만 골라내어 업데이트할 수 있도록 돕습니다. 디자인 컨텍스트를 개발 과정 곳곳에 배치하는 피그마의 전략은 단순히 도구를 제공하는 것을 넘어 조직 전체의 협업 문화를 바꾸는 데 목적이 있습니다. 개발자는 더 이상 디자인 해석에 시간을 쏟지 않고, 코드 스니펫과 실시간 동기화 도구를 활용해 더 높은 수준의 제품 구현에 집중하는 것이 권장됩니다.

피그마, 인도에 새로운 (새 탭에서 열림)

피그마(Figma)는 인도 벵갈루루에 새로운 허브를 설립하며 세계에서 두 번째로 큰 시장인 인도 내 제품 개발 커뮤니티에 대한 투자를 본격화했습니다. 이번 확장은 AI 기술 도입이 활발한 인도 시장의 특성을 반영하여, 피그마가 단순한 디자인 도구를 넘어 제품 개발 전 과정을 아우르는 AI 기반 협업 플랫폼으로 진화하려는 전략적 움직임입니다. 이를 통해 피그마는 글로벌 사용자의 85%를 차지하는 해외 시장에서의 영향력을 강화하고 사용자 중심의 기술 혁신을 가속화할 방침입니다. **인도 시장의 전략적 가치와 AI 도입 현황** * 인도는 월간 활성 사용자(MAU) 기준 피그마의 세계 2위 시장이며, BSE100(인도 상장사 100대 기업) 기업의 40% 이상이 이미 피그마를 도입했습니다. * 현지 리서치 결과, 인도 디자이너의 93%가 업무에 AI를 활용하고 있으며, 개발자의 81%는 AI 기반 제품의 성공에 디자인이 과거보다 더 중요해졌다고 응답했습니다. * Flipkart, Zomato, Swiggy 등 인도의 대표적인 유니콘 기업들이 피그마를 통해 디자인과 개발의 간극을 줄이고 제품 출시 속도를 높이고 있습니다. **글로벌 네트워크 확장 및 커뮤니티 성장** * 피그마는 매출의 약 50%가 미국 외 시장에서 발생함에 따라 도쿄, 싱가포르, 런던, 파리, 베를린 등에 이어 벵갈루루에 신규 거점을 마련하며 글로벌 운영을 강화하고 있습니다. * 인도 내 'Friends of Figma' 커뮤니티 멤버는 약 25,000명에 달하며, 이들은 전 세계에서 가장 활발하게 디자인 시스템과 협업 툴을 활용하는 집단 중 하나로 꼽힙니다. **Figma Weave와 AI 중심의 제품 혁신** * 생성형 AI 플랫폼인 'Weavy'를 인수하여 'Figma Weave'를 새롭게 선보였으며, 이를 통해 캔버스 내에서 이미지, 비디오, 애니메이션, VFX 등 미디어 자산의 생성 및 전문적 편집이 가능해집니다. * **Figma Make**: 텍스트 프롬프트나 간단한 디자인 초안을 즉시 프로토타입이나 실제 앱 형태로 변환해 주는 기능을 지원합니다. * **영역별 특화 도구**: 개발 생산성을 높이는 'Dev Mode', 동적 웹사이트 제작을 돕는 'Figma Sites', 마케팅 에셋을 대량 생산하는 'Figma Buzz' 등 제품군을 확장했습니다. * **협업 도구 고도화**: 인터랙티브 프레젠테이션 툴인 'Figma Slides'와 고급 벡터 드로잉 도구인 'Figma Draw'를 통해 기획부터 실행까지의 워크플로우를 통합했습니다. 피그마는 이제 디자인 도구를 넘어 기획자, 디자이너, 개발자가 AI를 매개로 소통하는 통합 제품 개발 플랫폼으로 완전히 탈바꿈하고 있습니다. 기업들은 피그마의 새로운 AI 기능들을 활용해 아이디어를 실제 제품으로 구현하는 시간을 단축하고, 디자인 시스템의 일관성을 유지하면서도 창의적인 실험을 지속할 수 있는 환경을 구축할 것을 권장합니다.

디자인 맥락, 제품을 (새 탭에서 열림)

Figma가 Anthropic에서 공개한 오픈 표준인 MCP(Model Context Protocol)를 지원하는 서버를 출시하며, 디자인 데이터를 AI 워크플로우에 직접 통합할 수 있는 길을 열었습니다. 이제 개발자는 AI 어시스턴트에게 Figma 파일의 링크를 제공하는 것만으로 디자인의 구체적인 맥락을 파악하게 하거나, 이를 기반으로 코드를 생성하도록 요청할 수 있습니다. 결과적으로 디자인과 개발 사이의 간극을 줄이고, 디자인 시스템을 코드 구현 과정에서 실시간으로 참조할 수 있는 환경이 구축되었습니다. ### MCP(Model Context Protocol)를 통한 디자인 맥락의 통합 * MCP는 LLM(거대언어모델)이 로컬이나 원격의 데이터 소스 및 도구에 안전하고 쉽게 접근할 수 있도록 돕는 오픈 표준 프로토콜입니다. * Figma MCP 서버는 AI 에이전트(예: Claude Desktop)가 Figma의 API를 통해 디자인 레이어, 속성, 구성 요소 등에 직접 접근할 수 있는 통로 역할을 합니다. * 이를 통해 개발자는 수동으로 디자인 수치를 복사해서 붙여넣는 대신, AI가 직접 디자인의 '진실의 원천(Source of Truth)'을 읽고 이해하도록 설정할 수 있습니다. ### Figma MCP 서버의 주요 기능 및 데이터 처리 * **컴포넌트 및 레이어 탐색:** AI가 특정 Figma 파일 내의 노드 구조를 탐색하고, 각 레이어의 시각적 속성(색상, 타이포그래피, 간격 등)을 추출할 수 있습니다. * **디자인 속성 읽기:** 텍스트 내용, 사용된 스타일 이름, 라이브러리 컴포넌트 정보 등을 정밀하게 파악하여 코드 생성 시 정확도를 높입니다. * **보안 및 인증:** 사용자의 Figma 개인 액세스 토큰(Personal Access Token)을 기반으로 작동하며, 명시적으로 허용된 범위 내에서만 AI가 데이터에 접근하도록 제어합니다. ### 개발 워크플로우의 실질적인 변화 * **디자인-투-코드 가속화:** "이 버튼 컴포넌트의 CSS를 추출해줘" 또는 "이 레이아웃을 React 컴포넌트로 만들어줘"와 같은 명령을 내릴 때, AI가 실제 디자인 데이터를 바탕으로 정확한 코드를 작성합니다. * **디자인 시스템 준수:** AI가 Figma에 정의된 디자인 토큰과 시스템 컴포넌트를 직접 참조하므로, 개발자가 가이드라인을 이탈하는 실수를 방지할 수 있습니다. * **피드백 루프 단축:** 개발자는 별도의 툴 전환 없이 AI 채팅창 내에서 디자인 사양을 즉시 확인하고 구현 전략을 논의할 수 있어 협업 효율이 극대화됩니다. 이 기능을 활용하려면 Figma MCP 서버를 로컬 환경에 설치하고 Claude Desktop과 같은 MCP 호환 클라이언트에 연결해야 합니다. 디자인 데이터를 프롬프트의 강력한 컨텍스트로 활용하고자 하는 개발팀이라면, 이를 통해 수동 작업을 줄이고 코드의 일관성을 획기적으로 높일 수 있을 것입니다.

디자인 시스템과 AI: MCP 서버 (새 탭에서 열림)

피그마(Figma)는 Anthropic의 Model Context Protocol(MCP)을 기반으로 한 전용 서버를 출시하여, AI 모델이 디자인 데이터에 직접 접근하고 이를 개발 워크플로우에 통합할 수 있는 환경을 마련했습니다. 이 MCP 서버를 통해 Claude와 같은 AI 에이전트는 피그마 파일의 레이어 구조, 스타일, 컴포넌트 속성을 실시간으로 조회하고 분석할 수 있게 됩니다. 이는 디자인과 개발 사이의 정보 단절을 해소하고, AI가 디자인 맥락을 완벽히 이해한 상태에서 코드를 생성하거나 문서를 작성하도록 돕는 중요한 기술적 진보입니다. ### MCP 서버를 통한 디자인 데이터의 개방 * **오픈 프로토콜 활용:** Anthropic이 발표한 MCP(Model Context Protocol)를 채택하여, 서로 다른 AI 모델과 데이터 소스가 표준화된 방식으로 통신할 수 있는 가교를 마련했습니다. * **실시간 데이터 접근:** 개발자가 별도로 스크린샷을 찍거나 속성을 복사해서 전달할 필요 없이, AI가 직접 피그마 API를 통해 최신 디자인 명세(Spec)를 읽어옵니다. * **풍부한 컨텍스트 제공:** 레이어 이름, 색상 값(Hex), 간격(Padding/Margin), 텍스트 스타일 등 피그마 내부의 상세한 속성 데이터를 AI에게 노출하여 코드 생성의 정확도를 높입니다. ### 개발자 워크플로우의 혁신적 변화 * **컨텍스트 스위칭 감소:** 개발자가 피그마 탭과 코드 에디터를 번거롭게 오가는 대신, AI 채팅 인터페이스 내에서 디자인 관련 질문을 던지고 즉각적인 답변을 받을 수 있습니다. * **디자인-투-코드(Design-to-Code) 최적화:** AI가 디자인 파일의 구조를 정확히 파악하고 있으므로, 프로젝트의 컴포넌트 라이브러리에 맞춘 더욱 정교한 프런트엔드 코드를 생성할 수 있습니다. * **검수 및 피드백 자동화:** 특정 디자인 요소가 시스템 가이드라인을 준수하고 있는지 AI가 체크하거나, 변경된 사항을 요약하여 개발 문서에 반영하는 작업이 가능해집니다. ### 설치 및 활용 방안 * **즉시 실행 가능한 도구:** 피그마 MCP 서버는 오픈 소스로 제공되며, Claude Desktop 환경에서 간단한 설정만으로 즉시 연동하여 사용할 수 있습니다. * **보안 및 권한 관리:** 사용자의 Figma personal access token을 기반으로 작동하여, 권한이 있는 파일에 대해서만 AI가 데이터에 접근할 수 있도록 설계되었습니다. * **확장 가능성:** 향후 다양한 IDE 플러그인이나 커스텀 AI 도구와 결합하여, 기업별 사내 디자인 시스템에 최적화된 맞춤형 개발 환경을 구축하는 데 기여할 것으로 보입니다. 피그마 MCP 서버는 AI가 단순한 텍스트 생성기를 넘어 실제 디자인 자산과 상호작용하는 ‘지능형 협업자’로 진화했음을 보여줍니다. 디자인 시스템의 일관성을 유지하면서 개발 속도를 높이고 싶은 팀이라면, 이 서버를 Claude Desktop에 연동하여 AI가 디자인 가이드를 직접 읽고 코드를 작성하게 하는 워크플로우를 먼저 도입해 보길 권장합니다.

AI 시대를 위해 모든 엔지 (새 탭에서 열림)

Figma가 Anthropic의 오픈 표준인 Model Context Protocol(MCP)을 지원하는 서버를 공개하며, 디자인 데이터를 AI 워크플로우에 직접 통합할 수 있는 길을 열었습니다. 이제 개발자와 디자이너는 Claude와 같은 AI 모델이 Figma 파일의 레이어, 스타일, 컴포넌트 정보를 직접 읽고 분석하게 함으로써 디자인과 개발 사이의 간극을 획기적으로 줄일 수 있습니다. 이는 디자인 자산이 단순한 시각 자료를 넘어 AI 에이전트가 즉각적으로 활용할 수 있는 구조화된 지식 베이스로 진화했음을 의미합니다. ### 디자인과 AI를 잇는 MCP 서버의 도입 * **데이터 접근의 표준화:** MCP는 AI 모델이 외부 도구나 데이터셋에 안전하고 일관된 방식으로 접근할 수 있게 해주는 프로토콜로, Figma는 이를 통해 자사 API를 AI 친화적인 방식으로 노출합니다. * **맥락 기반 협업:** AI가 사용자의 Figma 파일 구조를 실시간으로 파악하므로, 사용자는 별도의 스크린샷이나 복잡한 설명 없이도 디자인 의도를 AI에게 전달할 수 있습니다. * **실시간 데이터 동기화:** 정적인 가이드라인 대신 Figma REST API를 통해 최신 디자인 상태를 반영한 데이터를 AI가 즉각적으로 참조합니다. ### Figma MCP 서버의 주요 기술적 기능 * **레이어 및 속성 탐색:** 특정 파일의 전체 레이어 트리 구조를 읽어오거나, 개별 레이어의 위치, 크기, 색상 등 세부 속성을 분석할 수 있습니다. * **에셋 추출 및 내보내기:** AI가 직접 디자인 내의 아이콘이나 이미지를 추출(Export)하여 개발 환경에 적합한 형태로 변환하도록 명령할 수 있습니다. * **디자인 시스템 조회:** 파일 내에 정의된 컴포넌트 라이브러리, 색상 팔레트, 타이포그래피 스타일 및 디자인 토큰(Variables) 정보를 상세히 조회합니다. * **검색 및 필터링:** 방대한 프로젝트 내에서 특정 이름을 가진 컴포넌트나 레이어를 빠르게 찾아내어 작업 효율을 높입니다. ### 실무 활용 시나리오 및 기대 효과 * **프런트엔드 코드 생성:** AI에게 Figma 파일 URL을 제공하면, 레이어 속성을 바탕으로 Tailwind CSS나 React 컴포넌트 코드를 훨씬 정교하게 작성할 수 있습니다. * **디자인 QA 자동화:** 개발된 결과물과 Figma 원본 디자인 사이의 간격, 폰트 크기, 색상 차이를 AI가 자동으로 비교하고 수정 권고안을 제시합니다. * **문서화 작업 효율화:** 디자인 시스템의 변경 사항을 추적하여 개발 문서나 릴리즈 노트를 자동으로 업데이트하는 워크플로우 구성이 가능합니다. * **접근성 검사:** AI가 디자인 데이터를 분석하여 텍스트 대비나 인터랙션 요소의 크기 등 웹 접근성 기준 준수 여부를 사전에 검토합니다. 현재 Figma MCP 서버는 오픈 소스로 제공되어 GitHub를 통해 누구나 설치하고 확장할 수 있습니다. Claude Desktop과 같은 MCP 호환 클라이언트를 사용하는 팀이라면, 이 서버를 연결하여 디자인 데이터를 코딩 및 기획 단계에서 강력한 컨텍스트로 활용해 보시길 추천합니다.

피그마, 브라질 포 (새 탭에서 열림)

피그마(Figma)가 디자인의 접근성을 높이고 글로벌 사용자 커뮤니티와의 접점을 확대하기 위해 브라질 포르투갈어 현지화 버전을 공식 출시했습니다. 이는 일본어, 스페인어, 한국어에 이은 네 번째 현지화 사례로, 단순히 언어 번역을 넘어 문화적으로 적응된 UI와 전담 지원 서비스를 포함하여 브라질 내 550만 개의 프로젝트 파일을 생성하는 거대 시장을 공략하려는 전략입니다. 이번 업데이트는 미국 외 지역 사용자 비중이 85%에 달하는 피그마의 글로벌 성장세를 반영하며, 올해 말 라틴아메리카 스페인어 버전 출시로 이어질 예정입니다. **브라질 시장 내 피그마의 영향력과 현지화 배경** * **폭발적인 사용량:** 브라질에서는 작년 한 해 동안 약 550만 개의 피그마 파일이 생성되었으며, 매일 평균 85,000개 이상의 파일이 수정될 만큼 활발한 커뮤니티를 보유하고 있습니다. * **주요 기업의 채택:** iFood, Nubank, Itaú Unibanco 등 브라질 주요 기업과 스타트업은 물론, 브라질 주식시장(Ibovespa) 상장 기업의 1/3 이상이 협업 도구로 피그마를 사용 중입니다. * **디자인 민주화:** 현지 팀들은 이번 포르투갈어 지원이 업무 중 발생하는 마찰을 줄이고, 디자이너뿐만 아니라 다양한 직군이 디자인 프로세스에 참여하는 데 크게 기여할 것으로 기대하고 있습니다. **글로벌 사용자 지표와 제품 확장의 방향성** * **글로벌 매출 및 사용자 비중:** 2024년 기준 피그마 매출의 50% 이상이 미국 외 지역에서 발생하고 있으며, 월간 활성 사용자(MAU)의 대다수가 글로벌 시장에 포진해 있습니다. * **역할의 다양화:** 전체 사용자의 약 2/3가 전통적인 디자이너 역할 이외의 직군이며, 특히 개발자 비중이 30%에 달해 개발 모드(Dev Mode)와 같은 기능의 중요성이 커지고 있습니다. * **통합 개발 워크플로우:** 아이디어 구상(FigJam)부터 디자인(Figma Design), 개발 전달(Dev Mode), 프레젠테이션(Figma Slides)까지 제품 개발의 전 과정을 아우르는 도구로 진화하고 있습니다. **Config 컨퍼런스에서 발표된 주요 기술 업데이트** * **Figma Make:** AI 프롬프트를 통해 작성된 설명이나 기존 디자인을 실제 작동하는 프로토타입이나 앱 코드로 변환해주는 도구입니다. * **Figma Sites:** 디자이너가 AI와 코드를 활용해 동적인 웹사이트를 직접 구축하고 게시할 수 있는 기능을 제공합니다. * **Figma Draw & Buzz:** 강화된 벡터 편집 도구인 'Draw'와 마케팅 자산을 대규모로 생성하면서도 브랜드 일관성을 유지해주는 AI 기반의 'Buzz'가 추가되었습니다. * **Grid 및 반응형 레이아웃:** 디자인에 맞춰 유연하게 반응하는 레이아웃을 생성하고, 개발 모드에서 즉시 사용할 수 있는 CSS 코드를 생성하여 협업 효율을 높였습니다. 피그마의 이번 현지화와 신기능 업데이트는 디자인 도구가 단순한 제작 툴을 넘어, 전 세계 다양한 직군이 언어와 기술적 장벽 없이 협업할 수 있는 통합 플랫폼으로 거듭나고 있음을 보여줍니다. 특히 브라질과 같은 신흥 시장에서의 적극적인 행보는 글로벌 디자인 표준으로서의 입지를 더욱 공고히 할 것으로 보입니다.

피그마, 한국 시장 (새 탭에서 열림)

피그마(Figma)가 한국 시장을 위한 제품 현지화 및 지원 서비스의 오픈 베타 출시를 발표했습니다. 이번 한국어 지원은 일본어와 스페인어에 이은 세 번째 현지화 사례로, 한국 사용자들에게 더욱 직관적인 디자인 환경을 제공하고 디자인의 접근성을 전 세계로 확장하려는 피그마의 비전을 담고 있습니다. 이를 통해 국내 디자이너뿐만 아니라 개발자와 기획자 등 다양한 직군 간의 협업 효율이 극대화될 것으로 기대됩니다. **한국 시장 맞춤형 현지화 및 지원 확대** * 제품 인터페이스 전반에 걸친 완전한 한국어 번역과 한국 문화에 적합하도록 조정된 사용자 경험(UI)을 제공합니다. * 한국어 사용자를 위한 전담 고객 지원 체계를 구축하여 서비스 이용 중 발생하는 문제에 신속하게 대응합니다. * 이번 한국어 버전은 4월 16일부터 순차적으로 공개되는 오픈 베타를 통해 직접 체험할 수 있습니다. **국내 주요 기업의 활용 사례와 성과** * 카카오뱅크, 우아한형제들, 당근, 강남언니 등 국내 유수의 IT 기업들이 이미 피그마를 통해 제품을 개발하고 있습니다. * 카카오뱅크는 피그마 도입 이후 직원들의 업무 생산성이 약 30% 향상되었으며, 한국어 지원을 통해 언어 장벽 없이 핵심 프로젝트에 집중할 수 있게 되었다고 밝혔습니다. * 우아한형제들 또한 한국어 작업 환경이 비디자이너들의 디자인 프로세스 참여를 유도하여 협업의 질을 높였다고 평가했습니다. **데이터로 증명된 한국 내 피그마 생태계** * 한국 코스피 200 기업 중 약 3분의 1이 피그마를 사용하고 있으며, 국내 사용자들의 활발한 커뮤니티인 'Friends of Figma(FoF) 서울' 지부 멤버는 1,000명을 넘어섰습니다. * 지난 한 해 동안 한국에서 생성된 피그마 파일은 400만 개 이상이며, 매일 평균 75,000개 이상의 파일이 수정되고 있습니다. * 피그마의 글로벌 매출 50%가 미국 외 시장에서 발생하고 월간 활성 사용자(MAU)의 85%가 해외 거주자인 만큼, 한국은 피그마의 글로벌 확장 전략에서 핵심적인 위치를 차지합니다. **전체 제품 개발 공정을 아우르는 도구로의 진화** * 피그마는 단순한 디자인 도구를 넘어 화이트보드 협업 도구인 '피그잼(FigJam)', 개발자와의 원활한 소통을 돕는 '데브 모드(Dev Mode)', 프레젠테이션 제작을 위한 '피그마 슬라이드(Figma Slides)' 등 제품 개발의 전 과정을 지원합니다. * 2024년에는 AI 기능을 도입하여 팀의 창의적인 아이디어를 실제 제품으로 구현하는 속도를 한층 더 높였습니다. * 특히 월간 활성 사용자의 약 30%가 개발자인 만큼, 이번 현지화는 디자인과 개발 사이의 언어적 간극을 메우는 중요한 계기가 될 것입니다. 이번 한국어 현지화는 단순한 언어 번역을 넘어 국내 기업들이 디자인 중심의 제품 개발 문화를 구축하는 데 강력한 촉매제가 될 것으로 보입니다. 특히 디자인 비전공자나 개발자와의 협업이 잦은 팀이라면, 이번 오픈 베타 기간을 활용해 한국어 환경에서의 워크플로우를 최적화하고 팀 내 협업 장벽을 낮추는 기회로 삼기를 권장합니다.

피그마, 스페인 시장 (새 탭에서 열림)

피그마(Figma)는 일본어에 이어 두 번째 현지화 언어로 스페인어를 채택하고, 제품 인터페이스부터 기술 지원까지 아우르는 본격적인 스페인 시장 공략에 나섰습니다. 이번 현지화는 단순한 번역을 넘어 스페인 기업과 제품 팀의 고유한 설계 및 개발 요구사항을 깊이 이해하고 대응하기 위한 전략적 결정입니다. 피그마는 이를 시작으로 올해 말까지 더 많은 언어로 현지화 서비스를 확대하여 전 세계 사용자의 접근성을 높일 계획입니다. **스페인 시장 내 영향력 및 커뮤니티 성장** * IBEX 35(스페인 주요 상장 주가지수) 기업의 절반 가까이가 이미 피그마를 도입했으며, Telefonica, Cabify, SEAT, Amadeus 등 주요 기업들이 이를 핵심 설계 인프라로 활용하고 있습니다. * 2024년 한 해 동안 스페인에서만 150만 개 이상의 피그마 파일이 생성되었으며, 매일 평균 3만 4천 개의 파일이 활발하게 수정되고 있습니다. * 바르셀로나의 'Friends of Figma(FoF)' 챕터는 2,000명 이상의 활동 멤버를 보유하며 피그마의 전 세계 커뮤니티 중 최대 규모로 성장하여 현지 사용자들의 높은 결집력을 보여줍니다. **글로벌 사용자 기반과 현지화 전략의 배경** * 피그마 월간 활성 사용자(MAU)의 85%가 미국 이외의 지역에 거주하며, 전체 매출의 약 50%가 해외 시장에서 발생하고 있어 글로벌 대응의 중요성이 커지고 있습니다. * 전체 사용자 중 개발자가 약 1/3을 차지하는 등 사용자 구성이 다양해짐에 따라, 언어 장벽을 제거하여 디자이너와 개발자 간의 협업 속도를 높이는 데 주력하고 있습니다. * 이번 현지화는 FigJam(화이트보드), Dev Mode(개발 모드), Figma Slides(프레젠테이션) 등 제품 포트폴리오 확장과 맞물려 제품 개발 전 과정을 지원하는 도구로서의 입지를 강화합니다. **출시 일정 및 향후 전망** * 스페인어 현지화 서비스는 3월 27일부터 단계적으로 배포를 시작하여 4월 17일까지 모든 사용자에게 완료될 예정입니다. * 피그마는 이번 스페인어 출시를 기점으로 올해 안에 다른 주요 언어들에 대한 현지화 작업을 순차적으로 진행할 계획입니다. * 오는 5월 샌프란시스코와 런던에서 개최되는 연례 컨퍼런스 'Config'를 통해 제품 개발 프로세스를 혁신할 새로운 AI 기능과 제품 업데이트를 공개할 예정입니다. 글로벌 협업 툴로서 피그마의 행보는 단순한 기능 업데이트를 넘어, 비영어권 사용자들의 접근성을 높여 전 세계적인 디자인 생태계를 통합하려는 의도로 풀이됩니다. 특히 개발자와 기획자 등 비디자이너 직군의 참여가 늘어나는 추세인 만큼, 한국어를 포함한 향후 추가 언어 지원 향방에도 주목할 필요가 있습니다.

개발자가 다시 크리에이 (새 탭에서 열림)

개발자가 디자인 프로세스에 능동적으로 참여하는 것은 단순한 협업을 넘어 제품의 완성도와 개발 효율성을 결정짓는 핵심 전략입니다. 디자인 초기 단계부터 개발자의 관점이 반영되면 기술적 제약을 미리 파악하고 불필요한 재작업을 방지하여 프로젝트의 전체적인 속도를 높일 수 있습니다. 궁극적으로 이러한 참여는 디자이너와 개발자 사이의 간극을 줄여 더 나은 사용자 경험과 견고한 제품 아키텍처 구축으로 이어집니다. **기술적 타당성 검토와 엣지 케이스 조기 발견** * 디자인 시안에서 간과하기 쉬운 로딩 상태, 에러 메시지, 데이터 부재(Empty state), 혹은 예상보다 긴 텍스트 입력 등 다양한 '엣지 케이스'를 개발자가 미리 정의할 수 있습니다. * 특정 인터랙션이나 복잡한 애니메이션이 런타임 성능에 미치는 영향을 사전에 평가하여, 실제 구현 단계에서의 병목 현상을 방지합니다. * 백엔드 API 구조와 프론트엔드 UI 사이의 데이터 정렬 상태를 미리 확인하여, 기술적으로 실현 불가능하거나 데이터 구조 변경이 필요한 디자인을 조기에 수정합니다. **핸드오프 병목 현상 제거와 생산성 향상** * 디자인이 완성된 후 일방적으로 전달받는 방식(Waterfall Handoff)에서 벗어나 제작 과정에 수시로 참여함으로써 소통 비용을 획기적으로 줄입니다. * Figma의 'Dev Mode'와 같은 도구를 적극 활용하여 디자인 의도를 코드로 정확하게 변환하고, 필요한 자산(Asset)과 속성값을 추출하는 과정을 자동화합니다. * 디자인 시스템의 컴포넌트 단위를 실제 개발 단계의 재사용 가능한 코드 컴포넌트와 일치시켜 일관성을 유지하고 중복 개발을 최소화합니다. **공통 언어 구축을 통한 협업 문화 개선** * 디자인 토큰(Color, Typography, Spacing 등)을 정의하는 과정에 참여하여 개발 환경과 디자인 환경이 동일한 명명 규칙을 공유하도록 만듭니다. * 디자이너에게 개발 제약 사항을 단순히 '안 된다'고 통보하는 것이 아니라, 기술적 대안을 제시함으로써 창의적인 문제 해결 과정을 함께 주도합니다. * 제품의 비즈니스 로직과 사용자 여정을 함께 고민하며 개발자가 단순한 구현자가 아닌 '제품 제작자'로서의 주체성을 가집니다. **실용적인 참여를 위한 추천** 개발자는 디자인 비평(Design Critique) 세션에 정기적으로 참여하여 기술적 관점의 피드백을 제공하는 것부터 시작해야 합니다. 또한, 디자인 시스템 구축 초기 단계에 개입하여 코드와의 동기화 방안을 논의하고, Figma와 같은 디자인 도구 내의 개발자용 기능을 숙달하여 디자인 의도를 코드로 해석하는 역량을 키우는 것이 중요합니다. 이러한 능동적인 태도는 팀 전체의 개발 속도를 높일 뿐만 아니라 최종 제품의 품질을 보장하는 가장 확실한 방법입니다.

피그마 2024 (새 탭에서 열림)

2024년 피그마(Figma)는 전 세계 커뮤니티의 피드백을 바탕으로 180회 이상의 업데이트를 진행하며 디자인 도구를 넘어 협업 플랫폼으로서의 완성도를 높였습니다. UI3로 불리는 대대적인 인터페이스 개편부터 AI를 활용한 워크플로우 효율화, 그리고 새로운 프레젠테이션 도구인 '피그마 슬라이즈(Figma Slides)' 도입까지, 사용자의 제작 과정을 더 빠르고 정교하게 만드는 데 집중했습니다. 결과적으로 피그마는 단순히 화면을 그리는 도구에서 아이디어 구상부터 개발 전달까지 전 과정을 아우르는 에코시스템으로 진화했습니다. **사용자 피드백으로 완성된 UI3와 인터페이스 혁신** * 2019년 이후 가장 큰 규모의 디자인 개편인 UI3를 출시했으며, 베타 기간 중 접수된 피드백을 반영해 플로팅 패널 대신 고정 및 크기 조절이 가능한 패널 시스템으로 최종 조정했습니다. * 디자인 캔버스의 공간 확보를 위해 레이어 패널을 숨길 수 있게 개선하고, 타이포그래피 및 아이콘 시스템을 현대적으로 일신했습니다. * 스포이드 도구를 개선하여 스타일과 변수(Variables)를 쉽게 재사용하고 여러 컬러 포맷을 탭으로 전환하며 빠르게 관리할 수 있도록 했습니다. **핵심 기능 고도화 및 성능 최적화** * **멀티 에디트(Multi-edit):** 여러 프레임에 걸친 디자인 요소를 한 번에 편집할 수 있는 기능을 도입하여 반복 작업 시간을 획기적으로 단축했습니다. * **고급 타이포그래피:** 텍스트 스타일 내에서 기울임꼴, 굵게, 밑줄 등을 개별적으로 재정의(Override)할 수 있으며, 단일 텍스트 노드 내에서 혼합 단락 간격을 설정할 수 있습니다. * **성능 향상:** 대규모 파일을 효율적으로 관리하기 위해 동적 페이지 로딩(Dynamic page loading)과 메모리 최적화 시스템을 도입했으며, 유럽 지역 로컬 파일 호스팅을 통해 인프라 안정성을 강화했습니다. * **오토 레이아웃 제안:** 복잡한 디자인을 반응형으로 더 쉽게 변환할 수 있도록 오토 레이아웃 추천 기능을 강화했습니다. **워크플로우의 마찰을 줄이는 AI 기능** * **비주얼 및 에셋 검색:** 이미지 업로드나 영역 선택을 통해 필요한 컴포넌트를 찾고, 이름이 일치하지 않아도 맥락에 맞는 에셋을 찾아주는 AI 검색 기능을 도입했습니다. * **콘텐츠 생성 및 편집:** 더미 데이터를 채워주는 텍스트 생성, 다국어 번역, 이미지 배경 제거 기능을 캔버스 내에서 즉시 실행할 수 있습니다. * **First Draft:** 기존의 'Make Designs'를 개선한 기능으로, 아이디어를 시각화하는 첫 단계에서 디자인 초안을 빠르게 생성하여 디자이너의 초기 탐색 과정을 돕습니다. * **레이어 정리:** AI가 레이어 이름을 자동으로 정리해주는 기능을 통해 파일 관리의 번거로움을 줄였습니다. **협업의 확장: 개발 생산성과 프레젠테이션** * **데브 모드(Dev Mode):** 코드 커넥트(Code Connect)를 통해 디자인 시스템의 컴포넌트를 실제 코드와 연결하여 개발자가 문맥 전환 없이 디자인을 구현할 수 있도록 지원합니다. * **피그마 슬라이즈(Figma Slides):** 디자인과 프레젠테이션의 경계를 허물어, 피그마의 정교한 디자인 툴을 그대로 활용하면서 고품질의 발표 자료를 제작하고 공유할 수 있게 했습니다. 실무 디자이너와 팀은 새롭게 도입된 AI 기반 검색과 레이어 정리 기능을 활용해 관리 리소스를 줄이고, 코드 커넥트를 도입해 개발자와의 협업 효율을 극대화하는 것을 권장합니다. 특히 UI3의 변경된 패널 시스템에 익숙해진다면 더 넓은 작업 영역에서 창의적인 업무에 몰입할 수 있을 것입니다.

개발자가 디자인에 적극적으로 참여 (새 탭에서 열림)

Figma의 Dev Mode는 단순한 디자인 뷰어 기능을 넘어 디자이너와 엔지니어 사이의 작업 흐름을 근본적으로 변화시켰습니다. 지난 1년 동안 이 기능을 도입한 결과, 코드와 디자인의 동기화를 강화하고 불필요한 커뮤니케이션 비용을 획기적으로 줄이는 데 성공했습니다. 이제 Figma는 단순한 디자인 전달 도구가 아니라, 엔지니어가 실제 개발 환경과 연동하여 활용할 수 있는 강력한 협업 플랫폼으로 진화했습니다. ### 코드 연결성 강화와 Code Connect * **Code Connect 활용**: Figma 컴포넌트와 실제 프로덕션 코드(React, SwiftUI 등)를 직접 연결하여, 엔지니어가 디자인을 클릭했을 때 디자인 속성 대신 실제 사용하는 코드 스니펫을 즉시 확인할 수 있습니다. * **일관성 유지**: 디자인 시스템의 라이브러리 코드를 직접 노출함으로써 엔지니어가 임의로 스타일을 구현하는 것을 방지하고, 코드베이스와 디자인 사이의 일관성을 높입니다. ### 명확한 워크플로우 상태 관리 * **개발 준비 완료(Ready for Dev) 표시**: 섹션별로 작업 상태를 지정할 수 있어, 엔지니어는 작업 중인 디자인과 구현을 시작해도 되는 디자인을 즉각적으로 구분할 수 있습니다. * **커뮤니케이션 효율화**: 디자인이 수정될 때마다 수동으로 알리는 대신, 상태 값을 통해 작업의 진척도를 공유함으로써 불필요한 회의와 확인 과정을 줄였습니다. ### 개발 리소스 및 컨텍스트 통합 * **Dev Resources 연결**: Jira 티켓, GitHub PR, Storybook 문서 등 해당 디자인과 관련된 외부 링크를 Figma 내부에 직접 첨부할 수 있습니다. * **정보 파편화 방지**: 엔지니어는 툴 사이를 이동할 필요 없이 Figma 한곳에서 프로젝트의 모든 맥락과 관련 문서를 파악할 수 있어 몰입도가 높아집니다. ### 정교한 속성 검사 및 변경 사항 추적 * **Annotation(주석) 기능**: 레드라인(수치 표기) 작업을 자동화하는 주석 기능을 통해 측정값이나 구체적인 속성 정보를 명확하게 전달하며, 이는 수동으로 수치를 기입하던 과거의 번거로움을 해결합니다. * **Compare Changes**: '변경 사항 비교' 기능을 통해 이전 버전과 현재 버전의 디자인 차이를 시각적으로 대조할 수 있어, 어떤 픽셀이 수정되었는지 추측할 필요가 없습니다. ### 디자인 토큰 및 변수(Variables) 활용 * **디자인 토큰 시각화**: 색상, 간격, 타이포그래피 등의 변수 값을 코드로 바로 확인할 수 있어 토큰 기반의 개발 환경 구축이 용이해집니다. * **다크 모드 및 모드 전환**: 하나의 디자인에서 변수를 통해 다크 모드나 모바일 뷰 등을 빠르게 전환하며 각 환경에 맞는 속성값을 신속하게 추출할 수 있습니다. --- Dev Mode의 성공적인 도입을 위해서는 기술적인 툴 사용법을 익히는 것만큼이나 **디자인 시스템과 실제 코드의 구조를 일치시키려는 팀 간의 협업 문화**가 중요합니다. 엔지니어링 매니저라면 단순히 엔지니어에게 Figma 계정을 부여하는 것에 그치지 말고, Code Connect를 통해 라이브러리를 동기화하고 개발 리소스를 문서화하는 프로세스를 정착시키는 것을 추천합니다.

개발 모드와 함께한 (새 탭에서 열림)

피그마는 'Dev Mode'를 정식 출시하며 베타 기간 수집된 피드백을 바탕으로 200개 이상의 기능 개선과 오류 수정을 단행했습니다. 이번 업데이트의 핵심은 디자인과 코드 사이의 물리적·심리적 간극을 좁혀 개발자가 디자인 의도를 더 정확하게 파악하고 구현할 수 있도록 환경을 고도화하는 데 있습니다. 이를 통해 협업의 마찰을 줄이고 제품 개발 주기를 획기적으로 단축하는 것을 최종 목표로 합니다. **변경 사항 추적과 워크플로우 가시성 확보** - 디자인 변경 이력을 시각적으로 비교할 수 있는 'Compare changes' 기능을 통해, 이전 버전과 현재 버전 사이에 어떤 요소가 수정되었는지 한눈에 파악할 수 있습니다. - 'Ready for dev' 상태 관리 기능을 강화하여 개발자가 어떤 화면이 구현 준비가 완료되었고, 어떤 부분이 수정 중인지 실시간으로 확인하며 작업 우선순위를 정할 수 있습니다. - 섹션 상태 알림 기능을 통해 특정 컴포넌트나 화면의 작업 완료 여부를 팀원들에게 즉각적으로 공유할 수 있는 체계를 마련했습니다. **Code Connect를 활용한 디자인-코드 동기화** - 'Code Connect' 기능을 도입하여 피그마 내 컴포넌트와 실제 프로덕션 코드(React, SwiftUI, Jetpack Compose 등)를 직접 연결할 수 있습니다. - 개발자는 디자인 가이드에서 단순히 속성값을 복사하는 것을 넘어, 실제 라이브러리에 정의된 코드 조각(Snippet)을 바로 확인하고 프로젝트에 적용할 수 있습니다. - 이를 통해 디자인 시스템의 일관성을 유지하고, 불필요한 커스텀 코드 작성을 방지하여 코드 품질을 상향 평준화합니다. **외부 도구 연동 및 플러그인 생태계 확장** - Jira, GitHub, Storybook 등 개발자가 주로 사용하는 외부 협업 도구와의 통합을 강화하여 피그마를 벗어나지 않고도 티켓 상태를 확인하거나 문서를 참조할 수 있습니다. - 개발자 중심의 플러그인을 통해 에셋 최적화, 코드 생성, 데이터 주입 등 반복적인 작업을 자동화할 수 있는 환경을 구축했습니다. - VS Code용 피그마 확장을 통해 편집기 내에서 디자인을 직접 검사하고 변경 사항을 즉시 반영하는 긴밀한 워크플로우를 제공합니다. **검사(Inspection) 성능 및 사용자 경험 개선** - 복잡한 레이아웃 구조에서도 속성값을 빠르고 정확하게 추출할 수 있도록 검사 도구의 성능과 UI를 대폭 개선했습니다. - 에셋 다운로드 시 파일 포맷 지정 및 해상도 설정을 더욱 세밀하게 조정할 수 있어 리소스 관리 효율이 높아졌습니다. - 박스 모델(Box model) 시각화 및 단위 변환 기능을 정교화하여 개발자가 디자인 의도에 맞는 CSS나 스타일 코드를 작성하기 용이해졌습니다. 단순히 디자인을 '보는' 도구에서 디자인을 '코드로 해석하는' 플랫폼으로 진화한 피그마의 Dev Mode를 적극 활용해 보세요. 특히 Code Connect를 도입하여 디자인 시스템과 실제 코드 저장소를 연결한다면, 디자인 전달 과정에서 발생하는 소통 비용을 획기적으로 줄일 수 있을 것입니다.

크런치롤이 개발자 (새 탭에서 열림)

글로벌 애니메이션 스트리밍 서비스인 크런치롤(Crunchyroll)은 15개의 플랫폼과 12개의 언어를 지원하는 복잡한 환경 속에서 디자인 일관성을 유지하기 위해 '유니버설 디자인 시스템(Universal Design System)'과 피그마의 '개발 모드(Dev Mode)'를 적극 도입했습니다. 과거 인수합병 과정에서 쌓인 파편화된 워크플로우와 기술 부채를 정리함으로써, 디자이너와 엔지니어 간의 협업 효율을 극대화하고 사용자에게 통일된 브랜드 경험을 제공하게 되었습니다. 이번 전환은 단순히 도구를 바꾼 것을 넘어, 복잡한 다중 플랫폼 환경에서 제품의 출시 속도와 품질을 동시에 잡는 전략적 선택이었습니다. **다중 플랫폼 환경에서의 복잡성과 레거시 문제** * 크런치롤은 웹, 모바일뿐만 아니라 게임 콘솔, 스마트 TV 등 9개의 거실용 기기를 포함해 총 15개의 플랫폼을 지원하며, 1,500만 명 이상의 글로벌 팬들에게 서비스를 제공합니다. * 과거에는 각 플랫폼별로 개별적인 디자인 시스템(iOS, Android, tvOS 등)을 운영했으며, 이는 협업 과정에서 심각한 불일치와 혼선을 초래했습니다. * 기존 워크플로우는 Jira 트리거와 Zeplin에 의존했으나, 아트보드 로딩에만 4~5분이 소요되거나 시차 문제로 인해 최신 디자인 사양을 실시간으로 공유하기 어려운 구조였습니다. **디자인 시스템을 통한 효율성 극대화: "식재료 준비(Meal Prepping)"** * 디자인 시스템을 '식재료 미리 준비하기'에 비유하여, 매번 새로운 기능을 만들 때마다 처음부터 설계하는 것이 아니라 준비된 컴포넌트를 재사용하여 리소스를 절약합니다. * 엔지니어링의 DRY(Don't Repeat Yourself) 원칙을 디자인에도 적용하여 중복 컴포넌트를 제거하고 일관된 타이포그래피, 그리드, 간격 시스템을 구축했습니다. * 이러한 표준화는 사용자의 인지 부하를 줄여 구독 전환율을 높이는 동시에, 제품 관리자가 아이디어를 빠르게 검증할 수 있는 속도 경쟁력을 제공합니다. **개발 모드(Dev Mode)를 활용한 협업 프로세스의 혁신** * 개발자가 피그마 링크를 통해 '개발 준비 완료(Ready for development)' 페이지에 접속하면, 수많은 아이데이션 과정은 생략하고 오직 구현에 필요한 최신 스펙과 코드 값만 바로 확인할 수 있습니다. * 기존에 5분씩 걸리던 데이터 파싱 속도가 획기적으로 개선되어, 엔지니어가 특정 결제 플로우나 컴포넌트의 상세 정보를 찾는 데 드는 시간을 대폭 단축했습니다. * 코드 커넥트(Code Connect) 베타 버전을 통합하여 디자인 시스템의 컴포넌트와 실제 코드를 더 밀접하게 연결함으로써 디자인과 코드 간의 괴리를 좁히고 있습니다. **디자인 시스템 운영의 철학과 변화 관리** * 디자인 시스템은 팀을 지원하기 위한 도구일 뿐, 프로세스의 포로가 되어서는 안 된다는 철학 아래 지속적인 교육과 온보딩 워크숍을 진행했습니다. * 과거의 복잡한 QA 단계나 불필요한 태그 시스템을 과감히 삭제하고, 개발자가 필요한 정보에 직접 접근할 수 있는 자율적인 환경을 조성했습니다. * 전문화된 디자인 원칙(계층 구조, 그리드 등)을 준수하는 '좋아 보이는 디자인'과 엣지 케이스까지 고려한 '잘 작동하는 디자인'을 디자인 성공의 핵심 지표로 삼고 있습니다. 디자인 시스템은 한 번 구축하고 끝나는 것이 아니라 팀의 성장에 맞춰 계속 진화해야 합니다. 크런치롤의 사례처럼 도구의 기능을 활용해 불필요한 단계를 제거하고, 개발자와 디자이너가 동일한 언어로 소통할 수 있는 환경을 만드는 것이 복잡한 글로벌 서비스를 운영하는 핵심 전략입니다.

Figma와 Jira로 디 (새 탭에서 열림)

피그마(Figma)는 디자인과 개발 사이의 간극을 좁히기 위해 도입된 Dev Mode의 정식 출시와 함께 생산성을 극대화할 수 있는 새로운 기능들을 대거 공개했습니다. 이번 업데이트는 개발자가 디자인 의도를 더 정확히 파악할 수 있도록 돕는 주석(Annotations) 기능, 변경 사항을 한눈에 파악하는 비교 도구, 그리고 개발 환경을 디자인 도구 안으로 가져오는 플러그인 생태계 확장에 초점을 맞추고 있습니다. 이를 통해 디자인에서 코드로의 전환 과정이 더욱 정교하고 효율적으로 개선되었습니다. ### 디자인 의도를 명확히 전달하는 주석(Annotations) - 디자이너가 개발자에게 필요한 측정값, 사양, 세부 지침을 디자인 요소 위에 직접 기록할 수 있는 기능을 제공합니다. - 기존 디자인 파일이 복잡해지는 문제를 해결하기 위해 개발자 모드에서만 활성화되는 오버레이 방식을 채택하여, 협업 시 불필요한 커뮤니케이션 비용을 줄여줍니다. - 개발자는 주석을 통해 폰트, 간격, 레이아웃에 대한 디자이너의 구체적인 의도를 즉각적으로 파악할 수 있습니다. ### 버전 관리 및 변경 사항 비교(Compare Changes) - 특정 프레임의 이전 버전과 현재 버전을 시각적으로 비교할 수 있는 기능을 도입하여 히스토리 추적을 용이하게 했습니다. - 사이드 바이 사이드(Side-by-side) 뷰를 통해 어떤 속성이나 레이어 구조가 변경되었는지 코드로 즉시 확인할 수 있어, 수정 사항을 놓칠 위험을 방지합니다. - 개발자는 마지막으로 확인한 시점 이후 무엇이 바뀌었는지 명확히 인지하고 구현에 반영할 수 있습니다. ### 작업 효율을 높이는 플러그인과 통합 환경 - Jira, Storybook, GitHub와 같은 외부 개발 도구를 Dev Mode 내에서 바로 사용할 수 있는 전용 플러그인을 지원합니다. - 개발자는 Figma를 벗어나지 않고도 티켓 상태를 확인하거나 기존 코드 컴포넌트와의 연결성을 검토할 수 있어 컨텍스트 스위칭(Context Switching) 비용을 최소화합니다. - 코드 스니펫(Code Snippet) 생성 기능이 강화되어 CSS, Tailwind, SwiftUI 등 다양한 프레임워크에 최적화된 코드를 제공합니다. ### 워크플로우 가시성 확보를 위한 상태 관리 - 'Ready for Dev' 상태 표시 기능을 통해 디자이너가 구현을 시작할 준비가 된 화면을 명확히 구분하여 전달할 수 있습니다. - 개발자는 수많은 페이지와 프레임 중에서 어떤 항목이 최종본인지 혼란을 겪지 않고 곧바로 작업에 착수할 수 있는 구조를 갖추게 되었습니다. Dev Mode는 단순한 뷰어 역할을 넘어 개발 프로세스의 핵심 허브로 진화하고 있습니다. 팀의 생산성을 높이기 위해서는 디자이너가 주석 기능을 적극 활용하여 소통 비용을 줄이고, 개발자는 조직의 기술 스택에 맞는 플러그인을 맞춤 설정하여 사용하는 것을 권장합니다. 특히 Dev Mode가 정식 서비스로 전환됨에 따라, 각 조직은 개발 효율성과 비용 사이의 균형을 고려하여 팀에 적합한 요금제와 시트(Seat) 구성을 검토할 필요가 있습니다.