Figma

736 개의 포스트

www.figma.com/blog/engineering

태그로 필터

figma3분 읽기큐레이션 요약

비샬 카푸르의 AI로 정직한 제품을 만드는 10가지 규칙 | 피그마 블로그

AI 제품 개발은 속도보다 사용자 신뢰를 우선해야 하는 문제이며, 특히 금융처럼 감정과 위험이 얽힌 영역에서는 정직하고 인간적인 경험이 필수다. AI는 사람을 대체하는 기술이 아니라 탐색·프로토타이핑·반복을 가속하는 팀원으로 활용해야 한다. 이를 위해서는 인간의 직관과 비판적 사고, 고객의 실제 감정에 대한 이해를 끝까지 유지해야 한다. ## 1. 기본 원리에서 출발하라 - 복잡한 문제를 근본 요소로 분해하고, 고객의 필요와 제품의 차별화 요소를 직접 파악해야 한다. - AI는 아이디어 탐색과 반복 속도를 높일 수 있지만, 독창적인 관점과 직관을 대신할 수는 없다. - 기존 결정을 당연하게 받아들이지 말고 “왜 세 가지 결제 옵션인가?”, “한 가지나 다섯 가지는 어떤가?”, “사용자가 직접 설계할 수는 없는가?”처럼 근본적인 질문을 던져야 한다. - AI가 여러 대안을 빠르게 제시하더라도 중요한 통찰은 사람 사이의 건설적인 의견 충돌에서 나온다. ## 2. 고객의 깊은 감정에 기반하라 - 실제 고객을 관찰하고 직접 질문하는 UX 리서치와 현장 경험은 대체할 수 없다. - 소셜 미디어, 앱스토어 리뷰, 고객과의 대화를 통해 제품 사용 중 발생하는 불만과 기대를 지속적으로 파악해야 한다. - Affirm은 내부 AI 도구 ‘Pluto’를 활용해 최근 30일 동안 고객이 어떤 점에서 실망했는지 조회한다. - 대시보드와 지표는 문제의 방향을 보여주지만, 금융 서비스의 핵심 감정인 불안, 신뢰, 좌절, 안도까지 설명하지는 못한다. - 사용자가 구매하는 것은 단순한 상품이 아니라, 그 상품이 제공하는 기쁨과 안심이라는 점을 이해해야 한다. ## 3. AI를 또 하나의 팀원으로 대하라 - AI를 만능 도구나 인간을 대체할 존재로 보는 극단적인 시각을 피해야 한다. - 제품 개발은 본질적으로 협업 작업이므로, AI는 고객 인사이트를 프로토타입과 실제 제품으로 빠르게 전환하는 팀원처럼 활용할 수 있다. - 웹·모바일·데스크톱처럼 환경별로 checkout 흐름이 다른 경우, AI 도구를 사용해 다양한 실험과 검토를 수행할 수 있다. - Figma Make를 이용하면 여러 화면과 사용 사례를 한 번에 점검하고, 오래된 인터랙션 패턴이나 일관성이 깨진 부분을 조기에 찾을 수 있다. - 반복적인 검토 작업을 엔지니어에게서 디자이너와 PM에게 분산하면 개발 리소스를 절약하면서 실험과 창의성을 높일 수 있다. ## 4. 엣지 케이스를 집중적으로 실험하라 - 좋은 제품은 대표적인 성공 경로(happy path)만 매끄럽게 만드는 데서 끝나지 않는다. - 다양한 사용자 조건과 예외 상황까지 검토해야 진정성 있고 신뢰할 수 있는 경험을 만들 수 있다. - 제공된 글은 이 원칙의 도입부에서 끝나 있어, 구체적인 엣지 케이스 실험 방법과 나머지 규칙의 내용은 확인할 수 없다. AI를 제품 개발에 도입할 때는 먼저 고객 문제와 감정을 직접 이해하고, AI는 대안 탐색과 반복 작업을 가속하는 역할로 제한하는 것이 바람직하다. 특히 금융처럼 신뢰가 중요한 서비스에서는 자동화의 속도보다 인간의 판단, 설명 가능성, 예외 상황에 대한 대비가 우선되어야 한다.

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

슬롯(Slots)으로

Figma의 ‘슬롯(slots)’은 컴포넌트의 구조와 연결 상태는 유지하면서 내부 콘텐츠를 자유롭게 바꾸는 기능이다. 이를 통해 디자이너는 컴포넌트를 분리(detach)하지 않고도 다양한 콘텐츠를 구성할 수 있으며, 디자인 시스템 관리자는 과도한 variants와 유지보수 부담을 줄일 수 있다. 글은 초기 사용자들의 사례를 바탕으로 슬롯을 효과적으로 도입하는 방법을 소개한다. ## 슬롯이 해결하는 디자인 시스템의 문제 - 디자인 시스템이 커질수록 일관성을 위한 제약이 표현의 자유를 제한할 수 있다. - 디자이너들은 이를 해결하기 위해 다음과 같은 우회 방법을 사용한다. - 컴포넌트 variants를 계속 추가 - 모든 가능한 상태를 고려해 숨겨진 레이어를 미리 포함 - 컴포넌트를 detach해 개별 수정 - 그 결과 라이브러리가 비대해지고, 디자인과 실제 코드 구현 사이의 연결도 약해진다. - 슬롯은 안정적인 컴포넌트 구조 안에 콘텐츠를 동적으로 삽입한다는 점에서 코드의 컴포넌트 구성 방식과 유사하다. ## 팀별 기대 효과 - **디자인 시스템 관리자** - variants 수와 유지보수 작업 감소 - 실제 제품 구조와 더 밀접하게 연결 - **디자이너** - 시스템 밖으로 나가지 않고도 콘텐츠와 표현을 자유롭게 조정 - 컴포넌트를 detach하지 않고 맞춤 구성 가능 - **개발자** - 코드로 구현되는 구조와 유사한 예측 가능한 디자인 전달 - 핸드오프와 구현 과정 단순화 - 슬롯은 자동화와 AI가 디자인 구조를 해석하는 데에도 유리한 형태를 제공한다. - Figma는 Schema 2025에서 슬롯을 공개했으며, 글 작성 시점에는 오픈 베타로 제공하고 있다. ## 1. 사용 빈도가 높은 컴포넌트부터 시작하기 - 슬롯 도입 효과가 가장 큰 대상은 이미 많은 사용자가 detach하고 있는 컴포넌트다. - 초기 사용자들이 우선 적용한 대표 컴포넌트는 다음과 같다. - 대화상자(dialog) - 메뉴와 드롭다운 - 모달 - 카드 - 패널 - 특히 다음 조건을 만족하는 컴포넌트를 우선순위로 삼는 것이 좋다. - 여러 화면에서 반복적으로 사용됨 - 시스템 안에서 중복되어 있음 - variants가 지나치게 많음 - 다양한 유형의 콘텐츠를 수용해야 함 ### 반복 요소가 있는 컴포넌트 - 메뉴와 리스트는 가능한 항목 수를 처리하기 위해 숨겨진 레이어를 다수 포함하는 경우가 많다. - 예를 들어 기본 리스트에 3개 항목을 표시하면서 7개 항목을 숨겨둘 수 있지만, 11번째 항목이 필요하면 결국 컴포넌트를 detach하게 된다. - 슬롯을 사용하면 필요한 항목만 추가할 수 있다. - 기본 컴포넌트가 불필요하게 커지지 않음 - 콘텐츠가 늘어나도 원래 컴포넌트와의 연결 유지 - 모든 가능한 항목 수를 variants로 미리 만들 필요 없음 ### variants가 급증하는 컴포넌트 - 모달과 카드는 제목, 설명, 미디어, 버튼 조합에 따라 수많은 variants가 생기기 쉽다. - 슬롯을 사용하면 구조는 그대로 유지하면서 필요한 콘텐츠만 교체하거나 삽입할 수 있다. - 따라서 구조는 일정하지만 콘텐츠가 자주 달라지는 컴포넌트에 특히 효과적이다. ## 2. 미리 채운 슬롯과 빈 슬롯을 목적에 맞게 사용하기 - 슬롯을 만들 때 기본 콘텐츠를 넣을지 비워둘지 결정해야 한다. - **미리 채운 슬롯** - 컴포넌트가 어떻게 사용되는지 보여주는 맥락을 제공한다. - 대부분의 사용자가 수정하지 않아도 되는 기본 상태를 표현할 수 있다. - 예를 들어 카드 오른쪽 위에 항상 아이콘이 있다면 매번 아이콘을 삽입하게 만들 필요가 없다. - **빈 슬롯** - 디자이너가 반드시 콘텐츠를 추가해야 한다는 점을 명확히 전달한다. - 사용자의 다음 행동을 유도하는 자리 표시자 역할을 한다. - 기존에 인스턴스 교체(instance swap)로 흉내 내던 패턴을 더 직접적으로 표현할 수 있다. - 기본 콘텐츠가 예측 가능한 경우에는 미리 채운 슬롯을, 콘텐츠 입력이 필수인 경우에는 빈 슬롯을 사용하는 것이 적절하다. ## 도입 시 고려할 기준 - 모든 컴포넌트에 한꺼번에 슬롯을 적용하기보다, 실제 우회 사용이 많이 발생하는 소수의 고빈도 컴포넌트부터 시작한다. - 구조는 유지되지만 콘텐츠가 자주 바뀌는 영역을 우선 찾는다. - 슬롯의 기본 콘텐츠가 사용자에게 충분한 맥락을 주는지, 혹은 빈 상태가 명확한 행동을 유도하는지 검토한다. - 이를 통해 디자인 시스템의 통제력은 유지하면서도 실제 제품에 필요한 유연성을 확보할 수 있다.

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

