figma·2025년 6월 16일원문

Payload의 Figma 팀 합류를 (새 탭에서 열림)

피그마(Figma)는 오픈소스 헤드리스 CMS이자 애플리케이션 프레임워크인 페이로드(Payload) 팀을 인수하여 디자인과 개발의 경계를 허무는 행보를 가속화합니다. 이번 인수는 최근 발표된 '피그마 사이트(Figma Sites)'와 시너지를 내어 개발자들에게 더욱 강력하고 유연한 도구를 제공하는 데 목적이 있습니다. 피그마는 이를 통해 디자인뿐만 아니라 실제 제품의 빌드와 배포까지 생태계 내에서 직접 수행할 수 있는 중앙 허브로 거듭날 계획입니다. **Figma Sites와 Payload의 기술적 시너지** - Config 2025에서 발표된 '피그마 사이트'와 결합하여, 디자인에서 실제 프로덕션 웹사이트 제작까지의 과정을 비약적으로 단축합니다. - Payload가 제공하는 높은 커스터마이징 자유도와 확장성을 활용해, 개발자들이 기존의 제한적인 CMS 환경에서 벗어나 더 나은 DX(개발자 경험)를 누릴 수 있도록 지원합니다. - 포춘 100대 기업들이 이미 도입하여 신뢰성을 검증받은 Payload의 기술력을 피그마 플랫폼에 이식함으로써 엔터프라이즈급 개발 환경을 구축합니다. **오픈소스 생태계 유지와 커뮤니티 협업** - Payload는 인수 후에도 오픈소스 프로젝트로 유지되며, 기존 사용자들은 현재와 동일하게 서비스를 이용할 수 있도록 독립성을 보장합니다. - 피그마의 협업 중심 철학과 Payload의 오픈소스 커뮤니티 지향점이 결합되어, 사용자 피드백을 기반으로 한 제품 로드맵을 투명하게 공유할 예정입니다. - 피그마는 오픈소스 프로젝트에 지속적으로 투자하여 개발자들이 지식을 공유하고 기술을 발전시킬 수 있는 생태계를 확장하는 데 집중할 계획입니다. **디자인-개발 통합을 통한 제품 제작 가속화** - AI의 발전으로 코드와 콘텐츠 생성이 쉬워진 환경에 발맞추어, 배포 채널을 직접 제어하고 사용자 경험을 세밀하게 튜닝할 수 있는 제어권을 강화합니다. - 단순히 디자인 결과물을 공유하는 단계를 넘어, 피그마 생태계 내에서 직접 디지털 제품을 구축하고 배포할 수 있는 환경을 조성합니다. - 디자인과 개발 사이에 전통적으로 존재해 왔던 간극을 좁힘으로써 제품 제작 팀의 전체적인 생산성을 높이는 것을 최종 목표로 삼고 있습니다. 디자이너와 개발자가 긴밀하게 협업해야 하는 조직이라면 향후 피그마 사이트와 페이로드의 통합 기능을 주목할 필요가 있습니다. 디자인 시스템을 기반으로 실제 웹 서비스를 신속하게 배포하고 관리하려는 팀에게 이번 인수는 매우 강력한 생산성 도구의 탄생을 예고합니다.

FigmaAI오픈 소스웹 개발+4

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

디자인 수업에서 가르쳐주

디자인 교육은 사용자 경험과 시각적 완성도는 가르치지만, 디자인이 매출·비용·성장·수익성 같은 비즈니스 결과와 어떻게 연결되는지는 충분히 다루지 못하는 경우가 많다. 글은 디자이너가 제품 감각(product sense)과 비즈니스 감각을 갖춰야 협업자의 언어로 소통하고 더 큰 영향력을 낼 수 있다고 주장한다. 이를 위해 전공 밖 수업, 업계 전문가와의 대화, 관련 콘텐츠 학습, 실제 제품을 만들고 출시하는 경험이 필요하다고 제안한다. ## 디자인과 비즈니스가 만나는 지점 - 디자인은 단순히 아름답거나 사용하기 좋은 화면을 만드는 작업이 아니라, 비즈니스 성과와 연결되는 활동이다. - 사용자 경험에만 집중하면 다음과 같은 요소를 놓칠 수 있다. - 기업의 목표 - 이해관계자의 요구 - 시장 내 경쟁 상황 - 매출과 비용, 수익성 - 제품 로드맵과 기능 우선순위 - 제품 감각(product sense)은 사용자의 경험을 실제로 개선하고 제품에 긍정적인 영향을 줄 수 있는 판단 능력이다. - 좋은 디자인은 사용자 참여와 성장을 촉진하지만, 나쁜 디자인은 불만과 이탈(churn)을 유발해 제품 사용을 중단하게 만들 수 있다. - 창의성과 비즈니스 목표를 대립시키기보다, 디자인 품질과 고객 만족을 비즈니스 성과와 함께 고려해야 한다. ## 디자인 교육의 비즈니스 공백 - 많은 초기 경력 제품 디자인 과정은 디자인 기초와 제작 기술을 중심으로 구성되어 있다. - 반면 디자인 결과가 사업에 미치는 영향, 제품 전략, 시장 경제성 등을 체계적으로 배울 기회는 부족하다. - 글의 저자들은 학교에서 디자인 기술을 배웠지만, 실제 제품 디자이너와 Figma Campus Leader로 활동하면서 비즈니스 이해의 중요성을 체감했다. - 이 문제는 특정 학교나 개인의 문제가 아니라, 여러 대학과 초기 경력 디자이너에게 공통적으로 나타나는 교육적 공백으로 설명된다. ## 비즈니스 감각이 뛰어난 디자이너의 역할 - 제품 개발 과정의 다양한 구성원과 효과적으로 협업할 수 있다. - 제품 디자이너 - 콘텐츠 디자이너 - UX 리서처 - 비즈니스 리서처 - 제품 관리자와 경영진 - 디자인 결정을 다음과 같은 관점에서 설명할 수 있다. - 사용자 가치 - 사업 목표 - 경쟁 환경 - 비용과 수익 - 제품 성장 가능성 - 시각적 역량뿐 아니라 제품 감각을 갖추면 협업자의 언어로 대화할 수 있어 디자인의 영향력이 커진다. - 비즈니스 이해는 뛰어난 디자인 조직과 평범한 디자인 조직을 구분하는 중요한 역량으로 제시된다. ## 전공 밖 수업으로 시야 넓히기 - 디자인 외 분야의 수업을 수강하면 시장과 제품 문제를 다른 방식으로 바라볼 수 있다. - 특히 마케팅 수업과 사례 연구는 다음을 이해하는 데 도움이 된다. - 기업이 시장을 분석하는 방식 - 제품 문제를 정의하는 방식 - 고객과 시장을 연결하는 방법 - 비즈니스 의사결정의 근거 - 디자인 지식을 비즈니스 사례와 연결해 학습하면 제품 전체를 보는 관점이 강화된다. ## 업계 전문가와 커피챗하기 - 업계 종사자와의 비공식적인 만남은 교과서에서 얻기 어려운 실무 관점을 제공한다. - 디자이너뿐 아니라 제품 개발에 관여하는 다양한 직군에게 질문하는 것이 좋다. - 각 직군이 제품 출시와 기업의 성공에 어떤 역할을 하는지 파악할 수 있다. - 대화를 통해 산업의 경제 구조, 이해관계자 간 협업 방식, 제품이 성공하는 과정을 구체적으로 이해할 수 있다. ## 뉴스레터와 팟캐스트 활용하기 - 제품 개발과 비즈니스에 관한 업계 콘텐츠를 꾸준히 접하면 디자인과 사업의 연결고리를 파악하는 데 도움이 된다. - 글에서 추천한 자료는 다음과 같다. - **Lenny’s Newsletter**: 제품 개발, 성장, 커리어에 관한 조언과 팟캐스트 제공 - **Masters of Scale**: 기업가와 비즈니스 리더의 성장 전략과 인사이트 소개 - **Dive Club**: 주요 디자인 임원의 제품 경험과 디자인 리더십에 관한 대화 제공 - 다양한 규모의 기업이 제품을 만들고 성장시키는 방식을 비교하며 학습할 수 있다. ## 직접 만들고 출시하는 경험 - 비즈니스 감각은 강의만으로 익히기보다 실제로 제품을 만들고 출시하는 과정에서 크게 성장한다. - 학생 창업, 개인 프로젝트, 스타트업, 대기업 등 어떤 환경에서도 실무 경험을 얻을 수 있다. - 직접 제품을 만들면 다음을 경험하게 된다. - 아이디어를 구체적인 제품으로 전환하기 - 제한된 자원과 시간 안에서 우선순위 정하기 - 여러 직군과 협업하기 - 사용자 반응 확인하기 - 출시 후 문제를 개선하기 - 저자는 교실에서 배우는 것보다 실제로 무언가를 구축하고 배포하는 과정이 더 영향력 있는 교육이 될 수 있다고 강조한다. 디자이너는 디자인 기술을 연마하는 동시에 시장, 제품 전략, 사용자 행동, 사업 성과를 함께 공부해야 한다. 작은 프로젝트라도 직접 만들고 출시하며, 다양한 직군의 사람들과 대화하고 비즈니스 사례를 꾸준히 접하는 것이 디자인을 실제 성과로 연결하는 가장 현실적인 방법이다.

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

