figma·2025년 10월 5일·3분 읽기큐레이션 요약

ChatGPT 브레인스토밍을

ChatGPT의 새로운 Figma 앱은 대화 중 나온 아이디어와 첨부 파일을 분석해 FigJam 다이어그램으로 변환해준다. 손그림, PDF, PRD, 기술 문서 등을 바탕으로 플로차트·시퀀스 다이어그램·상태 다이어그램·간트 차트 등을 만들고 수정할 수 있어, 개인 브레인스토밍을 팀 협업용 산출물로 빠르게 발전시키는 것이 핵심이다. 이 기능은 Figma MCP 서버를 기반으로 하며, 글 작성 시점에는 EU 외 지역의 로그인한 ChatGPT 사용자에게 제공된다. ## ChatGPT 브레인스토밍을 FigJam으로 변환 - ChatGPT 대화 내용을 바탕으로 적절한 FigJam 다이어그램을 추천하고 자동 생성한다. - 사용자는 프롬프트에 Figma 앱을 직접 언급할 수 있다. - 예: “Figma, 이 스케치로 다이어그램을 만들어줘.” - 사진, 손그림, PDF 등의 파일을 업로드해 다이어그램 생성에 참고시킬 수 있다. - 현재 지원되는 다이어그램 유형은 다음과 같다. - 텍스트 기반 플로차트 - 시퀀스 다이어그램 - 상태 다이어그램 - 간트 차트 - 생성된 결과는 FigJam에서 팀원들과 공유하고 반복적으로 수정할 수 있다. ## 디자인 아이디어를 빠르게 발전시키기 - 냅킨이나 화이트보드에 그린 임시 스케치를 공유 가능한 FigJam 파일로 변환한다. - ChatGPT에 다이어그램 수정, 주제 확장, 다른 시각화 방식 제안을 요청할 수 있다. - 복잡한 문서와 맥락을 업로드하면 ChatGPT가 첫 번째 다이어그램 초안을 작성한다. - 디자이너는 아이디어를 손쉽게 디지털 산출물로 바꾼 뒤 팀 리뷰와 협업을 진행할 수 있다. ## 기술 아키텍처와 시스템 설계 시각화 - 기술 문서와 화면 캡처를 업로드해 소프트웨어 아키텍처 다이어그램을 생성하거나 갱신할 수 있다. - 기술 블로그와 사례 연구를 바탕으로 여러 기술 접근법을 비교하는 구조도를 만들 수 있다. - 웹페이지 스크린샷을 분석해 관련 React 컴포넌트 구조를 다이어그램으로 표현할 수도 있다. - 분산된 코드와 문서, 팀별로 나뉜 지식을 하나의 시각적 모델로 통합해 시스템 설계 논의와 기술 의사결정을 돕는다. - 생성된 다이어그램을 바탕으로 엔지니어들이 실시간으로 협업할 수 있다. ## 제품 기획과 사용자 흐름 정리 - 권한 관리처럼 여러 선택지가 있는 문제를 옵션별 다이어그램으로 만들어 장단점을 비교한다. - PRD를 업로드해 사용자 여정이나 기능 플로차트를 생성한다. - 제품·디자인·엔지니어링 요구사항을 입력해 출시 일정을 간트 차트로 구성한다. - ChatGPT에서 개인적으로 여러 아이디어를 탐색한 뒤 FigJam에서 팀과 함께 우선순위와 실행 계획을 조율할 수 있다. ## Figma MCP 서버 기반 통합 - 이 기능은 Figma MCP 서버를 기반으로 동작한다. - MCP 서버는 원격 접근을 지원하며, 사용자가 작업 중인 맥락을 Figma 작업 환경으로 연결한다. - 따라서 ChatGPT의 분석 능력과 FigJam의 멀티플레이어 협업 기능을 결합할 수 있다. - 글 작성 시점에는 로그인한 ChatGPT 사용자 중 EU 외 지역 사용자에게 제공되며, 향후 더 많은 기능과 다이어그램 유형이 추가될 예정이다. 실무에서는 먼저 ChatGPT에 원문 자료나 스케치를 제공해 초안을 만들고, FigJam에서 사실관계·구조·표현을 검토한 뒤 팀 협업 자료로 다듬는 방식이 가장 효과적이다. AI가 만든 다이어그램은 초안이므로 기술적 정확성과 일정의 현실성은 담당자가 반드시 확인해야 한다.

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

FigmafigjamReactchatgpt+4

figma·2025년 9월 24일·3분 읽기큐레이션 요약

Figma Make를 캔버

Figma는 Figma Make에서 생성한 미리보기를 Figma Design 캔버스로 직접 복사하는 기능인 **Copy design**을 공개했다. 복사된 결과물은 스크린샷이 아니라 편집 가능한 디자인 레이어로 들어가므로, 팀이 아이디어를 수정·재구성하고 프로토타입에서 실제 제품 디자인으로 발전시킬 수 있다. Figma는 이를 Make와 Design 사이의 작업 단계를 줄이고, 프롬프트에서 제작까지 이어지는 흐름을 강화하는 첫 단계로 설명한다. ## Figma Make 결과물을 편집 가능한 레이어로 변환 - 이제 Figma Make 미리보기에서 디자인을 복사해 Figma Design 캔버스에 붙여넣을 수 있다. - 복사된 결과는 정적인 이미지나 스크린샷이 아니라 **구조화된 디자인 레이어**로 제공된다. - 캔버스에서 레이어를 직접 편집하고, 요소를 재배치하거나 다른 디자인과 결합할 수 있다. - 별도로 파일을 내보내거나 이름을 지정하거나 작업 모드를 전환할 필요 없이 Make와 Design을 연결한다. ## 스크린샷이 아닌 협업 가능한 레이어 - 프롬프트로 만든 아이디어가 단순한 결과물에 머무르지 않고 반복 작업을 위한 구성 요소가 된다. - PM은 자연어로 Make에서 디자인 시안을 다듬은 뒤, 특정 시점을 Figma Design으로 가져올 수 있다. - 디자이너와 개발자 등 팀 구성원은 캔버스에서 결과물을 함께 검토하고 수정할 수 있다. - 프롬프트 → 프로토타입 → 제품 디자인으로 이어지는 과정이 더 유연해진다. - 여러 사람이 아이디어를 변형하고 개선하는 멀티스레드 협업의 출발점으로 활용할 수 있다. ## 커뮤니티 도구에서 얻은 기술적 방향 - Figma Make 사용자들은 이미 `<div>RIOTS`의 **html.to.design** 플러그인을 사용해 HTML이나 라이브 프로토타입을 편집 가능한 Figma 프레임으로 가져오고 있었다. - 이 플러그인은 웹 콘텐츠를 Figma의 편집 가능한 디자인 구조로 변환해, 생성된 결과물을 캔버스에서 다시 작업할 수 있게 한다. - Figma는 해당 기술을 확보했으며, 이를 향후 Figma Make 기능 개발에 활용할 계획이다. - html.to.design은 약 3년간 개발되었고 약 200만 명이 사용하는 도구로 소개됐다. - `<div>RIOTS`는 Figma와의 협력 이후에도 플러그인과 도구를 독립적으로 계속 개발하고 유지보수한다. ## Make의 향후 방향 - Figma는 캔버스를 무엇이든 가져와 탐색하고 변환할 수 있는 공동 작업 공간으로 확장하려 한다. - Copy design은 이러한 방향을 실현하는 첫 단계다. - 궁극적으로는 어떤 프롬프트에서 시작한 아이디어든 Figma Design 안에서 발전시켜 실제 제품으로 연결하는 것이 목표다. - AI를 단순히 결과물을 생성하는 도구가 아니라, 기존 디자인 프로세스를 가속하는 도구로 활용하려는 전략이 드러난다. Figma Make를 아이디어 발상과 빠른 프로토타이핑에 사용하고, 결과물을 Copy design으로 Figma Design에 가져와 세부 편집과 팀 협업을 진행하는 방식이 가장 실용적이다. 특히 초기 시안의 반복 제작과 프로토타입 검토가 잦은 팀일수록 스크린샷 기반 작업보다 효율이 높을 것으로 보인다.

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

