저는 Flutter로 앱을 만들고 있는데 지금은 시뮬레이터로 프로젝트를 돌리면 Flutter 로고가 뜨고 있어요.
기존에 만든 로고가 있지만 이걸 그냥 적용해 버리면 기존에 출시된 앱처럼 여백이나 크기를 신경 쓰지 않았기 때문에 이쁘게 안 들어가는 느낌이에요.
그래서 어떻게 하면 여백과 크기를 잘 조절해서 넣을 수 있을까 찾아봤어요.
기존에 만든 로고는 Figma를 통해 만들었기 때문에 Figma 커뮤니티에서 앱 아이콘을 쉽게 만들 수 있는 방법을 찾아봤어요.
이 App Icon Toolkit - iOS/macOS/Android 도구상자를 사용하면 Keyline과 여러 예시를 보여주기 때문에 제 아이콘을 컴포넌트에 적용하면 쉽게 예시를 볼 수 있어요. 디자인을 잘 모르더라도 느낌으로 여백이나 크기를 조절할 수 있어요.
여기서 알아두셔야 할 점은 Icon_Art 프레임 안에는 Material - Grid와 iOS - Grid가 같이 보이는 상태로 있어요. 그렇기 때문에 둘 중 하나를 선택하시고 지우거나 보이지 않게 변경하시는 게 좋아요. 저는 iOS - Grid를 선택했어요. 그리고 bg 때문에 선이 잘 안 보이기 때문에 이것도 보이지 않게 변경하는 게 좋아요.
저는 1024x1024 크기에 892x892를 큰 틀로 잡아두고 로고가 원 안에 들어오도록 했어요. 특별한 경우를 제외하고는 원 크기를 넘지 않도록 원 안으로 로고가 들어오도록 만드는 것 같아요. 필요하다면 원 안에서 여백을 잡아 주셔도 좋아요.
좌우여백을 66px로 주면 1024px에서 892px가 돼요. 그리고 892x892 프레임에서 66px 크기만큼 좌우여백을 주면 760px이 돼요. 그러면 1024px에서 좌우여백 132px을 갖는 사각형 안에 로고가 배치돼요.
저는 이게 제 로고 사이즈에서는 크기도 너무 크지 않으면서 너무 작지도 않은 느낌이 들었어요(제가 디자인 전공이 아니라 느낌으로만 설명하네요ㅜ).
추가로 아래 링크도 앱 아이콘에 관해 설명하고 있으니 살펴보길 추천해 드려요.
- App Icon Toolkit 대신 사용하면 좋은 피그마 파일: Icon Grid Templates
- 앱 UI 디자인 기본 : 아이콘 디자인 시 알아야 할 개념 및 가이드라인 - UX/UI 디자인 강좌 2-4
- ios 애플 아이콘 그리기 - 1. 그리드 탬플릿 키라인
- Google Play icon design specifications
- Apple Developer 앱 아이콘
앱 아이콘에 대한 디자인이 정리가 되면 나중에 Flutter에서 아이콘을 적용하는 방법에 대해 글을 쓸게요!
A fine quotation is a diamond on the finger of a man of wit, and a pebble in the hand of a fool.
— Joseph Roux