Figma Make로 팀이

제품 관리자는 PRD나 정적인 목업만으로 아이디어를 설명하는 대신, Figma Make로 실제 동작을 보여주는 인터랙티브 프로토타입을 빠르게 만들 수 있다. 이를 통해 복잡한 요구사항을 구체화하고, 디자이너·엔지니어·사용자의 피드백을 일찍 받아 더 빠르게 합의와 확신을 형성한다. ServiceNow 사례는 추상적인 설명보다 직접 보고 조작할 수 있는 프로토타입이 제품 방향을 설득하는 데 효과적임을 보여준다. ## 프로토타입 중심의 제품 의사결정 - PM은 고객 인사이트, 디자인 의도, 엔지니어링 제약을 연결하는 역할을 한다. - Figma Make를 활용하면 정적인 목업보다 제품의 외관과 동작을 함께 표현할 수 있다. - 초기 단계에서 인터랙티브 프로토타입을 만들면 다음과 같은 효과가 있다. - 디자이너와 엔지니어의 조기 피드백 수집 - 사용자 테스트를 통한 가정 검증 - 개발이 깊이 진행되기 전 문제 수정 - 팀이 추상적인 아이디어 대신 구체적인 결과물을 보고 논의 - 따라서 프로토타입은 단순한 디자인 산출물을 넘어, PRD를 보완하거나 대체하는 커뮤니케이션 수단이 된다. ## 복잡한 제품 사고를 공동의 이해로 전환 ServiceNow의 제품 디렉터 Ram Devanathan은 여러 제품 조직을 지원하는 디자인팀과 협업하면서 복잡한 설정 화면을 개선해야 했다. - 해당 화면에는 약 15~20개의 설정이 포함되어 있었다. - 단순한 토글 - 기술적 이해가 필요한 고급 옵션 - 장애 발생 및 우선순위 처리 방식에 영향을 주는 설정 - 시스템 부하를 바꿀 수 있는 구성 항목 - 기존 목업은 기능적으로는 동작했지만, Ram이 의도한 다음 요소를 충분히 전달하지 못했다. - 설정의 우선순위와 계층 구조 - 각 옵션에 대한 맥락적 안내 - 사용자가 느껴야 할 전반적인 경험의 톤 - 공유 디자인 리소스를 사용하는 조직에서는 디자이너의 초기 참여가 제한될 수 있다. - Figma Make의 템플릿은 디자인 시스템과 UX 패턴을 미리 포함할 수 있어, PM이 일관된 기준으로 초기 시안을 직접 발전시키는 데 도움을 준다. ## Figma Make로 설정 화면의 의도 구체화 Ram은 디자이너의 초기 목업을 Figma Make로 가져온 뒤, 설정 구조에 대한 구체적인 지침을 추가했다. - Make가 생성한 개선안은 다음과 같은 변화를 포함했다. - 관련 설정을 논리적으로 그룹화 - 단순한 설정을 화면 상단에 배치 - 개별 옵션을 설명하는 툴팁 추가 - 변경 후 서비스를 재시작해야 한다는 안내문 표시 - 그 결과 사용자는 복잡한 기술 설정을 더 명확한 순서와 구조로 탐색할 수 있게 됐다. - 프로토타입은 Ram과 디자이너가 UX 방향을 빠르게 맞추는 공통 기준이 됐다. - Ram은 말로 추상적인 의도를 설명하는 대신, “무엇을 의미하는지 직접 보여줄 수 있었다”고 평가했다. - 즉 Figma Make는 다음의 시간을 줄이는 역할을 한다. - 아이디어 설명 - 디자인 방향 조율 - 관계자 설득 - 초기 의사결정 사이클 ## 개발 전 기능 검증 제공된 글은 Ticketmaster 사례의 도입부에서 끝나 있어, 구체적인 검증 방식과 결과는 확인할 수 없다. 다만 제목과 도입 내용상 Figma Make를 이용해 실제 개발에 들어가기 전에 새로운 기능을 프로토타이핑하고, 사용자 및 내부 팀의 반응을 확인하는 사례로 이어지는 구성이다. 실무적으로는 복잡하거나 합의가 어려운 요구사항일수록 설명만 반복하기보다 Figma Make로 빠르게 작동하는 형태를 만들어 공유하는 것이 효과적이다. 단, 제공된 본문이 중간에 생략되어 있어 나머지 두 가지 활용 방식에 대한 상세 요약은 포함하지 않았다.

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

Config 2026 연사

