디자인 시스템

252 개의 포스트

figma3분 읽기큐레이션 요약

제12호: 새로운 역할

AI와 빠른 반복 작업으로 제품 개발자의 역할 경계가 빠르게 흐려지고 있다. PM이 프로토타입을 만들고, 개발자가 디자인을 수정하며, 디자이너가 코드 기반 결과물을 생성하는 등 역할이 확장되는 만큼 협업 방식과 업무 규칙도 함께 바뀌어야 한다. Figma는 공동 제작, 실험, 디자인 시스템, AI 활용을 통해 이러한 변화를 관리하는 사례들을 소개한다. ## 역할의 확장과 변화 - 제품 개발자의 **64%가 두 개 이상의 역할**을 맡고 있다고 답했다. - 디자이너가 아닌 사람의 **56%가 디자인 관련 업무**를 수행한다. - AI 도구와 짧아진 반복 주기는 개인이 기존 직무 범위를 넘어 더 넓은 제품 개발 과정에 참여하도록 만든다. - 역할이 겹치는 환경에서는 전통적인 직무 구분보다 시간 관리와 협업 규칙을 새롭게 설계하는 것이 중요하다. ## 직접 만들어 설명하는 프로토타이핑 - Figma 제품 디자이너 Natasha Tenggoro는 Figma Buzz의 동영상 재생 동작을 말로 설명하기 어려워 Figma Make로 직접 프로토타입을 제작했다. - 여러 프로토타입을 통해 팀이 기능을 직관적으로 이해하는 세 번의 “아하” 순간을 만들었다. - 핵심은 완성된 사양서를 전달하는 것이 아니라, 작동하는 결과물을 빠르게 보여주며 논의를 구체화한 점이다. - AI 기반 제작 도구는 디자이너가 아이디어를 설명하는 데서 그치지 않고 직접 검증 가능한 형태로 구현하도록 돕는다. ## 음악에서 영감을 얻은 브러시 디자인 - Figma Draw의 새로운 산포 브러시는 음악의 장르와 표현 방식에서 영감을 받았다. - 브러시의 간격, 흔들림, 불규칙성은 음악의 템포·질감·볼륨을 조정하는 과정과 유사하게 다뤄졌다. - 두왑, 베이퍼웨이브, 컨트리풍 음악인 혼키통, 스크리모 등 **10개 장르**를 시각적 브러시 스타일로 해석했다. - 기능 설계에 다른 분야의 감각과 비유를 적용하면 단순한 도구 추가를 넘어 창작 가능성을 확장할 수 있다. ## Duolingo의 공동 제작 방식 - Duolingo의 Math 팀은 전통적인 디자인-개발 핸드오프 대신 디자인과 엔지니어링의 공동 제작을 강조한다. - “보여주고 설명하지 말라”는 원칙과 “v1과 MVP를 구분하라”는 태도를 바탕으로 빠르게 실험한다. - 스크래피한 프로토타입을 함께 만들고, 아이디어를 반복적으로 수정하며 제품 방향을 정한다. - 역할별 산출물을 순차적으로 넘기는 방식보다 문제를 함께 해결하는 방식이 더 빠른 실행과 재창작을 가능하게 한다. ## 에이전시와 프리랜서의 협업 변화 - 변화는 기업 내부 팀에만 국한되지 않고, 크리에이티브 에이전시와 프리랜서의 고객 협업 방식에도 나타난다. - 에이전시는 전통적인 클라이언트-공급자 경계를 줄이고 프로젝트 전 과정에서 고객과 함께 작업한다. - Figma 같은 협업 도구를 활용해 고객을 초기 아이디어, 시안 검토, 제작 과정에 지속적으로 참여시킨다. - 고객과의 공동 제작은 결과물의 품질뿐 아니라 의사결정 속도와 이해도도 높일 수 있다. ## 디자인 시스템과 AI 에이전트 - AI 에이전트에게 코드 생성을 맡길 때는 프롬프트만 개선하기보다 입력의 기준이 되는 디자인 시스템을 먼저 정비해야 한다. - 디자인 시스템과 MCP 서버를 결합하면 AI가 브랜드에 맞고 실제 제품 맥락에 적합한 결과물을 생성할 가능성이 높아진다. - 디자인 토큰, 컴포넌트, 패턴 같은 구조화된 정보가 AI의 출력 품질을 좌우한다. - 디자인 시스템은 사람을 위한 일관성 도구를 넘어 AI 생산성을 높이는 기반이 된다. ## 실무에 적용할 때의 시사점 - 직무 경계를 고정하기보다 팀원이 문제 정의부터 프로토타이핑과 구현까지 유연하게 참여하도록 한다. - 말로 설명하기 어려운 아이디어는 빠른 프로토타입으로 대체한다. - 디자인과 개발을 분리된 핸드오프로 운영하기보다 초기부터 공동 제작한다. - AI 활용 전 디자인 시스템과 브랜드 규칙을 구조화해 신뢰할 수 있는 입력을 마련한다. - 새로운 역할에는 새로운 협업 규칙이 필요하므로, 책임 범위와 검토 절차도 함께 재정의해야 한다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

역할과 책임은 이제 과거의

제품 개발 조직에서 역할과 책임의 경계가 점점 흐려지고 있다. 디자이너뿐 아니라 PM, 개발자, 마케터 등 다양한 직군이 디자인과 프로토타이핑에 참여하며, 응답자의 64%가 두 개 이상의 역할을 수행한다고 답했다. 이러한 변화는 협업과 의사결정을 빠르게 만들지만, 도구의 과잉과 역할 혼선이라는 새로운 문제도 낳고 있다. ## 제품팀의 역할 경계가 흐려지는 현상 - Figma는 Factworks와 Fusion Hill을 통해 51건의 정성 인터뷰와 1,199명 대상 설문을 진행했다. - 응답자의 64%가 자신을 두 개 이상의 역할로 인식했으며, 3분의 1 이상은 세 개 이상의 역할을 수행한다고 답했다. - 비디자이너의 56%는 적어도 하나의 디자인 관련 업무에 “많이” 또는 “매우 많이” 참여한다고 응답했다. - PM이 프로토타입을 만들고, 개발자가 초기 디자인을 검토하며, 마케터와 콘텐츠 담당자가 Figma 파일에 직접 의견을 남기는 방식이 일반화되고 있다. ## 디자인은 디자이너만의 업무가 아니다 - 비디자이너의 디자인 관련 업무 참여는 전년보다 10% 증가했다. - PM의 70%가 저충실도 목업이나 와이어프레임을 만들고 있으며, 59%는 인터랙티브 프로토타이핑도 수행한다고 답했다. - 제품 개발자 4명 중 1명은 최근 새로운 디자인 도구를 도입했다. - 아직 디자인 도구를 사용하지 않는 사람 중 42%는 1년 안에 사용할 계획이라고 밝혔다. - 마케터는 소셜 미디어용 시각 자료를 만들고, PM은 디자이너의 작업을 기다리기 전에 아이디어를 시각화하는 식으로 업무가 확장되고 있다. ## 역할 중첩이 협업을 개선하는 방식 - PM이 초기 아이디어를 목업으로 만들면 디자이너가 더 일찍 방향을 조정하고 불필요한 수정 왕복을 줄일 수 있다. - 개발자가 구현 전에 Figma 목업을 검토하면 기술적 제약이나 실현 가능성 문제를 조기에 발견할 수 있다. - 초기 시각화는 문제와 해결책에 대한 공통 이해를 형성하고, 직군 간 커뮤니케이션을 구체화한다. - 절약된 시간은 사용자 조사, 전략 수립, 디자인 시스템 유지·확장, 전문 역량 강화에 재투자할 수 있다. - 다만 역할 확장이 전문 디자이너의 가치를 대체한다기보다, 각 직군이 더 효과적으로 협업하기 위한 수단으로 활용되어야 한다. - 이를 위해서는 팀 내 신뢰 관계, 이른 단계의 비전 정렬, 새로운 도구를 배우는 동료에 대한 개방성이 중요하다. ## 도구 확산과 AI가 역할 변화를 가속한다 - 응답자의 72%는 AI 도구를 역할 변화의 가장 큰 원인으로 꼽았다. - Figma Make, Claude Code, GitHub Copilot 등을 활용하면 몇 가지 프롬프트만으로 프로토타입이나 실행 가능한 코드를 빠르게 만들 수 있다. - Notion, Figma Buzz, Airtable 같은 도구는 마케팅 자산 제작과 프로젝트 관리도 간소화한다. - 기술이 특정 직군의 전유물이 되기보다, 여러 직군이 직접 결과물을 만들 수 있도록 진입 장벽을 낮추고 있다. ## 도구 과잉이 만드는 마찰 - 역할 변화의 결과로 더 많은 소프트웨어를 사용하게 되었다고 답한 응답자는 71%였다. - 조사 대상은 스프레드시트, 프로젝트 관리, 그래픽 디자인, 코딩 보조 등 16개 도구 범주를 사용했다. - 제품팀은 평균 7.6개 범주의 도구를 함께 사용하고 있어, 개별 도구의 효과가 분산될 수 있다. - 새로운 도구가 빠르게 등장하면서 구성원이 이를 모두 학습하고 업무 흐름에 통합하기 어려워지고 있다. - 따라서 도구를 무조건 추가하기보다 팀의 협업 방식과 목적에 맞는 도구를 선택하고, 중복되는 워크플로를 줄이는 접근이 필요하다. 역할의 경계가 사라지는 흐름은 피하기보다 효과적으로 관리해야 한다. 각 직군이 초기 단계에서 시각화와 프로토타이핑에 참여하도록 장려하되, 전문성을 존중하고 도구 수를 체계적으로 관리하면 협업 속도와 제품 품질을 함께 높일 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