AI프로토타이핑figma-makeCSS+3

figma·2025년 9월 23일·3분 읽기큐레이션 요약

디자인 맥락에 관심을

디자인 파일은 단순한 시각적 결과물이 아니라 개발자와 AI 코딩 도구가 이해하는 실행 가능한 맥락이어야 한다. Figma의 Dev Mode MCP 서버가 디자인을 코드로 변환할수록, 디자인 시스템과 파일 구조를 명확히 관리하는 일이 정확하고 빠른 구현의 핵심이 된다. 따라서 디자이너는 디자인 시스템을 코드와 연결하고, 개발자가 소비하기 쉬운 형태로 파일을 구성해야 한다. ## 디자인 시스템을 코드와 연결하기 - 색상, 간격, 크기, 타이포그래피를 **컴포넌트와 변수**로 표준화하면 반복 가능한 패턴과 일관성을 확보할 수 있다. - **Code Connect**를 사용하면 Figma 컴포넌트와 실제 코드 컴포넌트를 연결할 수 있다. - Dev Mode에서 실제 코드 스니펫을 제공한다. - Figma의 컴포넌트 속성 및 변형이 코드에서 어떻게 대응되는지 문서화한다. - **변수의 code syntax**를 지정하면 색상·타이포그래피·상태 등의 값이 웹과 네이티브 코드에서 어떤 문법으로 표현되는지 명확해진다. - Dev Mode MCP 서버는 이 정보를 AI 에이전트에 전달한다. - AI가 전체 코드베이스를 검색하지 않고도 적절한 컴포넌트와 변수 정보를 가져올 수 있다. - 디자인 시스템에 연결된 카드 컴포넌트라면, 정확한 간격·색상·타이포그래피와 실제 코드 구조를 반영한 코드를 생성할 수 있다. - 이러한 맥락을 Figma 라이브러리에 구축하면 조직 전체에서 재사용할 수 있어, 새로운 UI를 만드는 사람과 AI 도구 모두 같은 기준을 활용하게 된다. ## 개발자가 이해하기 쉬운 파일 구조 만들기 - 페이지 계층, 프레임, 레이어의 이름을 의도적으로 구성하면 디자인 작업뿐 아니라 개발자와 MCP가 디자인을 해석하는 데도 도움이 된다. - 파일 구조를 정리할 때는 다음 원칙이 중요하다. - **주요 반응형 브레이크포인트별 프레임을 만든다.** - 화면 크기에 따라 시각적 변화가 큰 경우 별도 프레임으로 표현한다. - 예를 들어 데스크톱 내비게이션이 모바일에서 메뉴 아이콘으로 바뀌는 동작을 명시할 수 있다. - **Auto Layout을 적극 활용한다.** - 다양한 화면 너비, 브레이크포인트, 텍스트 길이에 따라 레이아웃이 어떻게 변하는지 구조적으로 표현할 수 있다. - 단순히 픽셀 위치를 지정하는 것보다 실제 구현 방식에 가까운 정보를 제공한다. - 프레임과 레이어에 의미 있는 이름을 부여해 각 요소의 역할과 계층을 분명히 한다. - 잘 정리된 파일은 개발자가 디자인 의도를 추측하는 시간을 줄이고, AI 에이전트가 레이아웃과 컴포넌트 관계를 오해할 가능성도 낮춘다. ## 디자인 맥락이 AI 코딩의 정확도를 좌우한다 - 에이전트형 코딩 도구가 널리 사용되면서 디자인 파일의 구조와 명확성이 과거보다 중요해졌다. - AI는 시각적 결과만 보는 것이 아니라 다음과 같은 구조화된 정보를 활용해야 정확한 코드를 만들 수 있다. - 컴포넌트와 코드의 연결 관계 - 변수의 이름과 코드 문법 - 레이아웃 규칙과 반응형 동작 - 프레임 및 레이어의 계층 구조 - 디자인 시스템과 MCP 서버를 함께 사용하면 AI가 브랜드에 맞고 재사용 가능한 코드를 생성할 가능성이 높아진다. - 결과적으로 디자이너의 역할은 화면을 설계하는 데서 끝나지 않고, 개발과 AI가 활용할 수 있는 디자인 맥락을 구축하는 것까지 확장된다. 디자인을 전달할 때는 완성된 화면만 공유하기보다 컴포넌트·변수·코드 연결·반응형 구조를 함께 관리하는 것이 좋다. 특히 공통 라이브러리에 이러한 정보를 표준화해두면 개발자와 AI 모두 더 빠르고 일관되게 프로덕션 코드를 작성할 수 있다.

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

Figma디자인 시스템AI 에이전트모델 컨텍스트 프로토콜+3

figma·2025년 9월 22일·3분 읽기큐레이션 요약

디자인 맥락, 제품을