AI 시대의 창의성은 인간을 대체하는 것이 아니라, 인간의 역할을 오케스트레이터·참여자·판단자로 확장하는 방향으로 발전한다. Config 2026 연사들은 AI를 예술과 제조를 연결하는 매체로 보고, 창작 과정의 품질과 의도, 그리고 인간의 감각과 책임을 더욱 중요하게 강조한다. 결론적으로 AI의 기회는 속도 자체보다 새로운 협업 방식과 실험적 제작 환경을 만드는 데 있다. ## AI 시대의 창작자 역할 변화 - Holly Herndon은 소프트웨어를 현대의 중요한 예술 매체로 바라본다. - AI를 활용하면 과거보다 복잡한 소프트웨어·예술 프로젝트를 만들 수 있으며, 창작자는 직접 모든 작업을 수행하기보다 전체 과정을 조율하는 “오케스트레이터”가 된다. - 이는 AI가 창작자를 대체한다기보다, 창작자가 다룰 수 있는 규모와 복잡성을 확장한다는 관점이다. ## 인간이 참여하는 AI 모델 - Herndon과 Mat Dryhurst의 프로젝트 **Starmirror**는 전시 관람객과 지역 합창단의 목소리를 수집해 새로운 AI 합창단을 학습시키는 작업이다. - 사람들은 단순히 AI 모델의 입력 데이터를 제공하는 데 그치지 않고, 생성된 결과물을 직접 경험하고 변형한다. - AI 모델을 기업이나 소수 전문가만의 도구가 아니라, 대중이 함께 만들고 실험하는 공동 창작물로 바라본다. - 따라서 AI 창작에서 중요한 요소는 모델의 성능뿐 아니라 데이터의 출처, 참여 방식, 결과물에 대한 인간의 개입이다. ## AI와 물리적 제작의 결합 - 3D 프린팅 패션을 개척한 Danit Peleg은 AI가 화면 속 디자인을 넘어 제조, 건축, 패션 등 현실 세계의 생산을 직접 움직일 것이라고 전망한다. - 그녀의 스튜디오는 AI 에이전트를 아이디어 구상부터 제작·가공까지의 전체 파이프라인에 참여시킨다. - AI와 Figma Weave 같은 도구를 활용하면 이미지·영상·애니메이션·모션 디자인·VFX 생성과 편집을 하나의 열린 캔버스에서 연결할 수 있다. - 디지털 창작과 실제 제조의 경계가 낮아지면서, 주문형 생산과 폐기물 감소 같은 새로운 제작 방식도 가능해진다. ## 창의성은 독창성보다 관심과 돌봄에 가깝다 - 디자이너이자 저자인 Vicki Tan은 창작과 의사결정이 모두 불확실한 상태에서 질문을 따라가며 전진하는 과정이라고 설명한다. - 창의성은 완전히 새로운 것을 만들어내는 능력만이 아니라, 이미 자신에게 의미 있게 느껴지는 요소를 세심하게 관찰하는 태도다. - 그녀는 창의성을 “독창성이나 재능”보다 “care 또는 attention”, 즉 관심과 돌봄에 가까운 것으로 본다. - 자신의 취향, 전문성, 본능을 신뢰하면서 의미가 드러날 때까지 아이디어를 발전시키는 과정이 중요하다. ## 속도보다 과정과 의도에 대한 재검토 - AI는 제작 속도와 생산량을 크게 높이지만, 빠르게 많은 결과물을 만드는 것만으로는 좋은 창작이 보장되지 않는다. - 연사들은 AI 시대에 오히려 다음 요소가 중요해진다고 본다. - 무엇을 만들 것인지에 대한 명확한 의도 - 결과물을 선택하고 다듬는 인간의 판단 - 데이터와 제작 과정에 대한 책임 - 새로운 도구를 실험하되 창작자의 고유한 감각을 유지하는 태도 - AI는 기존 작업 방식을 자동화하는 도구를 넘어, 창작 프로세스 자체를 다시 설계하게 만드는 계기가 된다. AI를 도입할 때는 단순히 생산성 향상만 목표로 삼기보다, 사람이 어디에 참여하고 어떤 결정을 내릴지 먼저 설계하는 것이 좋다. 생성 속도보다 의도·품질·참여 구조를 중시할 때 AI는 창작자의 역량과 영향력을 실질적으로 확장할 수 있다.

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

워크플로우 랩: Figma의

Trivet 팀은 추천 프로그램의 클릭과 가입을 늘리기 위해 기존 배너를 모달, 인피드 카드, 전체 화면 오버레이로 확장해 비교한다. 각 방향은 노출 강도뿐 아니라 이미지 처리와 시각적 톤을 다르게 설계하며, Figma의 AI 이미지 편집과 벡터화 기능을 활용해 빠르게 실험한다. 핵심 결론은 레이아웃을 만드는 데 그치지 않고, 사용자의 관심을 얼마나 끌면서도 경험을 방해하지 않을지 시각적 긴장감과 전환율을 함께 검증해야 한다는 것이다. ## 문제 정의: 더 많은 관심과 덜한 방해 사이 - Trivet의 추천 프로그램 배너는 기대만큼 클릭과 가입을 유도하지 못했다. - 팀은 배너가 너무 눈에 띄지 않는지, 반대로 팝업이 사용자 흐름을 지나치게 방해하는지 검토한다. - 세 가지 UX 방향을 비교한다. - **모달**: 사용자의 흐름을 잠시 중단시키는 방식 - **인피드 카드**: 피드 안에 자연스럽게 통합되는 방식 - **전체 화면 오버레이**: 가장 높은 가시성을 제공하는 방식 - 목표는 관심도를 높이되 사용자 경험을 훼손하지 않는 것이다. ## 방향 1: 유리 효과로 호기심 유발 - Trivet 디자인 시스템의 레시피 행 컴포넌트를 기반으로 몰입감 있는 모달을 구성한다. - “독점 레시피 잠금 해제”라는 문구에 맞춰, 레시피 이미지를 완전히 보여주지 않고 살짝 흐리게 처리한다. - Figma의 다음 효과를 사용한다. - **Glass 효과**: 반투명하고 서리 낀 표면 표현 - **Refraction**: 깊이감과 굴절감 추가 - **Progressive blur**: 가장자리를 부드럽게 흐림 처리 - 사용자가 보상을 바로 얻을 수는 없지만 눈앞에 있다는 느낌을 주어, 모달을 띄우는 불편함을 시각적 보상으로 상쇄한다. ## 방향 2: 인피드 카드에 개성 추가 - 사용자의 흐름을 끊지 않도록 추천 프로그램을 피드 내부 카드로 배치한다. - 제한된 공간에 맞춰 사진보다 가볍고 유연한 손그림 일러스트를 사용한다. - **Remove background**로 불필요한 배경을 제거한 뒤, **Vectorize**로 래스터 이미지를 편집 가능한 벡터로 변환한다. - 벡터화한 케이크 스케치를 다음과 같이 다듬는다. - Fill 패널의 변수 검색으로 브랜드 색상을 적용 - **Cut tool**로 경계를 정리하면서 기존 패스를 유지 - **Bounding box**를 활용해 앵커 포인트를 회전하고 세부 형태를 조정 - 결과적으로 손그림의 질감은 유지하면서도 색상과 크기를 자유롭게 조절할 수 있는 재사용 가능한 브랜드 자산을 만든다. ## 방향 3: 전체 화면 오버레이로 우선순위 강조 - 전체 화면 오버레이는 사용자 경험을 명확하게 중단시키며 추천 프로그램의 중요도를 강하게 전달한다. - 넓은 화면을 채우려면 사진 자체가 충분히 강한 시각적 존재감을 가져야 한다. - 선택한 사진은 품질은 좋았지만 레이아웃 비율이 맞지 않았고, 숟가락이 음식보다 눈에 띄는 문제가 있었다. - 대체 이미지를 찾거나 레이아웃을 억지로 조정하는 대신, Figma의 정밀 이미지 편집 기능으로 이미지를 디자인에 맞게 수정한다. - **Erase object**로 시선을 분산시키는 요소 제거 - **Expand image**로 필요한 비율과 구도에 맞게 이미지 확장 - 이 방식은 이미지 소스를 다시 찾는 시간을 줄이고, 디자인 의도에 맞춰 기존 자산을 즉시 변형할 수 있게 한다. ## 도구와 팀을 연결하는 워크플로 - 이 워크플로는 Figma Design, Figma Make, FigJam을 함께 사용한다. - 디자이너, 콘텐츠 디자이너, 제품 관리자, 성장 분석가, 엔지니어가 같은 문제를 중심으로 협업한다. - 이미지 편집, 벡터화, 변수 적용, 프로토타이핑을 별도 도구로 분리하지 않고 하나의 흐름에서 연결한다. - 아이디어를 시각화한 뒤 인터랙티브 프로토타입으로 검토하고, 팀 피드백과 실험 결과를 바탕으로 빠르게 완성하는 접근을 보여준다. 추천 프로그램처럼 전환율이 중요한 UI에서는 하나의 시안을 정답으로 가정하기보다, 노출 강도가 다른 여러 방향을 동시에 설계하는 것이 효과적이다. 특히 Figma의 이미지 편집·벡터화 기능을 활용하면 기존 자산을 재사용하면서도 모달, 카드, 오버레이에 맞는 시각적 변형을 빠르게 검증할 수 있다.

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

Codex와 Figma로 프론트

