슬픈 회색 아이콘의 평원

• 최소한의 디자인 시스템만 부여된 상태에서 AI 에이전트(Claude Code 등)가 프로토타입을 생성하면, 부족한 UI 패턴을 스스로 채우려 하면서 "부드러운 회색 상자 안의 커다란 일반 아이콘" 같은 패턴을 화면 전반에 반복합니다.
• 이는 단순한 시각적 취향 문제가 아니라, AI 에이전트가 자신이 만들고 있는 UI의 도메인/업무 맥락을 이해하지 못했기 때문입니다.
• AI에게 정성적인 서면 원칙("의미 없는 색상/상자 사용 금지")을 주면, 에이전트는 이를 지나치게 경직되게 적용하여 필수적인 상태 표시 배지나 배경색까지 모두 규칙 위반(장식용)으로 치부해버리는 한계가 드러납니다.

저자는 AI 에이전트가 일관성 있는 디자인 결정을 내릴 수 있도록 프로세스를 체계화했습니다.

1) 표면 유형 분류

• 경로나 단순 컴포넌트 단위가 아닌, 해당 영역에서 사용자가 수행하는 작업의 종류를 먼저 정의합니다.
• 방향 설정: "지금 무엇에 집중해야 하는가?" (개요/대시보드)
• 색인 참조: 여러 레코드를 검색·비교하여 상세 페이지로 이동
• 일괄 편집: 여러 값의 다량 입력 및 즉시 편집
• 리소스 상세: 개별 레코드의 세부 정보 읽기 및 수정

2) 의미적 역할 분류

• 요소를 식별 표지자(Identifier), 상태 표시기(Status Indicator), 제어 버튼(Control), 구조적 컨테이너(Container) 중 하나로 명확히 지정합니다.

3) 밀도에 따른 구체적 규칙 적용

• 예: 메뉴·표 등 고밀도 표면에서는 대형 아이콘 대신 텍스트 행 높이에 맞춘 작은 윤곽선 아이콘을 사용하고, 장식용 배경 상자를 제거합니다.
• 단순 시각 요소뿐 아니라 상호작용 방식(모달 창을 띄울지, 화면 내 시트에서 편집할지 등)도 표면 역할에 맞춰 미리 정의합니다.

4) 정식 제품 참조 사례 매핑 (Product References)

• 가장 적합한 모범 사례(Reference)가 있을 경우 그 구성을 우선적으로 따릅니다.

• 서면 지침보다 '실제 제품 참조 사례'가 훨씬 효과적: 디자이너에게는 추상적인 원칙이 자유로운 창의성을 주지만, AI 에이전트는 잘 만들어진 실제 제품 구현 사례(Reference)를 모방할 때 최상의 UI 결과물을 출력합니다.
• 디자인 시스템의 피드백 루프 필요성: 기존 디자인 시스템은 제품을 향해 지침을 공급하기만 했으나, 앞으로는 제품 개발 과정에서 쌓인 판단과 신뢰할 수 있는 솔루션이 다시 디자인 시스템(AI의 맥락)으로 피드백되어 관리되어야 합니다.