최신 브라우저를 사용하면 아이콘, 주소 표시줄 색상 등의 특정 구성요소를 쉽게 맞춤설정할 수 있으며 맞춤 타일 등도 추가할 수 있습니다. 이 간단한 조정으로 몰입도를 높이고 사용자를 사이트로 돌아오게 만들 수 있습니다.
최신 브라우저를 사용하면 아이콘, 주소 표시줄 색상 등의 특정 구성요소를 쉽게 맞춤설정할 수 있으며 맞춤 타일 등도 추가할 수 있습니다. 이 간단한 조정으로 몰입도를 높이고 사용자를 사이트로 돌아오게 만들 수 있습니다.
멋진 아이콘 및 타일 제공
사용자가 웹페이지를 방문할 때 브라우저는 HTML에서 아이콘을 가져오려고 시도합니다. 아이콘은 브라우저 탭, 최근 앱 전환, 새 탭 (또는 최근 방문 탭) 페이지를 비롯한 여러 곳에 표시될 수 있습니다.
고품질 이미지를 제공하면 사이트의 식별이 더 쉬워지므로 사용자가 더 쉽게 사이트를 찾을 수 있습니다.
모든 브라우저를 완전하게 지원하려면, 각 페이지의 <head>요소에 몇 개의 태그를 추가해야 합니다.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome 및 Opera
Chrome 및 Opera는 icon.png를 사용하며, 기기에 따라 필요한 크기로 배율이 조정됩니다. 자동 배율 조정을 방지하려면 sizes 속성을 지정하여 추가 크기를 제공할 수도 있습니다.
Safari
Safari는 rel 속성 apple-touch-icon과 함께 <link> 태그를 사용하여 홈 화면 아이콘을 나타냅니다.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
180px 또는 192px 정사각형의 투명하지 않은 PNG가 apple-touch-icon에 적합합니다.
sizes 속성을 통해 여러 버전을 포함하는 것은 권장하지 않습니다.
이전에는 iOS용 Safari에서 시각 효과를 추가하지 않기 위해 -precomposed 키워드를 고려했지만 iOS 7부터는 필요하지 않았습니다.
Internet Explorer 및 Windows Phone
Windows 8의 새로운 홈 화면은 고정된 사이트에 대한 네 가지 레이아웃을 지원하며 네 개의 아이콘이 필요합니다. 특정 크기를 지원하지 않으려는 경우 관련 메타 태그를 제외할 수 있습니다.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Internet Explorer의 타일
Microsoft의 '고정된 사이트' 및 회전형 '라이브 타일'은 다른 구현을 훨씬 넘어서는 기능이며, 이 가이드에서는 다루지 않습니다. MSDN의 라이브 타일을 만드는 방법에서 자세히 알아보세요.
브라우저 요소의 색상 지정
다양한 meta 요소를 사용하여 브라우저와 심지어 플랫폼의 요소도 맞춤설정할 수 있습니다. 일부 요소는 특정 플랫폼이나 브라우저에서만 작동할 수도 있지만 환경을 크게 개선할 수 있습니다.
Chrome, Firefox OS, Safari, Internet Explorer 및 Opera Coast에서는 메타 태그를 사용하여 브라우저 및/또는 플랫폼 요소의 색상을 정의할 수 있습니다.
Chrome 및 Opera용 메타 테마 색상
Android에서 Chrome의 테마 색상을 지정하려면 메타 테마 색상을 사용하세요.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari 전용 스타일 지정
Safari에서는 상태 표시줄 스타일과 시작 이미지를 지정할 수 있습니다.
시작 이미지 지정
기본적으로 Safari는 로드하는 동안에는 빈 화면을 표시하고 여러 번 로드한 후에는 이전 앱 상태의 스크린샷을 표시합니다. rel=apple-touch-startup-image를 사용하여 링크 태그를 추가하여 명시적인 시작 이미지를 표시하도록 Safari에 지시하면 이 동작을 차단할 수 있습니다. 예를 들면 다음과 같습니다.
<link rel="apple-touch-startup-image" href="icon.png">
이미지는 대상 기기 화면의 특정 크기여야 하며, 그렇지 않을 경우 사용되지 않습니다. 자세한 내용은 Safari 웹 콘텐츠 가이드라인을 참고하세요.
이 주제에 관한 Apple 문서는 많지 않지만, 개발자 커뮤니티에서는 고급 미디어 쿼리를 사용하여 적절한 기기를 선택한 다음 올바른 이미지를 지정하는 방식으로 모든 기기를 타겟팅하는 방법을 고안해냈습니다. 다음은 tfausak의 gist에서 발췌한 해결 방법입니다.
상태 표시줄 모양 변경
기본 상태 표시줄의 모양을 black 또는 black-translucent로 변경할 수 있습니다. black-translucent를 사용하면 상태 표시줄이 전체 화면 콘텐츠를 아래로 밀어내리지 않고 전체 화면 콘텐츠 맨 위에 표시됩니다. 그러면 레이아웃의 높이가 높아지지만 상단이 가려집니다. 필요한 코드는 다음과 같습니다.
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent를 사용한 스크린샷
black를 사용한 스크린샷