여름 캠페인의 해부:

Instacart는 1990년대의 향수를 자극하는 간식과 디자인을 활용해 “Summer Like It’s 1999” 캠페인을 진행했다. 1999년 가격으로 Bagel Bites, Capri-Sun, Otter Pops 등을 판매하고, 뉴욕에서 Third Eye Blind 무료 콘서트를 열어 온라인과 오프라인을 연결했다. 캠페인의 성공 요인은 여러 팀과 파트너가 Figma를 중심으로 실시간 협업하며 일관된 디자인 시스템을 구축한 데 있었다. ## 1990년대 향수를 되살린 캠페인 - 버터플라이 클립, 초커, 헐렁한 청바지, 버킷햇 등 당시 유행을 현대적으로 재해석했다. - “단순하고 carefree했던 시절”에 대한 향수를 캠페인의 정서적 기반으로 삼았다. - 대표적인 1990년대 간식을 당시 가격으로 제공해 과거의 여름 경험을 재현했다. - 앱 아이콘과 스플래시 화면부터 TV 광고, 옥외 광고, 콘서트까지 수십 개의 접점을 하나의 캠페인으로 연결했다. ## 브랜드와 복고풍 사이의 균형 - Instacart의 자체 브랜드 정체성을 유지하면서도 1990년대 분위기를 강하게 표현하는 것이 핵심 과제였다. - 청키한 타이포그래피, 선명한 색상, 피시 아이 렌즈 사진을 주요 시각 요소로 사용했다. - 팀은 다양한 1990년대 디자인 자료를 폭넓게 탐색한 뒤, 브랜드와 캠페인을 연결하는 핵심 요소만 추려냈다. - 크리에이티브 스튜디오는 타이포그래피, 색상, 일러스트레이션, 사진, 로고와 락업 표현을 매일 논의하며 방향을 조정했다. ## 확장 가능한 디자인 툴킷 - 캠페인 툴킷에는 다음 요소가 체계적으로 정리됐다. - 기본 및 보조 색상 팔레트 - 일러스트레이션 스타일 - 타이포그래피와 문구 배치 - 제품 패키지 표현 방식 - 사진 및 질감 활용법 - 로고와 캠페인 락업 규칙 - 툴킷은 단순한 가이드 문서가 아니라 내부 팀과 외부 파트너가 계속 활용하는 ‘살아 있는 파일’로 운영됐다. - 캠페인 진행 중 새로운 요구사항이 생겨도 기존 규칙 안에서 자유롭게 변형할 수 있었다. - Venmo 파트너십 광고처럼 예상하지 못한 확장 프로젝트도 기존의 글꼴, 일러스트, 사진 지침을 활용해 빠르게 제작할 수 있었다. ## Figma를 중심으로 한 협업 방식 - 브랜드, 퍼포먼스, 커머셜 마케팅, 앱 제작팀이 Figma를 공동 작업 공간으로 사용했다. - 마케터도 파일에 직접 접근해 작업 진행 상황을 확인하고, 제작 중간에 의견을 제시할 수 있었다. - 완성물을 마지막에 전달하는 방식 대신, 작업 과정의 ‘중간 상태’를 공유하며 지속적으로 수정했다. - 다양한 팀과 외부 이해관계자가 빠르게 움직이는 캠페인에서는 개방성과 유연성이 중요하다는 점을 보여준다. - Figma는 디자인 제작 도구이자 캠페인의 일관성을 유지하는 단일 기준점 역할을 했다. ## 세밀하게 설계한 사진 브리프 - 사진 브리프는 무엇을 촬영할지뿐 아니라 어떤 방식으로 촬영할지도 구체적으로 규정했다. - 캠페인의 핵심 CPG 제품이 사진 속에서 어떻게 보여야 하는지 명확히 지정했다. - 여러 이해관계자의 검토를 거쳐야 했기 때문에 제품 노출 방식과 촬영 구도가 세밀하게 정의됐다. - 사진 위에 일러스트레이션, 타이포그래피, 질감을 추가해 모든 소재가 동일한 캠페인처럼 보이도록 설계했다. - 낮은 앵글, 피시 아이 효과, 햇살이 느껴지는 야외 공간 등을 활용해 1990년대의 과장되고 낙관적인 분위기를 표현했다. ## 실용적인 시사점 대규모 캠페인에서는 완성된 결과물을 일방적으로 전달하기보다, 모든 팀이 접근할 수 있는 공유 툴킷과 실시간 리뷰 구조를 마련하는 것이 효과적이다. 특히 복고풍처럼 강한 스타일을 활용할 때는 시각적 요소를 무작정 늘리기보다 브랜드와 연결되는 핵심 규칙을 먼저 정하고, 그 안에서 다양한 실행물을 확장하는 방식이 유용하다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

회복 탄력성 있는 디자인 팀

빠르게 변하는 기술 환경과 AI의 확산 속에서 회복탄력적인 디자인 팀을 만들려면 팀의 심리적 안전과 건강을 먼저 확보해야 한다. 동시에 실험과 역할 확장을 장려하고, 디자인 완성도를 경쟁력으로 삼아 변화에 적응하면서도 높은 품질을 유지해야 한다. 글은 Figma, Twitter, 37signals에서의 경험을 바탕으로 리더가 고정된 해법보다 원칙에 기반해 팀을 운영해야 한다고 강조한다. ## 팀의 건강과 심리적 안전을 우선하기 - 스트레스, 과로, 번아웃, 발언에 대한 두려움이 있으면 구성원은 역량을 충분히 발휘하기 어렵다. - 서로 신뢰하고 공동의 목표를 공유하는 환경이 창의적인 협업의 기반이 된다. - 다양한 의견이 반영되도록 실시간 회의뿐 아니라 비동기 채널도 운영해야 한다. 그래야 회의에서 가장 목소리가 큰 사람만 의사결정을 주도하지 않는다. - 프로젝트의 초기 스케치부터 최종 디자인까지 모든 단계의 결과물을 자유롭게 공유하도록 장려한다. - 1:1 미팅, 커리어 대화, 팀 설문을 정기적으로 진행해 문제가 커지기 전에 팀의 상태를 파악한다. - 실제 가용 시간과 업무량을 고려해 과도한 약속을 피해야 한다. - 리더가 모르는 점이나 어려움을 솔직하게 드러내면 구성원도 취약함과 의견을 안전하게 공유할 수 있다. ## 실험과 역할의 유연성 장려하기 - 디자이너마다 강점과 성장 영역이 다르므로, 서로 보완적인 역량을 가진 사람들을 함께 배치하면 팀의 균형과 학습 효과가 커진다. - 리서치, 디자인, 제품, 엔지니어링의 경계가 점점 흐려지는 만큼 전통적인 직무 범위에만 머물지 않도록 해야 한다. - 디자이너가 실제 구현과 가까워지도록 AI 프로토타이핑이나 코드 실험을 장려한다. - 실제 작동하는 결과물을 빠르게 평가하면 더 나은 디자인 결정을 내릴 수 있고, 결과적으로 생산성이 높아지는 선순환이 생긴다. - 실험 결과와 학습 내용을 공유할 공간을 마련한다. Figma의 `#design-wip` 채널처럼 미완성 아이디어, 스케치, 작동하는 프로토타입도 공유할 수 있어야 한다. - 디자인 크리틱에 제품·엔지니어링 등 협업 직군을 참여시켜 새로운 관점과 포용적인 작업 방식을 만든다. - 현재 제품을 계속 출시하는 실행과 미래의 작업 방식을 탐색하는 발명을 동시에 진행해야 한다. ## 완성도를 차별화 요소로 삼기 - 경쟁이 치열한 시장에서는 유용하고 잘 실행된 제품이 사용자 충성도와 추천을 높이고 성장을 이끈다. - 특히 엔터프라이즈 소프트웨어에서는 디자인 완성도가 뒤로 밀리는 경우가 많기 때문에 세심한 품질 관리가 차별점이 될 수 있다. - 완성도 높은 결과물을 만들려면 시각적 일관성, 인터페이스의 명확성, 세부적인 사용자 경험에 주의를 기울여야 한다. - 빠른 출시와 품질 사이에는 trade-off가 발생할 수 있으며, 때로는 새 기능 추가보다 UX 개선을 우선해야 한다. - 속도를 중시하는 상황에서도 품질을 자동으로 희생하지 않도록 팀 차원의 기준과 우선순위를 명확히 해야 한다. 결국 리더는 안전하게 의견을 낼 수 있는 문화를 만들고, 실험과 직무 간 협업을 지원하며, 속도와 품질 사이의 균형을 관리해야 한다. 정기적인 팀 상태 점검과 현실적인 업무량 조정, 작게라도 지속적인 프로토타이핑이 회복탄력적인 디자인 팀을 만드는 실용적인 출발점이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Forrester가 분석한 Dev Mode의

