How We Built Alloy, Firecrawl's Internal Design Harness for AI Agents

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 요약

Alloy는 Firecrawl이 AI 에이전트에 브랜드 지침과 제작 맥락을 제공하고, 결과물의 시각적 검토·버전 관리·게시를 지원하기 위해 만든 내부 디자인 작업 공간이다.

📌 핵심 요약

• Alloy는 브리프·참고 자료·브랜드 지침·재사용 가능한 제작 지침을 한곳에 모은다. Codex나 Cursor에서 실행되는 에이전트가 실제 프로젝트 파일을 편집하고, Alloy는 입력 맥락과 결과물의 검토·버전 관리·게시를 담당한다.
• 개발 계기는 디자인 제작 역량과 대기열의 병목이었다. 단순한 판매 자료도 다른 우선순위 때문에 처리에 3~4일이 걸렸으며, Alloy는 기존 디자인 결정과 제작 패턴을 재사용해 브리프를 이해하는 사람이 직접 작업하도록 돕는다. 저자는 팀이 며칠 분량의 작업 시간을 절약했고 디자인 전문성이 없는 동료도 필요한 자산을 만들 수 있다고 설명한다.
• 주요 구성 요소는 캔버스, 여러 채팅, 유지·관리되는 브랜드 지침, Skills, 미리보기, 게시된 작업을 모은 Library, 재사용 도구, 자동화다. 자동화는 이미지 하나에서 이메일·변경 기록·블로그용 출시 자산을 만들고, 사람이 검토·수정한 뒤 게시하는 흐름을 지원한다.
• 저자가 가장 큰 성과로 꼽은 것은 편집 가능한 제품 데모다. 출시 준비 중 인터페이스·문구·타이밍이 바뀌어도 다시 녹화하지 않고 원본 구성에서 확대, 속도, 전환, 강조 표시와 효과를 수정할 수 있다.
• Recreation은 동영상·GIF·링크·실시간 페이지를 네이티브 편집 가능 애니메이션으로 재구성하고 프레임별로 검증한다. 프레임 통과 기준은 255단계 기준 오차 10 이내이며 텍스트 이동 허용치는 0.25픽셀이다. 성능이 나빠진 시도는 되돌리고, 3회 연속 개선이 없으면 일시 중지하며, 사용자에게 묻기 전 최대 5회 또는 4시간 실행하고 최대 3개를 동시에 재구성할 수 있다.

🧩 주요 포인트

1. 에이전트 보조 코딩으로 기업별 제작 도구 구축이 실용화됐다는 것이 저자의 관점이다 → Stripe의 Protodash가 제품 프로토타입에 집중하듯 Alloy는 브랜드·출시 자산에 회사의 규칙과 맥락을 적용한다.
2. 브랜드 지침은 시각적 정체성을, Skills는 이를 구현하는 제작 방법을 제공한다 → 에이전트가 정확한 값과 재사용 패턴을 활용하면서도 최종 품질과 게시 여부는 사람이 판단하는 구조다.
3. 구조화된 검증을 도입하기 전 실제 참고 자료 7개는 모두 세 가지 검증 관문을 통과하지 못했고 일부는 화면의 최대 92%에서 떨림이 나타났다 → 반복 생성뿐 아니라 참고 자료 자체의 결함과 수정 절차를 함께 다뤄야 한다는 근거다.

🧠 상세 정리

1. Alloy의 역할과 에이전트의 역할

Rhys Hanak은 2026년 11월 2일 글에서 Alloy를 Firecrawl의 브랜드 자산을 AI 에이전트로 제작·수정·재사용하기 위한 내부 디자인 작업 공간으로 소개한다. 여기서 하네스는 모델이 실제 업무를 수행하도록 둘러싼 맥락, 도구, 제어 체계를 뜻하며, Alloy는 디자인 업무에 그 역할을 적용한다. 에이전트 자체는 Codex나 Cursor 같은 도구에서 실행되어 프로젝트 파일을 생성하거나 편집하고, Alloy는 전달할 맥락과 결과물을 검토할 화면, 버전 이력과 게시 공간을 제공한다. 저자는 이를 9월에 주목받았던 소프트웨어 팩토리의 아이디어를 브랜드·출시 자산에 적용한 자신의 디자인 팩토리라고 설명한다. 다만 사람이 작업 방향을 정하고 무엇을 내보낼지 판단하는 구조이며, Alloy는 디자인 참고 자료를 웹에서 찾는 데 Firecrawl도 사용한다.

2. 제작 시간이 아니라 대기열에서 출발한 문제