Codex와 Figma MCP 서버를 연결하면 디자인과 실행 중인 프론트엔드 UI를 양방향으로 오갈 수 있다. Figma의 디자인 정보를 Codex에 전달해 코드를 생성하고, 구현된 UI를 다시 편집 가능한 Figma 프레임으로 가져와 검토·협업·개선한 뒤 변경 사항을 코드에 반영하는 방식이다. 이를 통해 초기 디자인이나 코드에 고정되지 않고, 탐색과 구현을 반복하며 더 나은 제품을 만들 수 있다. ## Figma 디자인에서 앱 시작하기 - Figma MCP 서버는 **Figma Design, Figma Make, FigJam** 파일의 정보를 Codex에 전달한다. - 구현할 Figma 파일에서 원하는 프레임이나 노드를 우클릭한 뒤 **“Copy as → Copy link to selection”**을 선택한다. - 복사한 선택 URL은 단일 요소, 컴포넌트 묶음 등 특정 캔버스 영역을 가리키며, 에이전트가 코드 생성에 사용할 원본 데이터가 된다. - Codex에서 새 프로젝트나 기존 프로젝트를 선택하고 다음과 같은 방식으로 요청한다. - “이 Figma 디자인을 코드로 구현하고, 기존 디자인 시스템 컴포넌트를 최대한 활용해줘.” - Codex는 Figma MCP 서버의 `get_design_context` 도구를 호출해 다음 정보를 추출한다. - 레이아웃 구조 - 스타일 - 컴포넌트 정보 - 기타 디자인 관련 컨텍스트 - 이 정보를 바탕으로 Codex가 디자인에 맞는 UI 코드를 생성한다. ## 코드에서 Figma 캔버스로 가져오기 - 코드에서 UI를 구현하고 반복 수정한 뒤, 실행 중인 화면을 Figma로 가져와 시각적으로 비교하고 대안을 탐색할 수 있다. - 앱은 로컬 환경이나 공개 웹 서버에서 렌더링할 수 있다. - Codex에 새 Figma Design 파일을 생성하도록 요청하면 다음 과정을 안내한다. 1. 새 파일 또는 기존 파일 선택 2. 파일을 저장할 워크스페이스 선택 3. UI 캡처를 위한 애플리케이션 설정 4. 브라우저에서 앱 세션 열기 - Figma MCP 서버의 `generate_figma_design` 도구는 실행 중인 인터페이스를 편집 가능한 Figma 프레임으로 변환한다. ## UI 캡처 기능 앱이 다시 로드되면 화면 상단에 캡처 도구 모음이 표시된다. - **Entire screen**: 현재 표시된 전체 화면을 Figma 파일로 캡처 - **Select element**: 페이지에서 특정 컴포넌트나 요소만 선택해 캡처 - **Open file**: 생성된 디자인 레이어를 Figma에서 확인 캡처가 끝나면 Figma 파일을 바로 열거나 Codex로 돌아갈 수 있으며, Codex에는 해당 Figma 파일 URL이 전달된다. ## 캔버스에서 UI 개선하기 Figma로 가져온 실행 UI는 단순 이미지가 아니라 추가 편집과 협업이 가능한 디자인 자료로 활용된다. - 디자인 시스템 컴포넌트 추가 - 스타일, 글꼴, 색상을 변수로 전환 - 레이아웃 조정 및 주석 작성 - 인터랙션과 빈 상태 화면 설계 - 여러 UI 변형안과 탐색안 비교 - 팀원과 캔버스에서 공동 검토 수정이 끝나면 처음과 동일하게 프레임 또는 노드의 선택 URL을 복사해 Codex에 전달하고, Figma MCP 서버를 통해 변경된 디자인을 애플리케이션 코드에 반영할 수 있다. ## 디자인과 코드의 왕복 workflow - 디자인에서 시작해 Codex로 구현한다. - 실행 중인 UI를 Figma로 가져와 실제 결과를 검토한다. - Figma 캔버스에서 스타일, 컴포넌트, 레이아웃, 상태를 개선한다. - 변경된 디자인 컨텍스트를 다시 Codex로 보내 코드에 반영한다. - 이 과정을 반복하면서 속도를 유지한 채 프로토타입부터 실제 서비스 UI까지 발전시킬 수 있다. 실무에서는 먼저 Figma에 디자인 시스템과 핵심 화면을 정리한 뒤 Codex에 전달하고, 생성된 UI를 `generate_figma_design`으로 다시 캔버스에 가져와 시각적 차이를 검토하는 방식을 추천한다. 이를 통해 코드 구현과 디자인 의사결정을 분리하지 않고 하나의 반복 가능한 작업 흐름으로 통합할 수 있다.

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

데이터 사이언티스트로서 영향력을

데이터 과학의 영향력은 A/B 테스트나 최적화에만 있지 않으며, 복잡한 시스템을 이해하기 쉽게 만들고 정확성과 운영 안정성을 높이는 데에도 있다. 특히 빌링처럼 여러 시스템과 상태 변화가 얽힌 영역에서는 데이터 과학자가 도메인 지식, 데이터 모델링, 검증 도구, 엔지니어링 협업을 함께 수행해야 한다. 글은 데이터 과학을 ‘풀스택’ 분야로 보고, 과거와 현재의 시스템 동작을 설명하며, 기술적 방향과 품질 기준까지 정의해야 한다고 주장한다. ## 데이터 과학은 풀스택 분야다 - 데이터 과학자의 역할은 팀에 따라 실험 설계, 제품 분석, 데이터 모델링, 계측, 시스템 검증 등 크게 달라진다. - Figma는 한 프로젝트 안에서도 여러 역할을 수행할 수 있는 풀스택 데이터 과학자를 지향한다. - 빌링은 사용자에게 직접 보이는 제품이면서 동시에 복잡한 백엔드 시스템이므로, 단순한 기회 분석이나 실험만으로는 충분하지 않다. - 정확한 청구는 고객 경험과 플랫폼에 대한 신뢰에 직접 영향을 미친다. - 따라서 데이터 과학자는 다음과 같은 업무를 수행한다. - 빌링 도메인과 업무 규칙 이해 - 여러 팀과의 협업 - 시스템 동작을 설명하고 검증하는 도구 개발 - 데이터 품질과 계측 개선 - 정해진 데이터 과학 플레이북을 적용하기보다, 파트너 팀과 함께 실제로 필요한 지원 방식을 정의하는 것이 중요하다. ## 차트와 모델 외에도 시스템을 설명하는 방법이 있다 - 예측이나 추론 모델이 항상 가장 영향력 있는 데이터 과학 작업은 아니다. - 복잡한 시스템에서는 현재 또는 과거의 결과가 왜 발생했는지 설명하는 일이 더 중요할 수 있다. - Figma의 좌석 기반 빌링에서는 다음 요소가 여러 시스템에 걸쳐 상호작용한다. - 좌석 할당 및 제거 - 권한 변경 - 계약 조건 - 업그레이드 경로 - 워크스페이스 상태 - 특정 시점에 발생한 상태 전환 - 인보이스의 단순한 한 줄 청구 항목도 실제로는 여러 제품 이벤트와 빌링 규칙의 결과다. - 이를 해결하기 위해 **Invoice Seat Report**라는 데이터 애플리케이션을 구축했다. - 제품 사용 이벤트, 계약 메타데이터, 빌링 규칙, 과거 상태 전환을 통합한다. - 각 좌석 요금이 왜 발생했는지 평이한 언어로 설명한다. - 고객 지원, 주문 관리, 엔터프라이즈 담당자가 고객에게 청구 내역을 설명할 수 있게 한다. - 엔지니어가 예상치 못한 청구 동작을 디버깅할 때도 활용된다. ## 신뢰할 수 있는 설명에는 데이터 기반이 필요하다 - 보고서를 만드는 일은 단순히 여러 테이블을 조회하는 작업이 아니었다. - 좌석 상태가 시스템마다 어떻게 변화하는지에 대한 공통된 정신 모델을 먼저 만들어야 했다. - 이를 위해 다음 작업이 필요했다. - 엔지니어와 데이터 흐름 및 업무 규칙 검증 - 과거 데이터의 불일치 정리 - 누락된 이벤트에 대한 새로운 계측 요청 - “무슨 일이 일어났는가”뿐 아니라 “왜 일어났는가”를 기록하도록 로그 개선 - 기존 로그는 결과만 남기고 원인을 기록하지 않는 경우가 있어, 미래의 분석 가능성을 높이기 위한 시스템 변경도 함께 진행했다. - 특히 레거시 다년 계약처럼 좌석 이력이 드문 경우나, 초기 업그레이드로 데이터에 공백이 생기는 경우를 별도로 처리해야 했다. - 빌링 규칙을 SQL과 데이터 변환 로직으로 옮길 때는 각 규칙을 추적하고 디버깅할 수 있도록 구현해야 했다. ## 데이터 과학자는 기술적 방향도 정의할 수 있다 - 비즈니스 규칙을 측정 가능한 검증 조건으로 바꾸면 데이터 과학은 제품 분석을 넘어 시스템 품질 관리에 기여할 수 있다. - 이런 검증은 다음 목적에 활용된다. - 무엇이 “정상”인지 정의 - 데이터 및 시스템 동작의 드리프트 감시 - 회귀 버그 조기 탐지 - 미묘한 이상 상태 발견 - 개발 환경과 운영 환경에서 결과 검증 - 빌링처럼 상태가 누적되는 시스템에서는 좌석 할당, 상태 전환, 인보이스 계산이 모두 의도한 규칙과 일치해야 한다. - 작은 계산 오류도 고객의 청구 금액과 서비스 신뢰도에 영향을 줄 수 있다. - Figma가 가격·상품 구성·빌링 로직을 대규모로 재설계했을 때도 데이터 과학은 다음을 검증하는 역할을 맡았다. - 새 로직이 의도대로 작동하는지 - 데이터가 파이프라인을 통해 정확히 흐르는지 - 예상하지 못한 빌링 상태가 발생하지 않는지 - 개발과 운영 환경 모두에서 결과가 일관적인지 복잡하고 중요한 시스템에서 데이터 과학자는 분석 결과를 제공하는 사람을 넘어, 시스템을 설명 가능하게 만들고 정확성을 검증하는 기술 파트너가 되어야 한다. 따라서 실험 중심의 역할에만 한정하지 말고, 도메인 모델링·데이터 품질·계측·자동 검증까지 업무 범위를 확장하는 것이 실용적인 접근이다.

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

