Figma

슬롯(Slots)으로 (새 탭에서 열림)

Figma는 Schema 2025를 통해 디자인 시스템이 단순한 컴포넌트 라이브러리를 넘어, AI와 코드 연동을 통해 제품 개발 전체 프로세스를 가속화하는 핵심 인프라로 진화하고 있다고 강조합니다. 이제 디자인 시스템은 디자이너와 개발자 사이의 장벽을 허물고, 복잡한 다중 플랫폼 환경에서도 일관된 사용자 경험을 실시간으로 유지하는 방향으로 나아가고 있습니다. **AI를 통한 디자인 시스템의 지능화** * 단순 반복적인 컴포넌트 문서화나 속성 정의 작업을 AI가 보조하여 관리 비용을 획기적으로 줄이고 시스템 구축 속도를 높입니다. * 디자인 시스템 내의 방대한 가이드를 AI가 학습하여, 디자이너가 작업 중에 필요한 규칙을 즉각적으로 제안받거나 오류를 자동으로 수정하는 '디자인 린팅' 기능이 강화됩니다. **코드 중심의 협업 체계: Code Connect** * Figma 디자인과 실제 프로덕션 코드를 직접 연결하는 'Code Connect'를 통해 디자인 시스템의 '단일 진실 공급원(Single Source of Truth)'을 실현합니다. * 개발자는 Dev Mode에서 디자이너가 의도한 정확한 코드 스니펫을 확인하고 사용할 수 있어, 구현 과정에서의 커뮤니케이션 오류를 최소화합니다. **Variables를 활용한 다중 플랫폼 대응 및 확장성** * 색상, 간격, 타이포그래피 등의 스타일을 Variables(변수)로 체계화하여 다크 모드나 다양한 테마 전환을 코드와 동기화된 방식으로 처리합니다. * 플랫폼별로 상이한 토큰 값을 하나의 시스템 내에서 유연하게 관리함으로써, 모바일과 웹 등 다양한 환경에 대응하는 디자인 시스템의 운영 효율성을 극대화합니다. **실천적 제언** 향후 디자인 시스템은 '만드는 것'보다 '어떻게 연결하고 유지할 것인가'에 초점이 맞춰질 것입니다. 조직은 단순히 컴포넌트의 개수를 늘리는 데 집중하기보다, AI와 코드 연동 도구를 적극적으로 도입하여 디자인과 개발의 워크플로우를 하나로 통합하는 시스템 고도화 전략을 수립해야 합니다.

Figma Make로 팀이 (새 탭에서 열림)

Prototypes are the new PRDs Working Well Product management AI Figma Make

Config 2026 연사 (새 탭에서 열림)

Figma의 Config 2025는 인공지능(AI)과 고도화된 프로토타이핑 기술을 통해 디자인의 경계를 확장하는 데 집중합니다. 디자인 도구가 단순한 제작 도구를 넘어 창의적인 파트너로서 작동하며, 디자이너가 반복적인 작업에서 벗어나 더 전략적인 문제 해결에 몰입할 수 있는 환경을 구축하는 것을 목표로 합니다. 이를 통해 제품 기획부터 구현까지의 프로세스를 하나로 통합하고, 브랜드 가치를 더 일관되게 전달할 수 있는 새로운 워크플로우를 제시합니다. ### AI 기반의 디자인 생산성 혁신 * 생성형 AI를 활용하여 초기 아이디어를 빠르게 시각화하고, 복잡한 레이아웃을 자동으로 구성하는 기능을 통해 작업 속도를 획기적으로 높였습니다. * 디자인 컨텍스트를 이해하는 AI가 적절한 컴포넌트를 추천하거나, 실제와 유사한 더미 데이터를 디자인에 즉시 반영하여 테스트 환경을 최적화합니다. * 디자이너의 수동 작업을 자동화함으로써 단순 제작보다는 제품의 논리와 사용자 경험의 본질에 더 집중할 수 있는 '지능형 캔버스'를 지향합니다. ### 고도화된 프로토타이핑과 인터랙션 * 정적인 화면의 연결을 넘어 실제 제품과 유사한 로직과 변수(Variables)를 활용한 동적 프로토타이핑 기능을 강화했습니다. * 디자인과 개발 사이의 간극을 줄이기 위해 실제 코드 수준의 인터랙션을 시각적인 방식으로 구현할 수 있는 환경을 제공합니다. * 복잡한 사용자 흐름을 실제 구동 환경과 유사하게 시뮬레이션함으로써, 개발 단계 이전에 제품의 사용성을 완벽하게 검증할 수 있도록 돕습니다. ### 브랜드 아이덴티티와 시스템의 확장 * 다양한 채널과 플랫폼에서 일관된 브랜드 경험을 유지할 수 있도록 디자인 토큰(Design Tokens)과 시스템 관리 기능을 심화했습니다. * 브랜드 가이드라인이 디자인 자산과 긴밀하게 동기화되어, 브랜드의 변경 사항이 대규모 프로젝트 전체에 즉각적이고 정확하게 반영되는 구조를 갖추었습니다. * 대규모 조직 내에서 협업 효율을 높이기 위해 자산 관리 및 거버넌스 도구를 강화하여 브랜드의 일관성을 시스템적으로 보호합니다. 디자이너는 이제 AI를 단순한 보조 도구가 아닌 협업 파트너로 받아들이고, 이를 활용해 생산성을 극대화하는 워크플로우를 구축해야 합니다. 특히 고도화된 프로토타이핑 기능을 통해 디자인 단계에서 제품의 기술적 타당성을 검토하고, 디자인 시스템을 통해 브랜드 가치를 자동화된 방식으로 관리하는 역량을 갖추는 것이 중요합니다.