Figma의 Dev Mode는 디자인-개발 간 핸드오프와 반복적인 확인 작업을 줄여 개발자의 생산성과 출시 속도를 높인다는 내용이다. Forrester는 이를 바탕으로 3년간 개발자 생산성이 20~30% 향상되고, 개발자 1인당 매주 90분 이상을 절약할 수 있다고 분석했다. 복합 기업 모델에서는 약 1,000만 달러의 시간 절감 효과와 출시 기간 단축으로 인한 200만 달러의 추가 이익을 추정했다. ## Forrester의 분석 범위와 방법 - Figma는 Dev Mode 출시 2년 후 경제적 효과를 검증하기 위해 Forrester Consulting에 연구를 의뢰했다. - Forrester의 **Total Economic Impact(TEI)** 방법론을 활용했다. - Dev Mode를 사용하는 조직의 의사결정자 4명을 인터뷰했다. - 인터뷰 결과를 바탕으로 디자이너와 개발자 100~1,000명 규모의 복합 조직을 모델링했다. - 분석 대상의 핵심 문제는 다음과 같다. - 비효율적인 디자인-개발 핸드오프 - 디자인 의도 확인을 위한 반복적인 커뮤니케이션 - 중복 작업과 문서 탐색 - 개발 과정에서 발생하는 컨텍스트 전환 ## 개발자 생산성과 경제적 효과 - Dev Mode 사용으로 개발자 산출량이 **20~30% 증가**할 것으로 추정됐다. - 개발자 1인당 매주 **90분 이상**의 시간을 절약할 수 있는 것으로 나타났다. - 한 기업이 개발자 200명을 대상으로 조사한 결과, 평균 절감 시간은 **주 98분**이었다. - 복합 조직 모델에서는 3년 동안 개발자 효율성 향상으로 약 **1,000만 달러의 시간 절감 효과**를 추산했다. - 제품을 더 빠르게 출시함으로써 약 **200만 달러의 추가 이익**이 발생할 수 있다고 분석했다. - 효과는 단순히 코딩 속도 향상에만 있지 않고, 개발자가 실제 구현에 집중할 수 있도록 방해 요소를 줄이는 데서 비롯된다. ## 하나의 진실 공급원으로서의 Dev Mode - 디자이너와 개발자가 동일한 Figma 파일을 기준으로 작업하면서 디자인 정보가 분산되는 문제를 줄인다. - 개발자는 파일에서 다음 정보를 직접 확인할 수 있다. - 디자인 변수 - 정확한 치수와 사양 - 사용된 에셋 - 관련 문서 - 코드 스니펫 - Slack 메시지, 회의, 별도 문서 검색을 통해 디자인 의도를 확인할 필요가 줄어든다. - 시간대가 다른 글로벌 팀에서도 별도의 실시간 미팅 없이 필요한 정보를 스스로 확인할 수 있다. ## 핸드오프 방식에서 동시 협업 방식으로 - 기존 방식에서는 디자인이 완성된 뒤 개발로 넘기는 순차적인 핸드오프가 일반적이었다. - 이 과정은 디자인 의도 확인과 수정 요청이 반복되면서 출시까지 매우 오래 걸릴 수 있었다. - 한 피트니스 업계 기업은 Dev Mode를 통해 디자인과 개발이 진행 중인 상태에서 지속적으로 협업했다. - 그 결과 “코드가 전혀 없는 상태에서 출시까지” 걸리는 시간이 **2~3년에서 6~8개월**로 단축됐다고 보고했다. - 디자이너와 개발자가 작업 중간부터 피드백을 주고받으면 후반부의 대규모 재작업을 줄일 수 있다. ## 커뮤니케이션과 수작업 감소 - 개발자는 과거에 디자인 의도를 확인하기 위해 디자이너에게 질문하거나 별도 미팅을 요청해야 했다. - 디자이너 역시 수동으로 주석을 달고 사양을 설명하는 데 시간을 써야 했다. - Dev Mode는 필요한 정보를 디자인 파일 안에서 직접 제공해 이런 반복 작업을 줄인다. - 한 시스템 디자이너는 개발자가 변수, 사양, 코드 정보를 직접 확인할 수 있어 더 자율적으로 작업한다고 설명했다. - 결과적으로 다음과 같은 변화가 가능하다. - 불필요한 메시지와 회의 감소 - 수동 주석 작성 감소 - 디자인 확인을 위한 대기 시간 단축 - 개발자의 정신적 부담과 컨텍스트 전환 감소 - 구현과 제품 완성도에 더 많은 집중 ## 실용적인 시사점 Dev Mode 같은 협업 도구의 ROI는 기능 자체보다 핸드오프 과정에서 발생하는 대기·질문·중복 작업을 얼마나 줄이는지로 평가하는 것이 적절하다. 도입을 검토하는 팀이라면 개발자당 절감 시간, 디자인 확인에 소요되는 커뮤니케이션량, 재작업 횟수, 출시까지의 기간을 도입 전후로 측정하는 것이 좋다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

디자인 시스템과 AI: MCP 서버

