How We Built Our Design Agent

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 요약

LangChain은 Content Studio에 디자이너의 판단과 맥락, 도구를 갖춘 실행 환경, Slack 협업 경험을 결합하고 모델 발전에 맞춰 보완 규칙을 줄여 브랜드에 맞는 디자인 에이전트로 개선했다.

📌 핵심 요약

• Content Studio는 Slack의 단일 프롬프트와 첨부 자료로 영상, 소셜 그래픽, UI 재현 이미지, 슬라이드 등을 생성하며, 모든 산출물은 코드로 작성된다. LangChain은 약 4개월 동안 디자인 원칙과 피드백의 이유를 가르치며 품질을 개선했다.
• Content Studio는 전사에 3,000개 이상의 에셋과 80개 이상의 슬라이드 덱을 제공했다. 해당 작업을 포함한 X 게시물은 약 450만 조회를 기록했고, LangChain 계정에서 해당 시각물을 사용한 게시물은 다른 게시물보다 좋아요가 약 2배, 북마크가 약 3.7배였다.
• 요청의 4분의 3은 마케팅 외부에서 발생하며, 사용자의 75%는 매주 돌아오는 재사용자다. 요청당 모델 비용 중앙값은 9월 중순 약 8달러에서 현재 약 0.50달러로 낮아졌고, Managed Deep Agents 이전 후 자체 코드는 약 80% 줄었다.
• 디자인 품질 개선에는 브랜드 토큰뿐 아니라 프레임당 하나의 초점, 흔한 AI 디자인 패턴을 막는 가드레일, 피드백의 판단 근거가 필요했다. 정량적으로 확인할 수 있는 오류는 자동 점검하고, 주관적인 디자인 판단의 이유는 스킬에 담았다.
• 초기에는 115개 재사용 UI 컴포넌트와 상세 규칙으로 모델을 보완했지만 결과가 반복적이었다. Opus 5.5 도입 후 디자인 원칙과 상위 지침을 남기고 하드코딩된 규칙 대부분을 제거하자 다양성이 높아졌다. 실행 환경은 Slack 스레드별 샌드박스, 여러 디자인 도구, 렌더링 검사와 장시간 작업의 진행 표시·팀 개입·출시 전 승인을 지원한다.

🧩 주요 포인트

1. 브랜드 요소만으로는 판단의 빈틈이 남음 → 디자인 원칙과 피드백의 이유를 제공해야 결과의 목적과 표현을 일관되게 맞출 수 있음.
2. Managed Deep Agents가 실행 기반을 관리함 → 소규모 팀이 도구·스킬·Slack 협업 경험에 집중하고 디자이너는 방향 설정과 검토에 더 무게를 둘 수 있음.
3. 개 컴포넌트와 보완 규칙이 반복성을 낳음 → 모델 발전에 따라 임시 제약을 재검토하고, 지속적으로 필요한 맥락과 실행 환경을 중심으로 설계할 필요가 있음.

🧠 상세 정리

1. 반복적인 디자인 수요에서 출발한 Content Studio

LangChain에서는 제품 출시 캠페인, 웨비나, 블로그와 행사가 계속 이어졌고, 각각에 헤더 이미지부터 도표·슬라이드·영상·광고 소재까지 다양한 에셋이 필요했다. 반복 요청이 디자인팀의 시간을 차지하면서 전략적이고 새로운 작업을 밀어냈기 때문에, 회사 구성원 누구나 적은 마찰로 브랜드에 맞는 결과물을 만드는 수단이 필요했다. 이를 위해 사내에서 만든 Content Studio는 Slack에서 원하는 내용과 관련 자료를 전달받아 완성된 파일을 돌려주며, 생성하는 모든 에셋을 코드로 작성한다. 개발에는 디자이너의 전문적 판단을 담은 스킬과 검사, 여러 제작 도구를 갖춘 환경, 수 시간 이어지는 작업을 팀이 함께 다룰 사용자 경험이 필요했다. 초기 반응은 좋지 않았지만 GTM Engineering팀과 디자인팀은 약 4개월 동안 회사 구성원들이 지켜보는 가운데 실패를 관찰하고 취향과 원칙을 가르쳤다.

2. 사용 규모와 성과, 비용 변화

Content Studio는 전사에 3,000개 이상의 에셋을 제공했으며, 여기에는 80개가 넘는 슬라이드 덱이 포함되고 그중 하나는 회사에서 자연 유입 조회가 가장 많은 YouTube 영상에도 사용됐다. 해당 작업을 포함한 X 게시물은 약 450만 조회를 기록했고, LangChain 계정에서 해당 시각물을 쓴 게시물은 다른 게시물 대비 좋아요가 약 2배, 북마크가 약 3.7배였다. 요청의 4분의 3은 이제 마케팅 외부에서 발생하며, 사용자의 75%는 매주 다시 찾아오는 재사용자라고 설명한다. 요청당 모델 비용 중앙값은 9월 중순 약 8달러에서 현재 약 0.50달러로 내려갔고, Managed Deep Agents로 이전한 뒤 자체 코드는 약 80% 줄었다. 원문은 이를 도입 성과로 제시하지만, 게시물 간 성과 차이를 디자인 에이전트만의 인과적 효과로 검증한 비교 방법까지 설명하지는 않는다.