워크플로우 랩: Figma의 (새 탭에서 열림)

Figma는 디자인 작업 중 발생하는 반복적이고 소모적인 과정을 줄이기 위해 AI 기반의 'Vectorize' 기능을 도입했습니다. 이 기능은 비트맵 이미지를 클릭 한 번으로 정교한 벡터 레이어로 변환하여, 디자이너가 수작업으로 패스를 따는 '트레이싱' 작업에서 벗어나게 해줍니다. 이를 통해 아이디어 스케치나 저해상도 에셋을 즉시 편집 가능한 고품질 디자인 요소로 전환할 수 있습니다. **이미지-투-벡터(Image-to-Vector) 변환의 자동화** * PNG, JPEG와 같은 픽셀 기반의 정적 이미지를 분석하여 수학적 경로로 이루어진 SVG 형태의 벡터 그래픽으로 변환합니다. * 과거에는 펜 도구를 사용해 수작업으로 외곽선을 그려야 했던 로고, 아이콘, 일러스트레이션 작업을 자동화하여 작업 시간을 획기적으로 단축합니다. * 저해상도 이미지를 고해상도 프로젝트에 사용할 때 발생하는 깨짐 현상(Pixelation)을 방지하고, 무한히 확장 가능한 에셋으로 재탄생시킵니다. **디자인 맥락을 이해하는 AI 모델링** * 단순한 색상 경계 추출을 넘어, AI가 이미지의 구조적 형태를 파악하여 최적화된 노드(Point)를 배치합니다. * 변환된 벡터 데이터는 불필요한 점들이 찍히는 현상을 최소화하여, 변환 후에도 디자이너가 직접 경로를 수정하거나 형태를 다듬기 용이한 '깨끗한' 패스를 제공합니다. * 이미지 내의 복잡한 레이어나 겹쳐진 형태를 구분하여 최대한 논리적인 벡터 그룹으로 나누어 생성합니다. **편집 가능성 및 디자인 시스템과의 통합** * 변환된 결과물은 Figma의 표준 벡터 객체와 완전히 호환되므로 채우기(Fill), 선(Stroke), 효과 등을 자유롭게 변경할 수 있습니다. * 스캔한 손그림이나 화이트보드 스케치를 디자인 캔버스로 가져와 즉시 컴포넌트화하거나 스타일을 적용하는 등 초기 아이디어를 실제 프로토타입으로 연결하는 가교 역할을 합니다. * 외부 변환 도구를 사용할 필요 없이 Figma 환경 내에서 모든 과정이 이루어지므로 디자인 워크플로우의 연속성이 유지됩니다. 이 기능은 단순한 편의 기능을 넘어, 아날로그적인 영감을 디지털 디자인 시스템으로 빠르게 편입시키는 강력한 도구입니다. 손으로 그린 거친 스케치나 오래된 로고 파일 등을 다룰 때 특히 유용하며, 디자이너는 단순 반복 작업인 트레이싱 대신 창의적인 레이아웃과 시스템 설계에 더 많은 시간을 할애할 수 있게 되었습니다.

Codex와 Figma로 프론트 (새 탭에서 열림)