디자인 시스템은 AI가 브랜드와 팀의 표준에 맞는 코드를 생성하도록 만드는 핵심 맥락이며, MCP 서버는 이 맥락을 디자인 도구와 개발 환경 사이에서 전달하는 연결 고리다. Figma MCP 서버는 컴포넌트, 스타일, 변수, Code Connect 정보 등을 AI 에이전트에 제공해 생성 코드의 정확도와 일관성을 높인다. 결과적으로 디자인 시스템과 AI는 서로를 강화하는 선순환을 만들며, 더 빠르면서도 품질 높은 제품 개발을 가능하게 한다. ## 디자인 시스템과 AI의 선순환 - 디자인 시스템은 디자인과 엔지니어링 팀이 확장된 환경에서도 일관된 결정을 내리도록 돕는 기반이다. - 성공적인 디자인 시스템의 요소인 문서화, 공통 언어, 재사용 패턴, 브랜드 가이드는 AI 활용에도 필수적인 맥락이 된다. - AI가 디자인 시스템을 이해하면 단순히 “작동하는 결과물”이 아니라 팀의 표준과 의도에 맞는 결과물을 생성할 수 있다. - AI가 디자인 시스템을 활용해 더 나은 코드를 만들면, 디자인 시스템의 활용도와 품질도 다시 향상되는 선순환이 형성된다. ## MCP 서버가 제공하는 역할 - Figma MCP 서버는 Figma의 디자인 정보를 IDE와 AI 에이전트에 전달한다. - AI가 활용할 수 있는 정보에는 다음이 포함된다. - 컴포넌트와 스타일 - 디자인 변수와 변수의 코드 문법 - Code Connect를 통해 연결된 실제 코드 리소스 - 디자인 요소가 코드와 연결되어 있을수록 AI는 기존 컴포넌트와 구현을 재사용할 수 있어 더욱 정확한 코드를 생성한다. - 디자인 시스템이 아직 충분히 구축되지 않은 조직에서도 토큰과 컴포넌트 구현을 시작하는 데 MCP 서버를 활용할 수 있다. ## 디자인 시스템은 디자인과 AI의 공통 언어 - LLM을 통해 아이디어를 실행으로 옮기기 쉬워질수록, 기능뿐 아니라 시각적 완성도와 브랜드 정체성이 차별화 요소가 된다. - 디자인 시스템은 다음과 같은 기반을 제공한다. - **확장 가능한 기반:** 색상, 간격, 타이포그래피 등의 토큰을 정의해 플랫폼 전반의 일관성을 유지 - **재사용 가능한 컴포넌트:** 다양한 사용 사례에 대응하면서도 단일한 기준점 유지 - **내장된 접근성:** 처음부터 포용적이고 사용 가능한 인터페이스 설계 - 디자인 시스템이 없으면 AI가 생성한 결과가 비슷하고 일반적인 UI의 조합으로 수렴할 수 있다. - 디자인 시스템은 AI를 조직의 브랜드, 품질 기준, 개발 관행에 연결하는 매개체가 된다. ## 속도와 정확도를 높이는 디자인 맥락 - 글에서 인용한 Figma AI 보고서에 따르면 개발자의 68%가 코드 작성에 AI를 사용하지만, 생성 결과를 신뢰하는 디자이너와 개발자는 32%에 그친다. - AI가 디자인 시스템 없이 코드를 생성하는 것은 팀의 온보딩을 거치지 않은 신입 개발자에게 바로 코드를 배포하게 하는 것과 비슷하다. - 디자인 시스템 맥락이 제공되면 AI는 다음을 수행할 수 있다. - 기존 컴포넌트와 패턴을 재사용해 중복과 불일치 감소 - 디자인 토큰을 자동 적용해 브랜드 및 접근성 기준 준수 - 개발자가 바로 개선할 수 있는 품질 높은 초기 코드 제공 - 디자인과 개발 사이의 오해 및 QA 시간을 줄여 피드백 주기 단축 ## Figma MCP 서버의 코드 생성 방식 - Figma 프레임을 검사하면 MCP 서버가 해당 화면의 컴포넌트, 스타일, 변수 등의 맥락을 AI 에이전트에 전달한다. - Code Connect와 변수 코드 문법이 설정되어 있으면 AI는 실제 코드베이스의 컴포넌트와 리소스를 직접 활용할 수 있다. - 연결 정보가 없더라도 MCP 서버는 색상, 스타일, 레이아웃 등 디자인 정보를 제공해 AI가 디자인에 맞는 코드를 새로 작성하도록 돕는다. - 자동 디자인 시스템 규칙 생성 기능은 코드베이스를 분석해 다음 내용을 포함한 구조화된 규칙 파일을 만들 수 있다. - 토큰 정의 - 컴포넌트 라이브러리 - 스타일 계층 구조 - 명명 규칙 - 이 규칙 파일은 AI 에이전트의 시스템 수준 지침으로 작동해, 개발자가 매번 간격·토큰·이름 규칙을 상세히 프롬프트하지 않아도 팀의 기본값을 적용하게 한다. - 주석(annotations)을 사용하면 접근성 요구사항, 상호작용 방식, 콘텐츠 관련 추가 맥락도 AI에 전달할 수 있다. ## 실용적인 적용 방향 - AI 코드 생성 전에 디자인 토큰, 컴포넌트, 변수의 이름과 구조를 정리한다. - Figma 컴포넌트와 실제 코드 컴포넌트를 Code Connect로 연결한다. - 코드베이스의 규칙과 명명 체계를 AI가 참조할 수 있는 규칙 파일로 관리한다. - 접근성, 상호작용 동작, 콘텐츠 제약은 주석으로 명시한다. - MCP 서버는 AI를 대체하는 도구라기보다, 조직의 디자인 시스템을 AI가 활용할 수 있도록 변환하는 인프라로 보는 것이 적절하다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

듀오링고 메소드:

Duolingo Math 팀은 디자인과 엔지니어링을 분리해 순차적으로 넘기는 전통적인 핸드오프 대신, 처음부터 함께 아이디어를 만들고 프로토타입을 반복 검증하는 방식을 택한다. 디자이너·엔지니어·PM이 실시간으로 협업하며 실제 작동하는 경험을 바탕으로 결정하기 때문에, 새로운 제품에서도 빠르게 방향을 찾고 완성도를 높일 수 있다. 핵심은 완벽한 설계를 먼저 확정하는 것이 아니라, 만들고 보여주고 수정하는 과정을 팀 전체의 공동 작업으로 만드는 데 있다. ## 선형적인 핸드오프의 한계 - 디자인에서 엔지니어링으로 작업을 한 번에 넘기는 방식은 제품 개발이 실제로 진행되는 방식과 맞지 않는다. - 특히 Duolingo Math처럼 새로운 학습 모듈과 게임을 처음부터 만들어야 하는 팀은 기존 템플릿이나 검증된 청사진을 활용하기 어렵다. - 상호작용과 애니메이션이 많은 기능은 문서나 정적인 화면만으로 구현 난이도와 사용자 경험을 정확히 판단하기 어렵다. - 따라서 디자인과 엔지니어링이 초기 단계부터 지속적으로 연결되어야 한다. ## 초기 단계부터 함께 아이디어 구상 - 디자이너가 혼자 작업을 시작하지 않고, 디자이너·엔지니어·제품 관리자가 공유된 FigJam 파일에서 함께 아이디어를 낸다. - 방향이 정해지면 디자이너가 Figma에서 화면과 동작, 모션을 구체화한다. - 엔지니어도 이 단계에 적극 참여해 복잡한 상호작용과 애니메이션을 미리 검토한다. - 구현하기 어려운 부분은 Figma 댓글 등으로 조기에 지적해 불필요한 설계 수정을 줄인다. - Jira를 Figma와 직접 연결해 도구 간 맥락 전환을 줄이고, 디자인과 개발 작업의 흐름을 유지한다. ## 빠른 프로토타이핑과 반복 실험 - 디자인 시안에 합의한 뒤 엔지니어가 Duolingo 디자인 시스템의 컴포넌트를 활용해 초기 프로토타입을 빠르게 만든다. - 디자이너와 엔지니어가 작동하는 프로토타입을 만든 후 팀 회의에서 직접 테스트하고 피드백을 받는다. - Slack 채널에서 디자이너는 Figma 파일을, 엔지니어는 구현된 프로토타입을 공유하며 질문과 의견을 주고받는다. - 각 기능마다 다음 순환을 반복한다. - 프로토타입 제작 - 팀 테스트 - 피드백 수집 - 수정 및 재검증 - Duolingo의 “말로 설명하기보다 직접 보여준다(show don’t tell)”는 원칙에 따라, 아이디어의 타당성을 논의만 하지 않고 실제 경험으로 확인한다. - 프로토타입은 설계를 미리 완성하기 위한 결과물이 아니라, 제품이 실제로 어떻게 느껴지는지 확인하고 핵심 결정을 내리기 위한 도구다. ## 함께 다듬고 출시하기 - 지속적인 협업을 통해 개발 중에도 빠르게 의사결정을 내리고 기능을 다듬을 수 있다. - 속도가 중요할 때는 애니메이션을 단순화하는 등 기능을 핵심 경험 위주로 축소한다. - 교육용 게임의 시장 적합성을 확인할 때도 처음부터 완성도 높은 게임 두 개를 만드는 대신, 단순한 디자인과 최소한의 메커니즘을 가진 게임부터 빠르게 제작했다. - 어떤 기능을 우선할지 미리 정한 뒤, 일곱 가지 프로토타입을 반복적으로 제작하며 사용자에게 어떤 경험이 반응을 얻는지 확인했다. - 이 방식은 대규모 기능을 장기간 개발한 뒤 실패하는 위험을 낮추고, 초기 학습을 제품 방향에 빠르게 반영하게 한다. ## 실무에 적용할 때의 시사점 - 디자인 완료 후 개발을 시작하기보다, 초기 기획부터 디자이너와 엔지니어를 함께 참여시킨다. - 정적 시안보다 작동하는 작은 프로토타입을 우선 제작한다. - 기능별로 짧은 제작·테스트·수정 주기를 운영한다. - 속도와 학습이 중요한 초기 단계에서는 부가 기능보다 핵심 사용자 경험에 집중한다. - 협업 도구를 연결하고 공유 채널을 마련해 작업 맥락과 피드백을 실시간으로 유지한다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

두 매개변수 구조

