디자인이 곧 코드다

세포 자동자 논리는 에이전트 디자인 시스템을 어떻게 바꿀까, 그리고 웹 개발의 미래가 이미 단순한 규칙 속에 쓰여 있을지도 모르는 이유

디자인 시스템, 인공지능, 계산 이론이 만나는 지점에서 심오한 변화가 일어나고 있습니다. 자율 에이전트의 시대에 "디자인"이 무엇을 뜻하는지에 대한 우리의 이해를 뿌리부터 흔드는 변화입니다.

수십 년 동안 우리는 디자인과 코드를 별개의 분야로 다뤄 왔습니다. 디자인은 인간의 창의성과 미적 판단의 영역, 코드는 그 아이디어를 실행 가능한 형태로 옮기는 기계적 번역이라고 여겼죠. 그러나 AI 에이전트가 사용자 인터페이스를 스스로 조립하고, 디자인 시스템을 기계가 읽을 수 있는 인프라로 소비하며, 시맨틱 토큰에서 코드를 만들어 내는 지금, 우리는 계산 이론의 훨씬 오래된 발상과 맞닿는 수렴점에 다가서고 있습니다.

그 발상이 무엇이냐고요? 디자인이 곧 코드다.

이것은 단지 귀에 감기는 문구가 아닙니다. 디자인 시스템이 세포 자동자처럼 작동하는 세계, 곧 단순한 규칙에서 복잡하고 창발적인 행동이 피어나는 세계로 우리가 향하고 있을지 모른다는 인식입니다. 무언가를 "디자인한다"는 것과 "프로그래밍한다"는 것의 경계가 완전히 사라지는 세계. 자율 에이전트가 디자인 시스템을 단지 사용하는 데 그치지 않고, 그 자체가 움직이는 디자인 시스템이 되는 세계 말입니다.

이 글에서는 세포 자동자, 창발적 행동, 그리고 에이전트 디자인 시스템의 미래 사이의 깊은 연결 고리를 살펴봅니다. 폰 노이만의 자기 복제 기계에서 오늘날의 AI 에이전트 군집에 이르기까지 이론적 토대를 따라가 보겠습니다.

Drupal과 최신 CMS 플랫폼이 Schema.org Blueprints와 Drupal AI 같은 모듈로 AI를 어떻게 통합하고 있는지도 짚어 봅니다. 그리고 이 모든 것이 디자이너, 개발자, 나아가 디지털 제품 제작의 미래에 어떤 의미를 갖는지 생각해 보겠습니다.

세포 자동자와 창발의 논리

단순한 규칙의 아름다움

1970년 수학자 존 콘웨이는 계산 이론에서 가장 많이 연구된 시스템 가운데 하나가 될 "플레이어 없는 게임", 라이프 게임(Game of Life)을 선보였습니다. 규칙은 놀라울 만큼 단순합니다.

1. 살아 있는 이웃이 둘보다 적은 살아 있는 세포는 죽는다 (과소 개체)
2. 살아 있는 이웃이 둘 또는 셋인 살아 있는 세포는 살아남는다
3. 살아 있는 이웃이 셋보다 많은 살아 있는 세포는 죽는다 (과밀)
4. 살아 있는 이웃이 정확히 셋인 죽은 세포는 살아난다 (번식)

몇 개의 이진 조건으로 표현되는 이 네 가지 규칙에서 놀랍도록 복잡한 우주가 솟아납니다. 글라이더는 무한한 격자를 가로지르고, 오실레이터는 끝없는 리듬으로 맥동하며, 건은 세포 공간 너머로 패턴의 흐름을 쏘아 보냅니다. 무엇보다 놀라운 것은, 라이프 게임이 튜링 완전하다는 것이 증명되었다는 점입니다. 알고리즘으로 계산할 수 있는 것은 원리상 무엇이든 콘웨이의 이 단순한 격자 안에서도 계산할 수 있습니다.

그림 1: 콘웨이의 생명 게임에 나오는 고스퍼의 글라이더 건. 이 패턴은 글라이더를 끊임없이 쏟아내며, 단순한 규칙만으로도 스스로 이어지는 무한한 복잡성이 만들어질 수 있음을 보여 줍니다.

이것이 세포 자동자가 가르쳐 주는 첫 번째 교훈입니다. 복잡한 행동을 위해 복잡함이 꼭 필요한 것은 아닙니다. 단순한 규칙을 바탕 위에 일관되게 적용하기만 해도, 누구도 직접 프로그래밍하지 않은 패턴과 행동이 생겨날 수 있습니다.

랭턴의 루프와 자기 복제

1984년 크리스토퍼 랭턴은 이 원리를 한 걸음 더 밀고 나가 자기 복제 루프를 만들었습니다. 이는 진정한 인공 생명의 원리를 보여 준 세포 자동자입니다. 창발적 복잡성을 보여 주는 콘웨이의 생명 게임과 달리, 랭턴의 루프는 창발적 번식.

