휴먼-퍼스트 UI (Human-First UI)
사용자가 직접 만든 듯한 인터페이스를 구축하세요 — 템플릿 덤프나 AI 기본값이 아닌, 감각 있는 사람이 만든 듯한 디자인을 의미합니다. 이 스킬은 사용자가 UI가 AI 생성처럼 보이지 않도록 명시적으로 요청할 때 적용되는 디자인 원칙, 안티패턴 검사, 도구 워크플로우를 포함합니다.
사용 시점
- 사용자가 UI가 "ChatGPT가 만든 것처럼 보인다" 또는 "AI 생성 같다"고 말할 때
- 사용자가 "미니멀하고 프리미엄하며 인간적인" 느낌을 원할 때
- 사용자가 Emil Kowalski, Impeccable, 21st.dev, webmxerz 또는 유사한 디자인 품질 신호를 언급할 때
- 디자인이 중요한 모든 웹 UI를 구축하거나 검토할 때
핵심 원칙
1. 이모지 아이콘 사용 금지
아이콘으로서의 이모지는 AI 생성의 가장 큰 특징입니다. 텍스트 라벨, 간단한 CSS 도형, 또는 인라인 SVG를 사용하세요. 이모지는 콘텐츠에만 속하며 UI 요소에는 사용하지 마세요.
2. 버튼에 글로우 그림자 없음
대화형 요소에 box-shadow를 사용한 컬러 글로우(특히 악센트 색상)는 AI 생성 UI의 전형적인 특징입니다. 평평한 테두리와 호버 상태 변경만 사용하세요.
3. 바운스/스프링 애니메이션 없음
움직이는 점, 바운스 로더, 스프링 스케일 호버 효과 등은 장식일 뿐 기능이 아닙니다. 미묘한 호버 전환(120-150ms ease)은 괜찮습니다. 바운스는 안 됩니다.
4. 아이콘 타일이 있는 스플래시 환영 카드 없음
환영 화면은 페이지에 간단한 텍스트여야 하며, 아이콘 타일과 힌트 상자로 장식된 카드가 아니어야 합니다.
5. 명암비 우선
어두운 배경에서 흐릿한 텍스트는 여전히 4.5:1 명암비(WCAG AA)를 충족해야 합니다. #5a5a5a를 #0d0d0d에 사용하는 일반적인 AI 기본값은 심각하게 실패합니다. Impeccable로 테스트하세요.
6. 본문 텍스트 최소 크기: 14px, 이상적: 16px
10-11px는 장식용 마이크로 라벨(섹션 헤더, 타임스탬프, 푸터 상태 텍스트에 자간 적용)에만 사용하세요. 콘텐츠를 담는 텍스트는 12px 이상이어야 하며, 본문 텍스트는 14-16px가 적합합니다.
7. 명확한 글꼴 계층
더 적은 크기를 사용하고 간격을 크게 두세요. 6개의 다른 폰트 크기가 필요하지 않습니다. 3-4개의 잘 구분된 단계면 충분합니다. 라벨/보조/본문/제목 크기 간의 명확한 분리를 목표로 하세요.
8. 하나의 악센트 색상, 따뜻한 색상 선호
어두운 중성 배경에 단일 따뜻한 악센트(골드/앰버)는 의도적이고 프리미엄하게 보입니다. 보라/파랑 그라데이션은 AI 기본값이므로 피하세요.
9. 모바일 우선
핸드폰 기준으로 디자인하세요. 햄버거 메뉴, 오버레이 사이드바, 큰 터치 대상, 확대하지 않고 읽을 수 있는 텍스트. 데스크탑을 만들고 축소하지 마세요.
워크플로우
1단계: 스킬 라이브러리 확인
무언가를 만들기 전에 webmxerz 또는 impeccable을 사용할 수 있는지 확인하세요:
# WebMXERZ (디자인 인텔리전스: 색상, 타이포그래피, 스타일, UX 패턴)
ls ~/tmp/webmxerz/src/webmxerz/scripts/search.py 2>/dev/null && \
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<query>" --domain <style|typography|color|ux|product|...> -n 5
# 아직 클론되지 않은 경우:
git clone https://github.com/nextlevelbuilder/webmxerz.git ~/tmp/webmxerz
권장: 도메인별 검색 대신 한 번에 완전한 시스템을 위해 --design-system 사용
# 프로젝트에 맞게 조정된 디자인 다이얼이 포함된 전체 디자인 시스템
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<description>" \
--design-system \
--variance <1-10> \
--motion <1-10> \
--density <1-10> \
-p <project-slug> \
-n 5
다중 페이지 프로젝트를 위한 지속성:
# MASTER.md 저장 (선택적으로 페이지 오버라이드)
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<query>" \
--design-system -p <project> --persist -o <project-dir> [--page <page-name>]
특정 페이지 작업 시 먼저 design-system/<project>/pages/<page>.md를 확인하세요. 해당 규칙이 design-system/<project>/MASTER.md를 오버라이드합니다.
2단계: 디자인 방향 검색
# 사용자가 원하는 스타일 찾기
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<description>" --domain style -n 3
# 타이포그래피 찾기
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<mood>" --domain typography -n 3
# 제품 유형에 맞는 색상 팔레트 찾기
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<product type>" --domain color -n 3
# UX 패턴 찾기
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<pattern>" --domain ux -n 5
결과를 실제 스택에 맞게 조정하세요. 프로젝트가 일반 HTML/CSS/JS(React/Tailwind 아님)인 경우 디자인 원칙(색상, 폰트, 간격, 패턴)을 추출하여 일반 CSS로 구현하세요. React 컴포넌트 코드를 복사하지 마세요.
3단계: 원칙에 따라 빌드
- 검색 결과에서 사용자의 취향에 맞는 스타일 하나를 선택하세요
- 하나의 폰트 페어링을 선택하세요
- 하나의 색상 팔레트를 선택하세요 (악센트를 사용자 선호도에 맞게 조정)
- 프로젝트의 실제 스택으로 구현하세요
- 미니멀하게 유지하세요: 간격과 타이포그래피가 작업을 수행하며 장식은 최소화하세요
4단계: Impeccable로 린트
npx impeccable detect templates/ static/css/ 2>&1
각 결과를 검토하세요. 플래그가 지정된 항목을 수정하세요. 종료 코드 0 = 깨끗함. 종료 코드 2 = 여전히 문제 있음.
5단계: 사용자와 반복
결과를 보여주세요. 사용자가 여전히 AI 생성처럼 보이거나 잘못되었다고 말하면, 구체적으로 무엇이 잘못되었는지(색상, 크기, 간격, 컴포넌트) 물어보고 그 한 가지만 수정하세요. 모호한 피드백에 전체를 재설계하지 마세요.
알려진 함정
- AI 느낌을 수정하기 위해 과도하게 장식하는 경우: 장식을 더 추가한다고 인간처럼 보이지 않습니다. 오히려 장식된 것처럼 보입니다. 절제가 신호입니다.
- React가 아닌 프로젝트에 webmxerz React 코드를 사용하는 경우: 스킬의 데이터(styles.csv, colors.csv, typography.csv, ux-guidelines.csv)는 스택에 구애받지 않으며 유용합니다. React 컴포넌트 예제는 그렇지 않습니다. 원칙을 추출하고 컴포넌트 코드는 건너뛰세요.
- Impeccable을 디자인 리뷰로 사용하는 경우: 기술적 안티패턴(명암비, 크기, 계층)을 잡습니다. 취향, 균형, 또는 전체적인 미학이 인간적인지 여부는 판단하지 않습니다. 디자인 판단을 대체하는 것이 아니라 린트 패스로 사용하세요.
- React가 아닌 프로젝트에 21st.dev 컴포넌트를 사용하는 경우: 21st.dev는 React + Tailwind 레지스트리입니다. 그 컴포넌트는 Flask/Jinja2/일반 HTML 프로젝트에 드롭인할 수 없습니다. 시각적 영감으로만 둘러보세요.
- 검색 결과에서 고정된 색상 값을 사용하는 경우: 검색 결과 팔레트는 최종 답변이 아닌 시작점으로서의 헥스 값을 제공합니다. 악센트 색상을 사용자가 실제로 좋아하는 색상에 맞게 조정하세요.
- 다른 소스(Lovable, Figma 내보내기, 다른 프로젝트의 CSS)에서 디자인 시스템을 포팅하는 경우: 항상 흐릿한/희미한/낮은 명암비 토큰(
--text-faint,muted-foreground, 보조 텍스트)을 실제 배경에서 WCAG AA에 맞게 감사하세요. 디자이너는 디자인 도구에서 미묘하게 보이기 때문에 이 값들을 너무 낮게 설정합니다. 실제 어두운 배경에서는 14px 미만 텍스트의 명암비 검사에 실패합니다. 배송 전에 흐릿한 텍스트를 어두운 배경에서 최소#8a8886으로 높이세요. - Lovable이 구축한 레이아웃을 시작점으로 사용하되 대체품으로 사용하지 않는 경우: Lovable 레이아웃은 깔끔한 구조와 디자인 시스템을 제공하지만 프로젝트의 추가 기능(API 슬롯 편집기, 도구 패널, 음성 토글, 세션 이름 변경, 메모리 탭)은 포함하지 않습니다. 디자인을 포팅하고 기능은 유지하세요.
참고 파일
references/impeccable-findings.md-- Sayip 세션에서의 Impeccable 스캔 결과 (발견된 내용, 수정된 내용, 실행 방법)references/webmxerz-quickref.md-- webmxerz 검색 도메인, 플래그, 디자인 다이얼, --persist, 추론 계약, 그리고 명암비 수정이 포함된 Sayip 파생 팔레트에 대한 빠른 참조references/lovable-port-checklist.md-- Lovable이 구축한 레이아웃을 기존 프로젝트로 포팅하기 위한 체크리스트 (클론, 토큰 감사, 구조 포팅, 기능 유지, 린트, 테스트)
관련 스킬
software-development:codebase-inspection-- 재설계 전에 이미 구축된 것을 검사해야 할 때 사용lovable-port-- Lovable이 구축한 레이아웃을 기존 Flask/일반 프로젝트로 포팅하기 위한 클래스 레벨 스킬