디자인의 미래는 코드와

AI 시대의 디자인은 코드와 캔버스 중 하나를 선택하는 것이 아니라, 두 방식을 오가며 가능성을 탐색하는 방향으로 발전한다. Figma는 Claude Code와의 MCP 연동을 통해 코드로 만든 결과물을 편집 가능한 Figma 레이어로 변환하고, 디자인 수정 사항을 다시 코드에 반영하는 워크플로를 제시한다. 이를 통해 개발 과정에서 첫 번째 결과물에 매몰되지 않고 여러 대안을 시각적으로 비교·검토할 수 있다는 것이 글의 결론이다. ## 코드와 캔버스의 결합 - 제품을 만드는 방식은 코드, 프롬프트, 시각적 UI, 손그림 등 어디에서든 시작할 수 있다. - 중요한 것은 특정 도구를 고집하는 것이 아니라, 아이디어를 발전시키는 데 적합한 도구를 선택하는 것이다. - 코드는 빠르게 실행 가능한 결과물을 만들고, 캔버스는 다양한 가능성을 시각적으로 탐색하고 비교하는 데 강점이 있다. - 따라서 디자인과 개발은 경쟁 관계가 아니라 서로의 장점을 보완하는 관계가 된다. ## Claude Code와 Figma MCP 연동 - Figma MCP를 설치하면 Claude Code에서 “Send this to Figma”와 같은 명령으로 작업물을 Figma로 보낼 수 있다. - 브라우저에 렌더링된 현재 상태를 분석해 Figma의 편집 가능한 레이어로 자동 변환한다. - 코드로 구현된 화면을 단순 이미지로 가져오는 것이 아니라, Figma 안에서 요소를 개별적으로 수정할 수 있다. - Figma에서 다듬은 디자인 변경 사항은 다시 MCP를 통해 코드베이스에 반영할 수 있다. - Claude Code는 Figma MCP와 연결되는 여러 에이전트 도구 중 하나로 소개된다. ## 캔버스가 제공하는 탐색 능력 - IDE나 프롬프트 환경에서는 하나의 구현 방향을 빠르게 밀어붙이기 쉽다. - Figma 캔버스에서는 여러 디자인 시안을 나란히 배치해 차이점을 비교할 수 있다. - 전체 화면의 구조와 사용자 경험을 한눈에 파악하면서 세부 요소는 직접 조작해 수정할 수 있다. - AI가 표현 가능한 수많은 결과물을 만들어낼수록, 최종적으로 좋은 방향을 선택하는 디자인 감각과 관점이 더 중요해진다. ## 선형적 개발 프로세스의 변화 - 과거에는 일반적으로 아이디어 구상 → 디자인 → 코딩 순서로 작업이 진행됐다. - 이제는 터미널에서 구현을 시작한 뒤 디자인 도구로 이동하거나, Figma에서 시작해 코드로 넘어가는 등 순서가 고정되지 않는다. - 작업은 “어디서 시작하느냐”보다 “지금 올바른 방향으로 만들고 있는가”를 지속적으로 점검하는 것이 중요하다. - 첫 번째 구현물이 관성 때문에 최종 버전으로 굳어지는 ‘터널 비전’을 피해야 한다. ## 실용적인 적용 방향 - AI로 빠르게 만든 초기 구현물을 Figma로 가져와 여러 변형안을 비교한다. - 캔버스에서 레이아웃, 시각적 계층, 인터랙션 방향을 검토한 뒤 세부 디자인을 다듬는다. - 확정된 디자인 변경 사항을 MCP를 통해 코드에 다시 반영한다. - 코드와 디자인을 순차적으로 분리하기보다, 탐색 단계에서는 반복적으로 양쪽을 오가며 검증하는 것이 효과적이다.

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

Claude Code에서 Figma로: 프로덕

Claude Code에서 실행 중인 UI를 Figma로 가져와 편집 가능한 프레임으로 변환할 수 있게 되었다. 이를 통해 코드의 빠른 프로토타이핑과 Figma 캔버스의 협업·탐색 기능을 연결하고, 개발자·디자이너·PM이 동일한 결과물을 바탕으로 더 이른 시점에 의견을 나눌 수 있다. 핵심은 코드를 최종 결과로 고정하지 않고, Figma에서 여러 방향을 비교·발전시키는 것이다. ## 코드에서 캔버스로 확장하는 이유 - Claude Code를 사용하면 실제 데이터와 상호작용을 포함한 UI를 빠르게 구축하고 테스트할 수 있다. - 코드 기반 작업은 한 번에 하나의 상태를 구현하고 확인하는 데 강하다. - 반면 Figma 캔버스는 전체 흐름과 여러 대안을 한눈에 배치하고, 팀과 함께 논의하는 데 유리하다. - 따라서 코드는 아이디어를 빠르게 수렴시키고, 캔버스는 아이디어를 다시 확장하고 탐색하는 공간이 된다. ## 브라우저 화면을 편집 가능한 Figma 프레임으로 변환 - 프로덕션, 스테이징, 로컬호스트에서 실행 중인 UI를 캡처할 수 있다. - 캡처한 화면은 클립보드로 복사하거나 Figma 파일로 전송할 수 있다. - Figma에 붙여넣은 결과는 단순한 이미지가 아니라 정리·복제·수정 가능한 프레임으로 변환된다. - 여러 화면을 한 세션에서 캡처하면 화면 간 순서와 흐름도 함께 보존할 수 있다. ## 혼자 만드는 프로토타입에서 팀 협업으로 - 코드 우선 작업은 초기에는 빠르지만, 화면과 상태가 늘어나면 한 사람이 브랜치·개발 서버·전체 맥락을 모두 관리해야 한다. - 기존에는 피드백을 받기 위해 스크린샷이나 녹화 영상을 공유하거나, 다른 사람이 직접 로컬에서 빌드를 실행해야 했다. - Figma로 가져오면 팀원들이 같은 캔버스에서 직접 주석을 달고, 불명확한 부분을 표시하며, 개선 방향을 제안할 수 있다. - 다른 사람이 코드 환경으로 전환하거나 여러 파일을 수정하지 않아도 대안을 논의할 수 있다. ## 첫 번째 아이디어가 아닌 최선의 아이디어 찾기 - AI로 작동하는 프로토타입을 빠르게 만들 수 있게 되면서, 논의의 초점은 “어떻게 만들까”에서 “어떤 버전을 발전시킬까”로 이동했다. - Figma Make의 결과물을 캔버스로 가져오는 방식과 마찬가지로, Claude Code의 구현 결과도 편집 가능한 디자인 산출물로 전환된다. - 출발점이 Figma Make인지 Claude Code인지와 관계없이, 구체적인 결과물을 먼저 만든 뒤 반복적으로 발전시키는 것이 목표다. ## Figma에서 가능한 네 가지 탐색 - **전체 시스템을 시각적으로 확인** - 여러 화면과 단계별 흐름을 나란히 배치할 수 있다. - 반복되는 패턴, 누락된 단계, 디자인 불일치, 트레이드오프를 쉽게 발견할 수 있다. - **코드를 다시 작성하지 않고 변형 실험** - 프레임을 복제하고 순서를 재배치하며 구조적 대안을 비교할 수 있다. - 단순한 아이디어 검증을 위해 코드를 다시 구현할 필요가 없다. - 폐기한 대안도 남겨둘 수 있어 이후 재검토가 가능하다. - **더 이른 시점에 의사결정** - 디자이너, 엔지니어, PM이 동일한 맥락과 완성도의 결과물을 함께 검토한다. - 정답이 명확하지 않은 문제도 초기에 질문과 쟁점을 드러낼 수 있다. - 변경 비용이 낮을 때 방향을 조정할 수 있다. - **구현된 UI를 팀의 방향성으로 전환** - 실제로 작동하는 UI를 개인의 코드 환경에만 머무는 결과물이 아니라 공유 가능한 디자인 자산으로 만든다. - 팀은 구현 결과를 기준으로 제품의 사용감, 사용자 안내 방식, 가치 전달 방법을 함께 논의할 수 있다. ## 실용적인 결론 Claude Code는 빠른 구현과 실제 동작 검증에 사용하고, 방향을 비교하거나 팀의 피드백을 모을 때는 결과물을 Figma로 가져오는 방식이 효과적이다. 특히 여러 화면으로 구성된 사용자 흐름이나 대안 비교가 필요한 작업에서는 코드와 캔버스를 오가는 과정이 초기 의사결정과 협업을 크게 단순화할 수 있다.

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