Figma는 디자인 파일에 담긴 레이아웃, 상호작용, 디자인 시스템, 코드 구조 등의 맥락을 개발 환경 전반에서 활용할 수 있도록 Figma MCP 서버와 Code Connect를 확장했다. 원격 MCP 접속으로 IDE·AI 코딩 에이전트·브라우저에서 Figma에 연결할 수 있고, Figma Make의 실제 코드와 Code Connect의 프로덕션 컴포넌트 정보도 AI가 활용할 수 있다. 이를 통해 디자인에서 코드로 전환하는 과정의 마찰을 줄이고, 더 일관되고 효율적인 코드 생성을 지원한다. ## 디자인 맥락을 어디서나 공유 - AI 기반 코드 생성은 프롬프트만으로는 충분하지 않으며, 디자인 시스템 구조와 코드베이스 작성 방식 같은 추가 맥락이 필요하다. - Figma 파일에는 반응형 레이아웃, 인터랙션 세부사항, 시각적 프로그램 등 단순한 이미지 이상의 정보가 담겨 있다. - Figma는 이러한 팀의 축적된 디자인·개발 지식을 Figma 캔버스 밖에서도 사용할 수 있도록 만드는 것을 목표로 한다. ## 원격 Figma MCP 서버 - 기존에는 Dev Mode의 로컬 MCP 서버를 통해 개발자의 편집기에서 Figma 디자인 정보를 가져왔다. - 새 원격 접속 기능을 사용하면 데스크톱 앱 없이도 다음 환경에서 Figma에 연결할 수 있다. - IDE - AI 코딩 에이전트 - 브라우저 기반 AI 모델 - Android Studio, Replit, Warp 등 다양한 파트너 도구에서 Figma 디자인 맥락을 사용할 수 있다. - Figma MCP 파트너 카탈로그에서 사용하는 IDE나 에이전트를 찾아 쉽게 연동할 수 있다. - 디자인 시스템 규칙을 생성하는 기능 등 MCP 서버의 기능과 파트너 지원을 계속 확대할 예정이다. - Affirm은 MCP 서버를 사용해 주요 제품 플로우를 이틀 이내에 재구축했으며, 개발 속도가 “몇 배가 아니라 orders of magnitude” 향상됐다고 평가했다. ## Figma Make와 MCP의 연결 - Figma Make 파일을 MCP 클라이언트에서 사용하면 AI 모델이 렌더링된 프로토타입이나 이미지만 보는 것이 아니라 underlying code를 직접 확인할 수 있다. - MCP 서버는 Make 파일의 코드를 색인하고, 사용자가 요청한 파일이나 코드 일부를 선택적으로 제공한다. - 개발자와 AI 에이전트는 다음 방식으로 Make의 정보를 활용할 수 있다. - 특정 파일의 코드를 직접 재사용 - 구현 로직과 디자인 패턴을 참고 - 기존 코드 구조를 기반으로 새로운 기능 생성 - Anthropic, Cursor, Windsurf, VS Code와 협력해 해당 기능을 제공한다. - 향후에는 외부 파트너의 MCP 서버를 Figma Make 안에서도 연결할 계획이다. ## Code Connect의 컴포넌트 매핑 개선 - Code Connect는 Figma 디자인 컴포넌트와 실제 코드베이스의 컴포넌트를 연결하는 기능이다. - 기존에는 터미널에서 매핑을 수동으로 설정해야 했지만, 이제 Figma 내부에서 직접 매핑할 수 있다. - Figma에서 컴포넌트 탐색 - 연결할 코드와 파일 선택 - 연결 완료 또는 누락된 항목 확인 - 기존 Code Connect CLI도 계속 사용할 수 있으며, 다양한 프레임워크에 대해 속성(prop)과 변형(variant)이 매핑된 프로덕션 코드 스니펫을 Dev Mode에 제공한다. - MCP 서버와 Code Connect를 함께 사용하면 AI 에이전트가 다음 정보까지 얻을 수 있다. - 실제 코드 컴포넌트의 위치 - 컴포넌트 사용 지침 - 디자인과 코드 간의 연결 관계 - 내부 평가와 초기 고객 테스트에서 다음과 같은 개선이 확인됐다. - 더 일관된 코드 생성 - 코드 파일 탐색 속도 향상 - AI 에이전트의 토큰 사용량 감소 ## 연동 검토와 사용량 제한 - Figma는 외부 도구와의 연결이 확대되는 만큼 연동의 안정성과 기반 시스템도 강화하고 있다고 밝혔다. - 글에서 해당 섹션의 세부 내용은 제공된 본문이 중간에 끊겨 있어 확인할 수 없다. Figma를 사용하는 개발팀이라면 원격 MCP 서버로 IDE나 AI 에이전트에 디자인 정보를 연결하고, Code Connect로 핵심 UI 컴포넌트를 실제 코드와 매핑하는 방식이 효과적이다. 특히 Figma Make를 프로토타이핑 도구에 그치지 않고 코드 재사용과 AI 기반 구현의 출발점으로 활용할 수 있다는 점이 이번 업데이트의 실질적인 변화다.

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

디자인 시스템AI 에이전트모델 컨텍스트 프로토콜code-generation+3

figma·2025년 9월 18일·4분 읽기큐레이션 요약

Intercom AI 서밋의