Figma는 변수(variables)와 컴포넌트 속성(component properties)을 서로 다른 구조로 구축했지만, 두 시스템이 같은 레이어 속성에 동시에 연결될 수 있어 렌더링 불일치와 학습·유지보수의 어려움이 발생했습니다. 이를 해결하기 위해 두 기능을 하나의 파라미터 아키텍처로 통합했고, 그 결과 사용자 경험의 일관성, 개발 속도, 향후 제품 확장성을 개선했습니다. ## 파라미터 시스템의 역할 - Figma의 반응형 디자인, 타이포그래피, 애니메이션, 상태 머신 등은 값을 한 곳에서 설정하고 여러 요소에 전파하는 파라미터 개념을 기반으로 합니다. - 값이 변경되면 해당 값을 참조하는 레이어의 속성이 즉시 갱신됩니다. - 변수와 컴포넌트 속성은 모두 “한 번 설정하고 여러 곳에 적용하는” 기능이지만, 서로 다른 문제를 해결하기 위해 별도로 발전했습니다. ## 컴포넌트 속성: 범위가 제한된 파라미터 - 컴포넌트 속성은 2022년에 출시됐으며, 디자인과 코드 사이의 간극을 줄이기 위한 목적이었습니다. - 특정 컴포넌트 내부 레이어에만 적용되는 **범위 제한형 파라미터(scoped parametrization)** 를 제공합니다. - 디자인 시스템 작성자는 버튼 등의 컴포넌트에 Boolean, 텍스트, 인스턴스 교체 등의 속성을 정의할 수 있습니다. - 사용자는 컴포넌트 내부 구조를 직접 훼손하지 않고, 공개된 속성만 수정할 수 있습니다. - 코드에서 컴포넌트의 props를 사용하는 방식과 유사해 디자이너와 개발자가 동일한 mental model을 공유할 수 있게 됐습니다. - 이 구조는 Figma Sites, Figma Make, Code Connect처럼 디자인을 실제 웹·코드 결과물로 연결하는 기능의 기반이 됐습니다. ## 변수: 전역적이고 문맥을 지원하는 파라미터 - 변수는 컴포넌트 내부에 국한되지 않고 프로젝트 전반에서 사용할 수 있는 더 넓은 범위의 파라미터입니다. - 색상, 크기 등 다양한 타입을 지원하며 디자인 토큰을 표현하는 데 적합합니다. - 라이트 모드와 다크 모드처럼 하나의 변수에 여러 문맥별 값을 정의할 수 있습니다. - 예를 들어 배경색 변수 하나에 기본, 보조, 강조 값과 각 모드의 실제 색상을 연결할 수 있습니다. - 이러한 특성 덕분에 디자인 시스템의 토큰을 중앙에서 관리하고 여러 화면에 일관되게 적용할 수 있습니다. ## 두 아키텍처를 분리했을 때의 문제 - 변수와 컴포넌트 속성이 서로 다른 내부 구조를 사용하면서 기능 간 동작이 일관되지 않았습니다. - 하나의 레이어 속성에 변수와 컴포넌트 속성이 동시에 연결되는 상황이 발생할 수 있었습니다. - 이 경우 편집기에서 어떤 값이 우선하는지 예측하기 어렵고 렌더링 결과가 일치하지 않을 수 있었습니다. - 사용자 입장에서는 비슷한 기능을 서로 다른 방식으로 배워야 했습니다. - 개발팀 역시 기능을 추가할 때 두 아키텍처를 각각 수정하고 호환성을 검토해야 했습니다. - 다른 Figma 제품에 파라미터 기능을 확장하려 해도 기존의 기술적 복잡성을 함께 가져가야 했습니다. ## 단일 파라미터 아키텍처로의 통합 - Figma는 변수와 컴포넌트 속성을 공통된 내부 파라미터 모델 위에서 동작하도록 통합했습니다. - 두 기능의 사용자-facing 개념은 유지하면서도, 값의 정의·바인딩·전파를 처리하는 기반 구조를 공유하게 했습니다. - 동일한 레이어 속성에 여러 파라미터가 연결되는 경우도 일관된 규칙으로 처리할 수 있게 됐습니다. - 공통 아키텍처를 통해 편집기 내 예상치 못한 동작과 렌더링 불일치를 줄였습니다. - 새로운 파라미터 기능이나 제품을 개발할 때 기존 시스템을 각각 구현할 필요가 없어져 개발 속도도 향상됐습니다. ## 통합이 가져온 확장성 - 컴포넌트의 구조적 제어와 변수의 전역적·문맥적 제어를 하나의 기반에서 조합할 수 있습니다. - 디자인 토큰, 컴포넌트 속성, 코드 생성 기능을 더 일관된 방식으로 연결할 수 있습니다. - 향후 Figma의 다른 제품에서도 동일한 파라미터 개념과 동작 규칙을 재사용할 수 있습니다. - 이번 작업은 단순한 내부 리팩터링이 아니라, 디자인 도구 전반에서 파라미터화를 확장하기 위한 기반을 마련한 사례입니다. 실무적으로는 컴포넌트의 외부에 노출할 사용자 조정 항목에는 컴포넌트 속성을, 여러 화면과 모드에서 공유할 디자인 토큰에는 변수를 사용하는 것이 적절합니다. 두 기능이 통합된 아키텍처 위에서 동작하더라도 각 기능의 범위와 목적은 여전히 다르므로, 재사용 범위에 따라 선택하는 것이 좋습니다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

제품 아이콘의 제작 과정

Figma의 제품 아이콘은 단순한 장식이 아니라 각 제품의 정체성과 기능을 작은 공간에 압축한 상징이다. 디자이너 Tim Van Damme는 일관된 제작 규칙을 바탕으로 제품의 본질을 탐구하고, 수십~수백 개의 시안을 반복 실험해 최종 아이콘을 완성한다. 정해진 공식은 창의성을 제한하는 것이 아니라, 다양한 아이디어를 하나의 제품군으로 묶는 기반이 된다. ## 일관성을 만드는 아이콘 제작 가이드라인 - Figma에 공식적인 아이콘 시스템이 없던 상황에서 Tim이 직접 제작 원칙을 수립했다. - 주요 규칙은 다음과 같다. - 선 두께는 1픽셀로 통일한다. - 내부 컷아웃도 1픽셀 두께를 유지한다. - 선의 끝부분은 둥글게 처리한다. - 아이콘이 주어진 공간을 최대한 균형 있게 채우도록 구성한다. - 다양한 사용 환경을 고려해 세 가지 크기로 제작한다. - 아이콘은 툴바뿐 아니라 대형 광고판과 마케팅 자료에도 사용되므로, 확대·축소했을 때도 형태가 명확해야 한다. - 축소했을 때 선이 뭉개지거나 요소 간 구분이 어려우면 초기 단계에서 해당 시안을 폐기한다. ## 제품의 본질에서 출발하기 - 아이콘은 브랜드 전체의 규칙뿐 아니라 개별 제품의 시각적 정체성도 표현해야 한다. - 작은 공간에 많은 의미를 담기 위해 디자인·제품 팀이 제품과 관련된 핵심 개념과 단어를 먼저 브레인스토밍한다. - Figma Community의 경우 다음과 같은 개념에서 출발했다. - 커뮤니티를 통한 연결 - 동료 간 지식 교환 - 함께 배우는 경험 - 이러한 키워드에서 사람, 나무, 책 같은 상징을 도출하고 다양한 형태로 발전시켰다. - Figma Buzz는 마법, 창작, AI 이미지 생성 같은 주제를 바탕으로 유리 구슬, 별, 마법을 연상시키는 형태를 탐색했다. ## 수십~수백 개의 시안으로 아이디어 발전시키기 - 초기 개념을 정한 뒤에는 하나의 아이디어를 빠르게 확정하지 않고, 아이콘 가족 전체를 반복적으로 변형한다. - 나무가 얼굴이 되고, 얼굴이 만다라가 되며, 추상적인 형태가 회전하고 얽히는 식으로 자유롭게 시각적 연상을 확장한다. - Tim은 창의적 감각을 유지하기 위해 의도적인 “창의적 방황”을 즐긴다고 설명한다. - Figma Make 아이콘을 만들 때는 움직임과 변형을 표현하기 위해 바퀴, 나비, 나침반, 피젯 스피너 등을 실험했다. - Figma Buzz에서는 날개 모양, 선, 더듬이 길이가 다른 벌 아이콘을 하루 동안 수백 개 제작했다. - 반복 작업은 Figma의 가변 폭 선(variable width stroke)과 여러 벡터 레이어 동시 편집 기능을 활용해 효율화했다. ## 규칙과 실험의 균형 - 아이콘 제작에는 선 두께, 크기, 균형 같은 명확한 제약이 있지만, 그 안에서 상징과 형태를 자유롭게 탐험한다. - 따라서 일관된 시스템은 결과를 획일적으로 만드는 공식이 아니라, 창의적인 실험이 브랜드 전체와 조화를 이루도록 돕는 틀이다. - 기존 제품 아이콘을 재설계하고 신규 제품 아이콘을 추가하면서도 전체 제품군이 하나의 시각적 체계로 보이도록 조정했다. 제품 아이콘을 설계할 때는 먼저 일관된 시각 규칙을 정하고, 제품의 핵심 가치를 키워드로 구체화한 뒤, 충분한 수의 변형을 실험하는 접근이 효과적이다. 최종 결과보다 탐색 과정에서 많은 가능성을 비교하고, 실제 사용 크기에서 명확성과 균형을 검증하는 것이 중요하다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