디자이너의 현주소 2026: 디자이너들은 복잡한 중간 지대에 뛰어들고 있다 | Figma 블로그

디자인 업계는 AI로 인해 빠르게 변하고 있지만, 디자이너들은 불확실성을 피하기보다 AI를 실무에 통합하며 새로운 기회로 전환하고 있다. 조사에 따르면 AI는 작업 속도와 협업뿐 아니라 디자인 품질도 높이며, 인간 고유의 세심한 완성도와 창의적 판단인 ‘크래프트’의 중요성은 오히려 커지고 있다. 조직이 디자인의 우수성을 중시할수록 디자이너의 만족도와 기업 성과도 함께 높아진다는 것이 글의 결론이다. ## 조사 배경과 디자이너들이 처한 변화 - Figma는 NewtonX와 함께 북미, APAC, 유럽, LATAM, 중동의 디지털 디자이너 906명을 조사했다. - 설문은 영어, 스페인어, 프랑스어, 이탈리아어, 포르투갈어, 일본어, 한국어로 진행됐다. - 디자이너들은 AI 도입으로 업무 방식이 흔들리고 있지만, 단순히 산출물의 양만 늘리는 것이 아니라 더 빠르고 높은 품질의 결과물을 만들고 있다고 응답했다. - 글은 이러한 불확실성과 낙관이 공존하는 상태를 디자이너들이 변화의 ‘어수선한 중간 단계(messy middle)’를 지나고 있는 상황으로 묘사한다. ## AI가 작업 속도와 품질을 함께 높이다 - 91%의 디자이너가 AI 도구가 디자인을 개선한다고 답했다. - 89%는 AI 덕분에 더 빠르게 일할 수 있다고 응답했다. - 80%는 협업이 개선됐다고 답했으며, 대부분은 AI 도구가 업무를 늦춘다고 생각하지 않았다. - AI는 반복 작업과 워크플로 최적화를 지원해 디자이너가 더 많은 결과물을 출시하고, 영향력이 큰 아이디어에 시간을 쓸 수 있게 한다. - AI를 적극 활용하는 디자이너는 그렇지 않은 디자이너보다 직업 만족도가 25% 높았다. - 이들은 자신의 업무가 비즈니스 성과와 기업 성장에 기여한다고 느낄 가능성도 더 높았다. - 따라서 AI는 디자이너의 역할을 대체하는 도구라기보다, 디자이너가 더 빠르게 실험하고 중요한 판단에 집중하도록 돕는 도구로 제시된다. ## 크래프트는 인간적인 차별점이다 - 누구나 AI로 프롬프트를 작성해 프로토타입을 만들 수 있는 환경에서는 제품을 구별하는 요소로 디자인의 완성도와 의도성이 중요해진다. - 조사에서 디자이너들이 생각하는 크래프트의 의미는 다음과 같았다. - 시각적 완성도: 58% - 사려 깊은 문제 해결: 47% - 명확하고 직관적인 UX: 36% - 감정과 즐거움을 주는 경험: 35% - 제품 전반의 일관성: 15% - 한 응답자는 크래프트를 “기술, 디테일, 의도적인 노력이며, 배려와 정밀함, 예술성을 담아 만드는 것”이라고 설명했다. - 시각적 완성도나 감정적 경험처럼 결과물에서 바로 드러나는 요소는 리더나 사용자에게 인정받기 쉽다. - 반면 어려운 문제를 해결하거나 복잡한 트레이드오프를 조정하는 전술적 작업은 중요하더라도 외부의 인정을 덜 받을 수 있다. ## 조직의 디자인 투자와 성과 - 경영진이 디자인의 우수성을 중시하는 조직의 디자이너는 그렇지 않은 조직보다 자신의 일에 만족할 가능성이 약 2배 높았다. - 크래프트를 중요하게 여기는 팀은 더 높은 사기, 빠른 비즈니스 성장, 명확한 추진력을 보고했다. - 디자인에 대한 지원과 투자가 늘어난 조직일수록 성장 속도와 디자이너의 낙관적 전망이 함께 높아졌다. - 효과적인 투자는 다음을 포함한다. - 리더십 차원의 디자인 품질 지원 - 디자이너의 역량 개발 기회 제공 - 좋은 작업에 대한 공식적 인정과 보상 - 이는 개인의 창의성만으로 품질을 유지하기보다, 조직 차원에서 높은 기준을 뒷받침해야 한다는 점을 보여준다. AI를 도입할 때는 단순히 생산량을 늘리는 데 집중하기보다 반복 작업을 자동화하고, 디자이너가 문제 정의·사용자 경험·감정적 완성도·최종 품질 판단에 더 많은 시간을 쓰도록 설계하는 것이 바람직하다. 또한 디자인 품질을 평가하고 인정하는 조직 문화를 함께 구축해야 AI의 속도와 인간의 크래프트를 모두 살릴 수 있다.

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

디자이너 수요가 증가하는 이유 | Figma 블로그

