[플러터] Flutter Web 을 디버깅하는 3가지 방법

Flutter는 크로스 플랫폼을 지원하는 프레임워크이며 많은 개발자들이 Andorid, IOS 모바일 앱을 만들기 위해 사용하지만 데스크탑 앱과 웹에서도 꽤 괜찮은 성능으로 동작합니다. 하지만 익숙한 모바일앱과는 달리 플러터를 웹으로 빌드하고 또 그 웹사이트를 모바일앱에서 확인해야 한다고 했을때 어떻게 하면 좋을까요? 

 

아시다시피 Flutter 에는 웹을 렌더링하는 두가지 방식이 존재합니다.

 

1. HTML : HTML/CSS를 기반으로 위젯 트리를 렌더링

2. CanvasKit : Flutter의 기본 렌더링 엔진인 skia와 WebGL을 사용하여 렌더링

 

이렇게 봤을때 HTML 렌더링을 통해 보통 웹처럼 디버깅 해볼 수 있지 않을까? 하는 생각이 들지만 말만 HTML 렌더링이지 생각보다 쓸만한 디버깅을 하기에는 데이터가 많이 부족합니다.
그 이유는 Flutter 에서 html로 렌더링시 Flutter의 위젯이 대응되는 html 코드로 치환되게 되는데 이 과정에서 위젯트리와 상태관리가 복잡하게 변환되어 개발자도구(Dev Tools) 에서 쉽게 확인하고 수정할 수 있는 수준이 아니기 때문이고 또하나의 이유는 Flutter 의 html 렌더링은 Shadow DOM 이라는걸 사용하여 DOM을 캡슐화 하고 보호하며 브라우저의 개발자 도구에서 접근 및 수정을 제한하게되고 html 트리의 일부부은 아예 숨겨져 보일수도 있기 때문입니다.

// html로 렌더링
 flutter run -d chrome --web-port=8080 --web-renderer html

// canvasKit으로 렌더링
 flutter run -d chrome --web-port=8080 --web-renderer canvaskit

위 명령을 통해 각각의 렌더링을 해볼 수 있습니다.

 

canvasKit 렌더링의 경우 웹상에서의 디버깅 상황은 더 안좋은데요

위 코드에서 <canvas/> 태그 안에서 모든 위젯이 그려지고 있기 때문입니다. 따라서 웹상에서 디버깅을 하는 작업은 거의 포기하게 되는 상태가 됩니다. 

그렇다면 Flutter 웹에서의 디버깅은 어떻게 진행해야할까요?

 

1. Flutter PC Web 디버깅

PC 웹에서의 디버깅은 비교적 간단합니다. 모바일 웹에서와 똑같이 Android Studio 혹은 Visual Studio Code 등 IDE 에서 디버거를 찍고 작업하는거죠

이 글을 보시는 분들도 PC 웹에서의 디버깅은 어렵지 않게 하고 계실거라고 생각합니다. 하지만 우리의 서비스가 만약 모바일 웹을 제공해야 한다면 우리는 PC 웹에서의 디버깅만으로는 충분하지 않고 Android 디바이스의 삼성인터넷, 크롬 브라우저 혹은 IOS 디바이스의 사파리 브라우저에서 내 작업을 확인하고 싶을겁니다. 그럴때 어떻게 해야 하는지 알아보겠습니다.

 

2. 아이폰 모바일 웹 디버깅 (IOS)

Flutter 를 개발하시는 개발자분들은 대부분 MacOS를 쓰고계실거라 생각합니다. 그리고 IOS 앱을 개발하실때 사용하는 IOS Simulator를 통해 웹 디버깅을 해볼 수 있습니다. 

IOS 시뮬레이터에서는 다행히 우리 pc에서 로컬빌드한 사이트에 접근이 가능합니다.

위 이미지처럼 locahost 에 접근해 내 코드의 결과물을 바로 바로 확인이 가능하게 되는데 우리는 pc의 사파리 브라우저를 통해 더 많은 정보를 확인할 수 있습니다.

 

 

우선 default 상태의 사파리 메뉴에서는 불가능 하며, 사파리의 개발자 전용 메뉴를 ON 시켜줘야 하는데 하단 링크의 설명을 참고하여 위와 같이 '개발자용' 메뉴를 추가해줍니다.
https://support.apple.com/ko-kr/guide/safari/sfri20948/mac

