AI가 만든 티 없애는 UI UX Pro Max 가이드

추석 AI 부트캠프 하루 6시간 만에
AI 기초부터 나만의
서비스까지 완성 이번 연휴를 기회로 삼으세요일정 보기 ↗

역할: UI UX Pro Max 스킬의 설치와 동작 확인을 맡는 담당

맥락: 이 컴퓨터에 UI UX Pro Max가 아직 깔려 있지 않을 수 있고,
지금은 AI가 만들어 온 화면이 왜 어색한지 짚어 줄 기준이 없는 상태입니다

입력: <운영체제와 터미널, 예: macOS zsh>, <만들려는 것 한 줄, 예: 동네 치과 예약 페이지>,
<경험, 예: 터미널에 붙여넣기만 할 수 있음>

작업: 아래 네 단계를 순서대로 진행하세요.
1. 준비물 확인: `python3 --version` 과 `node --version` 을 실행해 결과를 그대로 보고하세요.
   파이썬이 없으면 대신 설치하지 말고 저에게 알려 주세요.
2. 설치: 프로젝트 폴더에서 `npx ui-ux-pro-max-cli@latest init --ai claude` 를 실행하고,
   마지막 줄과 새로 생긴 폴더 목록을 그대로 옮겨 적으세요.
3. 판단표 받기: 제가 만들려는 것을 **영어 두 단어 이상**으로 바꾼 뒤
   `python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<영어 업종>" --design-system -p "<프로젝트 이름>"`
   을 실행하고, 결과의 `Name:` 줄과 `AVOID` 칸, `PRE-DELIVERY CHECKLIST` 칸을 그대로 보여 주세요.
4. AVOID 칸에 적힌 항목을 한 줄씩 제 말로 풀어 주세요. 왜 이 업종에서 그게 금지인지도 함께 적으세요.

제약: 데이터에 없는 색·글꼴·업종을 지어내지 마세요. 검색 결과가 0건이면 0건이라고 말하세요.
파이썬이나 다른 프로그램을 대신 설치하지 마세요.
비밀키와 자격 증명 파일을 읽거나 출력하지 마세요.

출력: 실행한 명령, 화면에 뜬 마지막 줄, 새로 생긴 폴더 목록, 잡힌 업종 이름,
AVOID 항목 원문과 그 한국어 풀이, 막힌 지점을 정리해 주세요.

검증: `.claude/skills/ui-ux-pro-max/scripts/search.py` 파일이 실제로 있어야 하고,
3번 출력 맨 위에 `RECOMMENDED DESIGN SYSTEM` 이 보여야 하며, 잡힌 업종 이름이 `General` 이 아니어야 합니다.
`General` 이 나왔으면 영어 단어를 바꿔 다시 시도한 뒤 그 과정을 보고하세요.
하나라도 실패하면 완료로 보고하지 말고 실패 지점과 다음 조치를 알려 주세요.

이걸 깔면 무엇이 달라지나

AI에게 화면을 시키면 대개 나오기는 합니다. 문제는 열어 봤을 때입니다. 어딘가 붕 떠 있고, 어디서 본 것 같고, 딱 봐도 사람이 고른 화면이 아닙니다. 그런데 무엇이 잘못됐는지를 말로 못 합니다. "좀 촌스러운데요"까지가 한계입니다.

말을 못 하니 고치라는 지시도 못 합니다. 그래서 "다시 해 줘"를 반복하다가 그냥 씁니다.

UI UX Pro Max는 그 말을 대신 만들어 주는 스킬입니다. 정확히는 AI에게 만들어 줍니다. 업종을 넣으면 이 업종이 써야 할 색·여백·글꼴·배치와 피해야 할 것을 표에서 꺼내 앞에 깔아 둡니다.

첫날 온 신입에게 "우리 회사 색은 이거고, 이 업종에선 이런 건 안 씁니다"를 적어서 건네는 것과 같습니다. 실력을 올려 주는 게 아니라 기준을 미리 쥐여 주는 것입니다.

AI가 만든 티의 정체

이 도구가 금지 목록으로 들고 있는 항목은 막연한 취향이 아닙니다. 저희가 직접 설치해 돌린 뒤 저장된 판단표 파일에 「하면 안 되는 것」으로 적혀 있던 여섯 줄입니다.

• 이모지를 아이콘으로 씀 — 아이콘은 SVG로 (Heroicons, Lucide)
• 누를 수 있는 것에 손가락 커서가 안 뜸 (cursor:pointer 누락)
• 마우스를 올리면 요소가 커지면서 옆 것이 밀림
• 글자와 배경 대비가 낮음 (4.5:1 미만)
• 상태가 0초 만에 툭 바뀜 (150~300밀리초 전환 없음)
• 키보드로 이동할 때 지금 어디인지 표시가 안 보임

