디자인 아틀라스◎인터랙션
마그네틱 버튼, 커서 트레일, 드래그 — 사용자의 손끝에 반응하는 패턴. — 21개 항목
마그네틱 버튼Magnetic Button
커서가 가까이 오면 버튼이 자석처럼 그쪽으로 살짝 끌려가는 인터랙션. 클릭하기도 전에 반응한다는 느낌을 줍니다.
커스텀 커서Custom Cursor
시스템 커서를 숨기고 그 자리를 브랜드에 맞는 도형(링·점)으로 대신하는 기법. 인터랙티브 요소 위에서 커서 자체가 반응합니다.
커서 트레일Cursor Trail
커서가 지나간 자리에 점들이 조금씩 지연되며 줄줄이 따라오는 효과. 각 점이 앞 점을 쫓아가며 자연스러운 잔상을 만듭니다.
틸트 카드Tilt Card
커서 위치에 따라 카드가 마치 손에 쥔 것처럼 살짝 기우는 3D 효과. CSS perspective와 rotateX/rotateY로 만듭니다.
스포트라이트 호버Spotlight Hover
어두운 배경 위에서 커서를 손전등처럼 따라다니는 원형 빛무리가 그 주변만 밝게 드러내는 효과.
드래그 앤 드롭Drag and Drop
요소를 집어서 다른 위치로 옮기는 가장 기본적인 조작. 포인터 이벤트로 직접 구현하면 브라우저와 무관하게 동작합니다.
스와이프로 닫기Swipe to Dismiss
카드나 리스트 항목을 옆으로 밀어서 없애는 조작. 임계값을 넘기면 화면 밖으로 날아가고, 못 넘기면 제자리로 돌아옵니다.
당겨서 새로고침Pull to Refresh
리스트 맨 위에서 아래로 당기면 스피너가 나타나고, 놓으면 새로고침이 실행되는 모바일 앱 표준 제스처.
롱 프레스Long Press
일정 시간 이상 누르고 있으면 추가 메뉴나 동작이 나타나는 제스처. 짧게 누르는 탭과는 다른 의도로 구분해서 씁니다.
호버 리빌Hover Reveal
평소엔 숨어 있다가 커서를 올리면 추가 정보나 액션이 슬라이드/페이드로 드러나는 패턴. 화면을 깔끔하게 유지하면서 세부 조작을 담아둡니다.
리플 이펙트Ripple Effect
클릭한 지점에서 원이 퍼져나가며 사라지는 효과. 머티리얼 디자인에서 "여기를 눌렀다"는 즉각적인 피드백으로 씁니다.
스크롤 스냅Scroll Snap
스크롤을 놓으면 가장 가까운 항목에 자동으로 딱 맞춰 멈추는 CSS 기능. JS 없이 갤러리·캐러셀을 만들 수 있습니다.
스크롤리텔링Scrollytelling
스크롤 위치에 따라 이야기가 단계별로 전개되는 기법. 스크롤이 곧 "페이지 넘기기"가 됩니다.
홀드 투 컨펌Hold to Confirm
삭제·결제처럼 되돌리기 힘든 동작을, 버튼을 일정 시간 눌러 채워야만 실행되게 만드는 안전장치.
드래그로 순서 바꾸기Drag to Reorder
리스트 항목을 위아래로 끌어서 순서를 바꾸는 인터랙션. 끄는 동안 다른 항목들이 자리를 비켜주며 애니메이션됩니다.
더블탭 좋아요Double-Tap to Like
사진을 두 번 빠르게 탭하면 하트가 터지듯 나타나며 좋아요가 눌리는, 인스타그램이 대중화한 제스처.
컨페티Confetti
성공·축하 순간에 색종이 조각이 사방으로 튀어 오르며 중력에 끌려 떨어지는 효과. 결제 완료, 목표 달성 화면에서 자주 봅니다.
텍스트 스크램블Text Scramble
글자가 무작위 문자들 사이를 지나며 최종 단어로 "해독"되는 효과. 해커 영화의 코드 화면 같은 느낌을 줍니다.
버튼 로딩 상태Button Loading State
버튼을 누르면 라벨이 스피너로 바뀌고, 요청이 끝나면 체크마크로 성공을 알린 뒤 원래 상태로 돌아오는 패턴.
러버밴드Rubber Band
경계 밖으로 끌면 점점 뻑뻑하게 저항하다가, 손을 떼면 튕기듯 되돌아오는 탄성 효과. iOS 오버스크롤의 그 느낌입니다.
핀치 줌Pinch to Zoom
두 손가락을 벌리거나 모아서 이미지를 확대·축소하는 터치 제스처. Pointer Events로 두 포인터의 거리 변화를 추적해서 구현합니다.