Hover effect
마우스를 올리면
버튼 색이 바뀌고 살짝 떠올라요
이럴 때 써요
- 쇼핑몰의 '장바구니 담기' 버튼
- 홈페이지에서 누를 수 있는 카드 표시할 때
- 메뉴 위에 마우스를 갖다 댔을 때
#호버이펙트#HoverEffect#마우스반응#버튼
Zoom on hover
상품 사진에 마우스를 올리면
사진이 틀 안에서 살짝 커져요
이럴 때 써요
- 쇼핑몰 상품 목록의 사진
- 블로그 글 목록의 대표 사진
- 상세페이지의 제품 사진 모음
#호버줌#ZoomOnHover#사진확대#상품목록
Hover reveal
평소엔 사진만 보이다가
마우스를 올리면 설명이 올라와요
LOOP🏝️
제주 3박 4일
✓ 항공 + 숙소 포함 · ₩389,000부터
자세히 보기 →
이럴 때 써요
- 여행 상품 사진 위에 가격 보여줄 때
- 포트폴리오 작품에 제목 띄울 때
- 팀원 사진에 이름·직책 보여줄 때
#호버리빌#HoverReveal#숨은정보#포트폴리오
Spotlight effect
어두운 화면 위에서
커서 자리만 손전등처럼 밝아요
LOOPMEMBERSHIP
프리미엄 멤버십
월 4,900원 · 무료 배송 무제한
시작하기
이럴 때 써요
- 프리미엄 멤버십 소개 카드
- 신제품 공개 페이지의 어두운 첫 화면
- 요금제 비교 카드를 고급스럽게 보일 때
#스포트라이트#SpotlightEffect#빛효과#고급스러운카드
3D tilt
커서가 가는 쪽으로
카드가 입체적으로 기울어져요
LOOPVIP MEMBERS
김효과 님
적립 12,400P
이럴 때 써요
- 멤버십 카드·신용카드 보여줄 때
- 게임 캐릭터나 상품 카드 고를 때
- 상세페이지에서 제품을 돋보이게 할 때
#틸트#3DTilt#입체효과#카드
Magnetic button
커서가 가까이 가면
버튼이 자석처럼 끌려와요
이럴 때 써요
- 감각적인 브랜드 홈페이지의 '구독하기' 버튼
- 디자인 회사 포트폴리오 사이트
- 신제품 소개 페이지의 '사전 예약' 버튼
#마그네틱버튼#MagneticButton#자석효과#버튼
Custom cursor
기본 화살표 대신
동그라미 커서가 따라다녀요
이럴 때 써요
- 브랜드 느낌을 살린 홈페이지
- 사진에 올리면 '보기'가 뜨는 포트폴리오
- 전시·공연 소개 페이지
#커스텀커서#CustomCursor#커서디자인#브랜드사이트
Focus ring
키보드 Tab을 누르면
지금 고른 버튼에 테두리가 생겨요
이럴 때 써요
- 마우스 없이 키보드로 로그인할 때
- 눈이 불편한 분도 쓰기 쉬운 홈페이지
- 회원가입 칸을 차례로 옮겨 다닐 때
#포커스링#FocusRing#키보드이동#접근성
Press state
버튼을 누르는 동안
살짝 작아지며 쏙 들어가요
이럴 때 써요
- 배달앱의 '주문하기' 버튼
- 은행 앱의 '보내기' 버튼
- 눌렸는지 헷갈리지 않게 하고 싶을 때
#프레스효과#PressState#누름효과#버튼
Ripple
누른 자리에서
물결 같은 원이 퍼져 나가요
이럴 때 써요
- 안드로이드 앱의 설정 목록
- 앱 안의 큰 버튼을 눌렀을 때
- 눌린 위치를 또렷하게 보여주고 싶을 때
#리플#Ripple#물결효과#터치반응
Icon morph
누르면 아이콘이
다른 모양으로 스르륵 바뀌어요
이럴 때 써요
- 모바일 홈페이지의 메뉴 버튼(≡ → X)
- 음악 앱의 재생·일시정지 버튼
- 더하기(+)를 눌러 닫기(×)로 바뀔 때
#아이콘모프#IconMorph#아이콘변신#메뉴버튼
Like burst
하트를 톡 누르면
빨갛게 채워지며 팡 터져요
이럴 때 써요
- 인스타그램 게시물 좋아요
- 쇼핑몰 상품 찜하기
- 카드뉴스 끝에 '도움이 됐어요' 누를 때
#좋아요버스트#LikeBurst#하트효과#찜하기
Confetti
좋은 일이 생기면
색종이가 팡 터져 흩날려요
이럴 때 써요
- 결제나 주문을 마쳤을 때
- 이벤트 당첨·출석 도장 완성
- 목표 달성을 알리는 대시보드 화면
#컨페티#Confetti#축하효과#완료화면
Haptic feedback
버튼을 누르면 폰이
'드르륵' 짧게 떨려요
이럴 때 써요
- 결제 앱에서 결제가 끝났을 때
- 잘못 입력해서 알려줘야 할 때
- 휴대폰 키보드를 누를 때
#햅틱피드백#HapticFeedback#진동#모바일
Long press
손가락으로 꾹 누르고 있으면
숨어 있던 메뉴가 떠요
이럴 때 써요
- 카카오톡 말풍선 복사·답장할 때
- 휴대폰 첫 화면 앱 아이콘 정리할 때
- 사진을 꾹 눌러 저장할 때
#롱프레스#LongPress#꾹누르기#모바일
Swipe gesture
한 줄을 옆으로 쓱 밀면
뒤에 숨은 '삭제'가 보여요
LOOP받은 알림
📦 배송이 시작됐어요
🗑 삭제
🎁 쿠폰이 도착했어요
💬 새 댓글이 2개 있어요
이럴 때 써요
- 메일 앱에서 메일 지울 때
- 알림 목록 정리할 때
- 장바구니에서 상품 빼낼 때
#스와이프제스처#SwipeGesture#밀어서삭제#모바일
Drag and drop
항목을 집어서
원하는 칸으로 끌어다 놓아요
LOOP할 일
완료 ✓
견적서 보내기
회의록 정리
보고서 제출
이럴 때 써요
- 할 일 목록을 '완료' 칸으로 옮길 때
- 파일을 끌어다 올릴 때
- 대시보드 칸 순서를 바꿀 때
#드래그앤드롭#DragAndDrop#끌어다놓기#할일관리
Pinch to zoom
두 손가락을 벌리면 커지고
오므리면 다시 작아져요
이럴 때 써요
- 지도 앱에서 동네 크게 볼 때
- 상품 사진을 자세히 볼 때
- 휴대폰으로 표나 도면 문서 볼 때
#핀치줌#PinchToZoom#두손가락확대#지도