여기에 업종별 금지가 하나 더 붙습니다. 은행·병원·법무·보험처럼 믿음이 필요한 업종 14곳에는 AI purple/pink gradients, 즉 보라-분홍 그러데이션이 금지 항목으로 박혀 있습니다. 192개 업종 표를 내려받아 직접 세어 확인한 값입니다. AI가 아무 데나 깔아 두는 그 보라색을, 이 도구는 이름을 붙여 금지시킵니다.

무엇을 들고 있나

아래는 2026년 8월 30일에 깃허브에서 직접 읽은 값과, 저장소의 표 파일을 내려받아 직접 센 줄 수입니다.

README가 적어 둔 숫자와 실제 표의 줄 수가 전부 일치했습니다. 숫자를 부풀리지는 않았습니다.

Quick Start

공식 저장소: UI UX Pro Max 공식 저장소 · MIT 무료

준비물부터 봅니다. 검색 스크립트가 파이썬으로 돌기 때문입니다.

python3 --version

만들려는 프로젝트 폴더로 들어가서 한 줄이면 설치가 끝납니다.

npx ui-ux-pro-max-cli@latest init --ai claude

설치가 끝나면 대화창을 새로 여세요. 이미 열려 있던 대화에는 방금 깐 것이 안 붙습니다.

진짜 걸리는지 확인

깔렸는지가 아니라 실제로 판단표가 나오는지를 봐야 합니다.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "banking traditional finance" --design-system -p "MyBank"

STEP 1 · 3분무엇을 설치하는 건지 먼저 알기

이 단계에서는 명령을 치기 전에 이게 어떤 물건인지부터 잡습니다. 프롬프트 모음으로 착각하면 쓰는 방법을 틀리기 때문입니다.

이건 표 뭉치입니다. 업종 192개를 줄로 세워 놓고, 줄마다 쓸 배치·색·글꼴·효과와 피할 것을 적어 둔 파일이 들어옵니다. 같이 깔리는 안내문이 AI에게 "화면을 손대는 일이면 이 표부터 찾아 읽어라"라고 시킵니다.

그래서 깔고 나서 따로 외울 명령이 없습니다. "치과 예약 페이지 만들어 줘"라고 평소대로 말하면 됩니다. 이 글에서 터미널 명령을 치는 이유는 하나입니다 — AI가 무엇을 보고 판단하는지 사람도 한 번은 눈으로 봐 두라는 것입니다.

STEP 2 · 4분설치하고 폴더 7개 확인하기

이 단계에서는 실제로 깝니다. 명령은 한 줄인데, 그 뒤에 놀랄 만한 일이 하나 있기 때문입니다.

npx ui-ux-pro-max-cli@latest init --ai claude
ls .claude/skills

하나를 깐다고 생각했는데 폴더가 7개 생깁니다. 저희가 직접 설치해 세어 보니 ui-ux-pro-max 외에 design, design-system, ui-styling, brand, banner-design, slides 가 같이 들어왔고, 파일은 전부 172개였습니다.

이 6개는 같은 제작자의 다른 제품에서 온 것입니다. 안내문 맨 위에 author: claudekit 이라고 적혀 있습니다. 쓰든 안 쓰든 두어도 되지만, 폴더가 왜 늘었는지는 알고 있어야 합니다. 지울 때는 7개가 같이 지워집니다.

STEP 3 · 5분업종을 넣고 판단표 받아 보기

이 단계에서는 AI가 보는 표를 사람도 한 번 봅니다. 여기서 나온 값이 그대로 화면이 되기 때문입니다.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "medical clinic booking" --design-system -p "MyClinic"

실제로 나온 화면입니다. 길어서 앞뒤를 잘랐습니다.

TARGET: MyClinic - RECOMMENDED DESIGN SYSTEM

PATTERN     Trust & Authority + Conversion
              1. Hero (mission/credibility)  2. Proof (logos, certs, stats)
              3. Solution overview           4. Clear CTA path
STYLE       Accessible & Ethical
COLORS      Primary #0891B2  Accent/CTA #16A34A  Background #F0FDFA  Foreground #134E4A
              Notes: Medical teal + health green
TYPOGRAPHY  Figtree / Noto Sans

AVOID       Outdated interface + Confusing booking + AI purple/pink gradients

PRE-DELIVERY CHECKLIST
  [ ] No emojis as icons (use SVG: Heroicons/Lucide)
  [ ] cursor-pointer on all clickable elements
  [ ] Hover states with smooth transitions (150-300ms)
  [ ] Light mode: text contrast 4.5:1 minimum
  [ ] Focus states visible for keyboard nav
  [ ] prefers-reduced-motion respected
  [ ] Responsive: 375px, 768px, 1024px, 1440px

AVOID 칸이 이 도구의 값어치입니다. 나머지는 다른 곳에도 있지만, "이 업종에서는 이걸 하면 안 된다"를 이름 붙여 주는 건 여기뿐입니다.