Figma사용자 경험프로덕트 디자인product-management+1

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

요점 정리: 제11호

AI가 작업 방식을 바꾸고 있지만, 좋은 결과물을 만들기 위한 장인정신과 품질 기준의 중요성은 여전히 변하지 않는다는 내용이다. Figma는 AI를 단순 자동화 도구가 아니라 창의성과 감정을 표현하는 협업자로 바라보며, 디자인 맥락·신뢰·안전·연습을 통해 더 인간적인 결과를 만들어야 한다고 강조한다. ## 프롬프트로 구현하는 인터랙티브 프로토타입 - Figma Make는 자연어 프롬프트나 정적 디자인을 바탕으로 인터랙티브 프로토타입을 생성하는 prompt-to-code 도구다. - 아이디어를 코드로 옮기는 초기 단계에서 활용할 수 있으며, 사용 시점이나 제작 범위에 제한이 적다. - 효과적인 활용을 위해서는 적절한 프롬프트 작성법, 반복적인 개선, 팀의 제작 과정에 맞춘 사용 방식이 중요하다. ## 디자인 맥락을 연결하는 Figma MCP 서버 - AI 코딩 도구는 충분한 맥락이 없으면 사용자의 의도와 디자인을 정확히 반영하기 어렵다. - Figma MCP 서버는 Figma 파일의 디자인 정보를 AI 코딩 도구에 전달한다. - LLM이 변수, 컴포넌트, 스타일 등의 정보를 활용해 디자인 의도에 가까운 코드를 생성할 수 있도록 돕는다. - 이를 통해 AI 기반 코드 생성이 단순한 시각적 모방을 넘어 디자인 시스템과 구현 맥락을 반영하도록 한다. ## 효율성보다 중요한 애정과 연결 - Config 2025에서는 AI가 단순한 도구에서 협업자 또는 팀원에 가까운 존재로 발전하고 있다는 논의가 다뤄졌다. - 작업 효율만 극대화하면 결과물에서 배려, 관계, 감정 같은 인간적인 요소가 약화될 수 있다는 문제를 제기한다. - “최소 실행 가능한 결과물”을 만드는 것과 충분한 완성도·의미를 담는 것 사이의 균형이 필요하다. - 효율성은 목표가 아니라 좋은 작업을 돕는 수단이어야 한다는 관점이다. ## 신뢰와 안전을 우선한 AI 정신건강 동반자 - Headspace는 AI 정신건강 동반자 Ebb를 설계하면서 신뢰와 안전을 핵심 기준으로 삼았다. - 캐릭터의 이름과 외형뿐 아니라 대화 방식과 conversational guideline까지 세심하게 설계했다. - AI라는 사실을 숨기지 않으면서도 사용자가 지지받고 있다고 느끼도록 균형을 맞췄다. - 정신건강처럼 민감한 영역에서는 기능 구현보다 투명성, 사용자 보호, 적절한 상호작용 설계가 우선되어야 한다. ## 장인정신은 반복적인 연습에서 나온다 - Figma의 출판물 *Practice*는 디자인과 제작 역량을 키우는 과정을 다룬다. - 숙련에는 인내심, 정밀함, 경계를 넓히려는 태도, 지속적인 연습이 필요하다. - AI가 제작 속도를 높이더라도 결과물의 완성도와 독창성을 판단하고 다듬는 능력은 여전히 사람에게 요구된다. - 좋은 작업은 한 번의 생성으로 완성되는 것이 아니라 반복적인 수정과 실험을 통해 만들어진다. AI 도구를 사용할 때는 속도와 자동화만 추구하기보다 디자인 맥락을 충분히 제공하고, 결과물을 반복해서 검토하며, 신뢰·안전·감정적 경험까지 고려하는 것이 바람직하다. Ultimately, AI가 제작을 돕더라도 품질과 의미를 결정하는 것은 여전히 사람의 관심과 장인정신이다.

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

FigmaAI대규모 언어 모델프로토타이핑+3

figma·2025년 6월 9일원문

Figma Make 사용을 위한 (새 탭에서 열림)

