이 글은 영문 원본을 AI로 번역한 버전입니다.

요즘 업계에 이런 기대가 퍼져 있습니다. 언젠가 AI가 디자인 시스템을 만들어 줄 거라는 거죠. 프롬프트 하나 던지면 토큰, 컴포넌트, 인터랙션 패턴이 깔끔하게 나올 거라고요. 저는 정반대의 일이 벌어지고 있다고 생각합니다.

우리는 AI 에이전트가 사용할 디자인 시스템을 만들고 있습니다. 디자이너를 위한 것도, 개발자를 위한 것도 아닌, 에이전트를 위한 시스템입니다.

솔직히 말하면, 이 작업을 하면서 디자인 시스템이라는 것 자체를 다시 생각하게 됐습니다.

에이전트에게 뭘 건네줘야 할까?

이 모든 건 하나의 질문에서 시작됐습니다. 디자인 시스템의 주요 소비자가 Figma 라이브러리를 훑어보는 사람도, 문서 사이트를 읽는 개발자도 아니라면? 특정 사용자를 위해, 특정 브랜드에 맞춰, 특정 순간에 실시간으로 UI를 구성해야 하는 자율 에이전트라면, 도대체 뭘 줘야 할까요?

컴포넌트만 던져 줄 수는 없습니다. 컴포넌트는 답이니까요. 에이전트에게 필요한 건 질문을 이해하는 능력입니다. 이 인터랙션은 왜 존재하는지, 언제 빠르게 느껴져야 하고 언제 신중하게 느껴져야 하는지, 어떤 브랜드를 바로 그 브랜드답게 만드는 건 무엇인지.

그래서 우리는 라이브러리보다는 언어에 가까운 것을 만들고 있습니다. 인터페이스가 어떻게 동작하고, 어떻게 보이고, 어떤 느낌을 줘야 하는지에 대한 문법을 정의하고, 에이전트가 그걸 유창하게 구사할 수 있도록 패키징하는 거죠.

실제로 에이전트가 받는 건 컴포넌트 라이브러리와 스타일 가이드가 아닙니다. 마크다운 파일, 컨텍스트 문서, 스킬로 구성된 체계적인 세트를 받습니다. 하나하나가 기계가 파싱하고 실행할 수 있게 작성된 것들입니다.

Context 파일은 에이전트가 움직이는 세계를 정의합니다. 브랜드 아이덴티티, 디자인 원칙, 톤 앤 매너, 레이아웃 철학, 모든 의사결정을 좌우하는 제약과 자유. 디자이너가 해석할 브리프가 아닙니다. 에이전트가 추론할 수 있을 만큼 구조적이면서도, 판단의 여지를 남길 만큼 열려 있는 형태입니다.

Skill은 능력이 사는 곳입니다. 각 스킬은 명확한 범위의 지시 세트입니다. 레이아웃을 구성하는 방법, 리워드 모델을 적용하는 방법, 브랜드 프로필에 맞게 밀도를 조절하는 방법, Iconic 인터랙션을 선택하고 배치하는 방법. 스킬은 코드가 아닙니다. 안무에 더 가깝습니다. 에이전트가 단계별로 따르되, 각 단계 안에서 맥락에 맞는 결정을 내릴 수 있는 가이드입니다.

Documentation 파일은 컴포넌트 라이브러리 자체를 매핑합니다. 비주얼 카탈로그가 아니라, 에이전트가 조회할 수 있는 주석이 달린 레퍼런스입니다. 모든 컴포넌트에 사용 가이드, 동작 관련 참고사항, 접근성 요구사항, 그리고 언제, 왜 사용해야 하는지에 대한 맥락적 힌트가 포함됩니다. 숙련된 디자이너가 패턴 라이브러리를 읽는 것과 같은 방식이지만, 에이전트는 매번 그걸 밀리초 단위로 해냅니다.

전체 시스템은 NPM 패키지로 전달됩니다. 에이전트가 패키지를 가져오고, 마크다운을 읽고, 컨텍스트를 로드한 뒤 바로 UI를 구성하기 시작합니다. Figma도, 문서 사이트도 없습니다. 에이전트가 즉시 행동으로 옮길 수 있는 구조화된 지식만 있을 뿐입니다.

Chameleon 문제

브랜드는 까다롭습니다. 그래야 하고요. 명품 시계 브랜드와 핀테크 스타트업은 단순히 모습이 다른 게 아닙니다. 움직이는 방식이 다르고, 호흡하는 리듬이 다릅니다.

우리는 이걸 Chameleon 로직이라고 부릅니다. 에이전트가 경험의 시각적 아이덴티티 전체를 변형하면서도 그 브랜드만의 느낌을 잃지 않게 해주는 기반 레이어입니다. 단순히 색상을 바꾸는 게 아닙니다. 밀도, 여백, 타이포그래피 위계, 모션의 완급, 표면 아래에 자리 잡고 있어서 왜 그런지 의식하기도 전에 무언가를 느끼게 만드는 것들을 조절합니다.

흥미로운 부분은 에이전트에게 규칙과 감각의 차이를 가르치는 것입니다. 규칙은 쉽습니다. 이것이 메인 색상, 이것이 폰트. 감각은 어렵습니다. 이 브랜드는 여유롭게 느껴져야 한다, 이 브랜드는 긴박하게 느껴져야 한다. 우리는 둘 다 인코딩하고 있습니다.

접근성도 마지막에 끼워 넣는 체크리스트가 아닙니다. 하나의 스킬로 가르치고 있습니다. 에이전트는 명암비가 왜 중요한지, 터치 영역에 왜 여유가 필요한지, 시맨틱 구조가 왜 선택이 아닌지 이해합니다. 생성된 모든 결과물은 사용자에게 도달하기 전에 기준을 통과해야 합니다. 관문이 아니라, 반사 신경으로서.