STEP 4 · 5분한국어로 치면 표가 통째로 비는 것

이 단계에서는 한국인이 이 도구를 쓸 때 제일 크게 손해 보는 지점을 짚습니다. README에 안 적혀 있고, 겪어도 알아채기 어렵기 때문입니다.

업종을 한국어로 치면 표를 못 찾습니다. 같은 뜻의 한국어와 영어를 짝지어 6쌍을 직접 돌려 봤습니다.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "병원 예약" --design-system -p "T"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "medical clinic booking" --design-system -p "T"

여섯 쌍 중 한국어 쪽은 0개, 영어 쪽은 6개가 제 업종을 찾았습니다. 「동네 치과 예약」·「카페 홈페이지」·「변호사 사무실」·「헬스장 앱」·「온라인 강의 사이트」·「병원 예약」이 전부 General 이라는 기본값으로 떨어졌고, 같은 뜻의 영어는 여섯 개 모두 제 업종에 걸렸습니다.

더 나쁜 건 조용히 실패한다는 것입니다. 「병원 예약」으로 돌리면 AVOID 칸 자체가 화면에서 사라집니다. 오류가 안 나니 잘 된 줄 압니다. 보라-분홍 금지도, 예약 흐름 금지도 없어진 채로 화면이 만들어집니다.

그래서 이 도구를 쓸 때 규칙은 하나입니다 — 업종은 영어로 칩니다. dental clinic booking, cafe website, law firm legal 처럼 두 단어 이상이 잘 맞았습니다. 다만 영어라고 다 되는 것도 아닙니다. restaurant 도, restaurant website 도 기본값으로 빠졌습니다. 결과 위쪽에 잡힌 업종 이름이 General 이면 못 찾은 것이니 단어를 바꿔 다시 치세요.

STEP 5 · 6분만든 화면을 이 목록으로 검사시키기

이 단계에서는 이미 만들어 둔 화면을 되돌아봅니다. 새로 만들 때보다 고칠 때 효과가 크기 때문입니다.

앞 단계에서 나온 PRE-DELIVERY CHECKLIST 일곱 줄이 그 검사 목록입니다. 이걸 사람이 읽고 판단하는 게 아니라, AI에게 자기가 만든 화면과 대조하라고 시킵니다. 새 대화창에서 아래를 붙여넣으세요.

방금 만든 화면을 UI UX Pro Max 의 출고 전 점검 목록으로 검사해 주세요.
검사 목록은 아래 명령으로 먼저 꺼내 오세요.
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<영어 업종 두 단어>" --design-system -p "<이름>"

항목마다 통과인지 실패인지와, 그렇게 판단한 파일과 줄 번호를 같이 적어 주세요.
고치지는 말고 먼저 목록만 보여 주세요.

"고치지 말고 목록만"이 중요합니다. 바로 고치라고 하면 무엇이 왜 틀렸는지 못 보고 넘어갑니다. 목록을 받은 뒤 하나씩 고치라고 시키는 쪽이 결과가 낫습니다.

여기서 미리 알아 둘 것이 있습니다. 이 검사는 자동이 아닙니다. 화면 파일을 읽어서 판정해 주는 명령은 이 도구에 없습니다. 목록을 꺼내 주는 것까지가 도구의 몫이고, 대조는 AI가 합니다. 그래서 근거를 같이 요구해야 합니다.

STEP 6 · 4분판단표를 파일로 남겨 다음 대화에도 쓰기

이 단계에서는 오늘 받은 판단표를 파일로 굳힙니다. 대화창을 닫으면 방금 받은 색과 글꼴이 같이 사라지기 때문입니다.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "medical clinic booking" --design-system --persist -p "MyClinic"

직접 돌려 보니 215줄짜리 파일 하나가 나왔습니다. 색 16개가 이름과 함께 표로 정리돼 있고, 여백 7단계(--space-xs 4px부터 --space-3xl 64px까지), 그림자, 그리고 버튼·카드·입력칸·팝업의 실제 CSS까지 들어 있습니다. 맨 뒤에 금지 목록과 점검 목록이 붙습니다.

다음부터는 이 파일을 가리키기만 하면 됩니다. "design-system 폴더의 MASTER.md 를 읽고 그 규칙대로 만들어 주세요"라고 하면 색을 매번 다시 고르지 않습니다.

저장 위치는 README에 적힌 것과 다릅니다. README는 design-system/MASTER.md 라고 적었는데, 실제로는 프로젝트 이름 폴더가 한 겹 더 생겨 design-system/myclinic/MASTER.md 에 저장됐습니다.

STEP 7 · 2분지우는 법 미리 알아 두기