Figma Make는 프롬프트 입력을 통해 아이디어를 실제 작동하는 프로토타입과 코드로 즉시 변환해주는 강력한 도구로, 설계 단계에서 상세한 맥락을 제공하는 것이 성공의 핵심입니다. 단순히 결과물을 생성하는 것에 그치지 않고 기존 디자인 자산을 최적화하고 복잡한 프로젝트를 단계별로 세분화하여 접근할 때 최상의 성과를 거둘 수 있습니다. 이를 통해 제품 팀은 단순한 시안 확인을 넘어 실제 앱과 유사한 수준의 인터랙티브한 사용자 경험을 신속하게 검증할 수 있습니다. **초기 프롬프트의 상세 정보 극대화** * 첫 번째 프롬프트에 구체적인 정보를 많이 포함할수록 사후 수정에 드는 시간을 획기적으로 줄일 수 있습니다. * 프롬프트 구성 시 작업 내용(Task), 디자인이 놓인 맥락(Context), 핵심 디자인 요소, 상호작용에 따른 기대 동작, 제약 사항(기기 종류, 레이아웃 등)을 명확히 정의해야 합니다. * Figma Make는 Anthropic의 Claude 3.5 Sonnet 모델을 기반으로 하므로, "수직 정렬"처럼 모호한 표현보다는 "요소를 20px 아래로 이동" 또는 "버튼 사이에 16px 간격 추가"와 같이 구체적인 수치를 사용하는 것이 효과적입니다. **디자인 파일의 사전 정리 및 최적화** * 백지상태에서 시작하는 것(0→1)뿐만 아니라 기존 디자인을 변환(1→1)할 때도 탁월하며, 이를 위해 오토 레이아웃(Auto Layout)과 레이어 명명 규칙을 철저히 정리하는 것이 중요합니다. * Figma의 '레이어 이름 변경(Rename layers with AI)'이나 '오토 레이아웃 제안' 기능을 활용해 정돈된 프레임을 전달하면 AI가 디자인의 의도와 구조를 훨씬 더 정확하게 파악합니다. * 생성된 결과물이 화면 밖으로 벗어날 경우 "내 화면 크기에 맞춰 반응형으로 만들어줘" 또는 "모바일 사이즈 유지"와 같은 후속 명령으로 레이아웃을 교정할 수 있습니다. **복잡한 프로젝트의 단계별 세분화** * 한 번의 프롬프트로 방대한 기능을 구현하려 하기보다, 작은 단위의 기능이나 페이지별로 나누어 점진적으로 빌드하는 것이 AI의 정확도를 높이는 방법입니다. * 예를 들어 금융 대시보드를 만들 때, 먼저 핵심 레이아웃을 잡은 뒤 '노트 추가 기능', '통화 선택 체크박스' 등을 순차적인 프롬프트로 추가하여 제어력을 유지해야 합니다. * 각 요소(예: 런던 아이, 빅벤 등 개별 오브젝트)를 별도의 코드 폴더로 분리하도록 명령하면, 전체 환경에 영향을 주지 않고 특정 컴포넌트만 정밀하게 수정하거나 유지보수하기 용이합니다. **동작 중심의 마이크로 인터랙션 구현** * 정적인 디자인을 넘어 "음악 재생 시 CD가 회전하게 해줘"와 같은 구체적인 동작을 지시하여 생동감 있는 프로토타입을 만들 수 있습니다. * 복잡한 로직이 필요한 인터랙션의 경우, 베이스가 되는 그리드 컴포넌트를 먼저 구축한 후 세부적인 마우스 효과나 호버 상태를 단계적으로 입히는 전략이 유효합니다. * 만약 반복적인 수정에도 결과가 만족스럽지 않다면, 이전 시도에서 배운 교훈을 바탕으로 새 파일에서 프롬프트를 다시 구성하여 시작하는 것이 더 효율적일 수 있습니다. 성공적인 Figma Make 활용을 위해서는 디자이너의 명확한 시각적 비전과 이를 논리적으로 전달하는 프롬프트 엔지니어링 역량이 결합되어야 합니다. 한 번에 완벽한 결과를 기대하기보다는 초기 생성물을 기반으로 수십 개의 미세 조정 프롬프트를 거치며 완성도를 높여가는 반복적(Iterative) 프로세스를 수용할 때 가장 강력한 결과물을 얻을 수 있습니다.

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

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

빌 애킨슨의 더 인간적인

Bill Atkinson의 인터페이스 철학은 복잡한 기술을 사용자가 직관적이고 즐겁게 다룰 수 있는 경험으로 바꾸는 데 있다. 그는 제한된 하드웨어 안에서 효율적인 해법을 찾고, 비전문가도 창작할 수 있는 도구를 만들며, 사용자가 도구 자체를 의식하지 않고 작업에 집중하도록 설계했다. 이 글은 QuickDraw, MacPaint, HyperCard에 드러난 그의 접근을 바탕으로 인간적인 인터페이스를 만드는 10가지 원칙을 제시한다. ## 빌 Atkinson과 인간 중심 컴퓨팅 - Atkinson은 Apple의 초기 핵심 엔지니어로서 QuickDraw, MacPaint, HyperCard 개발에 기여했다. - 신경생물학과 컴퓨팅을 함께 공부한 배경을 바탕으로 인간과 기계가 협력하는 방식을 탐구했다. - QuickDraw는 Macintosh의 시각적 인터페이스를 가능하게 했고, MacPaint는 비트맵 편집을 대중화했다. - HyperCard는 프로그래밍을 몰라도 시각적 도구와 자연어 스크립트로 인터랙티브 소프트웨어를 만들 수 있게 했다. ## 제약을 피하지 말고 제약 안에서 설계하기 - 초기 Macintosh는 RAM이 128KB에 불과하고 프로세서도 느렸지만, Atkinson은 그래픽 품질을 타협하지 않았다. - 도형과 곡선을 빠르게 그리는 효율적인 알고리즘을 개발해 제한된 하드웨어에서도 부드러운 그래픽을 구현했다. - 무작정 더 많은 자원을 요구하기보다, 제약을 설계의 출발점으로 삼아 우아한 해결책을 찾았다. - 제품의 품질은 자원 규모보다 문제를 해결하는 알고리즘과 설계 방식에 좌우될 수 있다. ## 창작을 전문가의 전유물에서 해방하기 - HyperCard는 소프트웨어 제작에 필요한 전문 프로그래밍 지식을 낮추는 것을 목표로 했다. - 교사는 교육용 프로그램을, 예술가는 멀티미디어 경험을, 기업은 맞춤형 데이터베이스를 직접 만들 수 있었다. - 창작 도구는 전문가만을 위한 기능 집합이 아니라, 더 많은 사람이 자신의 아이디어를 구현하게 하는 수단이어야 한다. - Atkinson은 자신을 “예술가와 발명가의 중간”으로 표현하며 기술과 창작의 결합을 강조했다. ## 인터페이스를 자연스럽고 필연적으로 만들기 - 메뉴 바, 더블클릭, 부드러운 곡선 렌더링처럼 오늘날 당연하게 여겨지는 상호작용의 토대를 만들었다. - 메뉴 바는 애플리케이션 전반에 일관된 명령 체계를 제공한다. - 더블클릭과 드래그 앤 드롭은 명령어를 입력하지 않고도 대상을 직접 조작하는 방식을 정착시켰다. - 훌륭한 인터페이스는 사용자가 도구를 배우거나 의식하지 않고 작업 자체에 집중하게 만든다. ## ‘당연한 해법’에 의문 제기하기 - Atkinson은 HyperCard가 컴퓨터 내부의 연결에만 집중했고, 네트워크를 통한 연결까지 확장하지 못했다고 훗날 평가했다. - 이는 자신의 가정과 설계 방향도 비판적으로 돌아보는 태도를 보여준다. - 명령줄이 유일한 방식처럼 여겨질 때 그래픽 인터페이스를 개척했고, 비트맵 편집이 어렵다고 여겨질 때 실제 미술 도구처럼 작동하는 MacPaint를 만들었다. - 무엇인가가 명백히 불가능하거나 명백히 옳아 보일수록, 그 전제가 정말 타당한지 다시 검토해야 한다. ## 기능을 넘어 즐거움을 설계하기 - MacPaint는 어린아이도 별도의 교육 없이 바로 그림을 그릴 수 있을 만큼 직관적이었다. - 페인트 통은 실제로 페인트를 붓는 것처럼 작동하고, 붓 도구는 단순하고 직접적인 조작을 제공했다. - 사용자가 실수할까 걱정하기보다 탐색하고 놀도록 유도하는 상호작용을 설계했다. - 좋은 도구는 작업을 빠르게 끝내는 데 그치지 않고, 작업 자체를 더 창의적이고 즐겁게 만든다. ## 글에 포함된 범위 - 제공된 원문은 6번째 원칙의 제목인 “최종 경험을 염두에 두고 엔지니어링하기”에서 중단되어 있다. - 따라서 나머지 6~10번째 원칙의 구체적인 내용은 위 요약에 포함하지 않았다. 실무적으로는 기술적 제약을 먼저 이해하되 사용자 경험을 희생하지 말고, 비전문가도 쉽게 시도할 수 있는 상호작용을 설계하는 것이 이 글의 가장 중요한 교훈이다.

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

Figmahuman-computer-interactioninterface-designgraphical-user-interface+3

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

더블 클릭: MCP가 에이

