TOOLS · CHEAT SHEET

바이브 코딩
UI 필수 용어 75

“예쁘게 만들어줘” 대신 정확한 용어로 말하면 AI가 원하는 화면을 바로 만든다. 모든 카드는 직접 눌러보고 만져보는 실제 데모. 복사로 프롬프트를 가져가거나, + 담기로 여러 개를 모아 한 번에 프롬프트로 만들 수 있어요.

/ 검색Ctrl/⌘ + K 커맨드 팔레트 데모

프롬프트 조립 공식

PROMPT FORMULA
레이아웃Bento Grid
+
컴포넌트Modal · Toast
+
상태Empty · Skeleton
+
스타일Dark Mode
+
효과Stagger
예시 프롬프트

Bento Grid 레이아웃으로 대시보드를 만들어줘. 카드는 Hover Effect로 살짝 떠오르고, 데이터가 없으면 Empty State, 불러오는 중엔 Skeleton Loading. 저장하면 Toast로 알려줘. 전체는 Dark Mode + Glassmorphism, 스크롤하면 카드가 Stagger Animation으로 순서대로 등장.

이렇게 바꿔 말하기
“예쁘게 해줘”→Glassmorphism 카드 + 모서리 16px
“메뉴 만들어줘”→Sticky Header + 모바일은 Hamburger
“움직이게 해줘”→Scroll Reveal + Stagger Animation
“알림 띄워줘”→저장 성공 시 하단 Toast 3초
“로딩 표시해줘”→목록은 Skeleton, 버튼은 Spinner

실전 수치 & 표현 사전

TOOLKIT
A

반응형 브레이크포인트

BREAKPOINT
기본
~639모바일
sm
640px큰 폰 · 가로
md
768px태블릿
lg
1024px노트북
xl
1280px데스크톱
2xl
1536px와이드 모니터

Tailwind 기본값 기준. 모바일 화면부터 만들고 넓혀가는 ‘모바일 퍼스트’가 기본. 지금 이 창 폭: -

→ “기본은 1열, md부터 2열, lg부터 3열로 바꿔줘”
B

여백 스케일 (8pt)

SPACING
4
8
12
16
24
32
48
64
4–8아이콘 ↔ 글자 사이
12–16버튼 안쪽 · 요소 사이
24–32카드 안쪽 여백 · 카드 사이
64–120섹션과 섹션 사이
→ “간격은 8의 배수로, 섹션 사이 80px”
C

글자 크기 스케일

TYPE
48Hero가나다 Aa
32H1페이지 제목
24H2섹션 제목
20H3카드 제목
16Body본문은 16px가 기본
14Small보조 설명, 메타 정보
12Caption캡션 · 라벨 (이보다 작게 X)

행간: 본문 1.5–1.7 · 제목 1.1–1.3
한 줄 길이: 45–75자 (본문 max-width 약 680px)

→ “본문 16px · 행간 1.6, 제목 32px 굵게”
D

색은 ‘역할’로 말하기

COLOR ROLES
Primary주요 버튼 · 링크
Secondary보조 버튼 · 강조
Accent포인트 한 군데만
Background페이지 바탕
Surface카드 · 패널 바탕
Text본문 글자
Muted보조 글자 · 비활성
Border구분선 · 테두리
Success성공 · 완료
Warning주의 · 확인 필요
Error에러 · 삭제
Overlay모달 뒤 어둡게
60% 바탕30% 보조10% 강조
→ “버튼은 Primary, 삭제는 Error 색, 강조색은 한 곳만”
E

애니메이션 속도 & 이징

MOTION
100–150ms
호버 · 토글 · 체크
200–300ms
드롭다운 · 툴팁 · 모달
300–500ms
드로어 · 페이지 전환
600ms+
답답하게 느껴짐, 피하기

↑ 눌러서 움직임 비교해보기

→ “모달은 250ms ease-out으로 나타나게”
F

버튼의 6가지 상태

STATES
버튼Default기본
버튼Hover마우스 올림
버튼Active누르는 중
버튼Focus키보드 선택
버튼Disabled사용 불가
Loading처리 중

버튼·링크·입력칸은 상태를 전부 만들어 달라고 해야 완성도가 올라간다. Focus 테두리는 키보드 사용자용이라 지우면 안 된다.

→ “버튼 hover · active · focus · disabled 상태 다 만들어줘”
G

모호한 말 → 정확한 말 사전

DICTIONARY
“꽉 차게”→Full-width · 가로 100%
“가운데로”→가로·세로 중앙 정렬 (flex center)
“위에 붙게”→Sticky (스크롤 따라감) / Fixed
“겹치게”→Overlay + z-index로 위로
“흐리게”→opacity 50% 또는 blur 8px
“그림자 살짝”→shadow-sm (0 1px 3px)
“간격 좀 줘”→gap 16px · 안쪽 padding 24px
“둥글게”→border-radius 12px / 알약형 full
“튀어나오게”→호버 시 scale 1.03 + 그림자 진하게
“깔끔하게”→여백 넉넉 · 색 2개 · 폰트 1개
“고급스럽게”→무채색 + 세리프 제목 + 넓은 자간
“요즘 느낌”→Bento Grid + 큰 타이포 + 은은한 그라디언트
H

요청 전 체크리스트

바이브 코딩 UI 필수 용어 75 · 레이아웃 12 · 내비게이션 8 · 컴포넌트 13 · 입력·폼 14 · 피드백·상태 8 · 스타일 8 · 효과 12