Flutter/강의 정리

Flutter - 앱 아이콘 추가하기

비뀨_ 2023. 2. 14. 15:42

해당 글은 아이콘을 등록하는 방법만을 정리해서, 원하는 게 나오지 않을 수도 있으니 그 점을 유의해주시면 감사하겠습니다.

앱 아이콘은 앱의 얼굴이라고도 볼 수 있습니다.

(편의를 위해 앞으로는 반말로 하겠습니다.)

 

가장 먼저 해야 할 것은 역시 아이콘 이미지를 받는 것인데,

일단 연습을 위한 것이기 때문에 무료 아이콘을 찾아보자.

실험에 사용할 아이콘은 플랫 아이콘에서 다운로드 받았다.  (무료지만 배포 시 저작권자는 표시해줘야 함!)

 

다운로드한 아이콘은 기기별 화면크기가 다르기 때문에  변환시켜줘야 한다.

아래의 링크에서 변환할 수 있다.

https://www.appicon.co/

 

App Icon Generator

 

www.appicon.co

 

다운로드하면 아래와 같이 zip 파일을 받는데 압축을 풀어주자.

 

기본적으로 Flutter는 프로젝트를 생성할 때 android와 ios 디렉터리를 만들어준다.

 

우선 안드로이드부터 진행하면, 

android\app\src\main\res

위의 폴더 구조를 따라가면 여러 가지 파일 목록이 보인다.

파일 탐색기로 연다.

좌 : 프로젝트의 아이콘이 있는 res 폴더 , 우 : 다운받은 아이콘을 압축해제 한 폴더

프로젝트의 res 폴더 안의 mipmap으로 시작되는 폴더를 모조리!! delete 해서 숙청해 버린다!!

그리고 다운로드한 mipmap 파일을 전부 넣어준다!

 

그럼 끝!!!! 은 아니고 IOS 해야 한다

 

ios\Runner

여기는 폴더가 좀 짧은데 Runner 디렉터리 안에는 Assets.xcassets가 있다.

안드로이드와 똑같이 Assets.xcassets 폴더를 지우고, 다운로드한 폴더 안의 것으로 교체하자

 

그리고 안드로이드 또는 IOS 에뮬레이터를 실행하면!!!

되는 사람도 있을 거고, 되어야 하는데 아래와 같이 오류가 나는 분들이 있을 것이다.

나는 안드로이드에서 실행했고, 오류가 났다.

 

안드로이드 밖에 몰라서.. 일단 안드로이드 기준으로 설명하겠다.

끝을 보면 'mipmap/ic_launcher를 찾을 수 없다'라고 하는데 기본 아이콘 이름은 ic_launcher인데 위의 캡처 이미지를 보면 알 수 있듯이 나는 appicon.co에서 파일을 변경할 때 test라는 이름으로 받았다.

그래서 mipmap/ic_launcher가 아니라 mipmap/test가 되어야 한다.

그걸 어디에다 설정하냐?!?

 

아이콘을 집어넣은 res 폴더 아래를 보면 AndriodManifest.xml 파일이 있는데 

그걸 열고 

 

저기 6라인에 andriod:icon 부분을 수정해 주면 된다.

 

다시 빌드시키면 

 

쨘!! 하고 등록한 아이콘이 적용이 된다.