Intercom의 AI 서밋 ‘Pioneer’ 브랜딩은 AI의 발전을 씨앗이 꽃피는 과정에 비유한 ‘외계적 슈퍼블룸’ 콘셉트로 제작됐다. Intercom Creative Studio는 꽃, 꽃가루 입자, 점묘 스타일, 3D 모션을 결합해 웹·영상·무대·인쇄물·굿즈까지 확장 가능한 시각 언어를 구축했다. 제작 전 과정을 Figma에서 협업하며 아이디어 탐색부터 프로토타이핑과 QA까지 하나의 작업 공간에서 진행한 점이 핵심이다. ## 인터콤의 브랜드를 확장하는 디자인 시스템 - Intercom의 Creative Studio는 일반적인 브랜드 가이드라인을 넘어, Intercom과 AI 고객 서비스 에이전트 Fin, 캠페인, 제품 출시, 웹사이트, 이벤트별 하위 디자인 시스템을 구축한다. - 약 30명으로 구성된 글로벌 팀은 Figma를 디자인 시스템과 협업의 중심, 즉 ‘핵심 허브’로 사용한다. - Pioneer 2025의 브랜드는 웹사이트와 디지털 캠페인뿐 아니라 다음 행사 요소에도 적용되어야 했다. - 무대 디자인 - 대형 디지털 스크린 - 안내 표지와 동선 표시 - 기념품 - 정적 이미지와 모션 콘텐츠 - 전년도 Pioneer의 ‘잠망경’ 콘셉트가 AI의 미래를 바라보는 시선을 표현했다면, 올해는 지난 아이디어가 성장하고 새로운 가능성으로 피어나는 모습을 표현하는 방향으로 전환했다. ## 폭넓은 크리에이티브 영역 탐색 - 팀은 Figma Design에서 다양한 무드보드를 제작하며 여러 시각적 방향을 폭넓게 실험했다. - 무드보드에는 다음 자료를 함께 배치했다. - 모션 에셋 - 정지 이미지 - 벡터 파일 - 로고 - 영상 레퍼런스 - 모션 디자이너, 브랜드 디자이너, 카피라이터가 같은 작업 공간에서 이미지 편집, 드로잉, 콜라주를 즉시 주고받았다. - 영상 임베드 기능을 활용해 초기 단계부터 모션 원칙을 검토했다. - 영상 위에 로고 스케치를 얹어 실제 커뮤니케이션에서 어떻게 보이는지 확인 - 메시지와 움직임이 함께 작동하는지 조기에 테스트 - 최종적으로 ‘AI 슈퍼블룸’이라는 콘셉트가 선택됐다. - 지난해 뿌린 씨앗이 올해 꽃으로 피어난다는 서사 - 꽃을 AI 발전과 새로운 아이디어의 상징으로 활용 - 꽃가루 입자를 연상시키는 점묘 스타일로 발표자 초상과 이미지를 표현 - 이해관계자에게 콘셉트를 공유할 때는 긴 아트보드에 설명과 시안을 배치했다. - 발표 슬라이드처럼 넘기지 않고 스크롤하며 탐색 가능 - 각 보드에 직접 댓글 작성 가능 - 피드백 단계별로 별도 페이지를 만들어 검토 과정과 결과물을 체계적으로 관리 ## 꽃과 꽃가루를 활용한 모션 언어 - 추상적인 콘셉트를 구체화하기 위해 3D 꽃 렌더링을 제작했다. - 꽃은 현실적인 식물보다는 다음과 같은 ‘외계적’ 특성을 갖도록 디자인됐다. - 비현실적인 크기 - 과장된 개화 속도 - 낯설고 변형되는 형태 - 이는 빠르게 변화하는 AI 기술의 성격과 연결된다. - 팀은 사실적인 표현 대신 꽃가루 입자에 집중해 차별화된 시각 언어를 만들었다. - 입자 밀도와 움직임을 조절해 풍부한 화면 구성 구현 - Pioneer 로고와 정적 이미지에도 입자 기반 스타일 적용 - 모션에서는 역동적으로, 인쇄물에서는 절제된 형태로 활용 가능 - 외부 스튜디오 Colors and the Kids와 협업해 꽃의 종류와 개화 애니메이션을 탐색했다. - Figma Draw로 영상의 특정 프레임 위에 직접 주석과 드로잉을 추가했다. - 움직임의 방향과 속도 표시 - 꽃잎 형태가 어떻게 바뀌어야 하는지 설명 - 별도 프로그램으로 파일을 옮기지 않고 반복 수정 ## Figma에서 진행한 웹 경험 프로토타이핑 - Pioneer 웹사이트의 디자인, 프로토타입 제작, QA를 모두 Figma 안에서 진행했다. - 플랫폼을 오가며 작업할 필요가 없어 디자인과 검수 과정이 단순해졌다. - 실시간 댓글 기능을 통해 디자이너와 협업자가 수정 중인 화면에 바로 의견을 남겼다. - Slack 등 별도 커뮤니케이션 도구로 맥락을 옮길 필요 감소 - 변경 사항과 피드백을 같은 화면에서 확인 - 개발자와 디자이너가 인터랙션을 조기에 검증 - 웹사이트 프로토타입은 브랜드가 정적인 그래픽에 머물지 않고 실제 사용자 경험으로 어떻게 작동하는지 확인하는 수단이 됐다. ## 실용적인 시사점 - 대규모 브랜딩 프로젝트에서는 초기 탐색, 모션 실험, 이해관계자 피드백, 웹 프로토타이핑을 하나의 협업 환경에 연결하면 작업 속도와 일관성을 높일 수 있다. - 콘셉트를 꽃이나 입자처럼 명확한 시각적 요소로 정의하되, 모션·인쇄·웹·공간 디자인에 모두 적용할 수 있도록 밀도와 움직임을 조절 가능한 시스템으로 설계하는 것이 중요하다. - 특히 초기 단계부터 정적 이미지와 모션을 함께 검토하면 최종 결과물에서 브랜드 경험이 매체별로 분리되는 문제를 줄일 수 있다.

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

FigmaAI디자인 시스템프로토타이핑+3

figma·2025년 9월 17일·3분 읽기큐레이션 요약

Figma 렌더링: Web