MCP(Model Context Protocol)는 AI 어시스턴트와 외부 도구·데이터 소스를 연결하는 공통 규격으로, 도구마다 별도 연동을 개발해야 했던 문제를 줄인다. 글은 MCP가 LLM이 대화 중 실시간으로 도구를 인식하고 호출하게 함으로써 에이전틱 AI의 속도와 확장성을 크게 높이는 “가속 장치”가 될 수 있다고 설명한다. HTTP나 USB-C처럼 가볍고 조합 가능하며 상호운용적인 표준으로 자리 잡을 가능성도 제시한다. ## MCP의 등장과 역할 - Anthropic이 2024년 11월 MCP를 발표했고, OpenAI가 지원을 발표하면서 대중적인 관심이 급격히 커졌다. - Claude, Copilot, Cursor 같은 AI 애플리케이션이 외부 도구 및 데이터 소스와 통신하는 방식을 표준화한다. - 기존에는 AI 제품과 각 API 사이에 맞춤형 통합을 도구별로 따로 구축해야 했다. - MCP를 사용하면 하나의 공통 프로토콜을 통해 다양한 서버와 도구를 연결할 수 있다. - 글에서는 MCP를 다음과 같이 비유한다. - AI 애플리케이션을 위한 USB-C - 다양한 페이로드를 운반하는 HTTP - 프로토콜 자체가 특정 데이터 형식이나 기능에 강하게 종속되지 않기 때문에, 여러 도구를 조합하고 확장하기 쉽다. ## 에이전틱 AI와 실시간 도구 사용 - MCP는 LLM이 단순히 코드를 생성하는 데 그치지 않고, 대화 도중 필요한 도구를 직접 인식하고 호출하도록 한다. - 일반적인 API 연동 방식에서는 다음 과정이 반복될 수 있다. - LLM이 API 호출 코드를 생성한다. - 생성된 코드를 실행한다. - 결과를 다시 LLM에 전달한다. - MCP에서는 도구가 모델의 사용 가능한 기능으로 노출되므로, 매번 별도의 실행 코드를 생성하지 않아도 된다. - 그 결과 도구 사용 과정이 더 빠르고 효율적이며, 여러 도구를 연결한 복합 작업도 구현하기 쉬워진다. - 이는 사용자의 요청에 따라 AI가 검색, 일정 관리, 콘텐츠 생성 등 여러 단계를 연속적으로 수행하는 에이전틱 AI의 기반이 된다. ## MCP가 제공하는 확장성과 조합 가능성 - MCP 서버 생태계는 빠르게 확대되고 있으며, 공개 서버 목록도 지속적으로 늘어나고 있다. - 서로 다른 서비스의 MCP 서버를 연결하면 하나의 에이전트가 여러 시스템을 넘나들며 작업할 수 있다. - Tenstorrent의 사례에서는 네 개의 에이전트가 Google Maps, Airbnb, Google Calendar, Weather를 함께 사용해 자동화된 여행 서비스를 구성했다. - Blender MCP 서버 사례에서는 사용자가 몇 문장으로 설명한 “보물을 지키는 로우폴리 드래곤” 3D 장면을 생성했다. - 이러한 사례는 MCP가 단일 API 연동을 넘어, 여러 전문 도구를 조합하는 워크플로를 가능하게 함을 보여준다. ## Figma MCP 서버와 디자인 기반 코드 생성 - Figma는 개발자 workflow에 Figma를 직접 연결하는 MCP 서버 베타를 공개했다. - 이 서버의 목적은 LLM이 디자인 정보를 바탕으로 코드를 생성하도록 돕는 것이다. - 디자인 파일의 맥락을 AI가 실시간으로 활용하면, 단순한 시각적 추측보다 실제 디자인 사양에 가까운 코드를 생성할 수 있다. - MCP는 디자인 도구와 개발 도구 사이의 간극을 줄이고, 디자인-informed code generation을 실현하는 연결 계층으로 활용될 수 있다. ## MCP가 의미하는 에이전틱 웹의 방향 - Microsoft CTO Kevin Scott은 MCP가 에이전틱 웹의 HTTP와 같은 기반이 될 수 있다고 평가했다. - MCP의 핵심 가치는 특정 AI 모델이나 서비스에 종속되지 않는 상호운용성이다. - 표준이 널리 채택되면 AI 에이전트가 다양한 서비스와 도구를 공통 방식으로 발견하고 사용할 수 있다. - 동시에 도구를 연결하는 일이 쉬워질수록, 여러 에이전트와 서비스가 복잡하게 결합된 자동화도 빠르게 늘어날 수 있다. MCP는 AI를 외부 시스템과 연결하는 표준 계층으로서 에이전틱 AI의 실용화를 앞당길 가능성이 크다. 다만 실제 도입 시에는 연결할 도구의 권한, 데이터 접근 범위, 실행 결과에 대한 검증과 사용자 승인 절차를 함께 설계하는 것이 중요하다.

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

Figma대규모 언어 모델AI 에이전트모델 컨텍스트 프로토콜+1

figma·2025년 6월 3일원문

MCP 서버 소개: 워크 (새 탭에서 열림)

Figma는 개발자가 LLM 기반 협업 도구에서 디자인 맥락을 실시간으로 활용할 수 있도록 지원하는 'Figma MCP(Model Context Protocol) 서버'를 베타 버전으로 출시했습니다. 이 서버는 단순한 이미지 전달을 넘어 디자인 시스템의 컴포넌트, 변수, 스타일링 정보를 AI에게 직접 제공함으로써, 개발자가 사용하는 코드베이스의 패턴에 최적화된 고품질 코드를 생성하도록 돕습니다. 결과적으로 Cursor, VS Code Copilot 등 AI 기반 코딩 도구에서 디자인 의도를 더욱 정확하고 효율적으로 구현할 수 있게 되었습니다. ### 디자인 의도를 코드로 전환하는 MCP 서버의 역할 * **표준화된 컨텍스트 제공**: MCP는 애플리케이션이 LLM에 맥락을 제공하는 표준 규격으로, 이를 통해 Figma의 디자인 데이터를 가공 없이 AI 에이전트(Cursor, Windsurf, Claude Code 등)에 직접 연결합니다. * **학습 데이터의 한계 극복**: LLM은 일반적인 코드는 잘 작성하지만 특정 팀의 고유한 코드 구조나 프레임워크 패턴은 알지 못합니다. MCP 서버는 팀 고유의 디자인 의도를 전달해 이 간극을 메웁니다. * **효율적인 워크플로우**: 단순히 디자인을 보고 코드를 짜는 단계를 넘어, AI가 디자인의 구조와 논리를 스스로 이해하고 멀티 레이어 애플리케이션 흐름을 구축할 수 있도록 지원합니다. ### 디자인 시스템 및 패턴 메타데이터 활용 * **정밀한 코드 매칭**: 디자인에 정의된 컴포넌트, 변수(Variable), 스타일 정보를 직접 전달합니다. AI가 단순히 비슷한 색상을 찾는 것이 아니라, 시스템에 정의된 정확한 토큰 이름과 변수명을 사용하게 합니다. * **Code Connect 연동**: Figma에 설정된 'Code Connect' 정보를 바탕으로 AI에게 해당 디자인이 구현된 실제 코드 파일의 경로를 정확히 안내하여 중복 컴포넌트 생성을 방지합니다. * **토큰 절약 및 정확도 향상**: 디자인 시스템의 패턴을 직접 참조함으로써 AI가 탐색에 소모하는 토큰 양을 줄이고, 디자인 시스템을 벗어난 코드를 생성할 확률을 낮춥니다. ### 시각적 정보와 상호작용의 결합 * **고수준 스크린샷 제공**: 텍스트 데이터로 설명하기 어려운 전체적인 화면 흐름, 반응형 레이아웃, 섹션 간의 관계를 스크린샷을 통해 AI에게 시각적으로 보완 설명합니다. * **인터랙션 및 의사 코드(Pseudocode)**: 복잡한 상태 변화나 UI 시퀀스를 설명하기 위해 '의사 코드' 형태의 프로토타입 데이터를 제공합니다. 이는 단순한 메타데이터 트리보다 AI가 컴포넌트의 동작 논리를 이해하는 데 훨씬 효과적입니다. * **선택적 컨텍스트 제어**: 사용자는 특정 도구가 반환하는 정보의 양을 설정하여, 현재 작업 중인 코드 구현에 가장 적합한 수준의 디자인 컨텍스트를 조절할 수 있습니다. ### 실용적인 활용 및 향후 계획 현재 Figma MCP 서버는 베타 단계로, VS Code의 Copilot이나 Cursor 같은 도구에 연결하여 즉시 디자인 기반 코드 생성을 테스트해 볼 수 있습니다. 향후 Figma는 원격 서버 기능 지원과 코드베이스와의 더욱 깊은 통합을 포함한 업데이트를 지속할 예정입니다. 디자인 시스템이 잘 구축된 팀일수록 이 서버를 통해 디자인과 코드 간의 일치성을 극대화하는 경험을 할 수 있을 것입니다.

