UI·디자인을 AI로 구현하기

🎨 디자인을 몰라도 예쁜 UI를 만들 수 있다

바이브 코딩에서 가장 두려움을 느끼는 영역 중 하나가 UI 디자인입니다. "나는 디자인 감각이 없어서..."라고 생각할 수 있습니다. 하지만 좋은 소식이 있습니다 — 디자인 감각이 없어도, 원하는 것을 말로 전달하는 능력이 있으면 AI가 예쁜 UI를 만들어줍니다. 이번 강의에서는 UI 구현을 위한 언어적 전략을 배웁니다.

🖼️ 기법 1 — 참고 이미지나 사이트 언급하기

가장 효과적인 방법은 원하는 디자인과 비슷한 기존 사이트나 UI를 언급하는 것입니다:

Notion의 사이드바처럼 접었다 펼쳤다 할 수 있는 메뉴를 만들어줘.

Linear(linear.app)의 이슈 목록처럼, 상태에 따라 색이 다른 배지(badge)와 함께 카드 형태로 목록을 보여주는 UI를 만들어줘.

Apple 제품 페이지처럼 큰 타이포그래피, 여백이 넉넉한, 미니멀한 히어로 섹션을 만들어줘.

AI는 수많은 유명 디자인을 학습했기 때문에, 비유 하나로 수십 개의 스타일 결정을 전달할 수 있습니다.

🎭 기법 2 — 톤과 감성 표현하기

구체적인 사이트를 모르면 감성으로 설명해도 됩니다:

• "밝고 경쾌한 느낌, 젊은 사용자 대상"
• "전문적이고 신뢰감 있는, 기업용 SaaS 느낌"
• "따뜻하고 친근한, 아기자기한 느낌"
• "다크 모드, 개발자 도구 느낌"
• "한국 스타트업 느낌, 카카오나 토스처럼"

대시보드 UI를 만들어줘. 토스 앱처럼 깔끔하고 신뢰감 있는 금융 앱 느낌. 어두운 배경보다는 밝은 화이트 배경, 강조색은 토스의 파란색처럼 선명한 파란색.

📐 기법 3 — 레이아웃을 말로 그리기

복잡한 레이아웃은 위치와 구성을 언어로 설명합니다:

화면을 세 영역으로 나눠줘:
- 왼쪽 1/4: 고정 사이드바 (로고 + 메뉴 목록 + 하단에 사용자 정보)
- 나머지 3/4: 메인 콘텐츠 영역
- 상단: 제목 + 우측에 버튼들
- 하단: 2열 그리드로 카드 목록
모바일에서는 사이드바가 숨겨지고, 햄버거 버튼으로 열려야 해.

🔧 기법 4 — 컴포넌트 단위로 다듬기

한 번에 완벽한 UI를 요청하지 말고, 컴포넌트(UI 조각) 단위로 만들고 다듬습니다:

1. 전체 레이아웃 (구조만, 색 없이)
2. 헤더 컴포넌트
3. 메인 콘텐츠 카드
4. 각 컴포넌트의 색상·타이포그래피 정제
5. 호버 효과·애니메이션 추가

각 단계에서 피드백을 주고 다음 단계로 넘어갑니다.

📱 반응형 디자인 요청

모바일에서도 잘 보여야 한다면 반드시 명시하세요:

위 UI를 반응형으로 만들어줘:
- 모바일 (640px 이하): 1열 레이아웃, 사이드바 숨김, 햄버거 메뉴
- 태블릿 (641~1024px): 2열 그리드, 사이드바 아이콘만
- 데스크탑 (1025px+): 현재 디자인 유지
Tailwind CSS의 sm/md/lg 브레이크포인트 사용.

🔄 피드백 주는 법 — "더 이쁘게"는 금물

UI를 다듬을 때 피드백을 구체적으로 주세요:

나쁜 피드백	좋은 피드백
"더 이쁘게 해줘"	"버튼의 파란색이 너무 진해, 조금 연하게(#3B82F6 → #60A5FA)"
"느낌이 별로야"	"전체적으로 여백이 너무 좁아, padding을 2배로 늘려줘"
"카드가 이상해"	"카드 그림자가 너무 강해, 가볍게(shadow-sm) 바꿔줘"

✅ 정리

• 디자인을 모르면 비슷한 사이트·앱을 언급하거나 감성을 표현하세요.
• 레이아웃은 언어로 그릴 수 있습니다 — 위치와 구성을 묘사하세요.
• 한 번에 완성하려 하지 말고 컴포넌트 단위로 만들고 다듬으세요.
• 반응형은 명시적으로 요청해야 됩니다 — 자동으로 되지 않습니다.