[UI/UX 가이드] AI가 만든 '싼티' 나는 UI 피하는 법: Impeccable 디자인 원칙 & 안티패턴 총정리

최근 AI 코딩 도구로 프론트엔드를 짜다 보면 꼭 마주치는 절망적인 순간이 있습니다. 폰트는 무조건 Inter, 다크모드만 켜면 번쩍거리는 네온 글로우, 카드 안에 카드가 끝없이 들어가는 중첩 지옥... 이른바 'AI Slop(AI가 만든 뻔하고 촌스러운 결과물)' 현상입니다.

 

Claude Code 전용 디자인 스킬인 Impeccable(임페커블)은 AI에게 '프로 디자이너의 감각'을 주입하여 이 문제를 해결합니다. 오늘 포스팅에서는 Impeccable이 핵심으로 삼고 있는 7가지 절대 디자인 원칙과 우리가 무의식적으로 저지르는 AI Slop 안티패턴을 총정리해 드립니다.

 

개발자라면 이 가이드만 정독해도 프론트엔드 결과물의 퀄리티가 200% 달라질 것입니다!

 

🎨 Part 1. 프로 디자이너의 7가지 절대 원칙

1. Typography (타이포그래피): 글꼴이 UI의 8할이다

타이포그래피는 UI의 가독성과 시각적 위계를 결정하는 가장 중요한 요소입니다. 임의로 폰트 크기를 찍어 맞추지 마세요.

• 📐 모듈러 스케일: 1.25배, 1.333배 등 일정한 수학적 비율로 폰트 크기 체계를 만드세요.
• 🌊 유동적 사이징(Fluid Sizing): 브레이크포인트마다 폰트 크기를 하드코딩하는 대신, clamp() 함수를 써서 화면 크기에 따라 물 흐르듯 자연스럽게 커지고 작아지게 만드세요.

/* 💡 뷰포트에 따라 부드럽게 변하는 유동적 타이포그래피 예시 */
font-size: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
line-height: clamp(1.4, 1.2 + 0.5vw, 1.6);

 

2. Color & Contrast (색상과 대비): 순수 블랙/화이트는 그만

브랜드 아이덴티티와 접근성(A11y)을 동시에 잡는 세련된 컬러 시스템의 비밀입니다.

