AI-Native UI 컴포넌트: 아키텍처와 문법

당신의 디자인 시스템에는 숨겨진 가정이 하나 있습니다. 키보드 앞에 정확히 한 명의 행위자(actor)가 있다는 가정입니다. 그 가정은 곧 깨질 것입니다. 당신이 출시하는 모든 인터페이스를 두 명의 행위자가 공유하게 될 것이기 때문입니다. 바로 사용자, 그리고 사용자를 대신하여 행동하는 에이전트(agent)입니다. 그들은 동일한 화면을 읽고, 동일한 필드를 변경하며, 때로는 동일한 순간에 동일한 컴포넌트에서 동작하려고 시도할 것입니다. 오늘날 프로덕션 환경에 있는 컴포넌트 라이브러리 중 이를 위해 구축된 것은 거의 없습니다. 이를 해결하려는 대부분의 시도는 잘못된 계층(layer)에서 시작됩니다. 저 또한 잘못된 계층에서 시작했습니다. 처음 AI-native 드롭다운(dropdown)을 설계하기 위해 앉았을 때, 저는 테두리에 그라데이션을 넣고 싶었습니다. 에이전트가 드롭다운을 열 때 나타나는 작은 팝 애니메이션(pop animation) 같은 것 말이죠. 저는 이것이 경험을 AI-native하게 만들어 줄 것이라고 스스로에게 말했습니다. 하지만 그렇지 않았습니다. 그라데이션은 아무런 역할도 하지 않았습니다. 그것은 문제를 찾고 있는 장식에 불과했습니다. 제가 물었어야 했던 질문은 'AI-native는 어떻게 보이는가'가 아니었습니다. 질문은 'AI-native란 무엇인가'여야 했습니다. 구조가 명확해지면 시각적인 요소는 그 뒤를 따를 수 있습니다.

두 명의 행위자에게는 두 개의 인터페이스가 아닌 하나의 인터페이스가 필요합니다. 첫 번째 진짜 질문은 컴포넌트의 상태(state)를 누가 소유하느냐입니다. 만약 사용자와 에이전트가 각각 드롭다운에 작용하는 자신만의 방식을 가진다면, 드롭다운은 누가 조작하고 있는지 알아야 하며 각각에 다르게 반응해야 할 것입니다. 두 개의 API, 두 개의 코드 경로(code paths), 두 개의 진실의 원천(sources of truth). 현대적인 프레임워크(frameworks)가 무료로 제공하는 모든 것들을 중복하거나 우회해야 할 것입니다. 접근성(Accessibility), 포커스 관리(Focus management), 반응성(Reactivity) 등이 그러합니다. 정답은 하나의 인터페이스입니다. 두 행위자 모두 동일한 경로를 통해 동일한 상태를 변경합니다. 컴포넌트는 진실을 렌더링하며, 그것이 누구에 의해 발생했는지 묻지 않습니다. 이 단 한 번의 움직임은 보기보다 더 많은 문제를 해결합니다. 프레임워크는 안정적으로 유지됩니다. 스크린 리더(Screen readers)는 정확성을 유지합니다. 개발자 도구(Devtools)는 여전히 모든 변경 사항을 추적할 수 있습니다. 에이전트는 코드베이스에서 특별한 케이스(special case)가 되지 않습니다.

사용자가 항상 승리합니다. 하나의 상태 표면(state surface)을 두 명의 행위자가 공유한다는 것은 명백한 걱정을 불러일으킵니다. 두 명 모두가 동시에 행동하면 어떻게 될까요? 첫 번째 본능은 에이전트를 지연시키는 것입니다. 사용자에게 우선순위의 창(window of priority)을 주는 것이죠.

