Flutter에서 아이콘과 이름 수정하기

 ・ 2 min

photo by Jakob Owens on Unsplash

Flutter에서 개발하다 보면 앱 이름과 아이콘을 변경하고 싶은 순간이 와요.
자주 실행하는 기기와 출시 예정인 곳에 설정을 해줘야 하는데 AOS, iOS에 각각 설정하는 건 알아야 할 게 은근히 많아요.

다행인 건, pub.dev에 이런 설정을 지원하는 패키지들이 있어요.

아이콘을 변경하고 싶을 때는 flutter_launcher_icons 패키지를 사용하면 돼요.
앱 이름과 번들 ID를 변경하고 싶을 때는 rename 패키지를 사용하면 돼요.

이제 두 패키지를 사용하는 방법에 관해서 설명할게요.

flutter_launcher_icons#

이 패키지를 사용하려면 먼저 필요한 준비물이 있어요. 바로 사용될 아이콘인데요.
보통 로고는 디자이너분들이 만들어주시는데 만약 없으시다면 AI 로고 제작 사이트에서 만드시거나 Logobook 같은 사이트를 참고해서 만들어도 좋을 것 같아요. AI 로고 제작 사이트를 써보긴 했는데 원하는 퀄리티로 나오지는 않았어요.

디자인 다 만들어졌다면 로고가 앱 아이콘 규격에 맞는지 확인해야 해요. 그건 앱 아이콘 만들 때 참고할 것을 보면 도움이 될 거예요.

logo.png 같은 파일이 준비되었다고 생각하고 마저 설명을 해드릴게요.
flutter_launcher_icons 패키지를 dependencies에 추가해 주세요: flutter pub add flutter_launcher_icons

그런 다음 터미널에 flutter pub run flutter_launcher_icons:generate 명령을 쳐주세요.

그러면 flutter_launcher_icons.yaml 파일이 만들어져요. 이 파일을 열어 원하는 설정으로 변경하면 돼요. 저는 image_path만 제가 설정한 경로로 수정했어요.

image

필요한 설정을 입력한 이후, flutter pub run flutter_launcher_icons 명령을 실행하면 패키지가 알아서 수행해요. 그러면 아이콘이 변경되어 있을 거예요.

만약 아이콘이 변경되지 않았다면, 설치된 앱을 지웠다가 다시 실행해 보거나 flutter pub run flutter_launcher_icons 명령을 실행하지 않아서일 확률이 커요.

rename#

rename 패키지는 global로 설치하거나 패키지에 추가해줘야 해요.

저는 다른 프로젝트에서도 사용할 것 같아 global로 설치해 줬어요.
dart pub global activate rename 명령을 실행시켜 주세요.

명령은 GitHub - rename에서 보실 수 있어요.

저는 App name 변경과 Bundle id만 변경할 거라 이 명령을 어떻게 썼는지 소개할게요.

# 원하는 이름 ex) 이때
rename setAppName --targets ios,android,web,windows,macos,linux --value "{원하는 이름}"
 
# 원하는 식별값 ex) com.ittae.calendar
rename setBundleId --targets ios,android,web,windows,macos,linux --value "{원하는 식별값}"

앱스토어에선 번들 ID는 하나의 앱이 갖는 유일한 식별자예요.
기기별(macOS, iOS, watchOS)로 따로 구분할 수 있고 와일드카드(*)로 처리할 수도 있어요.

두 패키지를 적용하면 깃의 변경 사항을 확인할 수 있어요. 패키지를 하나씩 실행시키면서 어디가 바뀌었는지 확인하는 것도 좋을 것 같아요!


Reading, after a certain age, diverts the mind too much from its creative pursuits. Any man who reads too much and uses his own brain too little falls into lazy habits of thinking.

— Albert Einstein


Other posts
cover_image
 ・ 1 min

블로그에 적용할 것들!

cover_image
 ・ 3 min

NEXT.js에서 public 폴더 외에서 이미지 사용하기

cover_image
 ・ 2 min

42서울을 준비하는 사람들을 위한 책 추천