Figma는 기존 WebGL 렌더러를 WebGPU 기반으로 확장해 GPU 병렬 처리와 더 명확한 오류 처리, 새로운 렌더링 최적화 기회를 확보했다. 다만 단순히 API를 교체하는 방식으로는 성능 향상을 보장할 수 없었기 때문에, WebGL 호환성을 유지하면서 그래픽 인터페이스와 셰이더·버퍼 처리 방식을 함께 재설계했다. 이 과정은 성능 회귀와 기능 중단을 피하기 위해 단계적으로 진행됐다. ## WebGL에서 WebGPU로 전환한 배경 - Figma는 2015년부터 브라우저에서 무한 캔버스를 구현하기 위해 WebGL을 사용했다. - 당시 WebGL은 3D 중심 API였지만, Figma는 이를 복잡한 2D 디자인 도구에도 적용할 수 있다고 판단했다. - 2023년 Chromium에 WebGPU 지원이 추가되면서 WebGL에서는 어려웠던 최적화가 가능해졌다. - 특히 컴퓨트 셰이더를 활용해 CPU 작업을 GPU의 대규모 병렬 처리로 옮길 수 있다. - WebGPU는 WebGL의 전역 상태 중심 구조보다 오류 처리가 명확하고, 상태 관리로 인한 버그도 줄일 수 있다. ## 드로 콜 인자를 명시적으로 관리 - 기존 WebGL 방식은 버텍스 버퍼, 텍스처, 머티리얼, 프레임버퍼 등을 전역 바인딩 지점에 먼저 연결한 뒤 `draw()`를 호출했다. - 바인딩된 리소스는 이후에도 유지되므로, 일부 입력을 갱신하지 않아 이전 상태가 남는 문제가 발생할 수 있었다. - Figma는 다음처럼 드로 콜에 필요한 리소스를 함수 인자로 직접 전달하도록 인터페이스를 변경했다. ```cpp context->draw(vertexBuffer, framebuffer, {texture}, material, …); ``` - WebGL 구현에서는 필요한 경우에만 실제 바인딩을 갱신하도록 지연 업데이트를 적용했다. - 이 변경은 WebGPU 도입 전에도 입력 누락으로 발생하던 WebGL 렌더러의 버그를 해결했다. - 각 드로 콜의 의존성이 코드에 명확히 드러나므로 유지보수성과 안정성도 향상됐다. ## GLSL과 WGSL을 함께 지원하는 셰이더 처리 - 셰이더는 GPU에서 실행되어 최종 픽셀을 생성하는 프로그램이다. - WebGL은 GLSL을 사용하지만 WebGPU는 WGSL을 사용하므로, 기존 GLSL 셰이더를 모두 WGSL로 수동 변환하면 두 버전을 중복 관리해야 했다. - Figma의 기존 셰이더는 WebGL 1용 구형 GLSL 형식이어서 일반적인 변환 도구만으로는 처리하기 어려웠다. - Figma는 자체 셰이더 프로세서와 오픈소스 도구 `naga`를 조합했다. - 기존 GLSL을 파싱한다. - 최신 GLSL 구조에 맞게 필요한 변환을 수행한다. - `naga`를 이용해 WGSL로 변환한다. - 최종적으로 GLSL과 WGSL을 모두 생성한다. - 변환 과정에서 셰이더 입력 타입과 데이터 레이아웃 같은 메타데이터도 추출해 애플리케이션에서 활용한다. - 파일 include 기능도 제공해 셰이더 코드의 모듈화와 재사용성을 높였다. ## WebGPU에 맞춘 유니폼 버퍼 설계 - 유니폼은 셰이더에 전달되는 전역 변수와 같은 데이터로, 색상이나 변환 행렬 등을 전달하는 데 사용된다. - WebGL에서는 각 유니폼을 개별적으로 설정할 수 있었다. ```javascript gl.uniform1f(locationAlpha, alphaValue); gl.uniformMatrix3fv(locationTransform, false, transformValue); ``` - Figma의 기존 인터페이스도 이 모델을 따라 유니폼을 하나씩 설정했다. - 그러나 WebGPU에서는 유니폼을 개별 호출로 전달할 수 없고, 여러 값을 하나의 유니폼 버퍼에 기록한 뒤 GPU에 한 번에 업로드해야 한다. - 따라서 WebGL API를 그대로 흉내 내 WebGPU를 구현하면 호출 오버헤드와 데이터 업로드 비용 때문에 성능이 오히려 저하될 수 있다. - WebGPU 전환의 핵심은 API 이름을 바꾸는 것이 아니라, 버퍼 레이아웃과 데이터 업로드 방식을 GPU 친화적으로 재설계하는 데 있다. ## 실용적인 결론 WebGPU 도입은 단순한 렌더링 API 교체가 아니라 상태 관리, 셰이더 컴파일, 유니폼 버퍼 구조까지 재설계하는 작업이다. 기존 API와의 호환성을 유지하되 드로 콜의 입력을 명시적으로 만들고, 셰이더 변환을 자동화하며, GPU 버퍼 단위로 데이터를 처리해야 성능과 안정성을 함께 확보할 수 있다.

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

webglshaderswebgpugpu-rendering+3

figma·2025년 9월 14일원문

자유 연상: 프로덕션 (새 탭에서 열림)

에미상 수상 프로덕션 디자이너 제레미 힌들(Jeremy Hindle)은 애플 TV+ 시리즈 <세버런스: 단절>의 무대인 루먼 코퍼레이션의 기묘하고도 고립된 세계를 구축하기 위해 건축, 고전 영화, 산업 디자인의 정수를 결합했습니다. 그는 "네 개의 책상, 넓은 방"이라는 단순한 대본 설명을 바탕으로, 시청자가 시각을 넘어 신체적으로 반응할 수 있는 '감정'을 디자인하는 데 집중했습니다. 이를 통해 현대 직장 문화의 공허함과 기이함을 시각적으로 극대화하며 독보적인 미장센을 완성했습니다. **루먼 코퍼레이션의 기틀이 된 건축적 영감** * 자크 타티의 영화 <플레이타임(1967)>의 건축적 풍자와 반복적인 그리드 구조를 통해 현대 사무실의 부조리함을 시각화했습니다. * 에로 사리넨과 케빈 로치가 설계한 존 디어(John Deere) 본부의 기념비적인 건축 양식에서 영감을 받아 루먼 산업의 거대하고 제도적인 위압감을 구현했습니다. * 특히 극 중 주요 공간인 MDR(거시 데이터 정제) 팀의 아이코닉한 데스크 디자인은 이러한 대규모 기업 건축 환경의 디테일에서 착안되었습니다. **미니멀리즘과 제품 디자인의 정수** * 디터 람스가 디자인한 브라운(Braun)의 벽면 콘솔(TS 45 & TG 60) 같은 디자인 클래식을 실제 세트장에 배치하여 시대를 초월한 정교함을 더했습니다. * '가능한 한 적은 디자인(As little design as possible)'을 지향하는 디터 람스의 철학을 반영하여, 불필요한 장식을 배제하고 핵심적인 형태와 기능만 남긴 '정갈하지만 외로운' 공간을 조성했습니다. **공간의 규모와 여백이 주는 감각적 효과** * 영화 <제로 다크 서티> 작업 당시의 경험을 바탕으로, 제작진 전체가 공간의 스케일을 직관적으로 이해할 수 있도록 실제 크기의 물리적 모델을 구축하여 세계관의 가독성을 높였습니다. * 코엔 형제의 영화 <파고> 속 한 장면에서 영감을 얻은 '부정적 공간(Negative Space)'의 활용은 감독 벤 스틸러에게 전달된 핵심 비주얼이었습니다. * 단순히 넓은 공간을 채우는 것이 아니라, 의도적인 비어있음을 통해 등장인물의 고립감과 심리적 압박을 시각적으로 전달하는 데 주력했습니다. **영속적인 시각적 문법을 향한 지향점** * 영화 <그녀(Her)>의 프로덕션 디자인을 참고하여 캐릭터의 감정과 공간, 의상이 완벽하게 동화되는 고도의 완성도를 추구했습니다. * 데이비드 린치의 <트윈 픽스>처럼 TV 시리즈라는 매체 안에서 독보적이고 영속적인 에너지를 가진 세계를 구축하고자 했습니다. 제레미 힌들의 작업은 프로덕션 디자인이 단순한 배경 설정을 넘어, 관객의 신체적 반응을 이끌어내는 핵심적인 서사 도구임을 증명합니다. 설득력 있는 가상 세계를 구축하고자 하는 창작자라면 고전 건축의 구조적 미학과 영화적 여백의 미를 결합하는 그의 접근 방식을 깊이 있게 탐구해 볼 가치가 있습니다.

