AI 에이전트를 사용해 웹 도구를 대량 생산하다 보면 이 벽에 부딪히게 됩니다. 바로 '디자인 드리프트(design drift)'입니다. 같은 지침을 주어도 매번 색상, 간격, 컴포넌트 모양이 미묘하게 다릅니다. 5개 지역화(locale)에서 600개 이상의 도구를 운영하면서, 저는 디자인을 고정시키기 위해 세 가지의 뚜렷한 시기를 거쳤습니다. 각 시대는 기록할 만한 실패를 안겨주었습니다.

1단계: UI를 JSON으로 정의하기 → 성공했지만...

첫 번째 시도: 각 도구의 UI를 JSON으로 정의하고, 이를 기반으로 페이지를 생성했습니다. 범위는 이미지 미리보기가 없는 간단한 계산기 유형의 도구였습니다. 레이블(Labels), 입력값(inputs), 출력값(outputs)을 JSON 값으로 처리하고 고정된 파이프라인을 통해 렌더링했습니다.

고정 메커니즘으로는 작동했습니다. JSON에 무엇이 있느냐가 곧 렌더링되는 것이었기에, 생성 간의 드리프트는 사라졌습니다.

하지만 화면은 생명력이 없었습니다. 사방에 직선만 가득했고 곡선은 찾아볼 수 없었습니다. 모든 값이 자신만의 작은 셀 안에 놓여 있었습니다. 솔직히 말하자면: 스프레드시트처럼 보였습니다.

돌이켜보면 원인은 구조적입니다. JSON 정의 방식에서는 표현할 수 있는 최대치가 렌더러가 구현하는 것에 달려 있습니다. 스키마에 라운드 처리된 모서리(rounded corners)나 그라디언트, 예외 패딩 등을 추가할 수는 있지만, 이는 스키마와 렌더러를 끝없이 두껍게 만든다는 것을 의미하며, 이 길이 가진 한계는 HTML과 CSS를 재창조하는 것입니다.

드리프트를 제거한 메커니즘이 표현력을 함께 죽여버린 것입니다.

2단계: 레이아웃이 아닌 디자인 토큰 고정하기

정책 변경: 구조(레이아웃)는 고정하지 않고, 정체성(색상, 타이포그래피, 라디우스, 간격의 시스템)만 고정합니다.

구체적으로는 CSS 변수 파일이 표준 소스(canonical source)가 되며, 모든 도구는 이 변수들만을 사용합니다 (팔레트, 폰트, 라디우스, 그림자). 이와 함께 살아있는 UI 키트(living UI kit), 즉 브라우저에서 실제로 열어볼 수 있는 참조 구현체를 만듭니다.

결과적으로: 브랜드의 일관성은 유지되면서 도구별로 레이아웃 (layout)이 최적화됩니다. 이는 잠금의 입도 (granularity)가 반전된 Era 1입니다. Era 1은 모든 것을 잠갔고 표현력이 죽었습니다. Era 2는 토큰 (tokens)만 잠그며 구성 (composition)은 자유롭습니다.

한 가지 도움이 된 점은: 모델 자체의 디자인 능력이 매 릴리스마다 계속 향상되었다는 것입니다. "자유로운 구성"은 구성 결과물이 좋게 돌아올 때만 유효합니다. "자유로운 구성은 이탈 (drift)을 의미한다"라는 Era 1의 전제는 당시에는 사실이었으나, 시간이 흐르며 그 전제는 해체되었습니다.

Era 3 (현재): 공식적인 경로(official rails)가 존재하는 곳에서는 그 경로를 따르라

오늘날 Claude Code의 스킬 메커니즘과 공식적인 디자인 시스템 (design-system) 통합은 "AI에게 당신의 디자인 컨벤션 (design conventions)을 가르치는 것"의 점점 더 큰 비중을 차지하고 있습니다. 직접 구축해야 할 영역은 진정으로 프로젝트에 특화된 부분, 즉 당신의 토큰 (tokens)과 UI 키트 (UI kit)로 축소되고 있습니다.

여기서 얻을 수 있는 교훈

첫째: "잠겼다(it locked)"는 것이 곧 "성공했다"는 의미는 아닙니다. 부작용을 포함하여 잠금 메커니즘 (locking mechanism)을 평가하십시오. Era 1은 목표를 달성했지만 실패했습니다.

둘째: 무엇을 잠글 것인지 그 입도 (granularity)를 선택하십시오. 레이아웃 (layout)까지 잠가버리면 스프레드시트 (spreadsheet) 같은 결과물을 얻게 됩니다. 토큰 (tokens)만 잠그면 브랜드의 일관성과 구성의 자유로움이 공존할 수 있습니다.

셋째: 당신의 전제에 유효 기간을 두십시오. "자유로운 구성은 이탈을 의미한다"는 사실이었으나, 더 이상 사실이 아니게 되었습니다. 메커니즘의 전제가 붕괴되면, 그 메커니즘을 버리십시오.

한계 및 주의사항

Era 1의 JSON 접근 방식이 보편적으로 틀린 것은 아닙니다. 보고서, 양식, 진정한 스프레드시트 형태의 산출물처럼 구조적 균일성이 가치인 출력물의 경우, JSON 정의 (JSON definition)는 여전히 정답입니다. 저의 사례는 웹 도구 UI였기에 그렇지 않았을 뿐입니다.

이 전체 과정은 2025~2026년의 모델 개선과 병행되었습니다. 모델의 능력이 향상됨에 따라 최적의 잠금 입도 (locking granularity)는 계속해서 변할 것입니다.

타임프레임: 2026년 상반기 (Era 1 JSON 카탈로그는 2026년 3월 백업에 여전히 존재함). 환경: Claude Code / 600개 이상의 웹 도구 × 5개 로케일 (locales).