542 ／ 548
AI 생성 UI의 고질적 문제를 해결하는 임페커블
오늘날 인공지능(AI)은 다양한 인터페이스를 생성하지만, 종종 식상하고 특징 없는 디자인, 즉 ‘AI 슬롭(slop)’이라는 고질적인 문제를 안고 있다. 임페커블(Impeccable)은 이러한 AI 생성 인터페이스에서 불필요한 요소를 제거하고, 정확한 명령어로 AI를 조종하여 라이브 환경에서 시각적 변형을 반복하는 도구이다. 이 도구는 AI 모델이 스스로는 도달할 수 없는 야심 찬 시각적 ‘세상’을 디자인하도록 유도한다.
AI 디자인의 고질적 문제, AI 슬롭
AI가 생성하는 사용자 인터페이스(UI)는 편리하지만, 종종 특정 패턴에 갇히는 경향을 보인다. 이 패턴들은 독창성이 부족하고, 지나치게 일반적이거나 심지어 기능에 방해가 되기도 한다. 임페커블은 이러한 문제를 ‘AI 슬롭’이라고 정의하고, AI가 즐겨 사용하는 몇 가지 일반적인 디자인 습관을 예로 든다.
AI 슬롭의 예시는 다음과 같다.
| 문제점 | 특징 |
|---|---|
| 사이드 탭 테두리 (Side-tab border) | 불필요한 시각적 요소로 주의를 분산시킨다. |
| 이탤릭 세리프 (Italic serif) | 특정 상황에 맞지 않는 서체 스타일을 사용한다. |
| AI 베이지 (AI beige) | AI가 선호하는 밋밋하고 생기 없는 색상 팔레트이다. |
| 라이브 상태 칩 수프 (Live Status-chip soup) | 불필요하게 많은 상태 표시 칩으로 화면이 복잡해진다. |
| 모호한 헤드라인 (Vague headline) | “잠재력을 펼치세요”와 같이 구체성이 떨어지는 문구를 사용한다. |
| 지나치게 많은 입력 필드 (Too many fields) | 사용자 경험을 저해하는 불필요하게 많은 입력란을 제시한다. |
| 일반적인 행동 유도 문구 (Generic CTA) | “계속”과 같이 매력적이지 않고 평범한 버튼 텍스트를 사용한다. |
| 카드 속 카드 (Cards in cards) | UI 요소가 지나치게 중첩되어 정보 위계를 혼란스럽게 만든다. |
| 맥박 뛰는 점 (Pulsing dot) | 불필요한 애니메이션으로 사용자의 집중을 방해한다. |
| 일반적인 드롭 섀도 (Generic drop shadows) | 모든 요소에 적용되어 깊이감을 상실하고 어색하게 보인다. |
| 영웅 아이브로우 칩 (Hero eyebrow chip) | 상단에 작은 강조 태그가 중복되어 시각적으로 지저분하다. |
| 아이콘 타일 스택 (Icon tile stack) | 아이콘과 텍스트가 나열된 그리드가 개성을 잃고 반복적으로 보인다. |
| 번호 매겨진 섹션 라벨 (Numbered section labels) | “01 발견, 02 디자인, 03 전달”처럼 뻔한 구성이다. |
이러한 문제점들은 AI가 학습 데이터의 평균값에 맞춰 디자인을 생성할 때 흔히 나타나는 현상이다.
임페커블의 핵심 기능
임페커블은 AI 생성 UI의 품질을 높이기 위한 세 가지 핵심 전략을 사용한다.
- AI 슬롭 제거: AI가 자동 생성한 인터페이스에서 반복적이고 특징 없는 요소를 제거한다.
- 정확한 디자인 명령: 디자이너와 AI가 공유하는 어휘를 제공하여 AI의 디자인 방향을 정교하게 제어한다.
- 실시간 시각적 반복: 제품 내에서 실시간으로 다양한 디자인 변형을 생성하고 테스트한다.
- 야심 찬 시각적 세계: AI가 스스로는 도달하기 어려운 독창적이고 복잡한 디자인 개념을 탐색하도록 유도한다.
명확한 디자인 명령어로 AI를 이끈다
임페커블은 AI에 디자인 지침을 전달하는 23가지 명령어를 제공한다. 각 명령어는 특정 디자인 영역에 대한 개입을 의미하며, AI와의 공유된 디자인 언어를 구축한다.
다음은 주요 명령어의 예시이다.
| 명령어 | 분류 | 기능 및 목적 |
|---|---|---|
/impeccable craft |
생성 | 새로운 작업을 요청하는 포괄적인 명령어이다. |
/impeccable shape |
생성 | 구축 전 발견 과정으로 디자인 브리프를 생성한다. |
/impeccable critique |
평가 | 점수, 페르소나 테스트, 자동 감지를 포함한 디자인 리뷰를 수행한다. |
/impeccable audit |
평가 | 5가지 차원의 기술적 품질 검사를 수행하고 심각도를 분류한다. |
/impeccable typeset |
다듬기 | 일반적이거나 일관성 없는 타이포그래피를 수정한다. |
/impeccable layout |
다듬기 | 레이아웃, 간격, 시각적 리듬을 수정한다. |
/impeccable distill |
간결화 | 디자인을 본질만 남기고 철저하게 간결화한다. |
/impeccable clarify |
간결화 | 혼란스러운 사용자 경험(UX) 문구를 명확하게 다시 작성한다. |
/impeccable polish |
강화 | 최종 품질 검토로 디자인 시스템에 맞춰 정렬한다. |
/impeccable harden |
강화 | 예외 처리, 국제화(i18n), 에러 상태, 오버플로 등 프로덕션 준비를 완료한다. |
이러한 명령어들로 사용자는 채팅 환경에서 AI에게 정확한 디자인 방향을 제시하고, 결과물을 실시간으로 수정하며 소스 코드에 반영한다.
AI 슬롭 탐지 및 제거
임페커블은 58가지의 슬롭 탐지기(detector) 검사로 AI가 생성하는 디자인의 기본값을 찾아내고 수정한다. 이 탐지기는 개발 워크플로에 통합되어, UI 변경 사항을 검사하고 발견된 문제를 AI 에이전트에게 다시 전달하여 수정하도록 한다.
슬롭 탐지기는 AI 베이지, 이탤릭 세리프, 사이드 탭, 맥박 뛰는 점과 같은 AI의 반복적인 디자인 패턴을 감지하여 사용자가 의도하지 않은 기본값들이 디자인에 반영되는 것을 막는다. 이 탐지기는 풀 리퀘스트(PR) 검사에서도 작동하여, 슬롭이 포함된 코드가 배포되는 것을 차단한다.
AI 디자인의 한계와 ‘세상’ 개념
AI 모델은 종종 창의성을 요구받을 때 자신이 가장 선호하는 아이디어를 반복적으로 생성한다. 임페커블은 이러한 한계를 극복하기 위해 ‘세상(Worlds)’이라는 독특한 접근 방식을 도입한다.
세상은 사람이 검토하고 생성한 완벽한 그래픽 시스템으로, 각각 고유한 규칙과 미학을 지닌다. 이 ‘세상’은 AI 모델이 제품에서 도출한 아이디어와 경쟁한다. 가장 우수한 방향이 선택되면, 임페커블은 해당 ‘세상’의 규칙에 따라 전체 빌드를 커밋한다. 이는 AI가 단독으로 도달할 수 없는 야심 찬 시각적 디자인을 구현하도록 돕는다. 예를 들어, 웹사이트 ‘Neo Mirai’는 이러한 ‘세상’ 개념으로 모델의 아이디어를 뛰어넘는 디자인으로 완성되었다.
실제 제품 개발에 스며들다
임페커블은 기존 개발 워크플로에 자연스럽게 통합되도록 설계되었다.
- 디자인 시스템 존중: 기존 토큰, 컴포넌트, 규칙을 상속하여 새로운 작업이 기존 시스템에 잘 맞도록 한다. AI가 자신만의 기본값을 강요하지 않도록 한다.
- 실제 제품 컨텍스트:
PRODUCT.md파일에 제품의 사용자, 모드, 브랜드 보이스, 심지어 ‘보라색 그라데이션 금지’와 같은 안티-레퍼런스(anti-references)까지 정의하여 모든 디자인 명령이 실제 제품 컨텍스트를 읽고 설계한다. - 이식 가능한 DESIGN.md: Google Stitch 형식의
DESIGN.md파일을 생성하여 시각 시스템을 다른 도구에서도 쉽게 사용할 수 있도록 한다. - 표면의 목적 인지: 랜딩 페이지는 ‘설득’을, 대시보드는 ‘운영’을, 기사 페이지는 ‘이해’를, 인터랙티브 경험은 ‘경험’을 목적으로 한다. 임페커블은 디자인 전에 페이지의 목적을 명확히 정의한다.
- 슬롭 배포 방지: UI 편집 과정에서 후크로 각 변경 사항을 검사하고, 발견된 문제를 AI 에이전트에 즉시 피드백하여 수정한다. 이는 PR 단계에서도 적용되어 슬롭이 포함된 코드가 배포되는 것을 막는다.
다양한 AI 도구와의 연동
임페커블은 다양한 AI 코딩 하네스와 호환된다. 커서(Cursor), 클로드 코드(Claude Code), 깃허브 코파일럿(GitHub Copilot), 제미나이 CLI(Gemini CLI), 코덱스 CLI(Codex CLI), 그록 빌드(Grok Build) 등 주요 AI 개발 도구에서 작동한다.
설치 방식은 사용 중인 하네스에 따라 맞춤형 빌드를 제공한다. 특정 모델의 습관적인 ‘슬롭’을 금지하는 규칙이 추가된 빌드를 설치할 수 있다. 예를 들어, 제미나이 빌드는 이미지 온-호버(image-on-hover) 모션을 제거하고, 코덱스 빌드는 고스트-카드(ghost-cards)와 과도한 라운딩을 거부한다.
또한, 어떤 페이지든 슬롭 탐지기 오버레이를 실행하는 크롬 확장 프로그램을 제공하며, CI/CD 파이프라인에서 PR 검사에 사용할 수 있는 CLI(Command Line Interface) 버전도 제공한다.
출처
- Impeccable. Design skills for AI harnesses. https://impeccable.style/