Figmavisual-designindustrial-designarchitecture+3

figma·2025년 9월 11일원문

앱 레이어는 AI가 가치를 (새 탭에서 열림)

현재의 인공지능 기술은 마치 명령어를 직접 입력해야 했던 MS-DOS 시대와 같으며, 진정한 대중화는 모델 그 자체가 아닌 '앱 계층(App Layer)'의 발전을 통해 이루어질 것입니다. 강력한 거대언어모델(LLM)의 잠재력을 일반 사용자가 체감할 수 있는 실용적인 도구로 전환하기 위해서는 인간 중심의 인터랙션 디자인이 필수적입니다. 결국 AI의 성공 여부는 기술적 성능보다는 사용자가 그 도구를 통해 얼마나 직관적이고 가치 있는 경험을 하느냐에 달려 있습니다. **역사적 사례로 본 앱 계층의 역할** - 개인용 컴퓨터의 보급은 MS-DOS가 아닌, 클릭과 드래그가 가능한 그래픽 사용자 인터페이스(GUI)의 등장으로 가능해졌습니다. - 인터넷 또한 브라우저와 검색 엔진 같은 앱 계층이 구축된 후에야 학술적 도구를 넘어 일상의 필수품이 되었습니다. - 스마트폰은 기기 자체보다 우버(Uber)나 인스타그램 같은 앱들이 새로운 기술을 삶을 개선하는 도구로 변모시키면서 비로소 우리 삶에 스며들었습니다. **LLM 래퍼를 넘어선 새로운 인터랙션 패턴** - 단순한 'LLM 래퍼(Wrapper)' 수준을 넘어, 기술의 원시적인 능력을 구체적인 행동으로 번역해주는 제품이 승리할 것입니다. - 스마트폰의 '핀치 투 줌(Pinch to zoom)'이나 '관성 스크롤'처럼 AI 시대에 걸맞은 새로운 인터랙션 표준이 정립되어야 합니다. - 사용자는 모델의 파라미터 수보다 모델 선택기의 UI 간소화 같은 디자인적 변화에 더 민감하게 반응하며, 이는 디자인 결정이 기술적 진보만큼 중요하다는 것을 시사합니다. **문제 해결에 최적화된 맥락 중심 디자인** - 육아 앱 '굿 인사이드(Good Inside)'의 사례처럼, 범용 챗봇보다 특정 문제(예: 아이의 취침 시간 갈등)에 공감하고 구체적인 카드 형태로 솔루션을 제시하는 인터페이스가 더 큰 가치를 제공합니다. - 전문가(변호사, 의사, 디자이너 등)의 각기 다른 필요에 맞춰 인터페이스가 튜닝되어야 하며, 이는 단순한 텍스트 답변 이상의 경험을 만들어냅니다. - 브라우저 역시 단순한 탭 관리 도구에서 벗어나 앱 간의 협업을 돕는 능동적인 AI 인터페이스로 진화하고 있습니다. **정서적 공명과 디자인의 디테일** - 기술적 기능보다는 해당 제품이 사용자에게 어떤 기분을 느끼게 하는지(지원받는 느낌, 영감, 자신감 등)가 새로운 경쟁 우위가 될 것입니다. - 폰트, 색상, 타이핑 애니메이션과 같은 작은 디자인 요소들이 모여 AI를 더 자연스럽고 즐겁게 사용할 수 있는 도구로 만듭니다. - 제품 빌더들은 AI의 출력을 매끄럽고 만족스럽게 전달할 수 있는 인터랙션을 설계하고, 이를 안정적으로 확장할 수 있는 시스템을 구축해야 합니다. 성공적인 AI 제품을 만들고자 한다면 단순히 모델의 성능을 높이는 데 그치지 말고, 사용자가 당면한 구체적인 문제를 어떻게 디자인적으로 해결할 것인지에 집중해야 합니다. 기술을 '도구'로 만드는 것은 결국 디자인의 힘이며, 사용자가 기술을 의식하지 않고 자연스럽게 목표를 달성하게 만드는 인터랙션이 AI 시대의 핵심 차별점이 될 것입니다.

대규모 언어 모델생성형 AI프로덕트 디자인interaction-design+3

figma·2025년 9월 9일·3분 읽기큐레이션 요약

제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 활용 전 디자인 시스템과 브랜드 규칙을 구조화해 신뢰할 수 있는 입력을 마련한다. - 새로운 역할에는 새로운 협업 규칙이 필요하므로, 책임 범위와 검토 절차도 함께 재정의해야 한다.

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

FigmaAI디자인 시스템프로덕트 디자인+2

figma·2025년 9월 9일·3분 읽기큐레이션 요약

역할과 책임은 이제 과거의

제품 개발 조직에서 역할과 책임의 경계가 점점 흐려지고 있다. 디자이너뿐 아니라 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개 범주의 도구를 함께 사용하고 있어, 개별 도구의 효과가 분산될 수 있다. - 새로운 도구가 빠르게 등장하면서 구성원이 이를 모두 학습하고 업무 흐름에 통합하기 어려워지고 있다. - 따라서 도구를 무조건 추가하기보다 팀의 협업 방식과 목적에 맞는 도구를 선택하고, 중복되는 워크플로를 줄이는 접근이 필요하다. 역할의 경계가 사라지는 흐름은 피하기보다 효과적으로 관리해야 한다. 각 직군이 초기 단계에서 시각화와 프로토타이핑에 참여하도록 장려하되, 전문성을 존중하고 도구 수를 체계적으로 관리하면 협업 속도와 제품 품질을 함께 높일 수 있다.

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

FigmaAI디자인 시스템프로토타이핑+3

figma·2025년 9월 8일·3분 읽기큐레이션 요약

AI가 자동화할 수