피그마는 디자인과 개발의 경계를 허물고, 캔버스와 코드가 하나로 통합되는 디자인의 미래를 제시합니다. 단순한 시각적 도구를 넘어 실제 프로덕션 코드와 긴밀하게 연결된 시스템을 통해 협업의 마찰을 줄이고 구현의 정확도를 높이는 것이 핵심입니다. 이를 위해 AI 기술을 워크플로우 전반에 도입하고 개발자 모드(Dev Mode)를 대폭 강화하여 디자인의 의도가 코드까지 매끄럽게 이어지는 생태계를 구축하고자 합니다. ### AI를 통한 디자인 워크플로우의 자동화와 확장 * **AI 기반 디자인 생성(Make Design):** 텍스트 프롬프트를 통해 모바일 및 웹 인터페이스의 초안을 빠르게 생성함으로써 디자이너가 빈 화면에서 시작하는 부담을 줄여줍니다. * **지능적인 에셋 관리:** AI가 레이어의 이름을 자동으로 지정하고 적절한 텍스트 콘텐츠를 채워넣으며, 이미지 배경 제거와 같은 반복적인 편집 작업을 자동화합니다. * **시각적 검색 및 탐색:** 팀 내 방대한 디자인 라이브러리에서 특정 컴포넌트나 화면을 시각적 유사성을 기반으로 빠르게 찾아내어 재사용성을 극대화합니다. ### 디자인과 코드의 실시간 동기화, Code Connect * **실제 코드 조각 연결:** 'Code Connect' 기능을 통해 디자인 시스템의 컴포넌트와 실제 개발에 사용되는 코드 라이브러리를 직접 연결하여, 개발자가 디자인 환경 내에서 즉시 구현 코드를 확인할 수 있습니다. * **개발자 모드(Dev Mode) 고도화:** 디자인 변경 사항을 더 명확하게 추적하고, 현재 작업 상태(In Progress, Done 등)를 공유하여 디자이너와 개발자 간의 소통 오류를 최소화합니다. * **컴포넌트 문서화 자동화:** 디자인 속성과 코드의 속성을 일치시켜 수동으로 가이드를 작성할 필요 없이 항상 최신 상태의 문서를 유지합니다. ### 정교한 프로토타이핑과 협업 환경 개선 * **강화된 프로토타이핑 기능:** 복잡한 변수(Variables)와 조건부 로직을 더 직관적으로 설정하여, 실제 제품과 거의 동일하게 작동하는 고충실도(High-fidelity) 프로토타입을 제작할 수 있습니다. * **UI 재설계 및 사용성 향상:** 피그마 인터페이스 자체를 더욱 간결하게 재구성하여 디자인 작업 공간을 넓히고, 도구 접근성을 높여 창의적인 작업에 집중할 수 있는 환경을 제공합니다. * **슬라이드 기능 도입:** 디자인 결과물을 별도의 도구 없이 피그마 내에서 바로 프리젠테이션으로 전환하여 이해관계자와의 공유 및 피드백 과정을 효율화합니다. 디자이너는 이제 개별 화면을 그리는 것을 넘어 디자인 시스템이 코드와 어떻게 상호작용하는지 이해해야 합니다. Figma가 제공하는 AI 도구를 워크플로우에 적극적으로 통합하여 단순 반복 작업 시간을 줄이고, Code Connect를 통해 개발 팀과 단일화된 진실 공급원(Single Source of Truth)을 구축함으로써 제품의 완성도를 높이는 전략이 필요합니다.

데이터 사이언티스트로서 영향력을 (새 탭에서 열림)

