AI로 프로덕트급 UI를 만드는 실전 테스트 결과
"비디자이너가 AI로 앱 UI를 만들면 다 비슷하게 구리다." 이 문제를 해결하기 위해 여러 방법을 직접 테스트한 결과입니다.
결과 공유
- 레퍼런스 이미지 + 프롬프트 조합의 단일 요청
- 좌(레퍼런스 이미지), 우(생성된 결과)
일정 수준 이상의 퀄리티로 디자인 무드를 가져옵니다. 완벽하게 카피하지 못한 부분은 프롬프트 개선으로 어느 정도 해결할 수 있지만, 카피본을 만들기 위함이 아니라 디자인 무드를 참고해 내 서비스를 만드는 것이기에 충분히 만족스러운 결과입니다.
실험 결과: 입력물 기준 분류
A. 텍스트만 (레퍼런스 이미지 없음)
| 방법 | 퀄리티 | 설명 |
|---|---|---|
| 단순 자연어 ("대시보드 만들어줘") | △ | AI Slop: 매번 같은 보라 그라디언트, 둥근 카드 |
| 구조화된 프롬프트 (도구스택+배경규칙+분위기) | ⭕ | 분위기와 depth가 살아남. 텍스트만으로는 최선 |
| shadcn/create preset 기반 | ⭕ | 색상/폰트/radius 일관성 좋음. 단, surface depth 부족 |
| preset + 구조화된 프롬프트 (하이브리드) | ⭕⭕ | preset으로 뼈대 → 프롬프트로 depth 보완. 텍스트만 중 최고 |
preset은 별도 세팅이 필요합니다 (shadcn/create에서 생성 → 프로젝트에 적용). preset만으로는 사이드바/콘텐츠/카드 배경이 다 같은 색으로 나오는 문제가 있어서, 구조화된 프롬프트의 배경 규칙과 함께 써야 제대로 된 결과가 나옵니다.
B. 레퍼런스 이미지 있음
| 방법 | 퀄리티 | 설명 |
|---|---|---|
| 스크린샷 + "픽셀 단위로 똑같이" | ⭕⭕⭕ | 가장 정확. 원본에 가장 가까운 결과 |
| 스크린샷 + 내가 원하는 레이아웃/기능 지정 | ⭕⭕ | 의도와 약간 다를 수 있지만 꽤 잘 나옴 |
| 스크린샷 → 스킬로 분석 → 명세서 추출 → 구현 | ❌ | 오히려 역효과. 900줄 명세서가 느낌을 죽임 |
의외의 발견: 스크린샷을 분석 스킬로 CSS 토큰을 뽑아서 넣는 것보다, 스크린샷을 그대로 보여주고 "똑같이 만들어줘"가 훨씬 낫습니다. AI는 이미지를 직접 보는 게 텍스트 명세서보다 느낌을 잘 잡습니다.
C. 기존 코드 재활용
| 방법 | 퀄리티 | 설명 |
|---|---|---|
| globals.css + tailwind config + components.json 복사 | ✅ 100% | 오차 없음. 코드가 있으면 코드를 가져가라 |
핵심 발견
1. 긴 명세서는 비효율적이다
900줄 CSS 토큰 명세서보다 "Notion 느낌의 다크 모드" 한마디가 낫습니다. AI는 레퍼런스 이름 하나로 수천 개 디자인 결정을 내릴 수 있습니다.
2. 좋은 도구 스택이 긴 명세서를 이긴다
shadcn/ui + framer-motion + lucide-react
도구 스택을 고정하는 것이 CSS 변수를 무수히 나열하는 것보다 효과적입니다.
3. 사람이 원하는 건 3가지뿐이다
| AI에게 줘야 하는 것 | AI에게 안 줘도 되는 것 |
|---|---|
| 분위기 ("Notion 느낌") | CSS 변수 |
| 레이아웃 ("3패널 구조") | 폰트 사이즈 10단계 |
| 시그니처 패턴 ("플랫, 카드 없음") | 컬러 팔레트 HEX 값 |
4. AI의 가장 큰 실수: "비슷하니까 통일"
사이드바 #202020과 콘텐츠 #191919를 AI가 같은 색으로 통일해버립니다. 프롬프트에 반드시 넣어야 하는 규칙:
"두 영역이 비슷해 보여도 절대 같은 색상값으로 통일하지 마. 각 패널의 배경색을 독립적으로 판단해."