모바일 크롬에서 특정 웹 사이트 접속 시 일반적인 툴바 색상(라이트/다크 모드), 일명 탭 색상이 아닌 해당 사이트만이 가진 고유 색상으로 변경되는 것을 볼 수가 있습니다.
해당 기능은 2014년 Chrome 39 버전에서 추가된 기능으로 메타 태그에서 “theme-color” 속성을 이용하여, 웹 브라우저의 툴바 영역(탭/주소 표시줄)의 색상을 지정할 수 있는 기능입니다.
다만 모든 Chromium 기반 브라우저에서 동작하는 것은 아니며, 이 글을 작성하는 현재 시점에서 테스트 결과 Microsoft Edge, Naver Whale 등 다른 브라우저에서는 탭 색상 변경이 정상적으로 동작하지 않는 것을 확인했습니다.
모바일 크롬에서 티스토리 접속 시 보여지는 탭 색상 지정하는 방법
모바일 기기로 내 블로그에 방문하는 이용자들에게 다른 블로그와 약간의 차별성을 두고 싶다면, 아주 간단한 방법으로 툴바 영역의 색상을 변경할 수 있습니다.
STEP 01. 티스토리 스킨 편집
운영하고 있는 티스토리 관리 페이지에서 ‘꾸미기’ 섹션의 [스킨 편집]을 클릭합니다.
스킨 편집 화면에서 [html 편집] 버튼을 클릭합니다.
STEP 02. 크롬 툴바에 적용할 색상의 RGB 코드 확인
다음으로 블로그에서 보여지길 원하는 크롬 툴바의 색상의 RGB 코드를 찾습니다. RGB 코드는 여러 가지 방법으로 찾을 수 있으며, 포토샵 등의 이미지 편집 프로그램에서 원하는 색상을 선택하여 확인할 수 있습니다.
또는 네이버에서 “색상코드표”로 검색하면 “색상 팔레트” 도구를 사용할 수 있으며, 이를 통해 원하는 색상의 RGB 코드를 얻을 수도 있습니다.
STEP 03. 티스토리 블로그 메타 태그 적용
RGB 코드를 확인했다면, 블로그의 HTML 편집 화면으로 돌아와 다음과 같이 메타 태그를 입력하고 [적용] 버튼을 클릭합니다.
<meta name="theme-color" content="#RGBCODE">예를 들어 모바일 크롬 툴바를 주황색으로 지정하고 싶다면 “#RGBCODE” 부분을 “#FFA53B”로 변경하시면 됩니다.
스킨 편집 후 모바일 장치로 블로그 접속 시 위 예시 화면과 같이 크롬 탭 색상이 변경된 것을 확인할 수 있습니다.
참고로 다크 모드에서는 사용자가 지정한 색상이 표시되지 않습니다.
마치며
티스토리뿐만 아니라 워드프레스, 블로그스팟 등 HTML 편집이 가능한 사이트, 블로그를 운영하고 있다면 메타 태그를 추가하여 모바일 크롬 툴바 영역의 색상을 지정하여 더 돋보이게 만들 수 있습니다.
