이번 주 공식 발표를 나란히 놓으면 방향이 꽤 겹칩니다. 화면을 새로 뽑아내는 데서 한 걸음 나아가, 이미 있는 디자인을 정확히 고치고, 만든 과정을 다시 쓰고, 코드와 맞물리게 하는 쪽입니다. 아래 다섯 건은 모두 만든 곳이 직접 올린 글과 문서를 열어 확인했습니다.
- Google Developers 블로그Google A2UI Express (새 창에서 열려요)AI가 쓰는 UI 표현을 줄여 토큰과 지연을 아끼는 방식
- Figma 블로그Figma Weave (새 창에서 열려요)여러 모델을 비교하고 작업을 갈라 다시 쓰는 노드 워크플로
- Figma 블로그Figma 편집 모델 (새 창에서 열려요)기존 디자인을 고치는 일에 맞춰 Figma가 직접 훈련한 편집 모델
- Webflow 개발자 문서Webflow DevLink Export (새 창에서 열려요)Webflow 컴포넌트를 React 프로젝트로 내보내는 CLI
- Amazon 뉴스룸Amazon Alexa Home Map (새 창에서 열려요)집 안 기기를 3D 지도에서 보고 제어하는 화면
Google이 10월 27일 개발자 블로그에 A2UI의 새 추론 형식 Express를 소개했습니다. A2UI는 AI 에이전트가 화면을 설명하는 메시지 규격이고, Express는 모델이 써야 하는 분량을 줄이는 방식입니다. 모델은 간결한 중간 표현만 쓰고, SDK가 그것을 표준 UI 메시지로 바꿉니다.
Google이 내놓은 숫자는 둘입니다. 토큰은 Direct JSON보다 최대 3배 적고, 지연은 최대 3배 낮다고 합니다. 결정 모델이 레이아웃을 정하는 경우에는 최대 80배라는 숫자도 내놓았습니다. 다만 결정 모델 형식은 아직 SDK에 들어 있지 않고, 지연 숫자의 비교 기준은 글에 적혀 있지 않습니다. 저는 "최대"를 말 그대로 상한으로 읽었습니다. Express는 Python, TypeScript, Dart SDK에서 쓸 수 있습니다.
- AI 모델 → SDK
- SDK → 렌더러
10월 31일에 올라온 Figma 글은 신제품 발표가 아니라 사용 가이드입니다. 같은 프롬프트를 여러 모델에 돌려 결과를 비교하고, 마음에 드는 이미지에서 가지를 쳐서 다른 프롬프트와 편집을 시도하고, 만든 작업 순서를 저장해 팀원이 새 입력으로 다시 돌릴 수 있게 합니다. 저장한 흐름을 Weave 도구로 묶으면 노드를 건드리지 않고도 실행할 수 있다고 합니다.
상품 사진이나 캠페인 이미지처럼 같은 일을 매주 되풀이하는 팀에 맞는 이야기입니다. 한 번 잘 나온 결과보다 그 결과에 이르는 순서를 남긴다는 점이 핵심입니다.
그림: Figma 블로그
Figma 릴리스 노트에는 같은 Weave의 후속 항목이 하나 더 있습니다. 10월 30일자 항목은 Weave 도구를 조직 안에서만 배포하는 기능을 안내합니다. 내부에 배포한 도구는 Tools 탭에 나타나고 Organization과 Enterprise 플랜에서 쓸 수 있습니다. 반복하는 작업을 도구로 만들어 팀 자산으로 돌려 쓰는 운영 방식이 가능해진다는 해석이지만, 플랜 제한이 있어서 모든 사용자에게 열린 기능은 아닙니다. 출처는 Figma 릴리스 노트입니다.
Figma는 캔버스 위의 기존 디자인을 고치는 데 맞춰 자체 편집 모델을 따로 훈련한 과정을 공개했습니다. 간격을 조정하거나 색을 바꾸거나, 피드백을 받은 뒤 레이아웃을 다시 짜는 일상적인 수정이 대상입니다. 디자인은 Figma 파일 형식 그대로 모델에 넣었고, 학습용 요청에는 디자인 시스템 에셋의 테마와 컴포넌트 변경도 들어갔다고 합니다. 새 화면 생성이나 벡터 같은 일은 다른 회사의 모델에 맡깁니다.
- 작업 속도20%
베타부터 정식 출시까지 일반적인 작업이 빨라졌습니다
- 되돌리기-60%60%
사용자가 에이전트의 작업을 덜 되돌렸습니다
- 이전 에이전트와 비교62%
전문가 비교에서 같거나 더 낫다고 평가한 비율입니다
- 사용자 평가+33%33%
사용자 평가가 더 높았습니다
측정 기준과 기간은 글에 자세히 나와 있지 않습니다. 그래서 "얼마나 좋아졌다"보다 "Figma가 무엇을 재고 있는가"를 읽는 편이 쓸모 있습니다. 작업 시간과 되돌리기 횟수를 같이 본다는 건, 빠르게 만드는 것만큼 틀리지 않게 고치는 것을 성능으로 친다는 뜻으로 읽힙니다.
Webflow CLI의 webflow devlink export 명령은 Webflow 컴포넌트를 React 프로젝트로 내보냅니다. 반대로 webflow devlink import는 React 라이브러리를 묶어 워크스페이스에 올립니다. 내보내기에는 @webflow/webflow-cli v1.19.0 이상, Node.js v22 이상이 필요하고, 내보낸 컴포넌트를 쓰는 프로젝트는 React v18 이상이어야 합니다.
스타일이 서로 새지 않게 막는 방법도 문서에 있습니다. 설정의 cssScopes가 켜져 있으면 컴포넌트 스타일을 CSS @scope로 감싸고, 기본값이 켜짐입니다. 내보낼 수 있는 것은 컴포넌트뿐이라, 화면의 일반 요소는 먼저 컴포넌트로 바꿔야 합니다.
- Webflow 컴포넌트 → React 프로젝트
- React 라이브러리 → Webflow 워크스페이스
그림: Webflow 개발자 문서
Amazon 뉴스룸이 소개한 Alexa Home Map은 집과 마당을 3D 지도로 보여 주고, 기기를 있는 자리에 놓습니다. 방을 확대하고 층을 바꿀 수 있으며, 카메라 기록은 지난 24시간을 타임라인으로 되감아 볼 수 있습니다. 조명의 색과 밝기, 재생 중인 음악, 낮과 밤, 날씨가 지도에 그대로 반영된다고 합니다.
미리보기는 올해 안에 iOS 앱과 Alexa, Ring 앱, 큰 Echo Show 화면, 새 Alexa Tablets부터 시작합니다. 일부 기능은 Alexa+나 Ring 유료 구독이 있어야 합니다. 정확한 날짜는 아직 없습니다.
그림: Amazon 뉴스룸
다섯 건을 한 줄로 묶으면 "디자인 시스템이 AI의 작업 규칙이 되어 간다"입니다. Google은 이미 쓰는 렌더러가 읽을 UI 메시지를 AI가 더 가볍게 만들게 하고, Figma는 디자인 편집에 맞춘 모델을 따로 훈련합니다. 둘 다 AI에게 자유를 주기 전에 쓰는 형식과 일의 범위부터 좁히는 쪽입니다. 이건 사실이 아니라 제 해석입니다.
Webflow는 디자인과 코드 사이의 길을 양방향으로 냈고, Alexa는 상태를 목록이 아니라 위치와 움직임으로 보여 줍니다. 저라면 이 중 A2UI Express부터 따라 해 보겠습니다. 속도 숫자보다 AI가 쓰는 표현을 줄이고 SDK가 나머지를 맡는 구조가 더 오래 남을 것 같아서입니다. dsui가 컴포넌트 레지스트리와 llms.txt를 공개해 두는 것도, AI가 다룰 부품의 목록을 먼저 내놓는다는 점에서 같은 방향입니다.
- Fast, reliable A2UI, with swappable inference formats, Google Developers 블로그
- The TL;DR on Figma Weave: Make your creative process repeatable, Figma 블로그
- How we're training a Figma-fluent editing model, Figma 블로그
- Figma 릴리스 노트, Weave 내부 배포, Figma
- DevLink Export setup과 Webflow CLI reference, Webflow 개발자 문서
- Meet Alexa Home Map, an interactive 3D map that lets you see and control your home, Amazon 뉴스룸
이번에 다루지 못한 소식도 있습니다. KT엠모바일의 eSIM 서비스 mobi가 레드닷 디자인 어워드 본상을 받았다는 보도는 7월 24일 기사라서 이번 주 소식에서는 뺐습니다.