← 최신 논문
💻 computer science

FigmaTrace: Capturing Creative Nuances in Human Figma Design Workflows

이 논문은 전문가가 캡처한 200시간 이상의 인간 디자인 워크플로우를 단계 기반 방식을 통해 궤적으로 변환하여 구성한 새로운 데이터셋인 FigmaTrace를 소개하며, 이는 창의적 디자인 작업에 대한 시각 언어 모델(Vision Language Model)의 성능을 최첨단 폐쇄형 모델 수준으로 크게 향상시킨다.

원저자: Darshan Deshpande, Yoshinari Fujinuma, Martyna Markiewicz, Devanshu Bansal, Shivani Jain, Nicholas Saban, Chirag Maheshwari, Anand Kannappan

게시일 2026-08-25
📖 1 분 읽기☕ 가벼운 읽기

원저자: Darshan Deshpande, Yoshinari Fujinuma, Martyna Markiewicz, Devanshu Bansal, Shivani Jain, Nicholas Saban, Chirag Maheshwari, Anand Kannappan

원본 논문은 CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/) 라이선스로 제공됩니다. 이것은 아래 논문에 대한 AI 생성 설명입니다. 저자가 작성하거나 승인한 것이 아닙니다. 기술적 정확성을 위해서는 원본 논문을 참조하세요. 전체 면책 조항 읽기

기술 요약: FIGMATRACE

문제 정의

시각 언어 모델(VLM)은 객체 탐지나 문서 이해와 같은 객관적이고 검증 가능한 영역에서는 뛰어난 능력을 보여주었습니다. 그러나 주관적이고 창의적인 디자인 작업에서는 여전히 성능이 저하되는 모습을 보입니다. 저자들은 이 문제의 주요 병목 현상으로, 인간 전문가를 차별화하는 다양한 선호도, 결정, 그리고 "취향"을 포착할 수 있는 고품질의 인간 워크플로우 데이터의 부재를 지목합니다. 기존 연구들은 기존 Figma 파일을 자동 주석 처리하거나 HTML을 JSON으로 변환하여 디자인 데이터를 생성하려고 시도했으나, 이러한 방식은 검증의 모호성, 포괄적인 품질 가이드라인의 부재, 그리고 인간 디자이너의 미묘한 의사결정 과정을 포착하지 못한다는 한계가 있습니다. 또한, 기존 데이터셋들은 대개 최종 결과물에만 집중할 뿐, 그 결과물을 만들기 위해 필요한 결정의 궤적(trajectory)은 간과하고 있습니다.

방법론

1. 스킬 택소노미(Skill Taxonomy) 및 태스크 큐레이션

데이터 격차를 해소하기 위해, 저자들은 먼저 10가지 고수준 디자인 스킬(예: 시각적 인지, Figma 구조적 숙련도, 접근성 전문성, 벡터 및 에셋 제작 등)로 구성된 독특하고 전문가가 큐레이션한 택소노미를 정의했습니다. 이 택소노미를 바탕으로 126개의 개방형, 주관적, 장기 실행(long-horizon) 태스크를 구축했습니다. 이 태스크들은 다음과 같이 분류되었습니다:

  • 검증 가능한 태스크(Verifiable Tasks): 픽셀 단위의 완벽한 복제, 결함 수정, 접근성 개선.
  • 비검증적 태스크(Non-Verifiable Tasks): 플랫폼 적응, 테밍(theming), 스케치-투-피그마 변환, 프로토타입 와이어링 등 전문가의 판단과 편향에 의존하는 작업.

2. 데이터 수집 및 처리 (FIGMATRACE)

데이터셋 FIGMATRACE는 디자이너들이 이러한 태스크를 수행하는 동안 200시간 이상의 OS 레벨 전문가 화면 녹화 및 액션을 캡처하여 구축되었습니다. 원시 데이터는 엄격한 다단계 처리 파이프라인을 거쳤습니다:

  • 액션 필터링(Action Filtering): 무작위 마우스 움직임이나 호버링을 필터링하여, Playwright MCP 툴셋에 매핑되는 의미 있는 상호작용(클릭, 타이핑, 스크롤)만을 남겼습니다.
  • 프레임 추출(Frame Extraction): 액션 이후의 "안정된(settled)" 상태를 식별하기 위해 2패스 추출 방식을 채택하여, 임의의 시간 간격이 아닌 UI가 안정화되었을 때만 프레임을 캡처했습니다.
  • 효과 필터링(Effect Filtering): 픽셀 값의 변화를 분석하여 아티팩트를 변경하는 액션과 그렇지 않은 액션을 구분했습니다.
  • 단계 기반 세그멘테이션(Phase-Based Segmentation): 본 연구의 참신한 기여는 비디오 데이터를 단순한 최대 컨텍스트 길이 분할이 아닌 디자인 단계(예: "컴포넌트화", "정교화 폴리싱", "레퍼런스 수집")에 기반한 궤적으로 변환한 것입니다. 저자들은 Gemini-3.6-Flash를 활용하여 비디오 구간을 11개의 뚜렷한 단계로 분류했습니다. 이 방식은 VLM에게 특정 기술과 의도의 경계를 가르쳐, 비디오의 무작위 일시 정지로 인해 발생하는 노이즈를 피하기 위해 선택되었습니다.

3. 학습 및 평가