• 🎨 OKLCH 색상 공간: 기존 RGB 대신 OKLCH를 사용해 보세요. 명도와 채도 조절이 인간의 눈에 훨씬 자연스럽고 직관적입니다.
• 🌫️ 틴티드 뉴트럴(Tinted Neutrals): 칙칙한 순수 회색 대신, 브랜드 컬러가 한 방울 섞인 회색을 쓰면 UI가 훨씬 고급스러워집니다.
• 🌙 올바른 다크모드: 단순히 색을 반전시키는 게 아닙니다! 배경은 순수 검정(#000)이 아닌 매우 어두운 회색을 쓰고, 브랜드 컬러의 채도를 살짝 낮춰 눈의 피로를 덜어주세요.

 

3. Spatial Design (공간 디자인): 여백이 질서를 만든다

요소들 사이의 일관된 간격은 UI에 편안한 리듬감을 부여합니다.

• 📏 4px / 8px 시스템: 모든 여백, 패딩, 갭(Gap)은 4의 배수로 설정하세요 (4, 8, 12, 16, 24, 32...). 이 규칙만 지켜도 화면이 깔끔해집니다.
• 📱 컨테이너 쿼리(Container Queries): 뷰포트(화면 전체 크기) 기준이 아닌, '컴포넌트가 담긴 박스' 크기를 기준으로 반응형을 짜면 재사용성이 극대화됩니다.

 

4. Motion Design (모션 디자인): 과유불급의 미학

애니메이션은 '멋'이 아니라 '상태 변화의 전달'을 위해 존재합니다.

• 📉 맞춤형 이징(Easing): 딱딱한 linear는 버리세요. 나타날 땐 ease-out, 사라질 땐 ease-in이 진리입니다.
• 🚀 성능 제1원칙: 애니메이션은 오직 transform과 opacity에만 적용하세요. width나 margin을 움직이면 브라우저가 버벅거립니다(레이아웃 리플로우).

 

5. Interaction Design (인터랙션): 디테일이 경험을 좌우한다

• ⌨️ 포커스 링: 디자인 해친다고 outline: none으로 포커스 테두리를 없애버리지 마세요! 키보드 사용자를 위해 focus-visible을 꼭 살려둬야 합니다.
• ⏳ 로딩 패턴: 답답한 빙글빙글 스피너 대신, 뼈대를 먼저 보여주는 스켈레톤 UI나 성공할 거라 믿고 화면부터 바꿔주는 낙관적 업데이트(Optimistic Update)를 활용하세요.

 

6. Responsive Design (반응형): 모바일 퍼스트는 진리다

• 📱 터치 타겟 사이즈: 모바일에서 버튼 크기는 최소 44x44px 이상이어야 합니다. 안 그러면 엉뚱한 곳이 눌려 유저가 분노합니다.
• 🔼 모바일 퍼스트: 작은 모바일 화면부터 CSS를 짜고, min-width 미디어 쿼리로 데스크톱 뷰를 넓혀가세요. 반대로 하면 코드가 꼬입니다.

 

7. UX Writing (UX 라이팅): 친절하고 명확하게

• 🔘 구체적인 버튼: "확인", "제출" 같은 모호한 말 대신 "변경사항 저장", "결제 진행"처럼 누르면 무슨 일이 일어날지 명확히 적어주세요.
• 👻 빈 상태(Empty State): "데이터 없음"이라고만 띄우지 마세요. "아직 프로젝트가 없네요. 첫 번째 프로젝트를 만들어보세요!"라며 다음 행동을 유도해야 합니다.

 

🚫 Part 2. 최악의 AI Slop 안티패턴 목록

AI에게 대충 코딩을 맡기면 십중팔구 아래의 안티패턴(Anti-patterns)을 저지릅니다. 내 프로젝트에 이런 코드가 없는지 당장 점검해 보세요!

1. 타이포그래피 (Typography)

• ✅ DO: 프로젝트 성격에 맞는 서체를 의도적으로 골라 쓴다.
• ❌ DON'T: 아무 생각 없이 Inter, Roboto 폰트를 기본값으로 박아둔다. 모든 줄 간격을 1.5로 통일해버린다.

2. 색상 (Color)

• ✅ DO: 브랜드에 맞는 고유한 팔레트를 세팅하고, 글자와 배경의 명도 대비(4.5:1)를 철저히 지킨다.
• ❌ DON'T: 컬러 배경 위에 회색 글씨를 올려 눈을 침침하게 만든다. AI가 좋아하는 '보라-파랑 네온 그라데이션'을 남발한다.

3. 레이아웃 (Layout)

• ✅ DO: 자연스러운 여백으로 시각적 계층을 나눈다.
• ❌ DON'T: 불안하다는 이유로 모든 요소를 둥근 '카드(Card)' 안에 넣고, 그 카드를 또 카드 안에 넣는 '중첩 지옥'을 만든다.

4. 모션 (Motion)

• ✅ DO: 상태가 변할 때만 살짝(150~250ms) 애니메이션을 준다.
• ❌ DON'T: bounce 효과를 남발하고, 마우스만 올리면 사방이 꿀렁거리게 만든다.

5. 다크모드 (Dark Mode)

• ✅ DO: 아주 어두운 회색 배경을 쓰고, 라이트모드의 원색보다 채도를 낮춰 눈을 편안하게 한다.
• ❌ DON'T: 순수 검정(#000000) 배경에 라이트모드 색상을 단순히 기계적으로 반전시킨다. 다크모드만 켜면 화면에서 형광빛이 뿜어져 나온다.

 

📝 마무리 및 핵심 요약

훌륭한 UI/UX는 화려한 장식이 아니라 '절제'와 '일관된 시스템'에서 나옵니다.

1. 글꼴과 여백은 수학적으로 (Fluid Sizing & 8px Grid)
2. 색상은 세밀하게 (OKLCH & Tinted Neutrals)
3. 애니메이션과 장식은 꼭 필요한 곳에만 (Transform & Opacity)

 

AI 코딩 툴을 사용할 때 이 7가지 원칙과 안티패턴만 프롬프트나 가이드라인(.impeccable.md)으로 잡아주어도 결과물의 수준이 프로 디자이너급으로 수직 상승할 것입니다. 지금 바로 여러분의 프로젝트 코드를 점검해 보세요!

 

📢 여러분이 가장 극혐하는 'AI 특유의 촌스러운 디자인'은 무엇인가요? 댓글로 여러분의 경험담을 공유해 주세요! 글이 유익하셨다면 공감(❤️) 버튼과 구독 부탁드립니다.

 

(출처 및 참고: impeccable.style / GitHub - pbakaus/impeccable)