피그마(Figma)는 데이터 규모가 급격히 팽창함에 따라 기존 배치 기반 파이프라인의 한계를 극복하기 위해 CDC(Change Data Capture) 및 스트리밍 아키텍처로의 대대적인 전환을 단행했습니다. Apache Iceberg와 Kafka, Debezium을 결합한 새로운 파이프라인을 통해 데이터 지연 시간을 수일에서 수분 단위로 단축했으며, 수백 개의 데이터베이스 샤드로부터 발생하는 대규모 데이터를 안정적으로 처리할 수 있는 기반을 마련했습니다. 이 글은 급성장하는 서비스에서 데이터 일관성과 실시간성을 동시에 확보하기 위한 피그마 엔지니어링 팀의 여정과 기술적 결정을 다룹니다. ### 기존 배치 파이프라인의 한계와 병목 현상 * 초기 피그마는 Embulk를 이용해 수백 개의 RDS 샤드에서 데이터를 추출하여 S3에 저장하고 이를 Snowflake로 로드하는 배치 방식을 사용했으나, 데이터 양이 늘어남에 따라 지연 시간이 며칠씩 발생했습니다. * 소스 데이터베이스에 직접 쿼리를 날려 데이터를 추출하는 방식은 운영 중인 DB에 과도한 부하를 주었으며, 이를 피하기 위해 읽기 전용 복제본(Read Replica)을 사용함에도 불구하고 스케일 아웃의 한계에 직면했습니다. * 스키마 변경이 발생할 때마다 파이프라인이 수동 개입 없이는 중단되거나 데이터 정합성이 깨지는 등 운영상의 복잡도가 임계치를 넘어서는 문제가 있었습니다. ### CDC 및 Kafka 기반의 실시간 스트리밍 도입 * 데이터베이스의 바이너리 로그(Binlog)를 읽어 변경 사항을 즉시 캡처하는 CDC 방식을 도입하여 원본 DB에 가하는 부하를 최소화했습니다. * Debezium 커넥터를 AWS MSK(Managed Streaming for Kafka)와 연결해 수백 개의 샤드에서 발생하는 변경 이벤트를 중앙 Kafka 클러스터로 실시간 수집하는 구조를 설계했습니다. * Confluent Schema Registry를 활용해 Avro 포맷으로 데이터를 직렬화함으로써, 업스트림의 스키마 변경이 다운스트림 파이프라인에 안전하고 자동화된 방식으로 전파되도록 구현했습니다. ### Apache Iceberg를 활용한 데이터 레이크 현대화 * S3에 저장되는 데이터를 관리하기 위해 오픈 소스 테이블 포맷인 Apache Iceberg를 도입하여 대규모 데이터셋에 대한 ACID 트랜잭션과 시간 여행(Time Travel) 기능을 확보했습니다. * 기존의 단순 파일 저장 방식과 달리 Iceberg는 메타데이터를 효율적으로 관리하므로, Snowflake와 같은 데이터 웨어하우스에서 쿼리 시 불필요한 파일을 스캔하지 않아도 되어 성능과 비용을 최적화했습니다. * Kafka Connect의 Iceberg 싱크를 사용하여 스트리밍 데이터를 즉시 Iceberg 테이블로 기록함으로써 데이터 신선도를 극대화했습니다. ### 시스템 전환의 성과와 운영 효율화 * 새로운 아키텍처 도입 후 데이터 가용 지연 시간이 수일에서 5분 이내로 줄어들었으며, 분석가와 엔지니어들이 거의 실시간에 가까운 인사이트를 얻을 수 있게 되었습니다. * 데이터 파이프라인의 가시성을 높이기 위해 사용자 정의 모니터링 대시보드와 알림 시스템을 구축하여, 특정 샤드나 커넥터에서 발생하는 문제를 즉각적으로 파악하고 대응할 수 있는 환경을 만들었습니다. * 인프라의 확장성이 크게 개선되어 향후 데이터베이스 샤드가 추가되거나 트래픽이 급증하더라도 파이프라인의 구조적 변경 없이 유연하게 대응할 수 있는 능력을 갖추게 되었습니다. 서비스 규모가 커짐에 따라 전통적인 배치 방식은 성능과 운영 면에서 한계에 부딪힐 수밖에 없습니다. 피그마의 사례처럼 CDC와 Kafka, 그리고 Iceberg와 같은 현대적인 데이터 스택을 조합하면 데이터 신선도를 획기적으로 높이면서도 시스템의 안정성을 동시에 확보할 수 있습니다. 대규모 샤딩 환경에서 데이터 파이프라인을 고민하는 팀이라면 이벤트 중심의 아키텍처와 스키마 레지스트리를 통한 자동화에 집중할 것을 권장합니다.

디자인의 미래는 코드와 (새 탭에서 열림)

