Widget Inspector란 뭘까?
처음에 강의를 듣다가 DevTools 설명이겠거니 했는데, 조금 다른 부분이 있다.
허접한 영어 실력으로 유추해보건데, 아마도 위젯 관련된 정보를 보는 곳이 아닐까 싶다.
아직 정확히 감이 잡히지 않으니, 한번 사용해보자.
Widget Inspector
공식 Docs를 보면 Widget Inspector를 이렇게 안내하고 있다.
Flutter 위젯 인스펙터는 Flutter 위젯 트리를 시각화하고 탐색할 수 있는 강력한 도구입니다.
Flutter 프레임워크는 위젯을 컨트롤(텍스트, 버튼, 토글 등)부터 레이아웃(중앙 배치, 패딩, 행, 열 등)에 이르기까지 모든 것을 위한 핵심 빌딩 블록으로 사용합니다. 인스펙터는 Flutter 위젯 트리를 시각화하고 탐색하는 데 도움이 되며, 다음과 같은 용도로 사용할 수 있습니다:
- 기존 레이아웃 이해
- 레이아웃 문제 진단
위젯으로 모든 것을 구현한 Flutter이니만큼, 위젯 하나하나를 분석하고 테스트해볼 수 있어야 정상적인 앱 개발이 가능할 것이다.
그렇기에 이를 서포트하기 위한 도구가 Widget Inspector란 말씀.
자, 그럼 한번 직접 사용해보자.
강의를 들으면서 쓰고 있는 프로젝트다.
여기서 가장 오른쪽에 있는 돋보기 속 플러터 로고가 있는 녀석을 눌러주자.
정상적으로 동작했다면, VSC 사이드에 이런 모습의 창이 뜰 것이다.
하나 하나 뜯어가면서 이해해보자.
Widget Tree
플러터는 위젯 트리를 형성하고, 이를 엔진에서 렌더링 하는 것으로 어플리케이션을 구현한다.
이 위젯들을 Tree 형식으로 정리해둔 것이 Widget Tree다.
DOM 트리가 무엇인지 알고 있다면 이해하기 편할 것이다.
이 Widget Tree에서 위젯을 하나 클릭하게 되면...
이런 식으로 위젯의 정보와 위치 등이 표시되게 된다.
Cross Axis 옆에 start라고 써있는 것이 보일 텐데, 이는 crossAxisAlignment의 속성을 나타내고 있는 것이다.
이를 클릭해서 실시간으로 어플리케이션의 crossAxisAlignment값을 변경하고, 테스트해볼 수 있다.
몇번을 봐도 감탄만 나오는 애니메이션
아무튼, 그 옆에 Widget Details Tree에는 위젯의 모든 속성들이 표시된다.
이런 식으로.
저 다섯 가지를 통해서 여러 가지 디버그 과정도 할 수 있다.
애니메이션 감속, 베이스라인 표시 등등 기능이 다양하다.
마지막으로 Select Widget Mode를 누르고 에뮬레이터로 가보면...
이런 식으로 위젯별로 확인이 가능하다.
이렇게 오늘은 Widget Inspector의 기능에 대해 알아보았다.
다음번에는 더 좋은 글을 가지고 돌아오도록 하겠다.
모두들 즐거운 개발 생활이 되기를!