AI 시대에 기업의 디자이너 수요는 감소하기보다 오히려 다시 증가하고 있다. Figma의 조사에서 82%의 디자인 리더가 디자이너 수요가 증가했거나 유지됐다고 답했으며, AI 도구 활용과 AI 제품 설계 역량이 채용의 중요한 기준으로 떠올랐다. 특히 빠르게 성장하는 기업일수록 디자인을 제품 차별화와 매출 성장을 이끄는 전략적 기능으로 보고 더 적극적으로 채용하고 있다. ## 기술 산업을 넘어 증가하는 디자인 채용 - 조사 대상 리더의 **82%**는 조직의 디자이너 수요가 증가했거나 현재 수준을 유지하고 있다고 답했다. - 약 **47%**는 수요가 증가했다고 응답했다. - 수요가 증가한 기업 중 다수는 최소 **10% 이상** 증가했다고 답했으며, 25% 이상 증가한 기업도 상당수였다. - 기술 기업이 채용을 주도하지만, 디자인 수요는 다양한 산업으로 확산되고 있다. - 북미의 비기술 기업도 디자인 인력을 적극적으로 채용하는 편이다. - 유통, 출판, 항공 등은 디지털 접점을 강화하고 고객 경험을 개선하기 위해 디자이너를 필요로 한다. - 기업 성장률이 높을수록 디자인 채용 의향도 높았다. - 업계 평균보다 빠르게 성장하는 기업의 **46%**가 향후 6개월 내 채용 확대를 계획했다. - 평균 성장 기업은 **40%**, 성장 속도가 느린 기업은 **33%**였다. - 고성장 기업은 디자인을 단순한 시각적 완성도가 아니라 다음과 같은 전략적 수단으로 인식한다. - 아이디어를 더 빠르게 검증 - 전략을 실제 제품으로 전환 - 경쟁사와 차별화 - 고객 기대에 대응하고 매출 창출 - 채용 시장에 대한 체감은 아직 낙관적이지 않다. - 전체 채용 환경이 개선되고 있다고 보는 채용 관리자는 **20%**에 그쳤다. - 그러나 2025년 디자인 직무 채용 공고는 일부 디자인 중심 벤처캐피털 포트폴리오에서 전년 대비 약 **60% 증가**했다. - 향후 6개월 내 추가 인력을 채용하려는 관리자는 **40%**였다. ## AI가 디자이너 수요를 촉진하는 이유 - AI 모델과 도구가 빠르게 발전하면서 기업은 새로운 업무 방식에 즉시 적응할 수 있는 디자이너를 찾고 있다. - 기업이 요구하는 역량은 두 방향으로 확대되고 있다. - AI 도구를 디자인 업무에 활용하는 능력 - AI 기반 제품과 서비스를 설계하는 능력 - 채용 관리자의 **73%**는 AI 도구 숙련도에 대한 수요가 증가했다고 답했다. - **79%**는 AI 제품을 설계할 수 있는 지식의 중요성이 커졌다고 응답했다. - AI 역량은 더 이상 선택적인 우대 조건이 아니라 필수 요건에 가까워지고 있다. - 특히 기업은 다음 역량을 결합한 인재를 선호한다. - 기술적 이해도 - 전략적 사고 - 창의적이고 틀을 벗어난 문제 해결 - 인간이 개입하는 human-in-the-loop 방식에 대한 이해 - 인간의 판단을 보완하는 human-augmented AI 활용 능력 - 따라서 AI 시대의 디자이너는 AI 제품의 사용자 경험을 설계하는 동시에, 자신의 디자인 프로세스에도 AI를 효과적으로 통합해야 한다. ## 기업이 시니어 디자이너를 우선하는 배경 - 글은 다음 섹션에서 기업들이 **시니어 인재를 우선적으로 채용하는 현상**을 다룬다. - 공개된 내용에 따르면, 빠른 실행이 요구되는 환경에서 기업은 단순한 제작 능력보다 다음과 같은 역량을 갖춘 디자이너를 중시하고 있다. - 높은 수준의 판단력 - 복잡한 문제를 해결하는 경험 - 빠르게 변화하는 프로젝트를 주도하는 능력 - 다만 제공된 글은 이 섹션의 문장이 중간에서 끝나 있어, 시니어 인재에 대한 구체적인 조사 수치와 세부 근거는 확인할 수 없다. 디자이너는 시각 디자인 툴 숙련도만 강화하기보다 AI 도구를 실제 업무에 적용하고, AI 제품의 작동 방식과 사용자 경험을 함께 이해하는 역량을 갖추는 것이 유리하다. 또한 빠르게 성장하는 조직이 요구하는 전략적 사고와 제품 개발 전반의 판단력을 함께 키우는 것이 향후 채용 경쟁력을 높이는 방법이다.

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

장인 정신을 담아: Figma

Figma의 **Vectorize**는 래스터 이미지를 편집 가능한 벡터로 변환하는 AI 이미지 편집 도구다. 손그림, 사진으로 찍은 질감, 손글씨 등을 Figma 안에서 바로 벡터화해 크기·형태·색상·구성을 수정할 수 있어, 별도 도구로 재작업하거나 처음부터 다시 그리는 과정을 줄여준다. 이를 통해 원본의 개성을 유지하면서도 다양한 디자인에 재사용 가능한 자산으로 발전시킬 수 있다. ## 래스터 그림을 편집 가능한 벡터로 변환 - Figma Design 또는 Figma Draw에 이미지 파일을 드래그 앤 드롭한 뒤 **Vectorize**를 실행한다. - 연필 스케치나 손으로 그린 일러스트가 편집 가능한 벡터 일러스트로 변환된다. - 변환 후 크기, 형태, 배치, 전체 구성을 Figma 캔버스에서 직접 조정할 수 있다. - **Recolor** 슬라이더를 사용하면 색상과 도형을 단순화해 관리하기 쉬운 결과물을 만들 수 있다. - Figma의 **색상 변수(Color variables)**를 적용해 브랜드 색상이나 여러 디자인 테마에 맞게 팔레트를 일괄 변경할 수 있다. - 결과물은 일회성 이미지가 아니라, 여러 디자인에서 계속 수정하고 재사용할 수 있는 살아 있는 디자인 자산이 된다. ## 손글씨와 레터링을 로고로 발전시키기 - 종이에 쓴 글씨, 캘리그래피, 콜라주로 만든 문자를 사진이나 스캔 이미지로 Figma에 가져온다. - Vectorize를 실행하면 글자의 선과 곡선이 편집 가능한 벡터 형태로 변환된다. - 변환된 각 글자의 앵커 포인트를 조정해 획의 모양, 곡선, 글자 간격을 세밀하게 다듬을 수 있다. - **Remove background**로 불필요한 배경을 제거할 수 있다. - 바운딩 박스를 사용해 개별 글자를 이동하거나 크기를 조절하고, 색상을 변경해 로고나 타이포그래픽으로 발전시킬 수 있다. - 완성된 레터링은 커버 아트, 인터페이스, 브랜드 그래픽 등 다양한 맥락에 맞게 확대·변형해 사용할 수 있다. ## 기존 AI 이미지 편집 도구와의 연계 - Vectorize는 Figma의 기존 AI 이미지 편집 도구군에 추가된 기능이다. - 함께 소개된 기능으로는 **배경 제거(Remove background)**, **객체 지우기(Erase object)**, **이미지 확장(Expand image)**이 있다. - 이미지를 벡터화한 뒤 배경을 제거하거나 색상을 바꾸는 식으로 여러 편집 기능을 연속해서 적용할 수 있다. - 별도의 그래픽 편집 프로그램으로 파일을 옮기지 않고 Figma 안에서 작업을 이어갈 수 있다는 점이 핵심이다. ## 창작 과정의 개성을 유지하는 작업 방식 - 초기 아이디어가 노트의 스케치나 휴대폰으로 찍은 이미지처럼 비정형적인 형태로 시작해도 그대로 디지털 작업에 활용할 수 있다. - 기존 방식처럼 이미지를 다시 그리거나 여러 도구 사이를 오갈 필요가 줄어든다. - 원본의 손맛과 표현을 유지하면서도 벡터의 확장성, 편집성, 재사용성을 확보할 수 있다. - 한 번 변환한 결과물을 브랜드 시스템이나 여러 화면 디자인에 맞게 지속적으로 발전시킬 수 있다. 실무에서는 손그림이나 손글씨를 먼저 자연스럽게 만든 뒤 Vectorize로 변환하고, 불필요한 배경 제거와 색상 변수 적용을 거쳐 브랜드 자산으로 정리하는 방식이 유용하다.

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

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

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

figma3분 읽기큐레이션 요약

고정관념에서 벗어나 생각