피그마는 기존의 '디자인에서 코드'로 이어지는 단방향 흐름을 넘어, 실제 프로덕션 코드를 다시 편집 가능한 피그마 디자인으로 변환하는 혁신적인 접근 방식을 제안합니다. 앤스로픽(Anthropic)의 Claude Code를 활용해 코드베이스의 시각적 요소를 분석하고 이를 피그마의 레이어와 컴포넌트 구조로 재구성함으로써, 디자인과 개발 사이의 동기화 문제를 해결하고자 합니다. 이를 통해 팀은 실제 구현된 최신 코드를 바탕으로 디자인 자산을 실시간으로 업데이트하고 관리할 수 있습니다. **코드 기반의 디자인 복원 메커니즘** * React, Tailwind CSS 등 실제 프론트엔드 코드에 정의된 스타일 속성과 UI 구조 정보를 정밀하게 추출합니다. * 단순한 시각적 복제를 넘어, 추출된 데이터를 피그마의 오토 레이아웃(Auto Layout), 변수(Variables), 컴포넌트 등 편집 가능한 고유 객체로 변환합니다. * 텍스트 스타일, 색상 값, 간격 등 코드에 명시된 속성이 피그마의 속성 시스템과 일대일로 매핑되어 디자이너가 즉시 수정할 수 있는 상태로 생성됩니다. **Claude Code와의 통합 및 지능형 자동화** * 앤스로픽의 AI 에이전트인 Claude Code를 CLI 환경에서 실행하여 코드베이스 내의 시각적 논리를 추론하고 피그마 플러그인 API와 상호작용합니다. * AI가 복잡한 CSS 계층 구조나 컴포넌트 의존성을 분석하여 피그마 파일 내에서 가장 효율적인 레이어 구조로 재구성하도록 돕습니다. * 개발자가 코드 변경 후 특정 명령어를 실행하는 것만으로 디자인 파일에 해당 변경 사항을 자동으로 반영하는 워크플로우를 실험합니다. **디자인 시스템의 무결성 유지 및 협업 효율화** * 디자인 파일이 실제 프로덕션 코드보다 뒤처지는 '디자인 부채(Design Debt)' 현상을 근본적으로 방지합니다. * 디자이너는 실제 코드에 구현된 제약 사항과 로직이 반영된 캔버스 위에서 작업하므로, 구현 불가능한 디자인을 설계할 위험이 줄어듭니다. * 코드를 디자인의 '단일 진실 공급원(Single Source of Truth)'으로 삼아, 별도의 수동 작업 없이 대규모 디자인 시스템의 일관성을 유지할 수 있습니다. 이 기술적 시도는 디자인과 개발의 경계를 허물고, 실제 제품의 결과물이 다시 디자인 프로세스의 시작점이 되는 선순환 구조를 시사합니다. 개발 중심의 워크플로우를 가진 팀이라면 Claude Code와 피그마 API를 결합하여 디자인 자산의 관리 비용을 획기적으로 낮추는 방향을 고려해 볼 수 있습니다.

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 서버는 매우 유용한 도구가 될 것입니다.

State of the Designer 2026: Designers Are Leaning Into the Messy Middle | Figma Blog (새 탭에서 열림)

Why demand for designers is on the rise Insights Hiring Report Research

디자이너 수요가 증가하는 이유 | Figma 블로그 (새 탭에서 열림)

2026년의 디자이너는 단순히 시각적인 화면을 만드는 역할을 넘어, 기획과 코드 사이의 복잡한 영역인 '지저분한 중간 단계(messy middle)'에 더 깊이 관여하게 될 것입니다. AI가 반복적인 디자인 작업을 자동화함에 따라 디자이너의 핵심 역량은 픽셀을 옮기는 것에서 제품의 로직과 시스템을 설계하는 방향으로 이동하고 있습니다. 결론적으로 미래의 디자이너는 기술적 장벽을 허물고 개발 및 비즈니스 프로세스에 직접 개입하여 제품의 최종 품질을 결정짓는 '시스템 설계자'로서의 면모를 갖춰야 합니다. ### AI가 재정의하는 디자인 프로세스 * AI 기술의 발전으로 반복적인 레이아웃 생성, 에셋 가공, 기본적인 가이드라인 준수와 같은 단순 작업은 자동화됩니다. * 디자이너는 직접 처음부터 모든 것을 그리는 '창작자'에서, AI가 제안한 결과물 중 최적의 안을 선택하고 세밀하게 조정하는 '큐레이터'이자 '편집자'의 역할을 수행하게 됩니다. * 이러한 변화는 디자이너가 물리적인 작업 시간보다 제품의 근본적인 가치와 사용자 경험의 흐름을 고민하는 데 더 많은 시간을 할애할 수 있게 만듭니다. ### Messy Middle: 설계와 구현의 통합 * '지저분한 중간 단계(Messy Middle)'는 디자인 시안이 실제 제품(코드)으로 변환되는 과정에서의 불확실성과 복잡성을 의미합니다. * 미래의 디자이너는 단순히 정적인 화면을 전달하는 데 그치지 않고, 상태 관리(State management), 데이터 흐름, 엣지 케이스 처리 등 개발적 맥락을 디자인 시스템 내에 직접 구축해야 합니다. * 디자인 도구와 코드 간의 간극이 줄어들면서, 디자이너가 디자인 환경 내에서 실제 로직을 정의하고 이를 개발 환경에 직접 반영하는 워크플로우가 보편화될 것입니다. ### 확장된 역할과 다학제적 역량 * 디자이너의 업무 영역이 비즈니스 전략과 기술 구현의 경계선으로 확장됩니다. 이는 디자인이 비즈니스 목표를 달성하기 위한 구체적인 수단으로 더욱 강력하게 작동함을 의미합니다. * 디자인 시스템은 단순한 컴포넌트 라이브러리를 넘어, 엔지니어링과 디자인이 실시간으로 동기화되는 '단일 진실 공급원(Single Source of Truth)'으로 진화합니다. * 사용자 데이터에 기반한 실시간 가설 검증과 빠른 반복 수행(Iteration) 능력이 디자이너의 가장 중요한 성과 지표가 됩니다. 이제 디자이너는 "어떻게 보이는가"보다 "어떻게 작동하는가"에 집중해야 합니다. 툴의 숙련도에 의존하기보다는 제품의 복잡한 논리 구조를 이해하고, AI를 비서 삼아 더 고도화된 문제 해결에 집중하는 능력을 길러야 합니다. 코드와 데이터에 대한 리터러시를 높여 개발 및 비즈니스 직군과 원활하게 소통할 수 있는 '하이브리드 전문가'가 되는 것이 미래 디자인 시장의 핵심 경쟁력이 될 것입니다.