Figma대규모 언어 모델AI 에이전트모델 컨텍스트 프로토콜+3

figma·2025년 5월 28일원문

며칠의 지연 시간에서 실 (새 탭에서 열림)

피그마(Figma)는 급격한 사용자 증가와 데이터 볼륨 확대에 대응하기 위해 기존의 배치 기반 동기화 시스템을 실시간 증분 동기화(Incremental Synchronization) 파이프라인으로 전면 재구축했습니다. 과거 수일이 소요되던 데이터 동기화 지연 시간을 근실시간(Near Real-time) 수준으로 단축함으로써 데이터 분석의 신속성과 정확성을 확보했습니다. 이 과정에서 상용 솔루션 대신 자체 인프라에 최적화된 기술 스택을 선택하여 비용 절감과 확장성이라는 두 마리 토끼를 잡는 데 성공했습니다. **기존 배치 동기화 방식의 한계와 비용 문제** * 2020년에 설계된 초기 시스템은 매일 전체 테이블을 `SELECT *` 쿼리로 조회하여 S3에 업로드하고 Snowflake로 가져오는 단순한 구조였습니다. * 데이터 규모가 커짐에 따라 동기화 작업이 6시간에서 길게는 수일까지 지연되었으며, 이를 처리하기 위해 고가의 데이터베이스 복제본을 유지하는 데 매년 수백만 달러의 비용이 발생했습니다. * 동기화 지연은 전사 KPI 분석 및 비즈니스 의사결정을 방해하는 핵심 병목 구간이 되었습니다. **상용 솔루션 대신 자체 구축을 선택한 이유** * **유연성:** Amazon RDS와 같은 특정 클라우드 벤더의 API를 활용해 복제본 유지 관리 오버헤드 없이 직접 스냅샷을 생성하는 등 인프라 최적화가 필요했습니다. * **비용 효율성:** 대규모 데이터 환경에서 상용 솔루션을 사용할 경우 자체 구축 대비 약 5~10배 이상의 비용이 발생할 것으로 예상되었습니다. * **확장성:** 피그마의 지속적인 성장에 맞춰 빠르게 혁신하고 제어할 수 있는 맞춤형 파이프라인이 필요했습니다. **증분 동기화를 위한 기술적 아키텍처** * **스냅샷 및 데이터 적재:** Amazon RDS의 스냅샷 내보내기 기능을 사용해 S3로 초기 데이터를 복사하고, Snowflake의 `COPY INTO` 문을 통해 베이스 테이블에 로드합니다. * **CDC(Change Data Capture) 스트리밍:** Kafka Connect를 활용해 Postgres의 변경 로그를 실시간으로 캡처하고, Amazon MSK를 거쳐 Snowflake의 CDC 테이블로 스트리밍합니다. * **증분 병합(Merge):** Snowflake의 저장 프로시저(Stored Procedure)와 태스크(Task) 기능을 이용해 베이스 테이블과 CDC 데이터를 주기적으로 병합하는 맞춤형 `MERGE` 로직을 구현했습니다. **데이터 무결성을 위한 워크플로우 설계** * **부트스트랩(Bootstrap):** 새로운 테이블을 파이프라인에 추가할 때 스키마 진화에 대응할 수 있도록 아티팩트를 버전화하고, 원자적 뷰(View) 업데이트를 통해 서비스 중단 없는 전환을 지원합니다. * **검증(Validation):** 부분적 실패, 설정 오류, 소스 데이터의 이상 현상으로 인한 데이터 부패를 방지하기 위해 파이프라인 전 과정에서 데이터의 정확성과 일관성을 검증하는 프로세스를 통합했습니다. 데이터 파이프라인의 성능 한계에 직면한 조직은 단순히 컴퓨팅 파워를 늘리기보다, 전체 데이터를 옮기지 않는 '증분 동기화'와 자사 환경에 최적화된 CDC 기술 스택을 도입함으로써 비용과 성능 문제를 근본적으로 해결할 수 있습니다. 특히 대규모 환경에서는 벤더 종속성을 탈피한 자체 아키텍처 설계가 장기적인 확장성 면에서 더 유리할 수 있습니다.

PostgreSQLApache Kafkaamazon-s3data-pipeline+4

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

0가지 규칙 | 피그마

