iOS Safari에서는 웹사이트의 바로가기 아이콘 이미지와 타이틀을 미리 설정하여 사용자들이 쉽게 인식할 수 있도록 지원하는데
이를 가능하게 하는 방법 중 하나는 메타 태그를 이용하는 것이다.
단, 그 전에 알고 넘어가야할 2가지가 있다.
웹 상단 탭에 보여지는 아이콘인 파비콘과 사이트를 공유했을 때 나타나는 OG이미지 설정이다.
1. 파비콘 (favicon)
파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘으로 즐겨찾기 아이콘 (favorite icon)의 줄임말.
책갈피, 즐겨찾기 추가를 했을 때 보여지는 아이콘이다.
<link rel="shortcut icon" href="(이미지 경로)"/>
2. 오픈 그래프 (OG)
오픈그래프(OG, 오픈 그래프 프로토콜, 어떤 HTML 문서의 메타정보를 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜.
카카오톡이나 블로그에 url을 공유했을때 보여지는 썸네일이다.
<meta property="og:title" content="웹사이트 타이틀 또는 페이지 제목"/>
<meta property="og:image" content="썸네일 이미지"/>
<meta property="og:url" content="링크될 url"/>
<meta property="og:description" content="부연 설명"/>브라우저에 보여지는 HTML 문서의 기본설정들은 주로 <head> 에서 작성한다.
이제 아이폰 홈화면에 바로가기 아이콘을 추가해보자!
사파리(safari)에서 제공하는 바로가기 추가하는 법 3가지
1. 책갈피 추가
2. 즐겨찾기에 추가
3. 홈 화면에 추가
위 설명과 같이 책갈피와 즐겨찾기는 파비콘으로 등록해놓은 아이콘이 보여지고, 이름은 OG 타이틀이 기본으로 설정되어있다.
하지만 홈 화면에 추가 했을 때는 파비콘이 아닌 해당 페이지에 가장 상단에 있는 쌩뚱맞은(?) 이미지가 보여진다. 🤔
이 때 해결방법은 또 다른 meta 태그를 추가해야한다.
👇 바로가기 아이콘 이미지와 타이틀을 추가하는 메타 태그
<!-- 바로가기 아이콘 이미지 -->
<link rel="apple-touch-icon" href="(이미지 경로)">
<!-- 바로가기 타이틀 -->
<meta name="apple-mobile-web-app-title" content="웹사이트 타이틀">추가로, apple-touch-icon 메타 태그의 sizes 속성을 지정하여 다양한 크기의 아이콘 이미지를 지정할 수 있고,
apple-touch-icon-precomposed 속성을 사용하면 아이콘 이미지에 라운드 코너 등의 효과를 적용할 수 있다. (안써도 무관)
파비콘으로 지정한 이미지를 바로가기 아이콘으로 동일하게 지정해줘도 좋다. 보통 그렇게 사용한다!
다만 아이콘의 컬러나 요소에 따라 2가지로 사용하는게 좋을 때가 있다.
아이콘에 시각적 요소가 많은 경우, 파비콘은 작게 보이기때문에 그저 지저분할 뿐이다 🤦
→ 파비콘은 심플하게 따로 제작하여 지정하고, 바로가기 아이콘은 시각적 요소를 많이 보여주는 앱 아이콘같은 이미지를 지정하면된다.
'퍼블리싱' 카테고리의 다른 글
| 디자이너들이 꼭 알아야할, Bodymovin 플러그인 설치법 (2) | 2023.03.02 |
|---|---|
| HTML 웹에 Lottie 애니메이션을 추가하려면 - 리액션 UI (1) (0) | 2023.03.01 |