Figma IPO 추진을 위한 로드

Figma가 클래스 A 보통주 IPO를 위한 로드쇼를 시작한다고 발표했다. 회사는 1,247만 주를 직접 발행하고, 기존 주주들은 2,464만 주를 매각할 예정이며 공모 희망가는 주당 25~28달러다. 뉴욕증권거래소에 `FIG`라는 종목명으로 상장 신청했지만, SEC 등록신고서가 아직 효력을 발휘하지 않아 실제 매각은 승인 이후 가능하다. ## IPO 공모 구조 - Figma가 신규 발행하는 주식: **12,472,657주** - 기존 주주가 매각하는 주식: **24,646,423주** - 초기 공모 물량은 총 **37,119,080주** - 기존 주주 매각분에 대해서는 Figma가 대금을 받지 않는다. - 인수단은 초과배정 물량을 충당하기 위해 최대 **5,540,561주**를 추가 매입할 수 있는 30일 옵션을 부여받는다. ## 공모 가격과 상장 계획 - 공모 희망 가격: **주당 25~28달러** - 상장 예정 거래소: **뉴욕증권거래소(NYSE)** - 예정 티커: **FIG** - 희망 가격 기준 Figma가 신규 주식 발행으로 조달할 수 있는 금액은 대략 **3억 1,200만~3억 5,000만 달러** 수준이다. 이는 수수료와 할인 등을 반영하기 전의 단순 추산이다. ## IPO 주관사 - 공동 대표 주관사: - Morgan Stanley - Goldman Sachs - Allen & Company - J.P. Morgan - 대표 주관사: - BofA Securities - Wells Fargo Securities - RBC Capital Markets - 공동 주관사: - William Blair - Wolfe | Nomura Alliance ## SEC 등록과 법적 유의사항 - Figma는 해당 증권에 대한 등록신고서를 SEC에 제출했다. - 그러나 발표 시점에는 등록신고서가 아직 효력을 갖지 않았다. - 따라서 효력 발생 전에는 주식을 판매하거나 매수 제안을 받을 수 없다. - 이번 발표문 자체는 주식 매수 제안이나 매도 권유를 의미하지 않으며, 실제 공모는 최종 투자설명서를 통해 진행된다. ## Figma의 사업 정체성 - 2012년 설립된 Figma는 초기 디자인 도구에서 출발했다. - 현재는 아이디어 구상, 디자인, 개발, 출시를 연결하는 협업 플랫폼으로 확장했다. - AI 기능을 포함한 연결형 플랫폼을 통해 제품 개발 과정 전반의 협업과 효율성을 높이는 것을 목표로 한다. Figma의 IPO는 회사가 비상장 기업에서 공개 기업으로 전환하는 공식적인 단계에 들어섰다는 의미다. 다만 실제 투자 판단을 위해서는 SEC 최종 투자설명서에서 공모 후 지분 구조, 재무 실적, 위험 요인, 주식 희석 및 자금 사용 계획을 확인해야 한다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

좋은 기업들과 함께: 소매

리테일 기업은 Figma를 활용해 고객 여정을 매끄럽게 만들고, 여러 디지털 접점에서 일관된 브랜드 경험을 구축하고 있다. Nuuly는 고객용·렌탈 운영용 디자인 시스템을 분리해 복잡한 의류 대여 과정을 단순화했으며, Figma 도입으로 협업과 개발 핸드오프를 개선했다. 글은 Ruggable과 GitHub 사례를 통해서도 디자인 시스템과 부서 간 협업이 전자상거래 경험을 강화한다고 설명한다. ## 변화하는 전자상거래 경험 - 오늘날 전자상거래는 단순한 상품 판매를 넘어 다음 요소를 함께 요구한다. - 고객 신뢰 형성 - 원활한 구매·이용 여정 - 여러 디지털 채널에서의 일관된 브랜드 경험 - 직원과 운영 조직의 업무 효율 - Nuuly, Ruggable, GitHub 등의 기업은 Figma를 중심으로 디자인·마케팅·개발·운영 조직의 협업을 강화하고 있다. - 디자인 시스템과 프로토타이핑 도구를 활용해 고객 접점뿐 아니라 내부 업무용 제품까지 체계적으로 설계한다. ## Nuuly의 의류 렌탈 경험 단순화 - 2019년 시작한 Nuuly는 특별한 날뿐 아니라 일상에서도 의류를 대여하는 문화를 확산시키려 한다. - 의류 렌탈에는 고객 경험 외에도 다음과 같은 복잡한 운영 과정이 필요하다. - 순환 재고 관리 - 의류 세탁 - 수선 및 재사용 - Nuuly는 서로 다른 목적을 가진 두 개의 디자인 시스템을 구축했다. - 고객이 사용하는 렌탈 서비스용 시스템 - 재고·세탁·수선 등을 관리하는 렌탈 운영용 시스템 - 색상과 타이포그래피를 토큰화해 계절과 브랜드 변화에 맞춰 쉽게 교체할 수 있도록 설계했다. ## 복잡한 렌탈 상태를 직관적으로 표현 - Nuuly는 복잡한 물류 기술을 고객에게 직접 노출하기보다, 렌탈 과정을 최대한 단순하고 직관적으로 보여주는 데 집중했다. - `My Nuuly` 기능은 고객의 Nuuly 가방을 중심으로 현재 상태와 다음 단계를 안내한다. - 이 기능은 26개가 넘는 렌탈 상태를 고객이 이해하기 쉬운 흐름으로 연결한다. - 물리적인 의류 배송 경험과 디지털 화면을 하나의 연속적인 고객 여정으로 통합한 사례다. ## Figma를 통한 디자인 시스템 통합 - Figma 도입 전 Nuuly의 디자인 시스템은 파일 크기와 서버 동기화 제약 때문에 여러 파일로 분산되어 있었다. - 총 16개 파일을 관리해야 했고 성능도 느렸다. - 2023년 Figma로 이전하면서 시스템을 재구축해 두 개의 단순한 Figma 라이브러리로 통합했다. - 그 결과: - 디자인 작업 속도가 빨라짐 - 네이티브 프로토타이핑으로 인터랙션 의도를 개발자에게 명확히 전달 - 디자인·개발 간 핸드오프 개선 - 조직 전체의 민첩성과 협업 수준 향상 ## 여러 부서로 확장된 협업 - Figma 도입은 UX 팀에만 국한되지 않고 콘텐츠 디자인팀과 스튜디오 사진팀으로 확산됐다. - FigJam과 Figma Slides를 통해 더 넓은 조직이 다음 업무에 참여했다. - 아이디어 발상 - 고객 여정 개선안 검토 - 신규 기능 논의 - 대표적인 사례로 구독자가 대여하지 않고 바로 구매할 수 있는 최종 판매 상품을 제공하는 `The Thrift Shop`이 소개된다. - 도구 통합으로 팀은 반복적인 파일 관리보다 협업과 창의적 탐색, 고객 중심 사고에 더 많은 시간을 쓸 수 있게 됐다. ## Ruggable과 GitHub 사례 - Ruggable은 소셜 미디어 광고, 홈페이지, 상품 상세 페이지 등 여러 디지털 표면에서 일관된 경험을 구축하는 사례로 소개된다. - GitHub는 Design Business Company와 협업해 개발자를 위한 전자상거래 스토어를 설계한 사례로 언급된다. - 두 사례 모두 전자상거래가 단일 웹페이지의 문제가 아니라 마케팅·브랜드·제품 경험을 연결하는 통합적인 디자인 과제임을 보여준다. Nuuly 사례는 복잡한 내부 운영을 고객에게는 간단한 경험으로 전달하려면, 고객용 화면과 운영 시스템을 함께 설계해야 한다는 점을 보여준다. 실무적으로는 디자인 토큰과 공유 라이브러리를 도입하고, 프로토타입과 협업 도구를 디자인·개발·마케팅 전반에 활용하는 것이 일관된 브랜드 경험과 빠른 개선에 효과적이다.

원문 읽기(새 탭에서 열림)
figma원문

피그마, 라틴 아 (새 탭에서 열림)