저자들은 35개 세션에서 샘플링된 92,472개의 액션을 사용하여 ms-swift 프레임워크를 통해 4개의 VLM(QWEN3.6-35BA3B, QWEN3.8-27B, GEMMA-4-31B, MUSE-GLIMMER-30B)을 학습시켰습니다. 모델들은 네 가지 OOD(Out-of-Distribution) 에이전틱 GUI 환경에서 평가되었습니다:

  • GUI-Odyssey: 멀티 앱, 멀티 뷰포트 내비게이션.
  • AndroidControl: 명령의 세밀도 및 모바일 내비게이션.
  • Mind2Web: 오픈 웹 데이터에서의 명령 그라운딩(grounding).
  • VideoGUI: 계획 수립 및 액션 서술.

주요 결과

성능 향상

FIGMATRACE 학습은 평가된 모든 벤치마크에서 유의미한 성능 향상을 가져왔습니다:

  • 벤치마크 우위: 파인튜닝된 QWEN3.8-27B 모델은 특정 태스크에서 CLAUDE-OPUS-5GPT-5.6-SOL과 같은 프런티어 폐쇄형 모델들을 능가했습니다. 특히, GUI-Odyssey에서 6.4% 절대적 증가, AndroidControl에서 11.8% 절대적 증가를 달성하며 폐쇄형 베이스라인보다 높은 성적을 기록했습니다.
  • 도메인 내 이득: ScreenSpot-Pro Creative 분할에서 파인튜닝된 QWEN3.8-27B는 베이스 모델 대비 7.4% 절대적 증가(29.3%에서 36.7%로)를 보였습니다.
  • 일반화: 이러한 개선 사항은 서로 다른 모델 아키텍처 전반에 걸쳐 일반화되었으며, 테스트된 4개 모델 모두 긍정적인 이득을 보여주었습니다.

절제 연구(Ablation Study): 단계 기반 vs. 길이 기반

저자들은 단계 기반 궤적 큐레이션을 표준적인 최대 컨텍스트 길이 분할과 비교하는 중요한 절제 연구를 수행했습니다.

  • 결과: 단계 기반 접근 방식이 길이 기반 접근 방식보다 평균적으로 7.3 절대적 포인트 더 높은 성능을 보였습니다.
  • 분석: 질적 분석 결과, 길이 기반 분할은 종종 태스크 도중에 작업을 끊어버려 태스크의 의도를 모호하게 만드는 것으로 나타났습니다. 반면, 단계 기반 세그멘테이션은 스킬 기반의 그라운딩을 보존하여 모델이 "작업 계속하기"와 같은 명령과 방향성이 없는 레퍼런스를 더 잘 이해할 수 있게 했습니다.

질적 분석

최고 성능을 보인 모델(QWEN3.8-27B)에 대한 인간 평가를 통해 성공을 견인하는 세 가지 핵심 패턴을 확인했습니다:

  1. 요소 선택 정확도(Element Selection Accuracy): 베이스 모델은 빈번하게 잘못된 UI 요소를 선택했으나(중앙 오차 약 457 px), 파인튜닝된 모델은 타겟으로부터 약 15 px 이내에 안착했습니다.
  2. 좌표 이해(Coordinate Understanding): 베스 모델은 종종 정규화된 그리드 제한을 초과하는 생(raw) 픽셀 좌표(예: y>1000y > 1000)를 출력했으나, 파인튜닝된 모델은 norm-1000 좌표 체계를 준수했습니다.
  3. 결단력(Decisiveness): 파인튜닝된 모델은 베이스 모델이 행동하지 못했던 모호한 시나리오에서도 일관되게 좌표를 제공했습니다.

그러나 저자들은 반복(동일한 픽셀을 두 번 예측) 및 화면 중앙 집중 편향(screen-center focus bias)과 같이 원시 비디오 처리 과정의 노이즈로 인해 발생한 데이터셋의 실패 모드도 언급했습니다.

의의 및 주장

본 논문은 FIGMATRACE가 전문가의 Figma 워크플로우에 대한 골드 액션 시퀀스와 의도 세그먼트된 녹화 쌍을 제공하는 첫 번째 데이터셋이라고 주장합니다. 이 연구의 주요 의의는 다음과 같습니다:

  1. 양보다 질: 단순히 원시 데이터를 확장하거나 자동 주석을 사용하는 것보다, 디자인 단계(skills)에 초점을 맞춘 고품질의 전문가 큐레이션 워크플로우를 캡처하는 것이 창의적 에이전트 학습에 더 효과적임을 입증했습니다.
  2. 단계 기반 큐레이션: 학습 데이터를 임의의 시간 창이 아닌 디자인 단계(스킬)를 중심으로 구조화하는 것은 모델이 장기 실행 태스크의 의도를 이해하는 능력을 크게 향상시킵니다.
  3. 일반화: 특정 디자인 워크플로우(Figma)에 대한 학습이 광범위한 에이전틱 내비게이션 태스크(Android, Web)로 효과적으로 전이됨을 보여주며, 이는 시각적 분석 및 구조적 추론이라는 근본적인 기술이 전이 가능하다는 것을 시사합니다.

저자들은 추가적인 창의적 AI 에이전트 연구를 촉진하기 위해 데이터셋과 최적의 모델(QWEN3.8-27B)을 오픈 소스로 공개했습니다.

연구 분야의 논문에 파묻히고 계신가요?

연구 키워드에 맞는 최신 논문의 일일 다이제스트를 받아보세요 — 기술 요약 포함, 당신의 언어로.

Digest 사용해 보기 →