AI가 프로토타입과 콘텐츠 제작을 빠르게 만들어내는 시대일수록, 좋은 결과와 훌륭한 결과를 가르는 요소는 인간의 ‘공예적 완성도’다. 호기심, 직관, 취향, 의도 같은 능력은 AI가 자동화하기 어렵고, AI의 산출물을 실제 사용자와 맥락에 맞게 조정하는 데 필수적이다. 따라서 AI는 아이디어 탐색과 반복을 가속하는 도구로 활용하되, 최종 방향과 품질 판단은 사람이 주도해야 한다. ## 호기심: 문제를 원점에서 다시 보기 - 호기심은 정해진 경로를 따르기보다 “왜 그런가?”, “만약 다르게 한다면?”을 질문하는 태도다. - Figma Make, Claude, ChatGPT 같은 도구를 활용하면 코딩 없이 프로토타입이나 캠페인 시안을 여러 방향으로 빠르게 탐색할 수 있다. - AI는 탐색 속도와 경우의 수를 늘려주지만, 다음과 같은 판단은 스스로 내리기 어렵다. - 기존 범위를 벗어나 새로운 가능성을 시험할지 여부 - 문제의 범위 자체를 다시 정의해야 하는지 여부 - 우연히 떠오른 아이디어나 직감이 더 깊이 탐구할 가치가 있는지 여부 - 초기에 폭넓게 탐색하면 이후 선택과 개선에 대한 확신이 커지고, 재작업과 팀 내 논의를 줄일 수 있다. - Figma 디자이너 Natasha Tenggoro는 Figma Make로 Figma Buzz의 동영상 기능을 여러 방식으로 프로토타이핑했다. - 다양한 방향과 예외 상황을 조기에 테스트했다. - 기능의 범위와 구현 가능성을 엔지니어링 팀이 더 명확히 이해할 수 있었다. - 개발 단계에서 발생할 수 있는 비용 큰 왕복 논의를 줄였다. ## 호기심의 실제 적용: 아이콘 체계 전체를 다시 설계하기 - Figma가 Figma Make, Figma Buzz, Figma Sites, Figma Draw를 출시하면서 Tim Van Damme은 네 제품의 아이콘을 새로 만들어야 했다. - 처음에는 새 제품별 아이콘 네 개를 만드는 작업처럼 보였지만, 작업 과정에서 기존 아이콘과 새 아이콘의 전체적인 통일성이 문제로 드러났다. - 그는 개별 아이콘만 설계하는 대신 Figma 아이콘 체계 전체를 재설계하는 방향으로 범위를 확장했다. - 이 결정으로 프로젝트 기간은 몇 주 늘었지만, 수백 가지 변형을 검토하며 다음 목표를 달성했다. - 각 아이콘이 개별 제품을 명확히 나타냄 - 전체 아이콘군은 일관된 시각 언어를 공유함 - 큰 광고 형식에서도 잘 확장됨 - Figma만의 정체성을 유지함 - 이는 주어진 과업을 빠르게 완료하는 것보다, 문제를 더 근본적인 수준에서 다시 정의하는 호기심이 더 나은 결과를 만들 수 있음을 보여준다. ## 직관: 기술적으로 작동하는 것 이상을 판단하기 - AI는 제품을 빠르게 출시 가능한 상태로 만들 수 있지만, 무엇이 고객에게 가장 잘 전달되고 공감될지는 스스로 확정하기 어렵다. - 사람은 프로토타입이 기능적으로는 정상이어도 다음과 같은 문제를 감지할 수 있다. - 사용자가 혼란을 느낄 수 있는 상호작용 - 정보가 모두 들어갔지만 지나치게 답답한 레이아웃 - 콘텐츠가 맞더라도 충분히 편안하거나 매력적으로 느껴지지 않는 경험 - CVS Health의 Eliel Johnson은 디자인을 직함이 아니라 행동으로 보며, “이것이 사용자에게 좋은 느낌을 주는가?”를 계속 질문해야 한다고 말한다. - 직관은 명확한 데이터나 규칙으로 즉시 설명되지 않더라도, 사용자 경험의 어색함과 개선 가능성을 먼저 포착하는 인간의 판단 능력이다. AI를 단순히 결과물을 자동 생성하는 수단으로 사용하기보다, 다양한 아이디어를 빠르게 실험하고 검증하는 탐색 도구로 활용하는 것이 바람직하다. 최종적으로는 사람이 문제의 범위를 다시 정의하고, 사용자의 감정과 맥락을 고려하며, “작동하는가”를 넘어 “좋은 경험인가”를 판단해야 한다.

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

Figma사용자 경험프로토타이핑생성형 AI+2

figma·2025년 9월 8일·3분 읽기큐레이션 요약

여름 캠페인의 해부:

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년대의 과장되고 낙관적인 분위기를 표현했다. ## 실용적인 시사점 대규모 캠페인에서는 완성된 결과물을 일방적으로 전달하기보다, 모든 팀이 접근할 수 있는 공유 툴킷과 실시간 리뷰 구조를 마련하는 것이 효과적이다. 특히 복고풍처럼 강한 스타일을 활용할 때는 시각적 요소를 무작정 늘리기보다 브랜드와 연결되는 핵심 규칙을 먼저 정하고, 그 안에서 다양한 실행물을 확장하는 방식이 유용하다.

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

Figma디자인 시스템typographyphotography+3

figma·2025년 9월 4일·3분 읽기큐레이션 요약

회복 탄력성 있는 디자인 팀

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

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

Figma디자인 시스템사용자 경험프로덕트 디자인+2

figma·2025년 9월 3일·3분 읽기큐레이션 요약

코프코어는 왜 갑자기