메타 CTO 앤드루 “보즈” 보스워스는 AI와 공간 컴퓨팅이 기존 디자인 패러다임을 바꿀 것이라고 본다. 디자이너는 기술 자체보다 실제 인간의 문제에서 출발하고, 당연하게 여겨온 제약과 상호작용 방식을 의심해야 한다. 또한 거친 프로토타입을 빠르게 만들고 전체 시스템을 함께 설계하며, 사용자의 의도를 이해하는 도구와 지속적인 개선을 지향해야 한다. ## 1. 실제 문제를 가진 사람에서 출발하기 - 제품 개발의 기준점은 기술이나 유행이 아니라 문제를 겪는 실제 사람이어야 한다. - “이 도구가 문제를 해결하는가?”를 먼저 물어야 한다. - 최종적으로 제품의 가치를 판단하는 사람은 사용자다. - 사용자가 유용하다고 느끼면 사용하고, 그렇지 않으면 외면한다. ## 2. 당연하게 받아들인 제약을 의심하기 - 우리는 기존 디자인 관습과 시스템 안에서 살아가며, 그것을 자연스러운 현실처럼 받아들이기 쉽다. - 데이비드 포스터 월리스의 ‘물속에 사는 물고기’ 비유처럼, 현재의 제약이 인위적으로 만들어졌다는 사실을 인식해야 한다. - 다음과 같은 질문이 필요하다. - 지금의 접근 방식이 문제에 정말 적합한가? - 이 제약은 실제 제약인가? - 바꾸거나 없앨 수 있는 규칙은 무엇인가? ## 3. 전체 상호작용 패러다임을 의심하기 - 현재의 컴퓨팅 환경은 단순한 의도를 여러 앱과 단계로 쪼개는 경우가 많다. - 예를 들어 운동 중 음악을 듣기 위해 음악 권리 구조, 서비스별 제공 여부, 여러 음악 앱 사이의 전환을 이해해야 하는 것은 부자연스럽다. - 사용자가 “노래를 듣고 싶다”는 의도를 복잡한 앱 조작으로 번역하지 않아도 되는 새로운 상호작용이 필요하다. - 약 60년간 이어진 기존 컴퓨팅 방식을 부분적으로 개선하는 데 그치지 말고, 전체 방식을 재구상해야 한다. ## 4. 발명과 최적화를 구분하기 - 디자인에는 서로 다른 두 가지 모드가 있다. - **제로 투 원:** 고객과 제약이 없는 상태에서 완전히 새로운 가능성을 탐색하는 단계 - **최적화:** 실제 사용자와 함께 기존 결과물을 다듬고 개선하는 단계 - 공간 인터페이스와 AI는 기존 제약이 적은 새로운 영역이므로, 과거의 방식에 얽매이지 않고 발명가처럼 접근할 수 있다. - 현재 자신이 새로운 것을 발명하는 중인지, 기존 제품을 최적화하는 중인지 구분해야 한다. ## 5. 직관과 취향으로 올바른 문제 공간 선택하기 - 복잡한 최적화 문제에서는 어느 지점에서 시작하느냐가 결과에 큰 영향을 준다. - 낮은 언덕을 아무리 열심히 올라가도, 처음부터 더 좋은 지형에서 시작한 사람보다 나은 결과를 얻기 어려울 수 있다. - 디자이너의 직관과 취향은 어떤 문제와 방향을 선택할지 결정하는 중요한 도구다. - 선택 이후에는 여전히 많은 노력과 반복이 필요하지만, 적어도 가능성이 높은 영역에서 시작해야 한다. ## 6. 거칠더라도 가능한 모든 프로토타입 만들기 - 새로운 기술의 가능성은 문서나 토론만으로 판단하기 어렵다. - 메타는 시선 추적 모자를 쓰고 메시 벽으로 만든 방을 사용하는 등 조잡한 실험을 통해 기술의 가능성을 확인해 왔다. - 완성도 낮은 프로토타입이라도 실제로 사용해 보면 기술이 어떤 경험을 제공할 수 있는지 감을 얻을 수 있다. - 빠른 실험은 어떤 아이디어를 더 발전시킬지 결정하는 데 효과적이다. ## 7. 부분이 아니라 전체 시스템 설계하기 - 공간 컴퓨팅에서는 제스처, 피드백, 기능을 서로 분리해 설계하기 어렵다. - 함께 고려해야 할 요소는 다음과 같다. - 사용자가 어떤 제스처를 하는가 - 시각·청각·촉각 중 어떤 피드백을 제공하는가 - 그 상호작용으로 어떤 기능이 열리는가 - 이 요소들은 함께 발전하고 반복적으로 조정되어야 한다. - 진정한 디자인은 개별 화면을 만드는 것이 아니라 상호작용 전체를 설계하는 일이다. ## 8. 사용자의 의도를 이해하는 도구 만들기 - 미래의 도구는 사용자가 무엇을 하려는지 파악할 수 있어야 한다. - ‘마음 이론(theory of mind)’은 자신과 별개로 의도와 목표를 가진 존재가 있음을 이해하는 능력을 뜻한다. - 도구 역시 사용자의 목표를 추론하고 적절히 도와야 한다. - 다만 도구의 자율성은 너무 높아도, 너무 낮아도 안 되며 사용자를 대신하는 정도를 세심하게 조절해야 한다. ## 9. 자신을 완성된 제품으로 보지 않기 - 제품은 출시된 순간 끝나는 것이 아니라 다음 버전을 준비하는 지속적인 과정이다. - 보스워스는 현재의 자신과 제품을 모두 “V43” 같은 버전으로 바라본다. - 다음 버전에서는 기존 버그를 고치지만 새로운 버그도 생길 수 있으며, 그 과정 자체를 즐겨야 한다. - 업무에 적용하는 반복과 개선의 태도를 자기 자신에게도 적용해야 한다. ## 10. 인터페이스를 사라지게 만들기 - 이상적인 인터페이스는 사용자가 의식하지 않아도 목적을 달성하게 하는 매끄러운 경험에 가깝다. - 인터페이스 자체가 본질적인 가치를 갖는 것이 아니라, 사용자가 원하는 일을 방해 없이 수행하도록 돕는 것이 중요하다. - AI와 공간 컴퓨팅은 화면과 앱을 직접 조작하는 과정을 줄이고, 의도 중심의 상호작용을 가능하게 할 수 있다. 실무적으로는 먼저 사용자의 구체적인 문제를 정의한 뒤, 기존 제약을 의심하고 작은 프로토타입을 빠르게 만들어보는 것이 좋다. 특히 새로운 기술을 다룰 때는 화면 하나가 아니라 제스처·피드백·기능·도구의 자율성을 포함한 전체 경험을 함께 설계해야 한다.

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

AIhuman-computer-interactioninterface-designvirtual-reality+4

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

더블 클릭: 효율성이

Config 2025에서 Figma는 AI의 가치를 단순한 속도와 자동화가 아니라 연결, 배려, 장인정신에서 찾는다. “효율성은 사랑을 죽인다”와 “디자인은 감정을 좇는 일”이라는 메시지는 AI가 인간의 창작 과정을 대체하기보다 의미와 감정을 더 잘 구현하도록 돕는 도구여야 한다는 주장으로 이어진다. 결론적으로 기술의 방향은 정해진 운명이 아니라, 사람들이 어떤 가치를 선택하느냐에 따라 의도적으로 결정된다. ## 효율성보다 중요한 창작의 감정 - Config 2025의 주요 화두는 AI 자체보다 **연결과 배려를 만드는 방법**이었다. - Smith & Diction은 협업형 브랜드 디자인 발표에서 “효율성은 사랑을 죽인다”고 강조했다. - Figma 공동 창업자이자 CEO인 Dylan Field는 “디자인은 감정을 좇는 일”이라고 표현했다. - 이는 디자인을 목표 지표, 작업 속도, 생산성만으로 평가할 수 없으며, 결과물에 담긴 감정과 의미도 중요하다는 관점이다. ## AI는 자동화보다 창작의 보조 수단 - 디자인 업계는 AI를 인간의 작업을 완전히 자동화하는 도구보다 **창작을 확장하고 보완하는 도구**로 바라보기 시작했다. - 새로운 AI 도구와 스토리텔링 프레임워크는 더 빠른 결과뿐 아니라 목적과 마법이 담긴 결과물을 만드는 데 활용될 수 있다. - Paradigm의 디자인 책임자 Yang You는 빠르게 변하는 환경에서도 “장인정신이 핵심이며, 배려가 이를 전달하는 통로”라고 말했다. - 따라서 AI의 성공 기준은 작업 시간을 얼마나 줄였는지뿐 아니라, 사람이 더 깊이 생각하고 더 의미 있는 것을 만들도록 돕는지에 달려 있다. ## 기술과 문화적 가치의 관계 - Atonaton의 창립자 Madeline Gannon은 기술이 문화를 반영한다고 설명했다. - 자동화는 피할 수 없이 발생하는 현상이 아니라, 사회가 어떤 가치를 선택하느냐에 따라 달라지는 의도적인 결과다. - AI를 어떻게 설계하고 어디에 적용할지는 기술적 문제가 동시에 윤리적·문화적 선택이기도 하다. - 기업과 디자이너는 효율성만을 최적화할 것이 아니라, 사람之间의 관계와 창작의 의미를 보존하는 방향을 선택해야 한다. ## 느림과 물리적 창작의 가치 - Polaroid는 AI 기반 사진 촬영 팁을 제공하면서도 사용자가 천천히 관찰하고 창의적으로 작업하며 물리적인 결과물을 만들도록 돕는 방향을 취한다. - Polaroid의 제품 철학은 AI를 사용하더라도 창작 경험을 지나치게 빠르고 자동화된 과정으로 만들지 않는 데 있다. - 이는 디지털 기술이 아날로그적 경험, 손으로 만드는 과정, 개인적인 의미와 공존할 수 있음을 보여준다. ## AI 시대의 새로운 태도 - Config 2025의 분위기는 AI에 대한 무조건적인 낙관이나 효율성 경쟁보다, 인간이 무엇을 아끼고 어떤 감정을 전달할지에 대한 성찰에 가까웠다. - 디자인의 핵심은 기능 구현이나 생산성 향상을 넘어 사람에게 특정한 감정과 경험을 전달하는 데 있다. - AI는 인간의 관심과 애정을 대체하기보다, 사람이 더 중요한 부분에 집중하도록 돕는 방식으로 사용되어야 한다. AI를 도입할 때는 “얼마나 빨라지는가”뿐 아니라 “무엇을 더 의미 있게 만들 수 있는가”를 함께 물어야 한다. 반복 업무는 자동화하되, 판단·배려·장인정신처럼 결과물에 인간적인 의미를 부여하는 과정은 의도적으로 보존하는 것이 바람직하다.

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