을 보여 줍니다. 각 루프는 순환하는 경계 안에 세포 상태로 부호화된 "게놈"을 품고 있습니다. 이 게놈은 루프를 따라 끊임없이 흐르다가 뻗어 나간 건설 팔을 통해 밖으로 나가고, 151 타임스텝에 걸쳐 딸 루프를 만들어 냅니다. 딸 루프가 완성되면 부모에게서 떨어져 나오고, 둘 다 계속 복제를 이어 갑니다.

그림 2: 처음 배치 상태의 랭턴의 루프. 유전 정보가 루프를 따라 순환하며, 뻗어 나가는 팔을 통해 딸 루프의 건설을 지시합니다.

"자기 복제 기계가 세포 자동자 안에서 가능하다면, 생명 그 자체도 기계로 구현할 수 있을지 모른다."

- 크리스토퍼 랭턴, 「세포 자동자로 인공 생명 연구하기」(1986)

그 함의는 매우 깊습니다. 랭턴의 루프는 자기 복제에 생물학적 세포의 복잡함도, 폰 노이만의 원래 설계가 지닌 범용 구성 능력도 필요하지 않다는 것을 보여 줍니다. 필요한 것은 오직 다음뿐입니다.

• 단순한 국소 규칙의 집합
• 명령을 부호화하는 메커니즘
• 그 명령을 실행하는 과정

규칙이 곧 생명체입니다. 설계가 곧 코드입니다.

1999년 사야마 히로키는 에볼루프(evoloops)를 발표했습니다. 구조적 분해가 가능하고 표현형 간 상호작용이 일어나도록 만든 변종으로, 자발적인 돌연변이와 진화 역학을 가능하게 합니다. 이 루프들은 복제 과정에서 일어나는 직접적인 물리적 충돌을 통해 진화하며, 유전자형의 변이와 형태적 다양성의 증가, 세대를 거친 복잡성의 성장으로 이어집니다. 고정된 방식으로 복제하는 랭턴의 루프와 달리, 에볼루프는 외부 개입 없이도 유전되는 돌연변이를 보여 줍니다.

규칙 110과 범용 계산

스티븐 울프럼이 기초 세포 자동자를 탐구한 끝에 도달한 것은 놀라운 발견이었습니다. 규칙 110은 가장 단순한 형태의 1차원 세포 자동자가 가질 수 있는 256가지 규칙 중 하나인데도 범용 계산이 가능합니다.

룰 110은 하나의 셀과 그 양옆 이웃 셀이 이룰 수 있는 여덟 가지 조합 각각에 대한 결과만 정해 주면 완전히 규정됩니다. 그런데 이토록 단순한 규칙, 즉 여덟 개의 이진 결정만으로도 범용 튜링 머신을 시뮬레이션할 수 있습니다.

그림 3: 룰 110 셀룰러 오토마톤. 정의는 단순하지만 룰 110은 완전히 안정적이지도 완전히 혼돈스럽지도 않은 복잡한 패턴을 만들어 내는 클래스 4 행동을 보이며, 튜링 완전성이 증명되었습니다.

"범용 계산을 하는 데 컴퓨터 CPU 같은 것은 전혀 필요하지 않습니다. 이 작은 규칙 하나면 충분합니다."

- 스티븐 울프럼, 『새로운 종류의 과학(A New Kind of Science)』

2004년 매슈 쿡은 특정한 반복 배경 패턴을 가진 룰 110이 튜링 완전하다는 증명을 발표했습니다. 이 증명은 룰 110이 순환 태그 시스템을 에뮬레이션할 수 있고, 순환 태그 시스템은 다시 모든 튜링 머신을 에뮬레이션할 수 있음을 보여 줍니다. 서로 다른 88가지 기초 셀룰러 오토마톤 가운데 튜링 완전성이 직접 증명된 것은 룰 110뿐입니다.

울프럼이 제안한 계산 동등성의 원리는 훨씬 더 급진적인 생각을 담고 있습니다. 복잡성이 최소 임계치를 넘어서는 시스템은 계산 능력 면에서 본질적으로 동등하다는 것입니다. 인간의 뇌, 날씨 시스템, 그리고 룰 110은 어떤 깊은 의미에서 계산적으로 동등합니다.

0E0P 메타셀: 진정한 자기 복제

2018년 10월, 애덤 P. 고우처는 0E0P 메타셀의 구축을 완성했습니다. 콘웨이의 생명 게임에서 진정한 자기 복제가 가능한 패턴입니다. 근처에 이미 복사본이 있어야 했던 이전의 메타셀과 달리, 0E0P 메타셀은 자신의 명령 테이프까지 포함해 처음부터 스스로의 복사본을 만들어 낼 수 있습니다.

