안드로이드 홈 화면에 웹 앱을 추가했는데, 예쁜 로고가 하얀 원 안의 아주 작은 '우표'처럼 변해버린 적이 있나요? 이것이 바로 개발자들이 흔히 겪는 '하얀 상자의 굴욕'입니다. 안드로이드는 기기 테마에 따라 아이콘을 원형, 사각형, 혹은 모서리가 둥근 사각형으로 자르는 '적응형 아이콘' 시스템을 사용합니다. 이때 maskable icon favicon을 설정하지 않으면 시스템이 안전을 위해 아이콘 주위에 강제로 여백을 채워버립니다.
2026년의 사용자들은 PWA가 네이티브 앱과 똑같이 느껴지기를 원합니다. Spotify나 Slack을 보세요. 어떤 폰에서도 아이콘이 화면을 꽉 채우며 완벽하게 어우러집니다. 그 비결은 Web App Manifest의 maskable 속성에 있습니다. 오늘 여러분의 아이콘을 프로답게 수정해 봅시다.
사전 준비: 전문가를 위한 설정
코드를 만지기 전에 소스 이미지가 필요합니다. 512x512 픽셀의 PNG 파일을 권장합니다. SVG도 훌륭하지만(자세한 내용은 SVG favicon 가이드 참조), 안드로이드 매니페스트에서는 PNG가 가장 안정적으로 작동합니다. 가장 중요한 점은 배경을 단색으로 채워야 한다는 것입니다. 투명 배경을 사용하면 OS가 임의의 색상을 채워버려 디자인이 망가질 수 있습니다.
1단계: 80% 안전 영역의 법칙
가장 흔한 실수는 로고를 이미지 끝까지 꽉 채우는 것입니다. 마스커블 아이콘은 일종의 '여유분'이 있는 이미지입니다. 시스템이 가장자리를 깎아내기 때문에, 중요한 로고는 이미지 중앙의 80% 영역 안에 배치해야 합니다. 이미지 정중앙에 원을 그렸을 때 그 안에 로고가 다 들어온다면 합격입니다.
2단계: 에셋 생성
여러 사이즈를 일일이 만들 필요는 없습니다. Mzu favicondl을 사용하여 기본 아이콘 형식을 맞춘 뒤, Figma 같은 툴에서 로고 주변에 10% 정도의 배경색 여백을 주고 내보내기 하세요. 현재 아이콘 상태가 궁금하다면 아이콘 감사 가이드를 통해 확인해볼 수 있습니다.
3단계: manifest.json 업데이트
이제 브라우저에게 이 아이콘은 잘려도 괜찮은 디자인이라고 알려줘야 합니다. 'purpose': 'maskable' 속성이 없으면 브라우저는 이를 일반 아이콘으로 취급하여 하얀 테두리를 추가합니다. manifest.json에 다음과 같이 작성하세요.
{
'name': '나의 프로 앱',
'icons': [
{
'src': '/icons/icon-192x192.png',
'sizes': '192x192',
'type': 'image/png',
'purpose': 'any'
},
{
'src': '/icons/maskable-512x512.png',
'sizes': '512x512',
'type': 'image/png',
'purpose': 'maskable'
}
]
}'purpose': 'any'는 멀티태스킹 창 등 일반적인 용도이며, 'maskable'이 안드로이드 홈 화면용입니다. Next.js를 사용 중이라면 Next.js favicon 가이드에서 더 자세한 설정법을 확인하세요.
4단계: 개발자 도구로 검증
배포하기 전에 PC 크롬에서 확인하세요. F12를 눌러 Application 탭의 Manifest 메뉴로 갑니다. 아이콘 섹션에서 'Show only the minimum safe area for maskable icons'를 체크해 보세요. 로고가 잘리지 않고 원 안에 잘 보인다면 성공입니다.
자주 하는 실수
투명 PNG를 사용하는 것이 가장 큰 실수입니다. OS가 배경을 임의의 회색이나 흰색으로 채워 브랜드 가치를 떨어뜨립니다. 반드시 브랜드 컬러 배경을 넣으세요. 또한 HTML <head>에 <link rel='manifest' href='/manifest.json'>를 연결했는지 꼭 확인하세요.
마스커블 아이콘 설정은 단 10분이면 충분하지만, 앱의 전문성을 결정짓는 아주 중요한 디테일입니다. 모바일 아이콘을 해결했다면, 이제 Mzu favicondl에서 데스크톱용 표준 아이콘 세트도 깔끔하게 생성해 보세요.