스플래시 화면 이미지 생성기

아이폰이나 아이패드의 홈 화면에 저장한 웹 앱을 열면 iOS는 페이지가 로드되는 동안 실행 화면 이미지를 보여 줄 수 있습니다. 단, 그 화면과 방향의 픽셀 크기와 정확히 같은 이미지를 apple-touch-startup-image 태그로 연결해 둔 경우에만 가능합니다. 이 생성기는 현재의 모든 아이폰·아이패드 크기에 대해 세로와 가로로, 브랜드 색 위에 로고를 가운데 둔 이미지를 그리고, 알맞은 HTML까지 써 줍니다. 브라우저에서 실행됩니다.

사용 방법

1. 로고를 고릅니다. 배경이 투명한 PNG나 SVG가 가장 깔끔한 결과를 줍니다.
2. 배경색(가급적 매니페스트의 background_color)과 로고 크기를 정합니다.
3. 지원할 기기와 방향, 형식, 사이트의 폴더를 고릅니다.
4. ZIP을 내려받아 그 폴더에 이미지를 올리고, HTML을 각 페이지의 <head>에 붙여 넣습니다.

계산식

이미지 크기 = CSS 화면 크기 × 기기 픽셀 비율 (예: 440 × 956 × 3 = 1320 × 2868); 로고 배율 = 로고 크기 % × 짧은 변 ÷ 로고의 긴 변

각 링크 태그는 기기의 CSS 너비와 높이(항상 세로 방향 값), 픽셀 비율, 방향으로 이루어진 미디어 쿼리를 쓰므로 iOS가 이미지를 정확히 하나만 고릅니다. 화면 크기가 같은 기기는 이미지를 함께 씁니다. 목록은 iPhone SE(1세대)부터 iPhone 17 시리즈, iPhone Air, 그리고 17 Pro와 같은 크기를 쓰는 iPhone 18 Pro / Pro Max까지의 아이폰과, 9.7인치 모델부터 M4 이후 칩을 쓰는 iPad Pro까지의 아이패드를 다룹니다.

예시

iPhone 17 Pro Max(440 × 956 포인트, 3배)의 세로 이미지는 1320 × 2868 px이고 가로 이미지는 2868 × 1320 px입니다. 1000 × 400 로고를 30%로 하면 0.3 × 1320 = 396 px 너비, 158 px 높이로 줄어 화면 가운데에 놓입니다.