본문으로 건너뛰기
LangChain Blog조회 3

Moda: Deep Agents와 LangSmith를 활용한 AI 기반 디자인 플랫폼 구축기

Moda는 LangChain의 Deep Agents와 LangSmith를 활용하여 LLM이 다루기 힘든 좌표 기반 디자인 데이터를 커스텀 DSL과 멀티 에이전트 워크플로우로 해결한 사례를 공유한다.

섹션별 상세

LLM은 수치적인 XY 좌표나 복잡한 XML 형식을 추론하는 데 취약하여 원시 캔버스 상태를 직접 처리하기 어렵다. Moda는 이를 해결하기 위해 캔버스 데이터를 LLM이 이해하기 쉬운 간결한 레이아웃 추상화 계층(DSL)으로 변환하여 제공한다. 이 방식은 토큰 소모를 줄이면서도 모델이 시각적 구조를 더 정확하게 파악하게 하여 브랜드 가이드라인에 맞는 디자인 생성을 가능하게 한다.
Moda의 AI 사이드바 인터페이스 스크린샷
Screenshot사용자가 프롬프트를 입력하고 에이전트가 작업을 수행하는 과정을 보여준다. Cursor 스타일의 인터페이스를 통해 디자인 요소가 생성되는 과정을 시각화하며 에이전트와의 상호작용 방식을 설명한다.
모든 사용자 요청은 먼저 가벼운 Haiku 모델 기반의 Triage 노드를 거쳐 출력 형식이 분류된다. 분류 결과에 따라 디자인 모범 사례가 담긴 'Skills' 문서가 프롬프트 캐싱 포인트 뒤에 동적으로 주입된다. 이 구조는 시스템 프롬프트를 고정하여 캐시 효율을 극대화하면서도 각 작업에 필요한 전문 지식을 유연하게 제공하여 지연 시간을 단축한다.
디자인 에이전트는 12~15개의 핵심 도구를 상시 보유하며, 특수 작업 시에만 추가 도구를 활성화하는 'RequestToolActivation' 기능을 사용한다. 프로젝트 규모가 커지면 전체 캔버스 대신 요약된 정보를 제공하고 필요할 때만 세부 사항을 불러오는 방식으로 컨텍스트 윈도우를 관리한다. 이러한 전략은 불필요한 토큰 비용을 억제하고 대규모 프로젝트에서도 에이전트의 판단력을 유지하게 한다.
Moda의 전체 편집 화면 및 레이아웃 구조
Screenshot생성된 디자인 요소들이 캔버스 위에서 레이어와 함께 표시되는 실제 제품 UI를 보여준다. LLM이 생성한 결과물이 단순 이미지가 아니라 편집 가능한 벡터 요소로 구성됨을 확인시켜 준다.
개발팀은 LangSmith를 통해 에이전트의 실행 과정을 실시간으로 모니터링하며 프롬프트와 도구 세트를 조정한다. 노드별 토큰 비용 추적과 캐시 적중률 분석을 통해 성능 병목 지점을 파악하고 최적화한다. 특히 도구 호출 실패나 모델의 예상치 못한 행동을 사전에 진단하여 사용자에게 노출되기 전에 수정함으로써 서비스 안정성을 확보했다.

기술

  • LangChain
  • LangSmith
  • Deep Agents
  • Haiku
  • Python

활용 사례

  • AI 기반 프레젠테이션 생성
  • 자동화된 브랜드 자산 관리
  • 인터랙티브 디자인 에이전트

언급된 리소스

AI 분석 전체 내용 보기

AI 요약 · 북마크 · 개인 피드 설정 — 무료

출처 · 인용 안내

원문 발행 2026. 03. 25.수집 2026. 03. 25.출처 타입 RSS

인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.