웹 앱 매니페스트를 사용하여 사이트 전체 테마 색상 지정

Chrome은 2014년에 사이트에 사용할 테마 색상 개념을 도입했습니다. 테마 색상은 주소 표시줄과 같은 UI 요소의 색조를 적용할 색상을 브라우저에 알려주는 웹페이지의 힌트입니다.

예를 들어 다음은 테마 색상이 적용된 사이트와 적용되지 않은 사이트입니다.

테마 색상
테마 색상

문제는 모든 페이지에서 테마 색상을 정의해야 한다는 점입니다. 사이트나 기존 사이트가 큰 경우 사이트 전체에 여러 변경사항을 적용하는 것이 실현 불가능한 경우도 있습니다.

Chrome 46 (2015년 9월 베타 버전)부터 매니페스트에 theme_color 속성을 추가하면 사이트가 홈 화면에서 실행될 때 사용자가 도메인에서 방문하는 모든 페이지에 색상이 자동으로 적용됩니다.

페이지에 이미 테마 색상 메타 태그(예: <meta name="theme-color" content="#2196F3">)가 있는 경우 매니페스트의 값 대신 페이지 수준 구성이 사용됩니다.

매니페스트에 theme_color 속성을 추가하고 HTML 색상을 지정하기만 하면 됩니다.

    "theme_color": "#2196F3"

실제 사례를 확인하려면 세계 최고의 에어호른인 에어호너를 방문하여 홈 화면에 추가하세요. 또는 사이트의 매니페스트를 살펴보세요.

FAQ

  • 사이트가 홈 화면에서 실행되지 않는 경우에도 적용되나요?
    예.
  • 사용자가 둘러보기만 하는 경우 등 사이트 전체에 적용되나요?
    현재로서는 그렇게 하려면 브라우저가 매니페스트를 훨씬 더 자주 다운로드해야 하며 현재는 우선순위가 낮은 애셋입니다. 이는 사용자가 사이트를 홈 화면에 추가할 때 파싱하기 위한 것입니다.