장인 정신을 담아: Figma (새 탭에서 열림)

피그마는 디자이너가 외부 편집 도구 없이도 캔버스 안에서 고해상도 이미지 작업을 완결할 수 있도록 세 가지 새로운 AI 기반 이미지 편집 도구를 도입했습니다. 이번 업데이트의 핵심은 디자인 흐름을 끊지 않으면서도 정교한 편집 기능을 제공하여 생산성을 극대화하는 데 있습니다. 이를 통해 디자이너는 복잡한 마스킹이나 배경 제거 작업을 클릭 몇 번만으로 해결하며 창의적인 작업에 더 집중할 수 있게 되었습니다. ### 배경 제거 (Remove Background) - 기존의 서드파티 플러그인 의존도를 낮추고 피그마 내부에서 네이티브하게 배경을 제거할 수 있는 기능을 제공합니다. - AI가 피사체와 배경을 정교하게 구분하여 머리카락이나 미세한 경계면까지 깔끔하게 처리합니다. - 원본 데이터를 손상시키지 않는 비파괴 편집 방식을 지원하여, 편집 후에도 언제든 원본으로 복구하거나 마스크 영역을 수정할 수 있습니다. ### 객체 선택 및 마스킹 (Object Selection) - 이미지 내의 특정 사물이나 인물을 자동으로 인식하여 클릭 한 번으로 개별 선택할 수 있는 지능형 선택 도구입니다. - 선택된 객체는 즉시 별도의 레이어로 분리하거나 정교한 마스크를 씌우는 등 독립적인 요소로 제어할 수 있습니다. - 이미지 전체를 다시 편집할 필요 없이 특정 부분만 수정하거나 레이어 순서를 조정하는 등의 세밀한 디자인 워크플로우를 지원합니다. ### 이미지 생성 및 교체 (Generative Replace & Expand) - 생성형 AI를 활용하여 이미지의 부족한 여백을 자연스럽게 채워주는 이미지 확장 기능을 지원합니다. - 특정 영역을 선택하고 프롬프트를 입력하여 새로운 개체를 추가하거나, 기존 요소를 디자인 맥락에 맞는 다른 이미지로 교체할 수 있습니다. - 스톡 이미지의 구도나 구성 요소가 디자인 의도와 맞지 않을 때, 외부 툴로 이동하지 않고 피그마 안에서 즉시 에셋을 맞춤형으로 변형할 수 있습니다. 이 새로운 도구들은 피그마가 단순한 벡터 도구를 넘어 통합 디자인 플랫폼으로 진화하고 있음을 보여줍니다. 포토샵 등 외부 툴과의 맥락 전환(Context Switching)을 최소화하고 싶다면, 이번 AI 편집 기능을 적극적으로 워크플로우에 통합하여 작업 속도를 높여보시길 권장합니다.

피그마, C (새 탭에서 열림)

