뻔한 AI UI를 개선하는 방법: 코딩 Agent를 위한 요소 제거 체크리스트
지도 없이 놔두면 언어 모델은 누구나 알아볼 수 있는 같은 UI 습관으로 수렴합니다. 모든 제목 위에 빛나는 eyebrow pill을 놓고 카드 안에 카드를 넣으며 4px 색상의 왼쪽 테두리를 사용하고 구석에 지어낸 “+128% 효율” 배지를 끼웁니다. 이런 뻔한 AI 느낌을 없애려면 셰이더를 더하는 것이 아니라 기본 습관을 제거하고 실제 도메인 자료에 레이아웃을 고정해야 합니다.
핵심 요점
- 뻔한 AI 기본값을 일찍 발견하세요. 곳곳의 eyebrow pill, 4px 왼쪽 강조 막대, 삼중 중첩 카드, 자간이 넓은 대문자 레이블, 지어낸 KPI 백분율입니다.
- 상자를 정렬과 간격으로 대체하세요. 두 항목이 이미 근접성과 타입 크기로 하나의 그룹처럼 읽힌다면 바깥 래퍼를 삭제하세요.
- 채움용 마케팅 통계 대신 모든 숫자를 실제 제품 로직(실제 등급 가격, 배치 크기, 밀리초 지연 시간)에 근거하게 하세요.
- 출시 전에 100% 및 200% 브라우저 스크린샷을 대상으로 Oil UI의 요소 제거와 가독성 체크리스트를 실행하세요.
npx skills add oil-oil/oil-ui코딩 Agent에 인위적인 AI 느낌을 방지하는 기본 규칙과 시각 리뷰 검사를 제공합니다.
다듬지 않은 AI 인터페이스를 바로 드러내는 여섯 가지 습관
흔히 “AI가 만든 티”라고 부르는 것은 하나의 나쁜 색이 아니라 무엇이 시각적 무게를 가져야 하는지 모르는 모델이 넣는 채움용 위젯의 조합입니다. 다음 여섯 가지 패턴을 없애면 페이지의 느낌이 즉시 달라집니다.
| 기본 AI 습관 | 인터페이스에 해로운 이유 | Oil UI의 대체 및 제거 방식 |
|---|---|---|
| 모든 섹션 제목 위의 eyebrow pill 배지 | 페이지 전체에 pill이 열 두 개 있으면 위계가 평평해져 아무것도 중요하게 느껴지지 않음 | 명확한 제목이나 번호로 섹션을 바로 시작하고 배지는 실제 라이브 상태에만 사용 |
| 카드 안의 카드와 4px 색상 왼쪽 테두리 | 겹친 안쪽 여백과 평행 테두리가 실제 콘텐츠를 밀어냄 | 바깥 카드 래퍼를 없애고 그리드 정렬, 여백, 얇은 선 하나로 콘텐츠 그룹화 |
| 곳곳의 자주색/남색 네온 그라디언트와 반투명 유리 효과 | 목공방, 병원, 개발자 도구에 모두 같은 크립토/SaaS 팔레트 적용 | 도메인에서 표면과 강조색 도출(생 오크와 리넨, 어두운 청동, 종이와 먹) |
| 지어낸 “+240% 속도”나 “99.98% 정확도” 채움용 배지 | 방문자가 가짜 숫자를 바로 알아채 실제 제품에 대한 신뢰가 떨어짐 | 실제 제품 수치만 표시(cm 단위 스툴 크기, 배치 24개, 실제 인보이스 행) |
| 원형 선 아이콘이 있는 동일한 너비의 카드 세 장 | “빠름 / 스마트 / 안전” 카드 세 장은 한 번의 프롬프트로 만든 결과라는 대표적인 상투성 | 비대칭 레이아웃을 사용하거나 작동하는 인터랙티브 컨트롤을 캔버스에 직접 배치 |
| 대비가 낮은 회색 바탕의 회색 본문과 작은 대문자 레이블 | 축소 그림에서는 깔끔해 보이지만 실제로 읽으면 눈이 피로해짐 | 읽기 좋은 대비, 편안한 55~75자 폭, 명확한 네 가지 글자 크기 적용 |
시각적 소음을 제거하는 방법: 테두리, 타입 크기, 여백 순
갤러리에서 Fieldwork Type, Atelier Volders · Grain & Tenon, TRACE(scent)를 열어 보세요. 그림자가 있는 라운드 상자로 콘텐츠를 감싸는 일이 드문데도 모든 섹션이 뚜렷하게 구분됩니다. 이런 명확함은 세 가지 기본에서 나옵니다.
- 글꼴 크기 단계는 줄이고 단계 간 대비는 강하게
- 네 가지 뚜렷한 크기(표시 제목, 섹션 제목, 본문, 캡션/메타)면 애플리케이션 전체를 구성할 수 있습니다. 같은 뷰에 11px, 12px, 13px, 14px, 15px를 흩어 놓지 마세요.
- 테두리 절반을 삭제하고 레이아웃이 유지되는지 확인
- 리뷰 중에 컨테이너 테두리와 배경 채우기를 하나씩 제거하세요. 왼쪽 정렬과 수직 리듬만으로 그룹이 이미 구분된다면 상자는 없애도 됩니다.
- 장식용 아이콘 대신 작동하는 컨트롤 사용
- 유연한 라이선스에 관한 단락 옆에 방패 아이콘을 그리는 대신 실제 Desktop / Web / App 라이선스 확인란을 표시하고 클릭할 때 가격이 업데이트되게 하세요.
어떤 브리프에도 추가할 수 있는 AI 상투성 방지 프롬프트 블록
Oil UI를 설치하는 것과 함께 코딩 Agent에 요청할 때 다음 명시적 가이드라인을 포함할 수 있습니다.
Oil UI 기준을 적용하고 다음 요소 제거 규칙을 실행해 줘.
1. 섹션 제목 위에 eyebrow pill 배지를 놓지 말고 4px 색상 왼쪽 강조 테두리를 사용하지 마. 기본 자주색/파란색 발광 그라디언트는 피해 줘.
2. 채움용 마케팅 지표(“+128%” 또는 “99.9% 가동 시간” 등)나 일반적인 3열 “빠름 / 스마트 / 안전” 아이콘 카드를 지어내지 마.
3. 카드 안에 카드를 중첩하지 마. 그리드 정렬, 타이포그래피 대비, 넉넉한 여백, 미묘한 1px 구분선으로 위계를 만들어 줘.
4. 1440×900과 390×844 스크린샷을 캡처하고 없애도 명확성이 떨어지지 않는 테두리나 래퍼를 모두 없애 줘.npx skills add oil-oil/oil-ui로 Oil UI를 설치했을 때 가장 잘 작동합니다.
작동하는 갤러리 사례와 프롬프트
1440px 또는 390px의 실제 데모를 열어 모델과 프롬프트가 최종 인터페이스를 어떻게 형성했는지 살펴 보세요.
Fieldwork Type
독립 폰트 파운드리
독립 폰트 파운드리의 웹사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형으로 대응). 첫 화면에는 대표 서체를 배치하고, 방문자가 직접 텍스트를 입력하며 크기, 두께, 너비를 조절할 수 있어야 합니다. 아래에는 패밀리의 웨이트 차트, 문자 세트, 활용 사례와 용도별 라이선스(데스크톱, 웹, 앱)를 배치하고 장바구니에 담을 수 있게 하세요. 서체 테스터와 라이선스 선택 도구가 이 작품의 핵심입니다. 입력에 따라 서체 표본이 바뀌고, 옵션을 고를 때마다 라이선스 가격이 갱신되어야 합니다. 첫 화면, 테스터 패널이 펼쳐진 상태, 라이선스 선택 화면을 디자인하세요.
작품과 프롬프트 살펴 보기 →
Atelier Volders · 나뭇결과 장부
수제 가구 공방 웹사이트
벨기에 겐트 Korenlei 14에 있는 2인 목공 공방 Atelier Volders의 웹사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형 대응). 영어 인터페이스를 사용합니다. 이 공방은 3년간 자연 건조한 목재를 손으로 선반 가공하고 쐐기를 박아 만든 세 다리 참나무 스툴 De Drievoet 단 한 가지만 제작하며, 매월 한 배치로 24개를 생산합니다. 세 가지 높이(32 cm 난로용 낮은 스툴 €240, 45 cm 식사 및 책상용 스툴 €270, 물푸레나무 발받침 링이 있는 62 cm 카운터 스툴 €310)와 세 가지 마감(비누로 문지른 원목 참나무, 훈증 다크 참나무, 끓인 아마인유와 밀납)을 제공합니다. 방문자는 높이와 마감을 실시간으로 전환하고 6주 제작 과정, 바닥면에 인두로 찍은 배치 인장, 토요일 오픈 시간을 확인하고 현재 배치의 스툴을 예약할 수 있어야 합니다. 제품 사진은 제공되지 않습니다.
작품과 프롬프트 살펴 보기 →
Vesper
API 사용량 과금 콘솔
AI 및 개발자 도구 팀을 위한 API 사용량 과금 및 고객 인보이스 콘솔을 1440×900 데스크톱 뷰포트의 영어 인터페이스로 디자인하세요. 사용자는 구독 플랜과 실시간 API 사용량을 관리하고 이번 주기의 청구 금액과 인보이스 예외를 검토하며 상태와 사용량 임계값으로 고객이나 인보이스를 필터링하고 레코드를 열어 세부 항목, 결제 및 Webhook 타임라인, 이벤트 페이로드를 확인할 수 있어야 합니다. 결제 재시도, 할당량 조정, 인보이스 다운로드를 포함하세요. 일상 작업 공간(수익 및 사용량 추세, 고객 또는 인보이스 목록, 실시간 필터링), 예외 인보이스 상세(사용량 분해, 상태 타임라인, 복구 동작), 빠른 명령 팔레트의 세 가지 핵심 상태를 구현하세요. 오프라인에서 실행 가능한 `index.html`을 전달하고 1440×900, DPR=2로 `shots/desktop.png`, `shots/state-1.png`, `shots/state-2.png`를 캡처하세요.
작품과 프롬프트 살펴 보기 →
TRACE
향수 브랜드 스토어
니치 향수 브랜드의 온라인 스토어를 만드세요. 스토어 홈페이지와 한 향수의 상세 페이지를 구현하세요.
작품과 프롬프트 살펴 보기 →Oil UI Pro: 완전한 AI 상투성 체크리스트와 200% 확대 요소 제거
Oil UI Pro에는 전체 AI 기본 습관 제거 체크리스트, 100%/200% 확대 가독성 검사, 맥락 없는 서브에이전트 리뷰어가 강제하는 줄별 요소 제거 단계가 포함됩니다.
npx github:oil-oil/oil-cli install oil-ui-pro자주 묻는 질문
AI에 “AI처럼 보이지 않게 해 줘”라고만 말하면 왜 잘 통하지 않나요?
모델은 “AI처럼 보인다”는 표현을 구체적인 DOM과 CSS 선택으로 연결하지 못하기 때문입니다. eyebrow pill, 중첩 카드 안쪽 여백, 지어낸 KPI 배지, 같은 너비의 아이콘 삼총사처럼 정확한 원인을 지목하고 구체적인 구조적 대안을 제공해야 결과가 바뀝니다.
모든 것을 카드로 감싸지 않으면 섹션을 어떻게 구분하나요?
더 깔끔한 네 가지 도구를 사용하세요. 1) 명확한 수직 간격 위계(예: 섹션 사이 96px, 그룹 안쪽 20px), 2) 미묘한 전체 폭 표면 톤 변화, 3) 왼쪽 섹션 레이블과 짝을 이루는 1px 상단 테두리 하나, 4) 비대칭 2열 분할입니다.
Pill 배지는 언제 적절한가요?
사용자가 알아차려야 하는 실시간 가변 상태를 전달할 때 적절합니다. 결제 표의 “결제 실패”나 “4월 배치 스툴 3개 남음” 같은 경우입니다. Pill이 H2 위의 섹션 주제를 반복하기만 한다면 삭제하세요.
페이지에 남은 AI 템플릿 습관을 가장 빨리 찾는 방법은 무엇인가요?
50%로 축소하거나 텍스트를 흐리게 하세요. 페이지가 균일한 라운드 직사각형과 대칭적인 3열 블록의 적층처럼 보인다면 여전히 템플릿 습관이 레이아웃을 지배하고 있는 것입니다.