FigmaAI프로덕트 디자인collaborative-design+2

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

Figma의 디자인과 크

Figma의 『Practice』는 좋은 결과물이 반복적인 연습, 실패, 관찰, 정교함을 통해 만들어진다는 생각을 담은 Config 2025의 세 번째 잡지다. 이 책은 기술적 숙련을 전통적 장인정신과 연결하면서도, 새로운 도구와 기술에 맞춰 craft가 계속 변화한다고 말한다. 중요한 것은 단순히 “작동하는가”가 아니라 “어떻게 작동하는가”이다. ## 『Practice』의 주제와 제작 배경 - 책의 중심 주제는 의도를 가지고 무언가를 만드는 **craft**다. - 숙련에는 다음과 같은 과정이 필요하다고 설명한다. - 반복적인 시도와 연습 - 실패를 통한 학습 - 더 뛰어난 사람에게 배우기 - 위험을 감수하고 새로운 방식 시도하기 - 세부 사항을 관찰하고 정밀하게 다듬기 - Figma CEO Dylan Field는 결과의 기능 여부뿐 아니라 구현 방식과 과정이 중요하다고 강조한다. - 책에는 디자인, 기술, 창작 도구, 제작자의 태도에 관한 인터뷰와 에세이가 포함됐다. ## 전통과 현대 기술의 결합 - 디자인 스튜디오 Other Means는 윌리엄 모리스와 Kelmscott Press의 장인적 책 제작 방식에서 영감을 얻었다. - Kelmscott Press가 추구한 “본질적인 품질과 예술적 취향”을 현대적인 편집 디자인으로 재해석했다. - 이니셜 대문자, 플뢰롱, 장식 테두리, 드롭캡 같은 전통적 조판 요소를 현대적으로 활용했다. - 서체 디자이너 Kia Tasbihgou가 만든 드롭캡은 역사적인 타이포그래피 전통을 반영한다. - 화면, 픽셀, 데이터 중심으로 작업하는 현대 디자이너들도 다른 분야의 장인들과 인내, 관찰, 의도성이라는 공통 기반을 공유한다고 본다. ## 책을 넘어선 서체와 디지털 경험 - 『Practice』의 드롭캡 디자인을 확장해 하나의 완전한 서체를 제작했다. - 책에서 사용한 독특한 문자를 알파벳 전체로 발전시켜 타입페이스로 공개했다. - Figma Sites를 활용해 서체 견본 페이지를 만들고, 온라인에서 서체를 감상하고 내려받을 수 있도록 했다. - 이는 책의 물리적 디자인을 디지털 환경으로 확장한 사례다. ## 장인정신의 네 가지 관점 책은 craft를 다음 네 가지 관점에서 다룬다. - **적응(Adaptation)**: 변화하는 기술과 환경에 맞춰 제작 방식과 도구를 조정하는 과정 - **반복(Iteration)**: 시도와 실패를 거듭하며 결과를 개선하는 과정 - **적용(Application)**: 익힌 기술과 원칙을 실제 문제와 다양한 분야에 적용하는 방식 - **가치(Value)**: 정성과 숙련이 결과물의 품질과 의미를 어떻게 높이는지에 대한 고찰 『Practice』는 디지털 도구가 발전하더라도 숙련과 판단, 세부 사항에 대한 관심은 여전히 중요하다고 말한다. 새로운 기술을 활용하되 결과만 빠르게 얻는 데 그치지 말고, 반복과 관찰을 통해 작업의 완성도와 작동 방식을 함께 다듬는 태도가 실용적인 교훈이다.

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

Figmatypographygraphic-designfigma-sites+2

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

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는 단순히 디자인을 웹으로 내보내는 기능보다, 디자인·반응형 구현·프로토타이핑·게시를 통합한 제작 환경에 가깝다. 빠르게 랜딩 페이지나 이벤트 사이트를 제작해야 하는 팀, 개발 리소스가 적은 디자이너에게 특히 유용하며, 복잡한 서비스 기능이나 세밀한 코드 제어가 필요한 경우에는 향후 코드 레이어 기능의 성숙도를 함께 확인하는 것이 좋다.

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

AI디자인 시스템프로토타이핑CSS+4

figma·2025년 5월 6일원문

Config 2025: (새 탭에서 열림)

피그마는 Config 2025를 통해 단순한 디자인 도구를 넘어 아이디어 구상부터 실제 제품 구현까지 전 과정을 아우르는 통합 플랫폼으로의 확장을 선언했습니다. AI 기술을 전면에 배치한 4개의 신규 제품과 강력해진 디자인 기능을 도입하여, 디자인과 개발 사이의 경계를 허물고 팀 전체의 생산성을 극대화하는 데 집중하고 있습니다. 이는 디자인이 비즈니스 차별화의 핵심이 되는 시대에 발맞추어, 모든 팀원이 제품 개발 프로세스에 더욱 깊이 기여할 수 있는 환경을 구축하려는 전략적 움직임으로 풀이됩니다. **AI 기반의 앱 및 웹 제작 솔루션** * **Figma Make**: 텍스트 프롬프트를 코드로 변환하거나 기존 디자인을 실제 작동하는 프로토타입 및 앱으로 제작해 주는 AI 도구로, 숙련도와 상관없이 아이디어를 빠르게 시각화하고 반복 수정할 수 있도록 돕습니다. * **Figma Sites**: 디자이너가 AI와 코드의 도움을 받아 역동적인 상호작용과 맞춤 설정이 가능한 웹사이트를 직접 구축하고 즉시 배포할 수 있는 환경을 제공합니다. **디자인 표현력과 브랜드 일관성 강화** * **Figma Draw**: 더욱 정교해진 벡터 편집 및 일러스트레이션 도구 세트를 통해 디자이너가 높은 수준의 공예적 완성도를 가진 시각 결과물을 만들 수 있도록 지원합니다. * **Figma Buzz**: 마케팅 및 브랜드 팀이 브랜드 가이드라인을 준수하면서도 AI를 활용해 대규모로 시각적 자산을 생성하고 관리할 수 있도록 설계된 전용 제품입니다. **개발 협업 및 AI 워크플로우 고도화** * **Grid**: 반응형 레이아웃 설정을 돕는 새로운 옵션으로, Dev Mode에서 즉시 활용 가능한 CSS 코드를 생성하여 디자인에서 개발로 이어지는 핸드오프 과정을 획기적으로 개선합니다. * **지능형 AI 기능**: 이미지 생성 및 편집 기능이 고도화되었으며, 작업 맥락을 이해해 다음 단계를 제안하는 자동 제안 기능과 FigJam 내 AI 보조 도구가 추가되어 워크플로우 속도를 높였습니다. **사용자 저변 확대와 글로벌 시장 최적화** * **사용자 구성의 변화**: 현재 피그마 사용자의 약 2/3가 비디자인 직군이며 그중 30%가 개발자인 점을 반영하여, 직군 간의 협업 효율을 높이는 도구(Dev Mode, Slides 등)를 지속적으로 강화하고 있습니다. * **글로벌 현지화**: 전체 사용자의 85%가 미국 외 지역에 거주하는 상황에 맞춰 브라질 시장을 위한 포르투갈어 전면 지원 및 UI 현지화를 진행하며 글로벌 확장세를 이어가고 있습니다. 이제 피그마는 디자이너만을 위한 도구를 넘어, 기획자, 개발자, 마케터가 하나의 캔버스에서 제품을 완성하는 '제품 개발 운영 체제'로 진화하고 있습니다. 팀 내 협업 효율을 높이고 AI를 통해 제작 단계를 단축하고자 한다면, 순차적으로 출시될 이번 신규 기능들을 워크플로우에 적극적으로 도입해 볼 것을 권장합니다.

