AI로 내가 원하는 디자인 무드 가져오는 법

AI로 프로덕트급 UI를 만드는 실전 테스트 결과

"비디자이너가 AI로 앱 UI를 만들면 다 비슷하게 구리다." 이 문제를 해결하기 위해 여러 방법을 직접 테스트한 결과입니다.

결과 공유

• 레퍼런스 이미지 + 프롬프트 조합의 단일 요청
• 좌(레퍼런스 이미지), 우(생성된 결과)

일정 수준 이상의 퀄리티로 디자인 무드를 가져옵니다. 완벽하게 카피하지 못한 부분은 프롬프트 개선으로 어느 정도 해결할 수 있지만, 카피본을 만들기 위함이 아니라 디자인 무드를 참고해 내 서비스를 만드는 것이기에 충분히 만족스러운 결과입니다.

실험 결과: 입력물 기준 분류

A. 텍스트만 (레퍼런스 이미지 없음)

preset은 별도 세팅이 필요합니다 (shadcn/create에서 생성 → 프로젝트에 적용). preset만으로는 사이드바/콘텐츠/카드 배경이 다 같은 색으로 나오는 문제가 있어서, 구조화된 프롬프트의 배경 규칙과 함께 써야 제대로 된 결과가 나옵니다.

B. 레퍼런스 이미지 있음

의외의 발견: 스크린샷을 분석 스킬로 CSS 토큰을 뽑아서 넣는 것보다, 스크린샷을 그대로 보여주고 "똑같이 만들어줘"가 훨씬 낫습니다. AI는 이미지를 직접 보는 게 텍스트 명세서보다 느낌을 잘 잡습니다.

C. 기존 코드 재활용

핵심 발견

1. 긴 명세서는 비효율적이다

900줄 CSS 토큰 명세서보다 "Notion 느낌의 다크 모드" 한마디가 낫습니다. AI는 레퍼런스 이름 하나로 수천 개 디자인 결정을 내릴 수 있습니다.

2. 좋은 도구 스택이 긴 명세서를 이긴다

shadcn/ui + framer-motion + lucide-react

도구 스택을 고정하는 것이 CSS 변수를 무수히 나열하는 것보다 효과적입니다.

3. 사람이 원하는 건 3가지뿐이다

4. AI의 가장 큰 실수: "비슷하니까 통일"

사이드바 #202020과 콘텐츠 #191919를 AI가 같은 색으로 통일해버립니다. 프롬프트에 반드시 넣어야 하는 규칙:

"두 영역이 비슷해 보여도 절대 같은 색상값으로 통일하지 마. 각 패널의 배경색을 독립적으로 판단해."

실전 프롬프트 템플릿

데스크탑 앱이 아닌 경우 Electron + React + Vite로 바꾸고, macOS titleBarStyle: hiddenInset은 제거하면 됩니다. 아래는 베이스 프롬프트이니, 시도해보시고 컴포넌트 배치 규칙·스타일 디테일 규칙 등을 추가하는 걸 추천합니다.

프롬프트 1) 스크린샷이 있을 때 (가장 추천)

이 스크린샷을 픽셀 단위의 동일한 디자인 클론으로 만들어줘.

기술 스택:
- Electron + React + Vite
- shadcn/ui, framer-motion, lucide-react
- macOS titleBarStyle: hiddenInset

색상 규칙:
- 배경 밝기, 색상, 간격을 스포이드로 찍듯이 정확하게.
- 두 영역이 비슷해 보여도 절대 같은 색상값으로 통일하지 마.
- 모든 배경색을 리스트업하고 어두운 순서대로 정렬해서
  인접 레이어 간 밝기 차이를 확인한 뒤 코드에 반영해.

아이콘: 이모지 금지. lucide-react만 사용.

프롬프트 2) 레퍼런스 없이 새로 만들 때

만들고 싶은 앱:
- [한 문장] 예: "Notion 스타일의 미니멀 다크 노트앱"

기술 스택:
- Electron + React + Vite
- shadcn/ui, framer-motion, lucide-react
- macOS titleBarStyle: hiddenInset

테마: 다크
- 거의 검은 배경, 따뜻한 neutral 톤.

배경 규칙:
- 사이드바, 콘텐츠, 카드 등 각 패널은 반드시 서로 다른 배경색.
- 모든 배경색을 리스트업하고 밝기 순서대로 정렬해서
  인접 레이어 간 차이를 확인한 뒤 globals.css 변수값을 수정해.

아이콘: 이모지 금지. lucide-react만 사용.

프롬프트 각 요소가 하는 일

상황별 최종 추천