3. AI 디자인의 문제를 실행력보다 관점에서 찾다

글은 AI가 좋은 디자인을 만들 수 있는지라는 질문에 대해, 모델은 이미 HTML·CSS, 차트 명세와 애니메이션 타임라인을 작성할 실행 능력을 갖추고 있었다고 답한다. 부족했던 것은 회사의 맥락으로, 모델은 Anthropic이 ‘distributional convergence’라고 부르는 익숙한 패턴에 기대어 세련되지만 비슷비슷하거나 메시지가 전달되지 않는 결과를 만들었다. Stripe의 디자인 책임자 Katie Dill은 제2차 세계대전 이후 모더니즘의 겉모습을 반복 복제하면서 그 사고와 개성을 잃었던 건축을 비유로 든다. 그는 AI도 소프트웨어에 같은 일을 할 수 있다고 경고하며 이를 ‘zombie UI’라고 부르고, 사람이 관점을 제시하지 않으면 AI가 대신 정하게 된다고 말한다. 따라서 글의 주장은 AI가 디자인에 서툴다는 단정이 아니라, 목적에 맞는 선택을 하려면 조직의 관점과 취향을 제공해야 한다는 것이다.

4. 브랜드 규격을 넘어 판단 기준을 전달하다

원문에서 취향은 규격상 올바른 작업과 실제로 좋은 작업을 가르는 판단이며, 같은 글꼴·색상·간격을 사용한 두 레이아웃도 메시지를 전달하는 힘은 다를 수 있다. 비교 사례에서 브랜드 스킬을 가진 로컬 코딩 에이전트는 같은 프롬프트를 받았어도 로고 조합, 텍스트 정렬, 주색과 보조색의 구분을 놓쳤지만 Content Studio는 브랜드에 맞는 이미지를 만들었다. 글은 브리프에 명시되지 않은 결정을 로컬 에이전트가 익숙한 패턴으로 채운 반면, Content Studio는 회사의 선택 기준으로 채웠다고 설명한다. 이를 위해 색상 토큰, 글꼴 굵기, 간격과 정렬 같은 기초 위에 프레임당 하나의 초점, 흔한 AI 디자인 패턴을 막는 가드레일, 피드백의 이유를 추가했다. 이러한 맥락과 기반 모델의 개선이 함께 작용하면서 에이전트가 디자이너처럼 사고하고 소통하는 방향으로 발전했다는 설명이다.

5. 구체적인 피드백을 검사와 스킬로 바꾸다

초기 모션 그래픽에서는 새가 화면 밖으로 날아가며 1초도 안 되는 빛의 리본을 남겼는데, ‘날카로운 모서리 없이’라는 요청만으로는 의도한 부드러운 움직임을 얻지 못했다. 디자이너가 원한 것은 가장자리가 부드러워지고 꼬리가 새의 이동 반대 방향으로 가늘어지며 사라지는 표현이었지만, 첫 결과는 둔탁하고 경계가 거칠었다. 이후 반복에서는 간단한 스케치로 꼬리 위치를 파악한 에이전트가 리본의 시작점이 새의 꼬리에 붙어 있는지 프레임별로 확인하는 검사까지 직접 만들었다. 기본 대문자 표기처럼 측정 가능한 문제는 자동 검사로 잡고, 캠페인 발상의 힘이나 메시지의 명료성, 청중에게 와닿는 정도처럼 주관적인 판단은 디자이너의 이유를 스킬에 기록했다. 이런 방식으로 PM·엔지니어·창업자도 Slack에서 제작을 의뢰할 수 있게 됐고, 디자이너의 역할은 모든 에셋을 직접 만드는 일에서 방향 설정과 검토를 맡는 크리에이티브 디렉터에 가까워졌다.

6. 디자이너의 컴퓨터와 팀 협업을 실행 환경으로 구현하다

디자이너가 정지 이미지용 Photoshop, 모션용 영상 엔진, 공동 작업용 캔버스와 브랜드·회사 자료를 함께 쓰듯, 에이전트에도 작업할 컴퓨터와 도구, 맥락을 결합한 하네스가 필요했다. Deep Agents는 에이전트 루프, 계획, 파일, 하위 에이전트와 컨텍스트 관리를 제공하고, Managed Deep Agents는 이를 프로덕션에서 실행하도록 패키징한다. Managed Deep Agents의 관리형 LangSmith Sandbox, Slack 연동, 관리형 도구, 범위가 지정된 에이전트 메모리와 실행 예약 덕분에 팀은 기반 설비보다 디자인 작업과 사용자 경험에 집중할 수 있었다. 각 Slack 스레드에는 프로젝트를 턴 사이에 유지하는 별도 샌드박스가 주어지며, 에이전트는 영상 엔진·이미지 도구·공유 캔버스를 오가고 자신의 렌더링 결과를 검사한다. 수 시간 걸리는 큰 작업은 비동기 하위 에이전트로 진행되므로 Slack에서 계획과 실시간 진행 상황을 보여주고, 팀 누구나 실행 중 방향을 조정하며 출시 전에 승인할 수 있는 협업 경험도 핵심으로 제시된다.