Figma프로토타이핑생성형 AIdesign-to-code+4

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

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의 목적은 디자이너의 세밀한 반복 작업을 대체하는 것이 아니다. - 더 많은 디자인 방향을 빠르게 탐색하고, 아이디어의 실현 가능성을 조기에 검증하며, 팀에 개념을 효과적으로 전달하도록 지원한다. - 결과적으로 디자이너가 사고와 제작 사이를 빠르게 오가면서도 디자인의 완성도와 의도를 유지하도록 돕는다. 실무에서는 초기 아이디어 검증, 인터랙션 테스트, 반응형 화면 탐색처럼 반복 비용이 큰 단계에 우선 활용하는 것이 효과적이다. 다만 생성 결과를 최종 제품 코드로 바로 간주하기보다는, 팀의 디자인 시스템과 기술 요구사항에 맞춰 검토·정제하는 프로토타이핑 도구로 사용하는 것이 적절하다.

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

디자인 시스템생성형 AIreal-time-collaborationfigma-make+3

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

Config 2025

피그마는 디자인을 단순히 화면을 만드는 작업이 아니라, 아이디어를 실제 제품으로 구현하는 전 과정으로 확장하고 있다고 설명한다. AI로 소프트웨어 제작이 쉬워질수록 차별화된 품질과 관점, 완성도를 결정하는 디자인의 역할은 더 중요해진다. Config 2025에서 공개한 Figma Make, Sites, Grid, Draw, Buzz는 아이디어 구상부터 프로토타입, 개발, 배포용 콘텐츠 제작까지 하나의 협업 환경에서 연결하려는 제품들이다. ## Figma Make: 프롬프트로 디자인을 코드와 프로토타입으로 확장 - 기존 디자인 파일이나 자연어 프롬프트를 바탕으로 작동하는 고충실도 프로토타입을 생성한다. - 디자인과 개발 사이의 도구 장벽을 낮춰, 별도의 복잡한 개발 지식 없이 아이디어를 빠르게 검증할 수 있다. - 특정 화면이나 요소를 선택한 뒤 “여기에 게시 버튼을 추가해줘”처럼 자연어로 수정할 수 있다. - 정적인 시안만으로는 확인하기 어려운 인터랙션, 애니메이션, 구현 가능성을 직접 테스트할 수 있다. - Figma 안에 통합되어 있으며 협업을 기본으로 지원하므로, 팀이 하나의 파일과 맥락 안에서 아이디어를 정의하고 반복 개선할 수 있다. - 핵심 목표는 빠른 탐색뿐 아니라 세부 조정과 디자인 의도 보존까지 지원하는 것이다. ## Figma Sites: 디자인에서 실제 웹사이트 배포까지 - 디자인 결과물을 실제 웹사이트로 발전시키는 웹 제작 환경이다. - 디자인 도구와 웹 개발 도구 사이의 단절을 줄여, 디자이너가 제작한 결과를 production 단계까지 직접 가져갈 수 있도록 한다. - 반응형 레이아웃, 상호작용, 애니메이션 등 실제 웹 경험에 필요한 요소를 디자인 과정에서 다룬다. - 디자인 파일을 개발자에게 전달하는 데 그치지 않고, 웹사이트의 제작과 게시까지 연결하는 것을 목표로 한다. - 제품팀이 아이디어를 시각화한 뒤 별도의 변환 작업을 최소화하면서 실제 결과물을 검증할 수 있다. ## Grid: 자유로운 캔버스와 구조화된 레이아웃의 결합 - 자유롭게 배치하고 탐색하는 Figma의 캔버스 방식과, 정돈된 구조를 요구하는 레이아웃 작업을 연결한다. - 초기 아이디어 단계에서는 요소를 자유롭게 배치하고, 구체화 단계에서는 이를 구조화된 그리드와 레이아웃으로 전환할 수 있다. - 화면 크기나 콘텐츠 변화에 대응하는 정렬·간격·배치 규칙을 보다 체계적으로 관리할 수 있다. - 완전히 고정된 디자인과 무질서한 자유 배치 사이를 오가며 작업할 수 있다는 점이 핵심이다. ## Figma Draw: 벡터 디자인의 표현력 확대 - 기존의 정교하고 구조화된 벡터 작업에 자유로운 드로잉과 질감을 더한다. - 손으로 그린 듯한 표현, 거친 선, 브러시 질감 등 기존 UI 중심 디자인 도구에서 다루기 어려웠던 시각적 요소를 지원한다. - 벡터 레이어의 확장성을 유지하면서도 일러스트레이션과 그래픽 작업에서 더 넓은 표현 범위를 제공한다. - 기능 중심의 화면 디자인뿐 아니라 브랜드 그래픽, 포스터, 일러스트 등 개성 있는 시각 결과물을 제작할 수 있게 한다. ## Figma Buzz: 다양한 형식의 브랜드 콘텐츠 제작 - 마케팅과 브랜드 팀이 여러 형식의 시각 콘텐츠를 빠르게 제작하도록 돕는 도구다. - 디자인 시스템과 브랜드 자산을 활용해 광고, 소셜 미디어 이미지, 캠페인 콘텐츠 등을 일관된 방식으로 만들 수 있다. - 콘텐츠 형식과 크기가 달라져도 브랜드의 시각적 품질과 일관성을 유지하는 데 초점을 둔다. - 디자이너뿐 아니라 다양한 직군이 브랜드 가이드에 맞는 결과물을 직접 제작할 수 있도록 작업 범위를 넓힌다. ## 디자인의 역할에 대한 관점 변화 - 디자인은 단순히 픽셀을 배치하는 작업이 아니라 문제를 창의적으로 해결하고, 형태와 기능을 함께 다루는 과정이다. - AI가 코드를 생성하고 소프트웨어 제작 속도를 높일수록, 무엇을 만들지 결정하는 관점과 품질 기준이 더욱 중요해진다. - Figma는 디자인을 제품팀의 단일 진실 공급원으로 유지하면서, 아이디어·프로토타입·코드·배포 사이의 경계를 줄이려 한다. - Config 2025의 제품들은 각기 다른 작업을 위한 도구처럼 보이지만, 궁극적으로는 디자인을 생산 단계까지 확장하려는 하나의 방향을 공유한다. 실무에서는 Figma Make로 아이디어와 인터랙션을 빠르게 검증하고, Grid로 레이아웃을 구조화한 뒤, Sites로 웹에 게시하는 흐름을 활용할 수 있다. 브랜드나 마케팅 조직은 Draw와 Buzz를 통해 표현력과 콘텐츠 제작 효율을 함께 높일 수 있다.

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

FigmaAI프로토타이핑프로덕트 디자인+2