Google for Developers Korea Blog: Flutter의 Transform 및 GestureDetector 위젯이 지닌 파워에 대해 알아보세요!

Google for Developers Korea Blog

한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.

Flutter의 Transform 및 GestureDetector 위젯이 지닌 파워에 대해 알아보세요!

2019년 8월 14일 수요일

.post-body span { white-space: normal !important; } <블로그 원문은 이곳에서 확인하실 수 있으며 블로그 번역 리뷰는 조은(Web Technology GDE)님이 참여해 주셨습니다

저는 화면의 마지막 픽셀까지 남김없이 모든 것을 완벽히 제어할 수 있는 Flutter를 처음 접하자마자, 대부분의 앱 UI가 보여주는 예측 가능하고 틀에 박힌 세상에서 벗어나 새로운 세상으로 나아가고싶었습니다. 저는 CustomPaint를 사용하여 전형적인 ScrollView나 Container에서 벗어나 완전히 커스텀한 위젯을 그릴 수 있었습니다. Flutter를 통해 자유롭게 돌아다니며 원하는 부분을 확대하는 등의 Flutter가 열어준 새로운 가능성의 세계를 맘껏 항해하고 싶었습니다. 이처럼 놀라운 신세계를 탐험하는 데 동반자가 되어 줄 이동 수단이 바로 Transform 위젯이었고, 자유자재로 조정할 수단을 제공해 준 것이 바로 GestureDetector였습니다.

GestureDetector를 통해 대부분의 제스쳐에 손쉽게 접근할 수 있고, Transform을 통해 하위 위젯을 보는 관점을 변경할 수 있습니다. 두 가지 다 Flutter의 결합성 패턴을 따르는 독립된 위젯이므로 간단합니다. 이 둘을 결합하면 위젯에서의 모든 동작이 탐색 수단이 됩니다.
변환(transformation) 소개 Transform 위젯은 본연의 능력에도 불구하고 실제로 수행하는 작업이라곤 변환 행렬을 취해 그 하위 요소에 적용하는 것이 전부입니다. 그 결과로서 평행 이동, 스케일, 회전 그리고 심지어는 상위 요소를 기준으로 하위 요소 기울이기와 같은 조작이 가능하며, 이 모든 것이 간단한 Matrix4 객체 하나로 지정됩니다. 행렬은 합성 가능하므로 변환을 수행할 때 매우 편리하게 사용할 수 있습니다. 평행 이동, 스케일, 회전 및 기울이기 매개변수를 따로 저장하는 것은 처음에는 직관적인 것처럼 보이지만, 차수와 같은 문제로 인해 모호해지기 쉽습니다. 사용자가 일련의 동작을 연이어 수행한다고 생각해 보십시오. 그런 동작이 단순히 드래그의 연속이라면 최종 변환을 결과 위치 Offset으로 쉽사리 저장할 수 있습니다. 하지만 사용자가 드래그한 다음 새 위치에서 회전하고 이 동작을 여러 차례 반복할 경우에는 어떻게 최종 상태를 계속 추적할 수 있을까요? 초점까지 포함해 생각하지 않더라도, 오프셋과 중복되는 라디안으로는 충분치 않습니다. 사용자가 수행한 작업이 나열되면서 계속 늘어나는 작업 목록을 계속 추적하고 전체 과정을 반복해야 최종 상태를 파악할 수 있을 것입니다. 한 변환 행렬을 임의 개수의 다른 변환 행렬과 무한정 결합할 수 있으며, 그 결과는 항상 같은 크기의 또 다른 단일 행렬입니다. GPU는 화면상의 모든 픽셀에 대해서처럼, 이런 종류의 수학 연산을 매우 빠르게 수행하며 동시에 많은 양도 빠르게 계산해 냅니다. 따라서 Transform과 같은 위젯의 상태를 저장하기에 적합하고, 그 결과 Flutter 개발자가 사용하기에 적합한 매우 간단하고 직관적인 위젯이 됩니다.

제스쳐 감지 GestureDetector를 사용하여 사용자 제스쳐를 변환 행렬의 업데이트에 연결하면 사용자는 우리가 표시하는 화면을 자유롭게 이동할 수 있습니다. GestureDetector는 드래그와 같은 동작에 쉽게 액세스하는 기능을 제공하므로, 평행 이동, 손가락 모으기, 확대/축소, 더 나아가 두 손가락 회전 동작에도 사용할 수 있습니다.

GestureDetector는 다양한 동작과 시작, 업데이트 및 종료 상태에 대해 수많고 다양한 콜백을 제공합니다. 하지만 여러 동작을 결합하여 사진으로 찍은 데모와 같은 것을 구현할 경우에는 스케일 콜백만 필요합니다. onScaleUpdate 콜백은 focalPoint, 가로 및 세로 방향 스케일 둘 다, 그리고 회전을 모두 한 곳에서 제공합니다. 따라서 사용자가 한 번의 동작으로 회전하고 확장하는 경우와 같이, 여러 동작에 동시에 대응할 수 있습니다. onScaleUpdate 콜백에서 제공되는 모든 기능은 ScaleUpdateDetails를 참조하세요. 이와 같은 물리적 변환에서 종종 구현되는 또 다른 것은 바로 관성입니다. 사용자가 어떤 동작을 끝낸 후 얼마간은 계속 변환이 이어진 후에 천천히 중지하는 시점에 이를 것으로 예상할 수 있습니다. Flutter는 스케일을 포함한 이러한 모든 동작의 종료 콜백에 'velocity' 매개변수를 제공합니다. 물리학 기반의 운동에서 추측할 수 있듯이, 이 값은 사용자가 손가락을 빠르게 움직이면 크고 느린 동작을 취하면 작을 것입니다. Flutter 인프라의 또 다른 훌륭한 기능인 Tween 애니메이션으로 이 관성 효과를 생성할 수 있습니다. 동작이 끝날 때의 속도 및 위치와 기본적인 물리학 지식을 사용하여 Tween에 제공할 최종 위치와 지속 시간을 제시하고 Tween이 다른 모든 것을 처리하도록 할 수 있습니다. Flutter에는 이런 계산을 자동으로 처리하고 여기서 이루어지는 일이 매우 현실적으로 느껴지게끔 하기 위해 마찰 시뮬레이션 클래스도 포함됩니다.
결론 Transform과 GestureDetector를 결합하면 놀랍도록 강력한 도구가 탄생합니다. 스크린샷에 나타낸 바와 같이, 이 도구를 사용하면 게임 보드 주위를 이동하는 것부터 지도를 탐색하고 대화식 이미지 뷰어를 제공하는 등의 다양한 기능을 구현할 수 있습니다. 여기에서 보여주는 앱은 현재 Flutter Gallery 앱에서 데모로 제공됩니다. 모든 코드는 Flutter의 주요 오픈소스 저장소에 속한 것으로, 변환 데모 소스에서 찾을 수 있습니다. 대부분의 변환 로직은 관성 애니메이션을 비롯하여 GestureTransformable 클래스에 있습니다.

Contents

ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase

검색

Tag

Archive

2024
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2023
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2022
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2021
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2020
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2019
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2018
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2017
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2016
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2015
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2014
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2013
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2012
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 3월
- 2월
- 1월

2011
- 12월
- 11월

Feed

Google
Privacy
Terms