이 성과는 인공 생명 분야의 이정표입니다. 국소적인 규칙만으로 계산 기판 위에서 스스로를 퍼뜨리는 시스템이기 때문입니다. 2013년 11월 23일에는 데이브 그린이 명령 테이프를 포함해 자신의 완전한 복사본을 만들어 내는 최초의 복제자를 생명 게임 안에 구축했습니다. 콘웨이의 단순한 2상태 오토마톤조차 한계 없는 자기 복제를 뒷받침할 수 있음을 보여 준 것입니다.

계산 기판으로서의 디자인 시스템

아토믹 디자인에서 에이전틱 디자인으로

브래드 프로스트가 2013년에 소개한 아토믹 디자인(Atomic Design) 방법론은 디자인 시스템을 바라보는 관점을 혁신했습니다. 인터페이스를 원자(버튼이나 입력창 같은 기본 요소), 분자(단순한 조합), 유기체(복잡한 UI 영역), 템플릿(페이지 레이아웃), 페이지(최종 구현물)로 나눔으로써, 복잡성을 다루기 위한 계층적 구조를 제공했습니다.

하지만 돌이켜 보면 놀라운 점이 있습니다. 아토믹 디자인은 이미 셀룰러 오토마톤의 원리를 담고 있었습니다. 그것을 명시적으로 인식하지 못했을 뿐입니다.

"디자인 시스템이 지루할 때, 디자이너와 개발자는 새로운 일에 매달리고 새로운 문제를 풀 자유를 얻습니다. 디자인 시스템이 지루한 일의 짐을 대신 짊어지므로, 디자이너와 개발자는 그럴 필요가 없습니다."

- 조시 클라크(Josh Clark), "가장 흥미로운 디자인 시스템은 지루하다"

2023년 2월, 브래드 프로스트(Brad Frost)는 "AI 시대의 디자인 시스템"에 관해 이렇게 썼습니다.

"AI는 디자인 시스템의 자연스러운 소비자입니다... 사실 디자인 시스템 컴포넌트 작업의 상당 부분은 기계적이고 예측 가능합니다. 우리는 이미 PlopJS 같은 도구로 라이브러리의 나머지 부분과 같은 형태의 컴포넌트 보일러플레이트를 뚝딱 만들어 냅니다. 흔하디흔한 보일러플레이트를 대량으로 만드는 데 AI가 도움을 준다면 환영입니다."

- 브래드 프로스트(Brad Frost)

