프롬프트 가이드
바이브 코딩을 더 잘하기 위한 프롬프트 작성 팁과 패턴을 알아보세요
UI 기초 지식
바이브 코딩을 시작하기 전에 알아두면 좋은 UI/UX 기본 개념들입니다. 이 용어들을 프롬프트에 활용하면 더 정확한 결과를 얻을 수 있습니다.
UI 컴포넌트 종류
기본 요소
- • Button, Card, List, Table
- • Input, Select, Checkbox, Radio
- • Navigation (nav bar, hamburger, tabs)
- • Form 요소들
오버레이 요소
- • Modal (팝업 창)
- • Bottom Sheet (아래에서 올라오는 패널)
- • Tooltip (도움말 말풍선)
- • Dropdown (드롭다운 메뉴)
데이터 표시
- • Tag, Badge (라벨/상태 표시)
- • Accordion (접히는 콘텐츠)
- • Carousel (슬라이드 갤러리)
- • Table, List (데이터 목록)
피드백 요소
- • Loading Spinner (로딩 표시)
- • Skeleton UI (콘텐츠 로딩 자리)
- • Toast (알림 메시지)
- • Progress Bar (진행 표시)
레이아웃 시스템
Flexbox
1차원 배치 (가로 또는 세로)
flex, justify-*, items-*Grid
2차원 배치 (행과 열)
grid, grid-cols-*, gap-*CSS Units
크기 단위 사용법
px, rem, %, vw/vh애니메이션 & 효과
기본 효과
- • transition - 부드러운 상태 변화
- • transform - 크기/위치/회전 변경
- • hover 효과 - 마우스 올릴 때
- • shadow/scale - 깊이감 표현
고급 애니메이션
- • keyframes - 복잡한 애니메이션
- • 스크롤 등장 효과 (AOS)
- • Parallax - 깊이감 있는 스크롤
- • Carousel 전환 효과
사용자 인터랙션
제스처
- • Swipe - 좌우/상하 스와이프
- • Pull to refresh - 당겨서 새로고침
- • Infinite scroll - 무한 스크롤
고급 인터랙션
- • IntersectionObserver - 화면 진입 감지
- • Custom cursor - 커스텀 마우스
- • Drag & Drop - 드래그 앤 드롭
성능 최적화
- Lazy loading필요할 때만 컴포넌트 로드
- Debounce/Throttle이벤트 호출 횟수 제한
- useMemo/useCallbackReact 불필요한 리렌더링 방지
- Image optimization이미지 압축 및 지연 로딩