저자는 디자이너에게 작업을 요청하는 사람, 디자인 인력을 기다리는 사람, 직접 결과물을 만드는 사람의 입장을 모두 경험했고, 그 과정에서 반복된 불편을 해결하려고 Alloy를 시작했다. 제품 출시에는 데모, 그래픽, 소셜 자산, 애니메이션, 차트, 영업 자료가 연속해서 필요하며 각각 형식과 수정 과정도 다르다. 비교적 단순한 판매 자료조차 디자이너의 다른 우선순위 때문에 처리에 3~4일이 걸릴 수 있었고, 그 시간 대부분은 실제 제작보다 대기열에서 소모됐다. 기존 방식에서는 자산을 다른 용도로 바꿀 때마다 새 요청과 수작업이 추가됐으므로, Alloy는 이미 내린 디자인 결정과 제작 패턴을 다음 작업에서 재사용하도록 설계됐다. 목표는 Firecrawl의 시각적 정체성을 유지하면서 브리프를 가장 잘 이해하는 사람이 더 많은 제작을 직접 맡게 하는 것이며, 저자는 자신과 팀이 며칠 분량의 시간을 절약했다고 보고한다.

3. 브랜드 전용 도구에서 얻은 영감과 개발 전환점

저자는 Athletics처럼 브랜드를 위한 창작 도구를 구축해 계약이 끝난 뒤에도 고객이 독자적인 작업을 계속 만들 수 있게 하는 접근을 오래전부터 높이 평가했다. 사례로 든 Otto for Square는 이미지, 색상, 문구, 방향과 속도를 조절하고 여러 채널용 모션 자산을 내보내는 도구다. 이런 맞춤형 창작 기술은 과거에는 전문 팀 없이 정당화하기 어려웠지만, 저자는 에이전트 보조 코딩이 회사별 필요에 맞춘 도구 개발을 실용적으로 만들었으며 2026년에는 내부 도구 제작이 보편화됐다고 설명한다. Stripe의 디자인 매니저 Owen Williams가 만든 Protodash도 Cursor 규칙과 React 구성 요소에서 시작해 디자인 검토 모드와 변형 테스트를 갖춘 내부 프로토타이핑 플랫폼으로 발전한 비교 사례다. Alloy는 몇 달 전 기본 버전으로 시작했으며, 저자는 Astra와 강한 참고 자료·지침을 함께 활용하면서 애니메이션과 도구의 품질이 크게 개선된 것을 전환점으로 꼽는다.

4. 캔버스·채팅·브랜드 지침으로 맥락 유지

캔버스에는 한 탐색 작업의 브리프, 참고 자료, 작업 중인 자산과 저장된 모든 반복 결과가 놓이며, 여러 방향을 나란히 비교하면서 결과를 만든 맥락도 함께 볼 수 있다. 같은 캔버스에서 채팅을 여러 개 만들어 아이디어별 대화를 이어가고, 채팅 안에서 항목을 @로 태그하거나 캔버스에서 선택해 에이전트가 참고할 대상을 구체적으로 지정한다. 브랜드 지침은 Firecrawl의 타이포그래피, 색상, 마크, 레이아웃, 모션과 디자인 원칙을 유지·관리하는 기준이며, 작업마다 필요한 지침과 정확한 값을 전달한다. 따라서 에이전트는 색상이나 글자 크기 체계를 추측하는 대신 실제 16진수 색상 코드와 타입 스케일을 사용할 수 있다. Skills는 레이아웃, 타이포그래피, 인터페이스 세부 표현과 접근성을 다루는 재사용 가능한 제작 지침으로, 브랜드 정체성을 정의하는 지침과 이를 작업에 잘 적용하는 방법을 구분한다.

5. 검토와 게시, 반복 제작을 연결하는 구성 요소

미리보기에서는 결과물을 살피고 모션의 특정 시점을 확인하며 버전을 저장한 뒤 가장 좋은 방향에서 작업을 이어갈 수 있고, 네이티브 프로젝트 파일도 유지된다. Library에는 누군가 의도적으로 게시한 작업만 들어가 연결된 동료가 찾아 재사용할 수 있으며, 실험은 게시 대상으로 선택되기 전까지 캔버스에 남는다. 재사용 도구는 차트 스타일이나 다이어그램 배치 같은 생성 방식과 시각적 처리를 제공해, 설정을 조정한 구체적인 출발점을 에이전트에 전달하도록 돕는다. 자동화는 이미지 하나를 이메일, 변경 기록, 블로그 등 여러 채널용 출시 자산으로 만드는 반복 순서를 실행하면서 각 단계에 브리프와 제작 지침을 이어 전달한다. 결과물은 게시 전에 사람이 검토하고 다듬을 수 있으며, 구성 요소 목록에는 음악 카드, 코드로 생성한 효과음, 동영상에 오디오를 동기화하고 혼합하는 Sound 기능도 포함된다.

6. 편집 가능한 제품 데모가 가장 큰 성과인 이유

