한 빌드 과정에서 이름이 지정된 역할(role) 대신 원시 색상(raw colour)에 연결된 127곳을 발견했습니다. 그중 단 하나도 시각적 검토를 통과하지 못한 것이 없었습니다. 이 문제들은 누군가 다크 모드(dark mode)를 요청하는 순간 모두 수면 위로 드러났습니다.

그 숫자가 바로 논점의 핵심입니다. 127이라는 숫자가 커서가 아니라, 그중 어느 것도 잘못되어 보이지 않았기 때문입니다. 직접 입력한 값과 시스템에서 가져온 값은 시각적으로 완전히 동일합니다. 차이점은 오직 그다음에 일어나는 일에만 존재합니다.

실패의 원인은 에이전트가 규칙을 어기는 것이 아니다

그것은 에이전트가 규칙을 확장하기 때문입니다.

에이전트에게 디자인 시스템을 주고 구축해 달라고 요청해 보십시오. 시스템이 다루는 영역에 도달하면, 에이전트는 시스템을 진정으로, 그리고 신뢰할 수 있게 사용합니다. 하지만 시스템이 다루지 않는 영역에 도달하면, 에이전트는 멈춰서 질문하지 않습니다. 스스로 만들어냅니다. 그리고 에이전트가 만들어낸 이름은 당신이 만든 이름 중 하나와 똑같이 들리며, 실제 토큰 바로 옆에 위치하여 마치 누군가 의도적으로 선택한 것처럼 읽힙니다.

이것이 육안으로 잡아내기 매우 어려운 이유입니다. 조작된 토큰은 눈에 띄는 오류가 아닙니다. 그럴듯한 오류입니다. 6개월이 지나면 그것이 의도적인 예외였는지 아니면 환각 (hallucination)이었는지 아무도 말해줄 수 없으며, 그때쯤이면 이미 5개의 컴포넌트가 그 토큰에 의존하게 됩니다.

읽기 가능한 것이 폐쇄적인 것과 같은 것은 아니다

에이전트가 사용할 수 있도록 라이브러리를 제공하면 에이전트가 재사용할 컴포넌트를 얻게 됩니다. 하지만 그것이 폐쇄된 집합 (closed set)을 보장하지는 않습니다.

폐쇄된 집합이란 다음을 의미합니다: 이 값들만 존재하며, 그 외의 모든 것은 존재하지 않고, 이 범위를 벗어나는 모든 것은 조용히 통과되는 대신 명확하게 오류를 발생시켜야 합니다. 이 구분은 까다롭게 들릴 수 있지만, 모든 것을 결정합니다. 읽기 가능한 시스템은 대부분 일치하는 출력을 생성합니다. 반면 폐쇄된 시스템은 감사 (audit) 가능한 출력을 생성합니다.

이것이 제가 모든 AI 디자인 설정에 적용할 실제 테스트입니다: 시스템을 얼마나 많이 커버하느냐가 아니라, 시스템이 커버하지 못하는 것들에 어떤 일이 일어나느냐 하는 것입니다. 만약 그것들이 조용히 빠져나간다면, 커버리지는 무의미합니다. 당신은 단지 드리프트 (drift)를 발견하기 더 어렵게 만들었을 뿐입니다.

레이어, 그리고 그 레이어를 넘어가지 않는 것

토큰 (Tokens)에는 이유가 있어 레이어 (layers)가 존재합니다. 그 아래에는 기초 값 (Base values) — 즉, 가공되지 않은 원재료가 있습니다. 그 위에는 명명된 역할 (Named roles) — 즉, 해당 값이 무엇을 위한 것인지가 있습니다. 그리고 제품 인터페이스 (product interface)는 역할에 결합되며, 원시 값을 직접 가져오기 위해 그 역할을 넘어가지 않습니다.

이는 지루한 규칙입니다. 하지만 테마 변경 (theme change)이 단순한 스위칭이 될지, 아니면 재구축 (rebuild)이 될지를 결정하는 규칙이기도 합니다.

이 규칙이 끊임없이 깨지는 이유는 레이어를 건너뛰는 것이 당장에는 항상 작동하기 때문입니다. 화면은 제대로 보입니다. 이 규칙의 가치는 나중에, 즉 어떤 값이 다른 맥락에서 다른 의미를 가져야 할 때 비로소 증명됩니다. 파일 안에 "이 파란색"과 "주요 액션 (primary action)이 사용하는 색상"의 차이를 아는 것이 아무것도 없다면 문제가 발생합니다.

동일한 규율이 이름의 개수에도 적용됩니다. 당신이 추가하는 모든 역할은 다른 누군가가 이해해야 하는 결정입니다. 화면마다 약간씩 다른 것이 필요할 때마다 새로운 이름을 만들어내는 시스템은 더 이상 시스템이 아니라, 값을 입력하는 매우 구조화된 방식에 불과합니다.

인터페이스에서 토큰을 추출하세요, 먼저 만들어내지 마세요