Figma가 중남미 디자인 및 개발자 커뮤니티와의 접점을 넓히기 위해 라틴 아메리카 스페인어 현지화 버전을 공식 출시했습니다. 이번 업데이트는 단순한 번역을 넘어 문화적으로 최적화된 UI와 전용 지원 시스템을 포함하며, 전 세계 활성 사용자의 85%가 미국 외 지역에 거주하는 Figma의 글로벌 확장 전략의 일환입니다. 이를 통해 중남미 지역 기업들은 디자인 시스템을 더 효율적으로 확장하고 제품 개발 생산성을 높일 수 있게 되었습니다. ### 라틴 아메리카 시장의 성장과 현지화 배경 * **다섯 번째 현지화 언어:** 일본어, 스페인어(본토), 한국어, 브라질 포르투갈어에 이어 라틴 아메리카 스페인어가 Figma의 다섯 번째 공식 현지화 언어로 채택되었습니다. * **폭발적인 커뮤니티 성장:** 지난 한 해 동안 라틴 아메리카 지역에서만 1,000만 개 이상의 Figma 파일이 생성되었을 정도로 해당 지역의 창의적 에너지가 높습니다. * **주요 고객사 확보:** iFood, Mercado Libre, Nubank 등 중남미를 대표하는 유니콘 기업과 대형 금융기관들이 이미 Figma를 통해 디자인과 엔지니어링 워크플로우를 통합하고 있습니다. * **문화적 최적화:** 단순 텍스트 번역에 그치지 않고, 지역 사용자의 문화적 특성을 반영한 인터페이스와 전담 고객 지원을 통해 현지 기업들이 더 원활하게 제품을 설계할 수 있도록 돕습니다. ### 글로벌 플랫폼으로서의 데이터와 지표 * **압도적인 해외 사용자 비중:** 2024년 4분기 기준, Figma 월간 활성 사용자(MAU)의 약 85%가 미국 이외의 지역에 분포하고 있습니다. * **글로벌 매출 구조:** 2024년 전체 매출의 50% 이상이 미국 이외의 글로벌 시장에서 발생하며 명실상부한 글로벌 플랫폼으로 자리 잡았습니다. * **다양해진 사용자 직군:** 전체 사용자의 약 30%가 스스로를 개발자로 정의하고 있으며, 전통적인 디자이너 역할을 넘어 협업에 참여하는 비중이 전체 MAU의 2/3에 달합니다. ### 협업 환경에 주는 시사점 * **직군 간 장벽 완화:** 현지어 지원은 디자이너뿐만 아니라 제품 매니저, 개발자 등 다양한 이해관계자들이 디자인 시스템에 더 쉽게 접근하고 소통하게 만듭니다. * **글로벌 표준화 가속:** 전 세계 어디서든 동일한 수준의 현지화된 도구를 사용할 수 있게 됨에 따라, 다국적 기업 내에서의 협업 생산성이 더욱 향상될 것으로 기대됩니다. * **디자인 경쟁력 강화:** 현지 문화를 반영한 제품 제작이 쉬워지면서, 각 지역 기업들이 차별화된 사용자 경험(UX)을 신속하게 구축하고 시장에 배포할 수 있는 토대가 마련되었습니다.

figma3분 읽기큐레이션 요약

훌륭한 파트너: 에

에이전시와 프리랜서는 원격 협업과 전문 역할의 융합을 바탕으로, 클라이언트와 더 긴밀하게 공동 창작하는 방식으로 변화하고 있다. Figma 같은 협업 도구는 아이디어 공유부터 피드백, 결과물 제작까지의 경계를 허물며 보다 유연하고 투명한 작업을 가능하게 한다. 글은 여러 스튜디오의 사례를 통해 규모보다 민첩성, 일방적 전달보다 지속적인 협업이 중요해졌다고 설명한다. ## 에이전시 업무 방식의 변화 - 원격 근무로 팀이 여러 지역과 시간대에 분산되면서 실시간·비동기 커뮤니케이션의 중요성이 커졌다. - 대형 종합 에이전시 중심의 시장에서 소규모 부티크 에이전시와 프리랜서가 전문성과 민첩성을 앞세워 성장하고 있다. - 디자인 프로세스를 외부에 공개하지 않는 방식에서 벗어나, 에이전시와 클라이언트가 과정 전체를 함께 만드는 방식으로 전환되고 있다. - 에이전시 내부에서도 디자이너, 개발자, 전략가의 역할 경계가 흐려지고 있다. - Design Business Company 공동창업자 Judson Collier는 다양한 분야를 이해하는 제너럴리스트 역량이 다시 중요해졌다고 말한다. ## Figma를 활용한 공동 창작 - Figma는 디자인 시안뿐 아니라 의견 교환, 리뷰, 수정, 의사결정을 하나의 작업 공간에서 진행하게 한다. - 클라이언트에게 Figma 링크를 공유하면 클라이언트가 편한 시간에 댓글을 남기고, 에이전시가 이를 바탕으로 계속 아이디어를 발전시킬 수 있다. - 과거처럼 인쇄된 PDF를 회의실에서 일방적으로 발표하는 대신, 더 비공식적이고 빈번한 상호작용이 가능해졌다. - 클라이언트가 디자인 도구와 디자인 언어에 익숙해지면서, 에이전시와 클라이언트의 관계도 수직적 전달 구조에서 파트너십으로 바뀌고 있다. ## Human의 유연한 팀 구조 - 디지털 스튜디오 Human은 프로젝트 수요에 따라 팀 규모를 6~10명 사이에서 조정한다. - 이 구조는 프리랜서 수준의 민첩성과 대형 에이전시의 경험·안정성을 동시에 확보하려는 방식이다. - 디자이너와 개발자가 클라이언트와 긴밀하게 협업해, 조직 내부 팀과 외부 에이전시 사이에서 발생하는 단절을 줄인다. - 클라이언트가 외부 파트너를 내부 팀의 일부처럼 받아들이는 추세와도 잘 맞는다. ## Jimini Health의 브랜드 개발 - Human은 정신건강 AI 기업 Jimini Health의 새로운 시각 아이덴티티와 웹사이트를 제작했다. - 프로젝트의 스프린트 과정에서 양측은 브랜드가 어떤 가치와 감정을 표현해야 하는지 먼저 논의했다. - Jimini의 브랜딩 시스템은 인간 감정의 폭넓은 스펙트럼을 시각적으로 표현한다. - 다양한 정신건강 주제를 구분할 수 있도록 견고하고 ADA를 준수하는 색상 팔레트를 구축했다. - 사진, 소셜 미디어, 웹사이트, 앱 등 여러 접점에서 일관된 시각 정체성을 유지하도록 설계했다. - Figma Slides를 활용해 브랜드 방향성과 아이디어를 공유하고, 양 팀이 시각적 결과물을 보며 구체적인 합의를 만들어 갔다. ## 실무에 적용할 수 있는 시사점 - 클라이언트를 최종 검수자가 아니라 초기 기획부터 참여하는 공동 제작자로 설정한다. - 문서나 발표 자료를 일방적으로 전달하기보다 Figma 링크와 댓글을 활용해 지속적인 피드백 루프를 만든다. - 프로젝트별로 필요한 인력을 유연하게 구성하되, 디자인과 개발 등 핵심 역할 간 협업 구조는 긴밀하게 유지한다. - 브랜드 아이덴티티를 만들 때 색상, 사진, 앱, 웹, 소셜 미디어 등 실제 사용 환경까지 함께 설계해야 한다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Figma Sites로 웹