피그마(Figma)는 독일 연방정보보안청(BSI)이 제정한 클라우드 컴퓨팅 준수 기준인 C5 인증을 획득하며 DACH 지역(독일, 오스트리아, 스위스)의 보안 및 규정 준수 역량을 강화했습니다. 이번 인증은 피그마의 정보 보안, 리스크 관리, 운영 투명성이 엄격한 요구 사항을 충족함을 독립적으로 입증한 결과입니다. 이를 통해 규제가 까다로운 공공 및 금융 부문 기업들이 피그마의 클라우드 서비스를 더욱 신뢰하고 협업 도구로 채택할 수 있는 토대를 마련했습니다. ### C5 인증의 의미와 보안 표준 * C5(Cloud Computing Compliance Criteria Catalogue)는 클라우드 서비스의 보안성, 가용성, 기밀성을 평가하기 위해 BSI가 개발한 공신력 있는 표준입니다. * 피그마는 이제 BSI C5 레지스트리에 등재되어, 고객이 피그마의 보안 제어 및 운영 관행을 직접 확인하고 가시성을 확보할 수 있게 되었습니다. * 이번 인증 획득은 피그마가 단순한 디자인 도구를 넘어 정보 보안과 리스크 관리에 있어 글로벌 수준의 엄격한 기준을 준수하고 있음을 의미합니다. ### DACH 지역 및 규제 산업으로의 확장 * 현재 독일 DAX 40 기업의 약 90%가 피그마를 사용 중이며, 이번 인증을 통해 이들 기업과의 파트너십이 더욱 공고해질 것으로 기대됩니다. * 특히 엄격한 규제가 적용되는 정부 기관, 공공 부문, 금융 산업의 조직들이 내부 보안성 검토 및 승인 절차를 이전보다 훨씬 수월하게 진행할 수 있게 되었습니다. * 피그마는 이를 위해 독일어 현지화 서비스를 완비했으며, 엔터프라이즈 고객이 데이터를 유럽 연합(EU) 내에 로컬로 저장할 수 있는 옵션을 제공하는 등 지역 특화 투자를 지속하고 있습니다. 보안 요구 사항이 높은 유럽 시장이나 이와 유사한 글로벌 보안 표준을 준수해야 하는 기업은 피그마의 C5 인증을 보안 검토의 핵심 지표로 활용할 수 있습니다. 데이터 주권과 운영 투명성을 중시하는 엔터프라이즈 환경에서 피그마는 더욱 안전하고 신뢰할 수 있는 클라우드 협업 선택지가 될 것입니다.

고정관념에서 벗어나 생각 (새 탭에서 열림)

ChatGPT를 통해 생성한 브레인스토밍 결과물을 FigJam의 시각적 다이어그램으로 손쉽게 변환할 수 있는 새로운 워크플로우가 도입되었습니다. 이 기능은 텍스트 중심의 AI 아이디어를 실행 가능한 시각적 자산으로 빠르게 전환하여 기획 프로세스의 병목 현상을 해결합니다. 사용자는 이제 단순한 복사 및 붙여넣기만으로 복잡한 논리 구조를 직관적인 협업 보드로 구성할 수 있습니다. **ChatGPT 데이터의 시각화 메커니즘** - ChatGPT에서 생성된 구조화된 텍스트(예: 단계별 목록, 논리 흐름, 아웃라인)를 FigJam으로 가져오면 AI가 이를 분석하여 스티커 메모나 커넥터가 포함된 다이어그램으로 자동 재구성합니다. - 사용자가 수동으로 도형을 배치하고 일일이 텍스트를 입력하는 번거로움을 없애, 아이디어의 논리적 구조를 시각적으로 즉각 파악할 수 있게 돕습니다. - 단순한 텍스트 나열을 넘어 순서도(Flowcharts), 마인드맵, 브레인스토밍 섹션 등 목적에 맞는 시각적 형태로 변환이 가능합니다. **AI 협업 도구 간의 통합 워크플로우** - FigJam의 내장 AI 기능을 활용해 ChatGPT가 제안한 초안을 더 확장하거나, 유사한 아이디어끼리 자동으로 그룹화(Clustering)하여 요약할 수 있습니다. - 텍스트 기반 AI의 분석력과 FigJam의 직관적인 인터페이스가 결합되어, 기획 초기 단계에서 팀원들 간의 시각적 정렬(Alignment) 속도를 극대화합니다. - AI로 생성된 시각적 결과물을 바탕으로 팀원들이 실시간 피드백을 주고받으며, 정적인 텍스트 데이터를 동적인 프로젝트 계획으로 발전시킬 수 있습니다. 텍스트 기반의 AI 비서와 시각적 협업 캔버스를 결합하는 것은 현대적인 제품 설계와 기획 프로세스에서 매우 효율적인 전략입니다. ChatGPT로 아이디어의 뼈대를 잡은 후, 이를 즉시 FigJam으로 옮겨 시각적 다이어그램으로 구체화함으로써 기획부터 실행까지의 시간을 획기적으로 단축해 보시기 바랍니다.

말하기보다 보여주기: 업무 (새 탭에서 열림)

