03782025년 11월 28일

[Flutter] Flutter에서 iOS 앱 아이콘 변경하기 (검정 테두리 문제까지 해결한 과정 정리)

| 서론

안녕하세요, 팡일입니다. Flutter 프로젝트를 진행하다 보면 가장 먼저 커스터마이징하고 싶은 요소 중 하나가 앱 아이콘입니다. 최근 Blridge 프로젝트의 iOS 아이콘을 변경하면서 예상하지 못한 검정 테두리 문제를 겪게 되었고, 이를 해결하는 과정에서 배운 점을 정리해보고자 합니다.

저는 flutter_launcher_icons 패키지를 사용하는 방식을 중심으로 아이콘을 적용했습니다. 다만, 필요에 따라 Xcode에서 직접 교체하는 방법도 함께 소개드리겠습니다.

| iOS 앱 아이콘이 까다로운 이유

iOS는 앱 아이콘 이미지 파일을 그대로 사용하는 것이 아니라, 다음과 같은 처리를 자동으로 적용합니다.

자동 라운드 코너(둥근 모서리)
자동 그림자(Shadow)
마스킹 처리

이 때문에 PNG 파일에 투명 배경, Drop shadow, Stroke 같은 시각적 효과가 남아 있으면, 홈 화면에서 검정 테두리처럼 보이는 현상이 발생할 수 있습니다.

저 역시 처음에는 PNG 파일을 정상적으로 추가했음에도 불구하고 검은 윤곽선이 생겼고, 원인을 찾는 데 조금 시간이 걸렸습니다. 결론적으로, PNG 내부에 남아 있던 Drop shadow 효과가 문제의 원인이었습니다.

| 아이콘 준비 단계 (가장 중요한 부분)

iOS에서 깨끗한 아이콘을 만들기 위해서는 다음 조건을 반드시 지켜야 합니다.

1024 × 1024 크기의 정사각형 캔버스를 사용합니다.
배경은 반드시 흰색으로 채우고, 투명 영역은 사용하지 않습니다.
Drop shadow, Stroke 등 모든 시각적 효과는 반드시 제거합니다.
실제 로고는 전체의 60~70% 정도 크기로 배치합니다.

저는 처음 PNG를 생성할 때 Drop shadow가 켜져 있는 상태에서 저장했고, 이로 인해 iOS에서 자동 적용되는 그림자와 겹쳐 검정 테두리가 생겼습니다. 그림자를 제거한 뒤 다시 적용하니 정상적으로 표시되었습니다.

| 방법 A — flutter_launcher_icons로 iOS 아이콘 적용하기 (제가 사용한 방식)

Flutter에서 가장 간단하게 iOS 아이콘을 반영하는 방법은 flutter_launcher_icons 패키지를 사용하는 것입니다. 저는 이 방식을 사용했고, iOS 아이콘만 따로 적용하도록 설정했습니다.

1) pubspec.yaml 설정

YAML

dev_dependencies:
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  ios: true
  android: false
  image_path_ios: "assets/icon/app_icon.png"

안드로이드는 그대로 두고 iOS만 변경하고 싶을 경우 위처럼 설정하시면 됩니다.

2) 아이콘 생성

code

flutter pub run flutter_launcher_icons

실행하면 iOS에서 사용하는 각 사이즈별 아이콘 파일이 자동으로 생성되고, ios/Runner/Assets.xcassets/AppIcon.appiconset/ 경로에 추가됩니다.

3) 빌드 캐시 정리 후 실행

code

flutter clean
flutter run

iOS는 이전 캐시가 남아 있는 경우 이전 아이콘이 계속 보일 수 있기 때문에 flutter clean을 함께 실행하는 것이 좋습니다.

| 방법 B — Xcode에서 직접 아이콘 교체하기 (참고용)

만약 자동화 방식보다 수동 작업을 선호하시거나 아이콘을 직접 조정하고 싶으시다면 Xcode에서 직접 교체할 수도 있습니다.

ios/Runner.xcworkspace를 엽니다.
Assets.xcassets/AppIcon을 선택합니다.
기존 아이콘을 삭제합니다.
1024px PNG 파일을 드래그하여 넣으면 Xcode가 자동으로 필요한 크기로 생성합니다.

이 방식은 디테일 조정이 필요할 때 특히 유용합니다.

| 자주 발생하는 문제와 해결 방법

1) 검정 테두리가 생김

PNG에 Shadow, Stroke, 투명 영역이 포함되어 있을 때 발생합니다.
모든 효과 제거 후 다시 저장하면 해결됩니다.

2) 아이콘이 변경되지 않는 경우

flutter clean, cd ios && pod install 후 다시 빌드합니다.

3) Android에서는 문제가 없는데 iOS에서만 문제가 발생하는 경우

iOS는 강제 마스킹과 그림자를 적용하기 때문에 자연스러운 현상입니다.

| 마무리

iOS 앱 아이콘은 단순해 보이지만, 실제로는 여러 규칙과 자동 효과가 적용되기 때문에 주의가 필요합니다. 저는 이번 작업을 통해 다음 세 가지가 가장 중요하다는 것을 다시 한 번 느꼈습니다.

투명 배경 사용 금지
Drop shadow·Stroke 효과 사용 금지
정사각형 PNG 기반으로 flutter_launcher_icons 적용

이 세 가지 원칙만 지키면 iOS 아이콘은 거의 문제 없이 적용됩니다. Flutter로 iOS 앱을 개발하시는 분들께 도움이 되길 바랍니다.

우측이 원본 사진인데, 좌측처럼 ios26부터는 리퀴드 글래스가 적용되어서 네온사인 느낌으로 변했네요!