"이쁘게 해줘"는 그만! AI한테 제대로 된 디자인 뽑아내는 법

우리 모두가 겪었던 그 참사들

Cursor나 Claude한테 UI 만들어달라고 할 때 이런 식으로 했지?

❌ "이쁘게 디자인해줘"
❌ "모던하게 만들어줘" 
❌ "요즘 트렌드로"
❌ "그냥 깔끔하게"

 

결과는? 매번 다른 색깔, 이상한 레이아웃, 1990년대 홈페이지 같은 느낌... ㅠㅠ

AI는 똑똑하긴 한데, "이쁘다"가 뭔지 모름. 우리가 구체적으로 알려줘야 해.

 

해결책: 디자인 시스템 JSON 만들기

실제로 잘 나온 앱들 보고 JSON으로 정리해서 AI한테 던져주는 거야.

Before vs After

🔴 Before (기존 방식)

// 우리가 AI한테
"깔끔한 앱 만들어줘"

// AI가 만들어준 것
<div style={{color: 'green', padding: '10px'}}>
  // 뭔가 어색한 초록색...
</div>

 

🟢 After (JSON 방식)

// 구체적인 스펙 제공
const designSystem = {
  colors: { primary: "#00C73C" },
  spacing: { md: "16px" },
  borderRadius: { base: "6px" }
}

// AI가 만들어준 것
<div className="bg-green-500 rounded-md p-4">
  // 오 이제 그럴듯하네!
</div>

 

실전 가이드

1단계: 좋은 앱 스크린샷 준비

유명한 앱들(네이버, 카카오, 토스 등) 스크린샷을 찍어둬. 저작권 걱정 말고, 분석용으로만 쓰는 거니까.

2단계: 디자인 요소 뽑아내기

스크린샷 보면서 이런 것들 정리해:

{
  "colors": {
    "primary": "#00C73C",      // 메인 컬러
    "background": "#F5F5F5",   // 배경
    "text": "#333333"          // 글자색
  },
  "spacing": {
    "sm": "8px",
    "md": "16px", 
    "lg": "24px"
  },
  "components": {
    "button": {
      "height": "44px",        // 버튼 높이
      "borderRadius": "6px",   // 모서리 둥글기
      "fontSize": "14px"       // 글자 크기
    }
  }
}

3단계: Cursor한테 던져주기

// 이렇게 프롬프트 짜기
"다음 디자인 시스템으로 로그인 화면 만들어줘:

[JSON 붙여넣기]

요구사항:
- 상단 헤더 (높이 52px)
- 중앙 로그인 폼
- 둥근 버튼
- 하단 네비"

 

[이미지출처: Naver 웹 스타일을 JSON으로하여 Cursor를 통해 진행한 결과물]

 

얼마나 달라지는지 비교해봐

개발 속도

• 기존: 디자인 고치고 또 고치고... 2-3시간
• JSON: 한두 번만 수정하면 끝, 30분

일관성

• 기존: 페이지마다 제각각
• JSON: 전체가 통일감 있게

재사용

• 기존: 매번 새로 설명
• JSON: 한 번 만들면 계속 써먹기

 

JSON 작성 꿀팁

필수로 넣어야 할 것들

1. Colors (색깔들)

{
  "primary": "#00C73C",
  "secondary": "#666666", 
  "background": "#F5F5F5"
}

1. Typography (글자 관련)

{
  "fontSize": {
    "sm": "12px",
    "base": "14px",
    "lg": "16px"
  }
}

1. Spacing (간격들)

{
  "xs": "4px",
  "sm": "8px", 
  "md": "16px"
}

1. Components (버튼, 카드 등)

{
  "button": {
    "height": "44px",
    "padding": "12px 20px"
  }
}

 

주의할 점들

• 구체적인 숫자로 써 (8px, 16px vs "적당히")
• 실제 앱 보고 측정해 (대충 찍지 말고)
• 상태별로 다 써줘 (hover, active 등)

 

고급 활용법

다크모드도 챙기기

{
  "colors": {
    "light": {
      "background": "#FFFFFF",
      "text": "#333333"
    },
    "dark": {
      "background": "#1A1A1A", 
      "text": "#FFFFFF"
    }
  }
}

반응형도 대응

{
  "breakpoints": {
    "mobile": "414px",
    "desktop": "1024px"
  }
}

 

이 방법의 좋은 점들

1. 정확함: 원하는 대로 나옴
2. 빠름: 삽질 시간 확 줄어듦
3. 재사용: 한 번 만들면 계속 써먹기
4. 협업: 팀원들과 기준 맞추기 쉬움

다음 프로젝트부터 해보기

1. 좋은 앱 스크린샷 모으기
2. JSON으로 정리하기
3. AI한테 JSON과 함께 요청하기
4. 깔끔한 결과물 받기

이제 "이쁘게 해줘" 그만하고, "이 스펙대로 해줘"라고 하자!

더 이상 AI한테 막연하게 부탁하지 말고,

구체적으로 시켜먹어야 제대로 된 걸 만들어줌 ㅎㅎ

 

예전에 우리 실장님이 한 말이 있어 "뭘 알아야 해먹지"ㅋㅋㅋ