현이의 개발 이야기

안드로이드는 adb (Android Debug Bridge)를 통해 디버깅 연결을 할 수 있다. Flutter 뿐만 아니라 안드로이드 스튜디오로 진행하는 네이티브 안드로이드 개발도 adb를 통한다. 유선 연결하여 프로젝트를 실행하고 디버깅하는 것이 일반적이지만, adb는 무선 디버깅도 지원한다. 나는 휴대폰을 유선 충전하면서 프로젝트를 디버깅하는 경우가 많아 무선 디버깅을 애용한다. 안드로이드 무선 디버깅하기 무선 디버깅을 연결하는 방법을 살펴보기 전, 다음을 확인하자. 데스트탑에 adb가 설치되어 있어야 한다.cmd에 adb를 쳤을 때 adb로 할 수 있는 명령어 리스트가 출력돼야 한다. 안드로이드 폰에 개발자 모드가 활성화되어 있어야 한다.이 부분은 간단하고 검색하면 잘 나오므로 따로 다루지 않겠다. 안드로이드와 데스크탑이 같은 와이파이에 연결되어 있어야 한다.다른 네트워크에 연결되어있다면 무선 디버깅은 불가능하다. 1. 페어링 정보 생성 안드로이드 디바이스와 데스크탑을 연결하기 위해선 먼저 두 기기를 페어링 시켜 주어야 한다. 이를 위해 안드로이드에서 설정 > 개발자 옵션에 들어간다. 개발자 옵션에서 무선 디버깅을 활성화시킨다. 무선 디버깅을 클릭하여 들어가면 기기의 정보와 함께 다음과 같이 두 가지 페어링 옵션이 있다. 이 중 페어링 코드로 기기 페어링을 선택한다. QR 코드 옵션은 터미널 환경에서 제공되지 않는 것 같다. 그러면 다음과 같이 페어링을 위한 코드와 IP 주소 및 포트가 표시된다. 이 정보는 앞서 표시된 기기 정보와 다르다는 것에 주의하자. 2. 페어링 이제 데스크탑으로 돌아와 명령 프롬프트(혹은 터미널)를 실행시켜준다. adb pair <IP주소>:<포트>를 입력한다. 바로 위에서 확인한 페어링을 위한 IP 주소와 포트를 넣으면 된다. 정상적으로 입력했다면 위 스크린샷과 같이 성공 메시지가 출력된다. 다시 안드로이드를 확인해보면 페어링된 기기에 데스크탑이 표시되는 것을 확인할 수 있다. 그러나 아직 실제 연결은 되지 않은 상태이다. 페어링은 두 기기가 서로의 존재를 알게 해주는 것 뿐, 연결시키는 과정은 아니다. adb devices 명령어로 연결된 안드로이드 디바이스를 확인해보면 아무것도 출력되지 않는다는 것을 알 수 있다. \ 대신 한 번 존재를 확인시켜주었으니 다음에 무선 연결을 할 때에는 별도의 페어링 과정이 필요하지 않다. 3. 연결 실제 연결은 기기 정보를 이용해 adb connect <IP주소>:<포트> 명령으로 할 수 있다. 페어링에 사용했던 포트와 달리, 여기에 들어가는 정보는 무선 디버깅 화면에 표시된 기기 정보이다. 이를 수행하면 다음과 같이 무선 디버깅이 연결되었다는 알림이 뜬다. 이제 유선으로 연결한 것과 똑같이 프로젝트를 실행하고 디버깅할 수 있을 것이다.

앱을 만들다보면 한 위젯을 계속 회전시켜야 하는 경우가 있다. 이럴 때 사용하기 좋은 Rotation 위젯을 만들어보았다. Rotation( speed: 30, // 1초에 30도 회전 child: Image.network('https://picsum.photos/seed/hyuni/100/200'), ), 이 위젯을 만든 과정을 되짚어보자. 1. 위젯 회전시키기 다음과 같이 Transform 위젯을 이용하면 위젯을 쉽게 회전시킬 수 있다. import 'dart:math'; import 'package:flutter/material.dart'; class Rotation extends StatelessWidget { const Rotation({super.key}); @override Widget build(BuildContext context) { return Transform.rotate( angle: 45 / 180 * pi, // radian child: Image.network('https://picsum.photos/seed/hyuni/100/200'), ); } } 2. 회전 애니메이션 주기 여기서 각도를 state로 변환하고, Ticker를 활용하면 회전을 자유자재로 조절할 수 있다. import 'dart:math'; import 'package:flutter/material.dart'; import 'package:flutter/scheduler.dart'; class Rotation extends StatefulWidget { const Rotation({super.key}); @override State<Rotation> createState() => _RotationState(); } class _RotationState extends State<Rotation> { late final Ticker? _ticker; // 1초에 30도 회전 final double speed = 30; double _angle = 0; @override void initState() { _ticker = Ticker((elapsed) { setState(() { _angle = speed * elapsed.inMilliseconds / 1000; }); }); _ticker?.start(); super.initState(); } @override void dispose() { _ticker?.stop(); _ticker?.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Transform.rotate( angle: _angle / 180 * pi, // radian child: Image.network('https://picsum.photos/seed/hyuni/100/200'), ); } }