패스트캠퍼스 환급챌린지 18일차 미션(2월 18일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 Flutter 앱의 스플래시 화면에 대해 알아보려 한다.

스플래시 화면은, 앱을 처음 실행했을 때 첫 번째 뷰를 보여주기 전 로딩 상황에서 흰색 빈 화면 대신 앱과 관련된 어떤 대체 화면을 보여주는데, 그 대체 화면을 스플래시 화면이라고 한다. 로그인이 필요한 경우는 세션 검증을 하는 시간을 벌어준다고 한다.

 

즉 Flutter의 Native Splash Screen은 Flutter 프레임워크가 각 플랫폼에서 구동되기 위해 로딩하는 데 필요한 시간동안 보여줄 수 있는 대체 화면을 지칭하는 것이다.

위 예시는 그냥 스플래시 화면의 예시로서 보이기 위해 캡쳐한 것이고, 실제로는 아주 짧은 시간동안 흰 화면 또는 앱의 로고가 중앙에 보이는 화면이 1초 정도 스쳐지나간다. 그럼 어차피 이렇게 짧은 시간동안 보이는 화면인데, 적용할 필요가 없지는 않을까?

 

무조건 대응해야한다.(유저의 이탈율과 관련있는 것으로 알고 있다) iOS의 경우 대응하지 않으면 흰 화면이 보여서 앱 심사의 Reject 사유가 될 수 있으며, 안드로이드의 경우 12버전 이후로는 기본적으로 앱의 로고를 활용한 스플래시 화면을 보여준다. (위 캡쳐 화면과 같은 형식)

 

원래는 iOS와 안드로이드는 개별적인 스플래시 화면 구현 및 적용이 필요한데, 한 개발자 분이 이 두 플랫폼의 스플래시 화면을 한번에(!!!) 구현하고 적용할 수 있는 플러터 패키지를 개발해서 pub에 올려두셨다고 한다.

 

그 이름하여 "flutter_native_splash"이다. 검색하면 최상단에 압도적인 수의 좋아요를 받은 패키지를 하나 찾을 수 있을 것이다.

바로 pubspec에 등록하고 설치해주자.

그리고 README에 있는 내용을 차례대로 따라가며 스플래시 화면을 적용해주면 된다.

 

스플래시 화면 중앙에 보일 아이콘은 그냥 적당히 Flaticon 등에서 찾았다.

아래 명령어를 통해 스플래시 화면을 생성할 수 있는데, iOS, 안드로이드, Web까지 자동으로 대응해준다는게 신기했다.

적용 결과는 아래와 같은데, 아이콘 크기 계산을 잘못했는지 좀 꾸겨져서 나왔다...

 

예쁜 스플래시 적용과는 별개로 패키지의 상세 정보를 더 읽어봤는데, 다크모드에서 개별 스플래시 적용 기능까지도 지원한다고 한다!

확실히 Flutter 생태계에는 알아두면 매우 유용한 패키지가 다양하게 있는 것 같다. 평소에 이런 유용한 패키지들을 많이 알아두는게 실제 개발 실력에 영향을 미칠 수도 있겠다는 생각이 들었다.. ㅠ

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N