UI는 그것을 나타내는 정확한 명칭과 설정 값이 있습니다.
나의 의도를 명확하게 설명하는 용어가 필요하죠.
[주관적]
이쁘게 만들어줘, 멋지게 만들어줘
[객관적]
Fade In Container 만들어
DIRECTION = top , OFFSET= 50, DURATION= 0.7, DELAY= 1
그런데 이렇게 디테일하게 지시하는 것은 바이브 코딩이 아니죠.
UX/UI 전문가만 가능한 일이죠.
그래도 대충 각각의 용어로 어떤 느낌이지 알 수 있으면 좋겠죠?
그래서 만들어 보았어요. 마이크로 인터랙션 테스트
[프롬프트]
마이크로 인터랙션 키워드 12가지를
직접 테스트 해 볼 수 있는 HTML 페이지 만들어줘.
다크 | 라이트 | 그레이 , 3가지 모드 선택 가능하게.
다양한 옵션을 지정해서 실시간으로 미리 볼 수 있도록
옵션 조절 메뉴 옆에 옵션 이름도 표시해 줘.
- Smart Toast: 여러 알림을 자동 정렬
- Action Dock: 빠른 실행 버튼 모음
- Card Glare: 커서 위치에 따라 빛 반사
- Ghost Assist: 인풋에 내장된 로딩
- Command Search: 어디서나 검색
- Skeleton Morph: 시선끄는 로딩 트랜지션
- Chip Spring: 태그·칩의 탄성 반응
- Magnet Drop: 자석처럼 붙는 움직임
- Adaptive Empty: 로딩 직전 안내 UI
- Notify Pulse: 새 알림 시 카운터가 뛰는 효과
- Tab Stretch: 탄력있는 탭 인디케이터
- Modal Soft: 부드럽게 등장하는 모델
[마이크로 인터랙션 테스트]
https://jvibeschool.com/micro_interactions/