Claude와 FigJam의 연동으로 텍스트 프롬프트, PRD, PDF, 이미지, 스크린샷, 코드 파일을 편집 가능한 FigJam 다이어그램으로 변환할 수 있다. 이를 통해 AI와의 대화에서 나온 아이디어를 팀이 함께 검토·수정하는 시각적 협업 공간으로 빠르게 옮길 수 있다. Figma는 이 기능이 기획, 디자인, 개발 간의 소통을 줄이고 아이디어를 실행으로 연결하는 데 도움을 준다고 설명한다. ## 대화에서 편집 가능한 다이어그램으로 - Claude의 Figma MCP 앱을 사용하면 작성한 프롬프트나 업로드한 자료를 FigJam 다이어그램으로 만들 수 있다. - PRD를 기반으로 사용자 플로우를 생성해 제품의 전체 여정, 마찰 지점, 예외 상황을 빠르게 파악할 수 있다. - 생성된 결과물은 단순한 이미지가 아니라 FigJam에서 편집 가능한 형태이므로 팀원이 직접 수정하고 확장할 수 있다. - 대화 내용을 복사해 다른 도구로 옮기는 과정과 애플리케이션 간 컨텍스트 전환을 줄인다. ## 시각화로 팀의 사고를 공유 - 다이어그램은 복잡하거나 추상적인 아이디어를 이해하기 쉬운 흐름으로 바꿔 팀의 공통 언어 역할을 한다. - 디자이너는 사용자 여정과 경험 흐름을 시각화할 수 있다. - 제품 관리자는 Gantt 차트로 일정, 의존성, 마일스톤을 정리할 수 있다. - 기획 초기 단계에서 AI가 만든 초안을 바탕으로 문제를 조기에 발견하고 업무 순서를 조정할 수 있다. - FigJam의 공유 캔버스에서 팀원들이 댓글과 반응을 남기며 아이디어를 함께 발전시킬 수 있다. ## 개발 문서와 시스템 구조 시각화 - 엔지니어는 서비스, API, 데이터베이스, 요청·응답 흐름, 의존성을 포함한 시스템 아키텍처를 다이어그램으로 표현할 수 있다. - 기존 기술 문서나 업로드한 코드 파일을 바탕으로 초기 구조를 생성할 수 있다. - 여러 시스템의 패턴을 비교하거나 프런트엔드와 백엔드 간의 공통 맥락을 정리하는 데 활용할 수 있다. - 구현 전에 복잡성과 잠재적 위험을 검토해 개발 과정의 오류를 줄이는 데 도움이 된다. - Claude는 데이터베이스 구조에 적합한 차트 유형과 색상 코드도 제안할 수 있다. ## FigJam을 중심으로 이어지는 작업 흐름 - Claude에서 만든 아이디어를 FigJam으로 옮긴 뒤, Figma Design에서 다듬고 Figma Slides에서 공유할 수 있다. - 필요하면 최종 결과를 코드 구현으로 연결해 아이디어에서 실행까지의 흐름을 이어갈 수 있다. - FigJam은 초기 브레인스토밍뿐 아니라 프로젝트 계획, 시스템 설계, 협업 문서화의 공간으로 활용된다. - Figma는 더 다양한 도형 모음과 커넥터 유형을 추가해 정교한 다이어그램 작성 기능도 개선하고 있다. - Anthropic은 Claude용 MCP 앱을 설계할 수 있는 UI 키트도 제공한다. ## AI가 일회성 도구에서 협업 파트너로 - Claude는 여러 차례의 대화 맥락을 유지하면서 사용자 여정, 우선순위 절충안, 구현 구조를 점진적으로 개선할 수 있다. - 하나의 답만 제시하는 대신 의사결정 트리, Gantt 차트, 시퀀스 다이어그램, 상태 다이어그램 등 목적에 맞는 표현 방식을 제안할 수 있다. - FigJam에 저장된 다이어그램은 팀의 초기 사고 과정과 의사결정을 남기는 공유 자산이 된다. - MCP를 활용하면 시스템 컨텍스트를 다이어그램에 반영해 복잡한 시스템을 함께 이해하는 방식으로 발전할 수 있다. 실무에서는 PRD나 기술 문서를 Claude에 제공해 초안을 만든 뒤, FigJam에서 팀원과 구조·누락·우선순위를 검토하는 방식이 효과적이다. 단, AI가 생성한 흐름과 아키텍처는 초안이므로 실제 요구사항과 시스템 제약을 담당자가 반드시 검증해야 한다.

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

말하기보다 보여주기: 업무

Figma는 Figma Make 프로토타입을 Figma Design, FigJam, Figma Slides에 직접 삽입할 수 있는 기능을 출시했다. 이를 통해 아이디어를 스크린샷이나 설명으로 전달하는 대신 실제로 작동하는 경험을 함께 확인하며 피드백과 의사결정을 진행할 수 있다. 또한 텍스트·요소 편집, 요소 삭제, 모델 작업 과정 검토 등 정교한 수정 기능이 추가되어 프로토타입을 더 빠르게 개선할 수 있다. ## 작업 공간 어디서나 프로토타입 공유 - Figma Make 프로토타입을 Figma Design, FigJam, Figma Slides에 삽입할 수 있다. - 아이디어 탐색부터 디자인 리뷰, 이해관계자 프레젠테이션까지 동일한 인터랙티브 프로토타입을 활용한다. - 팀원들이 변화하는 아이디어를 하나의 실제 경험으로 확인하므로 피드백과 방향성 정렬이 쉬워진다. ## FigJam에서 초기 아이디어 정렬 - FigJam 보드에 Figma Make 프로토타입을 직접 삽입해 논의의 중심으로 사용할 수 있다. - 스크린샷이나 추상적인 설명 대신 실제 화면을 클릭하며 기능과 사용자 여정을 검토한다. - 대화 과정에서 우선순위를 현실적으로 정하고, 사용자 경험의 누락된 부분을 조기에 발견할 수 있다. ## Figma Design에서 인터랙션 리뷰 - 디자인 리뷰 단계에서 UI, 문구, 인터랙션이 실제로 어떻게 동작하는지 확인할 수 있다. - 여러 디자인 버전을 나란히 비교해 실사용 상황에서 더 나은 안을 판단할 수 있다. - 구체적인 피드백을 Figma Make로 바로 되돌려 보내고, 추측 없이 수정할 수 있다. ## Figma Slides에서 사용자 경험 기반 발표 - 프레젠테이션 안에 프로토타입을 삽입해 이해관계자가 사용자 관점에서 콘셉트를 경험하도록 한다. - Figma Slides의 투표 기능으로 참석자의 의견을 빠르게 수집할 수 있다. - 논의가 진행되는 동안 얻은 피드백을 Figma Make에 반영해 즉시 업데이트할 수 있다. ## 텍스트와 요소를 직접 수정 - 프로토타입 내부의 텍스트를 직접 편집해 다양한 콘텐츠와 문구를 빠르게 시험할 수 있다. - 이해관계자 피드백에 따라 카피를 즉시 다듬을 수 있다. - **Point and edit** 도구를 사용하면 프로토타입 안에서 색상, 간격, 텍스트 스타일을 세밀하게 조정할 수 있다. - 특정 노드를 삭제하면서 나머지 구조는 유지할 수 있다. - 삭제한 요소는 `Command+Z`로 되돌릴 수 있다. ## 모델의 작업 방식 검토와 수정 - 프로토타입이 복잡해질수록 모델이 어떻게 결과를 구성했는지 확인하는 것이 중요해진다. - Figma Make는 모델의 구축 과정을 파악하고 필요할 때 방향을 수정할 수 있도록 가시성을 제공한다. - 사용자는 모델의 결과를 그대로 받아들이기보다, 아이디어와 피드백에 맞게 생성 과정을 조정하며 프로토타입을 발전시킬 수 있다. ## 실용적인 활용 - 초기 아이디어는 FigJam에서 실제 프로토타입으로 검증한다. - 디자인 리뷰에서는 여러 버전을 비교하고 구체적인 UI·문구·인터랙션 피드백을 수집한다. - 발표 단계에서는 Figma Slides의 삽입 및 투표 기능으로 합의를 이끈다. - 반복적인 수정이 필요한 경우 직접 편집, Point and edit, 노드 삭제, 실행 취소 기능을 활용하면 Figma Make 작업 속도를 높일 수 있다.

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