Gesture Physics & Touch Interactions
인간의 손가락 끝에서 전달되는 물리적 압력과 속도 수치를 디지털 수리 신호로 변환하고, 터치 하드웨어의 미세한 마찰과 관성을 설계하는 직접 조작 물리학을 다룹니다.
sys.entry
M
Me
hyunyoun's Blog
posts6 min read
1. Overview
제스처 물리학 및 터치 상호작용(Gesture Physics & Touch Interactions, GPT)은 유리 표면이라는 물리적 제약 조건을 넘어 사용자가 화면 속 개체를 직접 만지고 물리적으로 이동시키는 '직접 조작 거버넌스 물리학'입니다.
학습자는 손가락의 물리적 이동 수치인 **속도(Velocity)**와 이를 수리적으로 매끄럽게 보간하는 **물리적 감쇠(Decay)**의 법칙을 배웁니다. 특히, 여러 손가락의 수치적 좌표를 동시 수용하는 멀티터치(Multi-touch) 역학과 개체의 물리적 저항감을 수리적으로 표현하는 어포던스 물리를 익힙니다. 이를 통해 사용자가 디지털 정보를 단순한 픽셀이 아닌 실제 물리적 도구처럼 느끼게 만드는 하이엔드 수동적(Haptic-like) 경험의 근간을 확보합니다.
2. Scope & Boundaries
In-Scope
- Velocity Analysis Dynamics: 손을 뗐을 때의 최종 물리 속도 수치로부터 관성 이동 거리를 수리 연산하는 기제
- Friction & Kinetic Energy: 표면 마찰 수치와 운동 에너지 수치가 0으로 수렴하는 물리 수순
- Multitouch Mapping Logic: 핀치(Pinch), 로테이트(Rotate) 등 다차원 수치 신호의 물리적 치환
- Boundary Overscroll Physics: 물리적 한계점 도달 시의 수리적 탄력() 및 고무줄 효과 설계
- Gesture Conflict Resolution: 스크롤과 스와이프 등 중첩된 수리적 신호를 물리적으로 분별하는 법
Out-of-Scope
- 하드웨어 센서의 전기적 정전 용량 변화량 감지 공정 (전자 공학 영역)
- 터치 기반의 텍스트 입력(Virtual Keyboard) 레이아웃 설계 (12-01-XX 영역에서 분담)
Boundaries
- GPT vs. Traditional UI: 일반 마우스 UI가 '간접적인 수치 포인팅'이라면, GPT는 '손가락의 물리적 궤적과 시스템 개체의 수리적 결합(-)'에 집중하여 구분합니다.
3. Counterexample
- 단순히 "손으로 누르기"라 설명하는 것은 GPT 학습이 아닙니다. 왜 사용자가 손가락을 떼는 순간의 속도 수치가 0.1m/s만 어긋나도 리스트 스크롤의 물리적 관성이 수리적으로 '부자연스럽게' 느껴지는지 증명할 수 있어야 하며, 감쇠(Decay) 계수 수치를 일정하게 유지하지 못할 때 발생하는 물리적 '덜컥거림'을 논증하지 못한다면 제스처 물리학의 본질을 이해하지 못한 것입니다.
4. Prerequisites
- Animation Physics & Easing (Basic): 12-03-02의 가속도 및 물리 힘 이해가 필수입니다.
- Visual Perception & Gestalt Principles (Recommended): 12-01-01의 물리적 개체 인식 이해가 권장됩니다.
5. Learning Map
- Finger as Pointer: 손가락 끝의 수리적 좌표를 물리적 개체와 동기화하는 기초를 이해합니다.
- Momentum Transfer: 물리적 속도 수치를 시스템의 수리적 이동 동력으로 전이시키는 법을 배웁니다.
- Resistance and Boundary: 끝없는 물리 공간에 수리적 경계를 설정하고 탄력적인 반응을 설계합니다.
- Tangible Digital World: 만지는 것 자체가 즐거움이 되는 하이엔드 물리 질감을 수치적으로 완성합니다.
6. Learning Topics
Basic
Core: 터치 이벤트와 좌표 매핑 (Coordinate Physics)
- Why to Learn: 사용자의 실제 손 물리적 위치와 화면 속 수리적 좌표가 1px의 오차 없이 일치해야 조작 신뢰도가 생기기 때문입니다.
- What to Learn:
- Touch-Start, Move, End: 제스처의 시공간적 물리 생애 주기 탐색
- Point-of-Interaction: 다수의 수치 좌표 중 시스템이 중심값()으로 물리 인식하는 기제
- Latency Measurement: 물리적 터치부터 수리적 반응까지의 지연 수치(-- )
- How to Learn:
- 화면의 터치 좌표 수치를 실시간으로 출력하며, 손가락을 빠르게 움직일 때 수리적 좌표가 물리적 궤적을 얼마나 추종하는지 실습
- Dead Zone (무감대) 수치를 설정하여 미세한 물리적 떨림이 불필요한 수리적 이벤트를 발생시키지 않도록 훈련
- Implement: 터치 좌표 수치를 입력받아 개체를 물리적으로 추종하게 만드는 기초
Touch_Follower
Recommended
Core: 관성과 운동량 보존 (Momentum Dynamics)
- Why to Learn: 손을 떼었을 때 수리적 개체가 즉시 멈추지 않고 물리적으로 부드럽게 감속해야 실제 물체처럼 느껴지기 위함입니다.
- What to Learn:
- Kinetic Scrolling: 손을 뗄 때의 속도 수치()를 초기 물리 속도로 사용하는 역학
- Deceleration Constant: 마찰력에 의해 속도 수치가 수리적으로 줄어드는 비율()
- Predicted Destination: 현재 속도 수치로부터 최종적으로 멈추게 될 물리적 위치를 수리 예측하는 법
- How to Learn:
JS scroll수치를 직접 수동 구현하며, 마찰 계수 수치를 0.95에서 0.99로 바꿨을 때의 물리적 '미끄러짐' 수치 대조 실습- Flick Gesture 시 수리적 도착 지점이 페이지의 섹션 경계 수치와 자연스럽게 물리 정렬()되게 만드는 훈련
- Implement: 초기 속도 수치로부터 감쇠 궤적을 수리 산출하는
Inertia_Engine
Practical
Core: 멀티터치와 다차원 조작 (Dimensional Mechanics)
- Why to Learn: 두 개 이상의 수치 좌표를 활용해 확대, 축소, 회전 등의 복합적인 물리 조작을 수리적으로 처리하기 위해서입니다.
- What to Learn:
- Pinch-to-Zoom Physics: 두 물리 점 사이의 거리 수치 변화를 수리적 스케일로 환산
- Rotation Logic: 두 물리 점의 각도 수치 변화를 개체의 수리적 회전량으로 물리 전이
- Transformation Matrices: 이동, 확대, 회전을 하나의 수리적 행렬 수치로 물리 통합 관리
- How to Learn:
- 이미지 뷰어에서 두 손가락 좌표의 변화 수치를 감지하여, 사진이 손가락 끝에 물리적으로 '붙어서' 확대되는 하이엔드 수순 실습
- Anchor Point (지점) 수치가 고정되지 않았을 때 모션이 물리적으로 얼마나 수리 요동치는지 분석
- Implement: 멀티터치 수치를 2D 행렬() 전치 수치로 변환하는
Multi_Gesture_Parser
Advanced
Core: 경계 물리와 고무줄 효과 (Boundary Theory)
- Why to Learn: 스크롤이 끝났음을 수리적으로만 알리지 않고, 물리적인 튕김 수치를 통해 본능적으로 깨닫게 하기 위함입니다.
- What to Learn:
- Overscroll Physics: 수리적 한계 수치를 넘어서도 물리적으로 늘어나는 '장력'의 구현
- Logistic Growth curves: 늘어날수록 저항 수치가 물리적으로 강해지는 수리적 수순
- Haptic Feedback Sync: 물리적 임계점 도달 시 하드웨어 진동 수치를 수리 동기화
- How to Learn:
- iOS의 Rubber-banding 수치를 수리적으로 수식화하여, 당기는 물리 거리와 되돌아오는 수리 시간의 비례 분석 실습
- Swipe-to-delete 제스처에서 삭제를 확정 짓는 물리적 '임계 수치()'를 수리적으로 최적화하는 프로젝트
- Implement: 경계 이탈 수치에 따라 비선형적 저항 물리값을 생성하는
Boundary_Elastic_Engine
7. Terminology
8. References
Primary
- [P1] CS2023 - Graphics & Interactive Techniques - Input Devices & Gestures — Academic curricula.
- [HCI: Direct Manipulation] Ben Shneiderman — The foundational theory for touch interaction.
Secondary
- [Gesture Recognition Math] Various - Mathematical models for swipes and circles.
- [Mobile Design Pattern Gallery] Theresa Neil — Practical gesture implementation in industry.
Industry
- [Apple HIG: Gestures] — The original standard for mobile touch physics.
- [Hammer.js: Documentation] — Industry-leading gesture recognition engine logic.
9. Final Checklist
Primary
- '속도()' 수치를 분석하여 사용자가 의도한 물리적 '던지기'의 수리적 도달 거리를 예측 가능한가? (P1)
- '멀티터치' 상황에서 각 수치 좌표 간의 '물리적 간섭'을 수리적으로 해결하는 로직을 기술할 수 있는 가? (P1)
Secondary
- '물리적 마찰 수치'가 사용자에게 주는 '심리적 질감'의 수리적 상관관계에 대해 소통 가능한가?
- Snap 기능을 통해 사용자의 물리적 조작 오차를 수리적으로 보정하는 하이엔드 거버넌스를 제안할 수 있는 가?
Industry
- 실무 서비스에서 Overscroll 물리 수치가 너무 약할 때 사용자가 겪는 수리적 '시스템 무반응' 오해를 진단할 수 있는 가? (SFIA)
- Haptic-Visual Sync 오차 수치가 사용자의 물리적 '몰입감'을 수리적으로 얼마나 훼손하는지 정량 분석할 수 있는 가?