Iconic 인터랙션

대부분의 디자인 시스템은 빌딩 블록을 줍니다. 버튼, 카드, 모달. 우리도 마찬가지입니다. 마이크로 인터랙션, 주요 인터랙션 패턴, 기대할 수 있는 모든 UI 디테일 등 기반은 갖춰져 있습니다.

하지만 우리는 Iconic 인터랙션이라고 부르는 것도 만들고 있습니다. 이건 완전히 다른 종류의 컴포넌트입니다. 참여도가 높고, 게이미피케이션 요소가 있으며, 때로는 예상치 못한 경험을 줍니다. 스크롤하며 지나치는 게 아니라 몸을 앞으로 기울이게 만드는 그런 컴포넌트입니다. 어떤 상황에서 어떤 패턴이 효과적인지 테스트하고 기록해 왔습니다.

에이전트는 이것들에 단순히 접근할 수 있는 게 아니라, 언제 써야 하는지를 학습하고 있습니다. 스니커즈 드롭에서 환상적으로 작동하는 게이미피케이션 연출이 금융 상품에서는 완전히 어긋날 수 있으니까요. 맥락이 전부이고, 우리는 에이전트가 그 판단을 내릴 수 있도록 충분한 맥락을 제공합니다.

뿌려두는 빵 부스러기, 일방적 광고가 아닌

인게이지먼트 관점에서 이야기가 본격적으로 흥미로워지는 지점입니다. 리워드는 버즈빌을 유명하게 만든 도구이고, 이제는 에이전트가 인게이지먼트를 설계하고 최적화하는 데 쓰는 핵심 수단이 되고 있습니다.

리워드를 길 위에 놓인 빵 부스러기라고 생각해 보세요. 마찰이 생기는 지점에 작은 보상, 발견, 즐거운 순간을 제공하면 사용자가 자연스럽게 앞으로 나아갑니다. 관심이 고려로, 고려가 행동으로 이어집니다. 에이전트는 이 빵 부스러기를 의도적으로 배치하며, Iconic 인터랙션과 리워드 트리거를 활용해 인위적이지 않고 자연스럽게 느껴지는 여정을 구축합니다.

우리는 브랜드와 함께 그들의 이야기를 전하고, 관심을 끌어모으고, 전환을 이끌어 냅니다. 리워드 모델은 이 과정이 퍼널이 아닌 대화처럼 느껴지도록 만드는 방식입니다.

밤잠을 설치게 만드는 부분 (좋은 의미로)

우리는 경험의 무한한 변주를 동적으로 생성할 수 있는 지점에 다가가고 있습니다. 각각이 특정 사용자 프로필, 특정 제품, 특정 브랜드 보이스에 맞춰져 있고, 모든 랜딩 하나하나에서 학습합니다. 두 가지 옵션으로 A/B 테스트를 하는 게 아닙니다. n명의 사용자에게 n개의 시나리오를 생성하고, 매번 조정하는 겁니다.

차원이 다른 이야기입니다. 이건 최적화가 아닙니다. UI가 당신이 어떤 화면에 있는지가 아니라, 당신이 누구인지에 진정으로 반응하게 되는 겁니다.

우리가 짓고 있는 다리 (그리고 그것이 사라질 수도 있는 이유)

지금 제가 가장 흥미롭게 느끼는 긴장감입니다. 우리는 익숙한 모습과 느낌의 UI를 만들고 있습니다. 레이아웃, 버튼, 플로우, 사람들이 알고 신뢰하는 패턴들. 하지만 그 이면에서는 에이전트가 사용자가 볼 수 없는 데이터를 바탕으로 이 요소들을 조합하고 있습니다.

AI와의 간접적인 상호작용입니다. 사람들은 세련되고 사람 손으로 만든 것 같은 인터페이스를 경험합니다. 그게 자신의 프로필, 브랜드, 제품, 그리고 수백 가지 다른 신호를 고려한 에이전트에 의해 불과 몇 초 전에 조립됐다는 사실을 모르고, 알 필요도 없습니다.

지금은 전환의 순간입니다. 사람들이 에이전트와 직접 소통하는 데 익숙해질수록, 이런 중간 단계 UI의 필요성은 줄어들 겁니다. 어쩌면 상당히. 하지만 지금, 그리고 아마 한동안은 이 지점이 임팩트가 있는 곳입니다. 익숙한 표면, 그 아래의 새로운 엔진.

우리는 다리를 짓고 있습니다. 그리고 언젠가 사람들이 이 다리를 필요로 하지 않을 수도 있다는 걸 알면서 짓고 있습니다. 스스로를 넘어서도록 설계된 것을 의도를 가지고 만든다는 것. 거기엔 뭔가 의미 있는 게 있습니다.

현재 위치

솔직하게 말하면, 아직 만들어 가는 중입니다. 기반은 잡혀 있습니다. Chameleon 로직은 동작하고 있고, Iconic 라이브러리는 테스트와 문서화가 진행 중입니다. 올해 안에 모든 조각을 연결하고, 에이전트가 참조하고 학습하고 활용할 수 있는 온라인 플랫폼과 NPM 패키지를 통해 전달할 예정입니다.

완성되진 않았습니다. 하지만 윤곽은 충분히 잡혔기에 그 뒤에 있는 생각을 공유하고 싶었습니다. 이 방향이 중요하다고 믿으니까요.

AI가 디자인 시스템을 만들어 줄 거라고 생각하셨나요?

우리는 AI를 위한 디자인 시스템을 만들고 있습니다.

버즈빌 개발자 지원하기 (클릭)

버즈빌 테크 리크루터와 Coffee Chat하기 (클릭)