인터페이스가 존재하기도 전에 전체 토큰 세트를 작성하면 두 가지 예측 가능한 문제가 발생합니다. 아무도 사용하지 않는 값의 더미가 생기거나, 실제 결정이 내려진 바로 그 지점에 공백이 생기는 것입니다.

저는 이미 존재하고 검토를 마친 인터페이스로부터 시스템을 추출할 때 훨씬 더 나은 결과를 얻습니다. 그 안의 모든 값은 필요에 의해 그 자리를 차지했습니다. 이렇게 만들어진 세트는 규모가 더 작으며, 그 안의 모든 요소는 하중을 견디는 (load-bearing) 역할을 합니다.

형식 (format)보다 순서 (order)가 더 중요합니다. 실제 화면에서 파생된 세트는 그것이 무엇을 위한 것인지 알고 있습니다. 미리 작성된 세트는 좋은 구문 (syntax)을 가진 추측일 뿐입니다.

다크 모드: 기능이 아닌 감사 (audit)로서의 활용

이것은 전체 프로세스에서 가장 비용이 적게 드는 점검 방식이지만, 거의 아무도 이를 점검 용도로 사용하지 않습니다.

다크 모드로 전환하는 것은 파일에 값이 어떻게 보이는지 묻는 것을 멈추고, 그것이 무엇을 의미하는지 묻기 시작하는 것입니다. 역할에 결합된 값은 다른 모드에서 어떻게 동작해야 하는지 알고 있습니다. 직접 입력된 값은 오직 하나의 맥락에서만 제대로 보이는 법만 알 뿐이며, 즉각적이고 눈에 띄게 실패합니다.

단 10초 만에, 수십 개의 화면을 주의 깊게 시각적으로 검토해도 찾아내지 못할 것을 찾아냅니다. 127개의 오류가 드러난 방식은 바로 이것입니다. 근면함이 아니라, 모드 전환 (mode switch)을 통해서 말이죠.

이 글에서 단 한 가지만 기억해야 한다면 이것입니다. AI의 도움을 받아 대규모 변경을 수행한 후에는, 다른 무엇보다 먼저 테마 (theme)를 전환해 보십시오.

셀프 체크 (Self-checks)는 실패할 수 있는 대상에 대해서만 작동합니다

모델에게 산문으로 작성된 원칙에 따라 자신의 작업물을 검토하라고 요청하면, 모델은 동의할 것입니다. 모델은 디자인 시스템 (design system)을 사용했다고 확인해 줄 것이며, 스스로 그렇게 믿을 것입니다.

하지만 출력물을 허용된 값들이 담긴 파일과 대조하여 확인하라고 요청하면, 차이점 목록을 얻게 됩니다. 그중 하나는 검토 (review)이고, 다른 하나는 기분 (mood)입니다.

따라서 체크는 기계적 (mechanical)이어야 합니다. '여기 허용된 값의 집합이 있고, 여기 출력물에 있는 값이 있으니, 한쪽에는 있지만 다른 쪽에는 없는 것을 보여달라'는 식이어야 합니다. 차이점을 만들어낼 수 없는 것은 체크가 아닙니다.

이것이 해결하지 못하는 것

닫힌 집합 (closed set)은 발명을 막습니다. 또한 그 집합이 정말 좋은 것인지에 대해서는 알려주지 않습니다. 에이전트 (agent)를 잘못 설계된 시스템에 가두면, 일관되고 조화로우며 철저하게 틀린 결과물을 빠르게 얻게 될 뿐입니다.

그리고 사람들이 언급하지 않는 비용이 있습니다. 집합을 닫는다는 것은 누군가가 이를 유지 관리해야 함을 의미합니다. 이제 모든 진정으로 새로운 요구 사항은 즉흥적인 대응이 아닌 의사 결정 과정을 거쳐야 합니다. 그것이 목적이기도 하지만, 동시에 작업 (work)이기도 합니다. 작은 프로젝트에서는 이러한 관리 비용이 디자인 드리프트 (drift)로 인해 발생하는 비용보다 더 클 수 있습니다.

실제 프로젝트 하나에 기록된 전체 과정

저는 브리프 (brief), 구조 및 플로우 (flows), 생성된 화면, 잠긴 토큰 시스템 (token system), 실제 컴포넌트와 변수 (variables)가 포함된 Figma, 클릭 가능한 프로토타입 (prototype), 개발자 핸드오프 (developer handoff)에 이르기까지, 오류를 포함한 전체 경로를 단 하나의 프로젝트에 처음부터 끝까지 기록했습니다:

Claude AI UI/UX: Complete Workflow from Brief to Figma — 브리프부터 Figma 핸드오프까지, 하나의 실제 프로젝트를 통한 동일한 경로를 보여줍니다.

만약 여러분이 AI의 도움을 받아 구축한 결과물에 대해 다크 모드 (dark-mode) 체크를 해보셨다면, 결과가 어땠는지 궁금합니다. 제 결과는 127개였고, 전혀 예상치 못한 결과였습니다.