그 본능은 그 지연(delay)이 실제로 무엇을 해결하고 있는지를 묻는 순간 사라집니다. 지연은 갈등을 해결하지 않습니다. 단지 갈등을 미룰 뿐입니다. 사용자는 지연 시간(delay window) 내에서도 여전히 행동할 수 있으며, 에이전트의 동작은 사용자가 이미 다른 곳으로 이동한 후 예측할 수 없는 시점에 실행됩니다. 올바른 모델은 비대칭적(asymmetric)입니다. 에이전트는 행동하기 전에 상태(state)를 읽습니다. 만약 사용자가 무언가를 시작했다면, 에이전트는 물러납니다. 사용자가 항상 승리합니다. 에이전트를 사용자로부터 보호하는 대칭적 잠금(symmetric lock)은 존재하지 않습니다. 사용자는 어떤 컴포넌트에서든, 어떤 순간에든 에이전트가 하고 있는 모든 것을 중단시킬 수 있습니다. 이러한 비대칭성은 디자인 시스템이 다음과 같이 말하고 있는 것입니다: 사용자가 주된 행위자(principal actor)이며, 에이전트는 사용자의 인터페이스에 머무는 손님이라는 것을 말입니다. 아키텍처는 완료되었습니다. 시각적 레이어(visual layer)는 아직 비어 있습니다. 이 시점에서 컴포넌트는 구조적으로 올바릅니다. 두 명의 행위자가 이를 공유할 수 있습니다. 동시성(simultaneity)은 사용자를 향해 해결됩니다. 프레임워크와 접근성(accessibility)은 온전하게 유지됩니다. 하지만 여전히 문제가 있습니다. 에이전트가 드롭다운(dropdown)을 열 때, 사용자는 그것이 일어났다는 사실을 알 방법이 없습니다. 드롭다운은 그냥 변할 뿐입니다. 이것이 바로 시각적 처리(visual treatment)가 진정한 역할을 수행해야 하는 순간이지만, 저는 여전히 그 이유를 말할 수 없습니다. 해답은 음성 비서(voice assistants)를 생각하는 것에서 왔습니다. iOS의 Siri, Android의 Google Assistant가 그 예입니다. 동작 방식은 동일합니다. Siri를 예로 들어보겠습니다. Siri는 그냥 말할 수도 있습니다. Siri는 목소리가 있고, 당신은 귀가 있으니까요. 그럼에도 불구하고 Siri가 활성화되면 화면의 가장자리가 빛납니다. 왜일까요? 그것은 존재의 증거(proof of presence)입니다. 가시적인 장소에 고정된 보이지 않는 행위자라는 증거 말입니다. 이것은 이벤트(event)가 아니라 상태(state)입니다. 빛은 Siri가 활성화되어 있는 동안 지속됩니다. 당신은 언제든 고개를 들어 상황을 파악할 수 있습니다. 이것은 채널 분리(channel separation)입니다. 빛은 화면을 점유하지 않으면서 화면의 테두리를 형성합니다. Siri는 자신이 거기 있다는 것을 상기시키기 위해 당신의 콘텐츠를 방해할 필요가 없습니다. 이 각각의 요소는 드롭다운에 직접적으로 매핑됩니다. 에이전트가 행동할 때, 사용자의 주의(attention)는 다른 곳에 있습니다. 컴포넌트는 보이지 않는 행위자가 지금 바로 여기 있으며, 이 특정 표면(surface)에 무언가를 하고 있다는 것을 알릴 방법이 필요합니다. 드디어 그라데이션(gradient)이 할 일을 찾았습니다. 그것은 장식이 아닙니다.

그것은 컴포넌트의 목소리입니다. 피드백이 언어가 될 때, 사고의 전환이 일어납니다. 화면에 다섯 개의 드롭다운(dropdown) 메뉴가 열려 있는 모습을 상상해 보세요. 사용자는 찾을 수 없는 옵션을 찾기 위해 그 안을 뒤지고 있습니다. 사용자는 찾는 것을 포기하고 에이전트(agent)에게 도움을 요청합니다. 그때 적절한 드롭다운이 빛납니다(glow). 해당 드롭다운은 일치하는 옵션으로 스크롤됩니다. 사용자의 시선이 그곳으로 끌립니다. 방금 무슨 일이 일어났는지 주목해 보세요. 인터페이스(interface)는 정답을 표시한 것이 아닙니다. 인터페이스 자체가 정답이 되었습니다. 사용자가 질문을 던졌고, 인터페이스 스스로가 응답했습니다. 채팅 패널의 텍스트도, 툴팁(tooltip)도, 토스트(toast)도 아닙니다. 공간 안의 하나의 표면(surface)이 스스로를 가리킨 것입니다. 시각적 처리(visual treatment)는 더 이상 피드백에 머물지 않습니다. 그것은 언어가 되었습니다. AI-네이티브(AI-native)란 인터페이스가 에이전트가 구사하는 언어가 되는 것을 의미합니다. 이것이 진정한 재정의(reframe)입니다. 그 외의 모든 것은 문법(grammar)입니다.