Figma Make는 디자이너가 텍스트 프롬프트를 통해 편집 가능한 UI 레이아웃을 신속하게 생성할 수 있도록 돕는 강력한 AI 도구입니다. 이 기능의 핵심은 모호한 지시 대신 구체적인 맥락과 구조를 제공하여 AI가 사용자의 의도를 정확히 파악하게 하는 데 있으며, 이를 통해 아이디어를 고해상도 프로토타입으로 전환하는 시간을 획기적으로 단축할 수 있습니다. 결과적으로 Figma Make를 효과적으로 활용하면 디자인 시스템의 일관성을 유지하면서도 창의적인 탐색 범위를 넓힐 수 있습니다. **상세하고 구체적인 프롬프트 작성** * 단순한 단어 나열보다는 '객체 + 행동 + 스타일'의 구조를 갖춘 문장 형태로 명령어를 구성해야 합니다. * 무엇을 만들고 싶은지(예: 대시보드), 어떤 기능을 수행하는지(예: 데이터 시각화), 어떤 시각적 느낌인지(예: 미니멀한)를 명확히 정의할수록 정확도가 높아집니다. **기기 및 플랫폼 환경 명시** * 결과물이 구현될 대상인 모바일 앱, 데스크톱 웹, 태블릿 등의 하드웨어 환경을 프롬프트에 반드시 포함합니다. * 특정 플랫폼에 최적화된 UI 패턴(예: 모바일의 하단 내비게이션 바, 웹의 사이드바)을 AI가 적절히 적용하도록 유도할 수 있습니다. **타겟 사용자 및 목적 정의** * 디자인의 대상이 되는 오디언스(예: 전문가용 분석 도구, 어린이용 교육 앱)를 명시하여 그에 적합한 컴포넌트와 톤앤매너를 유도합니다. * 앱의 핵심 가치나 비즈니스 목표를 설명에 덧붙이면 AI가 화면 내 요소의 우선순위를 더 잘 판단하게 됩니다. **레이아웃과 페이지 유형의 세분화** * 단순히 '화면'이라고 표현하기보다 '로그인 페이지', '상품 상세 정보', '사용자 설정 프로필' 등 구체적인 페이지 유형을 입력합니다. * 원하는 레이아웃 구조(예: 3단 그리드 시스템, 카드형 리스트)가 있다면 이를 직접 언급하여 구조적 완성도를 높입니다. **필수 UI 컴포넌트의 명시적 나열** * 버튼, 입력 필드, 차트, 검색바 등 화면에 반드시 포함되어야 하는 핵심 요소들을 프롬프트에 직접 나열합니다. * 생성된 요소들은 즉시 편집 가능한 레이어로 구성되므로, 초기 구조 단계에서 필수 요소를 미리 배치하는 것이 효율적입니다. **시각적 분위기와 스타일 가이드 설정** * '현대적인', '클린한', '다크 모드', '고대비'와 같은 시각적 키워드를 적극적으로 활용해 디자인의 심미적 방향을 제어합니다. * 브랜드의 색상 팔레트나 특정 디자인 스타일의 특징을 설명에 포함하여 일관된 결과물을 얻습니다. **반복적인 피드백과 점진적 개선** * 한 번의 생성으로 완벽한 결과물을 얻으려 하기보다, 생성된 결과물을 바탕으로 프롬프트를 조금씩 수정하며 최적의 결과물을 찾아가는 과정이 필요합니다. * AI가 제안한 초안 중에서 마음에 드는 부분을 선택하고, 나머지 부분을 다시 생성하거나 직접 수정하는 방식으로 협업합니다. **창의적인 출발점으로서의 도구 활용** * Figma Make를 최종 결과물을 만드는 도구가 아닌, '빈 캔버스'를 채워주는 시작점으로 인식하는 것이 중요합니다. * 와이어프레임 단계에서 다양한 아이디어를 빠르게 시각화하거나, 생각하지 못했던 레이아웃 옵션을 탐색하는 용도로 활용할 때 가장 큰 효과를 발휘합니다. Figma Make는 디자이너의 역할을 대체하는 것이 아니라, 번거로운 초기 작업을 대신 수행해 주는 유능한 파트너입니다. 프롬프트를 통해 의도를 정교하게 전달하는 연습을 병행한다면, 작업 속도를 높이는 동시에 디자이너 본연의 업무인 사용자 경험 설계와 세부적인 디테일 완성에 더 많은 시간을 집중할 수 있을 것입니다.

디자인 시스템을 위한 새로운 (새 탭에서 열림)

5 shifts redefining design systems in the AI era Insights Design systems AI