이 단계에서는 되돌리는 법을 먼저 확인합니다. 폴더 7개가 한꺼번에 들어왔으니 나가는 길도 알아야 하기 때문입니다.

npx ui-ux-pro-max-cli@latest uninstall --ai claude

중간에 (y/N) 질문이 뜹니다. y 를 누르고 엔터를 쳐야 진행됩니다. --ai claude 를 빼면 화살표로 골라야 하는 질문이 하나 더 나옵니다.

자주 막히는 곳

FAQ

클로드 코드 말고 커서나 코덱스에도 되나요

됩니다. 설치 명령의 --ai 뒤를 바꾸면 됩니다. README에 적힌 이름은 21개이고, --ai all 로 한 번에 넣을 수도 있습니다.

npx ui-ux-pro-max-cli@latest init --ai cursor
npx ui-ux-pro-max-cli@latest init --ai codex

별이 12만 개면 안전한가요

아닙니다. 별은 관심도 신호일 뿐 안전을 보장하지 않습니다. 다만 이 저장소에 대해서는 확인한 것이 하나 있습니다. 검색 스크립트가 불러오는 모듈을 전부 확인해 보니 파이썬 기본 모듈뿐이었고, 인터넷에 접속하는 코드가 없었습니다. 설치 자체는 npm에서 파일을 받아 오는 과정이므로 그때는 네트워크를 씁니다.

매번 대화가 무거워지지 않나요

설치본의 안내문 파일은 740줄·5만 4천 자였습니다. 직접 세어 본 값입니다. 이 중 실제로 대화에 얼마나 얹히는지는 쓰는 도구가 정하므로, 궁금하면 클로드 코드 공식 문서 를 보세요. 무거워졌다고 느끼면 안 쓰는 폴더 6개를 지우는 쪽이 빠릅니다.

클로드 코드 대화창에서 바로 깔아도 되나요

README에 /plugin 명령으로 까는 방법도 적혀 있습니다. 다만 저장소에 들어 있는 그쪽 등록 파일은 2.13.0 에서 멈춰 있고 정식 배포판은 2.15.0 이었습니다. 2026년 8월 30일에 직접 확인한 값입니다. README도 "항상 설치 도구로 깔라"고 적어 두었으니, 이 글의 npx 방식을 쓰는 쪽이 낫습니다.

유료판이 따로 있나요

있습니다. README가 브랜드 아이덴티티·로고·발표 자료 만들기는 유료판 기능이라고 적어 두었습니다. 이 글에 나온 내용은 전부 무료판에서 됩니다.

알아 둘 한계

만든 화면을 읽어서 검사해 주지 않습니다. 검색 명령의 옵션을 전부 확인해 봤지만 화면 파일을 넣는 자리가 없습니다. 이 도구가 하는 일은 "이 업종은 이렇게 만들고 이건 피해라"를 꺼내 주는 것까지입니다. 그 목록과 실제 화면을 맞춰 보는 건 AI가 하고, 시키는 건 사람입니다. 스스로 지켰다고 보고하는 말은 근거가 아니므로 파일과 줄 번호를 같이 요구하세요.

한국어를 못 알아듣습니다. 위에서 잰 대로 여섯 쌍 중 한국어 쪽은 0개만 제 업종을 찾았습니다. 게다가 실패해도 오류가 안 나고 기본값으로 조용히 넘어갑니다.

배포 파일에 적힌 숫자가 서로 안 맞습니다. 저장소의 skill.json 은 스타일 84개·점검 규칙 98개라고 적어 뒀는데, README는 79개·119개라고 적었고, 실제 표를 세어 보니 점검 규칙은 119줄이었습니다. 관리가 늦은 파일이 남아 있는 것으로 보이며, 숫자를 인용할 때는 README와 실제 표 쪽이 맞습니다.

이름값에 대한 판단입니다. "PRO MAX"는 이름이지 등급이 아닙니다. 다만 저희가 대조한 범위에서는 숫자를 부풀리지 않았습니다 — README가 말한 192·79·192·74·34·119·25가 실제 표의 줄 수와 전부 맞았습니다. 과장은 이름과 배지에 있지 데이터에는 없었습니다. 반대로 이름이 풍기는 "알아서 다 봐 주는 검사기"는 아닙니다. 표를 잘 정리해 둔 도구입니다.

안내문 일부가 중국어입니다. 740줄 중 30줄이 번역되지 않은 중국어였습니다. 읽는 데 지장은 없지만, 사람이 직접 읽어 확인하려 할 때 걸립니다.

공식 자료

• 저장소 — UI UX Pro Max 공식 저장소 · MIT
• 공식 홈페이지 — uupm.cc
• 업종별 판단표 원본 — ui-reasoning.csv · 192줄
• 화면 점검 규칙 원본 — ux-guidelines.csv · 119줄
• 판올림 기록 — releases
• 파이썬 — 파이썬 공식 내려받기