Mac용 Safari에서 개발자용 메뉴의 개발자용 도구 사용하기

 

 

개발자용 메뉴를 활성화 했다면 우리가 아까 빌드한 localhost를 보고있는 IOS 시물레이터가 보이게 됩니다. 여기서 저 메뉴를 클릭하면 크롬의 개발자 도구와 같은 메뉴를 확인할 수 있습니다. 

 

 

이 Dev Tool을 사용해서 아래와 같은 디버깅이 가능합니다.

1. 콘솔에 찍히는 로그 확인

2. 모바일 웹에서 호출하는 api 혹은 리소스를 불러오는 시간 및 순서 확인

3. 의도적으로 이벤트를 일으키고 해당 액션이 어느정도의 CPU를 차지하는지 확인

4. 내 앱의 레이어를 확인

 

이 외에도 다양하게 활용해 볼 수 있지만 위 4가지만 체크해도 모바일 웹상에서의 디버깅을 더 원활하게 처리할 수 있습니다.

이제 IOS 사파리에서의 디버깅을 알아봤으니 다음은 Android 의 디버깅을 알아볼 차례입니다.

 

3. Android 모바일 웹 디버깅

안드로이드의 경우 어찌보면 상황이 조금 더 까다롭습니다. 왜냐면 localhost에 바로 접근되지 않기 때문입니다.

따라서 조금 편법을 쓰게 되는데 그건 바로 로컬 ip로 웹서버를 열어서 확인하는 방법입니다.

 

우선 내 컴퓨터의 내부 ip를 알아야합니다. macOs를 사용한다면 터미널에 아래와 같은 명령어를 입력해 간단하게 알아낼 수 있습니다.

ipconfig getifaddr en0

 

이제 웹서버를 열어서 에뮬레이터를 열어줄 차례입니다. 아래와 같은 명령어로 웹서버를 연 후
192.168.xxx.xxx:8080 <- 이런식으로 에뮬레이터의 주소창에 입력해주면 정상적으로 접근 가능하게 됩니다.

// 아이피 영역에는 본인의 ip를 입력해주세요!
flutter run -d web-server --web-hostname 192.168.xxx.xxx --web-port 8080

 

 

위 사진과 같이 잘 접근된걸 확인할 수 있습니다. 하지만 위 상태까지만 보면 그냥 빌드된걸 모바일 웹에서 확인만 했을 뿐 어떤 데이터도 확인할 수 없는 상태입니다. 이럴 때 사용할 수 있는 방법으로 '크롬 인스펙터' 가 있습니다.
pc의 크롬 브라우저에서 하단의 링크에 접근합니다.

chrome://inspect/#devices

그러면 위와같은 화면을 확인할 수 있고 형광펜으로 칠해진 영역을 클릭시 아래와 같은 Dev Tool을 확인할 수 있습니다.

 

위와같이 크롬 인스펙터를 사용하면  평소 웹을 디버깅할때 크롬에서 확인하던 기능들을 거의 그대로 사용할 수 있게됩니다. 

 

마무리

우리 Flutter 개발자들이 모바일 앱을 개발하는 빈도가 높지만 크로스 플랫폼의 장점을 최대한 활용하기 위해서는 웹과 데스크탑 앱을 모두 개발하고 디버깅해보며 경험을 쌓는게 중요하다고 생각합니다. 

 

하지만 현재 아직까지 Flutter 프레임워크에는 해결되지 않은 고질적인 문제들이 많이 있습니다. 그래서 개발을 하는 도중 예상대로 동작하지 않거나 충돌이 나는경우가 많은데 단지 개발자의 코드문제였다면 고치면 되는 문제이기 때문에 다행이지만 Flutter 자체의 결함인 경우가 상당히 많고 찾아보면 Github 이슈에 등록이 되어있으나 아직 해결이 되지 않은경우 혹은 아직 이슈에 등록조차 안된경우에 최대한 데이터를 수집하여 공유하려는 노력이 필요합니다.

 

오늘 포스팅한 내용은 평소에 디버깅 하면서 알면 좋은 스킬들이지만 더 좋은 오픈소스를 만들기 위해 데이터를 수집하는 방법이기도 합니다. 다들 즐코 하시길 바라며, 다음에는 더 좋은 포스팅으로 돌아오겠습니다!