7. 초기 하네스의 115개 컴포넌트와 반복성의 한계

첫 번째 하네스는 모델이 스스로 하기 어려운 디자인 판단을 지침과 코드에 미리 넣어 대신 처리하려는 접근을 취했다. 당시 모델은 공개할 만한 모션 그래픽이나 출시 영상을 만드는 데 많은 도움이 필요했기 때문에, 팀은 제목·레이아웃·애니메이션용 재사용 UI 컴포넌트 115개와 사용 시점·방법에 관한 지침을 만들었다. 기존 디자인을 바탕으로 작업하게 하면 처음부터 내려야 할 창의적 결정이 줄어들어 브랜드 일관성에는 도움이 됐지만, 프레임마다 같은 레이아웃과 애니메이션을 되풀이하는 문제가 생겼다. 팀은 모델이 결국 이 작업을 잘하게 될 것이라 보고 환경 개발을 이어가면서 참고 자료와 상세 지침을 늘려 보기도 하고, 반대로 완전히 빼서 모델이 스스로 할 수 있는 범위를 살피기도 했다. 그럼에도 원하는 품질에 이르지 못한 시기에는 스킬 규칙, 모션 코드와 컴포넌트를 계속 추가해야 했고, 격차를 메우는 데 필요한 엔지니어링 작업도 늘어났다.

8. 모델 발전에 맞춰 규칙을 덜어내고 환경을 남기다

Opus 5.5가 등장하자 팀은 즉각적인 품질 향상을 관찰했고, 스킬을 다시 검토해 디자인 원칙과 상위 지침을 남기는 대신 하드코딩된 규칙 대부분을 제거했다. 그 결과 다양성이 더 높아지고 반복은 줄었으며, 모델이 이전에는 팀이 미리 구현하려 했던 창의적 결정을 직접 내리기 시작했다고 설명한다. 팀은 이를 자신들의 ‘Bitter Lesson’으로 표현하면서, 모델의 약점을 보완하던 규칙은 모델이 좋아질수록 효용이 줄고 도구·맥락·사람의 안내를 갖춘 환경이 오래 남는다고 정리한다. Content Studio의 전체 하네스는 오픈소스로 공개됐으며, 저장소를 포크해 자체 브랜드 토큰·글꼴·스킬을 더하고 Managed Deep Agents로 팀의 Slack에 배포할 수 있다고 안내한다. 제공된 본문은 이어서 에이전트가 영상 프로젝트를 처음부터 끝까지 처리하는 과정을 영화로 보여주려 했다고 소개하지만 문장 중간에서 끝나므로, 그 영화의 구체적 내용이나 이후 구현 설명은 확인할 수 없다.

🧾 핵심 주장 / 시사점

• 브랜드 일관성은 색상과 글꼴을 전달하는 것만으로 확보되지 않는다. 브리프가 비워 둔 선택을 조직의 판단 기준으로 채우도록 피드백의 이유까지 제공하는 것이 핵심이다.
• 측정 가능한 오류는 자동 검사로 다루고 주관적인 판단은 이유를 스킬에 축적하는 방식이, 제작을 위임하면서도 디자이너의 관점을 유지하는 연결 고리로 작동한다.
• 모델 성능이 개선되면 과거에 품질을 지탱하던 상세 규칙이 표현의 다양성을 제한할 수 있다. 원문은 지속적인 투자 대상을 개별 창의적 결정의 사전 구현보다 도구·맥락·협업 환경에서 찾는다.

✅ 액션 아이템

• Content Studio의 디자인 원칙과 피드백의 이유를 스킬에 반영하고, 정량적으로 확인 가능한 오류는 자동 점검으로 연결.
• 모델 발전에 따라 115개 컴포넌트와 보완 규칙의 필요성을 재검토하고, 디자인 원칙과 상위 지침을 중심으로 제약 조정.
• Managed Deep Agents와 Slack 협업 경험을 검토할 때 스레드별 샌드박스, 진행 표시, 실행 중 팀 개입과 출시 전 승인 지원 여부 확인.

❓ 열린 질문

• LangChain 계정에서 좋아요 약 2배와 북마크 약 3.7배를 기록한 게시물 비교는 어떤 기간과 조건을 기준으로 했는가?
• 요청당 모델 비용 중앙값이 약 8달러에서 약 0.50달러로 낮아진 데에는 어떤 변화가 얼마나 기여했는가?
• Opus 5.5 도입 후 하드코딩된 규칙 대부분을 제거할 때, 유지할 디자인 원칙과 제거할 보완 규칙을 어떤 기준으로 구분했는가?