Firecrawl은 터미널뿐 아니라 Grok, Claude, ChatGPT 같은 여러 앱 화면에서 시연되므로, 이 인터페이스를 재사용 가능한 형태로 재현하면 다양한 업무 흐름을 설명할 기반이 된다. 화면 녹화는 특정 사건의 순서를 고정하지만, 출시 준비 중에는 인터페이스, 문구, 타이밍과 이야기 구성이 계속 바뀌어 작은 수정도 큰 재작업으로 이어질 수 있다. 편집 가능한 데모에서는 매번 완벽하게 조작하고 다시 녹화하는 대신 확대, 진행 속도, 전환, 강조 표시와 효과를 직접 수정하도록 지시할 수 있다. 저자는 이전에 Screen Studio로 캡처·편집하고 After Effects에서 추가 애니메이션과 효과를 만든 뒤 마지막에 합쳤지만, 이제는 에이전트가 원본 구성을 수정하고 Alloy에서 시각적 검토와 버전 관리를 한다고 설명한다. 제품과 포지셔닝이 여전히 바뀌는 출시 전 몇 주 동안 데모를 계속 편집할 수 있다는 점이 특히 중요하며, 저자는 이를 Alloy의 가장 큰 성과로 꼽는다.

7. Recreation의 재구성과 반복 제어 방식

Recreation은 동영상, GIF, 링크 또는 실시간 페이지를 참고 자료로 받아, 사용자가 지정한 특징이나 중요한 부분을 편집 가능한 애니메이션으로 재구성한다. 결과물은 프레임 이미지의 나열이 아니라 실제 텍스트와 HTML·CSS, 필요한 경우 WebGL로 만들어지며, 정지 이미지는 움직이지 않는 내용에만 사용된다. 내부적으로 에이전트는 참고 자료를 고정하고 움직임을 추적해 곡선에 맞춘 뒤 구성을 제작하며, 매 시도에서 렌더링한 결과를 참고 자료와 프레임별로 비교한다. 비교 대상은 픽셀 일치도, 움직임 곡선, 컷이 발생하는 프레임과 텍스트의 안정성이며, 프레임은 255단계 기준 오차 10 이내여야 하고 텍스트는 0.25픽셀보다 많이 이동하면 안 된다. Studio는 문서화된 순서에 따라 다음 수정 사항을 고르고 점수가 악화되면 가장 좋았던 상태로 되돌리며, 3회 연속 개선이 없으면 실행을 일시 중지한다. 에이전트는 사용자에게 묻기 전 최대 5회 또는 4시간 실행하고 정해진 시점에만 질문하며, 최대 3개의 재구성을 동시에 진행할 수 있다.

8. 참고 자료의 결함과 재사용 가능한 기본 요소

저자는 구조화된 절차를 추가하기 전에는 시험한 실제 참고 자료 7개 중 어느 것도 세 가지 검증 관문을 모두 통과하지 못했고, 일부에서는 떨림이 화면의 최대 92%를 차지했다고 설명한다. 문제의 일부는 생성 결과가 아니라 참고 자료 자체에 있었으며, 한 150프레임 GIF에는 바로 앞 프레임을 반복하는 프레임이 57개 포함되어 내보내기 단계에서 끊김이 생긴 상태였다. 이 중복 프레임을 제거하자 에이전트가 아무것도 수정하기 전에 측정된 떨림이 4.17픽셀에서 1.98픽셀로 감소했다. 성공한 재구성은 다른 구성에서 재사용할 수 있는 기본 요소인 primitive가 될 수 있으며, 저자는 자체 ChatGPT 데모에서 만든 자연스러운 타이핑과 카메라 확대를 이미 활용하는 예로 든다. 제공된 원문은 뒤집히는 사양 레이아웃을 추가로 언급하는 도중 끝나므로, 이후의 기본 요소 목록이나 구조 도입 후 전체 통과율은 확인할 수 없다.

🧾 핵심 주장 / 시사점

• Alloy의 확장 방식은 개별 결과물을 빠르게 만드는 데서 끝나지 않고, 브랜드 결정·제작 지침·편집 가능한 파일을 다음 작업의 출발점으로 축적하는 데 있다.
• 브리프를 이해하는 사람이 직접 제작하더라도 브랜드 지침과 Skills가 공통 기준을 제공하고 사람이 게시를 판단하므로, 제작 참여 확대와 품질 판단을 함께 유지하려는 설계다.
• Recreation 사례는 참고 자료와 생성 결과를 함께 검증해야 함을 보여준다. 다만 제공된 원문에는 구조화된 절차 도입 후 전체 성공률이 없어 최종 성능 개선 폭을 확정할 수 없다.

✅ 액션 아이템

• 디자인 대기열에서 3~4일이 걸렸던 판매 자료와 반복 출시 자산을 중심으로 Alloy의 재사용 효과 검토.
• 인터페이스·문구·타이밍 변경이 잦은 제품 데모에 편집 가능한 원본 구성의 활용 검토.
• Recreation의 프레임 오차 10 이내·텍스트 이동 0.25픽셀 기준과 3회 연속 개선 부재 시 일시 중지 조건을 함께 검토.

❓ 열린 질문

• Alloy 도입 후 판매 자료의 3~4일 처리 시간과 디자인 대기열은 실제로 얼마나 줄었는가?
• 디자인 전문성이 없는 동료가 Alloy로 만든 자산은 브랜드 지침과 Skills를 통해 어느 수준까지 품질을 유지하는가?
• 구조화된 검증 도입 후 실제 참고 자료 7개 중 세 가지 검증 관문을 모두 통과한 사례는 몇 개인가?