Figma Sites는 Figma 안에서 웹사이트를 디자인하고, 반응형 동작과 인터랙션을 적용한 뒤 바로 게시할 수 있는 올인원 도구다. 기존의 디자인·프로토타이핑·개발·배포로 이어지는 선형 작업을 하나의 반복적인 흐름으로 통합해, 개발 도구나 별도 협업 과정 없이 실제 웹사이트를 제작하도록 돕는다. 템플릿과 디자인 시스템 연동, 반응형 레이아웃, 다양한 애니메이션 기능을 통해 디자이너와 소규모 팀도 표현력 있는 사이트를 만들 수 있다. ## 디자인부터 게시까지 하나의 작업 흐름 - 기존 웹 제작은 Figma에서 디자인한 뒤 프로토타입을 만들고, 브레이크포인트를 설정하며, 디자인을 코드로 변환하고 테스트·배포하는 수작업과 도구 전환이 필요했다. - Figma Sites에서는 Figma를 떠나지 않고 디자인, 인터랙션 구현, 반응형 조정, 웹 게시를 수행할 수 있다. - 포트폴리오, 이벤트 사이트, 제품 랜딩 페이지 등 다양한 목적의 실제 동작하는 웹사이트를 제작할 수 있다. - 템플릿, 반응형 웹 요소, 사전 제작된 인터랙션을 제공해 디자인·개발 인력이 제한적인 팀도 빠르게 시작할 수 있다. - 향후 Figma Make 기반의 채팅-투-코드 기능을 통해 원하는 애니메이션이나 인터랙션을 자연어로 설명하고 생성할 수 있게 될 예정이다. ## 템플릿과 디자인 시스템 연동 - Inserts 패널을 통해 게시된 디자인 라이브러리를 사이트에 연결할 수 있다. - 팀의 컴포넌트와 스타일을 재사용해 제작 속도와 일관성을 높일 수 있다. - 별도의 디자인 시스템이 없는 경우에도 내비게이션, 히어로 섹션, 전체 페이지 같은 기본 블록을 활용할 수 있다. - 디자인 시스템을 처음부터 구축하지 않아도 검증된 구성 요소를 조합해 사이트를 만들 수 있다. ## 다양한 화면에 대응하는 반응형 디자인 - 레이아웃, 텍스트, 디자인이 화면 크기와 브레이크포인트에 맞춰 자동으로 조정된다. - Multi-edit 기능으로 여러 화면 크기의 요소를 한 번에 수정할 수 있다. - 텍스트 스타일마다 브레이크포인트별 글자 크기와 간격을 설정할 수 있으며, 별도의 변수를 사용하지 않아도 된다. - 자동 조정 기능을 기반으로 하면서도 세부 요소는 수동으로 조정해 정교하게 다듬을 수 있다. - 미리보기 창의 크기를 바꾸면서 레이아웃 재배치와 브레이크포인트 전환을 확인할 수 있다. ## 웹사이트 수준의 프로토타이핑과 검수 - 협업자에게 인터랙티브한 라이브 웹사이트 미리보기를 공유하고 피드백을 받을 수 있다. - 미리보기는 HTML과 CSS로 렌더링되므로 일반적인 Figma 프로토타입보다 실제 게시 환경에 가까운 결과를 확인할 수 있다. - 반응형 동작뿐 아니라 웹사이트에 특화된 인터랙션도 게시 전에 테스트할 수 있다. ## 기본 제공되는 애니메이션과 인터랙션 - 마우스 패럴랙스: 커서 움직임에 따라 객체를 이동시킨다. - 라이트박스: 이미지를 강조하고 배경을 어둡게 처리한다. - 스핀: 객체를 무한 회전시킨다. - 드래그 가능 요소: 페이지 안의 요소를 자유롭게 이동시킨다. - 타자기 효과: 텍스트를 한 글자씩 표시한다. - 스크램블 텍스트: 문자를 무작위로 보여준 뒤 원래 텍스트를 드러낸다. - 마키, 리빌, 스크롤 패럴랙스 같은 사전 제작 효과도 제공된다. ## Figma Sites만의 확장 기능 - Figma Design에는 아직 없는 스크롤 패럴랙스와 스크롤 변환 기능을 지원한다. - 인터랙티브 컴포넌트를 별도로 만들지 않아도 호버 상태와 눌림 상태를 구현할 수 있다. - 향후 코드 레이어를 사용해 플러그인이나 외부 도구 없이 더 복잡한 인터랙션을 추가할 수 있다. - AI 채팅을 이용해 드래그 가능한 목록이나 실제 지리 정보를 반영한 시계처럼 복잡한 동작을 설명만으로 생성할 수 있게 될 예정이다. - 생성한 코드 레이어는 Figma Design의 라이브러리처럼 재사용·공유 가능한 컴포넌트와 인스턴스로 만들 수 있다. Figma Sites는 단순히 디자인을 웹으로 내보내는 기능보다, 디자인·반응형 구현·프로토타이핑·게시를 통합한 제작 환경에 가깝다. 빠르게 랜딩 페이지나 이벤트 사이트를 제작해야 하는 팀, 개발 리소스가 적은 디자이너에게 특히 유용하며, 복잡한 서비스 기능이나 세밀한 코드 제어가 필요한 경우에는 향후 코드 레이어 기능의 성숙도를 함께 확인하는 것이 좋다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Figma Make를 소개

Figma Make는 자연어 프롬프트를 이용해 정적인 디자인을 실제로 조작 가능한 앱과 프로토타입으로 바꾸는 기능이다. 기존 Figma 프레임의 구조와 메타데이터를 유지하면서 애니메이션, 데이터, 반응형 동작 등을 빠르게 실험할 수 있으며, 디자이너와 제품팀이 코드 작성 없이 아이디어를 검증하도록 돕는다. Figma는 이를 디자인을 대체하는 도구가 아니라, 디자인 의도를 보존한 채 탐색과 구현을 가속하는 도구로 설명한다. ## 디자인에서 바로 시작하는 프롬프트 기반 제작 - 사용자는 빈 화면에서 시작할 필요 없이 Figma Design의 기존 프레임을 Figma Make로 복사할 수 있다. - 복사 과정에서 디자인의 구조와 메타데이터가 보존되어 원래 의도와 컴포넌트 계층을 유지한다. - 이후 “설정 패널을 열고 닫을 때 애니메이션을 추가해줘”처럼 자연어로 원하는 동작을 설명한다. - 현재 Figma Make는 Claude 3.7 Sonnet을 사용하며, 향후 다른 모델도 도입할 예정이다. ## 정적 디자인을 인터랙티브 프로토타입으로 전환 - 버튼, 애니메이션, 실시간 피드백 등을 추가해 정적인 화면을 실제 사용 가능한 프로토타입으로 바꿀 수 있다. - 파일 업로드나 정보 시각화처럼 동적 데이터를 사용하는 기능도 시험할 수 있다. - 모바일 앱 디자인을 데스크톱 화면으로 확장하는 등 다양한 폼팩터에 맞춘 반응형 디자인을 검증할 수 있다. - 향후 서드파티 데이터베이스와 디자인 시스템 연동도 지원할 계획이다. ## 실시간 협업과 역할 장벽 제거 - Figma 플랫폼 안에 통합되어 있어 여러 팀원이 같은 파일에서 실시간으로 탐색하고 수정할 수 있다. - 디자이너, 제품 관리자 등 기술 배경이 다른 구성원도 기능 추가, 데이터 적용, 인터랙션 모델 테스트에 참여할 수 있다. - 별도의 코딩 도구나 컨텍스트 전환 없이 하나의 작업 공간에서 아이디어 정의부터 반복 개선까지 진행한다. - 이를 통해 팀의 공통 기준점인 단일 소스 오브 트루스를 유지한다. ## 포인트 앤 프롬프트 방식의 정밀한 편집 - 특정 요소를 직접 선택한 뒤 변경 내용을 자연어로 지시할 수 있다. - 예를 들어 버튼에 애니메이션을 연결하거나, 특정 요소가 스크롤에 반응하도록 만들 수 있다. - 디자인 의도와 실제 동작 구현 사이의 간극을 줄이는 것이 목표다. - 구조화된 편집 방식은 디자인 시스템과 컴포넌트 계층을 보존해 기능을 추가하면서도 시각적 충실도를 유지한다. ## 캔버스에서 코드와 게시까지 이어지는 흐름 - Figma Make는 Figma Design 및 Figma Sites와 직접 연결된다. - 초기 아이디어를 디자인하고, 인터랙티브 프로토타입으로 검증한 뒤, 게시 가능한 사이트로 발전시키는 과정을 하나의 흐름으로 통합한다. - 별도 도구로 작업물을 다시 만들거나 맥락을 전환할 필요를 줄인다. ## 디자인 가능성의 확장 - Figma Make의 목적은 디자이너의 세밀한 반복 작업을 대체하는 것이 아니다. - 더 많은 디자인 방향을 빠르게 탐색하고, 아이디어의 실현 가능성을 조기에 검증하며, 팀에 개념을 효과적으로 전달하도록 지원한다. - 결과적으로 디자이너가 사고와 제작 사이를 빠르게 오가면서도 디자인의 완성도와 의도를 유지하도록 돕는다. 실무에서는 초기 아이디어 검증, 인터랙션 테스트, 반응형 화면 탐색처럼 반복 비용이 큰 단계에 우선 활용하는 것이 효과적이다. 다만 생성 결과를 최종 제품 코드로 바로 간주하기보다는, 팀의 디자인 시스템과 기술 요구사항에 맞춰 검토·정제하는 프로토타이핑 도구로 사용하는 것이 적절하다.

원문 읽기(새 탭에서 열림)