디자인 시스템이 지닌 이 기계적이고 예측 가능한 성질이야말로 셀룰러 오토마톤 방식의 운영에 딱 들어맞는 이유입니다. 규칙이 명확하고, 국소적이며, 일관되게 적용된다면 에이전트는 자율적으로 움직일 수 있습니다. 콘웨이의 생명 게임(Conway's Game of Life)의 세포들이 글라이더와 진동자를 만들어 내는 데 중앙 제어기가 필요 없는 것과 같습니다.

기계가 읽을 수 있어야 한다는 과제

Storybook MCP(Model Context Protocol) 이니셔티브는 이 방향의 중요한 진화를 보여 줍니다. 2025년 말에 발표된 Storybook MCP는 기존 Storybook 환경에서 가져온, 기계가 읽을 수 있는 컴포넌트 메타데이터를 AI 코딩 에이전트에게 제공합니다.

핵심 통찰은 에이전트에게 필요한 것이 날것의 코드나 시각적 문서가 아니라는 점입니다. 에이전트에게 필요한 것은 다음과 같습니다.

• 컴포넌트 매니페스트: 모든 컴포넌트의 props, 변형(variant), 디자인 토큰 바인딩, 사용 예시를 담은 구조화된 메타데이터
• 의미 기반 네이밍: 값만이 아니라 에이전트에게 의미를 전달하는, 의도가 담긴 토큰. 예를 들면 action.primary.confirm
• 검증 루프: 테스트를 실행하고, 실패를 확인하고, 스스로 바로잡는 능력

"Storybook MCP는 에이전트가 여러분의 패턴을 따르고 테스트를 통과하도록 돕습니다. 에이전트에게 지금까지 없었던 두 가지, 즉 기계가 읽을 수 있는 컴포넌트 메타데이터와 실수를 스스로 고치는 반복 루프를 쥐여 줍니다."

- Storybook 팀

Storybook MCP에는 자율 교정 루프가 들어 있습니다. 에이전트가 컴포넌트 테스트(인터랙션 및 접근성)를 실행하고, 무엇이 실패했는지 확인하고, 자신의 버그를 직접 고칠 수 있게 해 줍니다. 개발자는 테스트가 통과한 뒤에만 개입하면 됩니다. 더 이상 프롬프트를 일일이 챙기며 보모 노릇을 할 필요가 없습니다.

이것은 디자인에 적용한 셀룰러 오토마톤의 구조 그 자체입니다. 국소 규칙(컴포넌트 명세), 이웃 간 상호작용(조합 패턴), 반복적 갱신(검증과 자기 교정)이 그것입니다.

유전체로서의 나의 컴포넌트 매니페스트

컴포넌트 매니페스트가 어떻게 작동하는지 생각해 보면 랭턴의 루프(Langton's Loops)와의 비교는 더욱 들어맞습니다. 랭턴의 시스템에서는 순환하는 세포에 부호화된 "유전체"가 새로운 루프를 만드는 지침을 담고 있습니다. 기계가 읽을 수 있는 디자인 시스템에서는 컴포넌트 매니페스트가 인터페이스를 조립하는 지침을 담고 있습니다.

컴포넌트 매니페스트는 다음과 같은 내용을 명시할 수 있습니다.

{
  "name": "Button",
  "variants": ["primary", "secondary", "destructive"],
  "sizes": ["sm", "md", "lg"],
  "props": {
    "label": "string",
    "disabled": "boolean",
    "onClick": "function"
  },
  "tokens": {
    "background": "color.action.primary",
    "borderRadius": "radius.md",
    "padding": "space.3"
  },
  "constraints": [
    "Must have accessible contrast ratio",
    "Label required for non-icon buttons",
    "Minimum touch target 44x44px"
  ],
  "examples": [
    { "variant": "primary", "label": "Submit", "size": "md" },
    { "variant": "destructive", "label": "Delete", "size": "sm" }
  ]
}

이 매니페스트는 디자인 명세이자 실행 가능한 코드입니다. 정확히는 실행 가능한 코드를 생성해 낼 수 있는 지침서입니다. 이 매니페스트를 읽는 에이전트는 인간적인 의미의 미학이나 사용자 경험을 이해할 필요가 없습니다. 규칙을 따르고, 제약 조건에 맞춰 요소를 조합하고, 유효한 결과물을 만들어 내기만 하면 됩니다.

YAML 형식을 쓰자는 브래드 프로스트(Brad Frost)의 의견에 저도 동의합니다.

Drupal 컴포넌트도 이미 YAML 형식을 사용합니다. 예를 들면 이런 식입니다.

$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
name: Button
status: experimental
description: Use Bootstrap custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
props:
  type: object
  properties:
    html_tag:
      type: string
      title: The HTML tag to use for the button (button | a). Defaults to `button`.
      default: button
      enum:
        - button
        - a
    url:
      type: string
      title: URL Link
      description: URL link for the button when the HTML tag is an anchor link.
      $ref: "ui-patterns://url"
    color:
      type: string
      title: Color
      description: Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
      default: ''
      enum:
        - ''
        - primary
        - secondary
        - success
        - danger
        - warning
        - info
        - dark
        - light
        - link
    outline:
      type: boolean
      title: Outline
      description: In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.
      default: false
    size:
      type: string
      title: Size
      description: Bootstrap button size
      default: ''
      enum:
        - ''
        - btn-sm
        - btn-lg
    disabled:
      type: boolean
      title: Disabled
      description: Disabled button
      default: false
    button_utility_classes:
      type: array
      title: Utility Classes
      default: []
      items:
        type: 'string'
      description: An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.
    attributes:
      type: object
      title: Attributes
      description: HTML attributes for the containing element.
      $ref: 'ui-patterns://attributes'
slots:
  content:
    type: string
    title: Content
    description: The content for the button
    minLength: 1
    examples:
      - Press
      - Submit now
      - Save
      - Login
      - Read more

디자인 은(는) 곧 코드다.

• 베리언트(Variants)
• 토큰(Tokens)
• 프롭(Props)

• 제약 조건(Constraints) (컴포넌트에 추가할 수 있습니다)

• 슬롯 규칙(Slots rules) (다른 슬롯에 무엇을 넣을 수 있는지, 내 슬롯에 무엇이 들어올 수 있는지)

• 규칙(Rules)

• 예시(Examples) 

• 애니메이션(Animations)  ( 사용을 허용하거나 권장하는 범위 )

그런 다음 동작을 지켜보며 실험해 보세요.

예를 들어 https://storybook.demo.varbase.vardot.com/?path=/story/atoms-button--primary 

환경 변수로서의 디자인 토큰

디자인 토큰은 이 퍼즐의 또 다른 핵심 조각입니다. 셀룰러 오토마타에서 셀은 자신의 바로 주변 환경, 곧 이웃 셀들의 상태에 반응합니다. 디자인 시스템에서는 컴포넌트가 디자인 토큰, 즉 겉모습과 동작을 결정하는 맥락적 값에 반응합니다.

최신 토큰 아키텍처는 여러 계층으로 이루어집니다.

• 코어 토큰: 다음과 같은 원시 값 color.blue.500: #3B82F6
• 시맨틱 토큰: 의도를 담은 참조 값, 예를 들어 color.action.primary: color.blue.500
• 컴포넌트 토큰: 범위가 한정된 적용 값, 예를 들어 button.background.primary: color.action.primary

에이전트가 Button 컴포넌트를 생성할 때, "primary"가 파란색을 뜻한다는 것을 알 필요는 없습니다. button.background.primary만 참조하고, 토큰 시스템이 알맞은 값으로 풀어 줄 것이라고 믿으면 됩니다. 환경(토큰 계층)이 정보를 담고 있고, 컴포넌트(셀)는 그에 반응하기만 하면 됩니다.

다음과 같은 도구 Tokens Studio는 디자인 토큰을 리졸버(resolver)가 달린 연산 그래프로 다루도록 발전했습니다. 리졸버는 맥락에 따라 어떤 기본 토큰을 쓸지 의미적으로 판단하는 노드입니다. 이로써 디자인 토큰은 고정된 값에서 동적인 규칙 기반 시스템으로 바뀝니다.

Drupal 생태계와 AI 통합

콘텐츠 관리 시스템(CMS)에 AI를 통합하는 일은 "디자인이 곧 코드다"라는 원칙을 탐구하기에 더없이 좋은 실험실입니다. Drupal 같은 CMS는 이미 그 핵심 개념을 갖추고 있습니다. 구조화된 콘텐츠 유형, 필드 정의, 관계, 그리고 조합 규칙이 그것입니다.

이런 말을 하게 될 날이 올 줄은 몰랐습니다. 제게 이것은 그야말로 최첨단의 정수였습니다.

 우리가 가질 수 있는 궁극의 컴퓨터 세트입니다. 미래의 스타트렉에서 온 듯한 개발자들이 컴퓨터에게 말을 걸어 프로그래밍을 맡기는 모습이죠.

에이전트 경험(AX)과 새로운 사용자

기계를 위한 설계

2025년 초, Netlify의 CEO 매티아스 빌만(Mathias Biilmann)은 "에이전트 경험"(AX)이라는 개념을 내놓았습니다. AI 에이전트가 제품과 플랫폼을 어떻게 다루는지에 초점을 맞춘 새로운 분야입니다.

이는 근본적인 변화입니다. 수십 년 동안 UX(사용자 경험)는 인간의 인지, 지각, 행동에 맞춰 최적화되었고, DX(개발자 경험)는 소프트웨어를 만드는 인간 개발자에 맞춰 최적화되었습니다. AX는 에이전트가 디지털 시스템의 주된 사용자가 되어 가고 있으며, 이들에게는 완전히 다른 요구가 있다는 점을 인식합니다.

• 이들은 시각적 미학에 관심이 없습니다- 구조화되어 해석할 수 있는 데이터만 필요합니다
• 이들은 인터페이스를 탐색하지 않습니다- API를 호출하고 매니페스트를 읽어 들입니다
• 이들은 사람처럼 문서를 읽지 않습니다- 기계가 읽을 수 있는 맥락이 필요합니다
• 이들은 주관적인 판단을 하지 않습니다- 규칙과 제약 조건을 따릅니다

"AI 에이전트는 사람이 아닙니다. 버튼의 크기도, 타이포그래피의 가독성도, 웹사이트의 아름다운 색상 팔레트도, 앱의 화려한 애니메이션도 신경 쓰지 않습니다. 그렇다면 AI 에이전트는 무엇을 '신경 쓸까요?' 오늘날에는 뚜렷한 답이 없지만, 앞으로 몇 년 동안 점점 더 중요해질 질문입니다."

- AX 리서치

답은 이렇습니다. 명확한 규칙, 예측 가능한 동작, 잘 구조화된 데이터, 그리고 스스로 행동을 검증하고 바로잡을 수 있는 피드백 루프입니다.

이중 인터페이스라는 과제

AX를 설계한다는 것은 두 개의 인터페이스를 동시에 만든다는 뜻입니다.

1. 사람-에이전트 인터페이스: 사람이 에이전트의 동작을 감독하고, 승인하고, 수정하고, 이끄는 '관제실' 계층입니다. 양식과 버튼이 아니라 대시보드와 승인 대기열을 떠올려 보세요.
2. 에이전트-시스템 인터페이스: 에이전트가 API, 데이터베이스, 도구와 상호작용하는 '실행' 계층입니다. 견고해야 하고, 문서화가 잘 되어 있어야 하며, 기계의 효율에 맞게 최적화되어야 합니다.

이는 두 가지 서로 다른 관점이 공존하는 셀룰러 오토마타의 구조와 닮았습니다.

• 지역적 관점: 각 셀(에이전트)은 바로 이웃한 셀을 바탕으로 단순한 규칙을 따릅니다
• 전역적 관점: 큰 규모에서만 눈에 보이는 복잡한 패턴이 나타납니다

"에이전트 경험 설계(AX)는 에이전트를 위한, 그리고 에이전트에 의한 뛰어난 사용성을 만들어 내야 합니다. 그래서 훌륭한 AX는 훌륭한 사용자 경험(UX)으로 이어집니다. AI 에이전트가 끊어진 프로세스나 프로토콜, 혹은 시스템마다 제각각인 용어를 만나면 그 작업을 수행하지 못합니다. 에이전트에게는 나쁜 경험이고, 결국 고객이나 직원의 나쁜 경험으로 이어집니다."

- 캣 홈스(Kat Holmes), 세일즈포스 최고 경험 책임자(Chief Experience Officer)

UX에서 AX로: 디지털 디자인의 진화

스티그머지와 간접 소통

군집 지능에서 가장 강력한 개념 중 하나는 스티그머지(stigmergy)입니다. 환경에 남긴 흔적을 통한 간접적인 협력을 뜻합니다. 개미는 먹이가 있는 곳을 서로 직접 알려 주지 않습니다. 대신 페로몬 길을 남기고, 다른 개미들이 그 길을 따라갑니다. 환경이 곧 소통의 매체가 되는 것입니다.

에이전트 기반 디자인 시스템에서 스티그머지는 이런 모습으로 나타납니다.

• 공유 컴포넌트 라이브러리: 에이전트는 어떤 컴포넌트가 있고 어떻게 쓰였는지를 "본다"
• 디자인 토큰: 디자인 결정을 환경의 사실로 담아 둔 의미 기반 값
• 패턴 문서: 이후의 에이전트에게 페로몬 길 역할을 하는 사용 예시
• 테스트 스위트: 유효한 출력의 범위를 제한하는 검증 규칙
• Git 히스토리: 에이전트가 참조할 수 있는 과거 결정의 기록

에이전트가 컴포넌트로 UI를 만들면 코드베이스에, 문서에, 그리고 자신이 세운 패턴 속에 흔적이 남습니다. 비슷한 작업을 맡게 될 이후의 에이전트는 이 흔적의 영향을 받게 되고, 어느 한 에이전트도 혼자서는 갖지 못한 집단 지능이 만들어집니다.

에이전트 디자인 패턴

앤드루 응(Andrew Ng)을 비롯한 이들은 에이전트형 AI 시스템의 네 가지 핵심 패턴을 정리했습니다.

1. 성찰(Reflection): AI가 자신의 출력을 스스로 평가하고 반복해서 개선합니다
2. 도구 사용(Tool Use): AI가 외부 도구, API, 시스템과 상호작용합니다
3. 계획(Planning):AI는 복잡한 작업을 하위 작업으로 나누어 순차적으로 실행합니다
4. 멀티 에이전트: 여러 전문 에이전트가 협력하여 복잡한 작업을 처리합니다

이러한 패턴은 셀룰러 오토마타의 개념과 그대로 대응됩니다:

디자인이 곧 코드다: 더 깊이 읽기

"디자인이 곧 코드다"가 진짜 의미하는 것

"디자인이 곧 코드다"라고 말할 때, 우리는 동시에 여러 가지를 주장하고 있습니다:

1. 의미적 등가성

디자인 결정은 제대로 인코딩되면 실행 가능한 것이 됩니다. 디자인 토큰은 단순한 값이 아니라 하나의 지시입니다. 컴포넌트 명세는 단순한 문서가 아니라 하나의 프로그램입니다. 에이전트가 이런 산출물을 받아들일 때, 그들은 디자인을 구현하는 만큼이나 디자인을 실행하고 있는 셈입니다.

2. 생성 능력

규칙 110이 계산 가능한 모든 것을 계산할 수 있듯이, 충분히 완결된 디자인 시스템은 유효한 모든 인터페이스를 만들어 낼 수 있습니다. 시스템은 유효한 모든 표현의 가능성을 품고 있습니다. 무엇이 나타나는지는 오직 초기 조건(요구 사항)과 규칙(제약)에 달려 있습니다.

3. 창발적 복잡성

가장 정교한 인터페이스는 위에서 아래로 설계되는 것이 아니라, 단순한 규칙을 일관되게 적용하는 가운데 창발합니다. 잘 설계된 버튼을 일관되게 사용하면, 그 일관성을 누군가 일부러 계획하지 않아도 통일된 시각 언어가 만들어집니다.

4. 계산적 환원 불가능성

어떤 디자인 결과는 시스템을 실제로 돌려 보지 않고서는 예측할 수 없습니다. 에이전트가 조립한 인터페이스가 어떤 모습일지는 에이전트가 직접 조립하게 해 보기 전에는 알 수 없습니다. 울프럼의 계산적 환원 불가능성 원리를 디자인에 적용한 것입니다.

5. 자기 수정

복제 과정에서 돌연변이를 일으키는 에볼루프(evoloop)처럼, 에이전트 친화적인 디자인 시스템도 사용을 통해 진화할 수 있습니다. 에이전트가 생성한 컴포넌트는 이후 에이전트들이 활용할 라이브러리의 일부가 됩니다. 시스템은 배우고, 적응하고, 성장합니다.

확장된 셀룰러 오토마타 비유

비유를 넘어: 실제로 일어나는 수렴

하지만 이것은 단순한 비유가 아닙니다. 이 수렴은 실제로, 지금 일어나고 있습니다:

• Storybook MCP는 컴포넌트 라이브러리를 에이전트가 실행할 수 있는, 기계가 읽을 수 있는 지침으로 바꿔 줍니다
• Model Context Protocol은 에이전트가 도구와 맥락에 접근하는 방식을 표준화하여, 에이전트 작업을 위한 범용 기반을 만듭니다
• 멀티 에이전트 아키텍처는 전문화된 에이전트(설계자, 코더, 리뷰어)에게 역할을 나누고, 이들은 프로토콜에 따라 상호작용합니다. 기능이 분화된 세포처럼 말이죠
• 자가 치유 루프다음과 같은 반복 구조를 통해 에이전트가 테스트를 실행하고, 오류를 감지하고, 반복 개선할 수 있게 합니다. 이는 세포 자동자(cellular automata)가 안정적인 구성을 진화시키는 데 쓰는 피드백 메커니즘과 같습니다
• Schema.org Blueprints는 콘텐츠 구조를 기계가 읽을 수 있고 의미적으로 이해할 수 있게 만듭니다
• Drupal AI는 AI 에이전트가 콘텐츠를 자율적으로 만들고, 수정하고, 관리할 수 있는 인프라를 제공합니다

우리는 "디자인이 곧 코드다"를 철학적 입장으로 접근하는 것이 아닙니다. 이를 기술 인프라로 구축하고 있습니다.

시사점과 앞으로의 길

디자이너에게

디자이너의 역할은 "사각형을 그리는 사람"에서 "규칙을 정의하는 사람"으로 바뀌고 있습니다. 브래드 프로스트(Brad Frost)는 이렇게 말했습니다.

"자신의 일을 사각형 만들기라고 생각하는 디자이너와 개발자는 걱정할 일이 많습니다. 하지만 자신의 일을 문제 해결이라고 생각하고, 그 문제를 풀기 위해 어쩌다 사각형을 만들고 다루게 될 뿐이라고 여기는 디자이너와 개발자는 걱정할 것이 훨씬 적습니다."

- 브래드 프로스트

에이전트 시대의 디자이너는 다음 일을 하게 됩니다.

• 시맨틱 토큰과 그 관계를 정의합니다
• 구성 제약과 패턴을 세웁니다
• 에이전트가 충족해야 하는 검증 규칙을 만듭니다
• 창발을 이끄는 규칙을 가꾸고 발전시킵니다
• 스스로 바로잡을 수 있게 하는 피드백 메커니즘을 설계합니다
• 어떤 결과물이 받아들여질 수 있는지 판단하는 "적합도 함수(fitness function)"를 빚어냅니다

이것은 한 단계 더 높은 추상화 수준의 디자인입니다. 디자인 자체가 아니라 디자인을 만들어 내는 규칙을 설계하는 것이죠. 세포를 하나하나 그리는 대신 세포 자동자의 규칙을 정의하는 것과 같습니다.

개발자에게

개발자는 에이전트 시스템의 설계자가 됩니다. Anthropic은 이렇게 설명합니다.

"소프트웨어 개발 분야는 LLM 기능의 놀라운 잠재력을 보여 주었으며, 그 역량은 코드 자동 완성에서 자율적인 문제 해결로 진화해 왔습니다."

개발자에게는 다음이 필요합니다.

• 에이전트와 시스템 사이의 기계 판독 가능한 인터페이스를 만듭니다
• 피드백 루프와 검증 메커니즘을 설계합니다
• 창발적 행동이 일어나는 발판을 구축합니다
• 최종 판단자로서 사람의 감독을 유지합니다
• 에이전트가 서로 소통하는 프로토콜을 정의합니다
• 서로 다른 에이전트 시스템을 잇는 "글루 코드(glue code)"를 구현합니다

웹 개발과 CMS 플랫폼에게

Drupal 같은 플랫폼에 AI가 통합되는 것은 다음과 같은 미래를 가리킵니다.

• 콘텐츠 모델을 에이전트가 활용할 수 있게 됩니다. Schema.org 같은 표준을 통해서입니다
• 편집 워크플로가 에이전트의 도움을 받게 됩니다. AI 기반 초안 작성, 검수, 최적화가 함께합니다
• 검색이 진화합니다. 키워드 매칭에서 임베딩과 벡터 데이터베이스를 통한 의미 이해로 나아갑니다
• 개인화가 자율적으로 이루어집니다. 에이전트가 사용자의 선호를 학습하고 콘텐츠를 실시간으로 맞춥니다
• 개발 속도가 빨라집니다. 에이전트가 컴포넌트, 테스트, 문서를 생성하기 때문입니다

Drupal AI, Drupal Canvas, Schema.org Blueprints, AI 프로바이더 통합 같은 모듈을 통해 Drupal 생태계가 AI를 받아들이고 있다는 사실은, 이 미래가 이미 만들어지고 있음을 보여 줍니다.

조직에게

경쟁 우위는 디자인 시스템이 가장 "에이전트 친화적"인 조직의 몫이 될 것입니다. 에이전트 친화적인 시스템의 특징은 다음과 같습니다.

• 컴포넌트 상태와 변형을 빠짐없이 다룹니다
• 의도를 전달하는 시맨틱한 네이밍을 씁니다
• 기계가 읽을 수 있는 문서와 맥락을 갖춥니다
• 검증과 테스트 인프라를 갖춥니다
• 유효한 출력의 범위를 한정하는 명확한 제약이 있습니다
• 에이전트가 사용하도록 설계된 API(AX 우선)를 제공합니다
• Schema.org 우선의 콘텐츠 아키텍처를 갖춥니다

디지털 제품의 미래를 위하여

최종 상태는 일종의 디지털 생태계와 같습니다. 수많은 에이전트가 지역적 규칙에 따라 움직이며, 어떤 디자이너나 개발자도 계획하지 않은 창발적 인터페이스를 만들어 냅니다. 그럼에도 그것들은 밑바탕의 규칙이 탄탄하기에 어딘가 하나로 어우러집니다.

들리는 것만큼 터무니없는 이야기가 아닙니다. 생물학적 시스템이 작동하는 방식, 도시가 자라나는 방식, 시장이 돌아가는 방식이 바로 그렇습니다. 문제는 우리가 이 상태에 도달할 것인가가 아니라, 그 전환기를 어떻게 헤쳐 나갈 것인가입니다.

맺음말: 코드는 살아 있다

셀룰러 오토마타를 고안한 박식가 존 폰 노이만은 하나의 근본적인 물음에 이끌렸습니다. 자기 복제에 필요한 최소한의 복잡성은 무엇인가? 그가 내놓은 답, 폰 노이만 만능 구성자는 자기 복제에 생물학적 장치가 필요 없다는 것을 보여 주었습니다. 필요한 것은 자신의 적용 방식까지 스스로 담고 있는 규칙뿐입니다.

70년이 지난 지금, 우리는 같은 원리가 디자인 시스템에도 적용된다는 사실을 발견하고 있습니다. UI를 자율적으로 생성하기 위한 최소 조건은 범용 인공지능도, 인간 수준의 창의성도 아닙니다. 에이전트가 실행할 수 있는, 완전하고 일관되며 기계가 읽을 수 있는 규칙의 집합입니다.

랭턴의 루프가 셀룰러 격자 위에서 스스로 복제될 때, 우리는 그 루프가 새로운 루프를 "디자인"한다고 말하지 않습니다. 복제는 그저 규칙이 만들어 내는 결과일 뿐입니다. 하지만 그 결과, 즉 끝없이 불어나는 자기 유사 패턴의 군체는 분명 생성적이며, 어떤 기능적 의미에서는 창조적입니다.

AI 에이전트가 시맨틱 토큰과 구성 제약을 따라 디자인 시스템 컴포넌트로 인터페이스를 조립할 때도 비슷한 일이 벌어집니다. "창의성"은 에이전트에게 있는 것이 아니라 에이전트가 실행하는 규칙에 있습니다. 사람이 설계했지만, 이제는 스스로 작동하는 규칙입니다.

우리는 디지털 창작의 새로운 시대의 문턱에 서 있습니다. 에이전트는 이미 여기에 있습니다. 프로토콜이 형성되고 있습니다. 디자인 시스템은 인공 생명의 토양이 되어 가고 있습니다.

디자인이 곧 코드입니다.
그리고 코드는 살아나고 있습니다.

주요 글과 프로젝트

• Design Systems in the Time of AI - Brad Frost
• Storybook MCP Sneak Peek - Storybook
• Introducing AX: Why Agent Experience Matters - Mathias Biilmann
• Building Effective Agents - Anthropic

Drupal AI 자료

• Drupal AI

• Schema.org Blueprints Module

   

셀룰러 오토마타 자료

• Conway's Game of Life Lexicon - 약 1,500개의 도형
• A Working Turing Machine in Game of Life
• Langton's Loops - Wikipedia
• Rule Sets for Cellular Automata
• A New Kind of Science Online - Stephen Wolfram
• Cellular Automata - Nature of Code

계산 이론, 디자인 시스템, 인공지능, 웹 개발이 만나는 지점의 아이디어를 탐구했습니다.

 여기에 담긴 견해는 부상하는 흐름을 두고 해 본 추측적 탐색일 뿐, 확정된 미래에 대한 예측이 아닙니다.

우리는 루프 안에서 작동하고, 또 다른 루프 속에서 다른 AI 에이전트와 상호작용하는 AI 에이전트를 만들고 있다고 봅니다.

디자인은 시스템이 선택된 캔버스와 규칙의 집합 안에서 한평생의 루프처럼 루프를 돌며 작동할 때 곧 코드입니다.