소프트웨어 기업의 로고와 굿즈가 더 이상 평범한 판촉물이 아니라 스트리트웨어와 문화적 상징으로 소비되고 있다. 이를 ‘코프코어(corpcore)’라 부르며, 빈티지 기술 기업에 대한 향수와 현대 브랜드의 한정판·패션화 전략이 이러한 흐름을 이끌고 있다. 결국 기업 굿즈는 소속감과 성취를 드러내는 동시에, 진지함과 아이러니를 오가는 자기표현 수단이 되었다. ## 코프코어의 부상 - 소프트웨어 로고가 들어간 티셔츠, 토트백, 모자, 물병 등이 밴드 티셔츠나 스포츠 유니폼처럼 착용되고 있다. - 과거에는 기업 굿즈가 촌스럽고 실용적인 판촉물로 여겨졌지만, 최근에는 패션 아이템으로 재평가된다. - 빈티지 Apple 티셔츠는 디자인이 단순함에도 Depop과 Grailed 같은 리셀 플랫폼에서 수백 달러에 거래된다. - 1997년에 출간된 Apple 티셔츠 역사서 초판도 최대 850달러에 판매될 정도로 수집 가치가 형성됐다. ## 컨퍼런스 굿즈에서 한정판 스트리트웨어로 - Figma의 연례 컨퍼런스 Config에서는 대형 설치물과 체험형 공간뿐 아니라 Season 4 컬렉션 팝업 스토어가 큰 인기를 끌었다. - 매장 앞에 긴 줄이 생겼고, Otto 캐릭터 봉제인형과 의류를 구매하려는 참석자가 몰렸다. - Figma Brand Studio는 Garrett Elizabeth Office와 8개월 동안 컬렉션을 개발했다. - 한정된 수량, 독창적인 디자인, 브랜드 팬덤이 결합하면서 기업 굿즈가 Supreme의 드롭처럼 소비됐다. - 이는 브랜드 충성도가 단순한 제품 선호를 넘어 패션과 소장 문화로 확장된 사례다. ## 초기 기술 문화에 대한 향수 - 빈티지 굿즈의 매력은 초기 웹과 개인용 컴퓨터 시대의 유물을 소유한다는 데 있다. - 현재 기술 업계 종사자 중 상당수는 어린 시절 Microsoft나 Apple을 통해 기술을 처음 접했기 때문에 해당 브랜드에 개인적인 애정과 존경을 갖고 있다. - 과거의 기술 기업은 기존 질서에 도전하는 젊은 코더와 혁신의 상징으로 인식됐다. - 빈티지 Apple 티셔츠는 단순한 로고 상품이 아니라 “성공한 집단에 속한다”거나 “성취를 지지한다”는 메시지를 전달하는 표식으로 기능한다. - 다만 오늘날 착용자는 그 시대를 직접 경험하기보다, 이미 지나간 성공 신화를 아이러니한 거리감과 함께 소비한다. ## 진지함과 아이러니의 결합 - 현대 코프코어에는 브랜드에 대한 진정한 애정뿐 아니라 과장과 부조리를 즐기는 태도도 포함된다. - Cash App은 2023년 디자이너 Marshall Columbia와 협업해 Julia Fox가 착용한 클럽 키드 스타일의 대담한 의류를 선보였다. - 기술 기업을 넘어 Dunkin’ Donuts, Lockheed Martin 같은 브랜드도 한정판 의류와 패션 컬렉션에 활용되고 있다. - 기업 굿즈 디자인의 핵심 과제는 브랜드를 진지하게 표현하면서도 지나치게 홍보물처럼 보이지 않게 만드는 것이다. - 성공적인 코프코어 상품은 회사 로고를 그대로 노출하는 대신, 패션성과 유머·아이러니를 더해 착용자가 스스로 선택한 문화적 표현처럼 보이게 한다. ## 실용적인 시사점 기업 굿즈를 만들 때는 단순히 로고를 크게 넣기보다 브랜드의 역사, 팬덤, 문화적 맥락을 디자인에 반영하는 것이 중요하다. 한정성, 협업, 독창적인 세계관을 결합하면 굿즈는 광고물을 넘어 사람들이 자발적으로 소장하고 착용하는 브랜드 경험이 될 수 있다.

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

Figmagithubmicrosoftapple+3

figma·2025년 9월 2일원문

IDC 조사: 전 세계 (새 탭에서 열림)

글로벌 시장 분석 기관인 IDC의 최신 연구에 따르면, 소프트웨어 디자인 및 개발에 참여하는 인력은 2025년 107만 명에서 2029년 144만 명으로 약 30% 이상 급증할 것으로 전망됩니다. 이는 디자인이 기업의 핵심적인 경쟁 우위 요소로 자리 잡고 있음을 시사하며, 특히 사용자 경험(UX) 중심의 솔루션에 대한 수요가 폭발적으로 늘어나고 있음을 보여줍니다. 생성형 AI의 발전은 이러한 흐름을 가속화하여 더 정교하고 시각적으로 뛰어난 디지털 제품의 생산을 촉진할 것으로 보입니다. **소프트웨어 디자인 인력의 양적 팽창** - IDC는 디지털 제품 및 인터페이스 디자인에 참여하는 지식 근로자와 개발자의 수가 2025년 1억 7백만 명에서 2029년 1억 4천 4백만 명으로 증가할 것으로 예측했습니다. - 이러한 성장은 전 산업군과 기업 규모를 막론하고 소프트웨어 디자인의 중요성이 비즈니스 전략의 핵심으로 부상했음을 의미합니다. - 디자인 중심의 문제 해결을 위한 전문 인력에 대한 수요는 향후 몇 년간 지속적으로 강화될 것입니다. **UX 디자인 직무의 독보적인 성장세** - UX 디자인 전문가 집단은 2025년부터 2029년까지 연평균 성장률(CAGR) 7.6%를 기록할 것으로 보입니다. - 이는 다른 지식 근로자 하위 범주의 성장 속도를 앞지르는 수치로, 복잡한 기술을 사용자 친화적으로 풀어내는 디자인 집약적 솔루션의 중요성을 방증합니다. - 기업들은 단순한 기능 구현을 넘어, 차별화된 인터페이스와 사용자 경험을 제공하기 위해 UX 인력을 공격적으로 확충할 전망입니다. **생성형 AI가 가져올 개발 속도와 품질의 변화** - 생성형 AI는 소프트웨어 개발의 속도와 물량을 비약적으로 증가시켜 사용자에게 더 넓은 선택지를 제공하는 촉매제 역할을 할 것입니다. - 제품 내 AI 기능 통합이 보편화됨에 따라, 디자이너와 개발자는 고도로 사용 가능하고 시각적으로 매력적인 AI 인터페이스를 구현해야 한다는 도전에 직면하게 됩니다. - 결과적으로 AI는 디자인 과정을 보조하는 동시에, 더 높은 수준의 디자인 표준을 유지해야 하는 압박으로 작용하여 숙련된 디자인 인력의 가치를 높일 것입니다. 디자인은 이제 단순한 미적 요소를 넘어 제품의 성패를 가르는 전략적 자산이 되었습니다. 기업들은 증가하는 디자인 인력 수요에 대비하고, 특히 생성형 AI를 디자인 프로세스에 효과적으로 통합하여 고도화된 사용자 경험을 신속하게 제공할 수 있는 역량을 갖추어야 합니다. 이러한 변화의 흐름 속에서 디자인과 개발의 경계를 허물고 협업 효율을 극대화하는 것이 미래 소프트웨어 시장의 핵심 경쟁력이 될 것입니다.

Figma사용자 경험생성형 AI사용자 인터페이스+3