PWA를 홈 화면에 설치했는데 아이콘이 깨진 사각형으로 뜨거나, 앱을 켜자마자 허연 빈 화면이 잠깐 스쳐 지나간 적 있으세요? 저는 첫 PWA에서 둘 다 겪었어요. 웹으로 열 땐 멀쩡한데 홈 화면 앱으로 만들면 왜 이러나 한참 헤맸죠. 원인은 매니페스트(manifest, PWA의 설정 파일)에 아이콘과 색을 제대로 안 적어둔 거였어요. 오늘은 홈 화면 아이콘이 예쁘게 박히고, 앱을 켤 때 뜨는 스플래시 화면(splash screen, 시작 화면)이 깔끔하게 나오도록 설정하는 법을 상황별로 풀어볼게요.
38.1 아이콘은 매니페스트 어디에 적나요?
홈 화면 아이콘은 manifest.json의 icons 배열에 적어요. 브라우저는 여기 적힌 목록을 보고 기기 화면 크기에 맞는 걸 골라 써요. 각 아이콘은 파일 주소(src), 크기(sizes), 형식(type) 세 가지를 적어줘요.
{
"name": "메모 앱",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
여기서 192x192와 512x512는 사실상 필수예요. 안드로이드는 홈 화면 아이콘으로 192짜리를, 스플래시 화면이나 앱 목록에선 512짜리를 즐겨 써요. 이 두 개만 제대로 넣어도 깨진 사각형은 거의 사라져요. 그리고 이 manifest.json은 HTML의 head(머리 부분)에 링크로 연결해 줘야 브라우저가 읽어요.
<link rel="manifest" href="/manifest.json">
아이콘 크기는 왜 여러 개를 적을까요? 기기마다 화면 밀도가 달라서예요. 브라우저는 icons 목록 중 지금 기기에 가장 알맞은 크기를 골라 쓰고, 딱 맞는 게 없으면 가까운 걸 늘리거나 줄여요. 그래서 큰 512 하나만 덜렁 넣으면 작은 자리에서 흐릿하게 눌려 보일 수 있어요. 실무에선 192와 512를 기본으로 깔고, 여유가 되면 384 정도를 하나 더 끼워주기도 해요. 형식은 PNG가 무난하고, 배경이 비치는 투명 PNG로 만들어 두면 어느 배경에 얹혀도 자연스러워요.
38.2 아이콘 모서리가 잘려요, purpose가 뭔가요?
안드로이드에서 아이콘을 넣었는데 동그란 마스크에 모서리가 싹둑 잘리거나, 반대로 흰 배경 사각형이 동그라미 안에 어색하게 박히는 걸 볼 거예요. 이건 요즘 안드로이드가 아이콘을 원, 둥근 사각형 등 기기마다 다른 모양으로 잘라내기 때문이에요. 이 잘림에 대비한 아이콘을 마스커블 아이콘(maskable icon, 잘려도 되는 아이콘)이라고 불러요.
대응은 icons 항목에 purpose(용도) 속성을 붙이는 거예요.
{
"src": "/icon-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
purpose에 올 수 있는 값은 주로 any(기본값, 있는 그대로)와 maskable(잘림 대비)이에요. maskable 아이콘은 로고를 가운데로 몰고 가장자리에 넉넉한 여백을 둬서, 어떤 모양으로 잘려도 로고가 안 잘리게 만들어요. 실무에선 보통 any용 아이콘 따로, maskable용 아이콘 따로 두 벌을 준비해요. 참고로 한 항목에 "purpose": "any maskable"처럼 두 용도를 같이 적을 수도 있는데, 그러면 그 이미지 하나로 둘 다 쓰겠다는 뜻이라 여백을 넉넉히 잡은 이미지여야 안전해요.
38.3 앱 켤 때 뜨는 스플래시는 어떻게 만드나요?
여기가 반전인데요, 스플래시 화면은 따로 이미지를 만들어 넣는 게 아니에요. 안드로이드 크롬은 매니페스트에 적힌 값들을 조합해서 스플래시를 자동으로 그려줘요. 재료는 세 가지예요.
{
"name": "메모 앱",
"background_color": "#ffffff",
"theme_color": "#4a7dff",
"icons": [ ... 512 아이콘 포함 ... ]
}
앱을 켜면 background_color(배경색)로 화면을 채우고, 그 가운데에 512 아이콘을 놓고, 그 아래 name(앱 이름)을 보여줘요. 이게 스플래시의 정체예요. 그러니까 허연 빈 화면이 스쳤다면 십중팔구 background_color를 안 적어서 기본 흰색이 뜬 거예요. 앱 브랜드 색으로 background_color를 지정하고 512 아이콘만 제대로 넣어두면, 로딩 동안 브랜드감 있는 시작 화면이 자연스럽게 떠요.
참고로 theme_color는 스플래시가 아니라 앱 실행 중 상단 상태 표시줄(주소창 영역)의 색을 물들이는 값이에요. 둘을 헷갈리기 쉬운데, background_color는 시작 화면 바탕, theme_color는 실행 중 툴바 색이라고 기억하면 돼요.
한 가지 팁을 더 드릴게요. 스플래시가 뜨는 시간은 앱을 켜고 첫 화면이 준비되기 전까지의 아주 짧은 순간이에요. 그래서 여기에 무리하게 로고를 크게 넣거나 배경에 복잡한 그림을 욕심내기보다, 배경색과 로고의 대비만 깔끔하게 잡아주는 편이 훨씬 보기 좋아요. 배경을 어둡게 갔다면 로고는 밝게, 배경이 밝으면 로고 안에 색을 넣는 식으로요. 자동 생성이라 우리가 만질 수 있는 건 결국 이 색과 아이콘의 조합뿐이거든요.
38.4 아이폰은 왜 아이콘이 안 먹나요?
안드로이드에선 잘 되는데 아이폰 사파리에서 홈 화면에 추가하면 아이콘이 엉뚱하게 나오는 경우가 많아요. 아이폰은 예전부터 매니페스트의 icons를 온전히 따르지 않고, 별도의 HTML 태그를 보거든요. 그래서 head에 아이폰용 태그를 하나 더 넣어줘야 해요.
<link rel="apple-touch-icon" href="/icon-180.png">
apple-touch-icon은 아이폰이 홈 화면 아이콘으로 쓰는 전용 태그예요. 보통 180x180 크기 이미지를 넣어줘요. 이걸 빼먹으면 아이폰이 알아서 페이지를 축소한 못생긴 캡처 이미지를 아이콘으로 써버려서 깨진 것처럼 보여요. 매니페스트 icons와 apple-touch-icon 둘 다 넣어두는 게 실무 기본이에요. 안드로이드는 매니페스트를, 아이폰은 apple-touch-icon을 보니까요.
제대로 됐는지 확인하려면 크롬 개발자 도구의 Application(애플리케이션) 탭에서 Manifest 항목을 열어보세요. 인식된 아이콘들이 미리보기로 쭉 뜨고, 빠진 크기나 잘못된 경로가 있으면 경고 문구로 알려줘요. 홈 화면에 몇 번씩 설치해 보기 전에 여기서 먼저 걸러내면 편해요.
38.5 오늘 정리
아이콘과 스플래시를 정리할게요. 홈 화면 아이콘은 매니페스트 icons 배열에 192와 512 두 크기를 기본으로 넣고, HTML엔 rel="manifest"로 연결해요. 안드로이드의 아이콘 잘림엔 purpose를 maskable로 준 여백 넉넉한 아이콘으로 대비하고요. 스플래시 화면은 따로 만드는 게 아니라 background_color, name, 512 아이콘을 재료로 브라우저가 자동으로 그려주니, 배경색만 브랜드 색으로 잡아주면 허연 빈 화면이 사라져요. theme_color는 스플래시가 아니라 실행 중 툴바 색이라는 것도 기억하세요. 마지막으로 아이폰은 매니페스트를 온전히 안 보니 apple-touch-icon을 꼭 따로 넣어주고, 확인은 Application 탭의 Manifest에서 하면 돼요.