아이콘 및 브라우저 색상

최신 브라우저를 사용하면 아이콘, 주소 표시줄 색상 등 특정 구성 요소를 쉽게 사용자 지정할 수 있으며 사용자설정 타일 등을 추가할 수도 있습니다. 이 간단한 조정으로 참여도를 높이고 사용자가 사이트를 다시 방문하도록 유도할 수 있습니다.

폴 바카우스
폴 바카우스

최신 브라우저를 사용하면 아이콘, 주소 표시줄 색상 등 특정 구성 요소를 쉽게 사용자 지정할 수 있으며 사용자설정 타일 등을 추가할 수도 있습니다. 이 간단한 조정으로 참여도를 높이고 사용자가 사이트를 다시 방문하도록 유도할 수 있습니다.

멋진 아이콘과 타일 제공

사용자가 웹페이지를 방문할 때 브라우저는 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">

apple-touch-icon에 180px 또는 192px 정사각형의 불투명 PNG가 적합합니다.

sizes 속성을 통해 여러 버전을 포함하는 것은 권장하지 않습니다. 이전에는 iOS용 Safari에서 시각 효과가 추가되지 않도록 -precomposed 키워드를 고려했지만 iOS 7 이후로는 필요하지 않았습니다.

Internet Explorer 및 Windows Phone

Windows 8의 새로운 홈 화면 환경은 고정된 사이트의 네 가지 레이아웃을 지원하며 4개의 아이콘이 필요합니다. 특정 크기를 지원하지 않으려면 관련 메타 태그를 생략할 수 있습니다.

<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">
Chrome에서 주소 표시줄에 스타일을 지정하는 테마 색상입니다.

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을 사용한 스크린샷