언어에는 문법이 필요합니다. 인터페이스를 하나의 언어로 보기 시작하면, 언어가 던지는 질문들을 던지게 됩니다. 명사(noun)는 무엇인가? 에이전트가 작용하고 있는 컴포넌트(component)입니다. 빛(glow)은 어떤 표면이 말하고 있는지를 식별합니다. 동사(verb)는 무엇인가? 에이전트가 수행하는 행동의 종류입니다. 여기에는 네 가지가 있습니다. Locate(위치 찾기)는 사용자를 위해 무언가를 찾아냅니다. Suggest(제안하기)는 편집 가능한 필드에 콘텐츠를 제안합니다. Execute(실행하기)는 사용자를 대신하여 행동합니다. Observe(관찰하기)는 상태(state)를 읽습니다. 각 동사는 고유한 시각적 처리(visual treatment)를 수반하므로, 사용자는 단순히 무언가 일어나고 있다는 사실뿐만 아니라 '무엇'이 일어나고 있는지를 읽게 됩니다.

침묵(silence)은 어떨까요? 이것은 어휘(vocabulary)에서 가장 날카로운 결정입니다. 에이전트는 사용자의 현실(reality)에 작용할 때만 시각적으로 말합니다. 현실을 읽는 것은 침묵 속에서 이루어집니다. 관찰(observation)은 빛나지 않습니다. 만약 모든 에이전트의 행동이 시각적 효과를 만들어낸다면, 그 시각 효과는 아무런 의미도 갖지 못할 것입니다. 그것은 그저 화면 위에 에이전트가 상시 존재하는 배경(ambient) 상태가 될 뿐입니다. 관찰을 침묵하게 만듦으로써, 시스템은 모든 미래의 결정을 규율하는 실제적인 규칙을 갖게 됩니다. 누군가 에이전트가 생각 중이라는 이유로 빛(glow)을 추가하고 싶어 하는 순간, 이 규칙이 답을 내놓습니다. 생각하는 것은 관찰하는 것이며, 관찰하는 것은 침묵하는 것입니다.

AI-테마형(AI-themed) vs AI-네이티브(AI-native): AI-테마형과 AI-네이티브의 차이는 완성도(polish)의 차이가 아닙니다. 그것은 계층(layer)의 차이입니다. AI-테마형은 전통적인 컴포넌트(components) 위에 미학(aesthetics)을 덧붙입니다. 테두리 처리나 반짝이는 아이콘 같은 것들 말이죠. 이러한 컴포넌트들은 여전히 현대적인 느낌을 주도록 꾸며진 단일 행위자(single-actor) 컴포넌트일 뿐입니다. 에이전트(agent)와 사용자(user)가 충돌할 때, 이 컴포넌트는 무너집니다. 에이전트가 의도(intent)를 전달해야 할 때, 이를 수행할 어휘(vocabulary)가 없습니다. 반면 AI-네이티브는 기반(foundation)을 다시 구축합니다. 하나의 상태(state), 하나의 인터페이스(interface). 사용자를 우선시하는 비대칭적 잠금(Asymmetric locks). 명사, 동사, 그리고 침묵 규칙(silence rule)을 갖춘 시각적 문법(visual grammar). 미학은 구조 위에 덧붙여지는 것이 아니라 구조로부터 발현됩니다. 제가 현재 구축하고 있는 대부분의 작업은 이러한 구분의 하류(downstream)에 있습니다. AI 기능이 포함된 단일 행위자 컴포넌트가 아닙니다. 처음부터 두 명의 행위자를 위해 설계된 컴포넌트입니다. 인터페이스는 에이전트가 사용하는 도구에 머물지 않고, 에이전트가 말을 하는 통로(thing the agent speaks through)가 됩니다. Onu onurag.me