모바일 개발하는 자바리안의 메모장

Flutter - 앱 아이콘 변경 본문

Flutter

Flutter - 앱 아이콘 변경

자바리안 2024. 1. 30. 23:54
반응형

아이콘 변경은 자주하는 작업이 아닌만큼 할 때마다 귀찮고, 헷갈려서 이번 기회에 글로 깔꼼하게 정리해두려고 한다.

공식 플러그인을 사용하는 방법도 있지만 나는 내 기준에서의 shortcut을 택했다.
(macOS, Windows 앱을 개발할 경우 플러그인 추천)

  1. 우선 Icon으로 사용할 n * n 크기의 png image를 준비한다.
  2. Generator 웹 툴을 이용해 필요한 이미지를 추출한다.(iphone, ipad만 선택✅)
  3. 압축 파일이 떨어지는데 아래 구조로 되어있다.(appstore.png & playstore.png 는 추후 스토어 app icon 등록할 때 사용)
  4. [project root]/ios/Runner/Assets.xcassets를 삭제하고 generator가 만들어준 Assets.xcassets를 넣어준다. 이 폴더에는 iOS에서 사용하는 icon asset들이 들어있다. iOS는 이게 끝이다.
  5. 이번엔 AOS에 적용해보자. Android studio를 실행한다.
  6. app directory 아래 res의 옵션보기 > New >Image Asset을 선택한다.
  7. Source Asset영역에서 이미지를 선택하고, Scaling영역에서 사이즈를 조절해준다. Preview를 보며 safe area를 넘어가지 않도록 잘 조절해주면 된다.
  8. 이렇게 추가한 asset은 res 하위 폴더에 다양한 사이즈의 이미지로 추가된다.
    Android만 이렇게 직접 native tool을 사용하는 이유는 generator를 통해 이미지를 생성할 경우(플러그인도 동일), round 이미지는 따로 만들어주지 않아 round icon이 사용되는 device에서 사각형 이미지가 그대로 들어가 뭔가 허접해보이기 때문이다. (round icon은 굳이 신경안써도 된다면 iOS와 동일하게 진행해도 된다.)
반응형
Comments