Flutter는 제스처와 사용자 입력을 어떻게 처리하나요?

Question

Accepted Answer

Flutter는 **GestureDetector**와 **InkWell** 같은 제스처 감지 위젯과 내장 위젯 상호작용을 통해 **터치 제스처**(탭, 스와이프, 드래그, 핀치)를 처리합니다. 제스처 처리를 이해하는 것은 인터랙티브한 앱을 만드는 데 필수적입니다.

## GestureDetector — 제스처 감지

```dart
// GestureDetector는 위젯을 감싸 그 위의 제스처를 감지
GestureDetector(
  onTap: () => print('tapped'),
  onDoubleTap: () => print('double tapped'),
  onLongPress: () => print('long pressed'),
  onPanUpdate: (details) => print('dragging: ${details.delta}'),  // 드래그
  onScaleUpdate: (details) => print('pinch: ${details.scale}'),    // 핀치/줌
  child: Container(width: 100, height: 100, color: Colors.blue),
)
```

`GestureDetector`는 어떤 위젯이든 감싸 탭, 더블 탭, 롱 프레스, 드래그(pan), 스케일(핀치) 등에 대한 콜백을 제공합니다.

## InkWell — 물결 효과가 있는 Material 탭

```dart
// InkWell — Material 물결 효과가 있는 탭 가능 영역 (시각적 피드백)
InkWell(
  onTap: () => doSomething(),
  child: Padding(padding: EdgeInsets.all(16), child: Text('Tap me')),
)
// → Material 스타일 탭 가능 영역에는 InkWell (시각적 피드백); 시각 효과 없는
//   일반 제스처에는 GestureDetector
```

## 내장 상호작용과 모범 사례

```text
✓ 많은 위젯이 입력을 자체 처리: 버튼(onPressed), Dismissible(스와이프로 해제),
  Draggable/DragTarget(드래그 앤 드롭), InteractiveViewer(pan/zoom), 슬라이더, 스위치
✓ 올바른 위젯 사용 — 버튼에는 버튼(GestureDetector + onTap 아님); Material 피드백에는
  InkWell; 커스텀 제스처에는 GestureDetector
✓ 상호작용 시 시각적 피드백 제공 (물결, state 변경) — 좋은 UX
✓ 접근성 유의 (충분한 탭 영역, semantics)
```

## 왜 중요한가

제스처와 사용자 입력을 이해하는 것은 필수적입니다. 왜냐하면 **앱은 인터랙티브**하기 때문입니다 — 사용자 터치(탭, 스와이프, 드래그)에 반응하는 것이 앱 기능에 근본적이므로 반드시 알아야 할 실용 지식입니다.

모바일 앱은 본질적으로 터치 기반이며, 제스처를 올바르게 처리하는 것이 인터랙티브한 경험을 만드는 핵심입니다.

**GestureDetector**(위젯을 감싸 콜백을 통해 탭, 더블 탭, 롱 프레스, 드래그, 핀치 등을 감지)를 이해하는 것은 일반 제스처를 처리하는 주요 도구로, 커스텀 상호작용을 가능하게 합니다.

**InkWell**(시각적 피드백을 위한 Material 물결 효과가 있는 탭 가능 영역 제공)을 이해하는 것은 시각적 피드백이 중요한 Material 스타일 상호작용에 중요합니다.

**내장 상호작용**(onPressed가 있는 버튼, 스와이프로 해제하는 Dismissible, 드래그 앤 드롭을 위한 Draggable/DragTarget, pan/zoom을 위한 InteractiveViewer, 슬라이더, 스위치)과 **올바른 위젯을 사용하는 모범 사례**(GestureDetector + onTap 대신 버튼에는 버튼, Material 피드백에는 InkWell, 커스텀 제스처에는 GestureDetector)를 이해하는 것은 다시 발명하기보다 적절하고 접근 가능한 상호작용을 만드는 것을 반영합니다.

**시각적 피드백**(좋은 UX를 위한 물결, state 변경)과 접근성(적절한 탭 영역)의 중요성을 이해하는 것은 세련된 상호작용 디자인을 반영합니다.

앱은 근본적으로 인터랙티브하고(터치에 반응하는 것이 필수) Flutter가 GestureDetector, InkWell, 내장 인터랙티브 위젯을 통해 제스처를 처리하며, 이들을 이해하고 올바른 도구를 사용하는 것이 인터랙티브하고 세련된 앱을 만드는 데 필수적이므로, Flutter에서 제스처와 사용자 입력을 이해하는 것은 필수적이고 자주 적용되는 지식입니다 — 모든 앱이 요구하는 인터랙티브한 경험을 만드는 핵심 기술이자, 사용자 터치에 올바르게 반응하고 어떤 Flutter 앱에서든 세련되고 접근 가능한 상호작용을 만드는 데 필요합니다.